Ch.5b Laboratory 1

L b t
Laboratory 1
Web Architecture
by
Tony WONG
8/2/2010
Overview of Web Architecture

Web Server Machine
book.php
Web Browser <HTML>
<?php
PHP MySQL
HTML mysql_query("select name from
Interpreter
Interpreter Database
books where isbn=1234");
input Server
from Output Print ("$name");
Controller JavaScript sent to
user Interpreter ?>
(e g URL)
(e.g. display Interprets PHP Code
</HTML>
/HTML
Other
Interpreter <HTML>
Napoleon Database
Other FTP HTTP </HTML>
Clients Client Cli t
Client
HTTP Web
Server
Network Interface
Internet
Overview of Web Architecture
Hypertext Markup Language (HTML)

Hypertext Transfer Protocol (HTTP)
Dynamic
y Web Page
g
Client Side Programming (e.g. Javascript)
Server Side Programming (e.g. PHP, JavaServer Page, Active
S
Server P
Page or ASP)
Hypertext Markup Language (HTML)
MS Word is WYSWYG editor.

HTML is a Language that is used to describe the layout of web pages.
HTML file are Plain Text file.
Mark p
Markup
means that HTML describe the layout of the contents of a web page in
general way.
Browser determine HOW to display the content.
Hypertext
Document can contain hyperlinks that point to other documents or objects.
objects
The web pages written in pure HTML are basically static (static here
refer to the content of a web page).
Web Browser Architecture
Web Browser
HTML
Interpreter
input
from Output
Controller JavaScript sent to
user Interpreter
(e.g. URL) display
Other
IInterpreter
t t
Other FTP HTTP

Clients Client Cli t
Client
Network Interface
How can you get the a Web page from the

Internet?
The Web is a Client-Server application.
Based on a request/response paradigm.
The Client is the web browser.
The Server is the web server (a computer program).
The client send a request
q to the server to retrieve a web
page.
The server response by sending the requested page.
Please send me file ABC.html
www
Client
Internet
Web
Server
OK. ABC.html
How can the Client program and Web Server
Program Understand Each Other
Hypertext Transfer Protocol
A computer communication protocol is a set of rules that

specify the format and meaning of messages exchanged
between computers.
HTTP is an application
application-level
level protocol for distributed,
distributed
collaborative, hypermedia information systems.
HTTP define what messages g and their formats that can be
sent by a web client (browser). For example
GET /index.html
POST /testhttp.php
/t thtt h
Head /index.html
HTTP also define how the server should response
p after
receiving a http request.
What happen when you enter
http://isem03 hkbu edu hk/~isemuser20/Sample0101 html
http://isem03.hkbu.edu.hk/~isemuser20/Sample0101.html
Something like the following is sent to the server

Header Contents
GET /~isemuser20/Sample0101.html HTTP/1.1
Accept: */*
Accept-Language: zh-hk
Accept-Encoding: gzip, deflate
If-Modified-Since: Sun, 7 Feb 2010 23:03:28 GMT
If-None-Match:
If None Match: "22a3d-68-3c4d8a02“
22a3d 68 3c4d8a02
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1;
Trident/4.0; .NET CLR 1.1.4322; InfoPath.2)
Host: isem03.hkbu.edu.hk
Connection: Keep-Alive
* a blank line *

Header Contents
HTTP/1.1 304 Not Modified
The server will send Date: Sun,, 7 Feb 2010 19:03:28 GMT
back the data at the Server: Apache/2.2.4 (Fedora) PHP/5.3.1
right. Connection: Keep-Alive
K
Keep-Alive:
Ali timeout=15,
ti t 15 max=120
120
Header
d iinformation
f i
ETag: "22a3d-68-3c4d8a02"
Data contained in the
HTTP/1.1 200 OK
q
requested file
Date: Sun, 7 Feb 2010 23:52:02 GMT
Accept-Ranges: bytes
After receiving the g 105
Content-Length:
response, the browser Content-Type: text/html
will format the

<html>
HTML data
d t andd
<body>
display to the user.
<h2> HTTP Test </h2>
<em> This is a test of <b> http </b> transfer. </em>
</body>
</html>
Web Browser
HTML
Interpreter
input
from Output
Controller JavaScript
user sent to
Interpreter
(e.g. URL) display
Web Server
Other (HTTPD)
Interpreter
Other FTP HTTP

HTTP
Clients Client Client
Network Interface
Internet
General Format of a Request

Method Line
Header (0 or more)
**aa blank line
line**
body (for POST method only)
Methods include GET, POST, HEAD, PUT, DELETE, etc.
Header provides such information as the browser’s name,
what kind of information it can handle, the user’s email
address etc, to the server
Body provide the variables and their values submitted
through
h h a form.
f
General Format of a Response from web server

Status line
headers (0 or more)
blank line
**blank line**
body
The status line include the HTTP version used and the
status of the request
The header contain such information as the name of the
Web Server, what type of data about to be sent, etc.
The body is the content of the file being requested by the
webb client
li
HTTP Properties
Universal Resource Locator (URL) is used to indicate the

resource, i.e., files, image, etc., on which a method is to be
applied.
service://host/file
ftp://ftp.ust.hk/pub/
http://www hkbu edu hk/index html
http://www.hkbu.edu.hk/index.html
Connectionless
O
Once the single
g request
q has been satisfied,, the network connection
is dropped.
Stateless
There is no “memory” between client connections.
Dynamic Web Pages
In pure HTML web page, the content and layout did not
change.
Question: How can we write a web page that return the
Q
result of adding two numbers input by a user?
Question: How can you retrieve the book title and author
from a library database based on the call number input by
the user?
Dynamic i Webb Pages: all
ll or part off the
h HTML file
fil is
i
dynamically generated by a programming language.
Th program can be
The b run on the
th Client
Cli t or the
th Server
S
Client-Side Scripting
The program is interpreted by the

web browser.
JavaScript is an example of client-
side scripting
p g language.
g g
Number adding example
1
http://isem03.hkbu.edu.hk/~isemuser
20/S
20/Sample0102.html
l 0102 h l
1. A form web page is gotten
from the server.
2. When user enter the two
number, a function is called 2
within the same web page and the

result displayed without
interacting with the server.
Client-Side Scripting (Sample0102.html)
<html>
<head>
<script language="JavaScript">
function printname(){
var a = eval(document.myform.firstno.value);
var b = eval(document
eval(document.myform.secondno.value);
myform secondno value);
document.myform.total.value= a + b;
}
</script>
</head>
<body>
<FORM NAME="myform">
First Number: <INPUT Name="firstno" TYPE="text"> <br>
Second Number : <INPUT Name="secondno"
Name secondno TYPE
TYPE="text">
text > <br>
Total: <INPUT NAME="total" TYPE="text"> <br>
<INPUT TYPE=button value="ok" onclick="printname();">
</FORM>
</body>
</html>
Server-Side Scripting
The program is run in the server,

and html output is sent back to the
client.
Server-side scripts can be written
in any computer language available
at the server machine: PHP, Pascal,
C, Perl, Visual Basic, etc. 1
Number adding example: 2

http://isem03.hkbu.edu.hk/~isemuser20
/Sample0103.html 3
1. Client gets the input form from

the server, and user input the two
numbers.
2 The inputs are sent to the server
2.
for processing
3. The server sends the HTML
page to the client after processing.
Note: You don’t see the
programming statement of the
script in your browser.
Sample0103.html
<html>
h l
<body>
<FORM NAME="myform" Action= " Sample0104.php" Method=GET>

First Number: <INPUT Name="firstno" TYPE="text"> <br>
Second Number : <INPUT Name=
Name="secondno"
secondno TYPE=
TYPE="text">
text > <br>
<INPUT TYPE=submit>
</FORM>
</body>
</html>
Sample0104.php
<html>
<body>
The result is <br>
<?php
$sum = $_GET[
$ GET['firstno']
firstno ] + $_GET[
$ GET['secondno'];
secondno ];
$display = "The total of ".$_GET['firstno']." and ".$_GET['secondno']." is ".$sum;
pprint $display;
p y;
?>
</body>
</html>
Actual HTML Sent to Browser
<html>
y
<body>
The result is <br>
The total of 4 and 5 is 9</body>
</html>
Server-Side Scripting
Web Server Machine
Hello.php
<HTML>
<?php
PHP
print ("<B>Hello</B>");
Interpreter
?>
</HTML>
Interprets PHP Code
<HTML>
Web <B>Hello</B>
Server </HTML>
HTTP Request
http://abc.com/hello.php
Hello
Interaction with Database Server
Web Server Machine
book.php
<HTML>
<?php
? h
PHP MySQL
mysql_query("select name from
Interpreter Database
books where isbn=1234");
Server
Print ("$name");
?>
</HTML> Interprets PHP Code
<HTML>
Napoleon
p Database
Web </HTML>
Server
HTTP Request
http://abc.com/book.php
Napoleon

Ch.5b Laboratory 1

Uploaded by

Document Information

Original Description:

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

Ch.5b Laboratory 1

Uploaded by

Copyright:

Available Formats

L b t

Overview of Web Architecture

 Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML)

 MS Word is WYSWYG editor.

Other FTP HTTP

How can you get the a Web page from the

Hypertext Transfer Protocol

 A computer communication protocol is a set of rules that

 Something like the following is sent to the server

Hypertext Transfer Protocol

will format the

Other FTP HTTP

Hypertext Transfer Protocol

 General Format of a Request

 General Format of a Response from web server

 Universal Resource Locator (URL) is used to indicate the

 The program is interpreted by the

within the same web page and the

 The program is run in the server,

 Number adding example: 2

 1. Client gets the input form from

<FORM NAME="myform" Action= " Sample0104.php" Method=GET>

You might also like

Hypertext Markup Language (HTML)

MS Word is WYSWYG editor.

A computer communication protocol is a set of rules that

Something like the following is sent to the server

General Format of a Request

General Format of a Response from web server

Universal Resource Locator (URL) is used to indicate the

The program is interpreted by the

The program is run in the server,

Number adding example: 2

1. Client gets the input form from