www.covenantuniversity.edu.

ng

Raising a new Generation of Leaders

CSC 310
Week Two
STRUCTURE OF WEB APPLICATION
 LEARNING OBJECTIVES
• Understand the basic concept of web application and
their architectures.
• Explore types of middleware, client/server computing,
layers and tiers of web applications as well as web
servers overview.

2
 INTRODUCTION
• Webapps are applications that are accessed with a Web browser over a network such as the
Internet or 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).

Structure of Web Applications 3

3
 BASIC
ARCHITECTURE
• The web application is 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:
The method or convention for passing
‒ Common Gateway Interface (CGI), data back and forth between the server
and the application is called the common
‒ Hypertext Preprocessor (PHP), gateway interface (CGI).
‒ Java servlets or Java Server Sage (JSP),
‒ Active Server Pages (ASP) constitute
the middle-tier and
Structure of Web Applications 4
4
A MORE GRAPHICAL VIEW

5
 • 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 2: Structure of Web Applications

6
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.
Structure of Web Applications 7
7
 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).

Structure of Web Applications 8

8
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 Microsoft’s Internet Information Services (IIS) and Apache
HTTP Server.

Structure of Web Applications 9

9
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 world’s second most popular Web server behind the Apache
Server.

Structure of Web Applications 10

10
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.

Structure of Web Applications 11

11
 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 License
Foundation
4 Apache Tomcat Apache Software Free Yes Apache License
Server Foundation
5 HTTP File Server Rejetto Free Yes GPL
6 IBM HTTP Server Apache with IBM Free No Proprietary
additions for SSL &
performance
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
12
• 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.

Structure of Web Applications 13

3. Database Server

• This is a program 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.

Structure of Web Applications 14

14
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.

Structure of Web Applications 15

15
• There is separation of functionality in client/server technology.
 The client (front–end) 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.

Structure of Web Applications 16

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

• Layers involve code/program modules placed in different folders or

directories on a single.
Presentation (Forms)

Business

Data Access DB

To Network and Back-end

Structure of Web Applications 17
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.

Structure of Web Applications 18

18
• 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.

Structure of Web Applications 19

19
• 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.

Structure of Web Applications 20

20
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.
b. Fat Clients
It can operate for some time independent of the server

Structure of Web Applications 21

21
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
Structure of Web Applications 22
 Web Authoring Tools
• Authoring tools are software applications used to facilitate quick
development of Web applications. They are packages specifically
designed to allow to create web pages and web sites without having to
personally write the programs. There are three (3) major categories :
• Types of Web Authoring Tools
1. Pure WYSIWYG (What You See Is What 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 that’s
not very hard to build. Examples are: Dreamweaver,
Frontpage, NetObjects Fusion and Drumbeat.
Structure of Web Applications 23
23
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 page’s underlying HTML. Macromedia Dreamweaver, Microsoft
FrontPage, QuickSite, and Visual Page, Firebug, Panic coda are examples of
compound editors.
4. Wizards and Site Managers: enable you to create, view, organize and update links
quickly. E.g. WordPress, Jomla. Opencat

Structure of Web Applications 24

24
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.

Structure of Web Applications 25

25
END

26