You are on page 1of 29

Plan

Š Concepts du Web
Techniques de Connexion
Web et Bases de Données Š Protocle HTTP

Introduction Š Langage HTML

Sadok Ben Yahia, PhD Š Rappel de notions de bases de données


sadok.benyahia@fst.rnu.tn

Département d’Informatique Š Intégration Web et Bases de données


Fac. Sces. Tunis

© Sadok Ben Yahia Fac Sces Tunis 2

WWW : World Wide Web

‰Créé en 1989 au CERN par Tim Berners-Lee


Mettre en ligne de la documentation (initialement technique pour physiciens)
‰Services de l'Internet
‰ Web

‰ Messagerie
Concepts de Web
‰ Transfert de fichiers (FTP)
‰ Internet, Web, HTML ‰ Forum de nouvelles (news), de discussion (chat)
‰HTTP
‰Principes du Web
‰ Hypertexte : HTML

‰ Client/serveur : HTTP

‰ Schéma de désignation : URL

© Sadok Ben Yahia Fac Sces Tunis 3 © Sadok Ben Yahia Fac Sces Tunis 4

1
Hypertexte Client/serveur
‰ Texte "normal "
Client : le navigateur (Internet Explorer, Netscape, ...)
‰ organisation linéaire
Serveur : le serveur Web (Apache, Microsoft IIS, ...)

‰ éventuellement renvois sous forme de sommaires, index, notes de bas de Le client émet une requête
page
requête
‰ Hypertexte
Client HTTP
Serveur Web

‰ organisation pas forcément linéaire réponse :


document HTML
‰ texte enrichi de liens
Ö renvoi vers un document Le serveur répond en fournissant le document demandé ou un
message d'erreur si le document n'existe pas
Ö renvoi vers une partie du même document

Ö renvoi vers une partie d'un autre document


© Sadok Ben Yahia Fac Sces Tunis 5 © Sadok Ben Yahia Fac Sces Tunis 6

Schéma de désignation : Uniform Resource Locator (URL) Compléments sur les URL’s
Eléments constitutifs (optionnels) d'une URL
Permet de désigner une page Web protocole:// protocoles utilisables : HTTP, FTP, MAILTO, FILE, NEWS
Chaque page a un nom unique Ö pas d'ambiguïté possible utilisateur@ login pour les pages protégées
Protocole : // serveur / page serveur nom ou adresse IP (ex. : 163.136.27.6 ) du serveur

http://www.fst.ca/index.html :numéro numéro de port TCP du serveur


/répertoire chemin d'accès dans la hiérarchie de répertoires
fichier nom du document à atteindre

Organisation hiérarchique possible pour les pages (=hiérarchie fichier #signet signet dans le document à atteindre
disque) ?options information transmise au serveur (ex. : formulaire)

Protocole :// serveur / répertoire / ... / page Exemple


http://www.ulaval.ca/papers/2002/index.html
http://user1@12.7.6.1:8080/pub/cv.html#diplomes
ftp://anonymous@ftp.fst.ca
http://www.altavista.com/query.html?erty
© Sadok Ben Yahia Fac Sces Tunis 7 © Sadok Ben Yahia Fac Sces Tunis 8

2
Structure d'un document HTML HTML : Règles de balisage
Déclaration version HTML utilisée
<! DOCTYPE ….> Deux types de balises :
En-tête <HtML>
<HEAD> ‰autonome < .. > (ex. : <DOCTYPE >)
Corps du document En-tête
‰délimitant une zone
</HEAD>
<BODY> ‰balise de début de zone < ... > (ex. : <HTML> )
Corps du document
</BODY>
‰balise de fin de zone </… > (ex. : </HTML> )
</HTML>

‰Identifiants de balise non sensibles à la casse (<BODY> =


‰ Déclaration de version et en-tête facultatifs <Body>)
‰ Absence de corps Ö document vide (sauf cas spéciaux, ex.: frames)

© Sadok Ben Yahia Fac Sces Tunis 9 © Sadok Ben Yahia Fac Sces Tunis 10

HTML : Règles de balisage HTTP: Hypertext Transfert Protocol


Protocole réseau d’échange de l’information sur le Web
certaines balises sont associées à un ou plusieurs attributs :
Principe de base
chaque attribut à un identifiant et une valeur (entre " " et après = )
‰ un couple requête/réponse par document à charger
ex. : <IMG SRC="photo.gif" ALT="une photo"> ‰ + autant de req./rép. qu'il y a d'éléments inclus (images, frames, sons,
...)

‰ commentaires <!- - ceci est un commentaire - - >

Explorer Client Web IIS


…….
‰ encodage de caractère & ... ;
Netscape
…..
Apache
...

<>& &lt; &gt; &amp


Les éléments inclus sont désignés par des URLs
Ils peuvent être localisés :
caractères accentués & lettre accent ; - sur le même site (que le document) et dans le même répertoire
- sur le même site mais dans un répertoire différent
éàô &eacute; &agrave &ocirc; - sur un site différent

© Sadok Ben Yahia Fac Sces Tunis 11 © Sadok Ben Yahia Fac Sces Tunis 12

3
Le protocole HTTP Déroulement d’une requête HTTP

client serveur
Š Définit le langage utilisé pour les échanges entre client et on
se
HTTP
démon
serveur Web rép

HTTPD

‰version 0.9
9 simple protocole de transfert de données (GET et réponse) Š Demande de connexion
‰version 1.0
9 restée un Internet Draft (RFC 1945)
Š Attente de la réponse du serveur
‰actuellement version 1.1 Š Établissement de la connexion
9 RFC 2616 (juin 1999)
Š Envoi d’une requête (URL)
Š Pas de session permanente entre client/serveur Š Réponse du serveur
Š Affichage de la réponse
Š Fermeture de la connexion
© Sadok Ben Yahia Fac Sces Tunis 13 © Sadok Ben Yahia Fac Sces Tunis 14

Déroulement d’une requête HTTP Exemple de transaction HTTP

client serveur % telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur web

se
protocole
on
démon
rép
sans état HTTPD

Š Demande de connexion
Š Attente de la réponse du serveur
Š Établissement de la connexion
Š Envoi d’une requête (URL)
Š Réponse du serveur
Š Affichage de la réponse
Š Fermeture de la connexion
© Sadok Ben Yahia Fac Sces Tunis 15 © Sadok Ben Yahia Fac Sces Tunis 16

