IFS3103

Web
Application
Architecture

PABWE - PENGEMBANGAN APLIKASI BERBASIS WEB

Institut Teknologi Del
13 September 2018
 OUTLINE
1 MULTI-TIER (N-TIER)
2 Static to Dynamic
3 Web Components
4 Protocol HTTP
5 Web Architecture Extention
 Multi-T iers
1
N -T ier A rchitectures
 N - T ier A rchitectures
• N-tier architectures have the same components:

Data

Business
/ Logic

Presentation

4
 Physical vs L ogical
• N-tier architectures try to separate the components into different
tiers/layers
Layer :
Logical
Separation

Tier :
Physical
Separation

5
 1-T ier A rchitecture

All three layers are on the same machine.

6
 Detail 1-T ier A rchitecture
• All code, data and process kept on a single machine.
• Presentation, Logic, Data layers are tightly
connected.
• Scalability: Single processor means hard to increase
volume of processing
• Portability: Moving to a new machine may mean rewriting
everything
• Maintenance: Changing one layer requires changing other
layers
7
2-T ier A rchitecture

8
 Detail 2-T ier A rchitecture
• Database runs on Server
• Separated from client
• Easy to switch to a different database
• Presentation and logic layers are still tightly
connected.
• Heavy load on server
• Potential congestion on network Maintenance
• Presentation still tied to business logic

9
3-T ier A rchitecture

10
 Detail 3-T ier A rchitecture
• Each layer can potentially run on a different machine
• Presentation, logic, data layers are disconnected.
• By doing so, changes in a specific tier won’t directly
affect the other tiers.
• For example, you moved the database from a server
to another dedicated location, it won’t make a real
pain.

11
A Typical 3-Tier A rchitecture
Architecture Principles
• Client-server architecture
• Each tier (Presentation, Logic,
Data) should be independent and
should not expose dependencies
related to the implementation
• Unconnected tiers should not
communicate
• Change in platform affects only
the layer running on that particular
platform

12
 Presentation L ayer
• Provides user interface which rendered on a browser
• Handles the interaction with the user
• Sometimes called the GUI or client view or front-end
• Should not contain business logic or data access
code
• Three layers of web design: HTML (renders actual
content), CSS (Beautifies the content), Javascript
(Add effects, interaction, alter content)
13
 Lo gic Layer
• The set of rules for processing information
• Can accommodate many users
• Sometimes called middleware/back-end
• Should not contain presentation or data access code

14
 Data L ayer
• The physical storage layer for data persistence
• Manages access to DB or file system
• Sometimes called back-end
• Should not contain presentation or business logic
code

15
 Summary T he 3-T ier for Web A pplication
Presentation Layer
• Static or dynamically generated content rendered by the browser (front-
end)
Logic Layer
• A dynamic content processing and generation level application server,
e.g., PHP, Java EE, ASP.NET, Perl, Ruby on Rails, ColdFusion platform
(middleware)
Data Layer
• A database, comprising both data sets and the database management
system or RDBMS software that manages and provides access to the
data (back-end)
16
 T he A dvantages of
3-T ier A rchitecture
Easier to maintain
Web designer does
presentation

Software engineer Independence of

does logic Faster development
Layers
DB admin does data
model Components are
reusable

17
 Static to
2
D y namic
Static Web: how does it work ?

19
D y namic Web: how does it work ?

20
 Static to D y namic
• At the beginning, web technology was one-way, where client
couldn’t create web content, no ‘conversation’ at all, or simply
static web (also called as web 1.0).
• A dynamic content is required, to let client to contribute content,
interact with other client, and so on.
• Server-side programming language is the answer to insert
additional processing into web page to make it dynamic
(called web 2.0).

21
3 Web Components
C lients, Internet and Servers
 Web Client
• Many applications are running concurrently over the Web, such
as web browsing/surfing, e-mail, file transfer, audio & video
streaming, and so on.
• In order for proper communication to take place between the
client and the server, these applications must agree on a
specific application-level protocol such as HTTP, FTP, SMTP,
POP, and etc.
• It is controlled by a user to operate the Web application. The
client’s functionality can be expanded by installing plug-ins,
add-ons and applets.
 Internet & WWW
