 Blog:

http://chamnapchhorn.blogspot.com
/
 Twitter: http://twitter.com/chamnap
 Rails Developer
 JavaScript Developer
 Basic Web Architecture
 HTML
 URI
 HTTP
 Web Architecture Extension
 Cookie
 Session
 Database-driven Website Architecture
 AJAX
 Web Services
 XML
 JSON
 The web is a two-tiered architecture.
› A web browser displays information content,
› and a web server that transfers information
to the client.
 A web browser is a software application
for retrieving, presenting, and traversing
information resources on the World Wide
Web.
 The primary purpose of a web browser is
to bring information resources to the
user.
 The major web browsers are Windows
Internet Explorer, Mozilla Firefox, Apple
Safari, Google Chrome, and Opera.
 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.
 In 1989, Tim Berners-Lee
had suggested a way to
let all users, but
particularly scientists,
browse each others’
papers on the Internet.
 He developed HTML,
URLs, and HTTP.
 Document layout language (not a
programming language)
 Defines structure and appearance of
Web pages
 Many HTML documents are the result of
manual authoring or word processing
HTML converters.
 HTML files are viewed using a web
browser.
 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 is an application-level protocol for
distributed, collaborative, hypermedia
information systems.
 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).
 The request message consists of the
following:
› Request line
› Headers (Accept-Language, Accept,
….)
› An empty line
› An optional message body
METHOD /path-to-resource HTTP/version-
number
Header-Name-1: value
Header-Name-2: value
[ optional request body ]
 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
 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.
Server Message Format
HTTP/version-number status-code message
Header-Name-1: value
Header-Name-2: value
[ response body ]
 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 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
› Hiddren variables (when the current page is a
form)
› URL encoded parameters (such as /index.php?
session_id=some_unique_session_code)
 Client request

 Server response
 This basic web architecture is fast evolving
to serve a wider variety of needs beyond
static document access and browsing.
 CGI extends the architecture to three-tiers
by adding a back-end server that provides
services to the Web server.
 Common Gateway Interface
 CGI is a standard protocol for interfacing
external application software with a 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.
 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 is a small piece of text stored on a
user's computer by a web browser.
 A cookie consists of one or more name-
value pairs containing bits of information
such as user preferences.
 It is sent as an HTTP header by a web server
to a web browser and then sent back
unchanged by the browser each time it
accesses that server.
 A cookie can be used for authenticating,
session tracking (state maintenance), and
remembering specific information about
users.
 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 (i.e. when the
browser is shut down) 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
(by the server or the script) to a date in the past
4. The browser deletes the cookie by user request
 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 client’s browser
 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-side  Client-side

› PHP
processing processing
› ASP › CSS
› ASP.NET
› HTML
› Perl
›
› J2EE JavaScript
› Python, e.g. Django ›
› Ruby, e.g. Ruby on Adobe
Rails Flex
› ColdFusion
›
Microsoft
 Web Service is a software system
designed to support machine-to-
machine interaction over a network.
 Web services are frequently just Internet
Application Programming Interfaces
(API) that can be accessed over a
network.
 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
RPC

RPC stands for Remote Procedure Call. As its name

indicates, it is a mechanism to call a
procedure or a function available on a remote
computer. RPC is a much older technology than
the Web. Effectively, RPC gives developers a
mechanism for defining interfaces that can be
called over a network. These interfaces can be as
simple as a single function call or as complex
as a large API.
 RPC
What is XML-RPC ?
• XML-RPC is among the simplest and most
foolproof web service approaches that makes it
easy
• for computers to call procedures on other
computers.
• XML-RPC permits programs to make function or
procedure calls across a network.
• XML-RPC uses the HTTP protocol to pass
information from a client computer to a server
• computer.
• XML-RPC uses a small XML vocabulary to
describe the nature of requests and responses.
RPC
• XML-RPC client specifies a procedure name and
parameters in the XML request, and the server returns
either a fault or a response in the XML response.
• XML-RPC parameters are a simple list of types and
content - struts and arrays are the most complex
types available.
• XML-RPC has no notion of objects and no
mechanism for including information that uses other
XML vocabulary.
• With XML-RPC and web services, however, the Web
becomes a collection of procedural connections
where computers exchange information along tightly
bound paths.
• XML-RPC emerged in early 1998; it was published by
UserLand Software and initially implemented in their
Frontier product.
RPC
Why XML-RPC ?
• If you need to integrate multiple computing environments, but don't
need to share complex data structures directly, you will find that XML-
RPC lets you establish communications quickly and easily.
• Even if you work within a single environment, you may find that the RPC
approach makes it easy to connect programs that have different data
models or processing expectations and that it can provide easy access
to reusable logic.
• XML-RPC is an excellent tool for establishing a wide variety of
connections between computers.
• XML-RPC offers integrators an opportunity to use a standard vocabulary
and approach for exchanging information.
• XML-RPC's most obvious field of application is connecting different kinds
of environments, allowing Java to talk with Perl, Python, ASP, and so on.
XML-RPC consists of three relatively small parts:
• XML-RPC data model : A set of types for use in passing parameters,
return values, and faults(error messages).
• XML-RPC request structures : An HTTP POST request containing method
and parameter information.
• XML-RPC response structures : An HTTP response that contains return
values or fault
Information.
 SOAP