4
Exemple de transaction HTTP Exemple de transaction HTTP
% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur web % telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur web
Trying 148.60.4.30... Trying 148.60.4.30...
Connected to apollon.univ-tunis1.tn. Connected to apollon.univ-tunis1.tn
Escape character is '^]'. Escape character is '^]'.
GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfert
Host: apollon.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nom du serveur
From: pa@ifsic.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle)

(ligne blanche = fin de l’entête HTTP de la requête)

© Sadok Ben Yahia Fac Sces Tunis 17 © Sadok Ben Yahia Fac Sces Tunis 18

Exemple de transaction HTTP Exemple de transaction HTTP


% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur web % telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur web
Trying 148.60.4.30... Trying 148.60.4.30...
Connected to apollon.univ-tunis1.tn. Connected to cck.univ-tunis.tn.
Escape character is '^]'. Escape character is '^]'.
GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfert
GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfert
Host: cck.univ-tunis.fr . . . . . . . . . . . ………... . . . . . . . . . . . . . . . . . . . nom du serveur
Host: apollon.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nom du serveur From: sad@fst.univ-tunis.fr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle)
From: pa@ifsic.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle)
(ligne blanche = fin de l’entête HTTP de la requête)
(ligne blanche = fin de l’entête HTTP de la requête)
HTTP/1.1 200 OK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse du serveur
HTTP/1.1 200 OK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse du serveur Date: Tue, 02 Jun 2001 14:11:17 GMT
Date: Tue, 02 Jun 2001 14:11:17 GMT Server: Apache/1.3b6
Server: Apache/1.3b6 Last-Modified: Mon, 07 Apr 2001 10:39:08 GMT . . . . . . . . . . . . . informations sur la ressource
Last-Modified: Mon, 07 Apr 2001 10:39:08 GMT . . . . . . . . . . . . . informations sur la ressource ETag: "b3dd-524-33b78ccc"
ETag: "b3dd-524-33b78ccc" Content-Length: 1316 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . taille de la ressource
Accept-Ranges: bytes
Content-Length: 1316 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . taille de la ressource
Content-Type: text/html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . type MIME
Accept-Ranges: bytes
(ligne blanche = fin de l’entête HTTP de la réponse)
Content-Type: text/html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . type MIME
(ligne blanche = fin de l’entête HTTP de la réponse) <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> (contenu)
<HTML>
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> (contenu) ….
<HTML> </HTML>
…. Connection closed by foreign host. fermeture de la connexion
</HTML>

© Sadok Ben Yahia Fac Sces Tunis 19 © Sadok Ben Yahia Fac Sces Tunis 20

5
Requête HTTP Requête HTTP (2)
Permet d'envoyer des commandes au serveur Web
3 commandes principales (présentes dans HTTP/1.0 et 1.1) Pour les commandes POST, informations supplémentaires nécessaires
Format de la requête (plusieurs lignes)
GET : demande d'un document
HEAD : demande de l'en-tête (HTTP) d'un document
POST : dépose d'information sur le serveur commande URL version HTTP comprise par le client

ligne blanche

GET : requête principale, 80 % des requêtes Web Informations envoyées par le client
HEAD : au travers de l'en-tête, permet de savoir si un document a changé
POST : envoi de d'information saisie dans un formulaire client

POST /cgi-bin/prog.exe HTTP/1.1


Format de la requête (1 ligne) Nom=XXX&Prenom=YYTZl

commande URL version HTTP comprise par le client


GET /index.html HTTP/1.1
© Sadok Ben Yahia Fac Sces Tunis 21 © Sadok Ben Yahia Fac Sces Tunis 22

Réponse HTTP (1) Réponse HTTP (2)


La réponse du serveur Web à une commande
code retour : renseigne sur le succès (200) ou l'échec (4xx) de la requête
Format de la réponse (plusieurs lignes)
en-têtes HTTP : informations transmises par le serveur sur le document envoyé

version HTTP du serveur code retour commentaire Exemple d'en-têtes

en-tête 1 HTTP: valeur


.... •Content-Length : taille du document
en-tête n HTTP: valeur
•Last-Modified : date de dernière modification du document
document texte (HTML) ou binaire (GIF, JPG)
•Server : nom du logiciel serveur

HTTP/1.1 200 OK •Expire : date d'expiration du document


Content-Length: 9872
Content-Type: text/html •Content-Type : type MIME ( Multipurpose Internet Mail Extensions) du

<HTML> document
....
</HTML> Nombreux autres en-têtes possibles
© Sadok Ben Yahia Fac Sces Tunis 23 © Sadok Ben Yahia Fac Sces Tunis 24

6
Réponse HTTP (3) Les codes de réponse sous HTTP

‰ Type (MIME) du document : Classification des documents de la


forme : médium/format Š 10x : information
‰ text/html : document texte HTML Š 20x : succès
‰ text/plain : document texte "brut" 200 OK
Š 30x : redirection
‰ image/gif : image GIF 301 Moved permanently
‰ image/jpeg : image JPEG Š 40x : erreur du client
401 Unauthorized
‰ audio/wav : fichier son au format .wav 402 Payment required
‰video/mpeg : fichier vidéo au format .mpeg 403 Forbidden
404 Not found
‰ application/ps : fichier généré par une application au format Š 50x : erreur du serveur
PostScript 500 Internal server error
‰application/octet-stream : fichier d'octets "brut"
+ nombreux autres types existants
© Sadok Ben Yahia Fac Sces Tunis 25 © Sadok Ben Yahia Fac Sces Tunis 26

Mise en forme du texte


Š Gras[Bold] <B>...</B>
<STRONG>...</STRONG> Début et fin de zone en gras

Š Italique[Italic] <I>...</I>
<EM>...</EM> Début et fin de zone en italique

Š Taille de caractère[Font size] <FONT SIZE=?>...</FONT> Début et fin


Le language (HTML): Hypertext Markup de zone avec cette taille
Language
Š Couleur de caractère[Font color] <FONT COLOR="#$$$$$$"> </FONT>
Début et fin de zone en couleur

Š A la ligne[Line break] <BR> Aller à la ligne

Š Commentaires[Comments] <!-- *** -->Ne pas afficher


Š Centrage[Center] <CENTER></CENTER> Centrer

© Sadok Ben Yahia Fac Sces Tunis 27 © Sadok Ben Yahia Fac Sces Tunis 28

