COMP3322A Modern Technologies on World Wide Web

Project One- An Online Music store

Total 20 points

Overview:

In this project, you are going to design and implement an online music store for customers to purchase

music songs according to their preferences. In the project, you will implement the website using different

techniques which include both the client side and the server side. The website consists of a few web pages

for collecting users’ input on the client-side and passing the data to the server-side for processing. You can

build your own database for storing data, but we have also provided one to you. Note: if you are interested

in designing your own database schema, you are welcome to do so.

Objectives:

1. A learning activity to support ILO 2.
2. The goals of this programming project are:

• to get solid experience in using client-side, server-side techniques and database system to

design and implement a web-based application which contains some common features of

an online music store;

• to get a good understanding of how the layout of a web-based application can be

implemented by using CSS and responsive design.

Specifications:

This project consists of two parts:

• Part I- Implement the functionalities of the system, which mainly contains the following parts: the

main page, the login/logout page, the create account page, the refine by category function, the

search bar function, the cart function, the checkout page, and the invoice page. It is expected that

the abovementioned pages and functions are created by the client- side and the server-side

technologies and you can use any client-side and server-side technologies that were learnt in this

course. Please note that in the example shown in this specification, HTML, CSS, JavaScript,

(optional jQuery), MySQL, AJAX, and PHP are used as the client and server side

technologies but you are welcome to use other technologies which were learnt in this course.

• Part II- Design the layout of the web pages by using CSS and responsive web design. It is expected

that in this part, your website should have the feature of responsive web and modern CSS design.

Part I (Total: 16 points)

You are expected to build a login system which enables the functionalities of accepting user login (‘Login’)

and creating a new user account (‘Create Account’).

In the Login page, it is expected the following items and functions are included (0.5 points):

• [Login] form – A login form which uses the method of “POST” to send the data that is entered

by the user in the username and password textboxes. It is expected that the data will be passed to

the server (e.g. a php file called “verifyLogin”) which will be implemented later. Besides, upon

submitting the form, it should be able to check whether any textboxes of the username and

apple

apple

apple

apple

apple

apple

apple

apple

apple

apple

apple

apple

apple

apple

apple

apple

apple

apple

password are left empty, if yes, an alert message (e.g., alert box) showing “Please do not leave the

fields empty” will be displayed in the page. You should also include the name of the bookstore at

the top of the page (The name is designed by you).

• [Username] textbox- A textbox which allows user to enter his/her account name with a

placeholder “Username”.

• [Password] textbox- A textbox which allows user to enter his/her account password with a

placeholder “Password”. The password should not be visible to others when the user is entering

the password.

• [Submit] button- A submit button for sending the form data (the username and password) to the

server (e.g. a php file called “verifyLogin” (the function of this file will be implemented later))

once it is clicked. The button should have a display name “SUBMIT”.

• [Create account] button- A button which when clicked, will direct to the Create account page

(which will be implemented later). The button should have a display name “CREATE”.

Figure 1 shows the sample of the login page. Note that in Figure 1, in addition to the above, the search

bar function, the cart function, etc. and some CSS code is included in the page, but you DO NOT need to

implement those functions and the CSS in this stage, implementing the basic skeleton as stated above is

fine.

Fig. 1 Sample of the login page (you only need to implement the basic skeleton as stated

in the current stage)

In the Create account page, it is expected the following items and functions are included (0.5 points):

• [Create] form- A create form which uses the method of “POST” to send the data that is entered by

the user in the New username textbox and the New password textbox. It is expected that the data

will be passed to the server (e.g. a php file called “create.php”) which will be implemented later.

Besides, upon submitting the form, the following conditions are needed to be checked:

o Whether the New username textbox and/or New password textbox is left empty, if yes,

apple

display an alert message “Please do not leave the fields empty”. The form data entered by

the user should not be submitted to the server.

• [New username] textbox- For the user to enter his/her new account name with the placeholder

“Desired Username”.

• [New password] textbox- For the user to enter his/her new account password with the

placeholder “Desired Password”. The password should not be visible to others when the

user is entering the password in the textbox.

• [Back] button- Upon this button is clicked, it will direct the browser back to the Login page. The

button should have a display name “BACK”.

