IBM®
Skip to main content
    Country/region [select]      Terms of use
 
 
      
     Home      Products      Services & solutions      Support & downloads      My account     

developerWorks > WebSphere >
developerWorks
IBM WebSphere Developer Technical Journal: Creating a Web Application using the Data Access Beans in WebSphere Studio V5
Downloade-mail it!
Contents:
Introduction
Prerequisites
Creating the Web application using JSPs
Creating the Web application using Struts
Conclusion
Acknowledgments
Resources
Download
About the author
Rate this article
Subscriptions:
dW newsletters
dW Subscription
(CDs and downloads)

Christina Lau
Senior Technical Staff Member, IBM Toronto Lab
15 Jan 2003

The article demonstrates how to use WebSphere Studio Application Developer Version 5.0 to create a simple online bookstore application with data access beans. The sample bookstore application lets users add and update their favorite books, and display books by categories.

© Copyright International Business Machines Corporation 2003. All rights reserved.

Introduction
This article demonstrates how to use IBM ® WebSphere® Studio Application Developer Version 5.0 (hereafter called Application Developer) to create a simple online bookstore application with data access beans. The sample bookstore application lets users add and update their favorite books, and display books by categories.

Important: WebSphere Studio Site Developer also provides support for data access beans. You can also use Site Developer to complete all of the steps described below. For simplicity, this article simply refers to Application Developer.

The application demonstrates the following tasks:

  • GetAllBooks. Returns a collection of all of the books in the database.
  • GetOneBook. Returns one particular book identified by its primary key.
  • GetBooksByCategory. Returns a collection of books based on the category passed to the query.
  • UpdateBook. Updates the attributes of a specific book that is identified by its primary key.
  • AddABook. Creates a new book via an SQL insert.

The first part of the sample shows how to create the Web application using JSPs. You will complete the following steps:

  1. Connect to the database
  2. Create the SQL statements
  3. Create a Web project
  4. Generate the data access JavaTM beans
  5. Create the JSPs to build the Web pages that call the data access Java beans
  6. Create a server project and configure the data source
  7. Run the application

The second part of the sample shows how to create the same Web application using Struts. It will re-implement parts of the bookstore application using Struts to demonstrate how to use the Model-View-Controller design paradigm. For more information on Model 2 and Struts, refer to the Application Developer product documentation.

Prerequisites
The download ZIP file contains a batch file, createbookstore.bat. Run this createbookstore.bat file to create a simple database called BOB with a BOOKSTORE table in DB2® UDB.

  1. From a command line, enter db2cmd to create a DB2 command window.
  2. Then, enter createbookstore.bat to run the batch file.

The download ZIP file also contains two WAR files. In Application Developer, select File => Import to import the WAR files into your workbench:

  • WebBookstore.war This is the first part of the sample. It shows how to use JSPs to call the data access beans.
  • WebBookStruts.war This is the second part of the sample. It shows how to use Struts to create the application.

Creating the Web application using JSPs

Connecting to the database

  1. In Application Developer, start a new workspace.
  2. Create a simple project called bookdb.
  3. Switch to the Data perspective.
  4. In the DB Servers view, select New Connection to launch the Database Connection wizard.
  5. Enter BOB as the database name. Click Finish. This will import the table definitions into the dB Servers view.
  6. Select the Con1 object, and select Import to Folder. Select the the folder bookdb that you created in step 2. This imports the BOOKSTORE table into the bookdb project (see Figure 1).

Figure 1. Import tables into the bookdb project
Screen capture showing the tables imported in the bookdb project

Creating the SQL statements
Now that you have imported the table definitions, you are ready to create five SQL statements:

Create GetAllBooks select statement

  1. Select Statements => New Select Statement. Enter a name such as GetAllBooks for the SQL statement name. Click OK. The SQL Query Builder opens.
  2. Drag the BOOKSTORE table onto the pane. This creates a new Select * from DEMO.BOOKSTORE statement.
  3. Click on the Execute icon in the toolbar to execute the query. The result is displayed in the DB Output view as shown below.
  4. Click Save to save the statement.

Figure 2. Create the GetAllBooks select statement
Screen capture showing the GetAllBooks select statement