7
Les titres Les titres

Š Liste ordonnée[Numbered list]<OL></OL>:Afficher le


Š En-têtes [Heading] <Hn></Hn> avec n=1 à 6 : Afficher une en-tête de
texte sous forme d'une liste ordonnée.
niveau n et sauter une ligne
Š Elément de liste[List items] : <LI>Voici un élément de la
Š Liste non-ordonnée [Bullet list]<UL></UL> :Afficher le texte sous liste

forme d'une liste non-ordonnée. Š Paragraphe[Paragraph] <P></P>:Saut de ligne, insérer


une ligne vierge et commencer un paragraphe

© Sadok Ben Yahia Fac Sces Tunis 29 © Sadok Ben Yahia Fac Sces Tunis 30

Les titres: exemple Les images


<H1>Les mois du printemps</H1> <IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...
<UL><LI>avril
<LI>mai La balise image possède de nombreux attributs.
<LI>juin</UL>
<P> Texte alternatif alt="**** Ö Pour les browser n'ayant pas l'option "image"
<H3>Les mois d'automne</H3> activée
<OL><LI>octobre
Dimensions width=?
<LI>novembre
<LI>d&eacute;cembre</OL> Height=? Hauteur et largeur (en pixels)

Bordure border=? (en pixels)

Alignement align=top
align=middle
align=botton
align=left
align=right

© Sadok Ben Yahia Fac Sces Tunis 31 © Sadok Ben Yahia Fac Sces Tunis 32

8
Les images … Les tableaux
L'attribut align positionne l'image par rapport au texte : [Table] <TABLE></TABLE>Début et fin de tableau

<IMG SRC="HELP.gif" align=TOP>Fichier d'aide Définition d'une ligne[Table Row] <TR></TR>Début et fin de ligne

<IMG SRC="HELP.gif" align=CENTER>Fichier d'aide Définition d'une cellule[Table Data] <TD></TD>Début et fin de cellule

<IMG SRC="HELP.gif" align=BOTTOM>Fichier d'aide

<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

Image et lien: <A HREF="MaVille.htm"><IMG SRC="STAQUET.gif"></A>

© Sadok Ben Yahia Fac Sces Tunis 33 © Sadok Ben Yahia Fac Sces Tunis 34

Les tableaux Les tableaux …


Š L'espace entre les cellules ou l'épaisseur des lignes du quadrillage
<TABLE cellspacing=?>
Bordure de cadre
[Border] <TABLE border=?></TABLE> Š La largeur de la table <TABLE width=?> <TABLE width=%>

<TABLE border=2 cellspacing=10>


<TR><TD>1</TD><TD>2</TD></TR>
<TABLE border=2> <TR><TD>3</TD><TD>4</TD></TR>
<TR><TD>1</TD><TD>2</TD></TR> </TABLE>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

© Sadok Ben Yahia Fac Sces Tunis 35 © Sadok Ben Yahia Fac Sces Tunis 36

9
Les tableaux … Les tableaux: Atelier
Š L'enrobage des cellules ou l'espace entre le bord et le contenu Š Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois
<TABLE cellpadding=?> colonnes égales

<CENTER><TABLE width=60% border=1>


<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TABLE border=2 cellpadding=10> <TD>3</TD>
<TR><TD>1</TD><TD>2</TD></TR> </TR>
<TR><TD>3</TD><TD>4</TD></TR> </TABLE></CENTER>
</TABLE>
Š Ajoutons la balise de largeur de la cellule
CENTER><TABLE width=60% border=1>
<TR>
<TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>

Š Je veux ce tableau
© Sadok Ben Yahia Fac Sces Tunis 37 © Sadok Ben Yahia Fac Sces Tunis 38

Les tableaux: Atelier Formulaires


Š Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc
déborder sur 3 cellules horizontales
<CENTER><TABLE width=60% border=1> „ Un formulaire est défini en HTML et peut contenir
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR> <TD width=33%>cellule 1</TD>
<TD width=33%>cel 2</TD>
„ zones de saisie de texte
<TD width=34%>3</TD>
</TR> </TABLE></CENTER>
Š Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La „ boîtes à cocher (check box)
première cellule doit donc déborder sur 2 cellules

<CENTER><TABLE width=60% border=1>


<TR>
<TD width=33% rowspan=2>cellule 1</TD> „ boutons radio (option button)
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR> „ menus déroulants
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR> </TABLE></CENTER>

„ boutons
Š Tester cette instruction <TD colspan=3 align=center bgcolor="#0000FF">
© Sadok Ben Yahia Fac Sces Tunis 39 © Sadok Ben Yahia Fac Sces Tunis 40