• [Sign up] button- A submit button on click would trigger the form to send the data (New

username and New password) to the server (e.g. a php file “create.php”) (the function of

this file will be implemented later). The button should have a display name “CONFIRM”.

Figure 2 below illustrates the sample of the Create account page. Note that in Figure 2, we add additional

features that you are going to implement in a later stage, just implement the basic skeleton as stated above

is fine at this stage.

Fig. 2 Sample of Create account page (you only need to implement the basic skeleton in the

current stage)

Before creating the server part to handle the login and the account creation matters, you should create a

database schema in the server first (in the example here, we use MySQL Server). The suggested database

schema is as follows (you can simply adopt the schema, or you can create your own database schema, as

long as you can fulfill the specifications mentioned in this part).

Fig. 3 Suggested database schema

In the music table, there are the following fields:

• MusicId (Primary key)

• MusicName

• Category

• Composer

• Description

• Price

• Published

• New Arrival

Note: Published means the published year of the music.

In the cart table, there are the following fields:

• CartId (Primary key)

• MusicId (Foreign key, reference to the music table)

• UserId (Foreign key, reference to the login table)

• Quantity

In the login table, there are the following fields:

• UserId (Primary key)

• PW

Note: PW means the login password.

You are assumed to have the information of at least 12 music stored in the MySQL database, as well as their music

images and music clips should be hosted on the server (The music images and clips can be downloaded from the

course’s Moodle site). Please visit Appendix A for the information about the 12 music provided by us.

In the example shown in this specification, we would use php for processing the data to the server. The

first 2 php files are “verifyLogin.php” and “create.php”. The former is used to verify whether the

username and password entered by the user in the index page match with the username and password

stored in the MySQL database while the latter is used to check whether the username entered by the user

in the create account page already exists in the MySQL database.

In the “verifyLogin.php”, it is expected the following items and functions are included: (0.5 points)

 Receive the username and password passed from the login form in the login page and check

whether the users’ input matches with the username and password stored in the login table, if yes,

store the username in a session and redirect the browser to the main page (which will be

implemented later) immediately. If no, display the message “Invalid login, please login again.”

(with

tag) and redirect back to the login page after 3 seconds.

In the “create.php”, it is expected the following items and functions are included: (0.5 points)

 Receive the username and password passed from the create form in the create account page and

check whether the username inputted by the user already exists in the login table, if yes, display

the message “Account already existed” (with

tag) and redirect back to the create account

page after 3 seconds. If no, insert the username and password into the login table as a new record,

print the message “Account created! Welcome” (with

tag) and redirect the browser back to

the login page after 3 seconds.

Besides, you should implement a main page of the online music store. Note that this main page allows

any user to access no matter he/she is login or not. This page mainly serves as a place to display the

music that are on sales (on the right) and link to the category page which implements the refine by

category function (on the left). This page also contains the search bar function (at the top of the page).

The marks (total: 4 points) are divided into 2 sections and the requirements are as follows.

Section I (2 points):

In this page, it is expected the following items and functions are included:

 On the left column of the page, there should be a heading “Category” and all the music

categories stored in the database should be displayed in this area and they should act as links to

jump to the category page (the category page will be implemented later).

 On the right column of the page, by default, there would be a heading “All Music” and follow it

shows all the music (with their title, music image, composer and price information. Note: A red

notice “NEW ARRIVAL !” would be shown underneath the music image if the music is a newly

arrival product) stored in the database. For each music, there should be a link in the music title

which would direct the browser to a page that shows the details of the music (which will be

implemented later). Also, there should be a directory link that shows the current directory location

“Home” of the whole website (Fig. 4).

Section II (2 point):

 On the top of the page, it is expected that the search bar function should be implemented:

✓ There should be a textbox with a placeholder “Keyword(s)” which allows users to input

keywords (the keywords can either be the music name or the composer of the music) for

searching. It is expected that the user can input single or multiple keyword(s), with a space

separates each keyword for multiple keywords case.

✓ There should be a button called “Search”, which upon is clicked, would search the music

which contains the keyword(s) (case-sensitive) and the matched music would be

displayed on the right-hand side of the page (the original content of all music would be

replaced by the matched music(s), as well as the heading would be changed from “All

Music” to “Searching Results”) without reloading the whole page.