• SOAP is an acronym for Simple Object Access Protocol. It
is an XML-based messaging protocol for exchanging
information among computers. SOAP is an application of
the XML specification.
• Points to Note:
• SOAP is a communication protocol designed to
communicate via Internet.
• SOAP can extend HTTP for XML messaging.
• SOAP provides data transport for Web services.
• SOAP can exchange complete documents or call a
remote procedure.
• SOAP can be used for broadcasting a message.
• SOAP is platform- and language-independent.
• SOAP is the XML way of defining what information is sent
and how.
• SOAP enables client applications to easily
connect to remote services and invoke remote
methods.
• Although SOAP can be used in a variety of
messaging systems and can be delivered via a
variety of transport protocols, the initial focus of
SOAP is remote procedure calls transported via
HTTP.
• Other frameworks including CORBA, DCOM,
and Java RMI provide similar functionality to
SOAP, but SOAP messages are written entirely in
XML and are therefore uniquely platform- and
language-independent.
REST
• REST stands for Representational State Transfer. REST is web
standards based architecture and uses HTTP Protocol. It revolves
around resource where every component is a resource and a
resource is accessed by a common interface using HTTP standard
methods. REST was first introduced by Roy Fielding in 2000.
• In REST architecture, a REST Server simply provides access to
resources and REST client accesses and modifies the resources.
Here each resource is identified by URIs/ global IDs.
• REST uses various representation to represent a resource like text,
JSON, XML. JSON is the most popular one.
HTTP methods:
Following four HTTP methods are commonly used in REST based
architecture.
GET − Provides a read only access to a resource.
POST − Used to create a new resource.
DELETE − Used to remove a resource.
PUT − Used to update a existing resource or create a new resource.
Introduction to Restful web services.
REST
Introduction to RESTFul web services
• A web service is a collection of open protocols and standards
used for exchanging data between applications or systems.
Software applications written in various programming languages
and running on various platforms can use web services to
exchange data over computer networks like the Internet in a
manner similar to inter-process communication on a
single computer. This interoperability (e.g., between Java and
Python, or Windows and Linux applications) is due to the use of
open standards.
• Web services based on REST Architecture are known as RESTful
web services. These webservices uses HTTP methods to implement
the concept of REST architecture. A RESTful web service usually
defines a URI, Uniform Resource Identifier a service, provides
resource representation such as JSON and set of HTTP Methods.
Active Browser Web pages:
• An active web page is a web page where the browser performs
the logic instead of web servers. For example, when you have got
a page where you’re showing share prices, and you update result
of that web page without reloading or refreshing the web page.
• It can be possible by using AJAX with JavaScript. In contrast to
PHP your browser is able to execute JavaScript, so it is happening
without reloading the webpage.
• By using Active Web Page everything is happening inside the
webpage and there is no need to refresh or reload the webpage.
• For example, active users on FB are updated automatically using
active Browser web page techniques.
Languages used:
• AJAX
• JavaScript
 Ajax isn’t a technology. It’s
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
 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.
 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 Douglas Crockford is a senior
JavaScript Architect at Yahoo!
the use of the XML format. He is well known for his work in
introducing JavaScript Object
Notation (JSON).
{
"firstName": "John",
"lastName": "Smith",
"address": {
"street": "21
2nd Street",
"city": "New
York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers":
[ "212 555-
1234",
"646 555-4567"
]
}
 XML is a universally agreed markup meta-
language 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 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>
 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-dev
 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/index.