Developing a Secure E-commerce Web Application using PHP and MySQL

Desklib provides past papers and solved assignments for students. This project details the development of a secure e-commerce web application.

Web Application Development

Contents
Introduction:...............................................................................................................................4
LO 1...........................................................................................................................................5
P1.1 Critically evaluate the functions and advantages of web applications..........................5
P1.2 Critically compare different types of server-side and client-side scripting languages. .7
P1.3 Examine web security and make recommendations for security improvements...........9
LO2..........................................................................................................................................11
P2.1 Design a web application to meet requirements given in the case study.....................11
P2.2 Synthesise client-side and server-side functionality in a web application...................15
P2.3 Apply a database design for the given scenario...........................................................17
P2.4 Evaluate alternative designs and solutions to meet the given requirement as explained
in the case study...................................................................................................................18
LO3..........................................................................................................................................21
P3.1 Implement a web application to a prepared design using client-side and server-side
scripting languages...............................................................................................................21
P3.2 Implement a web-enabled database management system to store, retrieve and
manipulate data in a web application...................................................................................26
P3.3 Identify and implement opportunities for error handling and reporting for the given
case study.............................................................................................................................27
LO 4.........................................................................................................................................29
P4.1 Critically review and test a web application using a web-enabled database
management system for the chosen company case study in task 2......................................29
P4.2 Analyse actual test results against expected results to identify discrepancies.............32
P4.3 Critically evaluate independent feedback on a developed web application and make
recommendations for improvements....................................................................................33
P4.4 Create user documentation for a developed web application in task 3........................34
Conclusion:..............................................................................................................................37
References:...............................................................................................................................38
Appendix:.................................................................................................................................39

List of figures:
Figure 1: Wireframe of the home page....................................................................................11
Figure 2: Wireframe of home page footer section..................................................................12
Figure 3: Wireframe of the register page.................................................................................13
Figure 4: Wireframe of the login page.....................................................................................13
Figure 5: Wireframe of the store page.....................................................................................14
Figure 6: Client-Server Interaction..........................................................................................15
Figure 7: ER Diagram for the project......................................................................................17
Figure 8: Design offered by Word-Press.................................................................................19
Figure 9: WIX Dashboard........................................................................................................19
Figure 10: Homepage...............................................................................................................21
Figure 11: Code for home page................................................................................................22
Figure 12: Login page..............................................................................................................22
Figure 13: Code for login page................................................................................................23
Figure 14: Register page..........................................................................................................23
Figure 15: Code for register page.............................................................................................24
Figure 16: Shop page...............................................................................................................24
Figure 17: Code for the shop page...........................................................................................25
Figure 18: Database tables for the project................................................................................26
Figure 19: Product table...........................................................................................................26
Figure 20: XAMPP Panel.........................................................................................................34
Figure 21: Home page of the project........................................................................................35
Figure 22: Login page of the project........................................................................................35
Figure 23: User registration page of the project.......................................................................36
Figure 24: Shop page...............................................................................................................36

Introduction:
Web application development is a key process of the development area that used to create
website development on a platform or language. The first of the assignment include the
function and advantages of the web application. Different server-side and client-side scripting
languages are used to define in this report. Web security and recommendation included with
the prototype of the website. Create the website using PHP and MySQL database and
language.

LO 1
P1.1 Critically evaluate the functions and advantages of web applications
Let’s start by describing what actually a web application is, they are software or programs
stored on a remote server and are accessed through a web browser by the means of internet.
They are mostly not platformed specific and can be operated through multiple kinds of
devices, making the service available online at any time without the constraint of using a
specific operating system. It is a collection of related functions which are aimed to fulfil a
specific requirement. These web applications commonly use a combination of server side and
client side languages to process the input data, handle databases and provide the required
output to the user.
Web applications may be customized to process a certain type of data and provide the user
with the kind of output they are expecting. The client can run the service on any kind of web
browser and have access to the service. These applications can handle large databases,
provide image processing services, file conversion tools, text processing tools and all the
other kinds of services that we can think of.
Now a question may arise that what is the difference between a desktop application and a
web application or how is a web application better over a desktop application? Let’s take an
example here, Gimp is an image editing/processing software which is used to edit images, on
the other hand Befunky is a web application that does the same and it does that all over the
web that means, the users do not need to install any software on their machines and it is
accessible from anywhere over any platform. (Softwaretestinghelp.com, 2019)
Using web applications over traditional desktop applications help to increase the cost-
effectiveness in an organization. A desktop application would be needed to install on each
system individually and set up the software on all the machines would take time. With a web
app, the employees can directly start using the tool with a web browser and they don’t even
need to use the same kind of operating system. Similarly, bug removal or updates for the
software can be so much faster with a web application over a desktop application which
would require the programmers to release an update first which would then be downloaded
and installed by all the users. With a web application, the update would directly be applied to
the tool over the web and the users could start using the application right away. In the context

of security, again web applications have an edge over the desktop applications. The web-
based applications are usually organised on dedicated servers that are monitored and
maintained by server administrators and in the case of desktop applications it is not possible
to provide such a level of security as monitoring each client over a large scale is not possible.

P1.2 Critically compare different types of server-side and client-side scripting
languages
SERVER-SIDE SCRIPTING LANGUAGES
 Ruby on Rails: Ruby on Rails is a framework for creating web applications. These
