Web Application Development Project: Unit 35 Grocery Store

Desklib provides solved assignments and past papers to help students succeed.

UNIT35
WEB APPLICATION DEVELOPMENT

Contents
Introduction......................................................................................................................................3
LO1. Understand the concepts of web application development....................................................4
P1.1– critically evaluate the functions and advantages of web applications...............................4
P1.2 – critically compare different types of server-side and client-side scripting languages......5
P1.3 – examine web security and make recommendations for security improvements..............6
LO2 Be able to design web applications.........................................................................................7
P2.1 design a web application to meet the requirements given in the case study...........................7
P2.2 synthesize client-side and server-side functionality in a web application.........................14
P2.3 apply a database design for the given scenario.................................................................15
P2.4 evaluate alternative designs and solutions to meet the given requirement as explained in
the case study.............................................................................................................................15
LO3 . Be able to implement web applications for the given case study in task 2.........................16
P3.1- implement a web application to a prepared design using client-side and server-side
scripting languages....................................................................................................................16
P3.2- implement a web-enabled database management system to store, retrieve and manipulate
data in a web application...........................................................................................................19
P3.3- identify and implement opportunities for error handling and reporting for the given case
study...........................................................................................................................................20
LO4................................................................................................................................................20

P4.1 – critically review and test a web application using a web-enabled database management
system for the given case study in task 2...................................................................................20
P4.2- analyze actual test results against expected results to identify discrepancies..................23
P4.3 critically evaluates independent feedback on a developed web application and make
recommendations for improvements.........................................................................................24
P4.4 creates user documentation for a developed multipage website.......................................24
Conclusion.....................................................................................................................................25
Reference.......................................................................................................................................26
List of figures
Figure 1: Grocery store- Homepage..............................................................................................10
Figure 2: Grocery store- Shopping cart page.................................................................................11
Figure 3: Grocery store- Wishlist page..........................................................................................12
Figure 4: Grocery store- About us page........................................................................................13
Figure 5: Grocery store- Contact us page......................................................................................14
Figure 6: ER diagram of database.................................................................................................16
Figure 7: Grocery store- Homepage..............................................................................................18
Figure 8: Grocery store- Homepage..............................................................................................19
Figure 9: Database of user.............................................................................................................20
List of tables
Table 1: Log in test........................................................................................................................23

Table 2: Client-side test.................................................................................................................24

Introduction
Web application development is the process which is used by programmers to develop a system
which helps in commencing various process required by the system. The development of web
application is a tedious task in which various small and large operations are performed to
examine the build and quality of the developed system. an application after being developed,
undergo various tests to verify that it is functioning properly with no errors and issues occurring
within the operations of the web application.
In this report, a new web application is being developed named as a grocery store. Its products
include grocery items which are used by individuals in their regular lifestyle. The front-end of
the application was developed using the programming language JavaScript, HTML and CSS
whereas the back-end was developed using the PHP language. In the back-end part of the
application, the use of MySQL query language is being implemented in the development and
designing of the database.

LO1. Understand the concepts of web application development
P1.1– critically evaluate the functions and advantages of web applications
Web applications are application programs that are developed to be accessible anywhere at any
time using the internet. These programs use websites as their front-end or interface hence the
user can access it when required by just using any standard browser system to access the
application. The functions of a web application are to provide enhanced functionality of a
business in which it searches, retrieve, submits and stores data. Web applications provide their
functionalities when the user interacts with the system inputs specific commands for the
application to perform.
Web applications provide various advantages to an organization such as-
 Can be used anywhere at any time- Web applications since are developed to run on a back-
end system and provide functionalities of the application using websites as their front-end,
enhances their usability and makes the application accessible from any devices in which a
browser is present.
 Price effective- Web applications are developed in generalized form i.e. they do not require
to be developed for specific operating system or devices to be accessible. This property
makes the development of web applications easy and prices effective as device based
application requires optimization of the application as per the specification of devices and
their supportability factors.
 Usability- Web applications, nowadays are developed in a dynamic way so that they can be
accessed in any device that has a browser and internet connectivity. The device can include
mobile phones, tablets, computer systems, etc. This property of web applications makes the
accessing of the application easier in any device.
 Customisability- Web application designs are easy to customize as they are developed to be
regularly updated for the owner of the web application so as to provide the latest schemes
and offers to their customers. Device-based application, on the other hand, is not designed to
be regularly updated due to which applications cannot be updated frequently. Web
applications also do not require any specific format of browser version to be compatible. The

