CS 142: Web Applications (Fall 2010)

CS142 Project #7: Ajax

Problem 1: Photo Searching (40 points)

In this project you will extend your work on Project #6 by implementing a search mechanism for photos. Here is a rough description of the new feature:

• The main page (pics/allUsers) should contain an entry where users can type a search string.
• As users enter text, thumbnail-size versions of all matching photos should be displayed under the text entry. You should use Ajax to update this display automatically whenever the search string changes.
• Thumbnails should be "hot": if the user clicks on one, switch to the page for that photo's user (pics/user). If the user has a large photo collection, make sure that the selected photo is visible.
• A photo matches the search string if (a) the text of the search string is a substring of any comment on that photo or (b) the search string is a substring of either the first or last name of any user tagged in the photo. Your comparisons should be case insensitive (a search string of "bARa" matches "Barack").

To get started, copy the directory tree for Project #6 to a new directory named project7. Do all of your work for this project in the new directory.

The remaining details of the design and implementation are up to you, except for the following requirements:

• You may not use the special Rails helpers for Ajax such as observe_field; you must write Javascript code that creates XMLHttpPRequest objects and responds to their events (we want you to learn about the low-level details of Ajax).
• In order to receive full credit for this project your implementation must designed with reusability in mind: rather than creating a special-purpose implementation that works only in this one exact situation, you should create reusable components that could potentially be used for other purposes. It is up to you to decide on the best component(s) to create. Create a file README in the top-level directory of your solution that describes the way(s) in which you have created reusable components.
• As always, your Web pages should designed so that they are reasonably attractive and easy to use.

Hints

• In order to prevent CSRF attacks Rails requires an authenticity token to be included in Ajax requests just as for form posts; it will reject any Ajax requests that don't include the token. The Rails method form_authenticity_token will return the value of the token for this session; you must arrange for this value to be included in all Ajax requests as the value of the authenticity_token parameter.
• You may find the Javascript method encodeURIComponent useful: this method will perform URL encoding on the name or value for a query value.

Deliverables

Use the standard class submission mechanism to submit the entire project7 directory. Don't forget to include the README file describing your approach to reusability. As always, your HTML files should pass XHTML validation.