CC292 Assignment 2: On-Line Shop

Introduction

The assignment is to implement a simple prototype of an on-line shop. The original idea was for an art shop - this has the potential to include lots of attractive images. However, you can create a shop with items of your choosing.

The first part, worth up to 54% is to fix the broken code for the supplied shop without making any major changes to the code. That is, the changes required are to repair broken methods, rather than to create new classes, for example.

The basic system should allow users to perform the following actions:

browse a catalogue of available products - including an image of each product and a short description.
add and remove products from a "shopping basket"
place an order for the contents of the shopping basket; the order must be recorded in a database.

The second part is to design a more sophisticated on-line shop, which
could include features such as:

personalised banner and recommendations
XML catalogue import / export
AJAX-style interactions
using an Object database such as db4o instead of a relational database
good site navigation
well designed code exploiting generic components (such as Table.jsp)

The assignment builds on the material covered in the course, much of which should now be familiar from the first assignment.

Note that the supplied images are rather limited. You can better demonstrate your shop
by providing a better set of product images and descriptions.

Web Application Structure

The cut down shop is supplied in the file shopdemo.zip. Project files are included for Intellij 7, but you can adapt them to work with other systems (the .jsp and .java files would remain unchanged, of course).

The current version uses an MS Access DB; it is necessary to set up an ODBC data source before running ShopDB as supplied, or use an HSLQ database (Note: an example HSQL database class is now provided in the Relational Database Lab script. See HsqlShopDB - note also the addProducts() method to populate the database: see RDB.html).

The cut down shop uses JSP to present the shop data to the user in HTML. The JSP is kept reasonably simple by doing most of the work in Java. Java classes have been defined to handle all the database access (ShopDB.java), to store details of an individual product (Product.java), and to store a set of products in a Basket (Basket.java). Note: the supplied war file has other Java files - you can ignore these; I do plan to create an updated version of the .war file with the extraneous files removed).

The Basket class also contains methods for computing the total cost of all the items in the basket. Some comments have been provided in the code to aid your understanding of it. Please consult a lab demonstrator for more help if necessary.

The JSP pages are as follows:

products.jsp:: Lists the products available in the shop. Should also provide methods for listing only the products (artworks) by a particular artist or manufacturer
viewProduct.jsp: Displays the details of a particular artwork or product, and allows it to be added to the Basket
basket.jsp: Displays all the items in the shopping basket of each user. Should also display the total cost of all items. Should provide a means for emptying the basket, and for placing an order for all the contents of the basket, given the user's name (which can be input using a text-field on this page).
order.jsp: This page is responsible for making the order transaction. It should call the appropriate methods of ShopDB to order the Basket of items for this user. Having completed the order, it should then empty the basket of all its items.

General Tips

The name you give the database when setting up the ODBC driver must be the same as the name given in the code e.g. if it was called shopdb, then in the Java code you could specify it as "jdbc:odbc:shopdb".
Strongly recommended: test your Java code locally before trying it with Tomcat. For example, ShopDB has a main method that tests the main features of ShopDB.
For the basic part of the assignment, you should not need to change the database tables - consult a demonstrator before doing so. For the advanced part, you are free to design the data/object model in the way you think best.

Required Changes

Follow these instructions to fix up the cut down shop. Some of these fixes are intended to be relatively straightforward - you just have to go to the indicated part of the Java or JSP code, and add a few statements to make a feature work. Others require a bit more thought.

Note: * = straightforward, ** = some more thought involved (in my opinion!).

1. Hyperlink the Thumbnails (9%),*)

The provided products.jsp page looks like this:

The thumbnail images are now included.

The required change is to add hyperlinks to these that link to the viewProduct.jsp page, such that viewProduct.jsp shows the full image and description of this product.

To do this, use a JSP expression to fill in the href of an anchor tag with the required page and product id.

2. Fix viewProduct.jsp (9%, *)

View product currently shows the product, but you should also be able to add it to the basket. (Hint: this can be achieved with an appropriate hyperlink.

3. Fix the getTotal() method of Basket.java (9%, *)

The supplied method looks like this. It returns a total of 1.0 every time!!!

The iteration over the set of items is done for you - you just need to calculate the total and return it:

 public double getTotal() {
	// need to fix this...
	double total = 0.0;
	// iterate over the set of products...
        // old style iterator should be updated to a for each loop
	for (Iterator i = items.iterator(); i.hasNext() ; ) {
		Product product = (Product) i.next();
		// keep a running total
	}
	// return the total
	return 1.0;
  }

4. Improve the Basket display (9%, **)

The current basket.jsp file presents a very primitive basket: http://localhost:8080/shop/basket.jsp?addItem=art2

Note: this screenshot was taken before I broke the getTotal() method of Basket - the provided one will show a total of 1.0.

For 9%, include a thumbnail of each item and tabulate the prices and total cost neatly.

5. Fix the clearBasket() method of Basket.java (9%, *)

The current method does nothing - you need to make it clear all the contents of the current basket. This can be done with one appropriate line of code.

6. Fix the order.jsp page (9%, *)

The current page has some parts commented where you need to make the order (call the appropriate method of the db object (which is of class ShopDB). Once the order has been made, you then need to empty the basket. The relevant part of the JSP file is shown below (the '...' just means 'continued'). The solution can be done acceptably in two lines of code.

 if (custName != null) {
   // order the basket of items!
   // then empty the basket
 ...

Finishing the Shop

If you've completed all the changes up to this point correctly, you've already scored 54% for this assignment, and ended up with a shop that sort of works.

However, the current shop still has several limitations, such as the following:

Does not allow selection of all products by a specified artist
The 'scope' of the basket is wrong - try this out by getting friends on other machines to shop in your shop!
The basket page is a bit buggy (e.g., hitting refresh adds new items to the basket every time)
The basket items are presented separately for every item - for example, each copy of Stax that I order is placed on a separate line. It would be better to group these, show the item price, then the price for that quantity.
The navigation between the pages is rather limited
The product catalogue page is very basic. Score more marks by splitting large catalogues over multiple pages.

Also consider the following:

The shop could use a header/index to be included on all pages to give the shop some brand identity, and assist with the navigation. (One way is to use <jsp:include> to do this, but there are other ways also (think Controller.jsp!)).
Remember: you can use style sheets to make your shop look good - this is generally much better than directly styling with the HTML
Put in some nice images and product descriptions to show off your work to its best effect (e.g. see here)
See also the tips in the introduction (XML, ObjectDB, etc)
Update the code to use generics throughout, and improve the overall software architecture. For example, use an interface to declare all the database access methods.

Now work on these aspects to complete the assignment for up to 100%.