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 Asynchronous JavaScript and XML technologies.
Assignment Tasks
The main task of this assignment is to implement a simplified online shopping system. You are requested to use the Ajax techniques (JavaScript/HTML, DOM, XML, XMLHttpRequest, CSS, and/or XPath/XSLT) and PHP (NOT ASP.NET) to implement several functions of such an online shopping system. Note: you don’t have to use XPath/XSLT. The various tasks that must be completed for this assignment are specified in the sub- sections below.
Listing Items
This component is used to allow the site manager to add an item into the online shopping system. The inputs for the item include seller id, 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
- 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, quantity on hold (reserved but with payment not yet confirmed), and quantity sold.
- Design an HTML page (listing.htm) to take inputs for an item and to validate the inputs (see Figure 1).
- Create client and server-side programs to get inputs, generate item number, and add them to the XML document. The initial values for quantity on hold and quantity sold are 0. If the XML document does not exist (i.e. when the first item is entered in the system), create a new one.
- If the data validation has no problem, display under the inputted data “The item has been listed in the system, and the item number is: ”.
Sample HTML page for listing. See image.
Catalog and Shopping Cart
This component allows a buyer to view all available items and to put interesting items in a shopping cart. The specific functions of this component include
- Design an HTML page (shopping.htm) with AJAX techniques to periodically (say, every 10 seconds) retrieve data from the XML documents and neatly display all available items (e.g. 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 seller id, quantity on hold, and quantity sold.
- 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 (3)).
- Under the catalog, display a shopping cart. When the button “add one to the cart” is pressed on an available item in (2), 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.
- 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.
- 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 $”. 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”.
Sample HTML page for shopping. See image.
Selling report
This component allows the site manager to check those items with sold quantities.
- Design an HTML page (processing.htm) that displays in a table all those items with non-zero sold quantities from the XML document. The seller id, 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).
- When the button “process” is pressed, you are also 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 total amount of money from the sold items for each seller, and possibly deduct small percentage of brokerage from the total amount as the payment due to the seller. For this assignment, you are not required to do this calculation.)
Sample HTML page for Processing. See image.
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 document goods.xml 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 listing.htm, shopping.htm, processing.htm;
- the XML data file goods.xml (we need it for the purpose of checking the structure);
- any JavaScript, PHP, XSL, and CSS files that you use;
- readme.doc that includes
- a list of all the files in the system;
- 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 and goods.xml on your mercury account; time stamps will be checked. Assignments that fail to follow "submission requirements" will NOT be assessed.
