159.339159.339

Client-Server ModelLECTURE

WWW, HTTP, INTERNET PROTOCOL STACK, TCP/IP, Xitami, CGI

159.339

Last time, we saw a quick tour of the different web technologies involved for a simple CGI program deployed in our own webserver.

Next, we would like to see more details on the Client-Server interaction. We shall study the details of the internet protocol stack, the network core and the HTTP protocol responsible for allowing CLIENT-SERVER communication.

We will also see how a webserver is installed and configured.

159.339Overview: Client-Server

Client

Web browser

OS

requests an Internet resource byspecifying a URL and providing input via HTTP encoded strings

HTML supports Javascript, DOM, CSS, HTML Events

Usually we want to open an HTML file from some website, but we can also open a program alternatively.

159.339Overview: Client-Server

Client

Web browser

osWeb

server

os

Server

Internet

requests an Internet resource byspecifying a URL and providing input via HTTP encoded strings

Network Core

159.339Overview: Client-Server

Client

Web browser

osWeb

server

os

Server

Internet

Server-side program works out the necessary business logic and dynamically builds an HTML response.

159.339Overview: Client-Server

Client

Web browser

Web server

Server

Internet

Server-side program sends back output asHTML using HTTP as transport mechanism

159.339Overview: Client-Server

Client

Web browser

Web server

Server

Internet

Client-side program (Internet Explorer,Firefox) displays the HTML output

• HTML text• Graphics• Streaming video/audio• XML

159.339Overview: Client-Server

Client

Web browser

Web server HTML

Server

MySQL

Operating System

PHP

Internet

My codes

Our codes might be embedded into an HTML, or vice-versa. It may generate an HTML on its own as well.

159.339

What is the HTTP protocol?

What is a protocol in the first place?

159.339

a human protocol and a computer network protocol:

Hi

Hi

2:00

time

What’s a protocol?

Got the time?

TCP connection request

TCP connection reply

<file>

Get http://www.massey.ac.nz/

159.339HTTP Protocol

159.339Client: makes a request

Client (browser)

Web browser

osWeb

server

os

Server

Internet

requests an Internet resource byspecifying a URL and providing input via HTTP encoded strings

Network Core

GET hello.php HTTP/1.1Host: www.massey.ac.nz:80

159.339

Client

Web browser

Web server

HTML

Server

MySQL

Operating System

PHP

Internet

My codes

HTTP

TCP/IP

• Webserver supports HTTP.

Server: responds

159.339HTTP and TCP/IP

Client

Web browser

Web server

HTML

Server

MySQL

Operating System

PHP

Internet

My codes

HTTP

TCP/IP

• Webserver supports HTTP.

• HTTP compliancy is implemented using TCP/IP components.

HTTP/1.1 200 OK(document body)

159.339Client-Server model

• How do two computers talk to each other?

ClientCreate a socketConnect socket to serverSend/receive data

ServerCreate a socketBind socket to addressListen for connectionsAccept a client connectionSend/receive data

159.339Internet protocols

In a network, standards are needed for data representation, signaling, authentication, error detection etc

In ARPANET, the network itself handled communication protocols using NCP (Network Control program). Highly incompatible with other networks. Now obsolete.

1983. NCP replaced by TCP/IP (Transfer Control Protocol/ Internet Protocol). Here the hosts are responsible for protocols.

A bit of history...

159.339TCP/IP networking

• Internet Protocol (IP)– Determines how a host is addressed on the

Internet– Binds a software address to a hardware address

• Transfer Control Protocol (TCP)– Determines how data is divided into packets and

delivered• But these are not enough to allow the WWW

to exist as it is today

159.339Hypertext/hypermedia

A hypertext document is a text file with control instructions to cross reference with other documents, or perform some action - “branch or perform on request” (Nelson 1970).

Hypermedia. Extends the concept of hypertext to include graphics, audio, and video.

Key concept: hypertext/media entities are linked in a web like structure

159.339Hypermedia over networks

• Early implementations (eg Apple’s Hypercard) worked fine on non-networked computers, but couldn’t be used to refer to documents distributed over a network.