10
Formulaires : Balises Exemple de formulaire HTML
Š Déclaration d'un formulaire <FORM … /FORM> < FORM ACTION="http://monserveur.com/cgi-bin/prog.exe" METHOD=POST>
Nom
<INPUT NAME="client" SIZE=46>
Š Attributs principaux ( <FORM ACTION=… METHOD=… Rue
<INPUT NAME="rue" SIZE=40>
NAME=…> Ville
<INPUT NAME="ville" SIZE=20>
Code postal
‰ACTION :URL vers laquelle envoyer les données saisies <INPUT NAME="cp" SIZE=5>
Carte de crédit No
‰METHOD: commande HTTP à utiliser pour effectuer l'envoi <INPUT NAME="carte" SIZE=10>
Expire
⇒POST <INPUT NAME="expire" TYPE=TEXT SIZE=4>
M/C
‰ NAME : nom du formulaire <INPUT NAME="cc" TYPE=RADIO VALUE="mc" CHECKED>
VISA
<INPUT NAME="cc" TYPE=RADIO VALUE="vis">
‰TARGET : nom de la frame dans laquelle le résultat doit Contre remboursement
<INPUT NAME="cr" TYPE=CHECKBOX>
être affiché <INPUT TYPE=SUBMIT VALUE="Envoi">
<INPUT TYPE=RESET VALUE="Remise à zéro">
</FORM>
© Sadok Ben Yahia Fac Sces Tunis 41 © Sadok Ben Yahia Fac Sces Tunis 42

Formulaires : Balises
Exemple de formulaire HTML
Š Déclaration d'un formulaire <FORM … /FORM>

Š Attributs principaux ( <FORM ACTION=… METHOD=… NAME=…>

‰ACTION :URL vers laquelle envoyer les données saisies


‰METHOD: commande HTTP à utiliser pour effectuer l'envoi ⇒POST

‰ NAME : nom du formulaire


‰TARGET : nom de la frame dans laquelle le résultat doit être affiché
Š toutes les balises HTML sont permises entre <Form … /FORM> ⇒ images,
tableaux, ... peuvent être inclus dans un formulaire

Š des formulaires peuvent être insérés à l'intérieur d'un autre formulaire web

© Sadok Ben Yahia Fac Sces Tunis 43 © Sadok Ben Yahia Fac Sces Tunis 44

11
Les formulaires : Balise INPUT Formulaire: Envoi des données au serveur

Déclaration des champs de saisie (exclusivement entre <FORM … /FORM>) Š Lorsque l'utilisateur appuie sur le bouton SUBMIT, le navigateur :
‰construit une chaîne de caractères contenant toutes les données du formulaire
NAME : nom du champ de saisie (unique à l'intérieur d'un formulaire)
TYPE : type du champ de saisie
‰ envoie cette chaîne au serveur
Š Cette chaîne :
ŠTypes possibles ( TYPE=... ) ‰ensemble de couples séparées par le caractère &
‰chaque couple est de la forme nom de champ = valeur saisie
‰TEXT : zone de saisie texte (type par défaut en cas d'omission de TYPE) ‰les espaces sont remplacés par le caractère +
‰SIZE : taille de la zone
‰RADIO : bouton radio tous les boutons ayant même nom (NAME) ∈ au même Š Exemple (1 seule ligne)
groupe dans ce cas, les attributs (VALUE) permettent de les différencier client=XXY+AZERTY&rue=5410+rue+Gambetta&ville=Quebec&
‰CHECKBOX : boîte à cocher cp=G1S3E5&carte=0123456789&cc=visa&cr=on

‰SUBMIT : bouton d'envoi des données au serveur


‰RESET : bouton d'effacement du formulaire Š Rq : pour les boîtes à cocher = on si cochée, rien sinon

© Sadok Ben Yahia Fac Sces Tunis 45 © Sadok Ben Yahia Fac Sces Tunis 46

Autres types possibles pour la balise INPUT Autres types possibles pour la balise
<FORM ACTION=prog.exe" METHOD="POST">
Mot de passe <INPUT TYPE= PASSWORD NAME=" passe" SIZE= 16> <P>
HIDDEN : champ caché TEXTAREA : zone
Sélectionner un fichier <INPUT TYPE= FILE NAME=" fichier"> <P> transmission de saisie d'un texte
d'informations "furtives" sur plusieurs
<INPUT TYPE= SUBMIT VALUE="Envoi"> FILE : sélection lignes
dans une chaîne de
d'un fichier à formulaires
<INPUT TYPE= RESET VALUE=" Remise à zéro"> <P> envoyer
</FORM>

BUTTON : un bouton simple !


SELECT: définition d'un menu association avec un traitement
PASSWORD :zone déroulant JavaScript ou Vbscript
de saisie d'un mot de
passe

© Sadok Ben Yahia Fac Sces Tunis 47 © Sadok Ben Yahia Fac Sces Tunis 48

12
Autres types possibles pour la balise Les CSS: pourquoi
<FORM> Š Objectif: fournir un mécanisme pour associer différents styles
Champ caché <INPUT TYPE= HIDDEN NAME="cache" VALUE="toto"> <P> à un même document
<INPUT TYPE= BUTTON VALUE=" Cliquez" onClick=" fonctionJavaScript()" >
TEXTAREA NAME=" zone" ROWS= 3 COLS= 40> texte initial< /TEXTAREA >
<P>
<SELECT NAME=" musicTypes">
<OPTION > R&B Article
<OPTION > Jazz
<OPTION > Blues
Présentations
<OPTION > New Age
<INPUT TYPE= SUBMIT VALUE=" Envoi">
<INPUT TYPE= RESET
VALUE=" Remise à zéro"> <P>
</FORM> Contenu
...

© Sadok Ben Yahia Fac Sces Tunis 49 © Sadok Ben Yahia Fac Sces Tunis 50

Exemple Utilité et avantages


Š il arrive fréquemment que l'on attribue à certains éléments des caractéristiques de mise en
forme identiques. Par exemple, les noms de chapitres seront mis en police Arial, en gras et Š Séparation du contenu et de la mise en forme.
en couleur bleue.

Š Cohésion de la présentation tout au long du site avec les feuilles de style


Š Appeler cette mise en forme "titre" Ö l’appliquer à chaque nouveau chapitre
externes.

Š Cette définition de mise en forme particulière, on va l'appeler feuille de style.


Š Idée reprise de MS-WORD Š Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et cela en

quelques lignes plutôt que de devoir changer un grand nombre de balises.


<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1> STYLE des titres
<H2><B><FONT COLOR="green">- A -</FONT></B></H2> STYLE des sous-titres
<H3><B><FONT COLOR="red">...a....</FONT></B></H3> STYLE du texte
<H1><B><FONT COLOR=blue>Titre2</FONT></B></H1> STYLE des titres Š Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à
<H2><B><FONT COLOR="green">- B-</FONT></B></H2> STYLE des sous-titres
<H3><B><FONT COLOR="red">...b....</FONT></B></H3> STYLE du texte
ses différentes versions.

© Sadok Ben Yahia Fac Sces Tunis 51 © Sadok Ben Yahia Fac Sces Tunis 52

13
Définitions

‰ Données : faits qui peuvent être enregistrés et qui ont une signification
implicite

Ex: Noms, adresses, n° de tél., salaires du personnel d ’une

entreprise

Introduction aux bases de données ‰ Base de Données (BD) : Un ensemble logiquement cohérent de
données. Conçu et construit à partir de données pour un besoin

spécifique.

Ex: Le personnel d ’une entreprise, une bibliothèque, un stock de

produits, etc.

© Sadok Ben Yahia Fac Sces Tunis 53 © Sadok Ben Yahia Fac Sces Tunis 54

Définitions Niveaux de représentation d ’une BD Relationnelle (Exemple)

Etudiant Etudiant
Niveaux de représentation d’une BD Relationnelle
Nom Nom
Prénom Prénom
‰ Schéma interne : Description des données en termes de ddn ddn
login login
représentation physique en machine Date d ’entrée Date d ’entrée
ID ID
Gestion des
‰ Schéma conceptuel : Description des données indépendamment de inscriptions
Insc_examen
la manipulation qui en sera faite Ex: Personne(nom, prénom, ddn, ID, Gestion Intitulé (Cours) Suit
des examens ID (Etudiant)
Salaire,…)
Cours
‰ Schéma externe : Description externe d’une partie de la BD Gestion
Etudiant
des comptes Intitulé
Nom
correspondant à une vision particulière d ’un utilisateur ou d ’une informatiques Prénom
Enseignant
Assistant
login
application
Application Niveau logique Niveau Conceptuel
© Sadok Ben Yahia Fac Sces Tunis 55 © Sadok Ben Yahia Fac Sces Tunis 56

14
Système de fichiers vs Bases de Données Définition SGBD

Applications Données
Ensemble de programmes qui permettent de
Gestion des Gestion des
inscriptions inscriptions

Gestion Gestion
‰Définir une BD : structure de données, schéma conceptuel
des examens des examens SGBD

‰Construire une BD : stockage dans un support physique,


Gestion Gestion
des comptes des comptes ‰Manipuler les données: effectuer des requêtes, mettre à jour,
informatiques informatiques
etc.
–couplage fort données/programmes
–redondance des données
–faible partage des données entre applications Ex: MS SQL Server, MS Access, Oracle, Sybase, etc.
–coûts élevés de développement et de maintenance

© Sadok Ben Yahia Fac Sces Tunis 57 © Sadok Ben Yahia Fac Sces Tunis 58

Fonctions d’un SGBD Objectifs d’un SGBD

‰ Description des données ‰ Indépendance physique

‰ Recherche des données ‰ Changer les structures internes sans remettre en cause les entités et

‰ Mise à jour des données relations définies au niveau conceptuel

‰ Transformation des données ‰ Possibilité d ’opérer des améliorations de bas niveau sans affecter le

‰ Passage d’un niveau de représentation à un autre reste du système d ’information

© Sadok Ben Yahia Fac Sces Tunis 59 © Sadok Ben Yahia Fac Sces Tunis 60

15
Objectifs d’un SGBD Objectifs d’un SGBD

‰ SUPPORT DE TRANSACTIONS ACID


‰ Indépendance logique

‰ Indépendance entre la manière dont les données sont représentées ‰ Atomique (tout ou rien)

et l’utilisation faite de ces données.


‰ Cohérente (respect de l'intégrité)

‰ Indépendance entre les applications manipulant ces données


‰ Isolée (non visibilité des mises à jour non commise)
‰ Manipulation des données par des langages non-procéduraux ( Ex:

‰ Durable (garantie des mises à jour commises)


SQL, QBE)

© Sadok Ben Yahia Fac Sces Tunis 61 © Sadok Ben Yahia Fac Sces Tunis 62

Objectifs d’un SGBD Architecture 2-tiers

‰ Une architecture 2-tiers est composée de deux éléments, un client


‰ PARTAGEABILITÉ ET SÉCURITE DES DONNÉES et un serveur et où le tiers fait référence non pas à une entité
physique mais logique

‰ Simultanéité lecture/écriture maximum


BD
BD
Client
Client Serveur
Serveur

‰ Accès transactionnels & décisionnels


Serveur
Serveur
Client
Client Serveur Serveur
Serveur
Serveur
‰ Confidentialité (authentification, droits d'accès, cryptage) de
deBD
BD

‰ Restauration après pannes (journaux, sauvegardes) Contexte Base de données

© Sadok Ben Yahia Fac Sces Tunis 63 © Sadok Ben Yahia Fac Sces Tunis 64

16
Architecture 2-tiers Architectures de Bases de Données

‰ Caractéristiques :
‰La fonction de présentation est à la charge du client exclusivement.
Affichage et saisie des données
‰Le calcul (processing) est réparti entre le client et le serveur
‰Le logiciel client est généralement spécifique au serveur Client
Connexion, exécution de requêtes, Application
‰Les données sont stockées ou accessibles via le serveur traitement des résultats
API de La BD
‰Le serveur est polyvalent (capable de fournir directement
Connexion aux sources de
l'ensemble des ressources demandées par le client) données, lecture et écriture du
protocole de données
SGBD
‰ Le client assume des tâches de : Exécution des commandes pour Serveur
le client est dit "lourd " l’accès aux données
‰présentation
‰ processing,
‰Communication avec le serveur

© Sadok Ben Yahia Fac Sces Tunis 65 © Sadok Ben Yahia Fac Sces Tunis 66

Composants d’un Système de Bases de données Composants d’un Système de Bases de données

Serveur
Application : Ensemble de programmes qui permettent :

‰ d ’interagir avec l ’utilisateur via une interface graphique ‰Le logiciel qui exécute les commandes pour accéder aux données.
Il comprend d ’autres composants fournissant des services de
‰d’envoyer des requêtes aux bases de données et de traiter les
réponses gestion des données (sécurité, transactions, reprise après panne,
Ex: gestion des ressources humaines, gestion de stocks, tableurs, etc. etc.)

‰Le support physique de stockage (Là ou sont physiquement


API (Application Programming Interface) : Ensemble de méthodes stockées les données)
prescrites par un SGBD qui permettent :
Ex: Microsoft SQL Server, Oracle, etc
‰ d’établir une connexion, d’arrêter une connexion,
‰ de formuler des requêtes aux BD et de recevoir les réponses

© Sadok Ben Yahia Fac Sces Tunis 67 © Sadok Ben Yahia Fac Sces Tunis 68

17
Intégration Web et Bases de Données Intégration Web et Bases de Données

Pourquoi intégrer Web et BD ?


Trois aspects

?
Internet www.tnw.tn

WEB Pourquoi ? Bases de données

Comment ? Production
Accès Distribution

© Sadok Ben Yahia Fac Sces Tunis 69 © Sadok Ben Yahia Fac Sces Tunis 70

Pourquoi une intégration Web/BD ? Pourquoi une intégration Web/BD ?


(Production) (Production)
‰ Ressources de données diverses
‰ Grande quantité de données (Ex: moteurs de recherche, grands sites
) BD? une Intégration de données simplifiée
commerciaux, etc. )
‰ Utilisation de données existantes
) BD? une meilleure gestion des données ) BD? développement d’applications sans modification des structures de
données
‰ Données volatiles (Ex: disponibilité de produits, données financières,
‰ Réduction des coûts de développement
news, etc. )
) WEB? utilisation des browsers
) BD? Une meilleure gestion de la mise à jour ‰ Mise en œuvre d ’applications évoluées ( ex: personnalisation, prédiction
des comportements)
‰ Données complexes (Ex: horaires de train, données techniques )
) BD? servir des applications complexes telles que les applications d ’analyse de
données (datamining)
) BD? Une meilleure structuration des données ? un meilleur traitement
© Sadok Ben Yahia Fac Sces Tunis 71 © Sadok Ben Yahia Fac Sces Tunis 72