web application just determines if they can execute their front-end in the original format or
requires resizing to be compatible with its operability (Li, 2015).
P1.2 – critically compare different types of server-side and client-side scripting languages.
Server-side scripting languages are programming languages which are used in the designing of
the back-end of a web application. These scripting languages help in the development of the
back-end servers which includes the main operating software of the web application. The server-
side scripts help in the creation of the channels of communication which includes the
connections that are commenced between server, user, and the database of the web application. It
includes various types such as-
ASP.NET- It is a type of framework which is used by programmers to develop web applications
that are dynamic. It is written using VBScript and supports a variety of coding languages
including C++ and C#. It is easy to use hence developing web applications using this framework
make the process of scripting easy.
Python- It is a type of server-side scripting language which is used by programmers to develop
web applications. It is easy to learn a programming language and due to the presence of simple
and visible syntax. It’s easy to read and open availability makes this programming language
mostly used in numerous coding of web applications.
Ruby on Rails (ROR) - It is a type of framework which uses the Ruby scripting language to
develop dynamic web applications. In this framework, the codes can be reused so the process of
web development becomes easier. The rewriting of codes is not required in this framework.
On the other hand, Client-side scripting languages are the programming languages which are
used in the designing of the front-end of a web application. These programming languages
develop the front-end of a web application which includes the interface using which the users of
the web application will interact within the web application system. It includes various types of a
programming language such as-

JavaScript- It is a type of client-side scripting language which is mostly used in developing
dynamic web application front-ends. It uses the ECMAScript as its language and is still used in
numerous designing of web applications.
HTML- It is a type of programming language which is mostly used in developing web
applications. This language is used to define the position of an image or text in the front-end of a
web application.
CSS- It is a type of client-side programming language which is used in a web application to
define the positioning the components present in the front-end of the application. It determines
the positioning of the header file, footer file, contents, body, and all other components that define
the appearance of the front-end (Zhang, Cao and Zhang, 2017).
P1.3 – examine web security and make recommendations for security improvements.
Web security can be described as the branch of information security which deals with the
security of web applications. Since web applications are always vulnerable to security breaches
so the developers use security protocols to block such breaches from occurring in the system.
Web security includes various technologies which help in keeping the web application secure.
Some of the most used security technologies include-
White box tools- It is a type of software testing technique which is used in securing a web
application by performing various tests. It uses the source code of the web application to design
the test and test scenarios to determine the quality of the application. This method of testing is
used in performing the unit testing, integration testing and also the system testing.
Black box tools- It is a type of testing technique which stealthily performs tests within a web
application by observing its operations and interactions. It is similar to white box type testing
technique but only differs in its operating procedure. This method is used to test the internal
working of a web application in which the codes are tested to determine the application’s quality
(Henard et al., 2016)

Firewalls- It is a type of firewall for the web application which is designed to monitor the flow
of information and screen the data packets entering the web application system. It is used to
block or permit the entry of data packets in the application system.
Various risks and threats are imposed on a web application due to the amount of information
present in the system. The most common threats and risks are from attacks such as Password
breach, SQL injection, Code injection, Cross-site scripting, and many more. These
vulnerabilities, it enters into the application system, can steal, erase, or manipulate the data
present in the application database. Preventing such threats enhance the performance and
security of the web application. Various security measures can be considered to improve the
security of the web application such as by regularly updating the system. This will regularly
change and update the security aspects of the web application hence will always develop a
different layer of protection from the threats. To mitigate cross-site scripting issues, hosting of
multiple web applications on a single server should be avoided. This will ensure that other
application systems are secured when one is victimized. Other processes to mitigate threats and
attacks include backing up of the application system, implementing of SSL’s, implementing
permissions for files, and more (Mair, Treiblmaier and Lowry, 2017).
LO2 Be able to design web applications
P2.1 design a web application to meet the requirements given in the case study.
The user basically includes two types i.e. end users and application administrators. End users are
the individuals that commence business with the organization that provides services via the web
application. The design of this web page is developed using the various user requirements such
as-
 The web application supports the browsing of the web application system in various
types of browsers.
 The application also allows new user registration in the system.
 The transaction process of the application is secured using SSL’s and firewalls to ensure
no breaching.

 Purchases can be made in the web application.
 Users can add and remove products according to their choices.
 Users can increase and decrease the amount/quantity of products.
 Users can go through the entire list of items present in the web application.
 The search feature is provided to find specific desired product/products in the web
application.
 The web application can support multiple users visiting the application simultaneously.
 Users are provided with multiple payment options for their ease of transaction.
 Users are provided with discounts and offer to enhance their purchasing experience.
 The status of the order is displayed to the user on the web application.
 Users can contact the administrators when help or assistance is required for any queries,
complaints, and feedbacks.
 The application is presented with an “About us” page which defines the organization in
detail.
 The pages of the web application include the breadcrumb functionality to help users to
determine their position within the application (Balatsoukaset al., 2015).

Figure 1: Grocery store- Homepage

It is the homepage of the web application. User requirement added in this page includes the
breadcrumb functionality. It helps users to determine their position within the application to
exactly determine their location.
Figure 2: Grocery store- Shopping cart page