Development of an E-commerce Platform for an Online Music Store

Desklib provides past papers and solved assignments. This project details the creation of a functional e-commerce music website.

E-commerce

Table of Contents
Introduction.................................................................................................................................................4
Task 1:.........................................................................................................................................................5
Task 2:.........................................................................................................................................................6
Task 3:.......................................................................................................................................................13
Task 4:.......................................................................................................................................................27
Task 5:.......................................................................................................................................................29
Conclusion.................................................................................................................................................33
References.................................................................................................................................................33
Figure 1: Dynamic Website..........................................................................................................................5
Figure 2: Working on the website................................................................................................................7
Figure 3: Process of the shopping cart.........................................................................................................8
Figure 4: Home Page..................................................................................................................................10
Figure 5: About Page.................................................................................................................................11
Figure 6: Product Description Page...........................................................................................................12
Figure 7: Contact Page...............................................................................................................................13
Figure 8: Download XAMPP Server............................................................................................................14
Figure 9: Starting services of XAMPP server..............................................................................................14
Figure 10: Admin portal of PHP.................................................................................................................15
Figure 11: Database connection................................................................................................................15
Figure 12: Product Page HTML Code.........................................................................................................16
Figure 13: Product page database code....................................................................................................17
Figure 14: HTML view of a product page...................................................................................................18
Figure 15: Login page HTML code..............................................................................................................19
Figure 16: Login page database code........................................................................................................19
Figure 17: Login page frontend view.........................................................................................................20
Figure 18: Login page error........................................................................................................................20
Figure 19: Shopping cart database code....................................................................................................21
Figure 20: Shopping cart fronted view......................................................................................................21
Figure 21: Adding a new product to shopping cart database code............................................................22
Figure 22: Add product frontend view.......................................................................................................23
Figure 23: Delete Product..........................................................................................................................23
Figure 24: Removing the product from the shopping cart.........................................................................24
Figure 25: Billing page HTML frontend code..............................................................................................24
Figure 26: Order product backend code....................................................................................................25
Figure 27: Order product frontend page...................................................................................................25
Figure 28: Contact page frontend code.....................................................................................................26
Figure 29: Contact interface of the website..............................................................................................27
Figure 30: Social media icon added...........................................................................................................30

Figure 31: Products available.....................................................................................................................31
Figure 32: Feedback form..........................................................................................................................32
Figure 33: Calling option............................................................................................................................32
Figure 34: Live Chat...................................................................................................................................33

Introduction
The given assignment is basically based on the implementation process of the e-commerce
based web application. There are multiple tasks given in this assignment brief. The requirement
of this assignment is to create the case study according to choice and the case study which is
chosen in this assignment is based on online music based. This assignment requires a proper
case study with the implementation also including in each and every function.

Task 1:
Introduction to case study
The website which is going to be created in this web application development assignment is
based on the music store. This music store website will be a fully web-based application. A
music store company wish to create a platform by which the company can be able to provide
online streaming of their music. For this purpose, the music company wants a web-based
platform where the company can involve and can get attract music lovers from all over the
world. There should be a proper functionality integration available in the implementation of
this music based web application. We can choose our own brand of the music company
website.
Dynamic Development
In the implementation of web-based application development, the process of dynamic
development is the most important development technique. The dynamic development is
important because the dynamic web application provides the proper control and the developer
can personalize the dynamic website as their requirements or their needs. The dynamic
development is the next level of the website development process of the HTML/CSS and other
web programming languages. The dynamic website provides the advanced features to the
website and provides the functionality of the server-side web development.
Figure 1: Dynamic Website
The above-given screenshots describe the process of dynamic web application development.
This shows that the client directly login into the control panel and manage the content of the
website and then visitors can view the new web content.
Roles of the website in E-Commerce
Nowadays online shopping or online facility of any of the field is increasing day by day. In the
world of new and the latest technology, the use of an e-commerce website is increasing
aggressively. There are many businesses like small business and big business are using e-
commerce website to increase their business. Today’s world is full of online shopping the
people can buy anything online with the help of e-commerce website there are many websites
like Flipkart, Amazon, Alibaba, and others providing the online shopping services to the
customers. The website in the implementation of the e-commerce plays a significant role for