18
Exemple : Le site de SNCFT Pourquoi une intégration Web/BD ?

(Distribution)
Gestion des
horaires
‰ Faibles coûts de déploiement
Gestion
www.sncft.tn des
réservations ‰ Les utilisateurs n’ont pas besoin d’accéder directement
aux applications de la BD. Un Browser suffit
Statistiques
des
ventes ‰Gestion de versions des applications
‰Pas de mise à jour du côté client
Informations
‰Distribution universelle
© Sadok Ben Yahia Fac Sces Tunis 73 © Sadok Ben Yahia Fac Sces Tunis 74

Pourquoi une intégration Web/BD ? Exemples d’applications Web/BD


(Distribution)
‰ Commerce Electronique
‰Gestion des commandes en ligne
‰ Indépendance de la plate-forme ‰Catalogues commerciaux. Prix et disponibilité de produits
‰ Service après-vente
‰ Production
‰ disponibilité des browsers pour l’utilisation finale
‰ feedback, propositions d ’amélioration
‰ Administration
‰ Accès simplifié aux données : hypertexte, formulaires simples.
‰ Inscriptions à distance
‰ Finances
‰ Complexité transparente ‰ Rapports financiers en ligne
‰ Enseignement
‰ Dictionnaires en ligne, Cours en ligne

