COMP10065讲解、辅导Java程序、Java编程调试、辅导AJAX留学生

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 <div> 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