Introduction

WebSphere^TM Studio and VisualAge^TM for Java^TM are being replaced by a new product, that of IBM WebSphere Studio Application Developer. Application Developer provides:

• HTML and image-editing support
• the ability to create and maintain JSPs^TM
• a Java development environment
• enterprise tools, including an integrated WebSphere Application Server, Advanced Single Server Edition, Version 4.0 to help you with your testing

For a complete description of Application Developer, and to download a trial version, go to the WebSphere Studio Application Developer Web site.

In this article, I will show you how to generate Web pages that access and display data stored in a database. This feature is available in the earlier WebSphere Studio Version 3.5, but now, with WebSphere Studio Application Developer, we can easily edit the generated source and test the functionality without having to move the code between multiple tools.

To walk through this article, I recommend that you have a basic understanding of Java, servlets, JSPs, and database access. You do not need to be very familiar with Application Developer, but I do recommend that you first walk through the Getting Started section of Application Developer's online help documentation. In Application Developer, select Help => Help Contents. Select Application Developer Documentation from the drop-down list and you will see the Getting Started section.

Back to top

What you will learn

After walking through this article, you will be able to generate pages and code that allow access to a database. You will have the ability to modify code and JSPs, and be able to test them inside the integrated WebSphere Application Server. You should be more confident finding your way around Application Developer.

The generated code uses the Dispatcher View design pattern. This has a controller for the business logic and other associated tasks such as logging and authentication. The controller passes control to a View, which displays the information, and view helpers, which complete the interactions between the view and the controller. For details of this pattern, go to the Java Developer Connection. You will need to register to access the page, but registration is free.

Back to top

The sample scenario

We will be building a simple database application: the user will be presented with a login page and, after successfully logging in, will be presented with some customer information.

There is a database that we will want to expose to users through a Web page. We will use our Java skills by using servlets and JSPs to carry this out. The database we will be using in the tutorial is DB2^TM, but you can also use any JDBC-compliant database.

Back to top

The tutorial

Step 1: Setting up the database

First, you will need to have a database and table to store and retrieve data from. In the example, I use a database called NETMAIL and a table called USER. You will need to run the following from a DB2 Command Window. From your Start menu, select Command Line Processor from the DB2 folder.

> CREATE DB NETMAIL 
 
> CONNECT TO NETMAIL 
 
> CREATE TABLE USER ( 
 
     USER_ID INTEGER NOT NULL , 
 
     FIRST_NAME CHAR(40) NOT NULL , 
 
     LAST_NAME CHAR(50) NOT NULL , 
 
     COUNTRY CHAR(50) , 
 
     USERNAME CHAR(40) , 
 
     PASSWORD CHAR(40) ) 
 
> INSERT INTO USER (USER_ID,FIRST_NAME,LAST_NAME,COUNTRY,USERNAME,PASSWORD)  
  VALUES (4,'Donald','Duck','US','Don','D') 
 
> INSERT INTO USER (USER_ID,FIRST_NAME,LAST_NAME,COUNTRY,USERNAME,PASSWORD)  
  VALUES (2,'Shaun','Sheep','UK','shaun','password')

To check that the data is added correctly, run:

> SELECT * FROM USER

This should report "'2 record(s) selected."

Step 2: Create Web project

We must create a Web project to hold all the code and resources related to this Web application.

1. To do this, go to the Web perspective by selecting Perspective => Open => Other. Select Web from the list, and click the Open button.
2. To create the new project, select File => New => Web Project.
   Note: The File => New list changes depending on the perspective you are in, so if you are not in the Web perspective, then you will not see the Web Project option.
3. In the resulting dialog, set the project name to be NetMail and leave everything else as it is. The EAR Project Name is the location that this Web project will be deployed to for testing, and can be left as DefaultEAR.
4. Select Finish.

You will see that two entries have been created in the navigator pane, and that each one has a number of files in it such as web.xml and application.xml (see Figure 1 below). These files are required for the Application Server to run; they are specified by the J2EE specification and by WebSphere Application Server. You don't need to understand exactly what they are, but double-click on them to view the editors associated with them. Application Developer has editors specifically for each file, but because these are XML files, you can edit them using the XML editor or your desired text editor.

Step 3: Create a Java package

It is a good idea to keep your code in separate Java packages depending on the role it performs. To create a Java package:

