CS 312 - Internet Concepts
Fall 2009: Tues/Thurs 11am-12:15pm, MGB 0129

Print - Admin

Announcements

Staff

  • Dr. Michele Weigle
  • mweigle at cs.odu.edu
  • E&CS 3214
  • Office Hours: MW 2:30-4pm
  • Grader: Hui Shi
  • hshi at cs.odu.edu

Schedule

Syllabus (pdf)

Useful Links

Project 7: Adding Ajax

Assigned: Tuesday, November 24, 2009
Due: Thursday, December 3, 2009 before midnight (due date edited 12/1 -MCW)

Setting Up | Description | Requirements | Submission

The goal of this assignment is to enhance the inventory page with Ajax and the XML that you created in Project 6.

Setting Up

Here are the steps to get started:

  1. Create a directory for this project in ~/public_html/cs312/.
  2. Copy the files from ~/public_html/cs312/project 5 directory/ into the newly created project 7 directory.
  3. Copy the XML files from ~/public_html/cs312/project 6 directory/ into the newly created project 7 directory.
  4. Make sure that the directory and file permissions allow anyone to view the files.
  5. Create a text file named contact-info.txt in the newly created project 7 directory. You will write a PHP script to write data into this file, so the webserver needs permission to write to the file.
    • touch contact-info.txt - creates the file
    • chmod 666 contact-info.txt - sets the appropriate permissions
  6. Important: When you are testing, make sure that your URL starts with webspace.cs.odu.edu, not www.cs.odu.edu.
    • If you get the following error, it means that you're using www.cs.odu.edu instead of webspace.cs.odu.edu:
    Fatal error: Call to undefined function: simplexml_load_file()

Description

Recall the scenario: You are in charge of designing a website for Dan's Disco Discs. As the name implies, they specialize in selling disco CDs. The company wants a home page, an inventory page, a disco information page, and a contact page.

In this assignment, you will be adding a drop-down element to the inventory page. When a user selects an album from the drop-down box, all of that album's information (stored in the XML file you created in Project 6) will be displayed on the webpage.

You'll also be adding a PHP script to write the user's contact information to a text file.

Requirements

  • Edit your web pages with a simple text editor (no Word or any other fancy tools allowed).
  • Use XHTML 1.0 Transitional. Your pages must pass validation.
  • Your CSS must also pass validation.

Inventory Page

HTML

  • Add a drop-down box that contains artist and title for all of the albums in your XML file.
  • When the user chooses an item, display the information about that album.
    • Create a div section where the album information will be displayed.
  • You will be accessing XML using JavaScript and PHP, so include helperFunctions.js

<script type="text/javascript" src="http://www.cs.odu.edu/~mweigle/cs312/js/helperFunctions.js"> </script>

PHP

  • Create a PHP script that accesses the XML, finds the appropriate album, and writes out the data for that album.
  • The PHP script should write out HTML code to format your album information.
  • Display the album information in any form you wish, but you must include all items in the XML file for that album and show the album artwork instead of just printing the URL.
    • Part of your grade depends on how nicely the album information is displayed.

JavaScript

  • The JavaScript may be embedded in your HTML file or put in a separate file.
  • Make sure to define var xmlhttp = null; inside the JavaScript section but outside of any function so that it's a global variable that can be used by the functions in helperFunctions.js.
  • You must have a JavaScript function that builds the appropriate request to call the PHP script. This function should be called when the user selects an item from the drop-down list.
  • You must also write a JavaScript function named doStuff() to handle the data printed from the PHP script (which will be stored in a variable named xmlhttp.responseText).

Extra Credit

  • Add a type-ahead box for the artist that will access the XML and display albums belonging to all artists whose names start with the current contents of the type-ahead box. (Note this is in addition to the drop-down box, not in place of.)

Examples (includes extra credit portion):

Contact Page

HTML

  • Add the same last modified footer line that you put on the inventory page in Project 5.
  • You will be accessing PHP from JavaScript, so include helperFunctions.js.
  • Add a link to contact-info.txt in the footer section after the last modified line.

JavaScript

  • Edit the validateForm() function your wrote in Project 5 so that if the form validates correctly, it will call a PHP script to write the contact data to a text file. The data in the form should be passed to the PHP script when you build the URL.
  • Make sure to define var xmlhttp = null; inside the JavaScript file but outside of any function so that it's a global variable that can be used by the functions in helperFunctions.js.
  • Write the doStuff() JavaScript function that will be called when the PHP script returns. This function should pop up an alert that thanks the user for their comments. The function should also clear the form on the contact page (you can use document.forms[0].reset();).
    • If you put this JavaScript in an external file, it must be a different JavaScript file than you used for the inventory page. This is because both pages need different doStuff() functions.

PHP

  • Create a PHP script that will take the contents of the contact form (passed in the URL that calls the script) and write it out to contact-info.txt.
  • Open contact-info.txt for appending so that you don't overwrite previous users' comments.
    fopen (filename, "a")
  • Include the current date and time with each user's comments.
  • Format the user's information and comments however you wish, but make sure that the information is easily readable. You may need to include spaces or newline characters (\n) as appropriate.
    • The newline characters that the user entered in the comments box will not appear.

Example contact-info.txt

 -------------Thu Nov 5 2009 12:08:52 EST-------------
 My Name
 myemail@email.com
 Your albums rock!
 -------------Thu Nov 5 2009 12:09:55 EST-------------
 Disco Stu
 discostu@disco.com
 Do you have the soundtrack for Mamma Mia?

Home and Disco Pages

  • Add the same last modified footer line to these pages that you put on the inventory page in Project 5.

Submission

Go to the Project 7 Submission page, and enter your name and the URL of your webpage.

  • Make sure that the URL works and has been validated before you submit it.
  • Only submit your URL once!