COMP10065

Posted 2021-09-13 念花人伊人泪

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....
   https://csunix.mohawkcollege....
   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

WX：codehelp