CMPUT 499: Web-Based Information Systems

Assignment 2

CMPUT 499 (Winter 2002)

Due Date (by e-mail): February 15th, 2002 (11:59pm)
Percentage overall grade: 4.5%
Penalties: 20% off a day for late assignments after February 18 at 11:59pm
Maximum Marks: 10

Objectives

  1. Get familiar with HTML Forms
  2. Hands-on experience with CGI programming
  3. validation of user input on server-side
  4. Realize the issues with storing user state on server
  5. Use data sharing with hidden variables

You are asked to implement a small application that uses HTML forms to enter data and a set of CGI programs to process the input and generate HTML pages. The application is to present a small catalogue of products to buy and allow a user to select articles. The user selections (i.e. cart content) are stored on the server side until the user chooses to check out. This application is a very simple version of a gardening store. It is a warm-up for your projects. The data flow is as follows:

Data flow for the application

The identification box deals with displaying a form to input information about a customer as in the next sample mockup.
Mockup for identification form
All the fields are textfields except the province which should be a select menu.

The CGI program will have to validate the data entered and store the data on the server until the invoice is confirmed. Some fields are mandatory and the data should not be accepted until all required fields are entered and all input is validated.

Note that you have to consider multiple users and not mix thier information and purchases. There is no need to use a DBMS for this assignment, but if you wish to do so you can use ORACLE in the lab. If you shoose to use a DBMS, this will complicate your assignment but will not add value (i.e. marks) to your deliverables.

The options box is to select either to check-out or purchase items in one of the 3 categories: seeds, plans, and tools. These options are presented in a set of forms rendered as a menu. An example could look like the following:
Mockup for Choices form
The 3 options are presented as buttons while the checkout is supposed to be a clickable image of a cart.

The selection forms are forms presented to the user to select articles to buy. Whether it is for seeds, plans, or tools, present a set of items that the customer can select at the same time and specify the quantities. The "put in cart" button would allow the user to put more that just one item at a time. An example with the seeds can be seen below:
Mockup for Purchasing form
The checkbox indicates that the user wants the item. If a quantity is entered but the checkbox is not checked, the items should be ignored.

The validation box is a a confirmation page that summarizes the last operation before the transactoipn actually goes to the cart.

The last step at checkout is to display a final invoice with all the items in the cart and their prices as well as the total due. The invoice should be personalized.

Deliverables

This assignment is to be submitted via email to (ayman@cs.ualberta.ca). Send only one tar file that contains all that you are submitting:
  • The html files needed for the on-line running application with the functionality as described.
  • The executable and source files containing the CGIs for the on-line running application with the functionality as described.
  • A short report explaining how you implemented the applications and the issues you noted.
    Remember that the esthetics are not important in this assignment. Functionality is important.

    Hint:

    Use input tag of type hidden to store an id of a customer
    • HOME     Activities