An Example of a TCP/IP Application: the World Wide Web

1
An Example of a TCP/IP Application the World
Wide Web

• Babak Esfandiari
• (plus some material by Qusay Mahmoud, Roger
  Impey, and the textbooks)

2
The World Wide Web

• No need to introduce the Web, is there?
• A uniform resource locator URL
• A protocol HTTP
• The client a Web browser
• The server the Web server
• A markup language HTML
• Server-side dynamic generation of HTML documents
  CGI, Servlets, ASPs, JSPs
• Client-side rendering Stylesheets, JavaScript,
  Java, Flash

3
WWW Architecture
4
HTTP

• Hypertext Transport Protocol
• Not limited to hypertext though!
• Client/server
• Transaction-oriented
• Stateless

5
The Uniform Resource Locator (URL)

• Not limited to HTTP
• protocol//hostport/resource_path
• The browsers default to
• http protocol
• Port 80
• Index.html resource
• Resources can be static or dynamic

6
The HTTP Protocol

• RFCs 1945 and 2068 for versions 1.0 and 1.1
  respectively
• HTTP transactions consist in a request and a
  response
• Two types of request methods GET and POST

7
GET Request

• Simple get request (HTTP 0.9)
• GET /document.html CRLF
• Full get request
• GET /document.html HTTP/1.0 CRLF
• Full get request with headers
• GET /document.html HTTP/1.0 CRLF
• If-Modified-Since Sun 20 Oct 1996 040751
  GMTCRLF
• LF

8
Post request

• Post allows the client to include a body of data
  in a request
• POST /cgi-bin/code.cgi HTTP/1.0 CRLF
• Content-type application/octet-stream CRLF
• Content-length 2048 CRLF
• LF
• body

9
HTTP Responses

• Simple Response body
• Full Response
• HTTP/1.0 200 OKCRLF
• LF
• body
• Full Response with headers
• HTTP/1.0 200 OKCRLF
• Content-type text/htmlCRLF
• LF
• body

10
HTTP Response codes

• Here a few response codes
• OK
• Bad Request
• Unauthorized
• Not Found
• Internal Server Error

11
MIME types

• Originally designed for email, associates a type
  with a message to help the receiver to
  decode/view (RFC 1521)
• Can be used in a HTTP header
• Type/subtype
• Common types/subtypes
• text/html, text/plain, image/gif

12
A simple HTTP Server

• See textbook!

13
Programming Web Applications

• CGI
• Servlets
• JSP
• What do these have in common?
• They are all server-side technologies!

14
CGI

• What is CGI
• How does it work?
• Environment variables
• Processing Forms
• GET vs. POST
• Examples

15
What is CGI?

• Stands for Common Gateway Interface
• Server-side technology
• Can be used
• To Process fill-out forms
• To generate dynamic contents
• By a web server to run external programs
• By a web server to get/send data from databases
  and other apps

16
How does it work?
HTTP
Receive Request
CGI Process
Fork Process
Gen. Response
Receive Output
Send Response
17
CGI

• CGI scripts can be written in any language,
  including Java
• Perl is the most popular for CGI scripting
• To experiment, you need a web server
• Xitami (www.xitami.com)
• Jakarta-Tomcat (jakarta.apache.org/tomcat)
• Tomcat supports Servlets/JSP

18
Content headers

• If your script generates HTML then use
• Content-type text/html\n\n
• This tells the browser what content it is about
  to receive
• Other content headers (MIME!) include
• text/plain
• image/gif
• image/jpg

19
Sample Script

• !/usr/bin/perl
• print "Content-typetext/html\n\n"
• print "lthtmlgtltheadgtlttitlegtTest Pagelt/titlegtlt/headgt
  \n"
• print "ltbodygt\n" print "lth2gtHello,
  world!lt/h2gt\n"
• print "lt/bodygtlt/htmlgt\n"

20
Environment Variables

• Some of the environment variables
• DOCUMENT_ROOT
• HTTP_HOST
• HTTP_USER_AGENT
• REMOTE_HOST
• REQUEST_METHOD
• QUERY_STRING
• CONTENT_LENGTH etc

21
Script environment variables

• !/usr/bin/perl
• print "Content-typetext/html\n\n"
• print ltltEndOfHTML
• lthtmlgtltheadgtlttitlegtPrint Environmentlt/titlegtlt/head
  gt ltbodygt
• EndOfHTML
• foreach key (sort(keys ENV))
• print "key ENVkeyltbrgt\n"
• print "lt/bodygtlt/htmlgt"

22
Forms

• ltform action"env.cgi" method"GET"gt
• Enter some text here ltinput type"text"
  name"sample_text" size30gtltinput
  type"submit"gtltpgt
• lt/formgt

23
Forms

• As you know now, there are two ways to send data
  from an HTML form to a CGI script
• GET
• POST
• These methods determine how the form data is sent
  to the server

24
GET

• The input values from the form are sent as part
  of the URL
• They are saved in the QUERY_STRING environment
  variable
• If in the above example you type
• hello there John
• The QUERY_STRING will be
• Sample_texthellothereJohn
• Spaces have been replaced with

25
GET.

• This is called URL Encoding!
• Some commonly encoded characters
• \t (tab) 09
• \n (return) 0A
• / 2F
• 7E
• 3A
• 3B
• _at_ 40
• 26

26
GET.

• ltform action"env.cgi" method"GET"gt
• First Name ltinput type"text" name"fname
  size30gtltpgt
• Last Name ltinput type"text" name"lname"
  size30gtltpgt
• ltinput type"submit"gt lt/formgt
• If input is Sarah Johnson
• ENVQUERY_STRING would be fnameSarahlnameJ
  ohnson

27
GET.

• Parsing
• _at_values split(//,ENV'QUERY_STRING')
• foreach i (_at_values)
• (varname, mydata) split(//,i)
• print "varname mydata\n"

28
GET.

• It is possible to send values as part of a URL
• Hidden values can be used to maintain session
  info

29
POST

• More sophisticated than GET
• Data is not sent as URL-encoded (I.e. not part of
  the URL)
• When POST is used, data is sent as a separate
  message (input stream)

30
POST.

• Parsing
• read(STDIN, buffer, ENV'CONTENT_LENGTH')
• _at_pairs split(//, buffer)
• foreach pair (_at_pairs)
• (name, value) split(//, pair)
• value tr// /
• value s/(a-fA-F0-9a-fA-F0-9)/pack("C",
  hex(1))/eg
• FORMname value