apple

✓ An example: Assume the database only contains 3 music, with the name “Scherzo:

Allegro vivace con delicatezza”, “Bach, J.S.: Goldberg Variations, BWV 988” and

“Bach: Concerto No. 1 in D Major”. If the user inputs a single keyword “Scherzo”, then

the music “Scherzo: Allegro vivace con delicatezza” as well as its related information

should be displayed. If two keywords “Scherzo” and “Goldberg” are inputted (i.e.

Scherzo Goldberg), then the music “Scherzo: Allegro vivace con delicatezza” and the

music “Bach, J.S.: Goldberg Variations, BWV 988” and their related information should

be displayed in the searching result (Fig. 5.1); if the user inputs a single keyword

“Schubert”, then the music “Scherzo: Allegro vivace con delicatezza” as well as its

related information should be displayed. If two keywords “Schubert” and “Bach” are

inputted (i.e. Schubert Bach), then all 3 music and their related information should be

displayed in the searching result (Fig. 5.2).

✓ Besides, it is also expected that there would be 2 or 3 buttons on the right side below the

search button. If the user has not logged in, there should be 3 buttons – Sign in (link to

the login page), Register (link to the create account page) and Cart (link to the cart page

which would be implemented later). If the user has logged in, there should be 2 buttons

– Logout and Cart (link to the logout php file and the cart page which would be

implemented later).

Note: In addition to the main page, the search bar function and the above buttons should also be

applied to the login page, the create account page, the cart page, and the category page (the cart and

the category page will be implemented later).

Fig. 4 Sample of main page by default showing All Music (Note: Only part of the music is shown for

illustration)

Fig.5.1 Sample of the main page with the searching keywords –

“Scherzo Goldberg”

Fig. 5.2 Sample of the main page with the searching keywords –

“Schubert Bach”

In the category page, it is expected that all music which belong to that category which the user selected

will be displayed on the right column of the page, while on the left column as well as the top of the page,

the content displayed should be the same as the one shown in the main page. Besides the directory link

should be changed to “Home” > “(the Category selected)” (0.5 points) (Fig. 7). Please note that the

search function inside the category page will search the music according to the keyword(s) WITHOUT

any filtering of the category involved.

Fig. 7 Sample of the category page when the user selects the category- “Classical” in the

main page

As mentioned, for each music, there should be a link in the music title which upon is clicked, would

direct to a page which shows the details of the music. It is expected that in addition to the music title,

music image, composer and price, the published year of the music, the category of the music, and the

description of that music should also be shown. It should also contain a music clip underneath the music

image which will be auto-played upon entering into the music information page. Please follow the order

of the display as shown in Fig. 8 for easy marking. Besides, below the price, there should be an input

textbox for the user to order the music. It allows the user to enter the amount of the music to purchase and

it will be added to the shopping cart once submitted. The default value of the textbox would be 1. There

should also be a button “Add to Cart” which upon is clicked, would send the buying information to the

cart page (implemented later).

Please note that the directory link should be changed to “Home” > “(the music selected)” and the top search

bar function and the corresponding buttons should also be shown at the top of the page (0.5 points).

apple

Fig. 8 Sample of the music information page

In the cart page, it is expected the following items and functions are included (4 points):

– The cart page should display all the information (the music title and the corresponding quantity) of all music that
the user has put in the cart (i.e. through clicking the button “Add to cart” on the book page). Note that no

matter the user has logged in or not, he/she can still add his/her desired music into the cart and they should be

able to display in the cart page.

– Note that the total number of music added into the cart would be displayed next to the cart

button on every page that has the cart button.

– Note that the total price of the music added into the cart should be calculated and displayed

after di splaying all the music put in the cart.

– Note that when displaying the cart information, the quantity of each music should be summed

up.

– In the cart page, the user can delete his/her cart record by pressing the “Delete” button, and

the corresponding record in the cart should be removed. The cart page should be updated,

without reloading the whole page.

– Besides, the music that were added into the cart before the user login must be added into

the cart of the account after the user has successfully logged in. The original cart information that

has been stored in the session should be deleted.

– Note that there would be two buttons, namely “Back” and “Checkout” below the total price,

