COMP 30320 HDip Computer Science Project

Malcolm Bell 09274120

TABLE OF CONTENTS
Introduction Functional Requirements Design Technologies Used Problems Encountered Concluding Remarks 3 4 5 16 17 18

LIST OF FIGURES
Figure 1 System architecture diagram Figure 2 The home page Figure 3 Create account page Figure 4 Shop page showing items in cart Figure 5 Previous orders page Figure 6 Change details page Figure 7 Index page (Showing products that require reordering) Figure 8 Site statistics page Figure 9 Update products page Figure 10 Database schema 5 6 7 8 10 10 11 12 12 13

COMP30320 HDip Project Malcolm Bell

INTRODUCTION
The aim of developing Webshop 1.0 was to create an online shop with the functionality of typical webshops, backed up by a MySQL database, built on Java and JSP technology. The target audience for the site is any member of the public with internet access. It is not necessary to have any experience with web sites as the menu structure is basic yet provides the full functionality required for such an enterprise.

This report details the functional requirements, design, technology and problems encountered in the development of the HDip project. Throughout the report, it has been necessary to make reference to table attributes of the database in the text. Where this occurs, the references appear as they occur in the table with full heading name, and with full capitalisation. E.g. ProductID, CustomerHouseNumber.

A hosted version of the project is available at: http://smellyhector.boldlygoingnowhere.org:8080/HDipProjectObjects

COMP30320 HDip Project Malcolm Bell

Functional Requirements

The functional requirements for this project consisted of the following: Visitors to the site can create new customer accounts Customer can log in and log out Customer can add and remove products from their carts Customers cart will be remembered if they have items in their cart and log out before purchasing Customer can purchase the items in their cart Customer can view previous orders Administrator can create new administrator accounts Administrator can update and delete products and suppliers Administrator will be warned when stocks of items are running low Administrator can reorder stock Administrator can create view site statistics graphs generated from database log table All users can search in the products for a particular string of characters. The returned results will be from a search on both the ProductName and ProductDescription fields of the products table Unique guests to the site are to be identified and a record written to the database for each new guest to enable displaying the total number of visitors to the site

All data entered into forms is to be validated in JavaScript, and values for quantities selected for adding to or removing from a cart are to be checked to ensure that the operation can be performed. The site is to use an SQL database, Tomcat Application Server, Java/jsp, and css for page layout.

COMP30320 HDip Project Malcolm Bell

DESIGN
The system architecture diagram for this system is shown in Figure 1.

Page Request

Tomcat Application Server

Database

Client Browser

File System

FIGURE 1 SYSTEM ARCHITECTURE DIAGRAM

The main components of the system consist of the mySql database server back end which hosts the shop database, Tomcat 6.0 application server and jsp container listening on port 8080 which compiles and serves the jsp pages, the host file system, and the client browser. The Tomcat application server compiles and serves (or delivers) the various jsp pages as they are requested by the client browser. It retrieves files from the host as required, for example image files, but will not allow the client to directly access the host file system. Tomcat uses the JDBC connector to talk to the SQL database for querying and updating the tables. The jsp files are essentially html files with embedded Java code, and use special features of this type of system such as beans to instantiate objects or hold session variables and the like. The Java embedded code is compiled by Tomcat at run time. The Tomcat system basically generates a Java servlet in the background for each jsp page in the project, and it is these servlets that are run on the host when a jsp page is called.

COMP30320 HDip Project Malcolm Bell

Customer Oriented Pages When a visitor browses to the site, the home page is displayed, as shown in Figure 2.

FIGURE 2 THE HOME PAGE

On this page the current session is checked to determine whether it is a new instance or not, and if it is new, a record is written to the log. The number of records of new visitors (or guests) is then counted from the log, and the result is set as a session variable in order to display the visitors distinct visitor number. The home page also displays the list of top selling items in the shop, which are returned from a method of the Product class. All visitors can browse the majority of the pages that customers registered with accounts are permitted to view, with the exception of the previous orders, change account details and change password pages. As a visitor they also cannot add items to the cart or purchase items. Create Account The create account page, shown in Figure 3, allows visitors to create a new account. All input is validated in JavaScript to ensure that values are of the correct type, only numbers have been entered in number fields, age is greater than 18, and password is suitable etc. If the fields do not successfully pass the validation stage, the page is redisplayed for the user to re-enter their data.

