Web Essentials Chapter 1 Overview

Chapter 1: Web Essentials Slide 1
Slide 1
CHAPTER 1:
Web Essentials
Topics covered:-
Hypertext Transport Protocols
HTTP Request Message
HTTP Response Message
Web Clients
Web Servers
AMIT 2043 Web Systems and Technologies

1.0 World Wide Web Architecture

WWW architecture is a networked information systems
consisting of agents (programs acting on behalf of a
person, entity or process) that exchange information.

1.0.1 Web Interaction

A simple travel scenario:-
While planning a trip to Singapore, Jimmy reads “Asia
Travel Hot Spot” in a travel magazine highlight
“http://www.example.com/travelAsia”.
Jimmy enters the URI into his browser, which downloads
information.
Jimmy’s user agent displays the downloaded information.
The page may include links to other information (i.e.,
more URIs) allowing Jimmy to start the cycle again.

1.0.1 Web Interaction

• The scenario can be divided into three divisions:-
• Identification
• Representation
• Interaction
• Identification being the resources on the web identified
by the URI.
• Representation being the identified resource returned to
the client in multiple combined format such as HTML, CSS,
PNG, SVG or animations.
• Interaction being the agent / protocol used to exchange
information between server and browser. In the scenario
above, interaction being the HTTP.
1.1 HTTP
• Protocol is a set of rules for exchanging data.
• HyperText Transport Protocol (HTTP) – is a protocol used
by the web.
• HTTP supports for client requesting document from a
server and server returning the requested document to
client.
• http://scheme
• Uses port 80 by default
• Most recent (and common) version is HTTP/1.1

1.2 HTTPS
• Hypertext Transfer Protocol Secure
• https:// scheme
• Uses port 443 by default
• Combines HTTP with Secure Socket Layer/Transport Layer
Security (SSL/TLS) for encryption

1.3 HTTP is stateless

• Each request is processed independently of any other
request.
• A stateless protocol does not require the HTTP server to
retain information or status about each user for the
duration of multiple requests.
• However, some web applications implement states
or server side sessions using one or more of the following
methods:
• Hidden variables within web forms.
• HTTP cookies.
• Query string parameters, for example:-
/index.php?session_id=some_unique_session_code

1.4 Web Server and Web Client

• Web server: A program that manages web pages (and
related resources) and makes them available to client
browsers.
• Example of web server:

• Apache Tomcat
• GlassFish
• Internet Information Services

1.5 Web Server and Web Client …

• Web client: A program that interprets and displays the
content of web pages. Commonly known as browser.
• Example of web client:

• Google Chrome
• Mozilla Firefox
• Internet Explorer

1.6 Web Server and Web Client …

• A web client makes REQUEST to web server.
• A web server gives RESPONSE to web client with the
requested resources.
REQUEST
http://www.abc.com/index.html 1
3
2
HTML page returned

Client RESPONSE Server
• 1 – browser creates HTTP Request Message.
• 2 – DNS to get IP address of www.abc.com.
• 3 – Create TCP connection and send the HTTP Request Message via TCP
connection to the server.
1.7 Domain Name Server

• The Domain Name System (DNS) is
a hierarchical distributed naming system for computers,
services, or any resource connected to the Internet or
a private network.
• An analogy of Domain Name System is that it serves as
the phone book for the Internet by translating human-
friendly computer host names into IP addresses.

1.8 HTTP Request Message

• Every HTTP Request message has the basic structure as
follows:-
• Start line
• Header field(s)
• Blank line
• Message body (optional)
• Start line consists of three parts:-
• Part 1: Request Method
• Part 2: Request-URI portion of the web address
• Part 3: HTTP version
• Header field(s) contains Host, user-agent, accept, accept-
language, accept-encoding, accept-charset, etc.
1.8.1 Request Method

The primary HTTP method is GET.
POST method is used to send information collected from
a form such as order-entry form back to the server.
Method Requests server to …
GET Retrieve a resource from the server and the resource / data pass along
the queryString line.
POST Post information to the server to create or update information.
HEAD Work similar like GET, however, HEAD does not return message body.
This is to avoid communication overhead.
OPTIONS Return the Allow header fields which tells a list of HTTP methods that
may be used to access the resource specified by the Request-URI.
PUT Put information onto the server to create information only.
DELETE Remove information from the server / delete information only.
TRACE Allow client to perform testing to check what is being received at the other
end of the request chain.
1.8.2 HTTP Request Headers

• Specify additional information about the request
• Host: <domain name>
• “This is the domain name I'm referring to.” Required in
HTTP/1.1.
• User-Agent: <string>
• “This is the software I'm using to access your site.”
• Content-Type: <type>
• MIME type of the request body (used with POST/PUT)
• Many others

1.8.3 MIME Types

