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:[email protected]: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