Web Application Development: Argos E-commerce Website - A Case Study

This report provides a comprehensive overview of web application development, focusing on the creation of an e-commerce website for Argos. It begins by evaluating the functions and advantages of web applications, followed by an examination of web security and recommendations for improvements. The report then details the design of the web application, synthesizing client-side and server-side functionality and applying a database design suitable for the scenario. Implementation of the web application is discussed, including the use of client-side and server-side scripting languages and the implementation of a web-enabled database management system. Finally, the report covers the testing phase, reviewing and testing the web application, analyzing test results, evaluating feedback, and creating user documentation.

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.3 Examine web security and make recommendations for security improvements...........9
LO2 Be able to design web applications..................................................................................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 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.2- implement a web-enabled database management system to store, retrieve and
manipulate data in a web application...................................................................................24
P3.3 Identify and implement opportunities for error handling and reporting for the given
case study.............................................................................................................................27
LO4 Be able to test web applications.......................................................................................30
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......................................30
P4.2 Analyse actual test results against expected results to identify discrepancies.............34
P4.3 Critically evaluates independent feedback on a developed web application and make
recommendations for improvements....................................................................................35
P4.4 Creates user documentation for a developed web application in task 3......................37
Conclusion................................................................................................................................39
References................................................................................................................................40
1

List of Figures
Figure 1- Web Application.........................................................................................................4
Figure 2- Server-Side Scripting.................................................................................................6
Figure 3- Client-Side Scripting..................................................................................................7
Figure 4- Homepage Storyboard..............................................................................................11
Figure 5- About Us Storyboard................................................................................................12
Figure 6- Account Details........................................................................................................13
Figure 7- Contact Details storyboards......................................................................................14
Figure 8- Hierarchy of Client Needs........................................................................................15
Figure 9- Hierarchy of User Needs..........................................................................................15
Figure 10- Use Case Diagram..................................................................................................16
Figure 11- ER diagram.............................................................................................................17
Figure 12- Homepage...............................................................................................................20
Figure 13- About Us page........................................................................................................21
Figure 14- Contact us page......................................................................................................22
Figure 15- My account page....................................................................................................23
Figure 16- Orders Page............................................................................................................23
Figure 17- Product page database............................................................................................24
Figure 18- Argos database.......................................................................................................25
Figure 19- Contact details error handling................................................................................27
Figure 20- Empty cart error......................................................................................................28
Figure 21- No order error.........................................................................................................29
Figure 22- Chrome browser Testing........................................................................................32
Figure 23- Mozilla testing........................................................................................................33
List of Tables
Table 1- Test Result.................................................................................................................34
Table 2- About Product Page...................................................................................................35
Table 3- About Seller...............................................................................................................35
Table 4- About Website...........................................................................................................36
Table 5- About Services...........................................................................................................36
2

Introduction
E-commerce website plays an important role in developing the website. Through the e-
commerce website, user can easily buy the products from any corner of the world. Based on
this thing the Argos think to implement the website.
In this report, I have implemented the website in four different section. In the first section, I
have discussed the functionalities and advantages of the website. After that, in the second
section, I have discussed the designing of the website. implementation of the website for the
Argos is implemented in the third section. In the fourth section testing of the website is done
by me. Through this report, user can easily learn the basic concept of website design in an
easy manner.
3

LO1 Understand the concepts of web application development
P1.1 Critically evaluate the functions and advantages of web applications
Web Application is a computer program that performs task between a web browser and web
technology on the Internet.
Web Application Advantages:
 Easy to Upgrade: It is very easy to upgrade, and not depending on software platform. It
can run on different types of a computer that are having a different operating system.
 Open Source Software: In this, there are many software development tools which are
used to speed up to web development and reduce the cost.
 Maintenance: In this, the developers follow reputed companies. They check all the errors
in the web application. The developers follow well mature and well defined. In the result
the lower maintenance cost and the older web application compatible with new version of
the software.
 Performance: In this, the performance is the main thing in a web application. If it does
not perform well at the running time, then it was waste. If the web browser uses a lot of
images and data over the slow internet connection, it is very frustrating for the user who
is waiting for the image upload and constantly refreshing the page after every click.
Types of Web Application User:
 Regular User: The regular user ages between 16-60 (retired). Regular users can be Male,
Female, Teenager, and old age using this web application regularly. The regular users
browse the web application likes Amazon, Lazada, Bonanza, Wish, Ziffy, and Alibaba
etc.
 Occasional User: In this category, users browse the web application occasionally and at
sales offer, their age limit is 16-50. Occasionally users like Male, Female. The occasional
user irregularly browses the web application.
4
Figure 1- Web Application

Requirement of Web Application:
 Education and Work: The education and work web application are mostly used at this
time because the teenager mostly used the web application for education like Wikipedia,
Tech target, slide share. For Work web application, People searches job through online,
there are many web applications for work on the internet like Monster.com, Indeed, TES
and NHS Jobs and so on.
 Health and Safety: In this, there is health and safety web application over the internet,
the user can online search the health requirement things like medical, doctors and online
chats with doctors for health regarding. Like DoctoronDemand, Health Tap, and Live
Health Online.
 Accessibility: Web Accessibility means that people easily understand the things on the
Internet.
 Resizable Font: In this, the font size must be in 13-14 by this the user can easily read the
things, without any inconvenience. The developer used the different types of font size like
Heading part font size is 18 and paragraph part font size is 13.
 Support for Screen Readers: In this, the developers make the web application things for
users comfortable so that they can easily read out the thing and support on the screen.
 Adjustable Fonts: The developer uses the adjustable font in a web application for the