COMP30320 HDip Project Malcolm Bell

FIGURE 3 CREATE ACCOUNT PAGE

Once successful validation is achieved, the new users details are added to the customer table of the database, with their user type set as customer, and they are automatically logged in. An instance of the NormalUser bean is created and the various attributes are set for the new customer. This allows the system to track the customer through the site, and keep record of such things as whether they have items in the cart, their CustomerID, and their username, amongst others. It also allows the system to restrict access to certain pages based on customer category. Following this, they are then permitted to shop and purchase, or change their details or password. Shop Page The shop page, as shown in Figure 4, can be used to display all of the available products, and can also show products by category. The categories are retrieved dynamically from the products table when the particular category is selected from the menu, and therefore change automatically when new categories are added. Products are displayed with their ProductName, ProductDescription, and ProductCategory if all categories are displayed, quantity available (if quantity available is zero Sold Out More Soon is displayed rather than quantity), ProductPrice, a text box for number selected, and button to Add to Cart the number selected. The number selected is validated to ensure an integer has been entered, and is checked to make sure that the number selected does not exceed the quantity available.

COMP30320 HDip Project Malcolm Bell

FIGURE 4 SHOP PAGE SHOWING ITEMS IN CART

The customers cart is shown to the right of the page. See following section for a description of the cart display. Cart Display Each customers cart is displayed on the home and shop pages on the right hand side. If the cart is not empty, the display includes the total number of items in the cart, the ProductName of each product type, a small image each product, the total number of each product type in the cart, the subtotal price for each product type, and the total cart cost. The cart also includes buttons to remove items, and to proceed to checkout. Add to Cart/Remove from Cart Whenever items are added to a customers cart, a record is written to the cart table of the database. The cart may contain only one record for each unique ProductID, and if more items with the same ProductID are added, the quantity field is simply increased. This also works in a reverse way if items are removed from the cart. If the quantity count is reduced to zero, the record is removed altogether. It was decided to implement the cart in this fashion as it is a sound method for keeping track of cart items, and has the added benefit that if a user is logged off or disconnected before purchasing, the full cart is still available on their next visit. As an item is added to the cart, another method records in the products table the quantity selected of that product as ProductReservedQuantity. This is so that the available number of that particular product which is displayed to all concurrent users reflects the true value available for purchase, and not simply the total quantity in stock.

COMP30320 HDip Project Malcolm Bell

(i.e. The total quantity in stock is not a true reflection of the number available for purchase if some products have already been added to a cart or carts.) The quantity available that is shown to customers is calculated as: ProductQuantity ProductReservedQuantity. Similarly, if products are removed from a cart, this would be done in the opposite direction to decrease the ProductReservedQuantity. When products are purchased, the ProductReservedQuantity and the ProductQuantity are both reduced by the amount purchased. Purchase When a customer purchases the products in their cart, they are redirected to a page that displays the current contents of their cart, which also allows them to remove products or proceed to checkout. When the customer clicks checkout, a new record is created in the orders table with their unique CustomerID and the OrderDate. The ProductID, quantities of each product, and total cost of each product are recorded in the orderdetails table. The total cost is recorded in orderdetails in order that if product prices were to change in the products table in future, the total income from previous orders would not be affected. A new page is then opened which confirms their latest purchase and shows the order number of their latest order, and the quantities of each product that were ordered. Previous Orders/Change Details/Change Password Customers may view their previous orders, as shown in Figure 5, which are returned from selections on the orders, orderdetails and products tables, they may change any of their account details apart from CustomerID, as shown in Figure 6, and they may change their password. All entries on the pages where customers can change their details or password are validated in JavaScript.

