From CS 312 Fall 2011

CS312-F11: 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

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"

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)

Retrieved from http://www.cs.odu.edu/~mweigle/CS312-F11/Lab-Ajax
Page last modified on November 16, 2011, at 04:33 PM