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/users)
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 project6/p2 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 jQuery or any other libraries to implement Ajax support
in the browser; 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 be 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 which part(s) of your solution
are reusable and give examples of other situations in which the
component(s) might be used.
-
As always, your Web pages should designed so that they are reasonably
attractive and easy to use.
Style Points (10 points)
The most important criterion for these points is whether your
Ajax support is reusable. In addition, your
Javascript must be clean (appropriate use of classes, no global
variables). We will also consider
the usual issues of MVC decomposition, Rails conventions, validation,
overall cleanliness of your code and templates, and the appearance and
convenience of your Web pages.
Hints
- Use the GET method for your Ajax requests, not POST. If you use POST,
then Rails will require an authenticity token in the request, to prevent
CSRF attacks just as for form posts, and will reject any
Ajax requests that don't include the token.
- 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.