ProductHub E-commerce Website: A Web Application Development Project

Desklib provides past papers and solved assignments for students. This project details e-commerce website development.

Web Application Development

Table of Contents
Introduction.................................................................................................................................................4
LO1 Understand the concepts of web application development................................................................5
1.1 Critically evaluate the functions and advantages of web applications.........................................5
1.2 Critically compare different types of server-side and client-side scripting languages.................6
1.3 Examine web security concerns and make recommendations for security improvements.........9
LO2 Be able to design web applications....................................................................................................10
2.1 Design a web application to meet a given requirement..................................................................10
2.2 Synthesize client-side and server-side functionality in a web application.......................................15
2.3 Apply a database design for use in a web application.....................................................................16
2.4 Evaluate alternative designs and solutions to meet given requirements........................................17
LO3 Be able to implement a web application............................................................................................18
3.1 Implement a web application to a prepared design using client-side and server-side scripting
languages...............................................................................................................................................18
3.2 Implement a web-enabled database management system to store, retrieve and manipulate data
in a web application...............................................................................................................................25
3.3 Identify and implement opportunities for error handling and reporting.........................................28
LO4 Be able to test web applications........................................................................................................29
4.1 Critically review and test a web application using a web-enabled database management system.29
4.2 Analyze actual test results against excepted results to identify discrepancies................................30
4.3 Critically evaluate independent feedback on a developed web application and make
recommendations for improvements....................................................................................................31
4.4 Create user document for developed web application....................................................................32
Conclusion.................................................................................................................................................34
References.................................................................................................................................................34
Table 1: Website Testing Process..............................................................................................................27
Table 2: Website Test Results....................................................................................................................27
Table 3: User's Feedback...........................................................................................................................27
Figure 1: Client Side Scripting Language......................................................................................................7
Figure 2: Server side scripting language......................................................................................................8

Figure 3: Home Page Mockup Interface....................................................................................................10
Figure 4: Login Page Mockup Interface.....................................................................................................11
Figure 5: Product Page Mockup Interface.................................................................................................11
Figure 6: Product Information Page Mockup Interface.............................................................................12
Figure 7: Order Form Page Mockup Interface...........................................................................................13
Figure 8: About Page Mock interface........................................................................................................14
Figure 9: Contact Page Mockup Interface..................................................................................................14
Figure 10: Working of client-side scripting................................................................................................15
Figure 11: Working on server-side scripting language...............................................................................16
Figure 12: ER Diagram...............................................................................................................................17
Figure 13: Home page Interface................................................................................................................18
Figure 14: Login Page Slide........................................................................................................................19
Figure 15: Product Page Slide....................................................................................................................19
Figure 16: Product description page slide..................................................................................................20
Figure 17: Order Page Slide.......................................................................................................................21
Figure 19: Feedback Page Slide.................................................................................................................22
Figure 20: Contact Page Slide....................................................................................................................23
Figure 21: Database connect source code.................................................................................................24
Figure 22: Backend code............................................................................................................................24
Figure 23: Session code.............................................................................................................................24
Figure 24: Admin Panel of PHP XAMPP.....................................................................................................25
Figure 25: Product Database Table............................................................................................................26
Figure 26: User Database Table.................................................................................................................26
Figure 27: Order database entity...............................................................................................................27
Figure 28: Product database entity............................................................................................................27
Figure 29: User database entity.................................................................................................................28
Figure 30: Home Page User Guide.............................................................................................................32
Figure 31: Login Page user Guide..............................................................................................................33
Figure 32: Product Page User Guide..........................................................................................................33
Figure 33: Product detail user guide..........................................................................................................34

Introduction
The given assignment is based on the implementation of web application development. The
given assignment asks to develop a web-based application implementing the client side and the
server side scripting language. The web application which is going to be created in this
assignment is based on the online shop. The basic aim of this assignment to enhance the
knowledge of web-based application using scripting langue. Both scripting language will be
implemented to develop this web-based application. This assignment’s brief asks to create a
user documentation file also and this report will describe each and every aspect of the website
application development process.

LO1 Understand the concepts of web application
development
1.1 Critically evaluate the functions and advantages of web
applications.
In this section, the functions and the advantages of the web application will be disused.
Computer programming supports web application development technology and its features. In
the development process of website design, the implementation of the web application is the
most important section. The web application directly supports web browser facility. The web
application only executes on the web browser and the webpages can be run only in the
browser. The web application supports some kind of web application development language
like HTML, CSS, JavaScript, Bootstrap, and other programming language. In the development
and execution of web development process, there is two processes first one process depends
on the user interface technology and second one process depends on the server side
technology and in the implementation of the server side technology there is one language PHP
which is widely used in the implementation process of web application development. There are
many website examples which supports PHP as a server-side technology like Flipkart, Amazon,
and others. The use of web application development is increasing day by day in this full
technology world. Now the trend of online shopping is increasing day by day and there are
many small and many domestic level businesses who are using the process of web application
development to create their online portal. In the development of online portal and online
shopping websites, the use of web application development is much important. There is two
programming language available in this implementation process which is server-side technology
and client-side server scripting language. In the implementation of server-side scripting
language, there is such kind of languages like PHP, Python, and others but the PHP is much
better and this is very widely used programming language in the implementation of server-side
scripting language. In this assignment of web application development, the online shopping
website portal is created and there successfully implemented server-side technology and client-

