PHP/Ajax Lab Day

December 2, 2010 and December 7, 2010

Setup

If you haven't done this previously:

Create a new directory ~/public_html/cs312/labs/ajax/ for today's exercises. You'll be creating files for HTML, JavaScript, XML, and PHP (and CSS if you wish). Don't forget to set the permissions on the new directory (chmod 755 ~/public_html/cs312/labs/ajax/).

Make sure that you set the permissions on the HTML, JavaScript, and CSS files to chmod 644, the PHP file to chmod 755, and the XML file to chmod 666 (we'll be writing to the XML from PHP).

Submission

As you complete each lab exercise, let me know and I'll come check it out.

Debugging

• Firefox: Tools > Error Console
• Chrome: View > Developer > JavaScript Console

Lab Exercises

1) XML Display

Download the file books.xml to ~/public_html/cs312/labs/ajax/.

Write XHTML and JavaScript code to display a table with the author, title, genre, and price fields of all items in the XML file.

Hint: See the plant-table.html example from the XML lecture (see slide 43).

2) Write to the XML file

Write XHTML and PHP code to add the following entry to the XML file when the user presses a button:

book: id="bk112"

• author: Galos, Mike
• title: Visual Studio 7: A Comprehensive Guide
• genre: Computer
• price: 49.95
• publication date: 2001-04-16
• description: Microsoft Visual Studio 7 is explored in depth, looking at how Visual Basic, Visual C++, C#, and ASP+ are integrated into a comprehensive development environment.

Note: See the SimpleXML reference to find out how to add the attribute for the book.

Reminder: To call a PHP script directly from an XHTML form, use the action attribute of form and a Submit button.

Hint: See the example starting at slide 28 in the PHP/Ajax lecture.

3) Searching an XML file

Write XHTML, JavaScript, and PHP code to implement a type-ahead box that displays all books by a particular author.

Steps:

1. Write XHTML code that includes a text box and a named place for returning the books.
2. Write JavaScript code that is called when the user types in the text box. The JavaScript code should use sendXHR() to call the PHP script and write the results to the named area on the webpage.
3. Write PHP code that loads the XML file and searches for author entries that start with the given query string. The PHP code should return (i.e., echo) XHTML code that will display all matching book records.

Note: See the XPath reference for more information on searching XML files. See the XPath Functions reference for more information on how to select strings using XPath.

Hint: See the suggest.html example from the PHP/Ajax lecture (slide 34)