THE STRUCTURE OF Web APPLICATIONS (WebAPPS)

Structure of Web Applications

ONI, A. A (Mrs)

1
 INTRODUCTION
Webapps are applications that are accessed with a Web browser
over a network such as the Internet or an intranet.
They are popular because of the ubiquity of the browser as a
client (thin client).
Similarly, the popularity is equally due to the possibility of
updating and maintaining the application without necessarily
distributing and installing it on every available client.
Webapps or Weblications as they are sometimes called are used
to implement Webmail, online retail sales, online auctions,
discussion boards and Weblogs among others.
Webapps generate a series of Web pages dynamically in a standard
format supported by common browsers such as the hypertext markup
language (HTML).
2 Structure of Web Applications
 BASIC ARCHITECTURE

The Web works based on the client/server Architecture. That is

both the server and the client application are responsible for some
sort of processing.

Web application is commonly structured as a 3-tier application.

The Web browser constitutes the first tier, a middleware engine
constitutes the second tier. The middleware engine uses some
dynamic Web content technology such as:
common gateway interface (CGI),
hypertext preprocessor (PHP),
java servlets or java server page (JSP),
active server pages (ASP) constitute the middle-tier and

3 Structure of Web Applications

 The database is the third tier.
The middle-tier may be multi-
tiered. That is, it can be
composed of several other
servers with designated
responsibilities, hence the over-
all architecture is said to be N-
tier.
A fundamental rule in a 3-tier
architecture is that the client has
no direct line of communication
with the data tier. That is, all
communications are routed
through the middleware tier.
Figure 1: Structure of Web Applications

4
 1. The Web Browser (Client)

The Web browser constitutes the client. It is a software application

that enables a user to display and interact with text, images and
other information that are located on the Web page or a local area
network.

Browsers can be used to access information on Web servers.

Examples of Web browsers are:
MS Internet Explorer,
Mozilla Firefox,
Apple Safari,
Google Chrome
Netscape and Opera
etc.

5 Structure of Web Applications

 Web browsers communicate with Web servers using the hypertext
transfer protocol (HTTP) to fetch Web pages and it allows Web
browsers to submit information to Web servers as well as fetch Web
pages from them.

The primary language of browsers is the Hypertext Mark-up Lnaguage

(HTML), which consists of tags that are used to describe a Web page.
Most browsers have some level of support for Javascript and extensible
markup language (XML).

6 Structure of Web Applications

 2. The Web Server (Middleware)

The Web transactions take place on the servers.

The Web server is responsible for communicating with the

browser while the database server is responsible for storing the
required information.

The Web server takes all requests from the clients, responds to
the requests and serves the appropriate Web pages back to the
clients.

There are several web servers but the most prominent of them
are the Microsofts Internet Information Services (IIS) and
Apache HTTP Server.
7 Structure of Web Applications
a. IIS
This is a major component of the Microsoft Server operating
system, particularly, a component of its active server pages
(ASPs).

IIS is recommended if both the middleware (ASP) and the

database Server (SQL Server) are Microsoft products.

The Internet information services sometimes called servers or

system, is a set of Internet based services for servers using
Microsoft Windows operation system.

IIS is the worlds second most popular Web server behind the
Apache Server.

8 Structure of Web Applications

 b. APACHE HTTP SERVER

This is most popular Web server. It is a free software/opensource

like Linux, PHP and MySQL.

Apache runs on Unix, Linux, MS Windows, Novell Netware and

some other platforms.

Apache serves over 68% of Websites and serves both static and
dynamic contents on the Web in a very reliable and secure
manner.

9 Structure of Web Applications

 List of Web Servers