Multipurpose Internet Mail Extensions.
A standard used to pass a variety types of information:-
Applications (application/octet-stream)
Audio
Image (image/gif, image/jpeg)
Multipart (multiple entities – header and body)
Text (text/html)
Video

1.9 HTTP Response Message

A HTTP Response Message consists of:-
Status line
Header field(s)
Blank line
Message body (optional)
Example of status line:- HTTP/1.1 200 OK
Status Code Class:-
Digit Class Standard Use
1 Informational Provides information to client before request complete.
2 Success Request successfully processed.
3 Redirection Client needs to use different resource to fulfill request.
4 Client Error Client request not valid.
5 Server Error Error occurs during server processing.
1.9.1 Some common HTTP/1.1 Status Code

Status Code Message Meaning
200 OK Request processed normally.
307 Temporary Redirect URI for the requested resource has changed.
401 Unauthorized The resource is password protected.
403 Forbidden The resource is read-protected.
404 Not Found No resource corresponding to the given
Request-URI found at the server.
500 Internal Server Error Server software detected an internal failure.

1.9.2 Example of HTTP Response Header

1.10 Categories of Web Pages

Web pages can be categorized into 2 main categories:
Web Pages
Static Dynamic
Web Pages Web Pages

(a) Static Web Pages

Static content: Content (text, images, hyperlinks and so
on) of the web page is always the same regardless who,
when and how the web page is visited.
Web Pages
No processing power.
No dynamic response.
Static Dynamic
No functionality. Web Pages Web Pages
Technology: HTML and CSS.
AMIT 2043 Web Systems and Technologies DEMO: 1. StaticWebPage.html

How static web pages are served?

1 Author writes 3 Server locates
HTML HTML file
Server 4 HTML returned to

client
2 Client requests
web page
5 Client processes
HTML and displays
content
Client
(a) Static Web Pages …

Example:
A company background page that displays static information
about a company and will not be updated (stay unchanged) for
a long period of time.

(b) Dynamic Web Pages

Dynamic content: content of the web page is generated
dynamically at runtime. As a result, the content is NOT
always the same.
Web Pages
Has processing power.
Has dynamic response.
Static Dynamic
Has functionality. Web Pages Web Pages
AMIT 2043 Web Systems and Technologies DEMO: 2. DynamicWebPage.html

(b) Dynamic Web Pages …

Example of dynamic features:
Security login and logout feature.
Ability to access database content.
Ability to process and store form entries.
Ability to remember user preference, etc.

(b) Dynamic Web Pages …

• Example:
• An online shopping website that allows users to add or remove
items from shopping-cart, checkout the selected items and
make order and purchase online.

1.11 Web Sites vs. Web Applications

Web Sites:
Consist primarily of static web pages.
Involve no or little programming.
Mainly for information displaying purpose, with limited
functionalities.
Example:
KTAR’s homepage
Online newspapers (The Star Online, Sin Chew Online, etc)
Online articles (Engadget, Lifehacker, etc)
1.11 Web Sites vs. Web Applications

Web Applications:
Consist primarily of dynamic web pages.
Involve intensive programming.
With advanced functionalities that helps users to
complete certain tasks.
Examples:
TARUC’s College E-Learning portal
Web-based office suite (Google Docs, Office Web Apps, etc)
Web-based email (Gmail, Hotmail, etc)

1.12 Categories of Dynamic Web Pages

Dynamic web pages can be further categorized into 2
categories, depending on where the processing is
performed.
Web Pages
Static Dynamic
Web Pages Web Pages
Client-Side Server-Side
Dynamic Dynamic
Web Pages Web Pages
(a) Client-Side Dynamic Web Pages

Client-Side
Processing is performed at client-side. Dynamic
Web Pages
Technology: HTML, CSS and JavaScript (client-side

programming), Ajax (both client-side and server-side).
Client-side programming technology is less powerful.

Is used to perform simple tasks such as visual effects,
input validations, calculations (e.g. currency conversion),
etc.
Provide immediate response since is processed locally.
(a) Client-Side Dynamic Web Pages

Client-side processing is done locally, thus provides
immediate response.
1 User clicks NO TRAFFIC

button
2 Client performs
processing
3 Result displayed Client Server

on page

How client-side dynamic pages are served?

1 Author writes 3 Server locates HTML and
HTML and instructions file
instructions
4 HTML and instructions are

Server returned to client
5 Client processes
instructions and
2 Client requests turns them into
web page
HTML
6 Client processes
HTML and displays
Client content
(b) Server-Side Dynamic Web Pages Server-Side

Processing is performed at server-side. Dynamic
Web Pages
Technology: PHP, ASP.NET, Ruby on Rails (server-side

programming).
Server-side programming technology is more powerful.