Create GetOneBook select statement

  1. Select Statements => New Select Statement. Enter a name such as GetOneBook. Click OK.
  2. The SQL Query Builder opens. Drag the BOOKSTORE table onto the pane. This creates a new Select * from DEMO.BOOKSTORE statement.
  3. Click the Conditions tab. In the Column field, select the DEMO.BOOKSTORE.ISBN column. In the Operator field, select =. In the Value field, enter a host variable :isbn. This creates the Select * from FROM DEMO.BOOKSTORE WHERE DEMO.BOOKSTORE.ISBN = :ISBN statement to get one book by ISBN number (the primary key).
  4. Click Save to save the statement.

Create GetBookByCategory select statement

  1. Select Statements => New Select Statement. Enter a name such as GetBooksByCategory. Click OK.
  2. The SQL Query Builder opens. Drag the BOOKSTORE table onto the pane. This creates a new Select * from DEMO.BOOKSTORE statement.
  3. Click the Conditions tab. In the Column field, select the DEMO.BOOKSTORE.CATEGORY column. In the Operator field, select = . In the Value field, enter a host variable :category. This creates the Select * from FROM DEMO.BOOKSTORE WHERE DEMO.BOOKSTORE.CATEGORY = :category statement to retrieve books by category.
  4. Click Save to save the statement.

Create UpdateBook update statement

  1. Select Statements => New Update Statement. Enter a name such as UpdateBook. Click OK.
  2. The SQL Query Builder opens. Drag the BOOKSTORE table onto the pane to create a new UPDATE statement.
  3. In the Set page, select the DEMO.BOOKSTORE.TITLE column, and click > to add it to the list. Enter a host variable for the title such as :title.
  4. Repeat for the AUTHOR, CATEGORY, PRICE.
  5. Click the Where tab. In the Column field, select the DEMO.BOOKSTORE.ISBN column. In the Operator field, select = . In the Value field, enter a host variable :ISBN This creates the update statement that will update the attributes in a particular book.
  6. Click Save to save the statement. Figure 3 shows the update statement.

Figure 3. Create the UpdateBook update statement
Screen capture showing the UpdateBook update statement

Create AddABook insert statement

  1. Select Statements => New Insert Statement. Enter a name, for example, AddABook. Click OK.
  2. The SQL Query Builder opens. Drag the BOOKSTORE table onto the pane to create a new INSERT statement.
  3. In the Graph Pane, check all of the columns in the BOOKSTORE table to add every column.
  4. In the Grid pane, add a host variable for each of the column to create the INSERT INTO DEMO.BOOKSTORE(TITLE, ISBN, AUTHOR, CATEGORY, PRICE) VALUES (:title, :ISBN, :author, :category, :price) statement.
  5. Click Save to save the statement.

Creating a Web project
Now that you have created the SQL statements, you are ready to create the Web application that uses these statements. First, create a Web project:

  1. In Application Developer, select File => New => Web => Web Project.
  2. Enter the project name, WebBookstore. Click Finish.

Generating the data access Java beans
Next, generate the data access Java beans into the Web project. The data access Java beans provide an easy alternative to directly use the JDBC interface for database access. Go to Application Developer's Data perspective.

  1. Select the GetAllBooks statement. In the drop-down menu, select Generate Java Bean to launch the data access bean generation wizard.
  2. In the Java Class Specification page of the wizard, select the Source Folder name, WebBookstore/Java Source. Enter the package name, com.ibm.samples.generated, and bean name, GetAllBooks, as shown here.

    Figure 4. Generate the data access Java bean
    Screen capture of the Java Class Specification page of the data access bean wizard

  3. Click Next. In the Specify Runtime Database Connection Information page of the wizard, select Use Data Source Connection. Enter the Data source/JNDI name, jdbc/bob. Later in the section, Creating a server project and configuring the data source, you will set up the data source using the Server Configuration Editor.

    Figure 5. Specify the data source JNDI name
    Screen capture of the Specify Runtime Database Connection Information page of the data access bean wizard

  4. Repeat for the remaining SQL statements. Make sure that you enter the same data source name in each case. This ensures that the SQL statements share the same data source.

Creating the JSPs to build the Web pages that call the data access Java beans
Next, create the JSPs to call the generated beans. Go to the Web perspective in Application Developer. Select File => New => JSP File to create a JSP file. Enter the name of the JSP file, for example, AddABook.jsp. Click Finish. Page Designer opens automatically on the created file. You can now add HTML tags to the JSP, as well as the <jsp:useBean> tag to invoke the data access Java beans that you generated earlier. For simplicity, you can simply copy and paste the definition of the AddABook.jsp from the sample that is included in the WAR file.

