Web Application Development Project: E-commerce Platform

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

WEB APPLICATION DEVELOPMENT

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

List of figures:
Figure 1: showing how a web-application processes requests...................................................5
Figure 2: Wireframe of the home page....................................................................................11
Figure 3: Wireframe of the login page.....................................................................................12
Figure 4: Wireframe of the home page footer section.............................................................12
Figure 5:Wireframe of the Register page.................................................................................13
Figure 6: Wireframe of the Shop page.....................................................................................13
Figure 7: Client-server interaction...........................................................................................14
Figure 8: Client-server interaction...........................................................................................15
Figure 9: Diagram of a three-tier architecture..........................................................................16
Figure 10: ER diagram of the database structure.....................................................................17
Figure 11: Image showing WordPress user Interface..............................................................19
Figure 12: typical design offered by WordPress.....................................................................20
Figure 13: Log-in page.............................................................................................................21
Figure 14: Profile page.............................................................................................................21
Figure 15: Shop page...............................................................................................................22
Figure 16: Register page..........................................................................................................22
Figure 17: Code for register page.............................................................................................23
Figure 18: Code for shop page.................................................................................................24
Figure 19: Code for profile page..............................................................................................24
Figure 20: User database..........................................................................................................25
Figure 21: User database structure...........................................................................................25
Figure 22: XAMPP control panel............................................................................................32
Figure 23: Home Page..............................................................................................................33
Figure 24: Login Page..............................................................................................................33
Figure 25: Register page..........................................................................................................34
Figure 26: Welcome page........................................................................................................34
Figure 27: Shop Page...............................................................................................................35

Introduction:
Web-applications are preferred over conventional software these days as they are fast &
flexible to develop as they can be developed on individual models/layers & provide a lot of
other benefits over desktop applications. They can be developed with HTML, CSS, jQuery,
JavaScript along with other frameworks. The web-applications can be supported on the back-
end with PHP, java, python, angular etc. Each language provides some benefits & it totally
depends upon the user to choose the language which suits the best to him/her. The three-tier
architecture is used to develop these web application as it provides great flexibility to the
developers & designers. In order to build the interface of the web-application, wireframes
may be created to provide a rough sketch of the application. These web applications, when
created with frameworks such as Bootstrap, provide a compatible view for various display
sizes as well.

LO 1
P1.1 Critically evaluate the functions & advantages of web applications
A web application is a software that is stored on a remote server & runs on the web through a
browser in order to provide the functionality to the users, they are less focused on marketing
& fulfil purposes like submitting, storing, searching or retrieving data. These applications
make use of databases to store & retrieve data & thus are called dynamic.
Figure 1: showing how a web-application processes requests
(Maxcdn, 2019)
Web applications do no need to be developed for a specific type of computer, platform or an
operating system because they run in any web browser, the user can even bring in Internet
Explorer & the web application would work (only in some cases the users might need to use a
specific browser). In short, they run on various platforms without any constraints of the
operating system as long as the web-browser is compatible & all the users have the access to
the same version, removing all issues with compatibility. Web apps can be tailored for
business purposes like sales tracking, financial software, ordering forms, etc. for time-saving
efficiencies. They can also be designed to strengthen both external & internal communication
& make data delivery efficient. (Maxcdn, 2019)
One another problem that is solved by these web apps is related to the storage costs &
limitations. These web apps are not stored locally on the user’s hard drive thus eliminating
the space limitations. So if a mobile user does not have enough space on their device to install
a certain app, they can still have access to all the features by using the service through the
web app. These applications serve the functionalities as well as reduce the costs at both ends
i.e. at the client side & at the business side.
Web applications include shopping carts, image manipulation tools, file converting tools,
storage drives, file scanning software, word processors, email programs & many more.

Microsoft 365 & google application are the most popular applications. Some other popular
web applications are- Evernote, which enables the users to take any piece of content on the
web & make notes easily; Dropbox is another web app which is affordable & a top-notch
cloud storage service accessible on most of the platforms.
Majority of companies nowadays are porting their desktop applications to web-based
applications & there are various reasons for it. Web-based applications avoid the burden of
deploying software in each client machine, a system with an internet connection & a browser
is sufficient enough for the application to run, this also enables the user to access the
application with any system he has access to anytime he/she wants. It also makes bug fixing
& updates quick & easy. Overall, they make support & maintenance easier.

P1.2 Critically compare different types of server-side & client-side scripting
languages
Server-side scripting languages:
PHP: Php has earned a lot of popularity among the programmer community with its varied
function library moreover its low-price offerings have made it the right alternative to some of
the other scripting languages. It has also been referred to as ‘Perl Killer’ by some as it can do
almost everything that Perl can & it does it in an efficient way as well. It has a vast array of
functions which can handle most of the tasks on the go. Php goes well along with major web
servers & is used mainly because of its free & cross-platform nature.
ASP: Microsoft Active Server Pages (ASP) is not a complete language, it is rather a
framework which enables the programmers to make use of a scripting language with other
software components. When used as a part of the ASP framework, the components of the
software are considered to be objects. It is generally used for dynamic web scripting using
VBScript. It is easy to learn & provides a good overall performance. It is linked to the
Windows operating server & if needed to buy a hosting for an ASP-based software a
Windows-based server will be needed which is expensive. Some basic components come pre-
installed with ASP bundle however more features need additional components to be installed.
The coding style for ASP is not the usual one which is shared by other languages such as C,
PHP, Java & thus programmers might take a little time to get a grip on using this.
JAVA: It is undoubtedly one of the most powerful server-side development languages.
Servlets which handle web requests, Java Server Pages which combine HTML with Java
code, Enterprise Java Beans, Java has it all. Its frameworks provide sophisticated abilities
which enable the developer to deliver information seamlessly across pages & networks.
Unlike the others, Java is a complete programming language which is capable of handling
bigger software with ease. It runs on the philosophy of WORA i.e. Write Once Run
Anywhere which means that it does not need any different kind of environment to run on
different platforms. The web applications in java can be stacked up into a web app archive
(.WAR) file which can be directly deployed on the apache tomcat servers. Such a powerful
language needs a lot of learning & practice to get a hold.