example if we choose our case study of online music store then the company is creating their e-
commerce website because this is the best place to increase globally customers very easily if
the website consist the better information and functionality then the user can get easily
attracted towards the website.
The case study which we have chosen in this web application development assignment is based
on the online music store and this requires a dynamic development there can be a lot of
possible changes in the developed web application and the process of dynamic website
development gives the full access control privilege to the developer to change the website and
gives the personalization facility also.
Basic Requirements
Programming Languages Database connectivity
HTML, CSS, JS and PHP MySQL database
Table 1: Basic Requirements
This is the basic requirements of the web-based application development process. There are
basically two requirements which are client-side scripting language and the server-side scripting
language and both of these languages will be implemented in the web application of this
assignment.
Task 2:
The website which is going to be developed in this assignment is based on the online music
store. This is a web-based application which will provide the different genre of music type for
the user or the customers by which the customer can easily get the songs of their choices. The
website will be fully responsive and the user interface functionality of this website will be very
attractive so that this website can attract most of the user and can increase the productivity of
the business. In the working process of the website at the initial level, the user has to login into
the music store website to get access to the website and to get authentication also. After get
successfully authentication into the website portal the user will find the different genre of songs
and can easily download the songs from the website or can easily listen also. This is the basic
fundamentals of the music store web-based application. In this web-based application of music
store, there were some audio or video will also be available that can only be download and the
user will be not able to listen to that particular audio or video without download and for that
purpose the user has to download some amount for that particular song.

Figure 2: Working on the website
The above-created flowchart defines the working process of the online music store web-based
application.
In the implementation of the shopping cart, there are a lot of things which need to remember
to create an online shopping website and the thing is that:
 There should be a login and registration page available for the customers.
 The product should be described in an effective manner so that the user can get easily
attracted towards a particular product.
 There should be some kind of offers also should be there in the website. This process
increases the excitement among the users.
 There should be a proper and very secure payment mode option of the particular
product and the payment method should be secure from the outside malicious
injections.
 There should be a facility to tracking system as the user should be able to track the
particular order product.

Figure 3: Process of the shopping cart
The above-given diagram is about the process of the shopping cart website. There are multiple
functionalities should be available in the implementation of the online shopping website. Each
and every functionality is successfully described in this diagram.
Mark-up Languages:
In the implementation of the web-based application, the use of mark-up languages is the most
important section. This is the basic requirements of the development process. There are
multiple languages which are used to develop a website like HTML, CSS, JavaScript and etc.

Each and every language has different functions in the implementation process of the web-
based application.
HTML:
HTML is known as Hypertext mark-up language. This is the basic website development
languages and each and every web page of the website developed by using this language. In the
implementation of the HMTL, the HTML uses “markup” to annotate the images, div, text, table,
and many other things. This is the most important programming language in the processing of
website application development. The HTML also enhanced as nowadays the web application is
developing with the help of a new version of HTML that is HTML5.
CSS:
This is the most important programming language in the implementation of the website
development as CSS is known as cascading style sheet and as the name state, this language is
used to style the web pages created by HTML. This is basically used to give more attractive user
interface to the web pages as the developer can style the web page according to their need and
requirements. There are many things which the developer can do with the help of a cascading
style sheet (CSS) language.
JavaScript:
In the implementation of the web-based application development, the JavaScript is the most
important website programming language and basically, the JavaScript is a dynamic
programming language. This programming language is most widely used in the web pages. In
the application development of JavaScript, this language gives the privilege to the client-side
script to directly interact with the user and creates a dynamic web page.
Bootstrap:
Nowadays this website development programming language is mostly using to create a
website. In the implementation of the website application development, the bootstrap is the
popular part of CSS framework which is used to develop the responsive website and the mobile
compatible website also. There are different classes available in this framework the most
important class of the bootstrap framework is container class and this is most using class.
Database
The database is the most important part of the process of developing a web-based application.
The web-based application which I am going to develop in this assignment will be implementing
the database connectivity also. The database which is going to be implemented is MySQL. The
web-based application provides the functionality of login, register, order, online payment and
to implement this functionality successfully in the web-based application the database integrity
process is a must. Without creating and implementing the database into the website this
process cannot be complete.

Server-side scripting (PHP)
In the implementation of the web-based application development, the server-side scripting
language is the most important aspect. The server-side scripting language is used to customize
the response of each request getting from the user to the website. The server-side script runs
only in the web browser. One of the biggest examples of server-side scripting language is PHP.
PHP is most widely using server-side scripting language in the implementation process of the
web-based application.
Wireframes
Figure 4: Home Page

Figure 5: About Page

Figure 6: Product Description Page