JSP Shopping Basket

Due: Monday, October 21 at 23:59pm

Note: You have to hand in this assignment via the Course Management System (www.csuglab.cornell.edu/courses).

JavaServer Pages (JSP) enable rapid development of web-based applications enabling you to separate the dynamic part of your pages from the static HTML. JSPs look like a cross between HTML and Java code, and they allow you to embed intelligent data into normal HTML pages. For example, we cannot have an if...then or for...loop inside an Html page, but with JSP it is possible! Theoretically, you can have any valid Java code inside a JSP.

JSP technology uses XML-like tags and scriptlets written in the Java programming language to encapsulate the logic that generates the content for the page. Additionally, the application logic can reside in server-based resources, which the page can access with these tags. Any and all formatting (HTML or XML) tags are passed directly back to the response page. By separating the page logic from its design and display and supporting a reusable component-based design, JSP technology makes it faster and easier than ever to build web-based applications.

Step 1: Engineering Trade-Offs

Consider the trade-off between storing a shopping-basket in a database table and storing the shopping-basket in a cookie on the client’s machine. What are the advantages and disadvantages of each option? What considerations need to be made for each decision?

Step 2: Database Design

Create four database tables with the following schema (key fields are underlined):

Products Table

ProductId	Integer
Name	String
Description	String
Price	Float

OrderedItem Table

OrderId	Integer
ProductId	Integer
Quantity	Integer

Order Table

OrderId	Integer
UserId	Integer
Date	Date

User Table

UserId	Integer
Name	String

The Products table stores a listing of the various products the store sells. You should populate this list with anything you’d like for your prototype. The User table stores a list of the users who can sign onto the system. Whenever a user places an order, suitable records should be inserted into the Order table and the OrderedItem Table: First, create a record for a new order in the Order Table. Then, for each item that is in the order, you should store a record in the OrderedItem table (matching an order and a product with a quantity).

Step 3: Shopping-Basket Design

Write a set of JSP pages that displays a shopping-basket of items and allows users to add, remove, and change the quantity of items. To do this, use a cookie storage scheme that stores:

a. The UserId of the user who owns the shopping-basket

b. The number of products that are stored in the shopping-basket

c. A product id and a quantity for each product

Note: When manipulating cookies, be sure to set the Expires property suitable so the cookie can persist for a session or indefinitely. (If you do not set it every time, the Cookie deletes itself!) Play around with cookies using JSP and make sure you know how to retrieve, set values, and delete the cookie.

Step 4: JSP Pages

You will need to create five JSP pages to make your prototype complete. The picture on page 3 shows the control flow between the pages.

Index Page: Index.jsp – the main entry point. This page has two buttons that (1) direct the user to the Products Page so that they can start shopping, or (2) direct the user to the Orders Page where the user can view all the orders in the database (an administrative task).

Products Page: Products.jsp – a listing of all products in the database with their descriptions and prices. This is the main page where the user fills the shopping-basket. The page shows a listing of all products, and each product should have a button next to it, that adds it to the shopping-basket. (If the item is already in the shopping-basket, it increases the quantity by one.) There should also be a counter to show the total number of items currently in the shopping-basket. Note that if I have a quantity of five of a single item in the shopping-basket, the counter will indicate a total quantity of five. The page also contains a button that directs the user to the Cart Page.

Cart Page: Cart.jsp – a listing of all the items in the shopping-basket/cookie. The listing should include all items in the shopping-basket with the product name, price, and a text-box for the quantity (the user can change quantities of items here), and a button to remove the item from the shopping-basket. This page has three other buttons: one button to continue shopping (which returns the user to the Products Page), a second button to update the cookie with the altered quantities from the textboxes, and a third button to place/confirm the order, which directs the user to the Confirm Page.

Confirm Page: Confirm.jsp – this page lists the final order and allows the user to enter his or her name. There are two buttons on this page: one button to cancel the order, and a second button to submit the final order. The cancel button just deletes the cookie and returns the user to the Index Page. The submit button updates the database with the new order, deletes the cookie, and return the user to the Index Page.

Orders Page: Orders.jsp – this page lists all the orders in the database. You should list for each order the name of the user that placed the order, a listing of the items in the order (name, quantity, and cost), and the order total cost. Also include a grand total that is the sum of all the orders that have been placed. There should be two buttons, “Delete all Orders” (deletes all orders from the Orders and OrderedItems relations), and “Return to the Index Page” which directs the user to the Index Page.

(Optional) Search Page: Search.jsp (to replace Products.jsp) – this page will allow you to search products by name or description. There should be a text box for the search text and radio buttons to allow the user to choose between search-by-name and search-by-description (as well as a submit button to retrieve the results). The page that handles search results should be modeled after Products.jsp (as described above) and also be named Products.jsp. It should retrieve all records where the search text is a substring of the name or description (as chosen by the user). To integrate this with the flow chart, simply replace all the links to Products.jsp with Search.jsp.

The flow diagram below summarizes the navigation through the pages.

Index Page: Index.jsp

The main entry point for the store.

Products Page: Products.jsp

A listing of the products.

Database Book

You have 2 items in your cart.

AI Book

“Add to Cart” adds the item to the cookie, updates the number of items in the cart, and returns to the Products Page.

Cart Page: Cart.jsp

Listing of items in cookie.

AI Book

1

Removes the item from the cookie and returns to the Cart Page.

Returns to the Products Page

Quantity Box

Updates the quantities (a zero quantity removes item from cart), and returns to the Cart Page.

Cornfirm.jsp

List final order, allow user to type in name.

Fred

Name:

AI Book

1

79.99

Also display product prices, and the order total.

Total:

79.99

Returns to Index.jsp and deletes cookie.

Adds order to the database, deletes cookie, and returns to Index.jsp.

Order Page: Order.jsp

Displays all the orders in the database, the items in each order, and the total sales.

Deletes the records in the Order and OrderedItem tables, and then returns to the Order Page

What to “submit”:

Create a .zip-file that includes the following information:

Documentation:

• A Microsoft Word document with a one-page description of what you did for this assignment.
• The names and netids of all group members
• For each JSP file that you wrote, write a brief description of the logic and what is displays.

Code:

• All your JSP pages and any other files that you want to submit.

Your solution to this assignment needs to be submitted via the course management system. Make sure that all the necessary files are included so that the TAs can test your assignment.