Client-Side Scripting Languages:
HTML: The most widely & commonly used language to develop web pages is HTML. It is
the most basic building block of the web which defines the structure & meaning of the
content. Hypertext is the way by which the users move across the web, they use hyperlinks to
move across pages & markup is what HTML tags do to the text inside them.
CSS: CSS (Cascading Style Sheet) is also scripting language most importantly used for front
end designing of the website so that it is user interactive. With CSS, styles can be defined for
the web pages & these styles can then be directly used across all pages of the web
application. The CSS can be imported to the HTML page & styles can be implemented
directly.
JavaScript: It is a lightweight language commonly used with web pages. Its object-oriented
capabilities allow the development of dynamic pages with the use of the client-side script. It
is integrated with HTML pages & the code for JS is written under the <script> tag. It
provides immediate feedback to the users & provides rich interfaces to be designed.

P1.3 Examine web security & make recommendations for security improvements
Code Injection: The essence of this type of injecting attack is injecting malicious code
through vulnerable parts of the website. The vulnerabilities may be found in input fields for
users, such as for a username or a form submission where an SQL statement is entered, which
runs on the database & this is basically called an SQL injection attack. There are other types
of similar attacks such as script injection, dynamic evolution attacks & operating system
command attacks. In an HTML injection type, the hacker tries to send the malicious code
through a vulnerable field with an intention of changing the information displayed to the user
or changing the website’s design & in the result the user may then be viewing the data that
was sent by the malicious user. These attacks are common & the results of these attacks may
be, lost credentials, corrupt data or complete loss of control over the server.
Without a doubt, the main reason for these types of attacks is the developer’s lack of
knowledge & inattention. Therefore, one way of preventing such attacks is avoiding
vulnerable code & filtering input. Every input should be checked for vulnerability such that it
does not contain any script or HTML code.
Attention should be drawn towards security testing in order to prevent such attacks & the
developer & the tester both must have good knowledge about how this kind of attacks is
performed only then can these attacks may be prevented.
Phishing: Phishing is a type of rip-off used by identity thieves to deceive users into
providing their confidential personal or financial info. There can be a number of ways to do
this, thieves may use a professional looking email to mimic trusted entities like banks, credit
card companies & other online resources or they may create a replica of a social networking
website & redirect users there where they will be entering their sensitive information which
now will be accessible to the hacker. These fake websites & emails are used to lure
unsuspecting consumers by a web-link visiting which would trick them into revealing their
information.
In order to protect personal information from such hackers, it is important to be very cautious
with websites wherever sensitive information is being asked for. The users must be very
careful of any e-mails received from trusted entities like bank & if an email contains a link, it
should only be accessed when you’re sure that it is genuine.

Cross-site scripting (XSS Attacks): Cross-site scripting is a security vulnerability where the
malicious client-side code is inserted into webpages by the hacker. At some point, most of the
major websites such as Google, Yahoo, & Facebook were all affected by the flaws. These
attacks are particular threats because an attacker taking advantage of an XSS attack may gain
the power to do whatever the user can & see what other users see, which include passwords,
payments, & banking details. Moreover, the attack is done in such a way that both the user &
the vulnerable application will be unaware of what's actually happening. XSS attacks an
application to receive a browser to deliver a malicious script that believes the script comes
from a trusted source. Every time the end user visits the affected page, their browser
downloads & runs the malicious script as if it were part of the page. The attacker will attempt
to hijack the user's session in most XSS attacks by stealing their cookies & session tokens.
In order to reduce the chances of the website becoming a victim of an XSS attack, it is
essential that it is developed using some form of the security development lifecycle (SDL).
Developers must build the application in a way that any kind of data is assumed to be
malicious. XSS vulnerabilities can also be prevented by avoiding form inputs or any other
places where input from the user is required. This way, the key-characters in the data
received by a web application will be prevented from being processed in any suspicious way.
In other words, we will be filtering the data received by our web pages such that it will not
allow special characters such as <,> & – from being processed which could somehow cause
harm to the application & the users.

LO 2
P2.1 Design a web application to meet requirements given in the case study
Wireframing: Wireframing is a way of presenting the actual application which will be
developed at a basic/structural level. The basic web-application structure is shown with
wireframes which show all the pages. Wireframing is a part of the early design process for
any software. In other words, a wireframe is a skeletal three-dimensional model in which
only lines & vertices are represented.
To design the web application, wireframes for each page have been created & shown below.

Figure 2: Wireframe of the home page
Figure 3: Wireframe of the home page footer section