Online Store Application

The control flow of the BuyDirect application is straightforward, similar to shopping in an online store such as Amazon.com. Here, we will take a look at the design of each page in the application.

The main page of this application serves as a welcome page, as shown in Figure 14-3. Users can use the menu box on the left side of the page to search for a product or browse the products by category. In fact, the menu box is available from every page, enabling users to search and browse without needing to go back to the main page.

Users can search for a product by entering a keyword in the Search box and clicking the Go button. All of the products found are summarized on the search page, shown in Figure 14-4. Each product is listed with its name and price, as well as a Details link. The user clicks the Details link to view the product details and to purchase the product.

The application allows users to browse products by category by clicking one of the links in the menu box. Currently, there are five categories for BuyDirect: Digital Camera, DVD Player, Camcorder, TV, and Analog. Like the search page, the browse page lists each product’s name and price with a Details link, as shown in Figure 14-5. However, this page lists products from the same category, rather than those matching a certain search key.

Figure 14-3.  The main page of the BuyDirect application

Figure 14-4.  The search page of the BuyDirect application

Figure 14-5.  The browse page of the BuyDirect application 

The Product Details Page

Clicking the Details link in either the search or browse page displays the details of the selected product, including a description, as shown in Figure 14-6. Notice the Buy button at the bottom of the page. Users click this button to add the product to their shopping cart.

All of the products selected by the user for purchase are stored in a shopping cart. Every time the user adds a product to the shopping cart, the contents of the shopping cart are displayed, as in Figure 14-7. Users click the Check Out button at the bottom of the page when they are finished shopping.

When users are satisfied with their selections, they can proceed to the check out page to have their purchases processed. As shown in Figure 14-8, this page contains five input fields: Contact Name, Delivery Address, Name on Credit Card, Credit Card Number, and Expiry Date. All of the input fields are mandatory. If the user fails to enter a value into any of the input fields, an error message appears. Clicking the Pay button processes the order.

Figure 14-6.  The product details page of the BuyDirect application 

Figure 14-7.  The shopping cart page of the BuyDirect application

Figure 14-8.  The check out page of the BuyDirect application

Figure 14-9.  The order page of the BuyDirect application

The Order Page

The last page, the order page, transfers the shopping order details from the shopping cart to the database, effectively emptying the shopping cart. It prints a thank you note, as shown in Figure 14-9.

This BuyDirect application uses a relational database to store data, such as the product information, product categories, and orders. First, we will look at the four tables in the relational database, and then we will cover how to access the database from your Java code.

NOTE

This article is excerpted from JavaServer Faces Programming by Budi Kurniawan (McGraw-Hill, 2003; ISBN 0072229837). Check it out at your favorite bookstore today. Buy this book now.