Web applications using JavaScript and PHP

1. OBJECTIVE

This assignment aims to enhance students' understanding of Web client-side programming techniques using JavaScript and Web server-side programming techniques using PHP. Particularly, after this assignment, students should learn:

1. How are HTML elements and attributes represented in the JavaScript binding to DOM (Document Object Model)?
2. How can an event handler be associated with an event generated by a specific HTML element in the DOM event model?
3. How to access and manipulate HTML document elements from JavaScript?
4. How do HTML documents at the client side send information to web servers? How do server-side programs receive the information?
5. How do server-side programs access files?
6. How do server-side programs generate HTML documents and send them to the client side?

2. LABORATORY

SWLAB1/SWLAB2

3. EQUIPMENT

PC with Web browser, web server, and the PHP parser

4. MODE OF WORKING

You should work on this assignment individually.

5. SUBMISSION PROCEDURE

You must submit your lab assignment to Software Project Lab (N4-B1b-11) before the due date (4:30pm, Friday of Week 13). Late submission will be penalized.

The submission includes a hardcopy written report and a softcopy of your programs. The written report should contain a brief description of your design and implementation for the assignment together with a listing of your source files with adequate comments. The written report must also include a cover page, clearly showing the code and name of the course (i.e., CSC302 Net-Centric Computing), your name and matriculation number. For submitting the softcopy of your programs, your programs must be placed in designated directories on lab PCs. Please refer to the instructions in the Computing Lab 1 for details.

6. ASSESSMENT

The assessment of this assignment will be based on your written report and testing of your programs. Your programs will be tested with the Firefox under Linux on the PCs in Computing Lab 1, so please make sure that your programs work with this particular version of Firefox. Your assignment will be assessed according to correctness, completeness, documentation, and general quality.

7. YOUR TASKS

1. Write an HTML document to create a form that contains:

   A text box to collect the user’s name.

   Three text boxes for the user to key in the numbers of apples (69 cents each), oranges (59 cents each), and bananas (39 cents each) to purchase respectively. Whenever the user’s input in any of these text boxes changes, the validity of the input is checked at the client side using JavaScript. A valid input is defined as a sequence of one or more digits. If the input is not valid, an alert message is produced and the user is asked to input again.

   A text box showing the total cost of the user’s order. The purpose of this text box is to show the total cost of order to the user during his selection. This text box is not for user’s input, so it should be blurred whenever it acquires focus. Whenever the user’s input in any of the above three text boxes changes, if the input is not valid, this text box should display “NaN”, and if the input is valid, the total cost of the user’s order is recalculated and displayed in this text box. This calculation is to be done completely at the client side using JavaScript.

   A collection of three radio buttons that are labeled as Visa, MasterCard and Discover. This is for the user to input his payment method.

   A Submit button. On completing the form, the user clicks this button to submit his order to the web server.

2. Write a server-side PHP program that receives the user’s order when the Submit button on the above HTML document is clicked. On receiving the order, the server-side PHP program computes the total cost of the user’s order and returns an HTML document to the user as a receipt. The receipt should specify the user’s name, what are ordered and the payment method in the form of a table. In addition, the server-side PHP program must also update a file named “order.txt” stored on the web server to reflect the new order. The file records the total numbers of apples, oranges and bananas ordered by all users so far in the following format:

   Total number of apples: 12
   Total number of oranges: 23
   Total number of bananas: 35