CS-90. Assignment 7
Spring 2009

1. Create new versions of login.php and form_handler.js to use for this assignment. You can make copies of the current versions, and then edit them to fit this assignment.

   Edit login.php so that it is no longer a web page, just straight PHP code. Take out the code at the beginning of the course template; take out the DOCTYPE, and take out all XHTML, text, and all PHP echo statements. Add one echo statement at the end that outputs the result of calling json_encode() with the result of the call to new Person() as the argument.

   You should end up with just one block of pure PHP code; be sure it is surrounded by the <?php and ?> delimiters.

2. To get started with the JavaScript side, change your submit listener so that it always calls Core.preventDefault(), whether the form data is valid or not.

   The goal is to simulate submitting the form data using an XMLHttpRequest object. You could use either the GET or the POST method; since the URL will never be seen by the user anyway, I’ll describe using the POST method. The procedure is outlined in chapter 8 of the Simply JavaScript text, but the code on page 311 needs some amendments. The correct sequence is:

   1. Create an application-global variable for the XMLHttpRequest object.
   2. Once the submit listener has determined that the form data is valid, assign a reference to a new XMLHttpRequest object to the variable you created in the previous step. Note that the code on pages 307-308 shows how to do this in a way that will work for both Internet Explorer and all other browsers. If both try blocks fail, display an alert(), and return from the submit listener without going any further.

   3. The three statements on page 311 (first blue panel) must all be present despite the text saying the first one is needed only for Opera. More importantly, the call to open() must be made before the call to setRequestHeader(), rather than after it.

      You will need to set up an event handler for the asynchronous events that occur after the code calls send(), as shown on page 312. I recommend making the assignment to the request object’s onreadystatechange property right after the call to open().

      The string passed to send() must be the same as the part of the URL following the question mark that the browser would generate when submitting the form using the GET method. That is, you need to set up name=value pairs separated by ampersands for the various fields of the form that you want to pass to login.php. By using the POST method in the open() call, you are setting it up so that these variables will be accessible to PHP in its $_POST superglobal array. It’s not necessary to do so, but you might find it convenient to create the string to be passed to send() in a separate statement:

      var msg = "email=" + emailInput.value + "&password=" + passwordInput.value; requestObject.send(msg);

      Once send() has been called, the submit listener function should do nothing else (assuming Core.preventDefault() has already been called).

   4. So far, there has been to way to test the code you have written, which is unfortunate: you are going to be simultaneously debugging login.php and two different parts of form_handler.js—it would be much more efficient if you could code and test each part independently. But it can’t be done, so there is no choice but to plunge ahead and add the code for the readystatechange event handler. Note that this function is an event handler, not an event listener (because there cannot possibly be another JavaScript program that has access to the XMLHttpRequest object that your program created).

      The event handler will be called each time the state of the XMLHttpRequest object changes: put in a console.log() call to display the value of the request object’s readyState property each time it is called. At this point, you can submit your form, and you should get a set of console messages showing the readyState values 1, 2, 3, and 4. Debug until you get this part working before going on to the next steps.

   5. Add code to the readystatechange event handler to test the value of readyState, and when it reaches 4, log the following values to the console: status, statusText, and responseText. If you supply one of the email addresses that is in your database, you should see the information from the database for that person in the responseText; if the email address is not it the database, the fields should all be null.
   6. Download the JSON library, json2.min.js; if you are interested in looking at the source code you can get the un-minified version, json2.js. Put it in your scripts directory, and link to it from your index.xhtml page. Be sure to put the new script tag before the one for your own code.

      Create a JavaScript object from the responseText string using JSON.parse():

      var responseObject = JSON.parse(requestObject.responseText);

      Now test that you can process information in the responseObject by logging messages to the console:

      var msg = "Not in database"; if (responseObject.id) { msg = responseObject.first_name + " " + responseObject.last_name + " is "; msg += (responseObject.is_registered ? "" : "not ") + "registered."; } console.log(msg);
   7. The final part of the assignment is to replace the calls to console.log() with DOM manipulation operations so the user is notified of their status with respect to the database. The technique I demonstrated was to add a div element after the form, and to adjust the text in it by assigning different strings to the its firstChild.nodeValue property. Note that the the element must contain some initial text or it will have no firstChild whose value you can change: even a single space will suffice.

      Be sure there are no calls to console.log() (or any alerts other than genuine error messages) in you code, and test it in various browsers.

When your assignment is working, log out and be sure your profile is copied back to the server. Send me an email message telling me that you have completed the assignment, and I will get a copy of it from your account on Oak for testing. If your roaming profile does not work, mention that in your email, and I will copy your My Website directory from your home directory instead of your profile directory on Oak.

1. Be sure to put your name in your email message!
2. The Subject line must be CS-90.3 Assignment 7 to avoid my spam filters.
3. Send your email to either Christopher.VickeryATqc.cuny.edu or vickeryATbabbage.cs.qc.cuny.edu — but not to both.
4. See the course syllabus for grading and late homework policies.