Web Application Development Project: E-commerce Website for Footwear

Desklib provides past papers and solved assignments. This project details e-commerce web app development.

WEB APPLICATION
DEVELOPMENT

Contents
Introduction:...............................................................................................................................4
LO1. Understand the concept of web application development................................................5
P 1.1. Critically evaluate the functions and advantages of web application..........................5
P 1.2. Critically compare the different type of server-side and client-side scripting
language.................................................................................................................................6
P 1.3. Examine web security concerns and make recommendations for security
improvements.........................................................................................................................7
LO2. Be able to design a web application..................................................................................8
P 2.1. Design a web application to meet the given requirements..........................................8
P 2.2. Synthesis client-side and server-side functionality in a web application..................10
P 2.3. Apply a database design for a given scenario............................................................11
P 2.4. Evaluate alternative designs and solutions to meet the given requirement as
explained in the case study...................................................................................................11
LO3. Be able to implement a web application.........................................................................14
P 3.1. Implement a web application to a prepared design using client-side and server-side
scripting languages...............................................................................................................14
P 3.2. Implement a web-enabled database management system to store, retrieve and
manipulate them in a web application..................................................................................18
P 3.3. Identify and implement opportunities for error handling and reporting....................19
LO4. Be able to test web application.......................................................................................22
P 4.1. Critically review and test a web application using a web-enabled database
management system.............................................................................................................22
P 4.2. Analyze actual test result against expected test result to identify discrepancies.......23
P 4.3. Critically evaluates independent feedback on a developed web application and make
recommendations for improvements....................................................................................23
P 4.4. creates user documentation for a developed web application in task 3.....................24
Conclusion:..............................................................................................................................25
Reference list:...........................................................................................................................26

Figure 1: Homepage Source: Balsmique tool................................................................8
Figure 2: Men's page Source: Balsmique tool.................................................................9
Figure 3: Women's page Source: Balsmique tool................................................................9
Figure 4: Contact us page Source: Balsmique tool.............................................................10
Figure 5: client-server model...................................................................................................10
Figure 6: Entity relationship diagram for a given website.......................................................11
Figure 7: Homepage.................................................................................................................14
Figure 8: Men's footwear.........................................................................................................15
Figure 9: Women's footwear....................................................................................................15
Figure 10: contact us page........................................................................................................16
Figure 11: cart page..................................................................................................................16
Figure 12: check out page........................................................................................................17
Figure 13: Order complete page...............................................................................................17
Figure 14: database design.......................................................................................................18
Figure 15: login page...............................................................................................................18
Figure 16: database design.......................................................................................................19
Figure 17: Incorrect error handling..........................................................................................21
Figure 18: correct error handling.............................................................................................21
Table 1: Test cases and results.................................................................................................20

Introduction:
As given in the scenario, one has to develop a web application and prepare a report on how to
implement a web application and how a web application is better than a desktop application.
The web application which has to be developed is an E-commerce website which is able to
perform the multiple operations defined in the case study. In the report all the screenshots of
the webpages are imported as a result the client will get to know about the UI of the website.

LO1. Understand the concept of web application development
P 1.1. Critically evaluate the functions and advantages of web application
The web application is a type of application which is run on a web browser by any client. It is
a client-server application which can run through the internet on a browser. Some of the
examples of a web application are the online portal, online ticket booking system, online
store for purchasing anything. The main difference between the web application and desktop
application is that desktop application is usable for a personal computer and can be run by
only one client whereas web application is present on the internet and anyone can access it by
using a web browser. The web application uses domains and a URL for open it but the
desktop application does not need any URL, it only needs an application to download in the
desktop and after that run it using the internet.
The examples of web applications are “Amazon.in”, “Google.co.in”, “irctc.co.in” and many
more. Whereas the examples of desktop applications are “MS-word”, “Notepad”, “Google
Chrome” and many more like all these.
Discussing only the web application, the web application is the great aspect for a user in
which a user can access any website anywhere and anytime with the help of a browser. This
is also known as a website which is implemented with the help of latest technologies present
in the IT market. In this process a client requests a server to perform any operations using the
Internet and then Internet fetches information from the web server and web application then
activates itself and fetches the remaining the information from the application server and
while talking about the data of the user, application server interacts with the database server
for the information of user stored in the database. Now all this information combines and
goes back to the client for which the client has requested (Ndegwa, 2016).
The advantages of Web applications are:
 It can run on any platform using the internet with the help of the web browser by