frameworks are collections of code that provide pre-made solutions which are ready
to use for programmers, they help to save time by not having to write the code again
and again. Ruby is an object-oriented language and rails is the framework which
follows the MVC design pattern. Ruby is an open source language and is completely
free, anyone who feels if the language lacks any feature can create the feature and
contribute to the community. The rails community is fantastic which provides a vast
collection of open source code. The coding practices and structure of every rail
project are similar thus making it easier for developers to move between different
projects. Separate documentation for a ruby project is not required as such because the
code itself is very much readable, this helps other developers to understand the code
easily which makes picking up work must faster. (Bit Zesty, 2019)
 Python: Python is one the most widely used programming language and for the past
five years it has held the number one position as the most popular coding language. It
lays emphasis on code readability and this is one of the reasons why data scientists
prefer python over any other programming language. But this is also a reason why
some people don’t find much of a learning curve in this language and do not see it as
a necessary programming skill. Simplicity is a key factor in python, the output can be
produced with fewer lines of code.
 Java: Without a doubt, java is one of the most powerful languages available, it can
run compiled code across multiple platforms. It has an excellent range of frameworks
which provide almost all the functionalities. The memory management and garbage
collection capabilities of this language are also appreciable. The java server pages
allow mixing of HTML with dynamically generated code from servlets and powerful
web applications make use of java server pages.

CLIENT-SIDE SCRIPTING LANGUAGES
 JavaScript: Client-side javascript runs in the browser and allows user interaction
such as changing DOM, adding events to HTML elements. It is the latest version of
JavaScript which enables the manipulations of client browsers and different web-
pages.
 VB Script: VB Script is a lightweight scripting language and has a simple syntax
with easy to learn and implement. It is an object-based scripting language and used
Component Object Model to access the contents of the environment which it is
executing in. However, VBScript is not supported by modern browsers and hence
JavaScript is preferred.
 HTML: It is a mark-up language used for developing web pages and web
applications. It can be combined with JavaScript and CSS to provide the user
beautifully designed and interactive web pages. The browsers utilize the HTML tags
to interpret their meaning and show the content of the page. With HTML5, client-side
storage is also available with IndexDB and localStorage which basically provide
string-based hash-table storages.

P1.3 Examine web security and make recommendations for security
improvements
The process of securing the website from unauthorized access of confidential data or its
modification is called web security. Hackers and other organizations who might want to steal
user data could try to hack into the web page and try to access all the data stored on a remote
server, they could also link unknown pages to the website causing an SEO spam, redirect the
user to malicious pages and the process of protecting the web application from such attacks is
called web security. A few types of such attacks and their preventions are below described in
brief:
SQL INJECTION: SQLI is a common type of web attack in which the cybercriminal tries to
insert malicious SQL code to the website with an aim of manipulating the database and
stealing user information. The attacker with this kind of web-attack can totally erase all the
data from the backend, manipulate it in any way he wants or have unauthorized viewing
access to the confidential user data. An attacker can also modify locally stored cookies to
insert malicious queries to a web application’s database.
The best way to prevent SQL injection attacks is to validate all the inputs and use prepared
statements. The inputs before processing must be sanitized to ensure that it does not directly
interact with the code. Potential malicious inputs must be removed and they must be checked
for elements such as single quotes.
CROSS-SITE SCRIPTING: XSS or cross-site scripting is a hacking technique that attacks
an application’s weak code. The attacker sends malicious code over the application through a
user and in return receives data from them. This type of attack can take place at any web-page
which accepts user input without sanitizing and validating it. Unlike SQL Injection where the
aim is to damage the database or the backend, XSS attacks take place without alerting the
user which leads into the user compromising the security completely.
To prevent such attacks, the users must be wary of potentially unsafe emails as they may
contain URLs which might appear genuine but are actually generated by a hacker. While
developing websites, proper validations for all the inputs must be taken care of and the user
submitted outputs must be escaped. Unsafe websites must be avoided and in case there is no
other option except visiting them JavaScript must be disabled as XSS attacks mostly use it to
leak information. (Checkmarx, 2019)

PHISHING: The goal of phishing is to trick the user into visiting a malicious link and then
attacking their information. The attackers might provide the malicious URL to the user by the
means of email which might appear to be genuine, it can be an email from a service the user
registered for or an email from the bank, containing a link to redirect the user to their website
and with this link, the attacker might steal confidential information.
The best ways to keep away from such attacks is to check the URLs before visiting them.
Checking emails properly before visiting the links they provide is also a good practice. The
users must not post their sensitive personal details on social media as this information can be
used by cybercriminals to reach them easily.

LO2
P2.1 Design a web application to meet requirements given in the case study
Wireframing: Wireframing is an important step in the process of user interface designing. It
is the process of roughly representing the look of the interface by the use of lines, boxes, text,
labels etc. They can be hand drawn or created with the help of diagramming tools. It allows
the designers to have clarity about the product they are designing and also lets others have a
view of what is being developed. Changes, if required, can also be suggested at this point
only so that later on whole of the design is not needed to be changed. (What is a Wireframe
and Team, 2019)
Wireframes for the pages of the web application have been created and shown below:
Figure 1: Wireframe of the home page

Figure 2: Wireframe of home page footer section