COMP10065: Assignment 6
Sam Scott, Mohawk College, 2017
Overview
This is a culminating assignment for the entire course. It is weighted more than the other assignments
and covers all the techniques and technologies covered in the lectures, labs, and on-line components of
the course.
For this assignment, you are to make a jQuery-enabled web app that uses AJAX to give a “live” view of a
database table. One example of such a “live” view is the Twitter feed, which will periodically let the user
know that there are more updates waiting for them, and then loads them when the message is clicked.
Other examples include a newswire service, sports results, real estate listings, etc.
This app will have 4 separate parts.
1. A database table to contain the newsfeed items, stock prices, results, etc.
2. A PHP app that outputs a JSON encoded representation of the newest items in the database
table (use a parameter to let the app know the last item you retrieved and default to the 10
most recent items if that parameter is missing).
3. A PHP web page that allows you to add new records to the database. You should be able to add
multiple records quickly to test the newsfeed (e.g. you could allow the user to add the same
content multiple times, or you could have a button that adds 10 new records with randomly
generated content).
4. A JavaScript app that displays the most recent items in the newsfeed in descending order of
date. This app should send AJAX requests every few seconds to try and get new records. If it
finds them, it should add them to the top of the feed (wrapped in new HTML elements) so that
the newsfeed remains in descending order of date.
The Rules
This is primarily a programming task. You are to write this app using jQuery as much as possible.
The newsfeed page should have a simple, but professional look. Each item of the newsfeed
should be in its own or similar element. Use CSS to style it effectively. Think small
screen– make sure your app will look good on a phone.
The page for adding new records should have a similar look to the newsfeed page.
The HTML, CSS, JavaScript, and PHP code on all pages should contain no warnings or errors
when loaded in NetBeans.
Use best practices for adding event listeners. All your JavaScript code should be inside a
$(document).ready() function call, and all event handlers should be added using jQuery.
Use the jQuery $ function to create new elements and the jQuery DOM manipulation functions
to add them to the page.
JavaScript and CSS should be in separate files in folders called css and js. All files should be
documented according to “Documenting JavaScript Programs” in Lab Guide, Week 9 on eLearn.2
Optional Extras
Here are some ideas for things you can add to this assignment, to challenge yourself.
Make it even more like Twitter: rather than displaying new items immediately, give the user a
notification telling them how many new items are available, and display them when they click.
This notification should update itself on each AJAX call.
Add AJAX calls to turn the newsfeed into an infinite stream, like facebook: Detect when the user
is scrolling to the end of the feed, then send an AJAX request for older feed items and display
those at the bottom so they can keep scrolling.
You could also change the assignment to be something else. If you can think of an app you’d
rather create that involves live updates of data using AJAX, feel free to propose it to your
instructor.
Handing In
You have approximately 2 weeks to complete this assignment. See eLearn for the exact due date.
You should hand in all the files for your code, including an export of your database table in a single zip
file to the drop box.
You should also upload your solution to CSUnix. Host your program on CSUnix so that the following URLs
(but with your student id instead of “studentid”) will automatically display the newsfeed page and the
update page respectively:
https://csunix.mohawkcollege.ca/~studentid/private/10065/a6
https://csunix.mohawkcollege.ca/~studentid/private/10065/a6/update
If these links do not work properly you will not get full marks.
Evaluation
Your program will be evaluated for performance (50%), structure (40%) and internal documentation
(10%) using the rubric available in the drop box