Display dynamic information on Web pages with JavaServer Faces introduction

This tutorial teaches you how to design a simple dynamic Web site that mimics the functions of a newspaper's classified advertising section. This site will list items for sale while allowing the user to add new items, change details about the items like the price, and search for a particular type of 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.

This tutorial uses JavaServer Faces (JSF) technology to link Web pages to a database that stores the classified ads. By dragging Faces 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. The users who view your Web site will be able to use these CRUD functions to manage the classified ads in the database.

When the Web site is finished, its home page will look like the picture below. The links on this page will lead to pages that create new ads, update or delete ads, and search for ads by category.

 

 

Prerequisites

To complete this tutorial, you should be familiar with:

• Basic Web design concepts, such as Web sites, 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 a Web page's HTML code

 

 

Time required

To complete both modules of this tutorial, you will need approximately 3 hours and 15 minutes. However, you can complete either of the modules on its own if you wish. If you decide to explore other facets of dynamic Web sites while working on the tutorial, it could take longer to finish.

 

 

Learning modules and 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, complete the exercises in order for the Web site to work properly.

Module 1: Creating Web pages with data connections teaches you how to set up a connection to a database and use the information from that database on the Web pages. In this module, you will:

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

Module 2: Adding advanced features teaches you more powerful ways to use the data from a database. In this module, you will:

• Format database records on a Web page
• Upload 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