Unit 35 Web Application Development: An E-commerce Website Case Study

Desklib provides past papers and solved assignments for students. This report details the development of an e-commerce website.

Unit35: – Web Application Development

Contents
Introduction......................................................................................................................................3
LO1 Concepts of Web Application development............................................................................4
1.1. Evaluate all the functions and advantages of web applications........................................4
1.2. Compare different types of client-side and server-side scripting languages....................6
1.3. Examine web security concerns and make recommendations for security purposes...........9
LO2 Be able to design web applications.......................................................................................10
2.1. Design a web application to meet a given requirement......................................................10
2.2. Synthesize client-side and server-side functionality in a web application......................21
2.3. Apply a database design for the given scenario..............................................................23
2.4. Evaluate alternative designs and solutions to meet the given requirement as explained in
the case study.............................................................................................................................24
3.2. Implement a web-enabled database management system to store, retrieve, and manipulate
data in a web application...........................................................................................................66
3.3. Identify and implement opportunities for error handling and reporting.............................68
LO4: Be able to Test Web Applications........................................................................................70
4.2. Analyze Actual test results against expected results to identify discrepancies...............73
4.3. Critically evaluate independent feedback on a developed web application and make
recommendations for improvements.........................................................................................74
4.4. Create user documentation for a developed website..........................................................76
Conclusion:....................................................................................................................................84
References......................................................................................................................................85
Figures
Figure 1: Process of web application...............................................................................................6
Figure 2: Process of server-side scripting languages.......................................................................8
Figure 3: Process of client-side scripting languages........................................................................9
Figure 4: Home page wireframe....................................................................................................12
Figure 5: Mobile page wireframe..................................................................................................13
Figure 6: Mobile accessories page wireframe...............................................................................14
Figure 7: Laptop page wireframe..................................................................................................15
Figure 8: Contact Us page wireframe............................................................................................16

Figure 9: Add Products Page Wireframe.......................................................................................17
Figure 10: Login Page wireframe..................................................................................................18
Figure 11: Registration page wireframe........................................................................................19
Figure 12: Cart page wireframe.....................................................................................................20
Figure 13: Cash on delivery page wireframe.................................................................................21
Figure 14: Success page wireframe...............................................................................................22
Figure 15: ER Diagram..................................................................................................................25
Figure 16: Index page....................................................................................................................30
Figure 17: Header page (1)............................................................................................................31
Figure 18: Header page (2)............................................................................................................32
Figure 19: Header page (3)............................................................................................................33
Figure 20: Footer page...................................................................................................................33
Figure 21: Index page coding 1.....................................................................................................34
Figure 22: Index page coding 2.....................................................................................................34
Figure 23: Index page coding 3.....................................................................................................35
Figure 24: Mobile page..................................................................................................................36
Figure 25: Mobile page coding 1...................................................................................................37
Figure 26: Mobile page coding 2...................................................................................................38
Figure 27: Mobile page coding 3...................................................................................................39
Figure 28: Mobile page coding 4...................................................................................................40
Figure 29: Mobile page coding 5...................................................................................................41
Figure 30: Mobile accessories page...............................................................................................42
Figure 31: Mobile Accessories coding 1.......................................................................................43
Figure 32: Mobile Accessories coding 2.......................................................................................44
Figure 33: Mobile Accessories coding 3.......................................................................................45
Figure 34: Mobile Accessories coding 4.......................................................................................46
Figure 35: Mobile Accessories coding 5.......................................................................................47
Figure 36: Laptop page..................................................................................................................48
Figure 37: Laptop page coding (1)................................................................................................49
Figure 38: Laptop page coding (2)................................................................................................50
Figure 39: Laptop page coding (3)................................................................................................51
Figure 40: Laptop page coding (4)................................................................................................52
Figure 41: Laptop page coding (5)................................................................................................53
Figure 42: Registration page..........................................................................................................54
Figure 43: Registration page coding (1)........................................................................................54
Figure 44: Registration page coding (2)........................................................................................55
Figure 45: Registration page coding (3)........................................................................................56
Figure 46: Login page....................................................................................................................56
Figure 47: Login page coding (1)..................................................................................................57
Figure 48: Login page coding 2.....................................................................................................58
Figure 49: Contact us page............................................................................................................59

Figure 50: Contact us page coding (1)...........................................................................................59
Figure 51: Contact us page coding (2)...........................................................................................60
Figure 52: Cart page......................................................................................................................61
Figure 53: Cart Page Coding (1)....................................................................................................61
Figure 54: Figure 52: Cart Page Coding (2)..................................................................................62
Figure 55: Figure 52: Cart Page Coding (3)..................................................................................62
Figure 56: COD Page.....................................................................................................................63
Figure 57: Checkout page coding (1)............................................................................................64
Figure 58: Checkout page coding (2)............................................................................................65
Figure 59: Checkout page coding (3)............................................................................................66
Figure 60: Success for the order page............................................................................................67
Figure 61: Success page coding.....................................................................................................67
Figure 62: Table structure for Registration of consumers.............................................................68
Figure 63: Category table structure for products category............................................................68
Figure 64: Electronics table structure............................................................................................68
Figure 65: Cart table structure.......................................................................................................69
Figure 66: Order table structure.....................................................................................................69
Figure 67: Query table structure....................................................................................................69
Figure 68: Home page...................................................................................................................79
Figure 69: Mobile Page.................................................................................................................80
Figure 70: Mobile Accessories page..............................................................................................81
Figure 71: Laptop page..................................................................................................................82
Figure 72: Contact us page............................................................................................................83
Figure 73: Registration page..........................................................................................................83
Figure 74: Login Page...................................................................................................................84
Figure 75: Cart page......................................................................................................................84
Figure 76: Cash on delivery page..................................................................................................85
Figure 77: Confirmation page........................................................................................................85

