Reference no: EM131251098

1 Assignment Description

This is an individual assignment. Students are referred to the Faculty's policy on plagiarism. The aim of this assignment is to develop a better understanding of building web applications using Ajax technologies.

You are requested to use all Ajax techniques (XMLHttpRequest, JavaScript/HTML, DOM, XML, and XPath/XSLT) and PHP.

2 Assignment Tasks

The assignment is to develop a simplified web-based online shopping system called BuyOnline. A site map and four components (registration and login/buying for customers, login/listing and processing for store managers) of BuyOnline that must be completed for this assignment are specified in the sub-sections below. You may explore further functions such as detailed payment processing, delivery and password changing for fun later. For this assignment, you must use XMLHttpRequest for client/server communications.

Site Map

Design an HTML page for BuyOnline (buyonline.htm) with links for Customer Registration (see register.htm in 2.2), Customer Login (see login.htm in 2.4.1), and Store Manager Login (see mlogin.htm in 2.3.1).

After a customer successfully log into the system, the system will re-direct to the customer buying page (see buying.htm in 2.4.2). After a store manager successfully log into the system, links will appear allowing the manager either list items (see listing.htm in 2.3.3) or process the sold items (see processing.htm in 2.5.1). After a new customer finishes registration, a "back" link allows the customer return to BuyOnline page (see 2.2.4). After a customer finishes buying or a manager finishes listing or processing, a "logout" link allows the customer or manager leave the system, and a "thanks" message, which includes the customer id or the manager id, will be displayed (see 2.4.7, 2.3.5 and 2.5.3, respectively).

Customer Registration

This component is used to allow a new customer to register into the system. The system maintains an XML document to record customer information. The specific functions of this component include

1) Design and create an XML document (customer.xml) for storing information of all customers. For each customer, you need to keep the system generated customer id, first name, surname, unique email address, password and contact phone number.

2) Design an HTML page (register.htm) for new customer registration. The inputs include email address, first name, last name, password, re-typed password (for double checking) and optional contact phone number.

3) Create client and server-side programs to get and validate inputs. Either the client- side or the server-side program will check (a) all inputs except the contact phone number are given, (b) the password is the same as the re-typed one, (c) the optional contact phone number shall follow either (0d)dddddddd or 0d dddddddd, and (d) the email address is unique (i.e., it has not been used by other customers in customer.xml). If not, the corresponding error message will be displayed.

If there is no problem with the above checking, the server-side program will generate a customer id and store all the required information for the customer into the XML document. If the XML document does not exist (i.e. when the first customer is registered in the system), create a new one. Finally, the client-side program will show the successful registration information.

4) A "back" link will be created to bring the system back to BuyOnline page buyonline.htm.

Manager Login and Listing

This component is used to allow a store manager to add an item into BuyOnline. The inputs for the item include item name, unit price, quantity available, and description. Once you get these inputs, you need to validate the inputs and add the details of the item in an XML document on the server side, and generate an item number for the item. The specific functions of this component include

1) Design an HTML page (mlogin.htm) to allow a manager to log into BuyOnline. A manager needs to provide a manager id and a password to get into the system. We assume that a file called manager.txt exists (with multiple lines: John, JOH121280\n Jane, JAN020578\n Anna, ANN151085\n ... ...) and you need to place it together with other XML documents in the /data folder. Each line records the manager id and the password. The inputted manager id and password are checked against the file. If the manager's information exists in the file, the manager id will be remembered by the system and two links for listing (see listing.htm in 2.3.3) and processing (see processing.htm in 2.5.1) will appear; otherwise, login failure message will be displayed for invalid manager id or password. You may choose to use a session variable to keep the manager id. If the listing link or the processing link is pressed, re-direct to listing.htm or processing.htm.

2) Design an XML document (goods.xml) for storing all items added. The XML document may store more information for the item than those inputted, including the item number generated, quantity on hold (reserved but with payment not yet confirmed), and quantity sold.

3) Design an HTML page (listing.htm) to add an item (see Figure 1).

4) Create client and server-side programs to get inputs and validate the inputs. If the data validation has problem, show an error message. Otherwise, the server-side program will generate the item number, and add it with the inputs to the XML document. The initial values for quantity on hold and quantity sold are set to 0. If the XML document does not exist (i.e. when the first item is entered in the system), create a new one. Finally, the client-side program needs to display under the inputted data "The item has been listed in the system, and the item number is:

<itemNumber>".

5) As stated in 2.1, if the "logout" link is pressed, a logout page logout.htm will display a "thanks" message, which includes the manager id.