© Sadok Ben Yahia Fac Sces Tunis 75 © Sadok Ben Yahia Fac Sces Tunis 76

19
Une nouvelle génération d ’applications Web/BD Architectures 3 tiers
Le Web: un moyen de capture du comportement, des goûts et des opinions des
utilisateurs

Objectifs: Processus d'interaction Processus de traitement Processus de Données


utilisateur
‰Améliorer la qualité des produits : analyse de la navigation dans l’aide en
Processus d'utilisation
ligne
‰Améliorer l’accès : analyse des chemins de navigation dans un site Poste client Moniteur transactionel SGBD Données

(Ex:National semiconductors est passée d ’une moyenne de 7 à 2 pages visitées) GUI


Application

‰Capturer de modèles de comportement ( Ex :Le site de Times prédit le


comportement avec 50 à 70 % de précision => publicité ciblée )
1er Tier 2nd Tier 3ème Tier
‰Prendre de décisions stratégiques : (ExDell a capturé grâce au Web le Serveur d'affichage
désintéressement des clients professionnels envers les Network Computers Client d'affichage
Serveur de traitement
Client de données
Serveur de données
‰ Moyens: Client de traitement

‰SGBD (Oracle, Sybase, etc)


‰Outils d ’analyse de données
© Sadok Ben Yahia Fac Sces Tunis 77 © Sadok Ben Yahia Fac Sces Tunis 78

Architecture 3-tiers (1) Architecture 3-tiers (1)

1. Le client: le demandeur de ressources


Le client qui n'a donc que des fonctions d'affichage ne fait que des
2. Le serveur d'application (middleware): le serveur chargé de
Fournir la ressource mais faisant appel à un autre serveur 1 requêtes vers le serveur, aucun calcul n'est effectué par le client.
3. Le serveur secondaire (généralement un serveur de base de données)
fournissant un service au premier serveur Les résultats de ses requêtes sont ensuite affichées.

C'est le serveur qui va effectuer tous les calculs ou faire des

2 requêtes vers d'autres serveurs additionnels (eg vers des


‰une plus grande flexibilité/souplesse
‰une plus grande sécurité (la sécurité peut être définie pour chaque service) SGBD).
‰de meilleures performances (les tâches sont partagées)

© Sadok Ben Yahia Fac Sces Tunis 79 © Sadok Ben Yahia Fac Sces Tunis 80

20
Architecture 3-tiers (2) Une nouvelle génération d ’applications Web/BD

Ce tiers serveur (qui est souvent un serveur Web) se caractérise

notamment par : Pages visitées

1. avoir été codé dans un langage présentant une forte

3 portabilité et non propriétaire tel que le langage C,


Historique des achats
2. être multitrhread et pouvant être ainsi accessible par de

multiple clients (typiquement un serveur Web),

3. des requêtes clients via divers mécanismes allant du RPC


Catalogues •Prédiction des achats
(Remote procedure Call) au HTTP via du HTML, PHP etc. •Etude de la réaction aux offres

© Sadok Ben Yahia Fac Sces Tunis 81 © Sadok Ben Yahia Fac Sces Tunis 82

Intégration Web et BD Architecture Web

1er tronçon
Web Statique
Url

Navigateur Serveur Web


Système Fichier HTML
Statiques
2ème tronçon
HTTP de fichiers HTTP/
Fichier HTML
html
Client Serveur
Web
CGI
Connexion
Processus d’utilisation
spécifique
Logiciel
passerelle

‰Comment créer des interfaces entre le Web et les bases de données ?

‰Une multitude de solutions Connexion


virtuelle
© Sadok Ben Yahia Fac Sces Tunis 83 © Sadok Ben Yahia Fac Sces Tunis 84

21
Types d ’interfaces Web / BD: CGI Types d ’interfaces Web / BD: CGI
CGI ( Common Gateway Interface)
Un ensemble de règles par lesquels un serveur Web:
Url

Navigateur HTTP
Serveur Web CGI
Système ‰ passe les requêtes des utilisateurs à un programme externe
de fichiers
Fichier HTML
‰ récupère les données pour les renvoyer à l ’utilisateur
Base
de
Données
‰ fait partie du protocole HTTP

Un standard pour l’interface entre applications et serveurs d’informations ‰ Le nom de l’application, les paramètres et leurs valeurs font
partie du message HTTP ou de l ’URL
But du CGI : faire communiquer le serveur avec des programmes externes.
Le serveur trouve et exécute un programme et retourne le résultat au navigateur
‰Ex: http://www.monsite.tn/agenda?nom=Slama¶m2=Mounir

