Lab 3 (EXPANDED)

A Real Application

 

 

Introduction

 

This week you will turn your site into a real application!  The key is adding backend server support with a database.

 

Instructions:

 

  1. Copy your Lab02 files to a new Lab03 directory. Your main file should still be called index.html

2.      Here is what you what you want to have when you are finished.  Suggested plan of attach for getting there is below:

    1. There should be some way for the user to add new “things” to your database.  These could be people, books, races, whatever, but there should be at least 3 different “attributes associated with each one (e.g., name, address, and phone).
    2. Adding the new things should be done via your main index.html page.
    3. There should be two ways to retrieve info from the database from your main page. For instance, you might have an option to search for people, then each person is clickable for more details.  Most likely, this should be the two interactions you used for Lab02, but it can change.  You can use either XML or text for the data, but at least one must be asynchronous.
    4. It should be possible to “refresh” your page, so that if one user adds new content, a second user the already had your page open could refresh (e.g., by querying again) and see the updated data.  This implies that if someone queries a second time you must not just add a second list of results to the page – it needs to change, or the old list must be deleted.
    5. As always, your code must be commented!
    6. You may use PHP or Perl.  Examples given are in Perl.
    7. NEW REQUIREMENTS (first two you might have already):
      1. At least one AJAX interaction must be based on a value that user enters in a search box.
      2. At least one AJAX interaction must be based on something the user clicks, where clicking on different elements yields different results.
      3. You can have more than two AJAX interactions if needed.
      4. When the user “inserts” new data, you must detect if the new data is a “duplicate” with existing data (not necessarily all the same, but for instance the same name as a record that already exists).  Your program must use some kind of alert mechanism to warn the user that a duplicate was detected and either replace the old data in the database or leave the database unchanged (don’t allow more than one entry with same name).
      5. In your default.htm page, under “Lab3 “, include brief user instructions (aimed at the instructor) explaining how your interactions work and providing instructions on how to see the duplicate detection in action.
  1. Suggested plan of attack (see also helpful info at end)
    1. Plan and create the database table(s) you will need.
    2. Insert some dummy data into the tables for testing.
    3. Get your first AJAX interaction from last week working, where you replace the static file with some CGI program to read from the database.  At first, the “query” can be hard-coded so that it always returns all the data from the database.
    4. Improve your interaction so that the database results depend on what was clicked or entered in a search box.
    5. Get you second AJAX interaction working.
    6. Implement ability for user to add new data to the database.
    7. If not done already, make sure “refresh” (e.g. a second query) doesn’t continue to show old results or an old list.

4.      Ensure your page works with Firefox. Having it work on IE is encouraged but not required.

5.      Ensure all your pages validate and that you have met all requirements.

     

NOTE: all HTML files must validate as XHTML without errors for full credit.  The penalty for a file that does not validate is 10%.

Helpful stuff

  1. As always, the “Error Console” in Firefox is invaluable.
  2. To connect to the database, use something like (password to be provided):
    $databaseHandle = DBI->connect(
      "dbi:mysql:database=mXXXXXX;host=cs-mysqlsrvr.cs.usna.edu:3306;user=mXXXXXX;password=TBD" );
  3. Perl is easier to debug via the windows command line. You should first check for syntax errors by just “checking” the file:
         perl –c -w myquery.pl
    Once that works run it for real:
         perl -w myquery.pl
    If needed, you can provide CGI arguments like this:
         perl –w myquery.pl “query=dogs&type=2”
  4. On the command line, database errors will usually appear automatically.  From the browser, they won’t – instead insert this as a debug:
         print $DBI::errstr;
  5. Do not use the die() function alone – the error it generates can’t be seen from your web page.
  6. Useful SQL examples:
    1. CREATE TABLE comments (USER_NAME VARCHAR(20), TIMESTAMP DATETIME, COMMENT MEDIUMTEXT, PAGE INTEGER);
    2. INSERT INTO comments (USER_NAME, TIMESTAMP, COMMENT, PAGE) VALUES ('Jamie', '2006-09-27 11:30:00', 'hi', 2);
    3. CREATE TABLE topics (TOPIC VARCHAR(20), OWNER VARCHAR(20));
    4. INSERT INTO topics (TOPIC, OWNER) VALUES ('Cars', ‘Jamie’);
    5. Note: ID is automatically created with the table, no need to specify it.

Deliverables

1)      All of your files for Lab03 should be in a folder called "Lab03" (without the quotes) on the Web drive.

2)      Your main page for Lab03 should be called "index.html" (without the quotes) and placed inside the folder Lab01.

3)      Your instructor will assume that your web pages are viewable at http://www.mXXXXXX.it452.cs.usna.edu/Lab03/index.html where XXXXXX is your alpha number. You should check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!

4)      All files must be complete and saved to your Web drive before you submit the hardcopy of your assignment. Do NOT modify your files after you have submitted your assignment.

5)      Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):

a)      A completed assignment coversheet.  Your comments will help us improve the course.

b)      The first page of the output of the W3C validator, as run on the final version of your Lab03/index.html.  This should show that your document correctly validated, but turn it in anyway if you can’t get your page to validate. 

c)      A printout of the source to your Lab03/index.html file (not the rendered page that you normally see with Internet Explorer/Firefox).   Truncated lines are not acceptable – use Crimson Editor vice Notepad if needed for printing.  You could also paste into Microsoft Word etc. if needed.

d)      Printouts of external JavaScript files, if any.