Repeat this process to create the following JSP files:

JSP filesDescription
AddABook.jsp and AddABookResult.jspUse the AddABook bean to add a new book.
GetAllBooks.jspUse the GetAllBooks bean to get all of the existing books.
GetBookByCategory.jsp and GetbooksByCategoryResult.jspUse the GetBooksByCategory bean to get a book by category.
GetOneBook.jsp and GetOneBookResult.jspUse the GetOneBook bean to get one book by ISBN number.
UpdateBook.jsp, UpdateABook.jsp, and UpdateBookResult.jspUse the GetAllBooks, GetOneBook, and UpdateBook beans to display the list of books and allow the user to select one particular book for update.

Also, the start.html file is created to provide a starting point for this application.

Creating a server project and configuring the data source
Now, create a server project and configure the data source using the Server Configuration Editor. There are different ways to create a server project; you will take the simplest approach here:

  1. Select WebBookStore => Run On Server. Chose the Test Environment. Accept all of the defaults.
  2. Switch to the Sever Perspective. Under the Server Configuration view, double-click on the WebSphere 5.0 Test Environment icon to open the Server Configuration Editor.
  3. Click the Data source tab.
  4. Under the JDBC provider list, select the Default DB2 JDBC Provider.
  5. Under the Data source list, select Add. Select V5 Data Source. Click Next. In the Modify Data Source dialog, enter the JNDI name jdbc/bob to match what was specified earlier. Make sure the correct helper class is selected: com.ibm.websphere.rsadapter.DB2DataStoreHelper.

    Figure 6. Specify the JNDI name for the data source
    Screen capture of the Modify Data Source dialog

  6. Click Next. In the Value field, enter the database name BOB as shown below.

    Figure 7. Specify database name for the data source
    Screen capture of the Create a Data Source - Modify Resource Properties dialog

  7. Click Finish to exit the wizard. The Data sources page should look like the following. Press Ctrl-S to save the configuration.

    Figure 8. Complete Data source page
    Screen capture showing the Data sources page

Running the application
Restart the server. Then, select the start.html file, and select Run On Server. The following page displays in the Web browser. Select the different links to add, update, or display the list of books.

Figure 9. Running the bookstore application
Screen capture showing the start.html page displayed in the Web browser

Creating the Web application using Struts
This section demonstrates how to use Struts to efficiently separate your presentation logic from your model logic, to perform validation, and to use some of the custom JSP tags for error handling. This is not intended to be a tutorial on Struts. You will redo the Add a book scenario. The remaining application is left as an exercise for the user.

The following tasks are identical to the first sample. You will not repeat them here.

  1. Connect to the database
  2. Create the SQL statements
  3. Generate the data access Java beans
  4. Create a server project and configure the data source

The new steps consist of the following:

  1. Create a Web project with Struts features
  2. Lay out the Web diagram using the Web Diagram Editor
  3. Create and complete the JSP
  4. Create the ActionForm class
  5. Create the Action class
  6. Run the application

Creating a Web project with Struts features
First, create a Web project:

  1. Select File => New => Web => Web Project.
  2. Enter the project name, WebBookStruts.
  3. Select the Web Project features Add Struts support. This adds the necessary support for Struts into your Web project.
  4. Click Finish.

Once the project is created, import the data access beans that you earlier created into the Java source directory, and import the dbbeans.jar into the WEB-INF/lib directory. Alternatively, you can repeat the steps in the Generating the data access Java beans section to generate the Java beans.

Laying out the Web diagram using the Web Diagram Editor
Next, graphically lay out the Web application using the Web Diagram Editor:

  1. Select Web => Struts => Web Diagram to create a new Web diagram.
  2. Enter the name BookWeb.gph. Click Finish.
  3. Select New => Web Page Node to add three Web page nodes. Change their names to addABook.jsp, addABookResponse.jsp, and error.jsp.
  4. Select New => Action Mapping Node to add a new action mapping node. Change its name to addABook.
  5. Connect addABook.jsp to addABook.
  6. Connect addABook to addABookResponse.jsp. Label the connection success.
  7. Connect addABook to error.jsp. Label the connection failure.
  8. Connect addABookResponse.jsp to addABook.jsp.
  9. Connect error.jsp to addABook.jsp.