© Sadok Ben Yahia Fac Sces Tunis 85 © Sadok Ben Yahia Fac Sces Tunis 86

Des informations utiles Des informations utiles

Variable d'environnement Information fournie Variable d'environnement Information fournie

PATH_TRANSLATED Chemin complet menant au programme CGI lancé

SERVER_SOFTWARE Nom du logiciel serveur Web SCRIPT_NAME Nom du programme CGI lancé

SERVER_NAME Nom DNS de la machine hébergeant le serveur QUERY_STRING Si method=GET, contient la chaîne CGI, sinon vide
Web
CONTENT_LENGTH Si method=POST, contient la longeur de la chaîne
GATEWAY_INTERFACE Version du protocole CGI utilisée par le serveur CGI, sinon 0

SERVER_PROTOCOL Version du protocole HTTP utilisée par le serveur REMOTE_HOST Nom DNS de la machine distante qui a soumis le
formulaire
SERVER_PORT Port utilisé par le serveur Web
REMOTE_ADDR Adresse IP de cette machine distante
REQUEST_METHOD Méthode (GET ou POST) selon laquelle le
formulaire a été soumis

© Sadok Ben Yahia Fac Sces Tunis 87 © Sadok Ben Yahia Fac Sces Tunis 88

22
CGI (Exemples)
Commandes Batch Delphi

if getvar('REQUEST_METHOD')='POST' then
ECHO OFF
begin
ECHO content-type: text/html parmstring:=getvar('CONTENT_LENGTH');
if parmstring<>'' then begin
ECHO.
size:=strtoint(parmstring);
ECHO setlength(parmstring,size);
^<HTML^>^<HEAD^>^<TITLE^>^</TITLE^>^</HEAD^>^<BODY for i:=1 to size do read(parmstring[i]);
end;
^> end
ECHO REQUEST_METHOD=%REQUEST_METHOD% else
parmstring:=getvar('QUERY_STRING');
ECHO ^</BODY^>^</HTML^>

© Sadok Ben Yahia Fac Sces Tunis 89 © Sadok Ben Yahia Fac Sces Tunis 90

CGI : Common Gateway Interface CGI : Common Gateway Interface


‰ Au niveau Interface graphique
‰ Simple à développer dans n’importe quel langage ‰ pas de pré-formatage des champs: Ex jj/mm/aa
‰ validation du coté Serveur: augmente la complexité
de programmation
‰ tout le traitement se fait du côté du serveur Ö surcharge
‰ Chaque requête est traitée indépendamment des requêtes
‰ L'échec d ’un processus CGI n ’a pas de précédentes. (stateless protocol)

conséquences sur d ’autres processus ‰ Transfert des données + Transfert de la présentation des
données (HTML).

‰ Chaque invocation de script CGI génère la création d ’un


processus puis d ’une connexion à la base de données.
Ö surcharge du serveur de BD

© Sadok Ben Yahia Fac Sces Tunis 91 © Sadok Ben Yahia Fac Sces Tunis 92

23
Types d ’interfaces Web / BD : Schéma Server Side Include
Canevas de fichiers HTML
1 2
Les server-side-includes Ex ASP, Le client émet une requête http
Coldfusion Le serveur contrôle
http://www.fst.tn/recherche.cgi
Url les droits d'accès
Navigateur HTTP
Serveur Web
Ossature de Poste client
Fichier HTML fichiers Client Web 5 Serveur Web Machine Serveur
HTML 6
Le client affiche le le fichier html 3
document et interagit est renvoyé au Le serveur
avec l'utilisateur client recherche le fichier
Base
Base 4 shtml
de
de
Données Le fichier est
Données
ré-analysé par le
serveur
.shtml

© Sadok Ben Yahia Fac Sces Tunis 93 © Sadok Ben Yahia Fac Sces Tunis 94

SSI SSI

Š Server Side Include (.shtml) <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">


<html>
<head><title>Exemple XSSI</title></head>
‰Tag interprété par le serveur : <body bgcolor="#FFFFFF">
<!--#config errmsg="erreur de syntaxe dans un (x)SSI"
• <!- #commande paramètre(s)="argument"-> -->
<!--#set var="x" value="test"--><!--#echo var="x"--
><br>
‰Commandes : Fichier modifié le : <!--#echo var="LAST_MODIFIED" -->
<br>
• <!- #echo var="SERVER_NAME" -> Nom du serveur : <!--#echo var="SERVER_NAME" --> <br>
<!--#if expr="$HTTP_USER_AGENT = 'Mozilla/2.0
• <!- #include file="truc.html" ->(virtual) (compatible; MSIE 3.01; Windows 95)'" -->
Il est temps de se mettre à jour !
• <!- #exec cmd="/bin/ps" -> (cgi) <!--#endif -->
</body>
</html>

© Sadok Ben Yahia Fac Sces Tunis 95 © Sadok Ben Yahia Fac Sces Tunis 96

24
Cold Fusion Exemple : Cold Fusion

<HTML>
HTML, HTTP Server SQL
Server Web
HTML, Applicatif Cold ODBC <CFQUERY NAME="Resultats" DATASOURCE="FST">
ISAPI, Fusion Résultats
Requête
NSAPI,
CGI
SELECT NOM_LABORATOIRE from laboratoires
</CFQUERY>
HTML, CFML <CFTABLE QUERY="Resultats">
<CFCOLS WIDTH="30" TEXT="<LI>
#NOM_LABORATOIRE">
</CFTABLE>

© Sadok Ben Yahia Fac Sces Tunis 97 © Sadok Ben Yahia Fac Sces Tunis 98

Types d ’interfaces Web / BD : Approche Microsoft


Canevas de fichiers HTML
Logique de l ’application intégrée dans le serveur Web
Url
Serveur Web
Navigateur HTTP
ODBC Poste client Client Web IIS
DLL ISAPI
API native Scripts Serveur
Fichier HTML ActiveX

Base
Base Apps CGI
de
de Internet DataBase Filtres, etc...
Données Microsoft dbWeb DLL OLEISAPI
Données Connector (IDC)

Autres
‰L'accès API : à utiliser une API existante entre le serveur HTTP Microsoft Index
Pilote ODBC
fonctions
et le base de données. Server

‰Deux API auxquelles se conforment les principales bases de