Figure 1: Sample HTML page for listing

Customer Login and Buying

This component allows an existing customer to login, view all available items and put interested items in a shopping cart for purchasing. The specific functions of this component include

1) Design an HTML page (login.htm) to allow an existing customer to log into BuyOnline. The email address and password are required and they are checked against the XML document customer.xml. If a customer is matched against the information stored in the XML document, the customer id of this customer will be remembered by the system and the page for buying (buying.htm) will show up; otherwise, login failure message will be displayed for invalid email address or password. You may choose to use a session variable to keep the customer id.

2) Design an HTML page (buying.htm) with AJAX techniques to periodically (say, every 10 seconds) retrieve data from the XML documents and neatly display all available items in a table as a catalog. An item is available if the quantity available is greater than 0. For each item, display in a row the item number, name, first 20 characters of the description, price, and quantity available (See Figure 2). Don't display the quantity on hold, and quantity sold.

3) For each displayed item, add a button "add one to the cart" at the end of the row. Once this button is pressed, the XML document is checked to see if the item is available (i.e., quantity available is greater than 0). If not, alert "Sorry, this item is not available for sale"; otherwise, first update the XML document by subtracting 1 from the quantity available and adding 1 to the quantity on hold, then update the shopping cart (see (4)).

4) Under the catalog, display a shopping cart (Also see Figure 2). When the button "add one to the cart" is pressed on an available item in (3), if the item is not in the shopping cart, a new row is created and the item number, quantity with value 1, and the price are displayed; otherwise the quantity for the item is increased by 1.

5) At the end of each row in the shopping cart, a button "remove from the cart" is displayed. If this button is pressed, delete the row from the shopping cart, and update the XML document for the item by decreasing the quantity on hold and increasing the quantity available by the quantity shown in the shopping cart.

6) Under the shopping cart, add two buttons "confirm purchase" and "cancel purchase". If the button "confirm purchase" is pressed, for each item in the shopping cart, update the XML document by decreasing the quantity on hold and increasing the quantity sold by the quantity shown in the shopping cart; then calculate the total amount due to pay, clear the shopping cart, and display the message "Your purchase has been confirmed and total amount due to pay is tiny_mce_markerlt;totalAmountDue>". If the button "cancel purchase" is pressed, for each item in the shopping cart, update the XML document by decreasing the quantity on hold and increasing the quantity available by the quantity shown in the shopping cart, clear the shopping cart, and alert "Your purchase request has been cancelled, welcome to shop next time".

7) When the "logout" link is pressed, if the shopping cart holds any item, cancel the purchase first. After that, a logout page logout.htm will display a "thanks" message, which includes the customer id.

Figure 2: Sample HTML page for buying

Manager Processing

This component allows store managers to process sold items from time to time.
1) Design an HTML page (processing.htm) that displays in a table all those items with non-zero sold quantities from the XML document goods.xml. The item number, name, price, quantity available, quantity on hold, and quantity sold will be displayed. Add a "process" button under the table (See Figure 3).

2) When the button "process" is pressed, you are required to update the XML document by clearing the quantity sold for all those items with sold quantities, and removing those items that have been completely sold, i.e., both quantity available and quantity on hold equal to 0. (Note: in real application, you need to calculate the revenue generated out of the sold items. For this assignment, you are not required to do this calculation.)

3) As stated in 2.1, if the "logout" link is pressed, a logout page logout.htm will display a "thanks" message, which includes the manager id.

Figure 3: Sample HTML page for processing

3 Submission Requirements

You must ensure that all your program files used for the assignment sit in a directory called "Assignment2" (use this name exactly, it is case sensitive and no space between Assignment and 2) under www/htdocs directory within your mercury account. This directory should contain no other files and no other sub-directories. However, your XML documents customer.xml and goods.xml, and the file manager.txt must be placed under www/data directory.

All files required by the assignment description must be submitted as one single ZIP file by using the electronic submission system (ESP). The files should include:
- XHTML files buyonline.htm, register.htm, mlogin.htm, listing.htm, login.htm, buying.htm, processing.htm, and logout.htm;
- the XML data file customer.xml with at least 3 customers and goods.xml with at least 5 items;
- the file manager.txt;
- the JavaScript, PHP, and XSLT files that you use;
- other files that you use;
- readme.doc that includes a list of all the files in the system and brief instructions on how to use the system.

For each submitted file, we require the minimum comments including student information and the main function for the file. After submission, you are not allowed to change any of the submitted files in the Assignment2 directory on your mercury account; time stamps will be checked. Assignments that fail to follow "submission requirements" will NOT be assessed.