• Internet Service Provider otherwise known as an ISP it's the
company in which you use to connect your computers to the
internet without it you cannot connect to the internet.
• Is World Wide Web(WWW) similar with the internet? They are
very similar in the way that they are both interchangeable but
the internet is an assortment of pages filled with content of the
network.
• The World Wide Web is what allows the internet to exist; the
World Wide Web involves the existent of the pages, web server
and allows the computers to connect together.
 Web Server
• A Web server is a software that supports various
Web protocols like HTTP, and HTTPS, etc., to
process client requests.
• Example:
• Open source Apache Web Server
• IIS Web Server
• Tomcat Server
4
Protocol HTTP
 H yperT ext T ransfer Protocol
• HTTP (Hypertext Transfer Protocol) is perhaps the most popular
application protocol used in the Internet (or The WEB).
• An HTTP client sends a request message to an HTTP server.
The server, in turn, returns a response message.
• In other words, HTTP is a pull protocol, the client pulls
information from the server (instead of server pushes
information down to the client).
• HTTP is a stateless protocol which means the current request
does not know what has been done in the previous requests.

28
A n A symmetric C lient-Server Protocol

29
 H yperT ext T ransfer Protocol
•HTTP permits negotiating of data type and representation, so as to
allow systems to be built independently of the data being
transferred.
•Quoting from the RFC2616: "The Hypertext Transfer Protocol
(HTTP) is an application-level protocol for distributed,
collaborative, hypermedia information systems.
•It is a generic, stateless, protocol which can be used for many
tasks beyond its use for hypertext, such as name servers and
distributed object management systems, through extension of its
request methods, error codes and headers."
30
T he Process When U ser R equest A Web

31
 URI
