Assignment 2 - Music Feedback "It's like Yelp, but for Songs" Overview This is an i

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 )

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.

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.

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.

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)

Feature

Criteria

Maximum

Obtained

Total:

24