which would direct back to the main page upon the “Back” button is clicked, and would direct to

the checkout page (which will be implemented in the next stage) upon the “Checkout” button is

clicked.

– You are reminded that at the top, the search bar and the corresponding buttons should be kept

on the page (Fig. 9).

Fig. 9 Sample of the cart page

Next, we would implement the checkout page, it is expected the following items and functions are

included (4 points):

 If the user has not logged in, the checkout page should consist of 3 sections, you can refer to Fig. 10 for
references:

✓ The first section would ask whether the user has an existing account, if not, he/she should

complete the remaining sections, which consist of “Fast track” registration and Delivery info. In

the section of “Fast track registration”, the user should input his/her desired username and

password for registration. Both the username and password should not leave empty, otherwise it

would remain in the current page (nothing should be sent to the back-end) upon clicking the

Confirm button. In addition, the system would check whether the username inputted by the user

has already been registered in the database. If yes, after the user entered the username and left

the textbox, a red warning message “Username Duplicated!” will be displayed next to the

username textbox and the textbox should be clear, without reloading the page. In contrast, if the

user has an existing account, he/she should click Sign In, which is a hyperlink that would direct

the user to the login page.

✓ It should be noted that in the second section, there are five fields (Full Name, Address Line 1,

City, Country, Postcode/Zip Code) which are mandatory for the user to input. There should be

a placeholder “Required” in each of these 5 fields in order to remind the user. Similar to the case

of encountering the empty username and password, it would remain in current page in case any

one of these 5 fields are left empty when pressing the Confirm button.

✓ In the third section, the user should be able to change the music items inside the cart, if he/she

wants to, by clicking the “change” hyperlink, which would direct back to the cart page.

Besides, it would display the order summary (music titles, quantities, and total price), as well

as the confirm button, which upon is clicked, would pass the information inputted in this page

to the invoice page and redirect to it.

 If the user has logged in, the checkout page should only contain 2 sections, you can refer to Fig. 11

for references:

✓ The first section would ask for the Delivery info, which is similar to the second section when the

user has not logged in. All the requirements in this section would be the same as the second

section when the user has not logged in.

✓ The second section would be the same as the third section when the user has not logged in. All

the requirements would be the same.

Fig. 10 Sample of checkout page (User has not log in)

Fig. 11 Sample of checkout page (User has log in)

On the invoice page, it would simply display the Delivery info received from the checkout page, as well as

the order summary. In addition, there should also be a button “OK” which upon is clicked, would direct

back to the main page. You can refer to Fig. 12 for references (0.5 points).

Fig. 12 Sample of invoice page

The last part would implement the feature of logout (e.g. create a file “logout.php”).

It is expected the following items and functions are included when the logout button is clicked (0.5 points):

 The page would destroy the current session, display the message “Logging out” (with

tag) and redirect the user back to the main page after 3 seconds.

Part II (Total: 4 points)

In this part, you are going to implement responsive web design (i.e. automatically resizing, hiding,

shrinking, or realigning components in the website, to make it looks good on all devices (desktops, tablets,

and phones)) in every pages that are implemented in Part I. You need to make every element in the pages

to be responsive to different mobile/computer screen resolutions in order to score the points (2 points).

The remaining 2 points regarding the use of CSS to decorate the pages that you have implemented in Part I.

For the CSS implementation, you are free to use any CSS formatting to make the pages look nice. Note:

You are not required to have fancy design; just use suitable styling should be fine.

Submission:

Please finish this project before 6 Dec 2021 23:59.

1. If you are using PHP+MySQL to implement the project, here are the instructions to prepare for the

submission:

i. You should only use the Department’s MySQL server (Sophia) as your project database

server, please make sure that you have included a valid MySQL password in your PHP code

so that we can access your database for testing and grading. Using localhost (your own MySQL server)

is NOT accepted.

ii. Upload all files to your public_html directory under i7.cs.hku.hk server and store them on a

directory named proj. Arrange all files in the proj directory to recreate the webpage. Make sure that you

can access the webpage via the URL, e.g., https://i7.cs.hku.hk/~[your_CSID]/proj

For example, a student with the CS account username – tmchan, should have the page be

