We are done with all the 12 assignment for this course. Now it is the time to give away those 4 remaining marks for code quality. If your down for those marks, you would need to bunddle up your entire source code and email it to me by Monday, April 16, 5:00 PM. No marks will be given to submissions after the above mentioned deadline.

Throughout this course you have created a photo stream web application. In the last exercise you will implement support for displaying a slideshow of stream photos using Ajax.

Modify your server code to respond to the following URL scheme:

Method    Path                                                  Action/Response

GET        /photo/[PID]                                       respond with photo PID
GET        /photo/[PID]/title                                 respond with the title of photo PID
GET        /stream/[SID]/slideshow                     display the slide view of stream SID starting from the first photo
GET        /stream/[SID]/slideshow/[PID]            display the slide view of stream SID with photo PID showing
GET        /stream/[SID]/slideshow/[PID]/next    respond with the PID of the next photo in stream SID, respond with -1 if no such photo
GET        /stream/[SID]/slideshow/[PID]/prev    respond with the PID of the previous photo in stream SID, respond with -1 if no such photo

Slide show

Users can view a slideshow of their own stream or public streams. Add a link to your application home page next to each stream and the at top of stream page for displaying stream slideshow. The screenshots below display the new links to be added.

The slideshow page displays photos in a stream one at a time. Links for navigating to previous and next photo are displayed at the top of the page. The photo title is displayed above the photo. The screenshot below shows the suggested design of the slideshow page.

The default behaviour of Previous and Next hyperlinks should be disabled. Instead of reloading the entire slideshow page, only the photo and its title are reloaded via Ajax. To display a photo in the browser its database ID has to be known. Ajax helps to retrieve the ID for the previous and next photos in the stream when a user wants to navigate to them. Once the ID of the next or previous photo is known, it is loaded by modifying the "src" attribute of the associated <img> tag through jQuery. The photo title is loaded into an appropriate section using another Ajax call. Modify your database module (store.js) to provide support for finding the photo in a given stream before/after the photo PID. Use the database ID of the Photo table for ordering photos when responding to these requests.

Manipulating the browser history

A major problem with the above design for the slideshow is that the URL displayed at the address bar remains unchanged each time the user navigates to a different photo. This makes bookmarking individual images impossible and the site is not going to be search engine friendly. Likewise, hitting the browser back/forward buttons will get the user to the previous/next page instead of the previous/next photo. Use history.pushState() function of HTML5 to add history entries every time the user navigates to a photo through Previous/Next links. Note that now the user can select browser back and forward buttons to navigate between photos but photo information is not reloaded each time. Listen to "popstate" events in the browser to reload photo information via Ajax calls when the browser back/forward buttons are used for navigating the slideshow.

Hints

• Navigating past the first/last photo in a stream through Previous/Next links should be disallowed.
• Users should be barred from watching slide shows of private streams they do not own.
• Users should be barred from accessing photo information of private streams they do not own.

 

For those of you that left class quickly today, I need to make a correction. There is not popState method, just a popstate event. Sorry, for the error. 

The USRI surveys will be administered today in class, so it is important that everyone attend. 

In a previous exercise you created web pages for creating photo streams and adding photos to them. For this exercise you will implement support for (1) client-side validation of input forms and (2) displaying confirmation of action messages.

Input form validation

Your application should already perform server-side user input validation on input forms. In this exercise, you will use jQuery to perform client-side validation on all application forms, i.e., sign-up, login, stream creation, and photo upload. We will be using two different approaches to achieve this.

First, for sign-up and stream creation forms, perform validation when the submit button is pressed. For missing mandatory fields, using CSS highlight the border of the associated input field and display appropriate error messages at the top of the form (or next to the input fields). A screenshot of the validation results for the sign-up form is given below.

Second, for login and photo upload forms, disable the default behaviour of the submit button. Validation should be performed when the content/state of an input field is changed. The submit button will not be given its default (enabled) behaviour, unless all the fields meet the validation requirements. A screenshot of validation taking place on an incomplete login form is given below.

Flash message

Flash messages are server-side messages that are displayed once. The session is usually used to store flash messages until they are displayed, at which point they are deleted. The screenshot below displays a confirmation flash message after a user requests to follow a public stream.

Use flash messages to display confirmation messages when an action takes place. The flash message is displayed in the first response sent to the user. Show the flash message in a special section at the top of a response page. Using CSS and jQuery make the flash message section slide up automatically after 5 seconds. Make it so that if a flash message shall not be displayed in a page, the section and its content are not seen.

<section id="flash">
    <p>You are now following Calgary Flames.</p>
</section>

Modify your session manager node module and/or sever code to allow creating flash messages as actions take place and serving them as pages are served. The page displayed (redirected to) after each action and the suggested flash message to be displayed are given in the table below.

Action                      Redirect To      Message
-------------------------------------------------------------------------------------------------------------

Here is assignment 10. We are down to the last three assignments. Make sure you keep refactoring your code as we approach the end. This one will be marked out of 3, following a demo of the system and an inspection of the source code.

Node.js/Javascript Calgary Meetup

Time: Saturday, March 24, 2012, 11:00 AM
Location: AcceleratorYYC, 1212 9th Ave SE

4 marks out of the total of 40 marks for assignments are going to be set aside for code cleanness and modularity. Starting from this week, I will provide you with feedback about your code design during assignment demos. The marks will be given at the end of semester after all assignments are finished.
Make sure that you refactor your code over the next four weeks to bring those 4 marks home. Here are a few general best practices to follow:

• Reduce the size of individual files
• Manage complexity by breaking it into multiple modules
• Write reusable code
• Use object-oriented JavaScript
• Minimize duplication by using functions
• Separate JavaScript code from HTML/CSS content (where possible)

 

Here is the description of assignment 9. It will be marked out of 3, following a demo of your system and an inspection of the source code.

The much anticipated assignment 8 is now here. As always, this assignment is going to be marked out of 3 based on a demo of your system and a code walkthrough. Please note that third party libraries like formidable should not be used in this assignment.