Introduction to Web
Architecture
Chhorn Chamnap
About Me
Blog:
http://chamnapchhorn.blogspot.com/
Twitter: http://twitter.com/chamnap
Rails Developer
JavaScript Developer
Agenda
Basic Web Architecture
HTML
URI
HTTP
Web Architecture Extension
Cookie
Database-driven Website Architecture
AJAX
Web Services
XML
JSON
The World Wide Web
The World Wide Web
In 1989, Tim BernersLee had suggested a
way to let all users, but
particularly scientists,
browse each others
papers on the Internet.
He developed HTML,
URLs, and HTTP.
Basic Web Architecture
Basic Web Architecture
The web is a two-tiered architecture.
A web browser displays information
content,
and a web server that transfers
information to the client.
Web Browser
The primary purpose is
to bring information
resources to the user.
An application for
retrieving, presenting,
and traversing
information resources.
Web Server
The term web server or webserver
can mean one of two things:
A computer program that accepts HTTP
requests and return HTTP responses with
optional data content.
A computer that runs a computer program
as described above.
HTML
HyperText Markup Language
HTML
Document layout
language (not a
programming
language)
Defines structure
and appearance
of Web pages
URI
Universal Resource Identifier
URI
URLs are location dependent
It contains four distinct parts: the protocol
type, the machine name, the directory
path and the file name.
There are several kinds of URLs: file URLs,
FTP URLs, and HTTP URLs.
HTTP
HyperText Transfer Protocol
HTTP
HTTP is a request/response standard of a
client and a server.
Typically, an HTTP client initiates a
request.
Resources to be accessed by HTTP are
identified using Uniform Resource
Identifiers (URIs).
Request message
The request message consists of the
following:
Request line
Headers (Accept-Language, Accept, .)
An empty line
An optional message body
Request methods
HTTP defines eight methods (sometimes
referred to as "verbs") indicating the
desired action to be performed on the
identified resource.
HEAD
GET
POST
PUT
DELETE
TRACE
OPTIONS
CONNECT
Safe methods
HEAD, GET, OPTIONS and TRACE are
defined as safe (no side effects).
POST, PUT and DELETE are intended
for actions which may cause side
effects either on the server.
Status Codes
The first line of the HTTP response is
called the status line.
The way the user agent handles the
response primarily depends on the code
and secondarily on the response
headers.
Success: 2xx
Redirection: 3xx
Client-Side Error: 4xx
Server-Side Error: 5xx
HTTP session state
HTTP is a stateless protocol.
Hosts do not need to retain information
about users between requests.
Statelessness is a scalability property.
For example, when a host needs to
customize the content of a website for a
user. Solution:
Cookies
Sessions
Hidden variables (when the current page is a
form)
URL encoded parameters (such as /index.php?
session_id=some_unique_session_code)
Sample HTTP Request and
Response
Client request
Server response
Web Architecture
Extension
Web Architecture Extension
CGI extends the
architecture to
three-tiers by
adding a back-end
server that
provides services
to the Web server.
Traditional uses of
JavaScript
JavaScript is a scripting language
designed for creating dynamic, interactive
Web applications that link together
objects and resources on both clients and
servers.
Getting your Web page to respond or react
directly to user interaction with form elements
and hypertext links
Preprocessing data on the client before
submission to a server
Changing content and styles
Cookie
tracking cookie, browser cookie, or HTTP
cookie
Cookie
Cookie is a small piece of text stored on a
user's computer by a web browser.
A cookie consists of one or more namevalue pairs containing bits of information
such as user preferences.
A cookie can be used for:
authenticating,
session tracking, and
remembering specific information about users.
Setting A Cookie
Cookie Expiration
Cookies expire, and are therefore not sent
by the browser to the server, under any
of these conditions:
1. At the end of the user session if the cookie is
not persistent
2. An expiration date has been specified, and
has passed
3. The expiration date of the cookie is changed
to a date in the past
4. The browser deletes the cookie by user
request
Database-driven Website
Architecture
Database-driven Website
Architecture
Server-side processing
In server-side processing, the Web
server:
Receives the dynamic Web page request
Performs all of the processing necessary to
create the dynamic Web page
Sends the finished Web page to the client
for display in the clients browser
Client-side processing
Client-side processing
Some processing needs to be executed
by the browser, either to form the request
for the dynamic Web page or to create or
display the dynamic Web page.
Eg. Javascript code to validate user input
Server and Client side
processing
Server-side
processing
PHP
ASP
ASP.NET
Perl
J2EE
Python, e.g. Django
Ruby, e.g. Ruby on
Rails
ColdFusion
Client-side
processing
CSS
HTML
JavaScript
Adobe Flex
Microsoft Silverlight
AJAX
Asynchronous JavaScript and XML
Defining Ajax
Ajax isnt a technology. Its
really several technologies,
each flourishing in its own
right, coming together in
powerful new ways. Ajax
incorporates:
XHTML and CSS;
Document Object Model;
XML and XSLT;
XMLHttpRequest;
JavaScript
Jesse James Garrett, essay in
february 18, 2005
Ajax: A New Approach to Web
Applications
Drawbacks of AJAX
It breaks browser history engine (Back
button).
No bookmark.
The same origin policy.
Ajax opens up another attack vector for
malicious code that web developers
might not fully test for.
Web Services
Web Services
Web Service is a software system
designed to support machine-tomachine interaction over a network.
Web services are frequently just
Internet Application Programming
Interfaces (API) that can be accessed
over a network.
Web Services (cont.)
Web Services are platform-independent
and language-independent, since they
use standard XML languages.
Most Web Services use HTTP for
transmitting messages (such as the
service request and response).
Style of Use
RPC
SOAP
REST
XML
eXtensible Markup Language
XML
XML is a universally agreed markup metalanguage primarily used for information
exchange.
The two primary building blocks of XML are
elements and attributes.
Elements are tags and have values.
Elements are structured as a tree.
Alternatively, elements may have both
attributes as well as data
Attributes help you to give more meaning and
describe your element more efficiently and
clearly.
XML (cont.)
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<person>
<id type="integer">1111</id>
<last_name>Smith</last_name>
<first_name>John</first_name>
<address>
<city>New York</city>
<street>21 2nd Street</street>
<postal_code
type="integer">10021</postal_code>
<state>NY</state>
</address>
</person>
JSON
JavaScript Object Notation
JSON
JSON is a lightweight computer
data interchange format.
JSON is based on a subset of
the JavaScript programming
language.
It is considered to be a
language-independent data
format.
It serves as an alternative to
the use of the XML format.
Douglas Crockford is a senior
JavaScript Architect at Yahoo!
He is well known for his work in
introducing JavaScript Object
Notation (JSON).
JSON (cont.)
{
"firstName": "John",
"lastName": "Smith",
"address": {
"street": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers": [
"212 555-1234",
"646 555-4567"
]
References
http://gdp.globus.org/gt4-tutorial/multiplehtml/ch01s02.html
http://www.objs.com/survey/WebArch.htm
http://en.wikipedia.org/wiki/World_Wide_Web
http://en.wikipedia.org/wiki/Web_browser
http://en.wikipedia.org/wiki/Web_services
http://en.wikipedia.org/wiki/Web_server
http://www.slideshare.net/warlock/intro-to-web-development
http://www.slideshare.net/rstein/advanced-web-development
http://www.slideshare.net/hblowers/intro-to-web-20-277488
http://www.slideshare.net/cheilmann/the-road-to-professional-web-d
evelopment
http://en.wikipedia.org/wiki/Common_Gateway_Interface
http://www.edwardsamuels.com/ILLUSTRATEDSTORY/isc5.htm
http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
http://en.wikipedia.org/wiki/HTTP_cookie
http://www.adaptivepath.com/ideas/newsletter/archives/111405/inde
x.php
Q&A