available on https://i7.cs.hku.hk/~tmchan/proj and submit the link to Moodle. At the same time,

compress all the files and upload a zip file to the Moodle. You MUST do both.

iii. You need to make sure that you have viewed your product on the i7 server before submitting

your link and zip file to Moodle. Make sure they are the same. We will go to your individual webpage

to check your work. Please note that this project will mainly be marked by features and DO NOT

expected that we will evaluate your source code during marking.

iv. Create a text file named “Readme.txt” that contains:

a. List the version number of the JQuery library if appropriate.

b. Indicate how much work you have completed for the project. You are recommended to make use of

the table shown in the Grading Policy section as the checklist. Using it to show us how much you have

accomplished.

2. If you are using Node.js+Express+MongoDB or Node.js+Express+MongoDB+ReactJS to implement

the project, here are the instructions to prepare for the submission.

i. You must create a project folder “Project” and place all HTML, CSS, JS, and the database ‘data’ folder

in this project folder. Use a compression or archive tool to compress the Project folder and name the file

as Project-yourStudentNo.zip (or tgz or other common compression formats). Before creating the project

zip file, make sure all source files and data for the MongoDB are all placed inside the project

folder. Besides, remove the node_modules folder(s) to save space and compression time.

ii. Create a text file named “MDBdata.txt” and list all MongoDB statements in creating the

database, the collections, and the documents for testing your program. This is important as the database

‘data’ folder in the submitted file may be missing or empty. Given these MongoDB statements, tutors can

recreate your database to test and grade your project.

iii. Create a text file named “Readme.txt” that contains:

a. List the version numbers of the jQuery, Node.js, Express.js, MongoDB, and ReactJS installed and used

on your platform.

b. Indicate how to (1) start the MongoDB database, (2) start the Web server (and ReactJS if is

appropriate), and (3) access the main page of the Web application.

c. Indicate how much work you have completed for the project. You are recommended to make use of the

table shown in the Grading Policy section as the checklist. Using it to show us how much you have

accomplished.

iv. You need to make sure that you have viewed your product before uploading all the files to

Moodle. Please note that this project will mainly be marked by features and DO NOT expected that we

will evaluate your source code during marking.

Grading Policy:

Part I (16 points) • Correctness of the login page (0.5 points)

• Correctness of the create account page (0.5 points)

• Correct functionality of verifying user’s login into the system
(verifyLogin.php) (0.5 points)

• Correct functionality of users’ account creation (create.php) (0.5
points)

• Correct functionality of the main page (4 points)

• Correct functionality of the category page (0.5 points)

• Correct functionality of the music information page (0.5 points)

• Correct functionality of the cart page (4 points)

• Correct functionality of the checkout page (4 points)

• Correct functionality of the invoice page (0.5 points)

• Correct functionality of logout in “logout.php” (0.5 points)

Part II (4 points) • Correct implementation of responsive web features in web pages
(2 points)

• CSS implementation in webpages (2 points)

Plagiarism:

Plagiarism is a very serious academic offence. Students should understand what constitutes plagiarism,

the consequences of committing an offence of plagiarism, and how to avoid it. Please note that we may

request you to explain to us how your program is functioning as well as we may also make use of

software tools to detect software plagiarism.

Appendix A

Music 1:

Music Name Symphony No. 41 Jupiter, 1st Movement Allegro
Vivace

Category Classical

Composer Wolfgang Amadeus Mozart

Description Jupiter Symphony, byname of Symphony No. 41 in C
Major, K 551, orchestral work by Austrian composer
Wolfgang Amadeus Mozart, known for its good
humour, exuberant energy, and unusually grand scale
for a symphony of the Classical period.

Price 30

Published 1788

New Arrival Yes

Music Image img_1.jpg

Music Clip m1.mp3

Music 2:

Music Name Scherzo: Allegro vivace con delicatezza

Category Classical

Composer Schubert, Franz

Description In the first part of the Classical period, the dance

movement, when it appeared, usually consisted of

a minuet in fairly simple binary form (the two-part

form from which sonata form evolved)…

Price 80

Published 1828

New Arrival No

Music Image img_2.jpg

Music Clip m2.mp3

Music 3:

Music Name Bach, J.S.: Goldberg Variations, BWV 988

