Autumn 2020: Web Application Assignment
Due by 11:59pm on Friday 5th June 2020 Assessment Weight: 50%
A. Requirements
a) ALL instructions given in this document MUST be followed in order to be eligible for full marks for the Web Application
Assignment. This document has four (4) pages.
b) This assignment is NOT a group assignment; collusion, plagiarism, cheating of any kind is not acceptable. As part of your
submission you MUST certify that all work submitted is your own. If you cannot honestly certify that the work is your own
then do not submit the assignment. Breaches of the Misconduct Rule will be dealt with according to the university policy
(see the learning guide for more information).
c) All assignment submissions will be checked for academic misconduct by the use of the MOSS program from Stanford
University. Details on MOSS can be obtained from the MOSS web site http://theory.stanford.edu/~aiken/moss/
d) Design the web pages with ease of navigation and operation, attractiveness and accessibility in mind. Images other than
those provided in the assignment zip file (if any) may also be used in the assignment.
e) All assignment source files are to be uploaded to the Assignment1 folder of your TWA web site prior to the due date and
time. You may create subfolders within this folder if you wish.
- Compressed archive files (eg, zip, tar etc) are not acceptable and will not count toward submission requirements.
f) The submission script must then be used to submit your work once all work is on your TWA website. Failure to use this
script will result in a non-submission. See section D of this document for submission details.
g) All styling and page layout must be achieved using CSS. The use of Bootstrap or other frameworks is not permitted.
For the problem definition described in section B you must
h) include your authorship details at the top of each file in coded comments;
i) reference all sources that you used for inspiration of your solution as per Section C of this document;
j) ensure that your web application renders correctly in Chrome and runs correctly from the TWA web server.
B. Web Application Assignment Details
B(i) – Background information and description
Depending on which provider you use and the type of music that you want to stream there are currently multiple music streaming
services available such as Spotify, Deezer, Tidal, Amazon Prime Music, Apple Music, PrimePhonic, and YouTube Music.
In this assignment you will create a web-based application for a product similar to Spotify named 24/7Music.
The 24/7Music web application will allow
• members and non-members to search for songs, artists, albums
• members and non-members to view lists of songs, artists, albums
• members and non-members to play short samples of selected songs
• members to create playlists of their favourite songs
This is a very simplified web application and leaves out aspects that would be required in a real music streaming web application
[such as actually streaming the music!!]. Read the Functional Requirements section (section B(ii) of this document) to determine
what is specifically required for 24/7Music. The MySQL database that supports the functionality of 24/7Music is named 247Music.
The 247Music database is described in section B(iii) of this document. You will need to design and create the PHP web pages for
this assignment.
B(ii) – Functional Requirements
The 24/7Music web application must
a) be coded using HTML 5, CSS, JavaScript, and PHP as necessary. Note: all files described below must be PHP files to
achieve the server-side functionality.
b) provide easy-to-use navigation for the user as described in the following page descriptions.
c) provide the following page content and functionality for each page as described.
Search Page (search.php)
Page purpose/description:
This page is a search page to find songs, artists, or albums. The search page can be used by both non-members and
members.
Page 2 of 4
Page content:
The page will have the following content:
- Navigation to the other pages of 24/7Music as appropriate including a Log Out link (if the user is logged in) or a
Log In link (if the user is not logged in). - member username (if the user is logged in)
- membership category (if the user is logged in)
- An HTML form (the search form) which contains
• a text box to enter the keyword(s) for the search (mandatory field)
• a submit button
As indicated above the search text box is mandatory. That is, a search may be performed only if a search
keyword has been entered. - A ‘search results’ section that lists songs, artists, albums that match the keyword(s) entered in the form.
Page functionality:
The Search page will - validate that a search keyword has been entered in the search form (using client-side JavaScript). Do not allow the
form to submit unless a search keyword has been entered. Any characters may be entered. - use postback for the search form,
- sanitise the submitted keyword(s) to avoid possible sql injection then search the 247Music database for records
that contain the keyword(s) entered in the search form. The search should check for matches with song titles, artist
names, and album names. The search may find zero, one or many matches depending upon the search term(s)
entered. The output from the search depends on the number of matches found:
a. One or more records found: generate a summary list of matching songs, artists, and albums underneath
the search form. The user will be able to choose the match they want to view more detail about from this
list (see point 4 below) by clicking on the match. The summary list should be displayed in groups of
songs, artists, albums showing:
i. The name of the song, artist, album that has matched with the search keyword(s)
ii. For all songs that match, also list the Artist name
iii. For all albums that match, also list the Artist name
iv. A thumbnail image for the match
b. Zero records found: display an appropriate message underneath the search form instead of a list of
results - enable the user to choose a song, artist, album match for viewing/playing from the search results. To do this, the
name of the song, name of the artist, or name of the album in the search results list is to be a hypertext link. When
clicked, the hypertext link loads the Play page (play.php) which displays more specific details for the chosen match.
Details of the Play page are given below.
General Page Notes:
The design of this page is open to your creativity but it must appropriately display all required information in a clearly
readable, well organised and usable format.
Play Page (play.php)
Page purpose/description:
The purpose of this page is to display to the user the content of the chosen match. The content displayed will vary depending
upon the type of match chosen by the user. The chosen match could be for an artist, album, playlist, or a song. The user
may make the choice of match on the Search page (as described on the previous page of this document), on the Play page
(as described below in point 4), or on the Playlist page (as described on the next page of this document). The Play page
can be used by both non-members and members.
Page content and functionality:
The page will: - include navigation to the other pages of 24/7Music as appropriate including a Log Out link (if the user is logged
in) or a Log In link (if the user is not logged in). - display the member username (if the user is logged in)
- display the membership category (if the user is logged in), and
- display content depending on the type of chosen match as follows:
a. if the chosen match is an Artist, display the name of the artist and the thumbnail image (if one is available).
Then display a list of all albums by this artist. For each album, display the album name, the year the album
was released and the thumbnail image (if one is available). Each album name should be a hypertext link
that will open the Play page so that the Play page may then display the details of the chosen album (see
point 4b).
b. if the chosen match is an Album, display the album thumbnail image (if one is available), album title, artist
name, and a list of all songs from the album. For each song from the album display the song title, and
song length. Each song title should be a hypertext link that will open the Play page so that the Play page
may then display the details of the chosen song (see point 4d).
c. If the chosen match is a Playlist, display the playlist name and a list of all songs in the playlist. For each
song in the playlist display the song title, artist name, and song length. Each song title should be a
Page 3 of 4
hypertext link that will open the Play page so that the Play page may then display the details of the chosen
song (see point 4d).
d. if the chosen match is a Song, display the song title, album title, song length, a link to ‘add to playlist’
(only available to logged in users), an iframe to play a sample of the song using the spotify track id (see
details below)
Playing a sample of a chosen song:
To be able to play a preview of the chosen song use the following code to embed the Spotify iframe
within the page
The post 300582: TECHNOLOGIES FOR WEB APPLICATIONS appeared first on My Assignment Online.
