Homework 3

Due March 10th, 11:59pm

Submission Instructions

As with all homeworks, you will submit this project in a two-step process:

Make sure your name, email address, and eid are in a comment at the top of each file you submit.

Update

The above due date now reflects a deadline for substantial completion of the assignment. 'Successful completion' in this case means doing at least the first two bullet points and taking a stab at the third. I will grade your submissions, offer you feedback and enter the points into the gradebook. As long as your submission for the final homework addresses my feedback and implements all three bullet points, you will receive full credit for the assignment. Of course, if you complete the assignment now, you will be able to focus on homework four.

Assignment

For this assignment, you'll be using javascript to produce dynamic pages that are more responsive to their users. Of course, this submission needs to retain the functionality of the previous one.

This assignment has you make two minor and one major one to your existing website.

  1. Hiding and showing elements using Javascript.
    • Each message on a user's profile page needs to have a hide/ show button that uses javascript and css to toggle displaying the body of the message (see the announcments box on the course website for an example of what this should look like). If the body is being displayed, hide it; otherwise display the message body. You can show whatever you like when the message is hidden: a title like "Message 1" or perhaps a preview of the first five words of the message like "Hey buddy, how is it..". All messages should be hidden by default.
  2. Validating Form Data using Javascript
    • You should now validate the signup form data using javascript in addition to the server-side php validation. Use the same criteria in both cases. If the javascript validation fails, display a message on the page telling the user what the problem was.

      Javascript can hijack the form submission using the onsubmit attribute of submit buttons. If the specified handler evaluates to false, the form is not submitted. Otherwise the form data will be sent to the specified server-side handler.

      Client-side validation is nice because it lets the user immediately now if there is a problem with their data. Of course, it cannot completely replace server-side validation, because malicious users can get around this barrier, and it is important to check data consistency before it is inserted into a database.

  3. Tagging Pictures with Friends
    • This is by the major addition alluded to above. You will use javascript to let users add tag the faces of their friends in pictures. Basically this is a simpler form of what facebook does.

      In a real system, users would be able to upload their own photos to the server. This is what bonus points are for. I recommend you simply add four or five stock photos to an image directory on your website to use for this part of the assignment.

    • You need to add two new tables to your database. The first will simply have a column of user IDs, a column of photo IDs, and the URL of the image on the server; rows will store which photos belong to each user. The second table will keep track of which users are in each photo using columns for photo IDs, user IDs, x-coordinates and y-coordinates; each row will store the appearance of a friend in a photo and the location of their face in that photo. Update your mysql script from homework 2 to also create these tables and populate them with default data. Use the stock images mentioned above in these default rows.
    • There will need to be a new photo page used to display the photos associated with a given user. The page should display a photo and a list of all the friends in the photo. Each User's profile page should now have a link to their photo page. Just like with the profile page, I would suggest using query strings to choose user's photos to display.
    • When a user places their mouse over a name in the list of friends on the photo page, the page should use javascript to draw a box over the face of that friend in the photo. I would recommond using a 'div' element with a border and no background to draw this box. If the mouse is not over a name, no box should be displayed. The mapEvents function in the music map page has examples of how to draw boxes at a specific location. The key insight is to place the photo in a div which also contains the div representing the face highlight box. The latter div should be positioned in relation to the former div with the following style: "position: absolute; left: XXpx; top: YYpx" where 'XX' and 'YY' are the x and y coordinates of the highlight box.
    • Additionally, there should be a next button that uses javascript to display the next photo belonging to the user. The music map page we looked at in class is an example of how this page should behave. My suggestion is to encode the complete set of photos as an array of javascript objects that akin to the event_list array in the music map application. The next button should then advance to the next element in the array and redisplay the photo page based on the object at that new index.
    • Finally, you need to let users tag new faces in a photo using javascript. Display a drop-down menu which contains the names of the friends of the picture's owner. Whenever a user clicks on the picture, the browser should call a javascript handler that records the location of the mouse and the friend selected in this drop-down menu. This handler should use this information to submit a form to a php script that inserts this information into the friend tag table and then redisplays the photos. Use the .submit() method of the form element object in the DOM to force the browser to submit a form. There is an example of this in the city selection box in the second music map example.

Bonus Points

Use javascript to add buttons that allow logged-in users to delete tags in photos that belong to them.