Category Baroque

Composer J.S. Bach

Description On his visits to Dresden, Bach had won the regard
of the Russian envoy, Hermann Karl, Reichsgraf
(count) von Keyserlingk, who commissioned the
so-called Goldberg Variations; these were
published in 1741…

Price 100

Published 1741

New Arrival No

Music Image img_4.jpg

Music Clip m3.mp3

Music 4:

Music Name Mussorgsky, Modest: Night on Bald Mountain

Category Classical

Composer Mussorgsky, Modest

Description Night on Bald Mountain, Russian Noch na lysoy
gore, also called Night on Bare Mountain,
orchestral work by the Russian composer Modest
Mussorgsky that was completed in June 1867…

Price 40

Published 1867

New Arrival No

Music Image img_3.jpg

Music Clip m4.mp3

Music 5:
Music Name Claudio Monteverdi: Madrigals

Category Baroque

Composer Claudio Monteverdi’s Madrigals

Description Claudio Giovanni Antonio Monteverdi was an
Italian composer, gambist, singer and Roman
Catholic priest. Monteverdi’s work, often
regarded as revolutionary, marked the transition
from the Renaissance style of music to that of the
Baroque period…

Price 200

Published 1587-1651

New Arrival No

Music Image img_5.jpg

Music Clip m5.mp3

Music 6:

Music Name Bach: Concerto No. 1 in D Major

Category Baroque

Composer Bach

Description Baroque music, a style of music that prevailed
during the period from about 1600 to about 1750,
known for its grandiose, dramatic, and energetic
spirit but also for its stylistic diversity…

Price 140

Published 1791

New Arrival No

Music Image img_6.jpg

Music Clip m6.mp3

Music 7:
Music Name Frederic Chopin: Piano Concerto No. 1 in E Minor

Category Romantic

Composer Frederic Chopin

Description A second concert confirmed his success, and on his
return home he prepared himself for further
achievements abroad by writing his Piano
Concerto No. 2 in F Minor (1829) and his Piano
Concerto No. 1 in E Minor (1830)…

Price 130

Published 1830

New Arrival No

Music Image img_7.jpg

Music Clip m7.mp3

Music 8:
Music Name Franz Liszt: Christus

Category Late 19th

Composer Franz Liszt

Description For the next eight years Liszt lived mainly in

Rome and occupied himself more and more with

religious music. He completed the oratorios Die

Legende von der heiligen Elisabeth (1857-62)

and Christus (1855-66) and a number of smaller

works…
Price 199

Published 1855-1866

New Arrival No

Music Image img_8.jpg

Music Clip m8.mp3

Music 9:

Music Name Claude Debussy: Children’s Corner

Category Romantic

Composer Claude Debussy

Description Repelled by the gossip and scandal arising from

this situation, he sought refuge for a time at

Eastbourne, on the south coast of England. For

his daughter, nicknamed Chouchou, he wrote the

piano suite Children’s Corner (1908)…

Price 149

Published 1908

New Arrival No

Music Image img_9.jpg

Music Clip m9.mp3

Music 10:

Music Name Robert Schumann: Papillons

Category Romantic

Composer Robert Schumann

Description In the summer of 1829 he left Leipzig for
Heidelberg. There he composed waltzes in the
style of Franz Schubert, afterward used in his piano
cycle Papillons (Opus 2; 1829-31), and practiced
industriously…

Price 131

Published 1831

New Arrival No

Music Image img_10.jpg

Music Clip m10.mp3

apple

apple

Music 11:
Music Name Symphony No. 3

Category Late 19th

Composer Gustav Mahler

Description Symphony No. 3, symphony for orchestra and

choruses by Austrian composer Gustav Mahler

that purports to encapsulate everything the

composer had learned about life to date…

Price 80

Published 1902

New Arrival No

Music Image img_11.jpg

Music Clip m11.mp3

Music 12:
Music Name Liszt: Bagatelle sans tonalite

Category Late 19th

Composer Liszt

Description In 1869 Liszt was invited to return to Weimar by
the grand duke to give master classes in piano
playing, and two years later he was asked to do the
same in Budapest…

Price 103

Published 1872

New Arrival No

Music Image img_12.jpg

Music Clip m12.mp3