COMP30320 HDip Project Malcolm Bell

FIGURE 5 PREVIOUS ORDERS PAGE

FIGURE 6 CHANGE DETAILS PAGE

Search On each page that displays a users cart, there is a text box and associated search button which enables searching the products table for a matching string in the ProductName and ProductDescription fields. Results will be returned on a serachresults.jsp page, and if no results are found, the user is notified of this.

10

COMP30320 HDip Project Malcolm Bell

Administrator Only Pages As well as the pages viewable by customers or visitors, there are a number of pages which are only viewable by an administrator, and the main menu choices available are altered to reflect this when an administrator is logged in. Products with a stock level below a defined ProductReorderLevel are indicated to the administrator on each page where login information is displayed. The administrator may click on the Reorder Products menu item to simulate reordering products, and replenishing stock.

FIGURE 7 INDEX PAGE (SHOWING PRODUCTS THAT REQUIRE REORDERING)

Site Statistics In addition to the mini display on the home and shop pages of the number of visitors to the site for the day, the administrator can display dynamically created graphs of daily usage, daily sales, and daily volumes for the last week. Refer Figure 8. These graphs are rolling displays, such that they display for the current day and the previous 6 days, rather than displaying data for the last week Monday to Sunday for example. This is so up to date information is immediately available. The graphing methods could easily be extended to incorporate monthly and yearly statistics also. The graphs are created using a method of the AdminUser bean, and the resulting bufferedimage is served back to a calling servlet, which in turn serves it up to the calling webstats.jsp page.

11

COMP30320 HDip Project Malcolm Bell

FIGURE 8 SITE STATISTICS PAGE

Update Product/Supplier Details The administrator has the ability to update product details, as shown in Figure 9, update supplier details, or add new products to the database. All fields of the products table may be changed, except for the ProductID which is generated automatically by mySQL. Similarly all items of the supplier table may be altered with the exception of the SupplierID. Both products and suppliers may also be deleted from the database.

FIGURE 9 UPDATE PRODUCTS PAGE

New products may be added by first uploading an image to the server, and then completing the new product details form. Once the form is completed and submitted,

12

COMP30320 HDip Project Malcolm Bell

the new product is inserted into the products table, as is the product image, which is stored as a blob in the database. Accessing Pages Without Permission When a user or administrator attempts to access a page they have no permission to view, or carry out an operation they are not entitled to perform, a JavaScript alert will be displayed telling them they have no permission to do so, and they are redirected to the previous page or to the home page, depending on the circumstances of how they arrived at the page or operation. Database The database for this site is structured as shown in Figure 10.

FIGURE 10 DATABASE SCHEMA

The database has been created with referential constraints or foreign keys between relevant tables so that no illegal data may be inserted into any table. Whenever text or varchar items are added to the tables, they are encoded using the encode method of the StringEncoding class to replace spaces and potential problem characters, and similarly they are decoded using the decode method when they are retrieved from the tables. The customers table holds records for both customers and the administrator. The CustomerCategory field specifies what user group the instance belongs to. There is also a field, CustomerLoggedIn, which is set dependent on whether the user is logged in or not. This field is used to determine whether a user was previously logged in and didnt log out. When a user or administrator logs in or out, a user bean attribute is set based on the value of this table field, and is used throughout the site to restrict access to pages which may only be viewed dependent on whether the
13

COMP30320 HDip Project Malcolm Bell

