III. L`environnement Web Au sommaire 1. Introduction 1. Introduction

Transcription

Au sommaire
1.
III. L’environnement Web
Laurence Duchien
LIFL - équipe GOAL- Projet INRIA Jacquard
USTL - bâtiment M3 Extension- bureau 203
[email protected]
http://www.lifl.fr/~duchien
Septembre 2005-Janvier 2006
Master Informatique M1
2005-2006
1
1. Introduction
Introduction
2. URL
3. HTML
4. CCS
5. HTTP
6. Serveurs HTTP
7. CGI
8. Servlets
2005-2006
2
1. Introduction
Hypertexte
WWW : World Wide Web
1989 - Tim Berners-Lee
Mise en ligne de documentation (scientifique)
Texte classique
organisation linéaire
avec index, sommaire, glossaire, notes,…
Les concepts :
Hypertexte
organisation non linéaire (hiérarchique, graphe, …)
Hypertexte
: HTML
Client/serveur
: HTTP
schéma de désignation : URL
2005-2006
3
texte enrichi de liens
renvoi vers un document
renvoi vers une partie d’un document
2005-2006
4
1. Introduction
1. Introduction
Client/Serveur
Schéma de désignation
Client
: le navigateur (Internet Explorer, Netscape),
Serveur : le serveur Web (Apache, Microsoft IIS)
Le protocole : HTTP
Chaque page a un nom unique => pas d’ambiguïté possible
protocole://serveur/page
•
Le client émet la requête
•
Le serveur répond en fournissant le document demandé
ou un message d’erreur
2005-2006
Uniform Resource Locator (URL) : désigne une page Web
5
http://www.lifl.fr/index.html
Organisation hiérarchique des pages
protocole://serveur/repertoire/page?requête
2005-2006
6
1. Introduction
1. Introduction
Standards
Bibliographie
HTTP
0.9 : version de base avec requête/réponse
1.0 : version standardisée IETF (RFC 1945)
1.1 : version étendue (connexions persistantes) (RFC 2068)
HTML
1.0 version initiale
2.0 version standardisée W3C
3.0 version étendue (tableaux, images cliquables, applets)
4.0 version étendue (frames, feuilles de styles)
XML
1.0
URL
stable
Master format
Informatique
M1 depuis 1989
7
2005-2006
très nombreuse
recherche sur moteur amazon.com : sur HTML 96 livres en
français, 228 en anglais
Sélection
Webmaster in a Nutshell, S. Spainhour, R. Eckstein, 2eme
édition, O’Reilly
couvre HTML, CCS, XML, XSL, JavaScript, CGI, PHP, HTTP,
Apache
Programmation Java côté serveur, A. Patzer, Eyrolles,
Couvre Servlets,
Master Informatique
M1
2005-2006
JSP, EJB.
8
2. URL
3. HTML
URL dans sa forme générale :
HTML est une instance de SGML (Standard
Generalized Markup Language)
protocole"://"[utilisateur[":"motdepasse]@](nom|adresse)[:po
rt]["/"chemin]["/"nomdefichier][#ancrelocale][?options]
Le format complet dans les RFC 1738 et 1808
http://www.w3.org/Addressing/
Exemple :
http://www.imag.fr/equipe/sirac/projet.html
•
Langage de balisage
•
Description d’un document et de son formatage
•
Document : information + règles de présentation
ftp://user:[email protected]/personal/latex.sty
http://123.87.54.251/index.html
http://www.altavista.com/query.html?lille+dess
Ex : <b>ce texte est en gras</b>
ce texte est en gras
http://xenon.inria.fr:8080/hello.html
http://alken.lifl.fr/index.html#annuaire
2005-2006
9
2005-2006
10
SGML
SGML (cont.)
SGML : issu du mode de l'édition et de la
gestion documentaire industrielle
2 idées fondamentales dans SGML :
devenu un standard ISO (8879) en 1986
très complet
• permet de décrire des classes de documents
SGML : méta-langage qui permet de définir des
classes de documents (des DTD Document Type
Definition)
(plutôt) lourd à gérer
la norme fait 800 pages
suite applicative éditeur, visualiseur, dévermineur, …
SGML atteind ! 100000 lignes de code
2005-2006
• approche descriptive : dissocie l'organisation logique
(point de vue de l'auteur) de sa structure physique (point
de vue du typographe)
11
DTD HTML version 1 : 3 pages de SGML
DTD HTML version 4.0 : 300 pages de SGML
2005-2006
12
Structure d’un document HTML
Structure d'un document HTML
Déclaration de la version HTML
utilisée
En-tête
Corps du document
<!DOCTYPE version HTML
utilisée >
<HTML> début du document
<HEAD>
En-tête
</HEAD>
<BODY>
corps du document
</BODY>
</HTML> fin du document
2005-2006
Règles générales pour les balises
• <montag> … </montag>
• non sensible à la casse
• (i.e. <montag> " <MONTAG>)
• peuvent contenir des options
Option : nomattribut = "valeur«
Ex : <IMG SRC="abc" ALT="toto">
SRC et ALT : paramètres de la balise
IMG
• Commentaires

• Jeu de caractères : ISO 8859-1 (Latin-1)
• Contient tous les caractères accentués
des langues latines (sauf œ)
• Possibilité d'encodage des caractères :
é é
< > & : < > &
13
Exemple d'en-tête de document
HTML
<HEAD>
<TITLE>Exemple d'en-tête HTML</TITLE>
<META NAME="auteur" CONTENT="laurence">
<META NAME="mots clés" CONTENT=« CAR">
<BASE HREF="http://www.lifl.fr/cours.html">
<SCRIPT="javascript">
</HEAD>
2005-2006
15
Version HTML
Déclaration de la version de HTML utilisée
• Exemple :
<! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 3.2 Final/EN">
correspond à un DTD public défini par le consortium W3,
version finale de HTML 3.2, en langue anglaise
<! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0/EN">
correspond à la version de HTML 4.0
• utilisé par les outils de validation pour vérifier la conformité
d'un document par rapport aux spécifications
• utilisé par les navigateurs pour déterminer s'ils sont
capables d'afficher les documents
2005-2006
14
En-têtes des documents HTML
<TITLE>un titre</TITLE>
• obligatoire
• définit le titre du document
• apparaît dans la barre supérieure du navigateur
• nom dans la liste des signets (bookmark)
<SCRIPT>langage de script par défaut</SCRIPT>
<STYLE>feuille de style par défaut</STYLE>
<BASE HREF="http://www.lifl.fr">
• URL de base pour toutes les références de ce document
<META NAME="clé" CONTENT="valeur">
• fournit des informations sur le document
exemple de (clé,valeur)
(author,Laurence Duchien)
(keywords,cours Web)
Master (refresh,tous
Informatique M1 les ans)
16
2005-2006
Corps des documents HTML
Balises de base
Balises de base (suite)
<BODY attr1="val1" … attrn="valn"> <Hn>Titre de niveau n</Hn>
attributs optionnels
6 niveaux de titre possibles
option ALIGN=center, right ou
• bgcolor : couleur de fond
left
• text : couleur du texte
Saut de paragraphe
• background : URL de l'image en <P>
<BR>
Retour forcé à la ligne
fond d'écran
<HR>
Trait horizontal
• link : couleur des liens non
<B>Texte
en gras</B>
encore visités
<I>Texte
en
italique</I>
• vlink : couleur des liens déjà
<PRE>Texte préformaté (à ne
visités
• alink : couleur des liens lorsque pas reformater)</PRE>
l'on clique dessus
• sinon, valeur par défaut du
navigateur
2005-2006
17
Codage des couleurs dans HTML
Pour les couleurs, 2 solutions :
•
#RRGGBB (en hexa)
• des noms en clair : green, yellow, purple, red, blue, …
Nom de couleur en clair :
+ 136 noms de couleur X11
dont 78 possèdent 4 déclinaisons
ex : blue1 (le + clair), blue2, blue3, blue4 (le + foncé)
+ 100 nuances de gris
de grey1 (le + foncé) à grey100 (le + clair)
Attention à l'utilisation des couleurs
on n'obtient pas forcément le même rendu d'un navigateur à
l'autre
2005-2006
18
Les images
Les liens
Exemple : <IMG SRC="maphoto.gif">
Insère l'image maphoto.gif
Format : <A HREF="url">lien</A>
Attributs optionnels
•
ALIGN =
top, middle, bottom, left ou right
aligne l'image par rapport à la ligne
•
•
HEIGHT, WIDTH : hauteur, largeur de l'image
ALT = message pour les navigateurs en mode texte
Formats d'images couramment par les navigateurs : GIF,
JPEG
2005-2006
19
lien vers un fichier distant
<A HREF="#etiquette">lien</A>
• lien vers une étiquette du document courant
• l'étiquette est définie par
<A NAME = "etiquette"> </A>
l'étiquette est appelée ancre
2005-2006
20
Les listes
Les listes (cont.)
liste énumérée
liste numérotée <OL>
<UL>
attribut optionnel TYPE=DISC, SQUARE ou CIRCLE
<UL TYPE=DISC>
•niveau 1, item 1
<LI>niveau 1, item 1
•niveau 1, item 2
o niveau 2
<UL TYPE=CIRCLE>
<LI>
niveau 2
! niveau 3
<UL TYPE=SQUARE>
<LI>niveau 3
</UL>
</UL>
</UL>
Master
Informatique M1
21
2005-2006
Les tables
Exemple :
<TABLE>
<TR> ligne
<TH> en-tête de colonne
<TD> colonne
<TABLE>
ALIGN : alignement de la table
WIDTH : largeur (en pixels)
HEIGHT : hauteur
BORDER : bordure
CELLSPACING : espace entre les
cellules
CELLPADING : espace entre contenu
et bordure
tous les attributs
de couleur de 23
Master+ Informatique
M1
2005-2006
<BODY>
<OL TYPE=A>
<OL TYPE=I>
<LI>niveau 2
<OL TYPE=1>
<LI>niveau 3
</OL>
</OL>
</OL>
Master
Informatique M1
2005-2006
A. niveau 1, item 1
B. niveau 1, item 2
I. niveau 2
1. niveau 3
22
Les tables (cont.)
Format :
attributs optionnels de TABLE
attribut optionnel TYPE=1 (décimal), a (minuscule), A (majuscule), i
ou I (romain)
<TR>
<TH>en-tête 1</TH>
<TH>en-tête 2</TH>
</TR>
<TR>
<TD>cellule 1,1</TD>
</TR>
<TR>
</TR>
</TABLE>
Attributs optionnels de TR
ALIGN : alignement horizontal des cellules de la
ligne
VALIGN=TOP, MIDDLE ou BOTTOM : alignement
vertical des cellules de la ligne
HEIGHT
+ tous les attributs de couleur de <BODY>
attributs optionnels de TD
ALIGN, VALIGN, WIDTH, HEIGHT
NOWRAP : ne pas casser les mots
ROWSPAN : multi-colonne s'étendant sur +sieurs
lignes
COLSPAN : multi-colonne s'étendant sur +sieurs
colonnes
Master Informatique
24de <BODY>
+ tous lesM1attributs de couleur
2005-2006
Exemple de table
<TABLE BORDER=4 CELLSPACING=2
CELLPADDING=0 WIDTH="450" HEIGHT="61" >
<CAPTION >légende en haut</CAPTION>
<TR>
<TH VALIGN=BOTTOM WIDTH="116"
HEIGHT="30">en-tête 1</TH>
<TH WIDTH="173" HEIGHT="50">en-tête 2
(centrée par défaut) et en gras</TH>
<TH ALIGN=RIGHT WIDTH="144">titre de
cellule cadrée à droite</TH>
</TR>
<TR>
<TD NOWRAP HEIGHT="17">contenu d'une
cellule avec NOWRAP</TD>
<TD WIDTH="173" HEIGHT="20">contenu sans
l'attribut NOWRAP</TD>
<TD></TD>
</TR>
<TR>
<TD HEIGHT="17"> </TD>
<TD></TD>
<TD BGCOLOR="#D7FB23">couleur de fond
</TD>
</TR>
2005-2006
</TABLE>
25
Exemple de formulaire
<! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 3.2 Final/EN">
<HTML>
<BODY>
<FORM ACTION= http://widget.com/cgi-bin/widgetorder METHOD=POST>
Nom <INPUT NAME="client" SIZE=46> <P>
Rue <INPUT NAME="rue" SIZE=40> <P>
Ville <INPUT NAME="ville" SIZE=20>
Code postal <INPUT NAME="cp" SIZE=5> <P>
Carte de crédit No <INPUT NAME="carte" SIZE=10>
Expire <INPUT NAME="expire" SIZE=4>
M/C <INPUT NAME="cc" TYPE=RADIO VALUE="mc" checked>
VISA <INPUT NAME="cc" TYPE=RADIO VALUE="vis">
Contre remboursement
<INPUT NAME="cr" TYPE=CHECKBOX> <P>
<INPUT TYPE =SUBMIT VALUE="Envoi">
<INPUT TYPE =RESET VALUE="Remise à zéro"> <P> Sélection de fichier :
27
<INPUT TYPE =FILE NAME="fichier"> <P>
2005-2006
Les formulaires
Objectif : pouvoir saisir des données dans une fenêtre du
navigateur Web et les envoyer au site serveur
Domaines d'application
• saisir des commandes pour un fournisseur
• soumettre des requêtes à des moteurs de recherche
Contient les éléments de saisie suivants :
• champs de texte à remplir
• boîtes à cocher
• boutons radio
• cartes actives
• boutons
Les formulaires
: balise <FORM>
Les éléments de saisie : balise <INPUT>
LesInformatique
menus déroulants
: balise <SELECT>
Master
M1
26
2005-2006
Exemple (cont.)
Menu déroulant :
<SELECT NAME="MenuDeroulant">
<OPTION>choix 1</OPTION>
<OPTION>choix 2</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
2005-2006
28
Les options de <FORM>
POST
ACTION : URL pour l'envoi les données du formulaire
METHOD : méthode HTTP à utiliser pour l'envoi. En général POST
(plus rarement GET).
Les options de <INPUT>
POST envoie dans le corps du message sous la forme d'une seule
ligne (sans saut) avec :
les variables
les valeurs
les différentes variables sont séparées par &
les espaces sont remplacés par +
si une boîte n'a pas été cochée, elle est omise
Exemple :
client=Anne+Vier&rue=54+rue+Blanc&ville=Paris&cp=75001&carte=01
23456789&cc=vis&cr=on&fichier=ess.ps&MenuDeroulant=choix+2
NAME : identificateur de la variable
plusieurs INPUT avec le même id de variable correspondent à une série de
bouton dont un seul doit être coché
VALUE : nom du champ apparaissant à l'écran
SIZE : taille du champ texte
TYPE : type de champ
TEXT (type par défaut)
RADIO
CHECKBOX
PASSWORD : zone de saisie d'un mot de passe
SUBMIT : bouton pour envoyer les données
RESET : bouton pour remettre à zéro le formulaire
FILE : sélectionner un fichier
Master Informatique
M1: zone de texte sur plusieurs
29 lignes </TEXTAREA>
<TEXTAREA>
2005-2006
<TEXTAREA NAME="…" ROWS=3 COLS=40>
Les images cliquables
Images simples : <IMG SRC="logo.gif">
attributs possibles : HEIGHT, WIDTH, ALIGN, …
Images cliquables : on insère la balise <IMG> dans une
balise de lien <A HREF>
Exemple : <A HREF="http://www.lifl.fr">
<IMG SRC="logo.gif">
</A>
- l'image acquiert un cadre bleu
- on charge le lien en cliquant sur n'importe quelle zone
de l'image
Master Informatique
M1
31
2005-2006
Toutes les balises habituelles sont autorisées dans le corps du
formulaire
2005-2006
30
Images cliquables sous forme de
plan
L’image comporte plusieurs liens
en fonction des coordonnées
du curseur au moment du clic,
le document chargé est #
2 étapes :
1. Définition d'un plan <MAP>
2. On déclare une association entre le
plan et l'image
attribut USEMAP de la balise
<IMG>
Exemple :
<MAP NAME="monplan.map">
<AREA SHAPE="rect"
COORD="100,1,199,30"
HREF="zone1.html>
<AREA SHAPE="rect"
COORD="200,1,299,30"
HREF="zone2.html">
Master
Informatique M1
</MAP>
2005-2006
SHAPE : forme de la zone cliquable
4 valeurs possibles
RECT : rectangulaire
CIRCLE : circulaire
POLY : polygonale
DEFAULT : la zone restante non
encore attribuée
COORD : une liste séparée par des
virgules des coins de la zone (centre +
rayon pour le cercle)
<IMG SRC="barremenu.html"
USEMAP="#monplan.map">
USEMAP : URL du document dans lequel
est défini le plan (ici dans le document
32
lui-même)
Les cadres (frames)
Les cadres (cont.)
Objectif : scinder un
document en plusieurs cadres
indépendants
• si on dépasse 100% (ex :
"65%,20%,20%") le navigateur
applique une règle de 3 pour
ramener les dimensions à
100%
• balise <FRAMESET> pour
débuter la définition d'un
ensemble de cadres
• balise <FRAME> définit
chaque cadre
• Exemple :
<FRAMESET ROWS="60%,*"
COLS="65%,20%,*">
2 lignes : 60 % de la hauteur
de la fenêtre , le reste
3 colonnes : 65 % de la largeur,
33
20 % , le reste
2005-2006
Les cadres (cont.)
Les <FRAMESET> se définissent avant le corps <BODY> du document
avec :
• un fichier html avec juste la définition du <FRAMESET>
• autant de fichiers html qu'il y a de balise <FRAME>
Ex : <! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 3.2 Final/EN">
<HTML>
<HEAD> ... </HEAD>
<FRAMESET ROWS="60%,*">
<FRAME SRC="frame1.html" NAME="aDroite">
<FRAME SRC="frame2.html" NAME="aGauche“ SCROLLING=yes>
</FRAMESET>
<NOFRAMES>
Ce texte est affiché par les navigateurs qui ne savent pas interpréter
les cadres
</NOFRAMES>
Master
Informatique M1
35
</HTML>
2005-2006
on peut entrelacer les définitions de
• on peut indiquer une taille en
cadres
pixels : "50,100,150"
• on peut omettre plusieurs
dimensions : "10%,3*,*,2*"
1ère
: 10 %
2ème : 3/6 du restant (i.e.
de 90%)
3ème
: 1/6 de 90%
4ème
: 2/6M1de
Master
Informatique
2005-2006
90%
<FRAMESET COLS="50%,*">
<FRAMESET ROWS="50%,*">
…
</FRAMESET>
<FRAMESET ROWS="33%,50%,*">
…
</FRAMESET>
34
</FRAMESET>
Les cadres (cont.)
Attributs de la balise <FRAME> :
• SRC fournit le document source à afficher dans le cadre
• NAME définit un identificateur pour le cadre
• SCROLLING ajoute des barres de défilement au cadre
L'identificateur de cadre est utilisé lorsque l'on souhaite qu'un
lien s'affiche dans un cadre précis
Ex : si le frame1.html contient le lien suivant
<A HREF="..." TARGET="aGauche">
le fichier spécifié par l'attribut HREF s'affichera dans le
cadre d'identificateur aGauche défini précédemment
2005-2006
36
Les éditeurs HTML
Exemple FrontPage
Remplissent pour la création, modification, édition
des pages HTML le même rôle que les éditeurs de
texte "traditionnels"
Nombreux produits (gratuits et payants disponibles)
Une recherche sur Yahoo retourne 39 références !
Les plus courants
• Netscape Page Composer
• Microsoft FrontPage
• WebMaster, tkHTML, HotMetal, asWedit, Phoenix
• Informatique
...
Master
M1
37
2005-2006
4. CSS (Cascading Style Sheets)
2005-2006
38
CSS (Cascading Style Sheets)
Principe : permet de factoriser des éléments de présentation
de plusieurs pages
Balise <STYLE> dans l'en-tête des documents
<HTML>
<HEAD>
<STYLE>
typedebalise { prop1:valeur1; … ; propn:valeurn}
Ex : H1{font-style : italic; color :blue;}
…
</STYLE>
</HEAD>
<BODY><H1>Titre en bleu</H1> … </BODY>
</HTML>
Les propriétés définissent le rendu graphique des balises
2005-2006
39
2005-2006
40
Définition du style
Définition du style
<STYLE>
H1 { font-family: Arial; font-size: 24pt }
EM { font-weight: bold }
</STYLE>
La mise en forme avec les CSS concerne les fontes, les couleurs,
le positionnement du texte, l'espacement
Les feuilles de style sont dites en cascade ("cascading") :
<HEAD>
<STYLE> … </STYLE>
<STYLE> … </STYLE>
</HEAD>
Les propriétés sont appliquées dans l'ordre inverse de leur
déclaration
41
2005-2006
Les fontes/les couleurs
Les fontes
font-family: nom de la fonte (Helvetica, Times, Arial)
ou nom générique (serif, monospace, …)
font-weight: normal, bold ou lighter ou un nb multiple
de 100 (400:normal et 700:bold)
font-size: taille absolue (12pt, 2in, small) ou relative
(larger, smaller ou en % : 90%)
font-style: normal, italique ou oblique
Les couleurs
color:
couleur (hexa #rrggbb ou un nom)
background-color: couleur de fond
background-imag: image de fond (url(image.gif))
2005-2006
42
Le texte/ L’espacement
Liaison document-style
Le positionnement du texte
Définir la manière dont on lie un document avec son style interne :
la directive @import url(url)
inclusion de fichier
<STYLE> @include url("demo.css") </STYLE>
text-alignment: left, right, center, justify
display:inline : pas de passage à la ligne avant l'elt
block : passage à la ligne avant l'elément
list-item :
l'elt est un item dans une liste
L'espacement
word-spacing:
l'espacement entre les lettres
letter-spacing:
l'espacement entre les mots
pour une liste complète des propriétés, voir par
exemple www.w3.org/TR/REC-CSS1
43
2005-2006
externe : balise <LINK> pour définir un lien entre 2 documents
<LINK REL=stylesheet HREF="demo.css“ TYPE="text/css">
•
REL : relation entre les documents mis en relation
•
HREF : URL du lien
•
TYPE : type (MIME) du lien
Plusieurs balises <LINK> peuvent être utilisées pour faire référence à
plusieurs feuilles de style
Le fichier demo.css contient le corps du style
Le nombreux éléments de formatage peuvent également être spécifiés dans
le corps du document (évidemment) moins souple
44
2005-2006
Création de styles personnalisés
<HEAD>
Création d'un style
•
•
Exemple
<STYLE>
dans le fichier de style
dans l'en-tête du document
DIV.style1 { font-size: 24pt; fontweight: bold }
DIV.nomdustyle{ prop1:valeur1; … ; propn:valeurn}
ex : DIV.style1 { font-size: 24pt; font-weight: bold }
Dans le document, on référence le style :
<BODY>
<DIV CLASS="style1">Texte selon style1</DIV>
</BODY>
Deux types de style : DIV ou SPAN
DIV concerne les styles applicables à un paragraphe
SPAN
concerne
Master
Informatique
M1 les styles applicables
45 à une partie de texte
2005-2006
SPAN.style2 { font-style: oblique }
</STYLE>
</HEAD>
<BODY>
Texte selon <DIV
CLASS="style1">style1</DIV>
Texte selon <SPAN
CLASS="style2">style2</SPAN>
</BODY>
2005-2006
46
4. Le protocole HTTP
Le protocole HTTP
http: hypertext transfer
protocol
http: service de transport
PC avec
Explorer
Modèle client/serveur
•client:
navigateur qui
demande, reçoit et
affiche des objets Web
st
ue
eq
r
se Server
p
on
htt
avec
esp
r
tp
NCSA Web
ht
server
•serveur:
envoie des
objets web en réponse aux
requêtes
http1.0: RFC 1945
Mac avec
Navigator
http1.1: RFC 2068
2004-2005
htt
pr
equ
est
htt
pr
esp
ons
e
http est “sans état”
Le serveur ne maintient
aucune information sur
les requêtes
précédentes du client
Le client initie la connexion TCP
(création d’une socket) vers le
serveur sur le port 80
Les protocoles qui gèrent un
état sont complexes!
Le serveur accepte le connexion
TCP venant du cleint
L’histoire passée (état) doit
être maintenue
Des messages http sont
échangés entre navigateur
(client http) et serveur Web
(serveur http)
La connexion TCP est fermée
47
2004-2005
48
Si le client/serveur tombe,
leurs vues de l’état peuvent
être incohérentes, et doivent
donc être réconciliées
Exemple HTTP
Exemple HTTP (cont.)
Supposons un utilisateur qui entre l’URL
www.UneUniversite.edu/unDepartement/home.index
(contient texte &,
references à 10
Images jpeg)
4. Le serveur htto ferme la
5. -Le client http reçoit le
message de réponse contenant le
fichier html.
- Il analyse (parse) le fichier
html reçu, affiche le html. En
parsant le fichier html, il trouve
10 objets jpeg référencés
1a. Le client http initie la
connexion TCP vers le serveur
http (processus) sur le port 80 de
www.UneUniversite.edu
1b. Le serveur http sur l’hôte
2. Le client http envoie une
www.UneUniversite.edu attend
des connexions sur le port 80 de
TCP. Il “accepte” la connexion, et
notifie le client
requête http (contenant l’ URL)
sur la socket de connexion TCP
3. Le serveur http reçoit la
time
2004-2005
requête, construit un message de
réponse contenant l’objet
demandé
(UneUniversité/unDepartement/ho
me.index), envoie le message sur
49
la socket
Connexions Non-persistantes,
persistantes
Non-persistante
http/1.0: le serveur traite la
requête, répond et ferme la
connexion TCP
2 échanges pour retrouver un
objet
•Une
connexion TCP
•Une
requête/un transfert
d’objet
Chaque transfert souffre du
ralentissement dû à l’ouverture
de connexion TCP
Beaucoup de navigateurs
ouvrent de multiples
connexions en parallèle
2004-2005
Persistante
Par defaut pour http/1.1
Sur la même connexion TCP le
serveur traite la requête,
répond, traite de nouvelles
requêtes,…
Le client envoie les requêtes
pour tous les objets
référencés aussi vite que
possible dès qu’il reçoit le
code HTML de base
Moins de connexions, moins
lent à démarrer
51
temps
connexion TCP.
6. Les étapes 1-5 sont répétées
pour chacun des dix objets jpeg
2004-2005
50
Format de message HTTP :
requête
deux types de messages http : requête, réponse
requête http :
•
ASCII (format lisible par l’humain)
Ligne de requête
(commandes GET, POST, GET /somedir/page.html HTTP/1.0
User-agent: Mozilla/4.0
HEAD)
Accept: text/html, image/gif,image/jpeg
Lignes Accept-language:fr
d’entêtes
Retour chariot,
line feed
indique la fin
de message
2004-2005
(extra carriage return, line feed)
52
Requête HTTP : format général
Format message HTTP : réponse
Ligne état
(code état protocole
Phrase état)
Lignes
Entête
données, e.g.,
Fichier html demandé
2004-2005
53
2004-2005
HTTP/1.0 200 OK
Date: Thu, 06 Aug 1998 12:00:15 GMT
Server: Apache/1.3.0 (Unix)
Last-Modified: Mon, 22 Jun 1998 …...
Content-Length: 6821
Content-Type: text/html
data data data data data ...
54
Code d’état des réponses HTTP
Contenu des requêtes
La première ligne dans le message de réponse
serveur-> client
Version simple : méthode ressource version_du_protocole
Quelques exemples de code :
200 OK
•Requête
traitée avec succès, L’objet suit dans le message
301 Moved Permanently
•L’objet
demandé a bougé, la nouvelle localisation est donnée
à plus loin dans le message (Location"
400 Bad Request
•La
requête n’est pas comprise par le serveur
404 Not Found
•Le
document demandé n’est pas sur ce serveur
2004-2005
55
505 HTTP Version Not Supported
Exemple : GET /hypertext/TheProject.html HTTP/1.0
Types de méthodes pour HTTP/1.0
•
GET
demande d'un document
•
HEAD
demande seulement l'en-tête d'un document
•
POST
envoi des informations au serveur
GET : requête fondamentale
HEAD permet de connaître la date de modification d'un
document, la taille d'un document, le type du document, le
type du serveur
POST sert pour l'interrogation de programmes, services
réseaux comme l'envoi de messages dans les forums de
discussion, l'annotation de documents sur le serveur,
l'interrogation
de base de données
Master Informatique
M1
56
2004-2005
Interaction utilisateur-serveur :
authentification
Essayez HTTP (côté client)
Authentification : contrôle
d’accès au contenu du serveur
1. Telnet avec votre serveur favori :
telnet www.lifl.fr 80
Ouvre une connexion sur le port TCP 80
de www.lifl.fr.
Avec deux retour chariot, vous envoyez
une requête GET minimale vers
le serveur
2004-2005
http request
cookie: #
http réponse
Le serveur envoie le “cookie”
au client dans la réponse
http request
1678453
cookie: #
Le client présente le cookie
dans ses futures requêtes
•cookie: M1
1678453
Master Informatique
2004-2005
http réponse
59
non autorisation: le
serveur refuse l’accès, et
envoie
Msg requête http msg
+ Authorization: <cred>
réponse http classique
temps
58
Objectif: ne pas envoyer
d’objet si le client a une
version à jour dans son cache
Action
cookiespécifique
Action
cookiespécifique
http request
If-modified-since:
<date>
http réponse
•If-modified-since:
serveur: la réponse ne contient
aucun object si la copie cachée
est à jour
Modified
http request
If-modified-since:
<date>
304 Not
http réponse
HTTP/1.1 200 OK
2004-2005
object
non
modifiée
HTTP/1.0
304 Not Modified
<date>
•HTTP/1.0
serveur
client
client: donne la date de la
copie cachée dans la requête
Set-cookie: #
souvenir des
préférences utilisateurs,
de ses choix
•Set-cookie:
serveur
http réponse +
•Se
réponse http classique
•Si
GET conditionnel: un cache
côté client
http request
•authentification
Msg requête http msg
+ Authorization: <cred>
lignes d’entête
dans chaque requête
2004-2005
Cookies : garder un état
client
401: authorization req.
WWW authenticate:
Sans état: le client doit
présenter son autorisation à
chaque requête
• Ligne d’entête dans la
réponse
57
# généré par le serveur, # à
rappeller au serveur, utilisé
plus tard pour:
requête http classique
• WWW authenticate:
3. Regardez le message de réponse envoyé par le
serveur http
serveur
client
•autorisation:
2. Envoyez une requête http GET:
GET /~duchien/index.html HTTP/1.0
Les crédits d’autorisation : noms,
mots de passe
60
<data>
object
modifié
Pourquoi gérer des caches dans le
Web?
Caches Web (serveurs proxy)
Objectif: satisfaire la requête du client sans interroger
le serveur d’origine
L’utilisateur paramètre son
navigateur: accès aue web
via le cache web
Le client envoie toutes les
requêtes http vers le cache
web
•Le
cache web retourne
l’objet
•sinon
le cache web cache
demande l’objet au serveur
d’origine, qui retourne
l’objet au client
2004-2005
Serveur
origine
Proxy
htt
st
pr
equ server reque
h
e
p
e
st
client ttp
htt
ons
res
esp
pon
r
p
se
htt
st
e
u
eq
se
pr
on
htt
esp
r
tp
ht
client
Serveur
origine
61
6. CGI
Multiples systèmes de script : CGI, servlet, ASP, JSP, XSP,…
Ces systèmes permettent au client de faire exécuter un programme au
serveur
Common Gateway Interface (CGI) : Protocole entre un serveur Web et
des programmes à lancer côté serveur
Les programmes peuvent être
- interprétés : shells scripts sh, csh, ksh, shells Perl, etc …
- compilés : programmes C, C++, Ada, etc …
Exemples d'utilisation
• traitement des données saisies dans un formulaire
• génération automatique de pages Web
63
• compteur pour afficher le nombre d'accès à la page
2004-2005
Serveurs
origines
Le cache est prêt du
client (e.g., sur le même
réseau)
Le temps de réponse est
plus petit: cache prêt du
client
Fait décroître le trafic
vers les serveurs
distants
lien entre le réseau
local et le reste du monde
est souvent un goulet
Master Informatique
M1
d’étranglement
public
Internet
1.5 Mbps
access link
Réseau
institutionnel
•Le
2004-2005
10 Mbps LAN
Cache
institutionnel
62
Fonctionnement CGI
Les scripts sont désignés par une URL (comme les
documents HTML)
Par exemple : http://www.lifl.fr/cgi-bin/anniversaire.pl
En fonction du chemin d'accès, le serveur sait si l'URL
correspond à un script ou à un document
Par convention, tous les fichiers dans le répertoire cgibin/ sont des scripts
2004-2005
64
Fonctionnement CGI
Etape 1 : client -> serveur
2 méthodes peuvent être employées : GET ou POST
GET /cgi-bin/anniversaire.pl?mois=aout&jour=11 HTTP/1.0
Les options à passer au script sont encodées après le ? Elles
sont facultatives
POST /cgi-bin/anniversaire.pl HTTP/1.0
Content-type: application/x-www-form-urlencoded
Content-length: 20
mois=aout&jour=11
Rq Informatique
: dans ce M1
cas (formulaire),
Master
cette requête
2004-2005
c'est
65 le navigateur qui construit
Fonctionnement CGI
Etape 3 : script -> serveur
La sortie standard du script est un document de la forme
•
en-tête
•
ligne blanche
•
données
3 en-têtes possibles
Content-type: … (par ex text/html ou image/gif)
Location: … (par ex http://www.truc.com) : C'est une URL à
transmettre au client
Status: … (par ex 403 Forbidden) : C'est un code (d'erreur) à
renvoyer au client
Etape 4 : serveur -> client
Le Informatique
documentM1est
Master
2004-2005
envoyé au navigateur
Web qui l'interprète
67
Fonctionnement CGI
Etape 2 : serveur -> script
Les informations à passer aux scripts CGI par le serveur Web le sont
•
soit par des variables d'environnement
•
soit sur l'entrée standard du script
Les principales variables d'environnement
CONTENT_TYPE, CONTENT_LENGTH, etc … (ce sont les champs de
l'en-tête du message)
SCRIPT_NAME (ici /cgi-bin/anniversaire.pl)
Les options d'appel de script (ici mois=aout&jour=11) sont transmises
par la requête d'environnement QUERY_STRING pour la méthode GET
sur l'entrée standard du script pour la méthode POST
Le script analyse ses variables (et l'entrée standard éventuellement),
traitement et produit
un résultat
66
exécuteM1
son
Master Informatique
2004-2005
Exemples
Shell script sh
#!/bin/sh
echo "Content-type: text/html"
echo
echo "<!DOCTYPE HTML PUBLIC
//W3C/DTD HTML 3.2
Final/EN\">"
echo "<HTML>"
echo "<BODY>"
echo "Nous sommes le
<B>"`date`"</B>"
echo "</BODY>"
echo "</HTML>"
2004-2005
Langage C
#include <stdio.h>
main() {
char c;
int nb_args;
printf( "Content-type: text/html\n");
printf( "\n" );
printf( "<!
DOCTYPE HTML PUBLIC
\"-//W3C/DTD HTML 3.2 Final/EN\">\n"
\");
printf( "<HTML>\n" );
printf( "<BODY>\n" );
nb_args = 0;
while ((c=getchar()) != EOF)
if ( c == '&' ) nb_args++;
if ( nb_args != 0 ) nb_args++;
printf( "Il y a %d arguments a votre
requete\n" , nb_args );
printf( "</BODY>\n" );
printf( "</HTML>\n" );
68
}
7. Servlet
7. Servlet
Scripts serveur écrit en Java
Programme Java s'exécutant
côté serveur Web
•servlet prog. "autonome" stockés
dans un fichier .class sur le
serveur
•JSP prog. source Java embarqué
dans une page .html
Servlet et JSP
•exécutable avec tous les
serveurs Web (Apache, IIS, ...)
•auxquels on a ajouté un "moteur"
de servlet/ JSP (le plus connu :
Tomcat )
•JSP compilées automatiquement
en Informatique
servlet parM1
le moteur
Master
2004-2005
.class
autonome
Côté client
Côté serveur
Applet
Servlet
Embarqué JavaScript JSP
dans
HTML
69
Différent avec les CGI et les LD (NSAPI, ISAPI)
- performance sur les passages des paramètres (vs CGI)
- sûreté de fonctionnement (NSAPI, ISAPI)
Servlets de Base : FileServlet, CGIServlet, …
Téléchargement et exécution d ’une Servlet « externe »
exécution dans un espace protégé ou non
Serveurs
Server HTTPD écrits en Java : Sun Java Web Server, W3C
Jigsaw
mais aussi Netscape, Oreilly, Apache (mod_jserv), ...
servletrunner (JSDK),
Développement
- JSDK (servletrunner)
- IBM VisualAge (visual servlet)
70
2004-2005
Servlet
Mécanismes de base
écriture d'une servlet = écriture d'une classe Java
Principe
•
les fichiers de bytecode ( .class ) sont stockés sur le serveur
(comme des docs) par convention dans le répertoire servlet/
•
ils sont désignés par une URL http:// www. lifl. fr/ servlet/
Prog
•
le chargement de l'URL provoque l'exécution de la servlet
1
Client
Serveur
4
Explorer
Netscape
Tom
cat
2
3
IIS
Apache
JVM
2004-2005
71
Prog. class
Sun
Microsoft
- Lors du premier chargement d'une servlet (ou après
modification), le moteur instancie la servlet
servlet = objet Java présent dans le moteur
- puis, ou lors des chargements suivants, le moteur
exécute le code dans une thread
- le code produit un résultat qui est envoyé au client
en cas d'erreur dans le code Java de la servlet, message
72
récupéré dans le navigateur
2004-2005
Développement
Mode d’invocation
Utilisation des packages Java javax.servlet.* et javax.servlet. http.*
•
Direct (depuis un document ou un browser)
http://machine-name:port/servlet/servlet-name
•
extension de la classe javax.servlet.http.HttpServlet
•
redéfinition de la méthode service de cette classe
•
définit le code à exécuter lorsque la servlet est invoquée
•
elle est appelée automatiquement par le "moteur " de servlet
•
void service(ServletRequest request ,ServletResponse response );
représente la requête
envoyée par le client
renseigné automatiquement
par le "moteur"
2004-2005
73
représente la réponse
retournée par la servlet
à renseigner dans le code
de la servlet
Aperçu de l’API servlet
Méthodes appelables sur un objet request
- String getParameter(String param) retourne la valeur du
champ param transmis dans les données du formulaire
- java.util. Enumeration getParameterNames() retourne
l'ensemble des noms de paramètres transmis à la servlet
- String getMethod() retourne la méthode HTTP (GET ou POST)
utilisée pour invoquer la servlet
Méthodes appelables sur un objet response
- void setContentType( String type) définit le type MIME du
document retourné par la servlet
- PrintWriter getWriter() retourne un flux de sortie
permettant à la servlet de produire son résultat la servlet
Master Informatique
75 de sortie
"print " leM1code HTML sur ce flux
2004-2005
http://localhost:8080/servlet/bookdetails?bookId=203
•
Depuis une autre servlet
BookDBServlet database = (BookDBServlet)
this.getServletConfig().getServletContext().getServlet("bookdb");
BookDetails bd = database.getBookDetails(bookId);
•
SSI
<SERVLET NAME="Date">
<PARAM NAME="TimeZone!» VALUE ="Paris" >
</SERVLET>
•
JSP (Java Server Page)
2004-2005
74
Exemple de servlet
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class HelloServlet extends HttpServlet
{
public void service(ServletRequest
request,ServletResponse response )
imposé par l’API servlet
throws ServletException,IOException
ce qui suit est en HTML
{
récupère un flux pour générer response.setContentType("text/html");
le résultat
PrintWriter out =response.getWriter();
out.println("<html><body>");
Génération du code HTML
out.println("<h1>Hello depuis une servlet</h1>");
out.println("</body></html>");
}
76
}
imposé
2004-2005
Exemple de servlet (cont.)
•
Compilation
HelloServlet. Class installé dans l'arborescence de Tomcat
•
Chargement via une URL de type http://.../ servlet/ HelloServlet
=> exécution de HelloServlet. class
2004-2005
77
Récupération des données dans
un formulaire
Méthode String getParameter( String) d'un objet request
=>retourne le texte saisi
=>ou null si le nom de paramètre n'existe pas
<HTML>
<BODY>
<FORM ACTION=« http://..."METHOD=POST>
Nom <INPUT NAME="nom"><P>
Prénom <INPUT NAME="prenom"><P>
<INPUT TYPE=SUBMIT VALUE="Envoi">
<INPUT TYPE=RESET VALUE="Remise à zéro">
</FORM>
</BODY>
</HTML>
Master
Informatique M1
79
2004-2005
Exemple 2 de servlet
Chaque servlet n'est instanciée qu’1 seule fois
persistance de ces données entre 2 invocations
public class CompteurServlet extends HttpServlet {
int compteur =0;
public void service( ServletRequest request, ServletResponse response )
throws ServletException, IOException
{
response. setContentType("text/html");
out.println("<h1>« + compteur++ +"</h1>");
out.println("</body></html>« );
}
}
1ère invocation -> 0
Master
Informatique
M1 ->1
78
2ème
invocation
2004-2005
Récupération des données dans
un formulaire (cont.)
public class CompteurServlet extends HttpServlet {
public void service(ServletRequest request,ServletResponse
response ) throws ServletException,IOException {
response.setContentType("text/html");
String nom =request.getParameter("nom");
String prenom =request.getParameter("prenom");
out.println("<h1>Exemple de résultat</h1>");
out.println("Bonjour "+prenom+""+nom);
out.println("</body></html>");
}
} Informatique M1
Master
80
2004-2005
Cycle de vie d’une servlet
void init(ServletConfig conf)
méthode appelée par le moteur au démarrage de
la servlet
peut être utilisée pour initialiser la servlet
propager l'initialisation par super. init(conf)
ne jamais utiliser de constructeur
void destroy()
lorsque l'on veut détruire la servlet
Différenciation des méthodes HTTP
service() traite toutes les requêtes HTTP
doGet(),doPut(),doPost(),doPut(),doDelete()
peuvent être redéfinies pour traiter chaque
requête HTTPde façon différenciée
2004-2005
Chaînage des servlets
GenericServlet
init()
destroy()
HttpServlet
service()
doGet()
doPut()…
MyServlet
81
Compléments sur l’API
Méthodes appelables sur un objet request
- String getProtocol()
retourne le protocole implanté par le serveur (ex.:HTTP/1.1)
- String getServerName()/String getServerPort()
retourne le nom/port de la machine serveur
- String getRemoteAddr()/String getRemoteHost()
retourne l'adresse/nom de la machine cliente (ayant invoqué la
servlet)
- String getScheme()
retourne le protocole utilisé (ex.:http ou https)par le client
- java.io.BufferedReader getReader()
retourne un flux d'entrée permettant à une servlet chainée
de récupérer le résultat produit par la servlet précédente
=> Informatique
permet à la
modifier le résultat
Master
M1 servlet chaînée de 83
2004-2005
Servlet 1
Aggrégation des résultats fournis
par plusieurs servlets
=>meilleure modularité
Servlet 4
servlet
Servlet 5
Servlet 2
=>meilleure réutilisation
Servlet 3
Utilisation d'unRequestDispatcher
obtenu via un objetrequest
RequestDispatcher rd
=request.getRequestDispatcher("servlet1" );
Inclusion du résultat d'une autre servlet
URL
rd.include(request,response);
Délégationdu traitement à une autre servlet
Master Informatique
M1
82
rd.forward(request,response);
2004-2005
Gestion de la concurrence
Par défaut les servlets sont exécutées de façon multi-threadée
Si une servlet doit être exécutée en exclusion mutuelle
(ex.:accès à des ressources partagées critiques)
implantation de l'interface marqueur SingleThreadModel
public class CompteurServlet
extends HttpServlet
implements SingleThreadModel
{
public void service(ServletRequest request,ServletResponse
response )
throws ServletException,IOException {
/**Du code en exclusion mutuelle avec lui-même */
}
}
Autre
solution
dans la servlet
Master
Informatique
M1 : définir du code synchronized
84
2004-2005
Cookie
Suivi de session
Permet à un serveur Web de stocker de l'information chez un client
•
•
•
moyen pour savoir "par où passe"un client,quand,en venant d'où,...
débat éthique ??
l'utilisateur a la possibilité d'interdire leur dépôt dans son navigateur
définis dans la classe javax.servlet.http.Cookie
•
on les crée en donnant un nom (String) et une valeur (String)
Cookie uneCookie =new Cookie("sonNom","saValeur");
•
on les positionne via un objet response
response.addCookie(uneCookie );
•
on les récupère via un objet request
Cookie[]desCookies =request.getCookies();
Quelques méthodes :String getName()/String getValue()
85
2004-2005
•
•
HTTP protocole non connecté
pour le serveur,2 requêtes successives d'un même client sont
indépendantes
Objectif : être capable de "suivre« l'activité du client sur +sieurs pages
Notion de session
=> les requêtes provenant d'un utilisateur sont associées à une même
session
=> les sessions ne sont pas éternelles, elles expirent au bout d'un délai fixé
Sur un objet request
-HttpSession session =request.getSession(true)
retourne la session courante pour cet utilisateur ou une nouvelle session
- HttpSession session =request.getSession(false)
retourne la session courante pour cet utilisateur ou null
86
2004-2005
Suivi de session
Partage de données entre servlets
Méthodes appelables sur un objet de type HttpSession
-void setAttribute(String name,Object value )
ajoute un couple (name,value) pour cette session
-Object getAttribute(String name )
retourne l'objet associé à la clé name ou null
-void removeAttribute(String name )
enlève le couple de clé (name,value)
-java.util.Enumeration getAttributeNames()
retourne tous les noms d'attributs associés à la session
-void setMaxIntervalTime(int seconds )
spécifie la durée de vie maximum d'une session
-long getCreationTime()/long getLastAccessedTime()
retourne la date de création /de dernier accès de la session en
ms depuis le 1/1/1970,00h00 GMT_new Date(long)
Notion de contexte d'exécution
2004-2005
87
=ensemble de couples (name,value)partagées par toutes les servlets
instanciées
ServletContext ctx =getServletContext()(héritée de GenericServlet)
Méthodes appelables sur un objet de typeServletContext
-void setAttribute(String name,Object value )
ajoute un couple (name,value) dans le contexte
-Object getAttribute(String name )
retourne l'objet associé à la clé name ou null
- void removeAttribute(String name )
enlève le couple de clé name
- java.util.Enumeration getAttributeNames()
retourne tous les noms d'attributs associés au contexte
2004-2005
88
Conclusion servlet
Moteurs de servlet
Permettent d'étendre le comportement des serveurs
Web avec des prog. Java
Jakarta/Tomcat (jakarta.apache.org)
Résumé des fonctionnalités
+portabilité,facilité d'écriture (Java)
+gestion des applications requiérant un suivi entre
plusieurs programmes
(persistance des données dans les servlets)
+servlet chargée et instanciée une seule fois
+servlet exécutée avec des processus légers
(threads)
2004-2005
89
RESIN (www.caucho.com)
….
Bibliographie
•
J. Hunter with W. Crawford « Java Servlet Programming »,
1st edition, nov 98, ed O’Reilly
•
C. Taylor, T.Kimmett « Core Java Web server », nov 98, Ed
Prentice Hall
•
Tutorial Java de Sun sur les servlet
•
De nombreux sites proposent les sources de Servlet
http://www.servlet.com
2004-2005
90

III. L`environnement Web Au sommaire 1. Introduction 1. Introduction

Transcription

Documents pareils

Applications WEB à base de Servlets

Formular Flugreisen

Développement Web

SERVLET TP 1 Installation du JDK Installation de Glassfish

Demande d`un Extrait du Casier Judiciaire

Formulaire d`inscription/ Registration Form

Dátum narodenia

Les Servlets

C:\Documents and Settings\000125694\Local Settings\Temp

Soirée Cabaret à l`Ange Bleu

FedEx Ground shipments only

INN request - Extranet Systems

Les servlets

ADAC Medikamentenmitnahme