assignment 2
CRICOS Provider No. 00103D Page 1 of 6 ITECH3224 WWW Technology 2 Assignment 2 - Music Feedback "It's like Yelp, but for Songs" Overview This is an individual assignment in which you will explore the use of data interchange between web servers and browsers, dynamic construction of page content, and API design, using PHP, JavaScript, and JSON. Important: This assignment specification is generated just for you. Do not distribute this specification. Timelines and Expectations Percentage value of task: 20% Due: Sun, Oct 29, 2017 - 16:00 (Week 11) Learning Outcomes Assessed The following course learning outcomes are assessed by completing this assessment: K2. Contrast the capabilities and limitations of client-side and server-side programming. K3. Detect opportunities for increasing security and privacy of web applications. S1. Develop client/server programs using client-side and server-side programming languages. S2. Construct a server-side web interface to a database system that is accessible by web clients. S3. Design and implement a server-side application programming interface (API) for client-server communication, using technologies such as AJAX, REST, Websockets, XML and JSON. A1. Design, develop, test, and debug client/server web applications to provided specifications. Assessment Details Introduction Music Feedback is a single-page web app that allows users to review and provide feedback on songs. Each music has its own page, which displays one (or more!) photos, a name, a list of reviews, and some form of average rating. Users can submit new reviews of songs, including their own name, some review text, and a rating. Database A simple database with two tables is sufficient to model the database requirements for this assignment, however you may if you wish extend and/or normalize this database. The database has the following structure: Music ( id, name, description, image_url ) MusicReview ( id, music_id, datetime, reviewer_name, review, rating ) CRICOS Provider No. 00103D Page 2 of 6 Music idPK name description image_url MusicReview idPK music_idFK datetime reviewer_name review rating Each record in the Music table represents a single music, and each record in the MusicReview table is a review of a single music. The assignment tasks are closely associated with the lab work of topics 7 to 10. Code and examples from lectures and labs should be a useful guide throughout this assignment. The assignment requires a number of files and a report to be produced. The report should respond to written tasks that are included below Initial task Create the above database using your existing SQL skills. You will need at least five songs, each with at least two reviews. One music will need five reviews to suitably test average ratings. You may normalize the database if you wish, to include a dedicated reviewer table. Invent or discover your own data. Cite data sources appropriately in your report, or alternatively include a source field in your database. In particular, ensure you appropriate reference any images you include unless they are explicitly public domain (or CC0). Use appropriate data types – the review field should be TEXT to allow long entries. The rating field is an integer value from 1 to 5 inclusive, where 5 indicates that this is an amazing music. Submit your SQL file as part of your assignment. XML and JSON markup Mark up the complete data using XML tags and save it as an .xml file. Check that the file is well-formed and report the method used. Draw a diagram showing the structure of the DOM tree associated with the .xml file, using data from any ONE record. Include the root element, node types, elements and attributes. Similarly, mark up the complete data using JSON and save it as a .json file. Check that it is valid JSON and report the method used to validate. CRICOS Provider No. 00103D Page 3 of 6 Submit both files as part of your assignment. Back-end API Create a RESTful JSON API using PHP, implementing at least the following functionality: List all songs (GET) Should return music id, name, description, and image_url Use an optional querystring/GET parameter to allow sorting by name and average rating Retrieve all details for a particular music (GET) including reviews Create a new review (POST) Delete an existing review (DELETE) Update an existing review by id (PUT) Follow HATEOAS (Hypermedia as the Engine of Application State) practices. Include a note in your report about how you have followed HATEOAS. Under Apache, this step will require configuring a .htaccess file to allow using clean URLs (without a .php extension) Front-end Create an HTML/CSS/JS page which uses JavaScript, AJAX, the DOM and your back-end API to: Display a menu of all songs. Allow sorting the menu by name and rating Display the details of an individual music when the menu item is selected, including the image and the average rating Allow the user to submit a new review/ranking, which will be displayed immediately in the review list, and upon which the average rating will be updated from the server Periodically (every 5 seconds), poll the details for the current music and display any new reviews. This should not remove any review text currently being entered All functionality should be implemented using JavaScript, the DOM and the backend API, without reloading/refreshing the browser page. Bonus tasks (Completely optional!) These tasks are 100% optional, and you can receive full marks without attempting or completing them. They are intended to be a challenge if you are interested in such things, and the marks available do not reflect the significant research and effort required to implement them correctly. Bonus task one: Better sorting using Bayesian statistics Derive your averaging and sorting code based on the approach listed here: http://www.evanmiller.org/ranking-items-with-star-ratings.html Bonus task two: Administration and token-based authentication Implement an administration interface, also using AJAX techniques, which allows deleting reviews. Use JWT token-based authentication, rather than cookies / PHP sessions. It is acceptable for login and administration to be implemented with two additional PHP pages. CRICOS Provider No. 00103D Page 4 of 6 Further details Please note that there are no marks for aesthetics, so please spend your time appropriately. It is acceptable to use third-party CSS frameworks such as Bootstrap, Skeleton, Bourbon or similar if you wish, as long as you reference appropriately in your report. Third-party JavaScript is not acceptable, nor is code obtained through online Q&A sites such as StackOverflow. Documentation Include a written report containing: A statement of completion XML DOM diagram Details of specific assistance you received from people other than your lecturer or tutor, and the names of those assisting. References to any third-party CSS frameworks if applicable Submission All files should be submitted to Moodle by the due date and time. Check with your tutor as to whether a hard copy is required in addition to the electronic submission. Marking Criteria/Rubric Refer to the attached marking guide. Feedback Feedback will be supplied through Moodle. Authoritative marks will be published through fdlMarks Plagiarism Plagiarism is the presentation of the expressed thought or work of another person as though it is one's own without properly acknowledging that person. You must not allow other students to copy your work and must take care to safeguard against this happening. More information about the plagiarism policy and procedure for the university can be found at http://federation.edu.au/students/learning-and-study/online-help-with/plagiarism. http://federation.edu.au/students/learning-and-study/online-help-with/plagiarism CRICOS Provider No. 00103D Page 5 of 6 Marking Guide: Assignment 2 Feature Criteria Maximum Obtained SQL file Requirements satisfied 1 Data Interchange files XML is accurate, well-structured and well-formed 1 JSON is accurate, well-structured and syntactically valid 1 Back-end API RESTful (resource-based) design 2 Uses HATEOAS approach 1 List and details (GET) 1 New review/rating (POST) 1 Delete review/rating (DELETE) 1 Update review/rating (UPDATE) 1 Sort based on query parameter 1 Front-end Menu of items 1 Details page, including image, reviews and average rating 2 Submit a new review/ranking, including list and average review update 2 Automatic reload of details page on interval 1 Bonus optional challenge tasks Sort using Bayesian confidence 2 JWT token-based authentication and admin 2 Documentation Description of XML and JSON validation approaches 1 XML DOM diagram 1 Description of HATEOAS approach 1 Completion of tasks, Assistance statement (lose 1 mark each if not included) (-2) Quality of code (lose marks if criteria not met) Layout, structure, indentation (-1) Appropriate and consistent naming scheme (-1) Appropriate use of comments, including quality and accuracy. Comments do not simply narrate code but illuminate intent and design decisions. No commented-out code. (-1) Valid HTML5 (-1) CRICOS Provider No. 00103D Page 6 of 6 Feature Criteria Maximum Obtained Total: 24