[go: up one dir, main page]

CS142: Web Programming and Security

Project 9: Events and Javascript

Due: Friday, March 13, 2009
20 points

In this project you will add tags to your photo-sharing Web site, allowing users to identify people in the photos. Here is a rough sketch of the way this new feature should behave:

  • Users can tag a photo by selecting a rectangular region of the photo and typing the name of the person in the rectangle.
  • The rectangle is selected by dragging the mouse across the photo. As the user is dragging out the region, there should be visual feedback on the screen showing the current rectangle. The user must be able to drag in any direction, and the feedback must remain visible after the drag is complete.
  • If the user doesn't like the rectangle they have selected, they can select another to replace it.
  • In addition to selecting a region, the user can type in the first and last names of the person who is outlined by the rectangle.
  • The user can submit this information, which causes the tag to be recorded in the database.
  • There can be multiple tags for a single photo, each with its own rectangle and user names.
  • The application must provide a mechanism for displaying a photo with all of its tags: the rectangle for each tag should be displayed over the photo, and when the mouse moves over the rectangle the first and last names of the user should be displayed on the page.

Step 1: Project Setup

As with Projects 6 and 8, we have created a skeleton for this project that provides the beginnings of a Rails application and sets up a database and an initial collection of photos for your application to use. The skeleton is a zip file available at p9skeleton.zip. Unzip the skeleton file to create a new application in a directory named project9. For Windows this directory should be a child of the rails_apps directory in your InstantRails installation; on the Macintosh it should be a child of your home directory. Next, invoke the following shell commands to finish setting up the skeleton project (refer back to Project 6 for platform-specific instructions on how to start a shell): 

cd project9
rake db:create
rake db:migrate
mysql -u root project9_development < db/project9.sql

These commands will create a database for the project and fill in some initial data for your project to use.

Start up the new project with a Mongrel server in the same way as for Project 8, and make sure that everything is installed correctly by visiting the URL http://localhost:3000/test/main in your browser. You should see a page saying "Congratulations: you have installed the skeleton for Project 9".

Copy over your controller and view files from project8 to project9 and make sure that you can view users and photos as before. If you do not have working code for Project 8 you may use your code for Project 6, or contact the TAs and they will provide you with controllers and views to start from. You're better off starting from your own code if possible, since you already understand it.

Step 2: Implement Photo Tagging

Is up to you to choose how to implement photo tagging in your application, based on the description above. You can decide whether to use existing pages or add new ones, how to structure any forms and Javascript that are needed, and so on.

Additional Requirements, Hints, etc.

  • The initial database for this project has the same schema as for Project 6. See the Project 6 writeup for details.
  • You will need to modify the database schema for this project, since the initial schema does not support tags. You must use the Rails migration mechanism to make your schema changes. Note: don't use x and y as attribute names in your models: y is a predefined method in ActiveRecord and you will see weird errors if you use it as an attribute name.
  • If you want to position one <div> element at particular pixel coordinates inside another <div>, you must set the position style attribute in the parent <div> to "relative", and you must set the position style attribute in the child <div> to "absolute". Setting the position of the parent creates a new "positioning context" in the parent, so that the child's coordinates are interpreted relative to the parent. If you don't set the position of the parent than the coordinates of the child will be interpreted relative to the page, not the parent <div>; this will probably be much less convenient. For more information on positioning contexts and the position style attribute, see Online Section V of the book Dynamic HTML, available at http://oreilly.com/catalog/9780596527402/online-sections/9780596527402_supp.pdf.
  • For some HTML elements the browser provides default event handlers. If you want to disable the default handler for an event, create your own handler for the event and return false from that handler.
  • You must work alone for this project. You may discuss general approaches with other people, and you may ask for help if you get stuck, but you must design your own Web pages and type your own code.
  • Your application must generate valid XHTML. You can use http://validator.w3.org to validate your XHTML.
  • Your application must use valid CSS. You can use http://jigsaw.w3.org/css-validator/ to validate your CSS.
  • No Javascript libraries should be used in this assignment.
  • As with previous projects, you don't need to spend a lot of time on the appearance of your pages, but they must be neat and understandable. Your forms must contain enough labels and other text so that an average Stanford student can understand how to use them.

Extra Fun (but no extra credit)

If you are having so much fun with this project that you just don't want to stop, here are some additional things you can do:

  • Implement a mechanism where a user can find out about all of the new tags that refer to him or her. If this feature is invoked, you should display photos containing these new tags; only display photos for tags that have been created since the last time this feature was invoked.
  • (Hard!) Use Ajax to implement name completion: as the user types a last name for a tag, display a menu containing all of the last names that match what has been typed, with an easy mechanism for the user to select from that menu. As the first name is typed, display a menu of all first names that match both the curren last name and the portion of the first name that has been typed.

Deliverables

Use the standard class submission mechanism to submit your entire project9 directory and its descendents. Please indicate in a README file whether you developed on Windows or a Macintosh (we may need this information in order to test your solution). Note: If you add a lot of new images, please clean up your data before submitting, as described for Project 8. Be sure to test your project one more time after resetting the database, just to make sure everything is still OK.

Section

Section Materials