ch.5b laboratory 1

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


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).


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


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.


5/12


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 *


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.


6/12


Web Browser

Controller

HTMLInterpreter

Outputinputfrom JavaScript

Web Server(HTTPD)Other

Interpreter

display

user(e.g. URL)

Interpreter

OtherClients

FTPClient

HTTPClient

HTTP

Network Interface

Internet


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.


7/12


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/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.


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.


10/12

Sample0103.html

First Number:

" " " "

Sample0104.php


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


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

ch.5b laboratory 1

Documents