CMPUT 410: Web-Based Information Systems

Assignment 2

CMPUT 410 (Fall 2004)

Due Date (by e-mail): October 15th, 2004 (16:59)
Percentage overall grade: 5%
Penalties: 20% off a day for late assignments after October 15th at 16:59pm
Maximum Marks: 10

Objectives

  1. Get familiar with HTML Forms
  2. Hands-on experience with CGI programming
  3. validation of user input on client-side
  4. Realize the issues with storing user state
  5. Use data sharing with hidden variables
  6. Learn how to validate forms on client-side with JavaScript

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. Use Javascript to validate the input directly on the client-side before any data is submitted to the server.

The application is to present a small list of hotels by cities and allow a user to select a hotel and dates. The user selections (i.e. cart content) are stored until the user chooses to check out (i.e. confirms the reservations). This application is a very simple version of your Hotel reservation for the project. 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.

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 their 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 choose to use a DBMS, this will complicate your assignment but will not add value (i.e. marks) to your deliverables.

The option-cities box is to select either to confirm reservations or choose a city for new reservations among Edmonton, Calgary and Vancouver. The hotels of these cities are presented in a set of forms rendered as a menu. An example could look like the following:
Mockup for Choices form
The 3 cities are presented as buttons while the checkout is supposed to be a clickable image.

The selection forms are forms presented to the user to select hotels and date periods. The "Reserve" button would allow the user to make more that just one hotel reservation. An example for Edmonton can be seen below:
Mockup for Purchasing form
You do not need to have more than 3 hotels per city. Also, you do not need to verrify whether periods overlap. However, the depart date should be after arrival date for a given hotel.
New explanations: The checkbox indicates that the user wants the hotel. When a date is entered, the checkbox is automatically checked. If the checkbox is unchecked, the dates should be reset for that hotel. The field for enetring dates can be implemented in many ways. The above mockup shows three text fields for a date (year, month and day). However, one unique text field can also be used. Also you could have a menu (selection option) for the months for example. The same applies for day and year.

The validation box is a confirmation page that summarizes the last operation before the transaction is actually accepted. It summarizes only the reservations of the last city hotel selection.

The last step at checkout is to display a final summary of all the reservations for all 3 cities with the total due. The invoice should be personalized (with name etc.).

IMPORTANT:

Remember that the esthetics are not important in this assignment. Functionality is important.
The CGI can be written in any language available in the lab.

Deliverables

This assignment is to be submitted via email to your TA. Send only one tar file that contains all that you are submitting.
How to create your tar file:
  1. Create a directory, and name it the same as your unix id.
  2. Put all assignment related files into that directory.
  3. tar and zip the directory into a .tgz file. Send that .tgz file to your TA.
What you need to submit:
  • A URL to an on-line running application with the functionality as described with the input validation on the client side using Javascript.
  • All the html files needed for the on-line running applications 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.

Hint:

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