CSCI2720 Building Web Applications: Assignment 2 1 ASSIGNMENT 2: A NO-FRILL COMMENT SYSTEM USING AJAX RELEASED: 2 MAR 2020 DUE: 17 MAR 2020 23:59 SYNOPSIS You are going to build a basic comment system. To allow a more organized discussion, the system allows reply to a certain comment (“threading”). It also saves comments automatically into a file to retain the data for loading later. This system can be easily set up on Web Server for Chrome. ACCEPTING COMMENTS (20%) (Done in Lab 3) Your work should start from this file: http://www.cse.cuhk.edu.hk/~chuckjee/2720lab3/index.html Insert an HTML form into this page to collect the following information from the user: ¨ Name ¨ Subject ¨ Your comment ¨ Color: Red/Green/Yellow/Blue You are recommended to use input boxes for the shorter text, a textarea for the comment paragraph, and a group of radio buttons for the color. You may also decide your own implementation achieving similar user experience. There should be an Add comment button which adds the comment at the bottom of all comments. After the new comment appears, the form should become blank again. CSCI2720 Building Web Applications: Assignment 2 2 SAVING COMMENTS (15%) (Similar yet different from Lab 4) In Lab 4, you used a Save button to put all the comments in the page into a file for download, and moved the file into the web server. This can be done using Ajax, if the web server supports the PUT method. Web Server for Chrome (which you tried in Lab 4) indeed supports PUT, but you have to enable it under Options >> Show Advanced Options. Enable Allow File upload. Then, using plain JavaScript or jQuery, you can send a PUT request to the web server of the data (e.g. text) to upload. For example, in jQuery this can be done with the type being ‘PUT’, the url being the filename to save, and the data being what to save. (Ref: https://www.w3schools.com/jquery/ajax_ajax.asp) After saving, when the page is reloaded, all the comments except the original one should disappear. But you should be able to see the contents in the generated file in the web server directory, which it can be loaded using Ajax (done in Lab 4). COMMENT THREADS (40%) To improve the comment system, threading support can be added. A Reply link is added to each of the comments. When clicked, the form of Name/Subject/Comment/Color should appear right there. The system could look like this: Click! CSCI2720 Building Web Applications: Assignment 2 3 There are multiple ways to implement the threading support. One possible way is to use this to locate the reply link being clicked, and look for its parents appropriately. Then, an extra block of ul/li structure similar to the one given should be added under the div.media-body of the current comment being replied to. After the comment is added, the extra comment form should disappear. There is no limit of thread levels. The appearance of nested Bootstrap Media Object is a standard you could follow. You could also use any other way to show the thread relationships clearly in the page. AUTO SAVE AND LOAD (25%) To avoid the user from forgetting to save the comments, you will further simplify the program flow by: l Loading the comments from the save file when page is loaded, and l Saving the comments whenever a new comment is added After this is done, you can remove the Load and Save buttons. The requirements here override that of the previous part on Saving Comments. BONUS FEATURE Besides the information supplied by the user, it is usual for comment systems to keep extra information. Gather these data (without asking the user) and show them for each comment: ¨ Browser information (e.g. WebKit) ¨ User’s date and time ¨ User’s IP address ¨ User’s location (e.g. Hong Kong) ¨ Any one more item about the client/server This task is NOT a requirement of the assignment. But if you successfully do it, it contributes to a few bonus points for your course grade: ¨ All 5 items = 0.5 points ¨ 3 items or more = 0.25 points Only for this part, you are allowed to consult external web services. CSCI2720 Building Web Applications: Assignment 2 4 FEATURES AND FRAMEWORKS There is no cosmetic requirements for this assignment other than the “threading” requirement. You are welcome to implement extra styles and features at your own ability. You can make your own choice on the use of CSS, Bootstrap, plain JavaScript and jQuery. Please put all your JavaScript code into an external JS file. For the frameworks, please use the current CDN versions instead of a local copy: ¨ Bootstrap (4.4.1 or later) https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css ¨ jQuery (3.4.1 or later) https://code.jquery.com/jquery-3.4.1.min.js Do NOT use any extra plugins or frameworks other than these two. SUBMISSION We will only visit your web page submission using Google Chrome (almost-latest versions), using the Web Server for Chrome extension (https://chrome.google.com/webstore/detail/web- server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb). Please utilize the Developer Tools for debugging of your code. Please read this article carefully: http://www.cuhk.edu.hk/policy/academichonesty Include your full name and student ID in all code files using comments. Zip all your files and submit it on the course site on Blackboard. Only these files should be included: ¨ 1 .html file ¨ 1 or 0 .css file ¨ 1 .js file
