CS-090.3 Assignment 4

For this assignment, you are to add two features to the login page you developed for Assignment 3: (1) Use JSON to return an object with information (or lack thereof) for the user who attempted to log in, and (2) Create the visual appearance that the loging form is replaced for 2" with status information about the login attempt, followed by the reappearance of the login form. This is not supposed to be a realistic application; rather, it is an exercise in using PHP objects, JSON, JavaScript timers, and JavaScript DOM manipulation.

1. Establish an AJAX link between the JavaScript and PHP sides of the application.

   If you have not already done so, modify your code from Assignment 3 so that the form is never actually submitted. Instead, when the user changes the contents of the user and/or password fields of the form in such a way that valid data have been entered, create an XMLHttpRequest object, and use it to send the form data as URL-encoded form data (use the setRequestHeader() function to do this as shown on page 311 of the textbook.)

   Use Firebug to verify that the form processor is returning the same data it did for Assignment 3. When that is working, change the form processor so that it echoes a string that does not include any XHTML tags; the JavaScript code will take care of displaying the string in the next step of the assignment.

2. Replace the contents of the form with the responseText from the form processor.

   Make sure the entire content of the form is one element, either a div or a fieldset, and save a reference to this element during the init() function. Note that there will be stray text node children of the form because XML preserves the whitespace structure of the document; you can discard those nodes, which will have a nodeType value of 3.

   When the XMLHttpRequest completes, create a text node document.createTextNode(theRequest.responseText); and add it to the form theForm.appendChild(…).

   Set a timer to execute another function as described in Chapter 5 of the text. Use a value somewhere between 2 and 4 seconds. When the timer times out, remove the text node child from the form, and add the original child back again.

   Desireable features include: wrap the text returned by the form processor inside an h2 or other element; clear the password field when the original form contents are restored; allow the user to click on the form to get rid of the message without having to wait for the timeout to finish (be sure to clear the timeout and remove the click listener).

3. Use JSON to send a PHP object in response to the XMLHttpRequest.

   For this part of the assignment, you are to create a PHP object that encapsulates the results of the SQL query rather than just a summary string as done so far. In anticipation of “further developments” in this project, you are to create the object in a general way so that different queries and different results might be accommodated using the same basic structure. The main overhead this implies is that you will need to establish a class that describes these objects; creating an actual object will be the job of various helper methods that belong to the class.

   New contents of process_form.php):

   1. Create a class to hold all the information from one row of your Users table.

      class User { public $email, $name, $password; }

      The class name does not have to match the table name, but it is a reasonable convention to follow. Likewise, the list of variables would reasonably be named for the column names of the table for this application. Normally, class variables should be declared private (or possibly protected) rather than public, but you are going to send instances of the class as JSON encoded strings, and the PHP json_encode() encodes only public variables, so there is no choice in the matter.

When you have built and tested your web page, send me an email message to me saying your assignment is ready; I will get a copy from your account on the server and check it out. Send your email to:

Be sure the Subject Line of your email says CS-90.3 Assignment 4, just like that, to be sure your message does not get trapped by my spam filters.

Be sure to sign your email so I can tell who sent it!