Exercise 2.1: Importing the required resources

If you are beginning your work in this tutorial with module 2 (without doing module 1 first), first import the required resources.

If you have already completed Module 1: Creating Web pages with data connections and you have the Web site you created in that module, then you do not need to complete this exercise. You can begin working on Exercise 2.2: Formatting a Data Table.

 

 

Importing the sample project file

The foundational Web pages and sample database for this tutorial are included in a ZIP file. These steps will lead you through opening that ZIP file so you can use those pages and the database. You do not need to extract this file if you have already completed module 1 of this tutorial.

1. From the menu bar, select File > Import. The Import window opens.
2. Under Select an import source, click Project Interchange.
3. Click Next. The Import Project Interchange Contents window opens.
4. Next to From zip file, click Browse and navigate to the following directory: <installdir>/rwd/eclipse/plugins/com.ibm.etools.webtools.tutorial.doc/resources, where <installdir> is your installation directory.
5. Select module2.zip as the target of the import and click Open.
6. Click Select All.
7. Click Finish. The wizard imports the project into your workspace. You may not see it immediately because be in the Web Perspective to see this project correctly.
   

 

Switching to the Web Perspective

The Web Perspective is the perspective you will use during this tutorial. Follow these steps to switch to the Web Perspective:

1. From the menu bar, select Window > Open Perspective > Other. The Select Perspective dialog opens.
2. Click Web.
3. Click OK. You are now in the Web Perspective. You can now see your new project and its resources in the Project Explorer view:
   
   

 

Setting the target server for the dynamic Web project

You can do this tutorial with either WebSphere Application Server v6.0 or WebSphere Application Server v5.1. You might want to choose the server that you plan on using the most, or the server that your other projects use. This tutorial will work the same way no matter which server you choose, but keep using the same server for the entire tutorial.

1. In the Project Explorer view, expand Enterprise Applications.

2. Right-click ClassifiedsTutorialEAR and then click Properties from the pop-up menu. The Properties window opens.

3. At the left side of the Properties window, click Server.

4. From the Target runtime list, choose the server you will use for this tutorial. You can choose either WebSphere Application Server v6.0 or WebSphere Application Server v5.1.

   Important: Remember which server you choose. You will need this information in later exercises.

5. Click OK.

   If the server you want to use is not in the Target runtime list, or if neither server is in this list, follow these steps to install a server:

   1. Close the workbench.

   2. Run the Rational Software Development Platform installation program.

   3. From the installation menu, choose the option to install the server you want to use.

   4. When the server is installed, open the workbench.

   5. Right-click ClassifiedsTutorialEAR and then click Properties from the pop-up menu.

   6. At the left side of the Properties window, click Server.

   7. From the Target runtime list, choose the server you will use for this tutorial. You can choose either WebSphere Application Server v6.0 or WebSphere Application Server v5.1.

   8. Click OK.

 

Setting up the database connection

The Project Interchange file you just imported includes the sample database you will need for this tutorial, along with the Web pages listed at the end of this exercise. Before you can use this database, connect the Web pages to the database, telling the pages where to find the database on your computer. Follow these steps to connect the Web pages to the database:

1. In the Project Explorer view, expand Dynamic Web Projects > ClassifiedsTutorial > WebContent.
2. In the WebContent folder, double-click the all_records.jsp file. This Web page opens in the editor.
3. In the Page Data view, double-click all_recordlist (Service Data Object). The Configure Relational Record List window opens.

   The Page Data view is normally at the bottom left corner of the workbench. If you can't find the Page Data view, click Window > Show View > Page Data and it will appear.

4. In the Configure Relational Record List window, click the Connections tab.
5. Click New. The New Connection window opens.
6. Click Create New DB Connection. The New Database Connection window opens.
7. Click Next.
8. Click the top Browse button. This is the Browse button next to Database location. The Browse for Folder window opens
9. Under Select a database directory, navigate to the following directory: <workspace-folder>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database, where <workspace-folder> is the directory containing the workspace you are currently working in.
10. Click the database folder and then click OK.

    You do not need to add a user ID or password to access the database. The New Database Connection window should look like this:

    
11. Click Finish. You return to the New Connection window.
12. In the New Connection window, click Finish. You return to the Configure Relational Record List window.
13. Click Close.

 

 

About the files used in this tutorial

You can now browse the files in the tutorial Web project. To open a file, double-click it in the Project Explorer view. Also, you can double-click the .website-config icon in the Project Explorer view to see a map-like representation of how the pages are related.

The site's purpose is to display classified ads like those in a newspaper, and each file has a role to help reach that goal. While there are many resources in the project (such as images, code files, and configuration files), the following five files, the actual Web pages in the project, are the most important:

• all_records.jsp

  This is the site's home page. It displays every classified ad in the database.

• filtered_records.jsp

  This page works like a search results page, displaying only the records in the category the user chooses.

• new_record.jsp

  This page creates a new classified ad.

• update_record.jsp

  This page changes the details about an ad in the database or deletes it.

• template.jtpl

  This is the template for the site's 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 ad page.

Now you are ready to begin Exercise 2.2: Formatting a data table.