• TCP/IP says nothing about the structure of data sent from one computer to another

• What is needed:– A standardized mechanism to determine how hypertext/media is

encoded and transported– A standardized mechanism for identifying resources on the Internet

159.339World Wide Web (1990s)

• Tim Burners-Lee worked out how to use hypertext over networks. Two key inventions – HTTP: Hypertext Transfer Protocol– URL: Uniform Resource Locator

• HTML (Hypertext Mark-up Language) was another important standard

• The first web page is archived at:

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html

159.339W3C

World Wide Web Consortium. Based at MIT, USA.

Consortium that produces “recommendations” for the WWW

Eg, there were some incompatible HTML versions from different vendors. W3C aims to get everyone to agree to common standards.

Standards are crucial to effective internet programming.

159.339Uniform Resource Locator

Standardized address name for resources (documents, images, …) on the WWW.

a URL has two parts:[protocol scheme] :// [target]

Eg:http://www.imdb.comftp://astro.caltech.edu

ftp://ftp.cs.cmu.edu/user/ai/areas/fuzzy/systems/anfis

159.339Hypertext Transfer Protocol

An application layer protocol in the internet protocol suite.

http is a request/response protocol between clients and servers.Determines how client requests are structuredDetermines how hypertext is sent from server to client

Clients: usually browsers

Web servers: software program that (usually) works as a daemon listening to requests from clients and serving up the web documents.

159.339Hypertext Transfer Protocol

• A “resource” could be:– An ASCII file (HTML, plain text,..)– An image file– Server-side application result (eg PHP output)– A database query result– A “service” offered by a server

159.339Identifying resources

• Use a URL (Uniform Resource Locator) – Specifies the location of a resource, together with the

means (http, ftp, …) of accessing it• A URL is actually a type of a more general URI

(Uniform Resource Identifier)• Another type of URI is a URN (Uniform

Resource Name)– Identifies a resource namespace without specifying

where it is or how it is accessed– A URN is similar to a person's name, while a URL is

like a street address

Example: The URN for "The Last Unicorn", identified by its book number

urn:isbn:0451450523

159.339Internet protocol suiteOSI (Open Systems Interconnection) model

Application layer. Used by “network aware” programs to communicate with other programs

Transport layer. Ensures data arrives at destination and provides reliability checks

Network layer. Determines how nodes in a network are defined. Handles routing of datagrams from source to destination

Data link layer. Specifies how packets are transported over the physical layer.

Physical layer. The hardware that transports the data.

Ethernet cards implement both Link and Physical Layers

159.339

applicationtransportnetwork

linkphysical

applicationtransportnetwork

linkphysical

applicationtransportnetwork

linkphysical

applicationtransportnetwork

linkphysical

networklink

physical

data

data

Layering: Physical Communication

159.339

Application layer. HTTP, SMTP, FTP, Telnet, ssh, …

Transport layer. TCP

Network layer. IP

Data link layer. Ethernet, ISDN, WiFi

Physical layer. Wire, radio, fibre optic

Examples

159.339Loading a web page

What happens when I ask a browser to load something like

?

http://www.massey.ac.nz/~nhreyes/index.html

159.339Client-server model

ClientCreate a socketConnect socket to a serverSend request as HTTP encoded stringReceive http encoded response string

ServerCreate socketBind socket to addressListen for connectionsAccept a connectionReceive string requesting a resource, eg

• request a web pageSend resource using protocol in URL

Important pointClient/server transactions take place by exchanging request and response strings

159.339Loading a web page

Client (browser)

Web ServerDaemon

URLRequest string

Response string

html source

Displayedinformation

User

159.339Sending the request

• Client makes connection to server– If port not specified, default is port 80

• Request must specify a URL– Universal Resource Location

• Structure of Request– Request method + e-mail like message

159.339

GET /~nhreyes/index.html HTTP/1.1Host: www.massey.ac.nz:80

Client request

Request command

Location of resourceUse this protocol

Resource is on this host (Internet address)

159.339The response

