Introduction to CDShopCart

In the process of creating the tutorial example application, you learn how to build components of a web application with Sun ONE Studio 5, Standard Edition features.

This chapter describes the application you will build, first laying out its requirements and then describing an architecture that will fulfill those requirements. The final section describes how you use Sun ONE Studio 5 features--web module constructs and Apache tag libraries--to create the application.

This chapter is organized into the following sections:

• Functionality of the Tutorial Application
• User's View of the Tutorial Application
• Architecture of the Tutorial Application
• Overview of Tasks for Creating the Tutorial Application

---

Functionality of the Tutorial Application

The tutorial example application, CDShopCart, is a simple online shopping cart application for the purchase of music CDs. The customer uses a web browser to interact with the application's interface, as follows:

1. The customer selects items from a catalog page to add to a shopping cart.

2. The customer can add more items from the catalog page or remove existing items from the shopping cart.

3. When the customer is ready to make a purchase, the application displays a Thank You message for the order and ends the session.

4. The customer can then exit the application or return to the order page to start a new shopping session.

Application Scenarios

The interaction of the CDShopCart application begins with the customer's visit to the application's catalog page and ends when the customer either completes an order or quits the site. The following scenarios describe a few of the customer's interactions with the CDShopCart application. Walking through these scenarios illustrates the requirements of the application, as well as interactions that happen within the application.

1. The customer starts the application by pointing the browser to the URL of the application's home page.

The home page is the CD Catalog List page, which displays a list of available music CDs and their associated information: title, the CD id number, the name of the performing artist, the artist's country, and the price.

2. The customer selects a CD for purchase by clicking the Add button associated with a CD.

This action causes the application to display a Shopping Cart page showing the selected CD title, its ID number, and price.

3. The customer selects more CDs for purchase.

The customer clicks the Resume Shopping button on the Shopping Cart page, which causes the application to redisplay the CD catalog page for further selections. The customer can repeat this sequence as many times as she likes, even adding the same CD multiple times (which adds more rows of the same CD to the cart--there is no Amount column for each CD).

4. The customer removes an item from her shopping cart by clicking the Delete button associated with the item on the Shopping Cart page.

Clicking this button redisplays the shopping cart minus the item, unless she deleted the last CD in the cart. When the last CD is removed, a page is displayed that reports that the cart is empty.

5. The customer can click the Resume Shopping button on the page to return to the CD Catalog List page, or the Cancel Order button to end the session. (The Cancel Order page is discussed in Scenario 7.)

6. The customer decides to make a purchase and clicks the Place Order button on the Shopping Cart page.

This action displays a Thank You message and ends the session. The customer can click the Resume Shopping link on the message page to start another session, or leave the application by closing the browser or going to a different URL.

7. The customer cancels an order at any time by clicking the Cancel Order button on the Shopping Cart page.

This causes the application to display a Cancel Order message page that ends the session. The Cancel Order page includes a Resume Shopping button, in case the customer wants to start a new session.

Application Functional Specification

Given the kinds of scenarios in which the CDShopCart application would be used, the following items list the main functions for a user interface of an application that supports these shopping interactions.

• A set of links to navigate from page to page
• A master view of all the site's offerings through a displayed list
• A view of items selected for purchase
• Buttons on the catalog page for adding each item
• Buttons on the shop cart page for removing items
• A button on the shop cart page to initiate checkout
• A button on the shop cart page to cancel the order
• A button on the checkout page to return to the home page to begin a new order
• A button on the empty cart page to return to the home page
• A button on the empty cart page to cancel the order

---

User's View of the Tutorial Application

The user's view of the application illustrates how the scenarios and the functional specification, described in Functionality of the Tutorial Application are realized.

To run the CDShopCart application:

1. The application starts with a CD Catalog List page that displays a list of CD titles.

This page is created with the ProductList JSP page.

 

2. To add a CD to your shopping cart, click the Add button in that CD's row.

This action displays the Shopping Cart page with the selected CD on it. This page is created by the ShopCart JSP page.

[ D ] 

3. To add another CD, click Resume Shopping, which takes you back to the CD Catalog List page.

4. Click Add on the same or a different CD.

The Shopping Cart page is redisplayed with an additional selection.

