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

Print - Admin





Useful Links

Project 5 - Search Media Library using Ajax

Assigned: Tuesday, November 22, 2011
Due: Tuesday, December 6, 2011 before midnight

The goal of this assignment is to complete the final project -- a set of webpages that allow a user to manage and search a personal media collection (CDs, MP3s, DVDs, video games, etc.).


In this assignment, you will be implementing your search.html page to allow the user to search for items in your XML file. Provide the user with a drop-down box to choose what they will search by. Provide the user with a text box that will reveal the desired information as the user types (Ajax-based type-ahead box). The information displayed must contain all of the information about all items that match the search, including the artwork.

I've included an example below.

In addition to making the required changes to the search page, the result of this project must represent the final product of your personal media collection. The website must look polished and be complete to receive full credit.


Note: These are the items that we will check for when grading your assignment. Each is worth 10 points, unless otherwise indicated.

  1. Include a drop-down box to allow the user to choose how to search the collection (artist, title, year, ...).
  2. [20 points] Include a text box that works as a type-ahead box (using Ajax), revealing all information from the matching items as the user types in the box.
  3. In the footer section of each page, use JavaScript to indicate the date the page was last modified (hint: document.lastModified). This should replace the date you hard-coded in Project 1.
  4. Home page works as required in Project 3 (see requirements on assignment page).
  5. Add page works as required in Project 4 (see requirements on assignment page).
  6. All pages are styled using the same CSS file.
  7. All pages use CSS for layout that includes the following (required) sections:
    • header - contain the name of your collection website and the name of the page
    • navigation - provide links to each of your webpages
    • footer - must contain "Website designed by Your Name", "Last modified: date" (using JavaScript), and link to XML file on home and add pages
    • content - specialized content for each page
  8. The website looks polished and is complete.
  9. The HTML of all pages must pass XHTML 1.0 Transitional validation.

Setting Up

  1. Create a new directory under ~/public_html/cs312/ for this project
    • chmod 755 ~/public_html/cs312/new directory name
  2. Copy the files you created in Project 4 over to this directory.
  3. Make sure that the directory and file permissions allow anyone to view the files.


  • Note: Your project will be graded using the Firefox browser.
  • Edit your HTML and CSS with a simple text editor (no Word or any other fancy tools allowed).
    • examples: emacs (on Unix machines), pico (on Unix machines), Notepad++ (on CS Windows machines)
  • Remember to use tags that are acceptable for XHTML (all lowercase and include closing tags when required).
  • All work must be your own.


Go to the Project 5 Submission page, and enter your name and the URL of your Project 5 page (must start with http://www.cs.odu.edu/).

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