Microsoft Word - CS215-a6.doc UNIVERSITY OF REGINA Department of Computer Science CS 215 – Web & Database Programming Winter 2021 Assignment #6: Micro-Blogging Website – AJAX Updates Due: Tuesday...

AJAX and PHP


Microsoft Word - CS215-a6.doc UNIVERSITY OF REGINA Department of Computer Science CS 215 – Web & Database Programming Winter 2021 Assignment #6: Micro-Blogging Website – AJAX Updates Due: Tuesday April 13, 2021 by 11:55 PM This is the fifth in the series of assignments for building a micro-blogging website. In the first assignment, you built an interface mock-up of the site. In the second assignment, you implemented the client-side programming. In the third assignment, you designed and built the database. In the fourth assignment, you used PHP to implement the server-side programming. In this last assignment, you will implement AJAX-based updating of information. Because the assignments build upon each other, you may wish to make modifications to your previous assignment submission before starting this assignment. For this assignment, you are required to use DOM2 event registration, event handling functions, and make all updates to the page by manipulating the DOM. The data format must be JSON and efforts should be taken to only provide the data necessary to update the page with new information. You are not permitted to use third-party libraries that simplify or abstract the JavaScript or PHP coding. There are three new pieces to add to your system that will take advantage of AJAX technology: A. Save the likes and dislikes Whenever the user clicks on a like or dislike icon for any post or repost, AJAX should be used to send this information to the server where it is saved in the database. The response should be a JSON object that contains the updated number of likes and dislikes for the post, which is then used to dynamically update the page (without the need to reload it). You should also ensure that the like and dislike buttons show the status of the current user’s vote actions (refer back to Assignments 3 and 5). Pay careful attention to the process for turning these likes and dislikes on and off, ensuring that a given user can only either like or dislike a given post, and verifying that this works properly for multiple users making independent selections. B. Periodically check the number of likes and dislikes on the Post List Page Using one of the timer functions in JavaScript, configure your system to dynamically check with the server to find out the number of likes and dislikes for each post and repost (every 20 seconds). Use AJAX to retrieve this information from the server, JSON as the data format, and JavaScript to process the data and manipulate the DOM to update the web page as needed. CS 215 (Winter 2021): Assignment #6 2 C. Periodically check for new posts on the Post List Page Using one of the timer functions in JavaScript, configure the Post List Page to dynamically check with the server every 90 seconds to find out if there are any new posts to include on the Main Page. Use AJAX to request the new post information, JSON as the data format, and JavaScript to process the data and manipulate the DOM to update the web page as needed. In order to avoid sending the full list of posts back each time, you may find it useful to keep track of the ID or date/time of the most recent post, and use this to ensure that only new posts are provided back from the AJAX call. If new posts are found, these should be added to the top of the list (with appropriate links as per the previous assignment). For each new post that is added to the top of the page, an equivalent number should be removed from the bottom of the page. For this to work properly with the like and dislike feature (part A above), you will need to ensure that new events have been dynamically registered on the like and dislike icons for the new posts. Since the pages you have built for the previous assignments will each be modified, you should ensure that they are still HTML5 compliant (following the syntax rules of XTHML), use CSS, and that there is a proper separation of the specification of the content from the specification of the presentation rules, the specification of the JavaScript code, and the specification of the PHP processing code. Grading Scheme This assignment will be graded out of 10 marks, based on the following criteria: 2 mark: Using AJAX to submit the like and dislike interaction 1 mark: JSON processing and dynamic page update after a new like or dislike 1 mark: Periodic check of the like and dislike counts using AJAX 1 mark: JSON processing and dynamic page updates of counts 1 mark: Periodic check for new posts 2 mark: JSON processing and dynamic update of page with new posts 1 mark: Removal of old posts 1 mark: Adding event listeners on like/dislike for new posts Submissions All of the files for this assignment should be posted to your personal website on Hercules (a separate directory for this assignment, with a link on your home page), as well as uploaded to UR Courses (a single zip file). CS 215 (Winter 2021): Assignment #6 3 A simple submission log file should be provided that includes your name, student number, class number, the URL of where you have posted the files on Hercules, and a listing of the files you have submitted along with a short explanation of the purpose of each file. Failure to provide these support documents will result in delays in the grading of your assignment and possibly a deduction in your grade. Late submissions (up to 12 hours) will not be accepted with an automatic 20% grade deduction (-2 marks). If there are exceptional circumstances that kept you from submitting your assignment on-time, you should consult with your instructor as soon as you are able to do so. See the syllabus for more details on the late policy for this class.