users by this the font not blur on the screen (Maxcdn, 2016).
Functionality: Nowadays, Internet is becoming hub of products. People can go through and
shop for products online this market is evolving day by day which needs functionalities like:
 Shopping Cart: - In this, the customers want an advanced feature in a shopping cart like
a mobile website option, Free or Competitive Shipping Options, Images with good
resolution, Description of the product, Review about the product and Product Similar to
the Display Images.
 Reserve Order: - Reserve Orders shows Payment Option, Reserve products, availability
of the Products, Orders Details, and Order Tracking.
 Manage User Profile: - In this, the user can manage their profile for such option like
product Deliverable or not, Past Orders, Credit Points, Coupons and Discount and, they
get Membership Card.
5

P1.2 Critically compare different types of server-side and client-side scripting languages
What is Server-Side Scripting?
Figure 2- Server-Side Scripting
Server-Side Scripting is a connected database to the web server. It is a technique used in web
design which involves HTML language codes which gives results on web server page. It is
used to dynamic Pages.
ASP (Active Server Pages): ASP used in a web application for easy to develop and modify.
It is a server-side scripting to run and dynamic, interactive the web application.
Advantage:
 It is easy to implement also data durability.
 It works multi-process configuration.
Disadvantage:
 If the worker process recycles all session data will be lost.
 It is not suitable for web farm scenarios
PHP (Pre-processor Hypertext Language): - PHP is most popular programming language
on server-side. It is a general-purpose scripting language that is especially suited to web
development.
Advantage:
 PHP can run on several platforms easily.
 It can host service providers for the server-side scripting language and can be easily
found.
6

Disadvantage:
 It is difficult to use in the large application.
 PHP get interpreted easily.
JSP (Java Server Pages): The web server executes It. Also, it is controlling the content of
web pages through the server.
Advantage:
 JSP is platform independent whereas ASP is not.
 JSP needs no compilation.
Disadvantage:
 Building JSP pages are time-consuming.
 The result of JSP pages is in HTML format which includes fewer features (Oxxus, 2017).
Client-Side Scripting:
Figure 3- Client-Side Scripting
It manipulates browser documents, accesses the browser, and validates user inputs. Its only
run on a local browser. The codes are used in the client-server side are JavaScript, Java
Applets, and VB Script. There are many things client server cannot do.
JavaScript: - It is an interpreted programming language. The created codes are called Script.
JavaScript makes alive the web pages.
Advantage:
 It is easy to learn.
 Also, it is fast to the user end.
Disadvantage:
7

 In this malicious code executed when complying is not allowed.
 It also gives different result in terms of Functionality (Jscripters, 2017).
VB Script: - It is mainly used for Intranet that is only used for the internet browser. It
supports rapid action development.
Advantage:
 VB interacts with the development environment.
 Executable code can be developed through this type of script.
Disadvantage:
 It is only used for windows.
 It has own limitation and wants more feature to access the requirement fulfil for web
development (Digitalrise, 2014).
jQuery: - In jQuery, the codes are less and do more. It is made to easier for javascript.
Advantage: jQuery takes fewer codes to show the same features.
Disadvantage: When it was time to run the codes javascript files run only jQuery commands
(Jscripters, 2017).
AJAX (Asynchronous Javascript and XML): - It also used for interactive the web pages
and quick interfaces. AJAX can work on HTML, asp.net, and Perl.
Advantage: It can allow easier navigation. AJAX allows easier interact with user and
websites.
Disadvantage: It has security issues because anyone can see the view source (Jscripters.com,
2017).
8

P1.3 Examine web security and make recommendations for security
improvements
Web Security: Web Security involves the protecting, detecting, and responding to attacks.
Web Security issues are Malicious Website, Spam, and phishing.
Security Requirements:
User Accounts: User wants strict security on their website account. The password should be
strong, not use the same password for every account, protect pins of credit card and debit
card.
Account Restrictions: In this, a local user can be allowed for single username and password
another side the domain user can have multiple username and password.
Terms of Use: If the credential is unprotected the hackers slip into the user accounts. If the
user uses custom-made authentication software so that there a lot of chances of hacking in the
system.
Security Attacks: There are different type of attacks that are possible on Argos website.
These are shown below:
 SQL Injection: This is a very popular method of hacking can lead to hacker’s access to
the system, corrupting the sites. It mostly happens when the user is login to the
unauthorized page.
 Dictionary Attack: It is a password attack hacking where the hacker well knew the
phrase of the password. If the user tries for password 3-4 times and the password was
wronged then the user has to wait for 2 minutes (Computerhope, 2017).
Recommendations: Certain recommendation can be placed through which the website of the
Argos can be protected. These are shown below:
 Authentication: It identifies the users, with username and passwords. There are few
techniques are smart card and biometrics are available.
 Authorization: It is the request from the user who can access their username and
password to secure system. Those resources who are appropriate to access the data into
the system.
9

 OWASP (Open Web Application Security Project): It is an open source application
security who provides the awareness about the security. It approaches security to the
technology and process and the users.
 ESAPI (Enterprise Security API): - It is security control library. It is provided by
OWASP. It is also an open source web application. It supports multiple programming like
Php, DOTNET, Java.
10

LO2 Be able to design web applications
P2.1 Design a web application to meet requirements given in the case study
Designing of the website is done by taking the help of the storyboards. Through the help of
the storyboards, the design of the website can be completed easily. Through this, a brief idea
of the components that are going to be used on the website can be understood easily.
All the storyboards are developed by taking the help of the Balsamiq tool. All these
storyboards are shown below:
Homepage:
Figure 4- Homepage Storyboard
11