Spring Break Homework: Ajaxify This

Your next homework is a bit more involved than usual. You will be building an Ajax front-end to a php+mysql backend that I have provided for you. There are two steps to this process. First you must download and install the php code and the initial database. We will do this step in class, together. The second step is the homework part where you use your new-found jQuery skills to Ajaxify the web 1.0 setup I provide. This homework is due Monday, 16 March at 9am.

Install PHP and Mysql database

The first step is to install the php code and the database. To do this you must follow these steps.

1. Check to make sure there is a new web directory under your home directory. If there isn't, talk to me.
2. On Friday I sent you an email with a list of usernames and urls. The urls look like http://web2.cse.sc.edu where instead of 2 you will have another number. In all the following instructions replace the 2 in web2 with your own website number. Find your username in the email and load that url in your browser (this will only work from within USC). The page you see should look like:
   
   • cgi example
   • php example
   • jsp example
   Click on php example and you should see a "Hello World"
3. Download php.tar.gz and place it on your web directory.
4. On the comand line do:

   cd ~/web
   tar xfz php.tar.gz
   

   This will place all the files in your php directory. You can now

   cd web
   ls
   

   to see the new files.
5. We will now install the data into your mysql database. To do this you will first need to go to https://www.cse.sc.edu, login with your Unix username and password, then click on Personal Homepage then click on CGI/PHP/JSP/MYSQL? then click on the link to change your Mysql password. Change your password from the default to something else, but remember the new password!
6. Back on the command line type (but replace web2 with your own web server and the word 'yourusername' with your username):

   mysql -h web2.cse.sc.edu yourusername -u yourusername -p

   It will ask you for the password you just set. Enter it. You should now be logged in to your mysql server. Hit control-D to log out and go back to the command line.
7. I have provided you with a simple database of books in the file table.sql. To load this data onto your mysql server type:

   mysql -h web2.cse.sc.edu yourusername -u yourusername -p < table.sql

   You will need to enter your password again. To make sure it works type

   mysql> show tables;

   at the mysql prompt. It should show you that there is now one table called 'books'. To view the contents of this table type:

   mysql> select * from books;

   If you see a lot of book titles and other stuff scrolling by then you now have the book data in the database.
8. Open the file config.php in a text editor and change your website, username and password. The file should look like

   <?
   $link = mysql_connect('web2.cse.sc.edu', 'yourusername', 'yourmysqlpassword');
   if (!$link) {
       die('Not connected : ' . mysql_error());
   }
   
   if (! mysql_select_db('yourusername') ) {
       die ('Can\'t use yourusername : ' . mysql_error());
   }
   ?>
   

   Again, change web2.cse.sc.edu to your own website.
9. You should now be able to visit the url http://web2.cse.sc.edu/php/list.php and get an html table containing all the books in the database. Notice that there is also an edit and a delete button. Feel free to use these to edit the books (the exact books in the database won't matter for this homework). Also notice that there is a new.php which you can use to add new books to the database. What you have now is a basic CRUD interface to the books table in the mysql database. Basically, you can now Create, Read, Update (edit) and Delete books from the database using a web interface. Neat! Make sure you play with this website a bit before moving on: try to figure out how it works.

Ajaxifying the Book Application

For your homework you will turn the crude web 1.0 website I have given you into a shiny new web 2.0 website. Specifically, your new website will consist of only one page of html and all the CRUD functions will be implemented using Ajax (use the jQuery library for this).

Notice first that there is get.php file also included. This script takes as input any one of the arguments title, author, year, isbn, publisher, and rating, with a string value. It then returns a JSON object with the books that match that query. For example, try loading the url http://web2.cse.sc.edu/php/get.php?author=bi. You will get back a JSON object with all the books whose author contains the substring 'bi'. This is the function that you will use to retrieve data back from the server. You will alse need to use the other php scripts (edit.php, delete.php, new.php) to change data on the database.

Your one webpage will look like this (but much prettier, of course):

Id

Title	Author	Year	Isbn	Publisher	Rating

The boxes contain the search critera for the user: the keywords the user wants to search. If he types 'bi' in the author field then, when he clicks away from the box or hits the enter key, a table will popup up below this table containing all the books that match the author=bi search. If the user fills in more than one box simply ignore all but one of the boxes (that is, assume he won't do that).

I also want the list of books you show the user to be editable in place. That is, the information for each book should be displayed as regular text to the user (not in a text box), but if the user clicks on one, say the title of one of the books, then text gets replaced by a text box that contains the title and the user can edit the title. When the user clicks away or hits return you will commit these changes to your database.

Finally, you will implement a little notification area that tells the user when each of the XHR requests has completed. Or, if a request is taking too long then you will display an error message, cancel that request, and launch another identical request.

To turn it in just

cd ~/web
tar cfz php.tar.gz php

then email me the resulting php.tar.gz. Also, email me the URL to your working website.