5. Repeat Step 2 and Step 3 until you have all the CDs you want to purchase.

The Shopping Cart displays your items. If you have chosen more than one of the same item, these are displayed as separate rows.

[ D ] 

6. To remove an item, click the item's Delete button.

The table is redisplayed minus the removed item.

[ D ] 

If you remove the last item in the table, the Empty Cart JSP page is displayed:

 

7. Click the Resume Shopping button to return to the CD Catalog List page.

8. To place an order, click the Place Order button on the Shopping Cart page.

The Place Order page is displayed. This page is created by the PlaceOrder JSP page.

 

You can either exit the application by pointing the browser at a different URL, or start a new session by clicking the Resume Shopping button.

9. Or, to cancel your order, from the Shopping Cart page, click the Cancel Order button.

The Cancel Order page is displayed. This page is created by the CancelOrder JSP page.

 

You can start a new session by clicking the Resume Shopping button.

---

Architecture of the Tutorial Application

The CDShopCart application is a web-centric application that uses a web client to send requests to and receive results from a web application. A web application is a bundle of web components and their supporting classes, beans, and files. Web components are server-side J2EE components, such as Servlets and JSP pages.

The CDShopCart application consists of a single web module. A web module is the smallest deployable and usable unit of web resources in a J2EE application. A feature introduced in the Java Servlet Specification Version 2.3 and implemented by the Sun ONE Studio 5 IDE is the web module construct, which automatically creates the required directory structures, default versions of required data objects, and other special services required by the web module.

For more information on web modules and related concepts, see Building Web Components. For information specific to the web module construct, see the Developing Web Modules section under JavaServlet Pages and Servlets in online help.

FIGURE 2-1 shows the CDShopCart application elements and their relation to one another.

 FIGURE 2-1 Architecture of the CDShopCart Application

Application Elements

Briefly, the elements shown in FIGURE 2-1 are:

• The client component

The client component is a web browser that displays the application pages.

• The service component (a web module) that includes:
• A ProductList JSP page that retrieves the product data from a database and displays it in a table on the CD Catalog List web page. ProductList also provides an Add button by which a user can add a CD to the shopping cart.
• A ShopCart JSP page that displays CDs selected for purchase in a table on the Shopping Cart web page, and provides Delete, Place Order, Cancel Order, and Resume Shopping buttons.
• An EmptyCart JSP page that displays a message when the customer deletes the last item in the shopping cart. Includes a Resume Shopping button.
• A CancelOrder JSP page that displays a message that the order has been canceled and a Resume Shopping button for returning to the ProductList JSP page.
• A PlaceOrder JSP page that displays a message that the order has been placed and a Resume Shopping button for returning to the ProductList JSP page.
• A Cart bean that represents the items selected for purchase.
• A CartLineItem bean that represents a cart line item.
• A CartLineItemBeanInfo beaninfo component to specify that id and price are properties of CartLineItem, despite having overloaded setter methods

Service Component Details

The service component of the CDShopCart application is a web module that includes four JSP pages that coordinate the application's behavior, given input from the client. Supporting elements to the web module include JavaBeans elements and an HTML page file.

• ProductList JSP page

This page locates the session for the current user or creates one if it doesn't exist. ProductList uses SQL tags from the Apache Foundation's JSP Standard Tag Library (JSTL) to access the list of CDs from the database and core tags to display them in a table. ProductList also provides an Add button on each CD line item it displays.

• ShopCart JSP page

When the user clicks the Add button on the ProductList page, the data of the line item is passed to this JSP page, which instantiates a Cart object consisting of CartLineItem objects, then uses core tags from the JSTL tag library to display them in a table. ShopCart provides a Delete button on each cart item. When this button is clicked, the page uses a scriptlet to remove the item, update the table data, and redisplay it. If the item removed is the last item in the cart, ShopCart forwards to the EmptyCart page. ShopCart also provides Resume Shopping, Cancel Order, and Place Order buttons. These buttons forward to the ProductList page, the CancelOrder page, and the PlaceOrder page, respectively.

• Cart JavaBeans component

This bean has a lineItems attribute and includes the methods for getting and removing the CartLineItem objects. This bean is imported by the ShopCart page.

• CartLineItem JavaBeans component

