Module 2: Add advanced features

In this module, you will learn how to use advanced features to modify the format of your Web pages, add a feature that allows users to upload files to the database, set up rules that will automatically send users to a particular page, and automate some administrative tasks such as key generation.

Learning objectives

This module teaches you more powerful ways to use data from a database. In this module, you will:

Format database records on a Web page
Add a component that allows uploading files to a database from a Web page
Navigate from page to page automatically
Automate some database administration tasks

Time required

This module should take approximately 1 hour and 30 minutes to complete. If you decide to explore other facets of dynamic Web sites while working on the tutorial, it could take longer to finish.

Prerequisites

If you have already completed Module 1: Creating Web pages with data connections, skip the rest of this prerequisites section and begin working on Lesson 2.1: Format a data table.

If you are beginning your work in this tutorial with module 2, without doing module 1 first, you must first import the required resources, set up the target server, and set up the database connection.

To import the required resources:

Import the project. Switch to the Web perspective (Window > Open Perspective > Web).
In the Project Explorer view of the Web perspective, ensure that your ClassifiedsTutorial project looks like the following image:

To set the target server:

In the Project Explorer view of the Web perspective, right-click ClassifiedsTutorial and select Properties
In the properties list, click Server.
In the Default server list, select the server that you want to use as the default. Click Apply.
In the properties list, click Targeted Runtimes.
In the Runtimes list, click the runtime that corresponds with the server that you selected. Click OK.

If the server that you want to use is not listed in the target runtime list, close the workbench and install the server that you want to use. Once the server is installed, follow the instructions to set the target server.

Note: If you do not see any servers listed in the Default server list, and you have installed server runtimes, it is possible the server needs to be configured. To configure a server, you can do the following:

Right-click all_records.jsp file, then select click Run As > Run on Server.
Choose Manually define a new server.
Select a server you have installed.
Follow the directions in the wizard to configure the server. The first time you run on server you may receive an error. To fix the error set the target server as described above, restart the server in the Servers view, and reload the Web page in the browser.

If you go back through the previously described steps for setting a target server, you will now find the default server is the one you have just configured. If a server is installed but not configured, it will not show up in the list of servers from which you can choose a default target.

For information on deploying SDOs on servers other than WebSphere Application Servers, refer to Help topic: Deploying SDOs on non-WAS servers.

To set up the database connection:

In the Project Explorer view, right-click ClassifiedsTutorial and select Properties. The Properties for the ClassifiedsTutorial window opens.
Click JDBC Connections.
In the JDBC Connection properties, click New. The New JDBC Connection window opens.
Click Create a new connection then click Next.
In the Select a database manager list, expand Derby, then select 10.1.
In the Database location field, click Browse and select <workspace_location>\ClassifiedsTutorial\WebContent\\database, where <workspace_location> is the directory of your current workspace. Click OK to close the Browse For Folder window.
In the Class location field, type in the location of the JAR or JARs that implement the JDBC driver class, or click Browse to select the location from your file system. Once you have chosen the location of the JAR files, click Open.
You may need to enter a User ID to access the database. A password is not required. The New Database Connection wizard should look like this:
In the New JDBC Connection wizard, click Finish. You return to the Properties for ClassifiedsTutorial window.
Click Configure project's database connections. The JDBC Connections properties window opens.
Click Edit next to the Runtime connection details section. Select Use driver manager connection as the runtime connection type. Click Finish then click OK.

You can browse the files in the tutorial Web project. To open a file, double-click it in the Project Explorer view. To view a map-like representation of how the pages are related, double-click Web Site Navigation in the Project Explorer.

The majority of your work in this sample will involve the following files:

all_records.jsp: This is the site's home page. It will display every classified ad in the database.
new_record.jsp: This page will create a new classified ad.
update_record.jsp: This page will change the details about an ad in the database or delete it.
classifiedTemplate.jtpl: This is the template for the site pages. It includes elements like the table and the gray "Welcome to the Classifieds" banner that are on every page. This page also has two navigational tabs below the gray banner that lead to the home page and the new classified ads page.

Lessons in this module

Lesson 2.1: Format a data table
The data table on the all_records.jsp page has a utilitarian appearance. It displays all of the records in the database and links to the other pages as it was intended to do, but it is not very attractive. In this exercise, you will improve this data table by adding a pager, style rules, and pictures of the items for sale.
Lesson 2.2: Use the file upload component
Use this lesson to learn how to give users the ability to upload pictures for the classified ads. This function is particularly important on the new_record.jsp and update_record.jsp pages. The file upload component allows users to browse their file system, upload a file to the database, and have this file show up in the database immediately.
Lesson 2.3: Use navigation rules
In this lesson, you will learn how to set up navigation rules to redirect a site user to specific Web pages.
Lesson 2.4: Use automatic key generation
In the previous lesson, you set up navigation rules to ensure that users entered a unique ID for the new classified ad. This process is frustrating and unrealistic, because you would not want your site users to find a unique ID through trial and error. In this lesson, you will set up automatic key generation so that the database assigns a unique number for each new record in the database automatically.
Module 2: Summary
You have completed Module 2: Add advanced features.