SERVER-SIDE:Server waits for request string and then sends back a response string

Response string format: a status line plus an e-mail like message.

The message comprises headers plus the document body

CLIENT-SIDE:The browser extracts the response body and displays it to the users

159.339

HTTP/1.1 200 OKDate: Mon, 23 May 2005 22:38:34 GMTServer: Apache/1.3.27 (Unix) (Red-Hat/Linux)Last-Modified: Wed, 08 Jan 2003 23:11:55 GMTEtag: "3f80f-1b6-3e1cb03b”Accept-Ranges: bytesContent-Length: 438Connection: closeContent-Type: text/htmlContent-Length: 32

--frontierThis is the text body of the document--frontier

Server responseStatus line

Headers

Document body

159.339MIME types

• Multipurpose Internet Mail Extensions– Specifies the file format to follow– E.g.

• text/html• image/jpg• application/pdf

• Your server-side application must specify the correct MIME type it is delivering

159.339HTTP characteristics

• Stateless Protocol– Each transaction is independent and no

“state” information is retained– Clients and server don’t remember

previous transactions• HTTP/1.1 adds a persistence of sorts

by allowing multiple exchanges in one transaction

159.339Some Request Commands

• OPTIONS– Request for communication options available for the Request-URI.

• GET– Retrieve an entity requested in the Request-URI.

• HEAD– Identical to GET but no message-body.

• POST– Provide a block of data

• PUT– Store the supplied Request-URI.

• DELETE– Delete the resource identified by the Request-URI.

159.339GET/POST

• Two very important HTTP constructs• These provide a mechanism for the client to

send data to the server via HTTP

• GET method– Data are encoded in the URL (URI)

• POST method– Data are encoded in the headers

http://www.cs.tut.fi/~jkorpela/forms/methods.html

159.339Some status-line examples

• 200 OK • 404 Not Found • 301 Moved Permanently • 302 Moved Temporarily • 303 See Other (HTTP 1.1 only) • 500 Server Error• 501 Not Implemented

159.339GET Request

• Use to request a specific URI• Additional Parameters specified via URL

– http://server/file?variable=val&variable2=val– Most servers have a limit on the size of a url that can be processed

http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3

159.339POST Request

POST /path/script.cgi HTTP/1.0From:frog@jmarshall.comUser-Agent:HTTPTool/1.0Content-Type: application/x-www-form-urlencodedContent-Length:32home=Cosby&favorite+flavor=flies

http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3

159.339Summary

• Computer networking - client/server model• Concept of hypertext/hypermedia• Problems implementing hyper-text/media over networks• The WWW - key inventions: HTTP, URL, (HTML)• Client-server model in Internet programming• HTTP characteristics

159.339

Let’s see these web technologies in action.

159.339Network Core

Client

Web browser

Web server

HTML

Server

MySQL

Operating System

PHP

Internet

My codes

HTTP

TCP/IP

What’s in the network core?

159.339Trace route from Massey to MIT

Command: Tracert web.mit.edu

159.339Demonstrations

1. Installing the Xitami webserver and configuring it’s port number and PHP connection.

2. Configuring the webserver’s administrator’s password.3. Configuring the server’s port number.4. Deploying a CGI and an HTML in your own server.5. Requesting for the HTML from the server, using a web browser as a client.

These demonstrations will show you how to set up the server and connect to it using a web browser as a client. You will also see the different network tools you can use to examine the network details.

159.339Xitami Webserver• free, fast and open source professional web server, written in

ANSI C

• Server supports HTTP/1.0, FTP, CGI/1.1, SSI protocols

• Security: basic authentication per directory, FTP access rights per user and per directory

• Deployment: installs ready-to-run, portable to Windows, OS/2, Unix, OpenVMS, fully portable web sites and web applications;

• Performance: internal multithreading engine, fast even on slower systems

Documentation: http://legacy.imatix.com/html/xitami/

• Configuration: editable config files, or through a web-based administration interface (WBA)

159.339Webserver

Xgui32.exe

This is a snapshot of the webserver we are going to use, it’s called Xitami.