caring for the compatibility of the browser.
 All the user accessed that server can access the same version of the site by eliminating
the compatibility issues.
 No memory is taken by the web application as they are not installed on the system.
 For some of the informational website, the subscription is not needed.
 It is easy to use and accessed by anyone, anytime and anywhere.

The functions of the web applications are:
 Accessed using a web browser.
 Used in the business application functions.
 It provides more security.
 Some of the E-mail components are present in web applications.
P 1.2. Critically compare the different type of server-side and client-side
scripting language.
A server-side language is a type of language which is act as a backend of the website and
client-side act as a front end of the website. The backend of the website denotes that process
done on the back of the site which is not visible to the user and front end of the site denotes
that the process is done on the front of the site and is visible to the user. Client-side languages
are JavaScript, JQuery, VB Script etc. Server-side languages are ASP, PHP, JSP. Discuss all
these languages one by one in brief:
Server-Side:
PHP: It stands for hypertext pre-processor language which is implemented for the design of
web development. It is a scripting language which is embedded into HTML. PHP was
released on 8 June 1995 and the latest version of PHP 7.3 and was released on 6 December
2018. The PHP code can be implemented using CLI and by using the code embedded into
HTML.
JSP: JSP stands for java server pages that help in developing software and the dynamic web
paged using HTML and XML. JSP uses Java programming language.
ASP: ASP or ASP.NET is a server-side scripting language which is developed by Microsoft
in the 1990s. Using ASP one can be made the single page web application by embedding it
into HTML. After a duration of time ASP is replaced by Web Forms and if one has to create
only an informational web page then ASP is not needed. (view, 2018)
Client-Side:
JavaScript: JavaScript is a client-side scripting language which is used to design the front
end and enables some of the functionalities which take place in the front end. It is very
different from java as some of the people think that it is a framework of java but this is not
true. The main difference between Java and JavaScript is that java is a fully object-oriented

language and JavaScript is a totally client-based language and one is used for android
application development and one is used for web development respectively.
JQuery: It is a framework of JavaScript and is used for giving some of the animations to the
site. The syntax and methods are just similar to JavaScript and predefined functions are
almost same in both the language.
VB Script: VB script stands for Visual Basic Scripting language and it is the mini version of
Microsoft visual basic. It is basically used to make a webpage more attractive with the help of
animations, in other words, it will increase the look and feel of the website (Raval, 2019).
P 1.3. Examine web security concerns and make recommendations for security
improvements.
Some of the security issues occurred in the website development are discussing in this
module:
SQL Injections: SQL injection is a type of issue in which an attacker is trying to attack at the
code of the website through which he or she can access the database of the website and if this
process is successful then the attacker will able to manipulate the data like reading, write and
delete the data present in the database. To overcome the issue developer has to make better
security for the accessibility of code so that no one can access the data who do not have any
privilege.
Broken Authentication and Active Management: In broken authentication and active
management the credentials of the user login are identified by the attacker and this leads to
attack in the account of that user and all the information of that user are accessed by that
attacker. To overcome this demerit developer has to use the google authentication and for
own registration, one has to apply the better encryption policies for the safety of the data of
the user (CommonPlaces Interactive, 2017).
Security Misconfiguration: In the security misconfiguration there are many of the security
issues which takes place like lack of maintenance of the site, unusual deployment of website,
web server, application server and database server used in the website. So, to overcome this
issue one has to maintain the website on a regular basis and deployment of the website as
usual and better as per the user.