Is used to perform complex tasks such as form
processing, security (login and logout), database access,
etc.
Slower response since involve roundtrip.
(b) Server-Side Dynamic Web Pages …

Server-side processing involves roundtrip (transfer of
data back and forth client and server) and can have a
slower response caused by the network delay.
2 Request
server to
1 User clicks
button process
ROUNDTRIP 3 Server
performs
5 Result processing
displayed
on page Client 4 Response to Server
client with
result

How server-side dynamic pages are served?

3 Server locates
instructions file
1 Author writes
instructions
4 Server processes
instructions to create
HTML
Server 5 HTML returned

to client
2 Client requests
web page
6 Client processes
HTML and displays
content
Client
The complete picture:

Static content.
No processing power. Web Pages
HTML & CSS.
Static Dynamic Dynamic content.

Web Pages Web Pages Processing power.
Client-Side Server-Side
Dynamic Dynamic
Web Pages Web Pages
Processing done at client-side. Processing done at server-side.

HTML, CSS & JavaScript. PHP, ASP, Ruby on Rails .
Question:
Server-side programming technology is said to be more
powerful than client-side programming technology. Thus,
can we totally eliminate client-side programming
technology?
NO. In real life development, server-side programming

technology and client-side programming technology are
working side by side to provide powerful and interactive
web applications.
Interactive = Response fast to user actions.

Question:
Server-side programming technology is said to be more
powerful than client-side programming technology. Thus,
can we totally eliminate client-side programming
technology?
NO. In real life development, server-side programming

technology and client-side programming technology are
working side by side to provide powerful and interactive
web applications.
Interactive = Response fast to user actions.

Summary
This chapter served as a basis for web developer to
understand how web client and web server
communicates with each other via HTTP.
It also introduces types of technologies available in
building interactive web client and server-side
programming languages used to build rich internet
Application (RIA) that talks to database for information
retrieval and updates.
In particular, this subject will cover jQuery, Ajax, HTML5
for client-side development while PHP and MySQL for
building dynamic and data-driven web application.
End of CHAPTER 1
To learn programming, your must try to write the programs yourself!

Web Essentials Chapter 1 Overview

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Essentials Chapter 1 Overview

Uploaded by

Copyright:

Available Formats

Chapter 1: Web Essentials Slide 1

AMIT 2043 Web Systems and Technologies

1.0 World Wide Web Architecture

AMIT 2043 Web Systems and Technologies

1.0.1 Web Interaction

AMIT 2043 Web Systems and Technologies

1.0.1 Web Interaction

AMIT 2043 Web Systems and Technologies

AMIT 2043 Web Systems and Technologies

1.3 HTTP is stateless

AMIT 2043 Web Systems and Technologies

1.4 Web Server and Web Client

• Example of web server:

AMIT 2043 Web Systems and Technologies

1.5 Web Server and Web Client …

• Example of web client:

AMIT 2043 Web Systems and Technologies

1.6 Web Server and Web Client …

HTML page returned

1.7 Domain Name Server

AMIT 2043 Web Systems and Technologies

1.8 HTTP Request Message

1.8.1 Request Method

1.8.2 HTTP Request Headers

AMIT 2043 Web Systems and Technologies

1.8.3 MIME Types

AMIT 2043 Web Systems and Technologies

1.9 HTTP Response Message

1.9.1 Some common HTTP/1.1 Status Code

AMIT 2043 Web Systems and Technologies

1.9.2 Example of HTTP Response Header

AMIT 2043 Web Systems and Technologies

1.10 Categories of Web Pages

AMIT 2043 Web Systems and Technologies

(a) Static Web Pages

Technology: HTML and CSS.

AMIT 2043 Web Systems and Technologies DEMO: 1. StaticWebPage.html

How static web pages are served?

Server 4 HTML returned to

(a) Static Web Pages …

AMIT 2043 Web Systems and Technologies

(b) Dynamic Web Pages

AMIT 2043 Web Systems and Technologies DEMO: 2. DynamicWebPage.html

(b) Dynamic Web Pages …

AMIT 2043 Web Systems and Technologies

(b) Dynamic Web Pages …

AMIT 2043 Web Systems and Technologies

1.11 Web Sites vs. Web Applications

1.11 Web Sites vs. Web Applications

AMIT 2043 Web Systems and Technologies

1.12 Categories of Dynamic Web Pages

(a) Client-Side Dynamic Web Pages

Technology: HTML, CSS and JavaScript (client-side

Client-side programming technology is less powerful.

(a) Client-Side Dynamic Web Pages

1 User clicks NO TRAFFIC

3 Result displayed Client Server

AMIT 2043 Web Systems and Technologies

How client-side dynamic pages are served?

4 HTML and instructions are

(b) Server-Side Dynamic Web Pages Server-Side

Technology: PHP, ASP.NET, Ruby on Rails (server-side