1. Select File => New => Other. Then, select Java in the left pane and Java Package in the right pane.
2. Select Next and then enter the package name of your choice. In this example, I chose to use the name, com.netmail. If the Folder field is empty, then browse for NetMail/source.
3. Select Finish. You will see that the package structure is created in the source directory of the NetMail Web project.

Step 4: Create application using the Database Web Page wizard

1. In the Web perspective, select File => New => Other. Select Web, and then Database Web Pages.
2. In the Create Web Pages to Access a Database page of the wizard, set the Destination Folder to the Web project you created and its Web application folder, for example, NetMail/webApplication.
3. Deselect the Detail Form check box. Selecting this option would allow us to filter data that we selected from our input page. However, since we will be using a unique username and password combination, only one record would be selected, so there is no need to filter the data.
4. In the Java package option, select Browse, and then choose the package that you just created, that is, com.netmail. The package name will appear in the box to the left of the button.
5. In the Model file, select View Bean. The models are similar, but the View Helper nodes vary. In the case of the View Bean model, the view helpers are Java-wrapper classes that manage all database interaction. In the case of the Tag Lib model, a set of custom JSP tags are used to manage database interactions.
   Figure 3. The Create Web Pages to Access a Database page filled out correctly
   
   
6. Leave everything else as it is, and click Next.
7. On the next page, select Be guided through creating an SQL statement. Also select the option, Connect to database and import a new database model. Now, click Next.
8. On the Database Connection page, the Connection Name is a logical name that can be whatever you wish. Leave it as it is. The Database Name, Username and Password must match whatever you have set up in your database.
   
   If you are using DB2 that is installed on the same machine, then make sure that the class location field is set correctly for your machine. If you are using another database, or DB2 on a remote machine, then select the appropriate database from the Database vendor drop-down menu. You must then enter the appropriate information for your chosen database, such as host name, JDBC driver classes location, and so on.
   
   
9. Finally, click Connect to Database. If it is successful, it will take you to a page that allows you to select items from the database. Otherwise, it will display the error it received trying to connect.

Step 5: Select the data from the database

1. Once you have successfully connected to the database, in the Tables view, expand the schema (in this case DB2ADMIN) and table nodes, and select the USER table you created. The first part up to the "." is the Schema name in DB2; this depends on which user created the table. For other databases, this may be different.
2. Click on the right arrow button to move the table to the selected tables list.
   Figure 4. The Tables view of the Construct an SQL Statement page of the wizard
   
   
3. Now, select the Columns tab. Expand the table in the available columns pane and select the data to be shown in the results page. Select USER_ID, FIRST_NAME, LAST_NAME and COUNTRY, and use the right arrow to move them into the selected columns list.
   Figure 5. The Columns view of the Construct an SQL Statement page of the wizard
   
   
4. We now want to filter our selection based on the username and password we give. Click the Conditions tab.
5. In the grid that is displayed, clicking on the cells creates a drop-down list with the available options. The drop-down menus can take a moment to appear.
6. You should select:
   
   

   Column	Operator	Value	And/Or
   DB2ADMIN.USER.USERNAME	=	:username	AND
   DB2ADMIN.USER.PASSWORD	=	:passwd

   
   