• A URI (Uniform Resource Identifier) is a compact sequence of characters
that identifies an abstract or physical resource.
• The generic form of any URI is scheme:[//
[user:password@]host[:port]][/]path[?query][#fragment]
• URI is best used when you’re referring to a resource just by its name or
some other fragment.
• Examples of resources include electronic documents, elevator door
sensors, XML namespaces, web pages and ID microchips for pets.

32
 URL
• A URL (Uniform Resource Locator) is used to uniquely identify a resource
over the web. URL has the following syntax:
protocol://hostname:port/path-and-file-name
• There are 4 parts in a URL:
• Protocol: The application-level protocol used by the client and server,
e.g., HTTP, FTP, and telnet.
• Hostname: The DNS domain name (e.g., www.nowhere123.com) or IP
address (e.g., 192.128.1.2) of the server.
• Port: The TCP port number that the server is listening for incoming
requests from the clients.
• Path-and-file-name: The name and location of the requested resource,
under the server document base directory.
33
U R I vs U R L

Name Location

34
 The U R L http://www.nowhere123.com

• When this request message reaches the server, the server can take either
one of these actions:
• The server interprets the request received, maps the request into a file under the
server's document directory, and returns the file requested to the client.
• The server interprets the request received, maps the request into a program kept
in the server, executes the program, and returns the output of the program to
the client.
• The request cannot be satisfied, the server returns an error message.
35
 The H T T P Response Message

• The browser receives the response message, interprets the message and
displays the contents of the message on the browser's window according to
the media type of the response (as in the Content-Type response header).
• Common media type include "text/plain", "text/html", "image/gif", "image/
jpeg", "audio/mpeg", "video/mpeg", "application/msword", and "application/
pdf".
36
 H T T P Server: Idle State
• In its idling state, an HTTP server does nothing but
listening to the IP address(es) and port(s) specified in the
configuration for incoming request.
• When a request arrives, the server analyzes the
message header, applies rules specified in the
configuration, and takes the appropriate action.
• The webmaster's main control over the action of web
server is via the configuration, which will be dealt with in
greater details in the later sections.
37
ISO O SI 7-L ayer N etwork - H T T P

In brief, to communicate over TCP/IP, you need to know

(a) IP address or hostname, (b) Port number.
38
 Explain T his Illustration

39
 H T T P over T C P/IP
• HTTP is a client-server application-level protocol. It typically runs over a
TCP/IP connection(HTTP needs not run on TCP/IP. It only presumes a
reliable transport)
• TCP/IP (Transmission Control Protocol/Internet Protocol) is a set of
transport and network-layer protocols for machines to communicate
with each other over the network.
• IP (Internet Protocol) is a network-layer protocol, deals with network
addressing and routing. In an IP network, each machine is assigned an
unique IP address (e.g., 165.1.2.3).
• Since memorizing number is difficult for most of the people, an english-like
domain name, such as www.nowhere123.com is used instead.
• The DNS (Domain Name Service) translates the domain name into the
IP address (via distributed lookup tables).
40
 H T T P R equest Messages

The Format of an HTTP A Sample HTTP

Request Message. Request Message

41
 R equest L ine
• The first line of the header is called the request line,
followed by optional request headers.
• The request line has the following syntax:
request-method-name request-URI HTTP-version
✦ request-method-name: HTTP protocol defines a set of request methods,
e.g., GET, POST, HEAD, and OPTIONS. The client can use one of these
methods to send a request to the server.
✦ request-URI: specifies the resource requested.
✦ HTTP-version: Two versions are currently in use: HTTP/1.0 and HTTP/1.1.

• Examples of request line are: GET /test.html HTTP/1.1

42
 R equest H eaders
• The request headers are in the form of name:value
pairs. Multiple values, separated by commas, can be
specified.
request-header-name: request-header-value1, request-
header-value2, ...
• Examples of request headers are:
• Host: www.xyz.com
• Connection: Keep-Alive
• Accept: image/gif, image/jpeg, */*
• Accept-Language: us-en, fr, cn
43
 H T T P Response Messages

The Format of an HTTP A Sample HTTP

Response Message. Response Message

44
 Status Line
• The first line is called the status line, followed by optional
response header(s).
• The status line has the following syntax:
HTTP-version status-code reason-phase
✦ HTTP-version: The HTTP version used in this session. Either HTTP/1.0
and HTTP/1.1.
✦ status-code: a 3-digit number generated by the server to reflect the
outcome of the request.
✦ reason-phrase: gives a short explanation to the status code.
✦ Common status code and reason phrase are "200 OK", "404 Not Found",
"403 Forbidden", "500 Internal Server Error".
• Examples of request line are: HTTP/1.1 403 Forbidden
45
 Response Headers
• The response headers are in the form name:value pairs:
response-header-name: response-header-value1, response-
header-value2, ...
• Examples of response headers are:
• Content-Type: text/html
• Content-Length: 35
• Connection: Keep-Alive
• Keep-Alive: timeout=15, max=100
• The response message body contains the resource data
requested.
46
 H T T P R equest Methods
• HTTP protocol defines a set of request methods.
• A client can use one of these request methods to send a
request message to an HTTP server.
• The methods are:

GET HEA POS PUT

D T
OPTI CON DEL TRA
47
5 Web Architecture Extension
Web A rchitecture Extension
• CGI stands for Common Gateway
Interface
• CGI is a standard protocol for interfacing
external application software with a web
server.
• CGI extends the architecture to three-tiers
by adding a back-end server that
provides services to the Web server.
• CGI programs are executable programs
that run on the web server.
• The CGI program typically returns HTML
pages that it constructs on the fly.
49
Server and C lient side processing
Server Client
Side Side

PHP HTML

ASP .NET CSS

JAVA EE JavaScript

Perl Adobe Flex

Python, e.g. Microsoft

Django Silverlight

Ruby, e.g.
Ruby on Rails

ColdFusion

50
 Reference
• Shklar, Leon, Rosen, Rich. 2009. Web application
architecture : principles, protocols, and practices.
John Wiley and Sons Ltd.

51
 L earning is a treasure that
will follow its owner
Q uote
everywhere.

C hinese Proverb
THANK YOU!