 | Level: Introductory Nathan Kirkham (mailto:nathankirkham@uk.ibm.com), Certified WebSphere Application Server Specialist, IBM UK
04 Jan 2002 This article shows 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.
Introduction WebSphereTM Studio and VisualAgeTM for JavaTM 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 JSPsTM
- 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.
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.
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 DB2TM, but you can
also use any JDBC-compliant database.
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:
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.
- To do this, go to the Web perspective by selecting Perspective => Open
=> Other. Select Web from the list, and click the Open button.
- 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.
- 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.
- 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.
Figure 1. The Web perspective
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:
- Select File => New => Other. Then, select Java in the left
pane and Java Package in the right pane.
- 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.
- Select Finish. You will see that the package structure is created
in the source directory of the NetMail Web project.
Figure 2. The Java package is now created
Step 4: Create application using the Database Web Page wizard
- In the Web perspective, select File => New => Other. Select Web,
and then Database Web Pages.
- 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.
- 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.
- 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.
- 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
- Leave everything else as it is, and click Next.
- 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.
- 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.
- 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
- 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.
- 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
- 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
- We now want to filter our selection based on the username and password we
give. Click the Conditions tab.
- 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.
- You should select:
| Column | Operator | Value | And/Or | | DB2ADMIN.USER.USERNAME | = | :username | AND | | DB2ADMIN.USER.PASSWORD | = | :passwd | |
- 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.
- Select Next and it will show you the SQL constructed to perform the
query.
- 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.
- Select Next.
- 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.
- Select Next.
Step 6: Customize the Web pages You can now customize the default Web pages that will be created.
- 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.
- Select passwd and change its label to
Password, and
the Input Type to password.
- 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
- Select Next.
- 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
- 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.
- 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.
Figure 8. Application Developer's Web perspective - now displaying
the newly created files
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.
- 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.
- If you have entered some data into the database, you can enter the username
and password.
- 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.
- 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.
- 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
- 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.
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 | | |
Nathan Kirkham
works for IBM's WebSphere Innovation Center, supporting customers across Europe using WebSphere Application Server and WebSphere Studio Application Developer. He is a Certified WebSphere Application Server Specialist. Nathan has previously worked as a Java developer and development manager on a variety of Java projects. You can contact him at
nathankirkham@uk.ibm.com
.
|
Rate this page
| |