user is logged in or not. E.g. A customer user cannot create an account if they are already logged in, or any user cannot log in if they are already logged in. The products table holds records for all products available on the site, and includes attributes such as ProductName, ProductDescription, ProductQuantity, ProductPrice, ProductCategory etc, and ProductSupplierID which links products to suppliers. Product images are stored within the database itself as blobs (or binary large objects). The supplier table contains records of all suppliers, including SupplierID, SupplierName, SupplierStreetName, SupplierStreetNumber, SupplierPhoneNumber, and SupplierContact. The order table contains records of customer orders, and contains the CustomerID, OrderID and OrderDate. The orderdetails table contains the actual details of the products ordered, which consist of the ProductID, Quantity and TotalPrice, and the OrderID of the particular order. The log table contains all records of actions taken on the site. Records are written to this table when a new guest arrives at the site, when a customer logs in or out, adds or removes items in the cart, purchases items, or changes their details or password. Records are also written to the log table when an administrator logs in or out. Outline of the API A brief summary of the classes of the API is shown below: Package beans Class Summary AdminUser AdminUser bean NormalUser NormalUser bean Package classes Class Summary Authenticate Cart Customer Class for authenticating users at login Class for cart table operations Class for customer table operations

DBConnection Singleton class that represents a database Connection object GraphData Generates dynamic site statistics data

14

COMP30320 HDip Project Malcolm Bell

Log MD5 Order OrderDetails Product

Class for log table operations Performs MD5 encryption Class for orders table operations Class for orderdetails table operations Class for product table operations

StringEncoding Class for string encoding / decoding Supplier Class for supplier table operations

Package Servlets Class Summary Graph Image Servlet for serving graphs to calling page Servlet for serving images to calling page

15

COMP30320 HDip Project Malcolm Bell

TECHNOLOGIES USED
Software packages and IDEs used for the development of this project consisted of NetBeans IDE, Tomcat 6.0 Application Server, mySQL DBMS server, XAMPP for Apache, Microsoft Expression Studio, and Chrome browser for the majority of the work. Images were created or modified using Gimp, and the database was created, modified and viewed using phpMyAdmin. The site was originally developed on Windows 7, and was then transferred to Mac OS X to check compatibility. It was also run on the Mac using GlassFish V2 and V3 application servers as further tests of its stability. The site has also been extensively checked in Internet Explorer, Safari, Firefox, and Opera browsers for compatibility.

16

COMP30320 HDip Project Malcolm Bell

PROBLEMS ENCOUNTERED
One problem that was encountered during this project concerned the requirement for uploading images from the clients workstation to the server when adding a new product. Due to the fact that uploading an image requires the submission of a multipart form, and Java has no native method for extracting the relevant information from the submitted form (i.e. there is no request.getParameter equivalent for multipart forms), it was necessary to find a solution online. The solution found uploads the image file and a hidden parameter, and then parses the submitted information to extract the image binary data. This binary data is then written to a directory on the server. I then developed the second part of the solution which would take the uploaded file, along with input from a standard form for the product details like ProductName, ProductDescription etc, and insert all data into the products table as a new product. The product image itself is stored in the database as a blob object. Another problem arose when developing the graphing routines to display the site statistics. It was found difficult to pass a multivalued parameter from the webstats.jsp page to the Graph servlet in order to generate the graphs, so a solution was developed such that a comma separated value string was passed on to the Graph servlet, and then a string tokenizer was used to strip the string down to its constituent parts in the Graph servlet before the individual parts were passed in an argument to the graphIt method in AdminUser bean. The resulting bufferedimage was then returned from the graphIt method to the Graph servlet, which itself served the image as a http response to the calling webstats.jsp page.

17

COMP30320 HDip Project Malcolm Bell

CONCLUDING REMARKS
Through the implementation of this project, I have learned a great deal about the way websites are put together, the underlying technologies, and the various ways of performing tasks or solving problems, and I have perhaps taken some unorthodox steps to obtain solutions. One in particular would be the way I have stored the product images as blobs in the database, rather than simply storing the filename of the image in the database. I decided to do it the way I did as it posed a greater challenge to me to implement it this way, and it does have the advantage that if certain folders are removed from the server, the images will never be accidentally deleted. It can, on the other hand, pose problems as the database could potentially become very big if the images were large. The system developed does not vary too much from my initial vision of how the site should function, and in fact goes further in some aspects than I had originally intended. There could always be more features added to the site, for example a full cart page could be used, customers could track their order delivery, or a forum could be incorporated, and the layout and look and feel could be improved, however the goal of creating a functional and fully operational web site has been achieved.

18