This bean has CD-related attributes, and includes methods for getting and setting attributes of Cart line items (ID, title, artist, country, and price).

• CancelOrder JSP page

This JSP page is called when the user clicks the Cancel Order button on the ShopCart page. This page invalidates the session, displays a message that the order is cancelled, and provides a Resume Shopping button to return to the ProductList page.

• EmptyCart JSP page

This JSP page is called when the user removes the last item from the ShopCart page. EmptyCart displays a message that the cart is empty and includes a Resume Shopping button.

• PlaceOrder JSP page

This JSP page is called when the user clicks the Place Order button on the ShopCart page when there are items in the cart. PlaceOrder displays a message that the order has been placed, invalidates the session, and includes a Resume Shopping button.

---

Overview of Tasks for Creating the Tutorial Application

The tutorial consists of one chapter, in which you create the basic application. Before you can create the tutorial application, you must have the Sun ONE Studio 5 software installed and set up to run, and the tutorial database tables installed, as described in .

In Chapter 3 you learn how to use the following Sun ONE Studio 5, Standard Edition features:

• Web modules (creating, developing, and test running)
• Embedded JSTL tags for connecting to and interacting with a database
• Embedded JSTL tags for iterating through and presenting the retrieved data

In addition, you create the supporting elements: several beans and an HTML page.

Creating a Web Module

The Sun ONE Studio 5 IDE provides tools for automatically creating the hierarchical directory structure of a web application. This structure is the web module. You develop the entire CDShopCart application within a single web module construct.

The tutorial doesn't try to provide complete information about how to develop a web module. The section Creating a Web Module serves as an introduction to the subject, outlining the basic elements of the structure, and the (very easy) method for creating it. When you want to know more about how to develop web modules, see Building Web Components and online help.

Using the JSTL Tag Libraries

Within the CDShopCart web module, you create the ProductList JSP page to fetch the CD catalog data to display on the CD Product List web page. You then create the ShopCart JSP page to display CDs that the user selects for purchase. You use JSTL tags for database access and data presentation functions to accomplish this.

The section Using JSP Tags to Fetch and Display Database Data describes how to use the SQL tags to make the JDBC connection to the database and fetch the CD data. It then describes how to use core tags to iterate through the resulting data, so that ProductList can display it in an HTML form on the web page.

The ShopCart JSP page displays CD data passed to it by the ProductList JSP page. The section Adding Code to Add or Remove an Item From the Shopping Cart Table demonstrates how to use core JSTL tags to iterate through the passed values to find the individual field values, so they can be displayed in the correct columns in the cart table.

Creating the Supporting Elements

The supporting elements for the ShopCart JSP page are two beans (Cart and CartLineItem) and three JSP pages (CancelOrder, PlaceOrder, and EmptyCart).

The section Creating the CartLineItem Bean shows you how to create a bean whose object holds the parameters of a line item passed to ShopCart from ProductList when a user clicks the Add button on the item. Then, in Creating the Cart Bean, you learn how to create a bean whose object holds the accumulated line items that have been selected. The Cart bean has methods for adding and removing line items from the cart.

In Creating the Empty Cart Page, you create a JSP page that displays a message that the cart is empty. This is to avoid displaying an empty form on the Shopping Cart page.

You create two more JSP pages that hold minor logic compared with ProductList and ShopCart. In Creating the Place Order Page, you create a JSP page that thanks the user for placing an order and then invalidates the session. In Creating the Cancel Order Page, you create a similar page that announces that an order is canceled and invalidates the session.

Testing the Application

Throughout this chapter, you test each element just after you create it. The IDE automatically deploys a web module to its internal container when you execute one of the web module's components.

---

End Comments

The tutorial application is designed to be brief enough for you to create in a relatively short time (a day or so). This places certain restrictions on its scope. For example:

• There is no error handling.
• There are no debugging procedures.
• There is no description of how to create the WAR file for deployment.

Future releases will have these procedures.

Although the tutorial application is designed to be a simple application that you can complete quickly, you might want to import the entire application, view the source files, or copy and paste method code into methods you create. The CDShopCart application is accessible from the Sun ONE Studio 5 Developer Resources portal at http://forte.sun.com/ffj/documentation/tutorialsandexamples.html