7. In the Value column, you can either use the expression builder or manually type in the variable. If you type it in manually, be sure to remember the ":" at the front. You must select an option from the And/Or column before the next row in the grid is accessible. If you can't select a cell on the second row, it is probably because you forgot to do this.
8. Select Next and it will show you the SQL constructed to perform the query.
9. You can check the SQL by selecting the execute button. Select to execute, and enter parameters into the corresponding value cells in the grid. Because you are entering String values, ensure that you put single quotes (') around the text, and note that the values are case sensitive. At run time, these values will be supplied by the user. Standard JDBC does not support named parameters; they are represented in the SQL statement by a "?" and referenced by position. The generated code uses IBM DBBeans which provide support for named parameters in an SQL statements. Select Finish to see the results and ensure that the query returns the data that you expect.
10. Select Next.
11. You do not need to change anything in the specifying the run-time database connection information screen. If you were to use a datasource in the application server, then you would reference it here.
12. Select Next.

Step 6: Customize the Web pages

You can now customize the default Web pages that will be created.

1. Use the first page to design the input form for your data. On the host variable pane, select username. In the properties table at the bottom left, select Label and change username to start with a capital letter, and ensure that the initial value is blank. You will see the changes in the Web page view on the right.
2. Select passwd and change its label to Password, and the Input Type to password.
3. In the properties table, select the Page tab and change Page Title to Login Page. Click in another cell in the properties page to ensure that the change is not lost.
   Figure 6. Customizing the Web pages using the Design an Input Form page of the wizard
   
   
4. Select Next.
5. On the Result page, you can change the labels for the columns to more readable names.
   Figure 7. The Create Main Result Table Web Page of the wizard
   
   
6. Select Next. On the Specify Prefix page, change the prefix to something that describes the functionality of the pages; in this case, it will be Login.
7. Select Finish. The Web pages and Java code will be created.
   
   Files will be created in a number of locations. In the source directory, there will be two Java source files created. One controls the interaction of the Web pages, and the other is used to store the database results. In the view helper bean (LoginMasterViewBean.java), it uses the com.ibm.db.bean package. Javadoc information about using IBM dB Beans can be found in:
   {install_dir}\plugins\com.ibm.etools.webtools\jars\dbbeans_javadoc.zip
   
   There are two corresponding Web pages created: an HTML file that has the fields used to enter the login information, and a JSP file that displays the results. Double-click on the files to view and edit them.

A major benefit that Application Developer provides is the ability to change between editing HTML files, JSP files and Java code quickly and easily within one tool. Changes made are also automatically updated in the test environment. The change, build, deploy and test cycle is cut to simply the change and test cycle, speeding up the development time considerably.

Step 7: Test the application

Testing the new database application is straightforward.

1. Right-click on the input HTML file (LoginInputForm.html) and select Run On Server. It won't take very long to create the relevant configuration files for the application server and then the Web page will be displayed.
   Application Developer will have switched the view to the Server Perspective; this is used to control the WebSphere Application Server that is integrated with the tool.
2. If you have entered some data into the database, you can enter the username and password.
3. Depending on the database you are using, you may need to add the database's JDBC classes to the server. You will need to do this if you get an error message similar to the following, showing that it cannot find the JDBC driver class (the exact class it cannot find will depend on the database you are using):
   
   Error Message: Cannot find the class for the specified JDBC driver COM.ibm.db2.jdbc.app.DB2Driver.
com.ibm.db.beans.DBException: ...

   This is simple to solve. In the Server Configuration pane in the bottom left of the window, expand Server Instances, right-click WebSphere v4.0 Test Environment, and select Open.

   In the main window, click the Paths tab and add the classes needed for your JDBC driver. You will only need to do this the first time you run the application on the server.

4. Ensure you save the changes; either type Ctrl-S or close the main WebSphere v4.0 Test Environment window. The * next to the name shows that it has not been saved yet.
5. You will need to restart the server. In the bottom right pane, select Server Control Panel, right-click on the server instance WebSphere v4.0 Test Environment, and select Start. Wait for the message in the console to say "open for e-business."
   Figure 9. The Server Configuration and Server Control Panel panes
   
   
6. Go back to your Web browser and click Back. You will now see your data input page. If necessary, reenter the data and click Submit. The results Web page is now displayed.
   Figure 10. The Web browser with the data displayed
   
   

We now have a working application that accepts user input on a Web page and retrieves data from the database associated with the user data entered earlier.

Step 8: Create a deployed EAR file

Now that the application is working, the project should be exported in an EAR file, ready to be deployed onto a test or production server.

To do this, select File => Export. Select EAR file from the list, and then select the DefaultEAR we chose at the beginning when we first created the Web project. Select a location to create the EAR file, and click Finish.

The EAR file will now be created, ready to be deployed into your WebSphere Application Server 4.0 environment.

Back to top

Summary

You have learned to use WebSphere Studio Application Developer to create a simple database application. The Web application uses HTML, JSPs, servlets and Java code, and was tested using the integrated WebSphere Application Server. Finally, the application was deployed in a Java standard EAR file ready to be deployed in a full test environment.

I hope that this article has demonstrated the productivity benefits of a single tool, WebSphere Studio Application Developer, that allows you to work on all the components that make up an interactive Web application.

About the author

Rate this article

Comments

Back to top

Table of contents

• Introduction
• What you will learn
• The sample scenario
• The tutorial
• Summary
• About the author
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

Dig deeper into WebSphere on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers