Web Application Development: Design, Implementation and Testing

This report provides a comprehensive overview of web application development, covering key aspects from initial design to final testing. It begins by evaluating the functions and advantages of web applications, comparing different client-side and server-side scripting languages, and examining web security with recommendations for improvements. The report then details the design of a web application based on a given case study, synthesizing client-side and server-side functionalities, and applying a suitable database design. The implementation phase is thoroughly discussed, focusing on utilizing client-side and server-side scripting languages according to the prepared design, and identifying and implementing error handling and reporting mechanisms. Finally, the report delves into testing the web application using a web-enabled database management system, analyzing test results to identify discrepancies, evaluating independent feedback for potential improvements, and creating user documentation. This detailed exploration aims to provide a thorough understanding of the entire web application development process.

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 Comparison of different types of server-side and client-side scripting languages..............6
P1.3 Examine web security and make recommendations for security improvements................8
LO2. Be able to design web applications........................................................................................9
P2.1 Designs a web application to meet requirements given in the case study...........................9
P2.2 Synthesise client-side and server-side functionality in a web application........................12
P2.3 Apply a database design for the given scenario................................................................19
LO3. Be able to implement web applications................................................................................20
P3.1 Implement a web application to a prepared design using client-side and server-side
scripting languages....................................................................................................................20
P3.3 Identify and implement opportunities for error handling and reporting............................26
LO4. Be able to test web applications...........................................................................................27
P4.1 Critically review and test a web application using a web-enabled database management
system........................................................................................................................................27
P4.2 Analyse actual test results against expected results to identify discrepancies..................29
P4.3 Critically evaluates independent feedback on a developed web application and make
recommendations for improvements.........................................................................................30
P4.4 Create a user documentation for a developed web application.........................................32
Conclusions................................................................................................................................33
References......................................................................................................................................34
1

List of Figures
Figure 1: Server-side Scripting........................................................................................................6
Figure 2: Homepage........................................................................................................................9
Figure 3: Entry page......................................................................................................................10
Figure 4: Manage estates...............................................................................................................11
Figure 5: Login page......................................................................................................................13
Figure 6: Add estate page..............................................................................................................13
Figure 7: Edit estate page code......................................................................................................14
Figure 8: Index page code..............................................................................................................14
Figure 9: Index page 2...................................................................................................................15
Figure 10: Estate Details page.......................................................................................................15
Figure 11: Configuration page.......................................................................................................16
Figure 12: Function page...............................................................................................................16
Figure 13: Function 2 page............................................................................................................17
Figure 14: Function 3 page............................................................................................................17
Figure 15: Index 1 Page.................................................................................................................18
Figure 16: Index 2 Page.................................................................................................................18
Figure 17: Login page code...........................................................................................................20
Figure 18: Admin add estate code.................................................................................................21
Figure 19: Estate details code........................................................................................................21
Figure 20: Homepage....................................................................................................................22
Figure 21: Admin login page.........................................................................................................22
Figure 22: Admin home page........................................................................................................23
Figure 23: Add estate page............................................................................................................23
Figure 24: Edit estate page............................................................................................................24
Figure 25: Estate details page........................................................................................................24
Figure 26: Estate delete page.........................................................................................................25
Figure 27: Manage estate page......................................................................................................25
2

Introduction
A website is intended to provide information to its users. By visiting a specific website, a user
can gain information related to his or her concern. An e-commerce website is getting much
advantage on the internet these days. Using the e-commerce websites, the business can be
increased in a specific field and the profits are enhanced. Users can navigate through the website
and get the required product of their choice.
Hence, website development is divided into four sections. The discussion in the first part
includes the web functionalities. In the second section, the functionality and implementation and
of database are explained. Third section explains, website implementation. And in the last
section, the website test is implemented. This report can make the users understand the concept
of website designing.
3

LO1. Understand the concepts of web application development.
P1.1 Critically evaluate the functions and advantages of web applications
Web Application:
A web application refers to any client-server-computer program which is run by the client using
a web browser. Well, known web applications are instant messaging services, online auctions,
webmail etc.
A web application uses some certain website as its interface. A web application can be easily
accessed through a computer connected to the internet (SearchCloudApplications, 2012).
 Compatible with multiple platforms: Web-based applications are compatible with many
platforms, which was not really possible with traditional software. Web applications can be
run on any operating systems whether it is Linux, Windows, Mac OS etc.
 Manageable: The web applications only need to be connected on the server which allocates
nominal on the user’s workplace requirements. The clients can use the updates easily via
web.
 Greatly Deployable: due to the high rate of manageability and compatibility of cross-
platform, the employability of the web application to the user is easier. In the instances
where the deploy ability is high, the user can be simply dispatched to any address of a
website to log in and they can be provided with internet access.
 Flexibility: web applications enable users to access the internet and do their work from
anywhere. They do not need to keep sitting in their offices and be glued to the desk and chair.
They can o their work from anywhere and on any device which is internet enabled.
 High rate of usage: Web applications are easy to use, so the rate of usage is growing day by
day. People do not need to browse much and just open the app, log in and start using. So the
rate of web-based applications is growing rapidly.
 Cost reduction: Web-based applications can decrease their prices intensely because of lesser
maintenance and support. They lower the end user system requirements and the architecture
is simplified. The prices of the company are reduced. Additional savings can be made
frequently based on the company’s web application.
4

 Centralization of data: In web applications, the data are centrally stored and also acts as the
backup if any information is lost from the client’s system.
 Availability: A web application is available 24/7 and can be accessed from anywhere at any
time.
 Directly accessible: A web application is can be accessed directly to the latest information by
any employees located anywhere in the world (Magic Web Solutions, 2017)
Disadvantages of web application development:
 The malicious users keep seeking for the information present on web pages and can access it
through the web application easily.
 Web applications suffer through the problem of internet connection very often.
 Web application may not always be compatible with all the web browsers.
 Even if the application has the internet connection, it might require high internet speed,
which is not always available.
 Sometimes the web applications are unable to function according to their own functionality
and have to behave according to the browser being used (Fox, 2014).
5

P1.2 Comparison of different types of server-side and client-side scripting languages
Client-side scripting:
A code which exists in the HTML page of a client can be called as client-side scripting.
In the browser is generally attached in such a language which is compatible with it. For client-
side scripting, JavaScript is used. JavaScript can run on any of the browsers. A browser
downloads this script for a temporary period of time and can process the script without a server.
Whenever any extra information is required other than the downloaded information, a request is
sent to the server for the same.
Use of client-side scripting reduces the work of server as it is growing faster nowadays and most
of the work is done by the client itself.
Server-side scripting:
The scripting performed at the back-end of the website is called server-side-scripting.
The view of the happenings here is not allowed to the user. A path is created by the server-side
scripting to the database for the website and all its behind the work scenes by which the website
is run and organized. The responses to the server-side scripting can be customized according to
the needs of the user (Yourwebskills, 2016).
6

Figure 1: Server-side Scripting
Difference between client side and server side scripting:
1. In clients scripting the browser runs such a script which is already there on the client’s
computer, whereas in server-side scripting the request needs to be sent to the server to run a
particular script.
2. Client-side scripting can take place only when all the codes are possessed by the browser and
this is later changed according to the input provided by the user, but in server-side scripting,
the work is initiated when a request is generated by a user’s browser, after which based on
several conditions creation of dynamic pages take place.
3. For client scripting JavaScript, VB Script etc. are used whereas Server Scripting works on
PHP, ASP, Ruby etc.
4. Server-side scripting is generally good for loading of dynamic data but client-server is best
for cases such as user interaction.
5. Client-side scripting can be performed by the browser as soon as it receives the page from the
server, but a server cannot perform client-side scripting (HostBlitz, 2018).
7

P1.3 Examine web security and make recommendations for security improvements
Web security is the process of protecting the computer from internet-based attacks which are also
known as cyber-attacks. Basically, web security is trying to prevent the computer from people
who try to exploit the weakness of any software or computer for their personal gain. Web
security is generally required on a computer which is connected to the internet.
Web security provides blockage of harmful and unwanted content from arriving the sub-network.
It also provides security of data from unauthorized access. SQL injection, HTTP floods, or
overflow of buffer exploits are the techniques used by hackers to exploit the vulnerable sites and
provoke users to make some activities on those phishing sites (InformationAge, 2018).
Improvements in web securities:
 Keep changing your passwords regularly in short intervals of time in order to keep your
account secure.
 Switch from a standard HTTP to an encrypted website. This makes ensure the security of any
data put up on your website by any client as input. The hacker is then unable to access the
information on your website.
8

LO2. Be able to design web applications
P2.1 Designs a web application to meet requirements given in the case study
Web application is developed by taking the help of different mock-up pages. All these mock-ups
are designed through the assistance of Balsamiq tool. These mock-up pages are displayed
through the aid of diverse screenshots which are presented below:
(a) Homepage:
9

Figure 2: Homepage
(b) Entry page
10

Figure 3: Entry page
11

(c) Manage estates
Figure 4: Manage estates
(a)
12

P2.2 Synthesise client-side and server-side functionality in a web application
Client-side server functionality:
 Front-end development script library of the web application is provided by the client side
server.
 Web page header and footer scripts are produced.
 Script blocks that perform one time on the web page are ensured by the client-side server.
 Enables the event handler the control for submission of performed events along with the
designed form (Upwork, 2014).
 Additional element control variables that are declared for client event is provided.
Server-side scripting functionality:
 The ability of the server for execution of web pages programs are called as server-side
functionality.
 The connectivity of database is done at the server-side end. Username and password form is
created under the server-side server.
 Management of the passwords and emails, providing rating services etc. are the most popular
functionalities of the server-side server.
 The server-side server of this web application designs pages like admin login page,
homepage, admin add estate page etc.
Website design coding:
13

Figure 5: Login page
Figure 6: Add estate page
14

Figure 7: Edit estate page code
Figure 8: Index page code
15

Figure 9: Index page 2
Figure 10: Estate Details page
16

Figure 11: Configuration page
Figure 12: Function page
17

Figure 13: Function 2 page
Figure 14: Function 3 page
18

Figure 15: Index 1 Page
Figure 16: Index 2 Page
19

P2.3 Apply a database design for the given scenario.
Database design defines the different parts of the overall design of the database. Basically, the
database is the logical design of the storage of data structure. The database also relates to the
overall storage of data in forms and the queries of a database management system.
Following procedures are carried out while designing a database:
 The data which has to be stored in the database should be determined.
 Determination of different data elements relationship.
 According to their relationships apply a logical structure to the data.
20

LO3. Be able to implement web applications
P3.1 Implement a web application to a prepared design using client-side and server-
side scripting languages
While designing this website some client side and server side scripting languages are used which
have been depicted below with the help of screenshots.
Figure 17: Login page code
In the above code, the scripting for login is done. Through this code, all the functions are
included which requires the process of login of the admin.
21

Figure 18: Admin add estate code
Through the above coding, an admin can add new estates to the web application. This can
only be done by the admin after he logs in. The access is denied to any other user.
Figure 19: Estate details code
Through the above code, the details of the present estates will be listed to the admin and
he can access the required information of any particular estate.
22

Implementation Screenshots:
Figure 20: Homepage
Figure 21: Admin login page
23

Figure 22: Admin home page
Figure 23: Add estate page
24

Figure 24: Edit estate page
Figure 25: Estate details page
25

Figure 26: Estate delete page
Figure 27: Manage estate page
26

P3.3 Identify and implement opportunities for error handling and reporting.
In this web app, different functionalities have been incorporated to meet the requirements. Error
handling technique has been used to check the proper functioning of the application. With the
help of error detection, proper anticipation and solutions for the errors can be found easily. These
are the tests which prevent the application from shutting down if a particular error arises. These
errors are usually present in the syntax or the logic of the code. These errors are shown as below:
# Error handling test Result
1. If the user tries to enter login details other
than that of the admin.
An error message occurs which tells
that username or password is
incorrect.
2. If the user misses the details of a required
field.
An error message appears which
shows the missing details with a red
star mark.
3. If the user writes the name of the city but
writes incorrect postcode.
An error message pops up showing the
incorrect code.
These cases are depicted below via screenshots:
27

LO4. Be able to test web applications
P4.1 Critically review and test a web application using a web-enabled database
management system
To cope up with the requirements of the user many functionalities have been incorporated into
the website. All these functionalities have been tested and shown here in the table. The table
follows:
# Functionality Result
1. Different categories on the homepage There are different categories like About
Us, Recent Articles, Email, Resources and
links through which the user can navigate
from page to other easily.
2. Details of an estate A user can navigate and find the details of
a particular estate he is interested in.
3. Admin login and access Only admin can login to the website and
make necessary changes, the users can
only navigate to find required information
stored on the website.
4. Email to the customer Through this functionality, a customer can
ask for more details of a particular estate
on his email id. And can also find the
email id details of the website owner.
5. Add new estate The user can add a new estate and submit
to the website for the purpose of sale or
rent.
6. Delete an estate IF an old estate is sold or is no more
available for sale purpose, the user or
admin can delete the same from the
website.
28

Testing of the above website is done by cross-browser check testing. This test assures that the
website can be used on different browsers easily. The screenshots of the same have been
provided below:
29