To install Xitami, follow the instructions at xitami.docx and Xitami_cfg.docx (downloadable from our website)

159.339Interact with your webserver using PuTTY

Using a simple tool called PuTTY, examine the HTTP protocol in action when a web client interacts with your webserver (Xitami, running in your own machine).

PuTTY is a free implementation of Telnet and SSH for Windows and Unix platforms, along with an xterm terminal emulator. It is written and maintained primarily by Simon Tatham.

Is your server running properly? What was the server’s response?

Which port number is open? netstat -anop TCP

What is the IP address of your machine? ipconfig /all

http://surf11.com/entry/176/command-to-show-open-tcp-ports-windows

159.339Server’s Configuration

Xigui32.exe

Run the server’s gui, then select the Setup button.

However, this will require authentication.

[/admin] Admin=- # By default, admin access is disabled# Admin=LinPopTea# Webmask=local # <== when 'local', remote access is not allowed

xitami.aut

Using a text editor, edit the file named xitami.aut, from your xitami folder to reflect the administrator’s password. Look for the Admin=- line, then supply your desired password.

159.339Setup

http://127.0.0.1:8080/admin

Invoke the administrator’s menu to inspect the webserver’s settings.

159.339Server: console panel

159.339Server: console panel

MESSAGES

1. Create socket2. Bind socket to address3. Listen for connections4. Accept a client connection5. Send/receive data

Inspect how the webserver is preparing itself to welcome clients. This shows how the server is using sockets for the connections.

159.339Server: running and listening

Actual result:

1. Create socket2. Bind socket to address3. Listen for connections4. Accept a client connection5. Send/receive data

Command: netstat -a

159.339

Client-Server Demo

159.339

http://it043068:8080/multiply/

CLIENT

IP Address: 130.123.249.23

SERVER

IP Address: 130.123.249.203

IT046718 IT043068

Port Address: 8080

Addresses

You can connect to your server remotely. This is an example of testing a server within a local network.

Sample web resource request:

159.339Nbstat (windows)

Displays protocol statistics and current TCP/IP connections using NBT (NetBIOS over TCP/IP).

Look, there’s another name and address associated with a computer: the NetBIOS and the MAC address.

NetBIOS an acronym for Network Basic Input/Output System. It provides services related to the session layer of the OSI model allowing applications on separate computers to communicate over a local area network. As strictly an API, NetBIOS is not a networking protocol

159.339Server’s Directory

Select multiply_post-remote.html

159.339HTML containing a form & CGI

45

159.339CGI’s response

159.339Client-Server Interaction

Client

Web browser

OS

Web server

HTML

Server

MySQL

Operating System

PHP

Internet

My codes

HTTP

TCP/IP

http://it043068:8080/multiply/

159.339

Extras (some other interesting tools)

159.339whoishttp://cqcounter.com/whois/

159.339whois

159.339References

http://www.w3.org/TR/2008/REC-CSS1-20080411/CSS

http://www.w3.org/TR/#tr_HTML

Internet’s specifications are still evolving:

159.339What’s next?

We shall be looking at all the details of prominent internet programming languages and technology but we shall study how to write HTML and CSS documents first.

Next meeting, I shall provide a good background on the nuts and bolts of the internet so that you may have knowledge of the essential protocols that will be interacting with our web server.

159.339Editor

phpDesigner Personal Edition

• a free editor for your web-development. 

• rapid fast and full-featured PHP editor and PHP IDE with built-in HTML, CSS and JavaScript editors and FTP/SFTP!

Link: http://www.mpsoftware.dk/

What editor can we use to assist us in writing PHP, Javascript, HTML, CSS files, etc.?

159.339Validating HTML

Client

Web browser

http://www.w3.org/QA/Tools/

We want to write HTML pages + CSS files that are interoperable across many platforms (OS + web browser combination)

Web server

Server

How to validate your HTML and CSS files?

159.339References

http://www.w3.org/Protocols/rfc2616/rfc2616.html

HTTP Protocol definition

Difference between GET and POST

http://www.cs.tut.fi/~jkorpela/forms/methods.html