Server Creator Cost ($) Open Software
Source License
1 Abyss Web Server Aprelium Free - $59 No Proprietary
2 AOL Server NaviSoft Free Yes Public License
3 Apache HTTP Server Apache Software Free Yes Apache
Foundation License
4 Apache Tomcat Apache Software Free Yes Apache
Server Foundation License
5 HTTP File Server Rejetto Free Yes GPL
6 IBM HTTP Server Apache with IBM Free No Proprietary
additions for SSL
& prformance
7 Internet Information Microsoft Bundled with No Proprietary
Services Windows and NT
family products
8 Sun Java System Web Sun Microsystem Free No Proprietary
Server, iPlanet Web
server, and Netscape
Enterprise Server
10
 The middleware is composed of languages such as:
PHP, ASP, ColdFusion, JSP and Perl.

These languages work with Web servers to interpret requests from

clients, process the requests and interact with other programs that
may be needed to fulfill the transactions and indicate to the Web
server the actual page to serve the client.

11 Structure of Web Applications

 3. Database Server

This is a programme that provides database services to other

computer programs or computers.

Database Management Systems (DBMS) provide functionality

to database servers.

They are responsible for storing, retrieving and manipulating

the data in the database or other repositories.

Some popular DBMSs include:

Oracle, Sybase,
Informix, SQL server,
Db2 and Interbase,
MySql server.

12 Structure of Web Applications

 CLIENT/SERVER COMPUTING
This is a distributed processing system that involves the storage
of data on database servers called back-ends from where
clients applications called front-ends access the data needed
for their operations.

The client/server technology evolved as a result of downsizing

of mainframe applications and upsizing of microcomputer
applications.

Transaction processing may be done on both the server and the

client, hence the term, distributed processing.

13 Structure of Web Applications

 There is separation of functionality in client/server technology.
The client (frontend) does data presentation and or processing,
while the server (back-end) does storage, security and major data
processing.

The client/server inter-relationship is given in terms of layers and

tiers.

14 Structure of Web Applications

 1. LAYERS
Layering describes the division of labour with the application
codes resident on a single machine.

Layers involve code modules placed in different folders or

directories on the client/server.

The client-side code can be structured into 0-3 layer(s) of

application code, while the server-side code can be structured
into 1-3 layers of application code. It fosters code re-usability,
security and convenience. It is a good software design.

15 Structure of Web Applications

 The client-side can be categorized
into:

Thin Client No Application Code

Possibly:
That is, a client with a zero code
layer that has no custom Web Browser
application code running on it.
WAP Browser
The server holds all the custom
application codes.

To Network and Back-end

Thin Client Architecture

16 Structure of Web Applications

 Fat Client
This is a Client with 1 to 3
application code running on it.
The three layers are:
Presentation (Forms)
Layer 1:
Business
Presentation Layer The layer Data Access
that interacts closely with the
user. (Code Intermingled)
Layer 2: DB
Business layer The layer that
handles the business logic of
the code.
Layer 3:
To Network and Back-end
Data access Layer The layer
that handles communication Fat Client (Layer 1)
with database or data source.

17 Structure of Web Applications

 Presentation (Forms) Presentation (Forms)
Business

(Code Intermingled)
Business

Data Access
Data Access DB

DB

To Network and Back-end To Network and Back-end

Fat Client (Layer 2) Fat Client (Layer 3)

18 Structure of Web Applications

 2. TIERS
The Tiers describe the distribution of application code on
multiple machines. The code modules are placed on different
machines in a distributed server environment.
In a layered architecture, the various modules are resident on
one single machine. That is, the layers are simply different
folders of applications on one single computer.
However, in a tiered architecture, the codes are separated into
three tiers (modules) namely:
Tier 1 - Presentation tier (PT), it interacts closely with the
user.
Tier 2 - Application tier (AT), it holds the business logic and
the data access logic.
Tier 3 - Database tier (DT), houses database or data source.

19 Structure of Web Applications

 Each tier may be composed of several servers, e.g. in a large-scale Web
application environment, the architecture could be composed of :.
Large number of inexpensive servers (PT)
Small number of application servers (AT)
Few (2) number of clustered db servers (DT)

The architecture can be scaled horizontally or vertically. The horizontal

scaling or scaling out involves the ability to add more servers. Vertical
scaling or scaling up involves the ability to add more powerful servers.

