CS 312 - Internet Concepts
Fall 2011: Tues/Thurs 3-4:15pm, Dragas 1117

Announcements

Staff

Schedule

Syllabus

Useful Links

PHP/Ajax Lab Days

November 17-22, 2011

Setup

If you haven't done this previously:

Create a new directory ~/public_html/cs312/labs for your lab exercises and set the permissions so that it the web server (anyone) can access it (chmod 755 ~/public_html/cs312/labs).

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) Setup - XML Display

Copy books.xml and the HTML file used to display the XML table from your XML lab folder. If you haven't done so yet, complete the XML Lab before continuing.

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="bk114"

  • 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?.

When you submit the form, it will take you a new page with the output of the PHP script. You may want to have the script output a link back to your lab HTML page so that you can see the updated table.

3) Searching an XML file

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

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. Make sure to set the xmlhttp global variable: var xmlhttp = null;
  4. Write PHP code that loads the XML file and searches for genre 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)