P4.2 Analyse actual test results against expected results to identify discrepancies
Discrepancies are disclosed after testing. All of the following tests are performed whenever a
website is created. All the tests are represented in the tables which are shown below:
Homepage:
# Test Expected Result Actual result Pass/fail
1. Navigation bar When the user clicks
on any of the tabs on
the homepage, he
should be navigated
to the desired page.
The desired page opens
successfully.
Pass
2. Social media
integration
When the user clicks
on any social page, it
should open.
Social media page
opens successfully.
pass
30

P4.3 Critically evaluates independent feedback on a developed web application and
make recommendations for improvements
The website is evaluated with the help of SUS. This enables the feedback of multiple users to be
analyzed easily. The SUS is given below:
User 1 feedback:
# Questions 1 2 3 4 5 Position on the
scale
1. How frequently are you
going to use the website?
 3
2. Is the website very
complex to use?
 2
3. Navigation in the website  5
4. Are the functions well
integrated into the
website?
 4
5. Did you need to use
assistance while using the
website?
 1
User 2 feedback:
# Questions 1 2 3 4 5 Position on
the scale
1. How frequently are you
going to use the website?
 4
2. Is the website very
complex to use?
 2
3. Navigation in the website  5
31

4. Are the functions well
integrated into the
website?
 4
5. Did you need to use
assistance while using the
website?
 1
User 3 Feedback:
# Questions 1 2 3 4 5 Position on the
scale
1. How frequently are you
going to use the website?
 3
2. Is the website very
complex to use?
 1
3. Navigation in the website  5
4. Are the functions well
integrated into the
website?
 4
5. Did you need to use
assistance while using the
website?
 1
Area of Improvements:
 Functionality for chat assistance can be included on the website, which will enable users to
get their queries solved in less time.
 List of cities for which the property is available should be given on one side of the website.
 Filtering option should be provided according to the budget of the customers.
32

P4.4 Create a user documentation for a developed web application.
If the user finds any difficulty in using the website, he or she can go through the documentation
of the website. This will guide the user through the functionality of the website. Those
functionalities are specified in the below table:
User documentation:
# Functionality Description
1. Navigation bar The operator can easily direct the pages by clicking on the desired
page name.
2. Details of the
estate
The user can easily find out about a particular estate by clicking on a
particular estate they are interested in.
3. Add estate Since the website is an open website, anyone can upload the details
about an estate property they want to sell or give on rent.
4. Delete estate Once an estate is sold out or is no longer available for sale, its details
can be deleted from the website only by the admin.
5. Edit estate If any changes need to be made to the details of a particular estate, it
can be integrated into the website. using the edit option beside the
details of the estate.
33

Conclusions
It can be concluded that the website is implemented successfully. The tool used for this website
is HyperText Markup Language. Using this the data of the user can be stored and accessed.
The website has been tested at various stages. Each link on the website is having proper
functionality and there is no presence of any broken links on the website. This website
contributes to the benefit of the user and owner of the website. Through this website, the user can
easily buy and sell their property estates. The relationship between the owner and user is
increased with the help of this website.
34

References
 Fox, L. (2014). The Advantages and Disadvantages of Web Apps. [online]
objective It. Available at: https://www.objectiveit.com/blog/the-advantages-and-
disadvantages-of-web-apps [Accessed 16 May 2018].
 HostBlitz. (2018). Server-Side Functionality - Web Hosting Resources. [online]
Available at: https://hostblitz.com/2013/07/30/server-side-functionality-web-
hosting-resources/ [Accessed 16 May 2018].
 Information Age. (2018). What is web security. [online] Available at:
http://www.information-age.com/web-security-important-website-123470340/
[Accessed 16 May 2018].
 Magic Web Solutions. (2017). The benefits of web-based applications. [online]
Available at: https://www.magicwebsolutions.co.uk/blog/the-benefits-of-web-
based-applications.htm [Accessed 16 May 2018].
 SearchCloudApplications. (2012). What is Web app development?. [online]
Available at: https://searchcloudapplications.techtarget.com/definition/Web-app-
development [Accessed 16 May 2018].
 Upwork. (2014). Front-End Web Development: Client-Side Scripting. [online]
Available at: https://www.upwork.com/hiring/development/how-scripting-
languages-work/ [Accessed 16 May 2018].
 Yourwebskills. (2016). Client-side and server-side scripting. [online] Available at:
https://www.yourwebskills.com/clientserver.php [Accessed 16 May 2018].
35