20 Structure of Web Applications

 In large scale distributed Web applications, tiers are bounded by
firewalls. One before (in front) presentation tier, another firewall
before (in front) application tier.

That is, the presentation is sandwiched between firewalls, generally

termed demilitarized zone (DMZ).

Thus, the application and database tiers are shielded behind the second
firewall termed the Internet zone (IZ).

Tiering fosters security and enables larger establishments to shield

their internal systems from attacks. Without tiering, it is difficult
securing internal systems.

21 Structure of Web Applications

 CLIENT
This include virtually all devices such as: cell phones, research in
motion (RIM) devices, PDAs, Tablet PCs, notebooks and PCs

a. Thin Client
No application code, but relies on the server
Uses Web and WAP browsers to display
Web (HTML)
WAP (WML)
It is easier to maintain and support since no application code or data is
in them.
It must be in constant communication with the server.

22 Structure of Web Applications

 b. Fat Clients

It has 1-3 layers of application code

It can operate for some time independent of the server

It is useful in a situation where communication between client and server

is not guaranteed

It can store information in local database before sending to the server

Client can work independent of the server

23 Structure of Web Applications

 1. One-Tier Architecture

The three code layers exist on a single server

Presentation/Application/ DB Server

DB

Request

Response
DB
P B D

Client

P = Presentation Firewall Firewall

B = Business
D = Data Access
One-Tier Architecture
Pros Cons
i. Very convenient i. Less scalable
ii. Fast to develop and deploy ii. Hard to secure

24 Structure of Web Applications

 2. Two-Tier Architecture

The three code layers exist on two (2) servers Presentation/Application)

and DB servers.
Presentation/Application Server DB server

DB

Request

Response DB
P B D
`

Client

Two-Tier Architecture Firewall Firewall

Pros Cons
i. Convenient i. Less scalable
ii. Allow database server specialization ii. Hard to secure
iii. More expensive
25 Structure of Web Applications
 3. Three-Tier Architecture
The three code layers exist on three (3) servers (Presentation,
Application and Database server.
Presentation Application
Server Server DB server

DB

Request

Response DB
P B D
`

Client

Firewall Firewall Three-Tier Architecture

Pros Cons
i. Scalable i. Overkill
ii. Secured behind firewalls and zones ii. More difficult to develop
iii. Allows database server specialization iii. More expensive
26 Structure of Web Applications
 Web Authoring Tools
Authoring tools are software applications used to facilitate quick
development of Web applications. There are three (3) major
categories :
Types of Web Authoring Tools
1. Pure WYSIWYG (What You See Is hat You Get:
pronounced"wiz-ee-wig") editor: provides interface that
resembles a desktop publishing program. These programs are
best suited for those wanting a great looking site thats not very
hard to build. Examples are: NetObjects Fusion and Drumbeat.

27 Structure of Web Applications

 2. Pure code-based editor: provides plain text editors that makes
you work directly with raw HTML tags and set your own rules
about how to lay out and organize your code.You have total control
over you code. Examples are:HomeSite, HotDog Professional,
HTMLed Pro, WebberActive, and WebEdit.
3. Compound editor (Pure WYSIWG editors + Pure code-
based editors): With a compound editor, you can accomplish
most tasks in a WYSIWG editing mode but switch from the word
processor-style editing window to a source code view to modify the
pages underlying HTML. Macromedia Dreamweaver, Microsoft
FrontPage, QuickSite, and Visual Page, Firebug, Panic coda are
examples of compound editors.

28 Structure of Web Applications

Review Questions

1. Describe the basic structure of a Web application and explain the various
components involved.

2. What are Web servers? Explain two popular Web servers.

3. Distinguish between the following:

N-tier and 3-tier architecture
Thin-client and Fat-client architecture
Layers and Tiers architectures

4. Explain with the aid of a suitable diagram a 3-tier architecture stating the merits and
demerits of each of them.

29 Structure of Web Applications