Display dynamic information on Web pages with JavaServer Faces

This tutorial teaches you how to design a dynamic Web site that functions as a newspaper's classified advertising section. The Web site is a complete J2EE Web application that uses JavaServer Faces (JSF) components and Service Data Objects (SDO). This application uses JSF technology to create dynamic Web pages that link to a database that stores classified advertising data. By dragging JSF components onto your pages, you can create a JSF Web application known as a CRUD application because it can create, read, update, and delete records from a database. Site users can use these functions to manage the classified ads in the database.

Upon completing this tutorial, site users can not only view items for sale, but also add new items, change details about the items (for example the price or description), or search for a specific item. While this tutorial site is simply designed, the principles and technologies it covers are also used in much larger and more complicated Web sites.

Learning objectives

This tutorial is divided into two modules, each with its own learning objectives. You can choose to complete either or both modules. Within each module, you must complete the exercises in order for the Web site to work properly.

Module 1: Create Web pages with data connections

This module teaches you how to set up a connection to a database and display the information from the database on a Web page. In this module, you will:

Connect Web pages to a database.
Create pages that display, create, edit, and delete records from the database.
Send data from one page to another

Module 2: Add advanced features

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

When you are ready, begin Module 1: Creating Web pages with data connections.

Time required

Total: 3 hours and 30 minutes

Module 1: 2 hours

Module 2: 1 hour and 30 minutes

Skill level

Intermediate

Audience

Web application developers, Web user interface designers

System requirements

To complete this tutorial, you must first install and configure a runtime server. This tutorial has been tested with the following servers:

IBM® WebSphere® Application Server versions 6.0, 6.1, and 7.0

To complete this tutorial, you must install the SDO tools. To install the SDO tools, in Installation Manager, click Modify. In the Feature list, click IBM Rational Application Developer for WebSphere Software 7.5.0 > Web Development Tools. Select SDO - Domino and JDBC mediators then click Modify.

Prerequisites

To complete this tutorial, you should be familiar with:

Basic Web design concepts, such as Web sites, Web pages, browsers, and servers.
How to create a simple static Web page.
The elements of a Web page, such as tables, hyperlinks, forms, and images.
Database terms, such as tables, records, columns, and fields.

It will also help if you understand:

How to use the perspectives and views of the workbench.
How to edit the HTML code for a Web page.

Expected results

Once the Web application is complete, the home page will look like the picture below. The Web site navigation that is added to the Web pages via the site template, links to pages that allow you to create a new advertisement or view all of the advertisements. The row action in the table displayed below, brings you to an update page where you can change the information associated with a particular advertisement.