Introduction
This report is created to get an understanding of different web application functionalities in both
client side and server side. Here the E-commerce Application is developed related to electronics.
It comprises of different items as Mobile phone, Mobile phone accessories, and laptops. Here ER
Diagram for the database is made. It also comprises of screenshots of the website. At end-user
documentation is given.

LO1 Concepts of Web Application development.
1.1. Evaluate all the functions and advantages of web applications.
The web application is an application or website which runs on the server. To access these
applications, web browsers are utilized. To perform a task on web browser server technology is
utilized.
Figure 1: Process of web application
(Source: maxcdn)
The above figure is explained as follows:
o Client requests for a particular web page with a web browser.
o The requests go to the web server which transforms the request to the web application
server
o Then in return, the query is performed with an underlying database.
o The result is then transformed into particular web application servers which in return
sends to the server.
o Then the result is sent to the client web browser.
The main Functions of a web application are as follows:
o Submitting Queries or instructions.
o Storing all information related to web application
o Searching all valid information through web applications.
o Retrieving information appropriate to user level.
o Managing the state of the user.

o Managing the user interaction with the website (Lunarpages, 2017).
The advantages of web applications are as follows:
o These types of application can run on many different platforms without any constraint for
OS.
o There no compatibility issues as every one run their applications on similar versions.
o There is no problem for storage as it is not stored on hard drives.
o The piracy for that application is reduced as it is on a web server.
o It reduces the additional cost for the organization.
o Less maintenance or support is needed.

1.2. Compare different types of client-side and server-side scripting languages.
Server-side scripting languages
Server-side technology is also known as back-end technology. The request here is according to a
particular query. This makes any website dynamic in nature. All scripts are run through the
server side. To make dynamic, the big hand is of CGI (Common Gateway Interface). By this
technology, there is less load as there are no plugins needed to run that particular website.
Dynamic websites are possible because of server-side technology. The processing is not required
at the client side as all processing is processed on server-side Abhishek Jaiswal. ,2018).
Figure 2: Process of server-side scripting languages
(Source: admecindia)
Different types of server-side scripting languages are as follows:
1. C#
2. PHP
3. C++
4. Ruby on rails
5. Python
6. Java
7. Pearl
8. CFML

o PHP: It stands for Hypertext Preprocessor. It is one of server-side scripting language. All the
scripts directly come from its database.
o C#: This is the server-side language used with the .net framework.
o Python: It is the most powerful language and the most secure one.
Client-side scripting language
Client-side technology enables us to run all required scripts at a web browser. The page is
dependent on client-side scripts. All scripts related to the processing is with a web browser.
Small functionalities which are needed time to time can be incorporated with client-side scripting
languages (Admec multimedia institute, 2014).
Figure 3: Process of client-side scripting languages
(Source: admecindia)
Different types of client-side scripting languages are as follows:
1. VBScript
2. Dart
3. JavaScript
4. JQuery

VBScript: It is one of the Microsoft developed client-side language. It is very beneficial for web
applications.
JavaScript: It is one of lightweight programming language.
JQuery: It comprises of JavaScript library.

1.3. Examine web security concerns and make recommendations for security
purposes.
Web security is a major aspect of web applications. The information related to consumers and
organizations should not be vulnerable to attackers.
There ae some vulnerabilities with their effective solutions These are as follows:
1. SQL Injections: By this, the database information can be corrupted through the code of
an application. To prevent this type of attacks some measures should be taken which are
as follows:
o Sanitize the code by filtering functions.
o Dynamic SQL should not be used.
o Regular updates should adhere.
o Patch all errors coming in web applications.
o To filter malicious information or data Firewall should be used. For this
ModSecurity can be utilized (Attacks and Rubens,2018).
2. XSS (Cross-side scripting): The attacker can inject code in the web application which
can be vulnerable to different users. The sessions and other appropriate information can
be attacked by injecting harmful code into that.
To prevent this type of attacks some measures should be taken which are as follows:
o The user input should be escaped.
o The input should be validated.
o Sanitize the inputs by utilizing filters (Sarah Vonnegut,2017).
3. Session management related issues: There can be various issues related to the session.
All the user information should be protected from attackers. They can also fake the entity
and can take use from their particular id’s (Bassi. ,2017).
The passwords and other vital information should be encrypted.

LO2 Be able to design web applications.
2.1. Design a web application to meet a given requirement.
Figure 4: Home page wireframe
The home page includes various sections as menu, slider, and content for about us.