Procédures
données: NSAPI de Netscape et ISAPI de Microsoft. stockées

"Interface entre Web et bases de données sous Windows NT"


A.Homer, Darren Gill, S.JakabEyrolles 1998
© Sadok Ben Yahia Fac Sces Tunis 99 © Sadok Ben Yahia Fac Sces Tunis 100

25
Approche IDC/HTX Exemple 1: IDC/HTX
demo.idc
demo.idc

DataSource: FST_Lab
Serveur listeLabo.htx
listeLabo.htx
SQL UserName : wwwapp
IDC ODBC
Password : ?????
URL du modèle
Requête et variables
Résultats
<html><body>
Template : listeLabo.htx
Modèle
HTX
<%BeginDetail%>
HTML
SQLStatement :
Les noms des labos sont:
+SELECT * from laboratoires
Réponse <%NOM_DU_LABORATOIRE%><BR>
<%EndDetail%>
</body>

© Sadok Ben Yahia Fac Sces Tunis 101 © Sadok Ben Yahia Fac Sces Tunis 102

Exemple 2: IDC/HTX IDC/HTX

<FORM METHOD="GET" ACTION="ville_dans_dept_1.IDC">


dept ? <INPUT TYPE="Text" NAME="[numerodept]" SIZE=2>
<INPUT TYPE="Submit" VALUE="Envoi">
‰Simple et rapide (généré par
</FORM>
Extrait fichier .HTML Access, …)
‰Paramétrable (critères de
sélection)
Extrait ville_dans_dept_1.HTX
Fichier .IDC ...
Datasource: ppas <%BeginDetail%>
<TR>
Template: ville_dans_dept_1.htx
<TD><%Code%><BR></TD>
SQLStatement: SELECT <TD><%Nom%><BR></TD>
ville.Code, ville.Nom </TR>
+FROM ville <%EndDetail%> ‰consultation uniquement
+WHERE ... ‰bases ODBC et serveurs
(((ville.dept)=%[numerodept]%)); IIS (ou PWS)

© Sadok Ben Yahia Fac Sces Tunis 103 © Sadok Ben Yahia Fac Sces Tunis 104

26
OLEISAPI Exemple

<Serveur OLE : toto.dll


Public Sub ReturnBonjour (strValuePairsIn As
Serveur String, strHTMLResponse As String)
OLEISAPI.dll strHTMLResponse ="Content-Type: text/html" &
vbCrLF & "Bonjour";
SQL End Sub
DLL Serveur
HTML OLE ODBC Public Sub main()
End Sub
Requête Résultats
Autres
fonctions

Réponse
http://serveurNT/utilisat/OLEISAPI.dll/toto.ReturnBonjour

© Sadok Ben Yahia Fac Sces Tunis 105 © Sadok Ben Yahia Fac Sces Tunis 106

Types d ’interfaces Web / BD : L’Accès API Types d ’interfaces Web / BD : L’Accès API

Exécution plus rapide par rapport aux CGIs. (Utilisation des


DLLs )

‰une application CGI est chargée à chaque fois qu’elle Cet accès est très à la mode mais plus que douteux en terme
est référencée par le client (Une copie séparée est
lancée à chaque fois) de portabilité des applications, d'une part par rapport aux
‰Une seule application peut gérer plusieurs requêtes
provenant de plusieurs navigateurs à la fois. Si une serveurs HTTP mais également par rapport aux bases de
requête est envoyée depuis le navigateur, Il y a de
fortes chances que la DLL soit déjà chargée. données.
‰ Ces API permettent de s'affranchir de codages de
programmes en incluant dans les pages HTML les codes
d'accès aux bases de données

© Sadok Ben Yahia Fac Sces Tunis 107 © Sadok Ben Yahia Fac Sces Tunis 108

27
Types d ’interfaces Web / BD Types d ’interfaces Web / BD
Serveur Web fortement lié au serveur de bases de données
‰ Applications Web développées de la même
Url manière que les applications Bases de
Serveur
Navigateur HTTP
Serveur Données
Web BD
Base
Base
Fichier HTML
de
de ‰ Convient à la publication de bases de
Données
Données données Oracle existantes
Utilitaires
Oracle Web Server PL SQL

Oracle
Navigateur HTTP Web Listener OWA Oracle 7

Fichier HTML
OWA
Portabilité: applications développées en langage
Système
Système Base
Base propriétaire (PL/SQL)
de
de de
de
fichiers
fichiers Données
Données

© Sadok Ben Yahia Fac Sces Tunis 109 © Sadok Ben Yahia Fac Sces Tunis 110

Approche Oracle Architecture OWS

Š Oracle Web Server (=>OWApplicationS V3)


Web Listener
Š Serveur Standard : Web Listener web
Dispatcher

Š CGI 'like' : Web Request Broker (WRB)


WRBX WRBX
Š Toolkit : Ensemble de procédures cataloguées Poste client
Client Web WRBX

‰HTP : HyperText Procedures WRB API


‰HTF : HyperText Functions
9 htp.print(htf.italic('coucou')); cartouche cartouche
Java PL/SQL
‰OWA_UTIL : utilitaires
9 owa_util.tableprint
‰OWA : procédures internes Procédures
stockées

© Sadok Ben Yahia Fac Sces Tunis 111 © Sadok Ben Yahia Fac Sces Tunis 112

28
OWS Exemple 1 OWS Exemple 1
<html>
<body>
<form METHOD="POST"
create or replace
ACTION="http://lisiaix0/owa/afftab>
procedure afftab(nom_table in
Nom de la table varchar2)
<INPUT NAME="nom_table"
is
TYPE="TEXT">
x boolean;
<INPUT TYPE="SUBMIT" VALUE="Afficher">
</form> begin

</body> x:=owa_util.tableprint(nom_table
, 'BORDER');
</html>
end;

© Sadok Ben Yahia Fac Sces Tunis 113 © Sadok Ben Yahia Fac Sces Tunis 114

OWS Exemple 2
create or replace procedure listtables is
cursor c_tables is
select table_name from user_tables;
begin
htp.htmlopen;
htp.headopen;
htp.htitle('Liste des tables');
htp.headclose;
htp.bodyclose;
for enreg in c_tables loop
htp.print (enreg.table_name);
htp.br;
end loop
htp.bodyclose;
htp.htmlclose;
end;
/

© Sadok Ben Yahia Fac Sces Tunis 115

29

You might also like