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.
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 systemto
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 canbe
implemented by using CSS and responsive design.
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
(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 CSSdesign.
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 isentered
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
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 witha
• [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
• [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 accountpage
(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
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 thatis 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,
display an alert message “Please do not leave the fields empty”. The form data enteredby
the user should not be submitted to the server.
• [New username] textbox- For the user to enter his/her new account name with theplaceholder
• [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 whenthe
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 willbe implemented later). The button should have a display name “CONFIRM”.
本网站支持淘宝 支付宝 微信支付 paypal等等交易。如果不放心可以用淘宝交易！
E-mail: firstname.lastname@example.org 微信:itcsdx