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
owsers, 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, XXXXXXXXXX: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-serve
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
eviewer_name
eview
ating
Each record in the Music table represents a single music, and each record in the MusicReview table is a
eview 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 numbe
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
eport 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
anking, which will be displayed immediately in the review list, and
upon which the average rating will be updated from the serve
Periodically (every 5 seconds), poll the details for the cu
ent music and display any new reviews. This
should not remove any review text cu
ently being entered
All functionality should be implemented using JavaScript, the DOM and the backend API, without
eloading
efreshing the
owser 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
eflect the significant research and effort required to implement them co
ectly.
Bonus task one: Better sorting using Bayesian statistics
Derive your averaging and sorting code based on the approach listed here:
http:
www.evanmiller.org
anking-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, Bou
on 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/Ru
ic
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
ating (POST) 1
Delete review
ating (DELETE) 1
Update review
ating (UPDATE) 1
Sort based on query parameter 1
Front-end
Menu of items 1
Details page, including image, reviews and average
ating 2
Submit a new review
anking, 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 na
ate 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