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.

This tutorial might require some optionally installable components. To ensure that you have installed the appropriate optional components, see the System requirements list.

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
Automate some database administration tasks

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:

WebSphere^® Application Server 6.1

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

This tutorial might require some capabilities that have not been initiated during the installation of the product. If you cannot find user interface options described in the tutorial, ensure that you have enabled the appropriate capabilities (Window > Preferences > Capabilities). In order to complete this tutorial, you will need the following capabilities:

Java™ Developer
Web Developer (typical)
XML Developer
Database Developer
Enterprise Java Developer
Data

To use this tutorial, you must have an application server installed and configured. To verify that a server runtime environment is available, click Window > Preferences, expand Server, and then click Installed Runtimes. You can use this pane to add, remove, or edit installed server runtime definitions. You can also download and install support for a new server.

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.