LO2. Be able to design a web application
P 2.1. Design a web application to meet the given requirements
While developing a web application or a website many of the technologies are used in the
scenario like HTML, CSS, Bootstrap, JavaScript, and JQuery. The database used in the site is
Google firebase and the authentication used mail Id only. The information is stored in the
firebase itself.
The web application developed is an E-Commerce website which is used to purchase shoes
for men and women. In that website, the user will see the products for men and women and if
one has to buy the product then he or she has to login to the site using its registration process
and the data of the user stored in the database (Firebase). The website consists of many pages
like Homepage, login page and many more.
The requirements of the user in the given website are:
 The user can see the products without login.
 The user must log in to purchase something from the store.
 The user can contact the admin by entering the details and specify a particular reason.
 The user can log in using email, password and contact number.
 The user can manage his or her profile.
 The user can give feedback for any wrong product.
The design of the website is given as:
Homepage:
Figure 1: Homepage Source: Balsmique tool

Men’s page:
Figure 2: Men's page Source: Balsmique tool
Women’s page:
Figure 3: Women's page Source: Balsmique tool

Contact us page:
Figure 4: Contact us page Source: Balsmique tool
P 2.2. Synthesis client-side and server-side functionality in a web application
Client-side and server-side interact with each other by linking the frontend file to back end
file. In the developed website developer linked the HTML page to the JavaScript page by
using a Script tag in HTML and wrote all the script in that particular file. If the content of the
file is bigger than one can use the different file with the js extension. Although JavaScript is a
client-side language so the developer doesn’t have to do the greater task for this, but while
joining the Client-side to the server-side, the developer has to maintain the concurrency of the
website.
Figure 5: client-server model

Client-Server model: Client-server model is a type of model which tells how the server
interacts with the client. In the above figure, the clients are specified as the host machines like
PC’s, smartphones and laptops. They act as a client which requests to perform any operation
from the server. When the client request for any process then the server will send an
acknowledgment to the client that server receives the request and is ready to process the
request and after that, the client sends the process to the server and after that server process
that request and send back the result to the client.
P 2.3. Apply a database design for a given scenario.
Figure 6: Entity relationship diagram for a given website
P 2.4. Evaluate alternative designs and solutions to meet the given requirement as
explained in the case study.
In the IT world, there are several technologies for developing a website but each of them has
different pros and cons. Some of the technologies for developing web application are
JavaScript, PHP, JQuery, ASP.NET etc.
Discussing the pros and cons of each of them simultaneously:
JavaScript
Advantages of JavaScript are:

 Faster speed: It has usually a much faster speed than any other language and is more
appropriate in case of web development.
 More reliable: More reliable as compared to any other scripting language because it is
only a client-based language, not a server based.
 Simplicity: It is easy to understand and easy to use for a beginner also.
 Balanced server load: It can balance the load of a server, that is when many of the
tasks are performed using one server, then the server takes more load and JavaScript
balance that load from the server.
 Regular updates: JavaScript provides regular updates for making it more durable and
more attractive.
Disadvantages of JavaScript:
 The only client based: The main drawback of JavaScript is that it is only the client-
based scripting language and only used for frontend development.
 Only browser support: Another drawback of JavaScript is that it is only the browser
support language and not execute at any other platform (Shan, 2014).
PHP:
The advantages of PHP are:
 It is the most popular application for web application development.
 It is totally cross-platform for all web application.
 Easily imported into HTML file.
 It is an open source that everyone can use it.
 Highly scalable.
Disadvantages of PHP:
 Not used for desktop applications.
 Runs slower than any other language.
JQuery:
Advantages of JQuery:
 The main advantage of JQuery is that it will perform all the operations which are
performed using JavaScript but with a smaller syntax with compared to JavaScript.
 It can work easily with AJAX.