Figure 10 shows the completed Web diagram for this scenario.

Figure 10. Web diagram
The completed Web diagram for this scenario

Creating and completing the JSP
From the Web diagram, we can now create the JSP and complete its content as follows:

  1. Double-click addABook.jsp to launch the New JSP file wizard. Accept the defaults and click Finish.
  2. Repeat for the addABookResponse.jsp and the error.jsp files.
  3. Next, edit the addABook.jsp, addABookResponse.jsp, and error.jsp files to add in the content. You can copy and paste the content from the corresponding files in WebBookStruts.war.

Creating the ActionForm class
You can now create a Struts form bean to hold the data that is passed between the JSPs and the Actions that perform the data access call. The form bean will also handle any validation that is necessary on the user input fields.

  1. Select Web => Struts => ActionForm class.
  2. Enter the name AddABookForm as the class name.
  3. Click Next. In the New ActionForm Class - Choose new accessors for your ActionForm class dialog, select all of the addABook accessors so that the getters and setters will be generated in the form bean (see Figure 11):

    Figure 11. Create the AddABookForm form bean
    Screen capture of the New ActionForm Class - Choose new accessors for your ActionForm class dialog

  4. Click Next. In the New ActionForm Class - Create a mapping for your ActionForm class dialog, select Add new mapping. In the Configuration File Name field, select WEB-INF/struts-config.xml. In the Mapping Name field, enter addABookForm.

    Figure 12. Specify the name for the form bean in the struts-config.xml file
    Screen capture of the New ActionForm Class - Create a mapping for your ActionForm class dialog

  5. Click Finish. This generates the com.ibm.webbookstruts.forms.AddABookForm.java file and also updates the struts-config.xml file.
  6. Edit the AddABookForm.java file to add in the validation code in the validate() method. The validate() method is called by the controller servlet after the bean properties have been populated, but before the AddABookActionperform() method is invoked. Therefore it is a good place to put any field level validation such as making sure a field value is specified in this method. Also update the ApplicationResources.properties file. See the corresponding files in the WebBookStruts.war file.

Creating the Action class
Next, create the Struts Action class. The action class receives control from the input page. Using the input data stored in the form bean, it will call the AddABook data access Java bean to add a book to the database.

  1. Open BookWeb.gph. Double-click on the addABook action mapping to launch the New Action Mapping dialog.
  2. In the Form Bean Name field, select the addABookForm bean (see Figure 13).

    Figure 13. Create the action mapping
    Screen capture of the New Action Mapping dialog

  3. Click Finish. This creates the com.ibm.webbookstruts.actions.AddABookAction class.
  4. Edit the AddABookAction.java file to add the code to call the data access bean in the perform() method. Also update the ApplicationResources.properties file. See the corresponding files in the WebBookStruts.war file.

Running the application
Make sure the data source is configured properly and the server is started. Select the addABook.jsp file, and select Run On Server. The following page is displayed. Enter some values to add a new book.

Figure 14. Running the Struts-based application, Add a Book
Screen capture showing the Add A Book page displayed in the Web browser

Conclusion
WebSphere Studio Application Developer and Site Developer provide excellent tool sets that help you to easily create data access Web-based applications. This article demonstrated how to use Application Developer to connect to a database, build and test queries, generate data access beans, and use the data access beans to build a Web-based application with a JSP front-end. It also demonstrated how to use Struts to better partition the application, separating the user interface from the business logic. Using Application Developer's code generators, wizards, editors, and the built-in unit test environment, you can quickly prototype an interactive Web application that uses JDBC access to any relational database. As mentioned, you can also use WebSphere Studio Site Developer to carry out the steps detailed here.

Acknowledgments
The author would like to thank George Decandio, Becky Nin, and Tim Wilson for reviewing this article, and customer Bob Cancilla for his prompting to write this article.

Resources

Download
NameSizeDownload method
relatedfiles.zip0.9 MBFTP|HTTP
*Information about download methods
About the author
Christina Lau is a Senior Technical Staff Member at IBM. She currently leads the XML and Data Tools effort for WebSphere Studio Application Developer. You can reach Christina at clau@ca.ibm.com.


Downloade-mail it!
Rate this article

This content was helpful to me:

Strongly disagree (1)Disagree (2)Neutral (3)Agree (4)Strongly agree (5)

Comments?



developerWorks > WebSphere >
developerWorks
    About IBM Privacy Contact