COS 216 Practical Assignment 1

• Date Issued: 10 February 2020

• Date Due: 2 March 2020 before 10:00
• Submission Procedure: Upload to the web server (wheatley) + CS Web
• This assignment consists of 6 tasks for a total of 70 marks.

1 Introduction
During this practical assignment you will be designing and developing a web site that will showcase a Music
Database similar to what can be seen from ALLMUSIC (https://www.allmusic.com). Each assignment will
build of the other in attempt to have a fully functional Music database listing website at the end of all the
practicals. NB: It is important that you do not miss any practicals or you will fall behind.
After successful completion of this assignment you should be able to create a web page which complies to the
HTML5 standards and CSS styling. The specific web page for this assignment will showcase the following func-
tionality:
• a navbar from where navigation to each component/part for each assignment should be showcased;
• you should have the following tabs in the navbar (Trending, New Releases, Top Rated, Featured, Tour) that
goes to the specific HTML page.
• an “under construction” page which is the page displayed if the assignment/tab has not as yet been completed;
NB: Each practical must be linked to the navbar.

2 Constraints
1. You must complete this assignment individually.
2. You may ask the Teaching Assistants for help but they will not be able to give you the solutions.
3. You must produce all of the source files yourself; you may not use any tool to generate source files or fragments
thereof automatically.
4. You may not use any frameworks for this practical or any JavaScript.
5. Your assignment will be viewed using Brave Web Browser (https://brave.com/) (the version in the labs
or newer) so be sure to test your assignment in this browser. Nevertheless, you should take care to follow
published standards and make sure that your assignment works in as many browsers as possible.
6. You may utilize any text editor or IDE, upon an OS of your choice, again, as long as you do not make use
of any tools to generate your assignment.
7. All written answers must be typed and clearly visible in the HTML of the web page, no paper based or PDF
marking will be done.
8. Your assignment must work on the wheatley web server, as you will be demonstrating of there, you may
not demo of your laptop or a local copy.
3 Submission Instructions
You are required to upload all your source files (e.g. HTML5 documents, any images, etc.) to the web server
(wheatley) and the CS Web in an compressed (zip) archive. Make sure that you test your submission to the web
server thoroughly. All the menu items, links, buttons, etc. must work and all your images must load. Make sure
that practical assignment works on the web server before the deadline. No late submissions will be accepted, so
make sure you upload in good time. From the stipulated deadline time to after the last demonstration of the
assignment, the web server will not be accepting updates to the files.

The deadline is on Sunday but we will allow you to upload until Monday 10am, after this NO
more submissions will be accepted.
Note, wheatley is currently available from anywhere. But do not rely that outside access from the
UP network will always work as intended. You must therefore make sure that you ftp your assignment to
the web server. Also make sure that you do this in good time. A snapshot of the web server will be taken just
after the submission was due and only files in the snapshot will be marked.

4 Online resources
HTML5 - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 and
http://www.w3schools.com/
CSS - http://www.w3.org/Style/Examples/011/firstcss
HTML and CSS - http://www.codecademy.com/en/tracks/web
Standards compliance - http://validator.w3.org/, https://jigsaw.w3.org/css-validator/
FTP tutorial - http://www.cyberciti.biz/faq/linux-unix-ftp-commands/

5 Rubric for marking

Setup web server 5
Launch Page
layout + logo 5
Trending Page
CSS 10
Layout 15
New Releases Page
CSS 3
Layout 7
Top Rated Page
CSS 3
Layout 7
Featured Page
CSS 3
Layout 7
HTML5 compliance 3
CSS compliance 2
Upload
Does not work on wheatley -10
Not uploaded to CS web -20
Total 70
6 Assignment Instructions
Task 1: Setup the web sever . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (5 marks)
The first time you ftp into the web server, your home folder will be created with 2 files access.log, error.log
in it. Do NOT delete these files as they won’t be created again and will be used in a later practical involving
PHP. Complete the following steps to setup the web server:
Step 1: ftp into the web server, wheatley.cs.up.ac.za, using your user name and password that you use
to login to the CS website.
Step 2: Check whether the file access.log, error.log resides in your web server folder.
Step 3: Create a folder and name it ”COS216”. Note that subsequent files and folders that you would
create for the various practicals and homework assignment should be contained in this folder.
Step 4: For each practical assignment you will need to have a separate folder. This means that you
would have to create a copy of your website each practical and then build on it. You will be penalised if
you do not follow this rule.
Step 5: For each practical assignment you should separate all your resources into different folders (eg. img,
css, js, etc.).
Step 6: Check whether you can access your home folder via the web server by going to:
http://wheatley.cs.up.ac.za/uXXXXXXXX/, where XXXXXXXX is your student/employee number, in your
web browser. You should see a pop-up that will ask you to login. The login details are the same as the
CS website login. You will see something similar to the following:

NB: if there is no filename specified in the url don’t forget to add the ’/’ to the end..

Task 2: Create a Launch Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (5 marks)

This task requires you to create a Navbar that will link the pages for each assignment that you will be required
to complete for COS216 this semester. This will serve as the navigation to your Music database website, choose
a name wisely and make a logo for your website. Make provision for the following (Trending, New Releases,
Top Rated, Featured, Tour). You should make use of a HTML 5 Navbar (https://www.w3schools.com/
html/html5_semantic_elements.asp).
Other than the page being intuitive to use, you need to design it to be aesthetically pleasing. You will be
graded according to how the layout is chosen, use of colour, images, design, etc.
Save the HTML5 code for this page in a file called index.html and place it in the same directory on the web
server as which access.log, error.log is in. View the page on wheatley. You should be able to access
your page using the http://wheatley.cs.up.ac.za/uXXXXXXXX/
Alternatively you can call the page directly using the following url in your web browser:

Page 1 of 4
 COS 216 Practical Assignment 1: 10 February 2020

http://wheatley.cs.up.ac.za/uXXXXXXXX/index.html

Note: The Navbar needs to be available on each page. You cannot use JavaScript or PHP in this
practical.

Task 3: Create a ‘Trending’ page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (25 marks)

For this task you are required to make and design the ”Trending” page. This page simply shows song/album
based on what is commonly searched and filtered. You should make use of mock data to populate your webpage.

NB: You may NOT copy the design of existing websites but should rather use your own cre-
ativity.

Your page should have the following information:

• Searchbar - You should only have styled elements, no functionality needs to be implemented in this
practical
• Filters (At least 2) - You should only have styled element, no functionality needs to be implemented in
this practical
• Each song/album should have the following:
– Music Artwork - The image of song or album
– Title
– Artist
– Release Date
– Rating
– Genre
– Record Label
– Album
Your page should at least have 5 mock song/album elements. Marks will be given according to layout, design,
usage of colours and other factors.

The following CSS functionality needs to be incorporated into your design. You are free do add more styling
as you prefer but remember it must still look professional.
• Background
• Color
• Font
• Border
• Text-size
• Padding and Margins
• Boxes – Should have rounded edges with gray shadows

Task 4: Create a ‘New Releases’ page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (10 marks)

For this task you are required to make and design the ”New Releases” page. This page shows currently released
song/album. You should make use of different mock data to populate your webpage.

Page 2 of 4
 COS 216 Practical Assignment 1: 10 February 2020

NB: You may NOT copy the design of existing websites but should rather use your own cre-
ativity.

Each song/album should have the following:

• Music Artwork - The image of song/album
• Artist
• Rating
• Genre
• Record Label
The following CSS functionality needs to be incorporated into your design and should use more advanced CSS
styling. You are free to add more styling as you prefer but remember it must still look professional.
• Background
• Color
• Font
• Padding and Margins
• Hover – provide a review of the song / album in a tooltip

Task 5: Create the ”Top Rated” Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (10 marks)

For this task you are required to make and design the ”Top Rated” page. This page simply shows song/album
that are top rated based on Billboard Chart ranking https://www.billboard.com/charts.

NB: You may NOT copy the design of existing websites but should rather use your own cre-
ativity.

Each song/album should have the following:

• Music Artwork - The image of song/album
• Title
• Artist
• Genre
• Billboard Chart Ranking
• Record Label

Task 6: Create the ”Featured” Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .(10 marks)

For this task you are required to make and design the ”Featured” page. This page simply shows song/album
that have received high reviews and/or are currently being performed on tour.

NB: You may NOT copy the design of existing websites but should rather use your own cre-
ativity.

Each song/album should have the following:

• Music Artwork - The image of song/album
• Title
• Artist
• Released Date

Page 3 of 4
 COS 216 Practical Assignment 1: 10 February 2020

• Duration - Song / Album Playtime

• Genre
• Song Clip – Provide a sample clip of the song/album (you can use the YouTube service). You can use an
HTML embed tag, iframe or video tag for this purpose

Page 4 of 4