Upload
wfscmgbh
View
222
Download
0
Embed Size (px)
Citation preview
8/9/2019 Ch.5b Laboratory 1
1/12
a ora ory
Web Architecture
by
Tony WONG
8/2/2010
Overview of Web Architecture
book.php
Web Server Machine
Web Browser
PHP
Interpreter
MySQL
Database
ServerController
HTMLInterpreter
Output
sent to
dis la
input
fromuser
JavaScript
Interpreter< >
Napoleon
Web
Database
Other FTP HTTP
Other
Interpreter
e.g.
HTTP
Serverens
Network Interface
en ent
Internet
8/9/2019 Ch.5b Laboratory 1
2/12
Overview of Web Architecture
Hypertext Markup Language (HTML)
Hypertext Transfer Protocol (HTTP)
Dynamic Web Page
Client Side Programming (e.g. Javascript)
Server Side Programming (e.g. PHP, JavaServer Page, Active
erver age or
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.
ar up
means that HTML describe the layout of the contents of a web page in
general way.
Browser determine HOW to display the content.
Hypertext
.
The web pages written in pure HTML are basically static (static here
refer to the content of a web page).
8/9/2019 Ch.5b Laboratory 1
3/12
Web Browser Architecture
Web Browser
Controller
HTMLInterpreter
Outputinputfrom JavaScri t
Other
displayuser(e.g. URL)
Interpreter
Other FTP HTTP
n erpre er
en s en en
Network Interface
How can you get the a Web page from the
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 re uest to the server to retrieve a web
page.
The server response by sending the requested page.Please send me file ABC.html
Internet
wwwClient
Weberver
OK. ABC.html
8/9/2019 Ch.5b Laboratory 1
4/12
How can the Client program and Web Server
Hypertext Transfer Protocol
A computer communication protocol is a set of rules thatspecify the format and meaning of messages exchangedbetween computers.
- ,collaborative, hypermedia information systems.
HTTP define what messa es and their formats that can besent by a web client (browser). For example GET /index.html
es p.p p
Head /index.html
HTTP also define how the server should res onse after
receiving a http request.
8/9/2019 Ch.5b Laboratory 1
5/12
Hypertext Transfer Protocol
What happen when you enter~. . . .
Something like the following is sent to the server ea er on en s
GET /~isemuser20/Sample0101.html HTTP/1.1
Accept: */*
- -- -
Accept-Encoding: gzip, deflate
If-Modified-Since: Sun, 7 Feb 2010 23:03:28 GMT
- - " - -
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 *
Hypertext Transfer Protocol
The server will send
Header Contents
HTTP/1.1 304 Not Modified
Date: Sun, 7 Feb 2010 19:03:28 GMT
back the data at the
right.Server: Apache/2.2.4 (Fedora) PHP/5.3.1
Connection: Keep-Alive
Header information Data contained in the
re uested file
eep- ve: meou = , max=
ETag: "22a3d-68-3c4d8a02"
HTTP/1.1 200 OK
After receiving the
Date: Sun, 7 Feb 2010 23:52:02 GMT
Accept-Ranges: bytes
Content-Length: 105
response, the browser
will format the
Content-Type: text/html
ata an
display to the user.
m
HTTP Test
This is a test of http transfer.
8/9/2019 Ch.5b Laboratory 1
6/12
Hypertext Transfer Protocol
Web Browser
Controller
HTMLInterpreter
Outputinputfrom JavaScript
Web Server(HTTPD)Other
Interpreter
display
user(e.g. URL)
Interpreter
OtherClients
FTPClient
HTTPClient
HTTP
Network Interface
Internet
Hypertext Transfer Protocol
General Format of a Request
Method Line
Header (0 or more)
** **
body (for POST method only)
Methods include GET, POST, HEAD, PUT, DELETE, etc.
Header provides such information as the browsers name,
what kind of information it can handle, the users email
address etc, to the server
Body provide the variables and their values submitted
through a orm.
8/9/2019 Ch.5b Laboratory 1
7/12
Hypertext Transfer Protocol
General Format of a Response from web server
Status line
headers (0 or more)** **
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 thewe c ent
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/
. . . .
Connectionless
Once the sin le re uest has been satisfied the network connection
is dropped.
Stateless
There is no memory between client connections.
8/9/2019 Ch.5b Laboratory 1
8/12
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 theresult 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 Web Pages: all or part of the HTML file is
dynamically generated by a programming language.
e program can e run on e en or e erver
Client-Side Scripting
The program is interpreted by the
web browser.
JavaScript is an example of client-
side scri tin lan ua e.
Number adding example
http://isem03.hkbu.edu.hk/~isemuser 1
20/Sample0102.html
1. A form web page is gotten
from the server.
2. When user enter the two
number, a function is called
within the same web page and the
2
result displayed without
interacting with the server.
8/9/2019 Ch.5b Laboratory 1
9/12
Client-Side Scripting (Sample0102.html)
function printname(){
var a = eval(document.myform.firstno.value);
. . .
document.myform.total.value= a + b;
}
First Number:
< =" " =" "> < >
Total:
Server-Side Scripting
The program is run in the server,
client.
Server-side scripts can be writtenin an com uter lan ua e available
at the server machine: PHP, Pascal,C, Perl, Visual Basic, etc.
Number adding example:
1
2
http://isem03.hkbu.edu.hk/~isemuser20/Sample0103.html 3
1. Client gets the input form fromthe server, and user input the twonumbers.
.for processing
3. The server sends the HTMLpage to the client after processing.
Note: You dont see theprogramming statement of thescript in your browser.
8/9/2019 Ch.5b Laboratory 1
10/12
Sample0103.html
First Number:
" " " "
Sample0104.php
8/9/2019 Ch.5b Laboratory 1
11/12
Actual HTML Sent to Browser
The result is
The total of 4 and 5 is 9
Server-Side Scripting
Hello.php
Web Server Machine
PHP
Interpreter
Hello
Interprets PHP Code
Server
HTTP Request
http://abc.com/hello.php
Hello
8/9/2019 Ch.5b Laboratory 1
12/12
Interaction with Database Server
book.php
Web Server Machine
< p pmysql_query("select name frombooks where isbn=1234");
Print ("$name");
PHP
Interpreter
MySQL
Database
Server
Napoleon
Interprets PHP Code
Database
Web
Server
HTTP Request
http://abc.com/book.php
Napoleon