side technology. In this section, the function and advantages of web application development
are successfully described (Lanubile, 2003).
Advantages of web application
There are many advantages available in the process of web application development some of
the advantages are described in this section.
 There are browser compatibility features available in the process of web application and
this is one of the main advantages of the web application.
 The web application can be run on any platform.
 There is one more advantage of web application available which is “Reduction profitable
custodies”.
 In the process of web application development, there is one more feature which is
consolidated data format and this is the most secure process of web application
development.
 The installation process of this web application development takes very low space.
The function of web application
There is multiple functions available for the web application. Each and every function depends
on two programming languages which are server-side scripting language and the second one is
client-side scripting language.
 The one and the most important functionality is that the web application is server-side
scripting language and client-side scripting language.
 The features of database connectivity also one of the main important function of web
application development.
 A web application implements an effective user interface.
1.2 Critically compare different types of server-side and client-side
scripting languages.
There is two most important scripting language available in the process and in the development
of web application development first one is client-side scripting language and the second one is

a server-side scripting language. In this section, the full description of the server side and the
client side server technology is described. These both languages are having different
functionality in the application development of web application. There is multiple connectivity
processes which are database connectivity with several client-side technologies.
Client Side Scripting Language
The client-side server scripting language is used to create and make the webpages very
attractive. The client-side scripting language is the most important language in the execution of
web-based application. The implementation of client-side scripting language is done over the
client side browser. In this client-side scripting language, the cline directs a request to the web
server from the operator side to admittance the web browser. In the development of the client
side scripting language, the script of client-side only interacts with the cookies and local
storage. There are multiple languages which support client-side scripting language like HTML,
CSS, and JavaScript. The client-side server scripting language used as an interface between the
user and the server (Heninger, 2002).
Figure 1: Client Side Scripting Language

 HTML: In the implementation of client-side scripting language the HTML is the most
important language. HTML is a type of website development language. HTML is used to
create the user interface of the website. HTML refers to “HyperText Markup Language”.
There are many types of markup language available which is HTML, HTML5, and others.
 CSS: CSS is the type of client-side scripting language. The CSS provides an extended
version to the website development programming language. The CSS refers to the
cascading style sheet and this is used to style the HTML webpage in a very effective
manner. The image formatting, text formatting, webpage body style, and many other
things can be done in this programming language.
 JavaScript: JavaScript is a type of scripting language. JavaScript is a high level
interpreted programming language. The basic work of JavaScript is to create and control
the dynamic web content. This is a type of client-side scripting language.
Server Side Scripting Language
In the development of web-based application, the use of server-side scripting language is the
most important section. The server-side scripting language provisions numerous programming
languages for emergent the website. The one the main and the most important language of
programming in PHP and this scripting language uses CMS (Content Management System). The
server-side scripting language mostly runs on the web server. One of the main important
functionality is that this supports database connectivity. In the execution of web-based
application development section, there are multiple languages which support server side
scripting language such as PHP, ASP.NET, Python, Ruby and etc.

Figure 2: Server side scripting language
 PHP: In the application development process the PHP is the most important type of
server-side scripting language. In web-based application the PHP is a general-purpose
scripting language. The PHP is directly linked with the HTML text content.
 ASP.NET: It is the type of server-side scripting language and this is provided by Microsoft
and this provides a web development platform. In the development process of web-
based application, the ASP.NET is used so much.
 Python: As same as the JavaScript the python is a general purpose language and it is a
type of interpreted language. Python is having the main and the most functionality like
website design and many others (Hanus,2001).
1.3 Examine web security concerns and make recommendations for
security improvements.
The security has become the biggest issue in the process of website development and software
development as well. In the implementation of the web security there is multiple security
concern available which is given below:
 Code injection: In this safety drive the hackers inoculate some kind of impish software
on the website and with that software, anyone can take secretive data and information
of the handlers.

 Form Validation: This is the type of security procedure and by relating this
authentication we can momentous the user’s details. This procedure is functional in
equally server side and the client side scripting language.
 Antivirus Update: The antivirus of the system or the product should be updated so that
the harmful component cannot damage the software.
 Weak Security: The network security of the system should be very strong because the
data of the user saved on the network and the hackers can hack that network layer easily.
LO2 Be able to design web applications
2.1 Design a web application to meet a given requirement
Before creating a web-based application or any web application the first and the most
important requirement is to design a dummy website portfolio. This process is the part of the
software development life cycle (SDLC). By seeing this website module the development and
the creative process becomes easy. For creating a web-based application there are several
requirements that will help to build an attractive and effective website. The first requirement is
to select an appropriate web application development programming language. In the section of
this assignment, the screenshot of mockup is given. The mockup of the website shows that how
our website is going to look like.

Figure 3: Home Page Mockup Interface
The given slide is about the home page of this E-commerce website and our website’s home
page is going to look like as given in the mockup.
Figure 4: Login Page Mockup Interface
The given slide is about the Login page of this E-commerce website and our website’s login
page is going to look like as given in the mockup.

Figure 5: Product Page Mockup Interface
The given interface is about the product page of this E-commerce website and our website’s
product page is going to look like as given in the mockup.
Figure 6: Product Information Page Mockup Interface
The given interface is about the product information page of this E-commerce website and our
website’s product’s information page is going to look like as given in the mockup.