The world wide web - Deptinfo

The world wide web
Jean-Marc Farinone
[email protected]
Assistant Professor
Conservatoire National des Arts et Métiers
CNAM Paris (France)
1
Schedule
❚
❚
❚
❚
Web = ?
A protocol: HTTP
A markup language: HTML
Dynamic web
2
The web ≠ Internet
❚ The web is … the web
❚ The web is not … internet
❚ Internet = a stack of network protocol
❚ Internet = One of the infrastructure to
transport messages on the earth
❚ The most used and famous
3
Internet: a stack of
network protocol
Examples
Application
FTP, SMTP, News, ...
Transport
UDP, TCP
Network
IP
Link
Physic
Ethernet,
Token ring, FDDI,
...
4
Web (which spider ?)
❚ The user of the web = a spider in the
center of its web = take information from
web servers
❚ So Web = a client-server protocol
❚ Examples of web client: Internet Explorer
(MSIE), Netscape Navigator (NN), …, a lot
of others (agents, …)
❚ As a spider, you browse (or navigate)
from server to server
5
Web and Internet: the
history
❚ Internet
❙ Birth: december 1969 (the four west coast
computers), Winton Cerf ...
❙ In fact developped during the seventies (DOD): the
TCP/IP stack
❚ Web
❙ Birth: 1989 (20 years after !!) CERN Genève
Switzerland Europe, Tim Berners-Lee, Robert Caillau
❙ 1993: first multi platform graphical client: Mosaic
(Mark Andreessen, NCSA student then Netscape
Corporation)
6
Internet and Web:
conclusion
Examples
Application
Web, FTP, SMTP, News, ...
Transport
UDP, TCP
Network
IP
Link
Physic
Ethernet,
Token ring, FDDI,
...
7
Technical notions of the
Web
❚ Web = URL + HTTP + HTML
❚ URL = Uniform Resource Locator = the
address of a resource
❚ HTTP = Hyper Text Transfer Protocol =
the protocol between a client and a server
❚ HTML = Hyper Text Markup Language =
the format of the pages
8
URL
❚ Format:
<protocol>:[//]<service>[:port]/localAdress
❚ Example:
http://www.yahoo.com/index.html
❚ Other Uniform Resource Locator:
file:///C|/JeanMarc/Java/
ftp://ftp.inria.fr/
mailto:[email protected]
9
HTTP : présentation
❚ Les clients web (navigateurs, browsers,
butineurs) communiquent avec un serveur
web (HTTP) via le protocole HTTP
❚ Un serveur web :
❙ traite les demandes de documents (requêtes)
effectuées par les navigateurs
❙ fournit les réponses aux requêtes des
navigateurs
❙ donne un accès maîtrisé aux répertoires du
site Web et gère des fichiers d’historiques,
10
des statistiques d’utilisation, etc.
HTTP : un protocole simple
❚ Encore plus simple qu'un client serveur
❚ HTTP est un protocole requête-réponse au
dessus de TCP (par défaut sur le port 80)
❚ HTTP est sans état
Action du client
Réponse du serveur
1. Le client se connecte par TCP
Le serveur envoie un acquittement TCP
2. Le client fait une requête HTTP d’un
document (HTML)
Le serveur envoie le document et ferme la
connexion (HTTP comme TCP)
3. Le client analyse le document et se rend
compte qu'il référence 2 images. Il fait
alors une requête pour chaque image.
Le serveur envoie la première image
demandée et ferme la connexion. De même
pour la seconde image.
11
HTTP
❚ A protocol to obtain resources (not only
HTML pages)
❚ Format of the exchanged messages
A line (the request or the
response)
Header variables (informations
about the sender)
A blank line
Eventually data (body)
❚ A text-oriented protocol (maybe except
the data)
12
HTTP: a request (1/2)
❚ A message from client to server = a
request
The line of the request
Header variables (information about
the client)
A blank line
Data (sometimes empty)
13
HTTP: a request (2/2)
http://service:8080/index.html
=
1°) Open a TCP connection to service on
port 8080
2°) Send a HTTP message (a request)
which first line is:
get /index.html HTTP/1.1
14
Exemple d'une requête
Une requête GET comme :
<a href="http://www.monSite.fr/Dossier/fichier.html">
Cliquez ici</a>
génère la requête HTTP :
GET /Dossier/fichier.html HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; .NET CLR
1.1.4322)
Host: 163.173.191.38
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/xshockwave-flash, */*
Connection: Keep-Alive
If-Modified-Since: Monday, 4 December 2006 13:14:15 GMT
{ici se place une ligne blanche, qui termine l’entrée}
15
Exercise 1: a HTTP request
❚ Install and launch (if not) a web client
❚ Install a Java virtual machine (JVM)
❚ Launch the given Java program in a MS-DOS
window in the directory
java ListenPort <NumPort>
❚ Obtain by the web client the resource at the
URL http://localhost:<NumPort>/index.html
❚ For example use 8081 as NumPort
❚ Give examples of header variables of a web
client
16
HTTP: a response (1/2)
❚ A message from server to client = a
response
The line of the response
Header variables (information about
the server)
A blank line
Data (seldom empty)
17
Première ligne d'une
réponse
La première ligne d'une réponse est de la forme :
version_HTTP Code_Réponse Commentaire
version_HTTP : de la réponse (en général
HTTP/1.1)
Code_Réponse : un entier précisant la réponse
Commentaire : un bref commentaire (en anglais)
18
Les codes entiers d'une
réponse
Cinq catégories :
1xx : Informatif
2xx : Succès : l’action a bien été reçue, comprise et prise en
compte (par exemple 200 : le document suit)
3xx : Redirection : une action complémentaire est nécessaire
pour préciser la requête
4xx : Erreur : la syntaxe de la requête est défectueuse ou bien il
n’est pas possible de la traiter (par exemple 401 : Demande
d’authentification, 404 : Fichier introuvable)
5xx : Erreur serveur : le serveur n’a pu traiter la requête, malgré
sa validité apparente
19
Ligne suivante d'une
réponse
Encore (!) de la forme : nomVariableHTTP: valeur
Principales variables HTTP d'une réponse :
Server : renseignement sur le serveur web
Content-Length : longueur en octets du contenu
de la réponse
Content-Type : le type MIME des données
retournées
Date : date et heure de l'envoi de la réponse
20
HTTP: a response (2/2)
❚ Example of response:
HTTP/1.1 200 OK
Server: Apache/1.3.12 (Unix)
Last-Modified: Sat, 1 Jan 2000 03:39:21 GMT
Content-Length: 2608
Content-Type: text/html
<html>
<head><title>Site RSX102</title></head>
<body>
<h1> Bienvenue</h1>
… … …
</body>
</html>
The line of the
response
Header variables
Data (body of
the response)
21
Exemple d'une réponse
En réponse à la requête GET précédente, on peut avoir
une réponse comme :
HTTP/1.1 200 OK
Server: Microsoft-IIS/6.0
Date: Tuesday, 14 December 2006 13:15:12 GMT
MIME-version: 1.0
Content-Type: text/html
Last-Modified: Wednesday, 6 December 2006 12:02:12 GMT
Content-Length: 145
{une ligne blanche s’insère ici }
{le contenu de « fichier.html » suit ici ... }
22
Exercise 2: a HTTP
response
❚ Test the web server by niftyhttp
❙ install (if not) a web server
❙ launch this web server
❙ launch the given Java program in a MS-DOS window in the
directory C:\....\niftyhttp:
java HttpClient localhost 8080
❙ click button send
23
Dynamic web
❚ Until now, the user obtains HTML pages already
made and put in the web site (static pages)
❚ A lot of situations need to build the page at the
moment of the request (dynamic pages): Give
examples ;-)
❚ So when the web server receives the request, it
must build the page and so launch a program
❚ => CGI = Common Gateway Interface =
protocol between web server and programs
24
CGI: a protocol
❚ When the web server must launch a CGI
program:
❙ its standard output is connected to the standard
input of the program (and not to the screen: which
screen ?)
❙ its standard input is connect to the standard output
of the program
❚ => The program:
❙ read from stdin !
❙ write to stdout !
❙ which are not the keyboard and the screen. OK !?
25
Travaux du protocole CGI
❚ Le protocole CGI code dans des variables
d'environnement les en-têtes d'une requête HTTP
❚ Exemple :
❙ la valeur de l'en tête User-Agent est codée dans
la variable d'environnement USER_AGENT
26
CGI : exemple de code
❚ Le programme CGI :
❙ lit de l'entrée standard (stdin), écrit sur la sortie standard
(stdout), qui ne sont pas le clavier et l'écran. OK !?
main(int argc, char *argv[]) {
entry entries[MAX_ENTRIES];
printf("Content-type: text/html%c%c",10,10);
if(strcmp(getenv("REQUEST_METHOD"),"POST")) {
printf("<h2>This script should be referenced with a METHOD of POST.\n</h2>");
exit(1);
}
if(strcmp(getenv("CONTENT_TYPE"),"application/x-www-form-urlencoded")) {
...
exit(1);
}
cl = atoi(getenv("CONTENT_LENGTH"));
for(x=0;cl && (!feof(stdin));x++) {
m=x;
/* lit les couples suivants jusqu'à & */
entries[x].val = fmakeword(stdin,'&',&cl);
27
CGI Programs
❚ Often called script CGI
❚ They return an HTTP response
❚ Written in your favorite programming language
(C, C++, Java, perl, shell, …) or php
❚ Put in a known place in the web site but …
depends
❙ of the web server and its administrator (tion)
❙ of the programming language
❙ of the techniques used
❚ Examples:
❙ /cgi-bin, /servlet, /jsp, … in the web site
28
Static and dynamic web:
conclusion
Client side
Server side
HTML Files
I
n
t
e
r
n
e
t
static
Web
server
dynamic
build
HTML
Files
CGI
program
29
Parameters of CGI
Programs
❚ Generally these programs are launched with
parameters
❚ Give examples. Who first gives these
parameters ?
❚ So HTML (2.0) proposes GUI to launch
programs and give them parameters : the
form
❚ GUI can have :
❙ checkboxes, textfield, textfield with * as echo
character, radio button, reset button, button to
launch the request, selection list, textarea
30
Interface graphique à
l'aide de formulaire
31
The tag FORM
❚ FORM has two attributes action and method
❚ action is the URL of the program to be reached
❚ method is the HTTP method (GET, POST, ...)
❙ example :
<form action="http://localhost:8081/cgi-bin/myProg"
method="POST">
32
GUI components in a form
❚ The GUI components are put between
<FORM …> and </FORM>
❚ Three families:
❙ INPUT family
❙ SELECT family
❙ TEXTAREA family
❚ The TEXTAREA family has only one element: a
textarea !!
<TEXTAREA NAME="ta" ROWS=5 COLS=70></TEXTAREA>
33
The SELECT family
❚ The SELECT family has 2 elements. It depends of the
attribute SIZE:
❙ menu button (combo-box ?) if SIZE="1" (default value)
<SELECT NAME="sport">
<OPTION> Basket </OPTION>
<OPTION> Football </OPTION>
<OPTION> Rugby </OPTION>
</SELECT>
❙ a list if SIZE > 1
<SELECT NAME="planet" SIZE="4" MULTIPLE>
<OPTION> venus </OPTION>
<OPTION> earth </OPTION>
<OPTION> mars </OPTION>
<OPTION> jupiter </OPTION>
<OPTION> saturn </OPTION>
<OPTION> uranus </OPTION>
</SELECT>
34
The INPUT family
❚ The most used GUI components of a form
❚ <INPUT TYPE="fieldtype" NAME="theName">
❚ fieldtype is:
❙
❙
❙
❙
❙
❙
CHECKBOX for checkbox
TEXT for textfield
PASSWORD for textfield with * as echo character
RADIO for radio buttons
RESET for reset button
SUBMIT for the button to launch the request
35
So the parameters to the
program?
❚ The GUI components have a name. This name
is used by the program. The web server
receives a character sequence constitued by a
NameOfComponent=value separated by &
❚ Some transformations (blank character, ...)
<input type="checkbox" name="cb1" value="et un">option 1</input><br />
<input type="checkbox" name="cb2" value="deux">option 2</input><br />
<input type="checkbox" name="cb3" value="trois">option 3</input><br />
votre nom : <input type="text" name="nom"></input><br />
votre mot de passe : <input type="password" name="motDePasse"></input><br />
❚ is sent:
cb1=et+un&cb2=deux&nom=jean-marc&motDePasse=ehoui
36
How the parameters are
sent?
❚ It depends of the way (the HTTP method)
❚ Method GET: in the URL
❚ Method POST: in the body of the HTTP request
GET
POST
Advantages
Drawbacks
See the URL => more
easily keep it to play again,
send it by mail, …
The data sent may
be truncated (by the
client or the variables
of the server)
Don't see the values
in the URL => more
difficult to play
again, keep it
1°) No limitations for
the size of data sent
2°) Don't see values in the URL
=> more confidentiality
❚ Usually POST is used
37
Code HTML complet
<html>
<head><title>Un Formulaire</title></head>
<body>
<h2>début du formulaire</h2>
<hr />
<form action="http://localhost:8081" method="POST">
cases à cocher<br />
<input type="checkbox" name="cb1" value="et un">option 1</input><br />
<input type="checkbox" name="cb2" value="deux">option 2</input><br />
<input type="checkbox" name="cb3" value="trois">option 3</input><br />
votre nom : <input type="text" name="nom"></input><br />
votre mot de passe : <input type="password" name="motDePasse"></input><br />
<input type="submit" value="envoyer votre requête">
<input type="reset" value="initialiser">
</form>
<hr />
<h2>fin du formulaire</h2>
</body>
38
</html>
Exercise 3: FORM
❚ Launch the given Java program:
java ListenPort <NumPort>
❚ Open in a browser the page
formulaire.html
❚ Populate it and send it
❚ Change the method (GET, POST) of the
form
❚ Exam the URL, the parameters obtained
by the ListenPort program
39
Exemples de serveurs web
❚ La fondation apache fournit des serveurs web
pour les principales plate-formes à
http://httpd.apache.org/
❚ IIS est intégré dans les systèmes WIN32.
❚ En général, les serveurs sont vendus ou donnés
avec des fonctionnalités supplémentaires :
serveurs d'application, WEB services,
servlets/JSP, etc. Par exemple
❙ tomcat d'apache à http://tomcat.apache.org/
❙ Serveurs d'application Web Sphere,
WebLogic, JBoss, etc.
40
Une conclusion
❚ HTTP est un protocole simple (requêteréponse), sans état (pas de mécanisme
d'historique)
❚ Il est orienté caractère ce qui en fait un de ces
principaux avantages
❚ Il est désormais souvent utilisé comme une
couche transport ! Au dessus de TCP !! (une
aberration ?)
41
Bibliographie
❚ www.w3.org : site web officiel sur HTML,
HTTP, CGI et les principales notions sur le web
❚ http://www.faqs.org/rfcs/rfc2616.html :
la RFC du protocole HTTP 1.1
42
The end
43