Introduction Cours

1

Techniques de Connexion Web et Bases de Données

Introduction

Sadok Ben Yahia, [email protected]

Département d’InformatiqueFac. Sces. Tunis

© Sadok Ben Yahia Fac Sces Tunis 2

Plan

Concepts du Web

Protocle HTTP

Langage HTML

Rappel de notions de bases de données

Intégration Web et Bases de données


Concepts de Web

Internet, Web, HTML

HTTP


WWW : World Wide Web

Créé en 1989 au CERN par Tim Berners-LeeMettre en ligne de la documentation (initialement technique pour physiciens)

Services de l'Internet

Web

Messagerie

Transfert de fichiers (FTP)

Forum de nouvelles (news), de discussion (chat)

Principes du Web

Hypertexte : HTML

Client/serveur : HTTP

Schéma de désignation : URL

2


HypertexteTexte "normal "

organisation linéaire

éventuellement renvois sous forme de sommaires, index, notes de bas de

page

Hypertexte

organisation pas forcément linéaire

texte enrichi de liens

renvoi vers un document

renvoi vers une partie du même document

renvoi vers une partie d'un autre document© Sadok Ben Yahia Fac Sces Tunis 6

Client/serveur

Client : le navigateur (Internet Explorer, Netscape, ...)Serveur : le serveur Web (Apache, Microsoft IIS, ...)

HTTPClient Serveur Web

réponse :document HTML

requête

Le serveur répond en fournissant le document demandé ou un message d'erreur si le document n'existe pas

Le client émet une requête


Schéma de désignation : Uniform Resource Locator (URL)

Permet de désigner une page Web

Chaque page a un nom unique pas d'ambiguïté possible

Protocole : // serveur / page

http://www.fst.ca/index.html

Organisation hiérarchique possible pour les pages (=hiérarchie fichier disque)

Protocole :// serveur / répertoire / ... / pagehttp://www.ulaval.ca/papers/2002/index.html


Complémentssur les URL’s

Eléments constitutifs (optionnels) d'une URLprotocole:// protocoles utilisables : HTTP, FTP, MAILTO, FILE, NEWS

utilisateur@ login pour les pages protégées

serveur nom ou adresse IP (ex. : 163.136.27.6 ) du serveur

: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

#signet signet dans le document à atteindre

?options information transmise au serveur (ex. : formulaire)

Exemplehttp://[email protected]:8080/pub/cv.html#diplomes

ftp://[email protected]

http://www.altavista.com/query.html?erty

3


Structured'un document HTMLDéclaration version HTML utilisée

En-tête

Corps du document

Déclaration de version et en-tête facultatifsAbsence de corps document vide (sauf cas spéciaux, ex.: frames)

<! DOCTYPE ….><HtML><HEAD>

En-tête

</HEAD><BODY>Corps du document

</BODY></HTML>


HTML: Règles de balisage

Deux types de balises :

autonome < .. > (ex. : <DOCTYPE >)

délimitant une zone

balise de début de zone < ... > (ex. : <HTML> )

balise de fin de zone </… > (ex. : </HTML> )

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


HTML: Règles de balisage

certaines balises sont associées à un ou plusieurs attributs : chaque attribut à un identifiant et une valeur (entre " " et après = )

ex. : <IMG SRC="photo.gif" ALT="une photo">

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

encodage de caractère & ... ;

< > & < > &amp

caractères accentués & lettre accent ;

é à ô é &agrave ô


HTTP: Hypertext Transfert ProtocolProtocole réseau d’échange de l’information sur le Web

Principe de base

un couple requête/réponse par document à charger

+ autant de req./rép. qu'il y a d'éléments inclus (images, frames, sons, ...)

Web IISApache...

ClientExplorerNetscape…..

…….

Les éléments inclus sont désignés par des URLsIls peuvent être localisés :

- 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- sur un site différent

4


Le protocole HTTP

Définit le langage utilisé pour les échanges entre client et serveur Web

version 0.9simple protocole de transfert de données (GET et réponse)

version 1.0restée un Internet Draft (RFC 1945)

actuellement version 1.1RFC 2616 (juin 1999)

Pas de session permanente entre client/serveur


Déroulement d’une requête HTTP

Envoi d’une requête (URL)

client serveur

démonHTTPD

HTTP

Attente de la réponse du serveur

Établissement de la connexion

Réponse du serveur

Affichage de la réponse

Demande de connexion

réponse

Fermeture de la connexion


Déroulement d’une requête HTTP

Envoi d’une requête (URL)

client serveur

démonHTTPD

Attente de la réponse du serveur

Établissement de la connexion

Réponse du serveur

Demande de connexion

protocolesans étatréponse

Affichage de la réponse

Fermeture de la connexion


Exemple de transaction HTTP

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

5



% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to apollon.univ-tunis1.tn.Escape character is '^]'.



% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to apollon.univ-tunis1.tn Escape character is '^]'.GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfertHost: apollon.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nom du serveurFrom: [email protected] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle)

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



% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to apollon.univ-tunis1.tn.Escape character is '^]'.GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfertHost: apollon.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nom du serveurFrom: [email protected] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle)


HTTP/1.1 200 OK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse du serveurDate: Tue, 02 Jun 2001 14:11:17 GMTServer: Apache/1.3b6Last-Modified: Mon, 07 Apr 2001 10:39:08 GMT . . . . . . . . . . . . . informations sur la ressourceETag: "b3dd-524-33b78ccc"Content-Length: 1316 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . taille de la ressourceAccept-Ranges: bytesContent-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>….</HTML>



% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to cck.univ-tunis.tn.Escape character is '^]'.GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfertHost: cck.univ-tunis.fr . . . . . . . . . . . ………... . . . . . . . . . . . . . . . . . . . nom du serveurFrom: [email protected] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle)


HTTP/1.1 200 OK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse du serveurDate: Tue, 02 Jun 2001 14:11:17 GMTServer: Apache/1.3b6Last-Modified: Mon, 07 Apr 2001 10:39:08 GMT . . . . . . . . . . . . . informations sur la ressourceETag: "b3dd-524-33b78ccc"Content-Length: 1316 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . taille de la ressourceAccept-Ranges: bytesContent-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>….</HTML>Connection closed by foreign host. fermeture de la connexion

6


RequêteHTTPPermet d'envoyer des commandes au serveur Web3 commandes principales (présentes dans HTTP/1.0 et 1.1)GET : demande d'un documentHEAD : demande de l'en-tête (HTTP) d'un documentPOST : dépose d'information sur le serveur

GET : requête principale, 80 % des requêtes WebHEAD : 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

Format de la requête (1 ligne)

commande URL version HTTP comprise par le clientGET /index.html HTTP/1.1


Requête HTTP (2)

Pour les commandes POST, informations supplémentaires nécessairesFormat de la requête (plusieurs lignes)

commande URL version HTTP comprise par le client

ligne blanche

Informations envoyées par le client

POST /cgi-bin/prog.exe HTTP/1.1Nom=XXX&Prenom=YYTZl


RéponseHTTP (1)La réponse du serveur Web à une commandeFormat de la réponse (plusieurs lignes)

version HTTP du serveur code retour commentaire

en-tête 1 HTTP: valeur....en-tête n HTTP: valeur

document texte (HTML) ou binaire (GIF, JPG)

HTTP/1.1 200 OKContent-Length: 9872Content-Type: text/html

<HTML>....</HTML>


Réponse HTTP (2)

code retour : renseigne sur le succès (200) ou l'échec (4xx) de la requêteen-têtes HTTP : informations transmises par le serveur sur le document envoyé

•Content-Length : taille du document

•Last-Modified : date de dernière modification du document

•Server : nom du logiciel serveur

•Expire : date d'expiration du document

•Content-Type : type MIME ( Multipurpose Internet Mail Extensions) du

document

Exemple d'en-têtes

Nombreux autres en-têtes possibles

7


Réponse HTTP (3)

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

forme : médium/format

text/html : document texte HTML

text/plain : document texte "brut"

image/gif : image GIF

image/jpeg : image JPEG

audio/wav : fichier son au format .wav

video/mpeg : fichier vidéo au format .mpeg

application/ps : fichier généré par une application au format

PostScript

application/octet-stream : fichier d'octets "brut"

+ nombreux autres types existants© Sadok Ben Yahia Fac Sces Tunis 26

Les codes de réponse sous HTTP

10x : information

20x : succès

30x : redirection

40x : erreur du client

50x : erreur du serveur

200 OK

301 Moved permanently

401 Unauthorized402 Payment required403 Forbidden404 Not found

500 Internal server error


Le language (HTML): Hypertext Markup Language


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 de zone avec cette taille

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

8


Les titres

En-têtes [Heading] <Hn></Hn> avec n=1 à 6 : Afficher une en-tête de

niveau n et sauter une ligne

Liste non-ordonnée [Bullet list]<UL></UL> :Afficher le texte sous

forme d'une liste non-ordonnée.


Les titres

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

texte sous forme d'une liste ordonnée.

Elément de liste[List items] : <LI>Voici un élément de la

liste

Paragraphe[Paragraph] <P></P>:Saut de ligne, insérer

une ligne vierge et commencer un paragraphe


Les titres: exemple

<H1>Les mois du printemps</H1> <UL><LI>avril <LI>mai <LI>juin</UL><P><H3>Les mois d'automne</H3> <OL><LI>octobre <LI>novembre <LI>décembre</OL>


Les images

<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...

La balise image possède de nombreux attributs.

Texte alternatif alt="**** Pour les browser n'ayant pas l'option "image"

activée

Dimensions width=?

Height=? Hauteur et largeur (en pixels)

Bordure border=? (en pixels)

Alignement align=top

align=middle

align=botton

align=left

align=right

9


Les images …L'attribut align positionne l'image par rapport au texte :

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

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

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

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


Les tableaux[Table] <TABLE></TABLE>Début et fin de tableau

Définition d'une ligne[Table Row] <TR></TR>Début et fin de ligne

Définition d'une cellule[Table Data] <TD></TD>Début et fin de cellule

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


Les tableaux

Bordure de cadre[Border] <TABLE border=?></TABLE>

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


Les tableaux …L'espace entre les cellules ou l'épaisseur des lignes du quadrillage<TABLE cellspacing=?>

La largeur de la table <TABLE width=?> <TABLE width=%>

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

10


Les tableaux …L'enrobage des cellules ou l'espace entre le bord et le contenu<TABLE cellpadding=?>

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


Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales

<CENTER><TABLE width=60% border=1><TR><TD>cellule1</TD><TD>cel. 2</TD><TD>3</TD></TR></TABLE></CENTER>

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>

Les tableaux: Atelier

Ajoutons la balise de largeur de la cellule

Je veux ce tableau


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><TR><TD colspan=3>cellule 1</TD> </TR><TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD><TD width=34%>3</TD> </TR> </TABLE></CENTER>

<CENTER><TABLE width=60% border=1><TR> <TD width=33% rowspan=2>cellule 1</TD> <TD width=33%>cel 2</TD> <TD width=34%>3</TD></TR> <TR> <TD width=33%>cel 2</TD><TD width=34%>3</TD> </TR> </TABLE></CENTER>

Les tableaux: Atelier

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules

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

Formulaires

Un formulaire est défini en HTML et peut contenir

zones de saisie de texte

boîtes à cocher (check box)

boutons radio (option button)

menus déroulants

boutons

11


Formulaires : Balises

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é


Exemple de formulaire HTML

< FORM ACTION="http://monserveur.com/cgi-bin/prog.exe" METHOD=POST>Nom <INPUT NAME="client" SIZE=46> Rue <INPUT NAME="rue" SIZE=40> Ville <INPUT NAME="ville" SIZE=20>Code postal <INPUT NAME="cp" SIZE=5> Carte de crédit No <INPUT NAME="carte" SIZE=10>Expire <INPUT NAME="expire" TYPE=TEXT 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> <INPUT TYPE=SUBMIT VALUE="Envoi"><INPUT TYPE=RESET VALUE="Remise à zéro"> </FORM>


Exemple de formulaire HTML


Formulaires : Balises

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

12


Les formulaires : Balise INPUT

Déclaration des champs de saisie (exclusivement entre <FORM … /FORM>)

NAME : nom du champ de saisie (unique à l'intérieur d'un formulaire)TYPE : type du champ de saisie

Types possibles ( TYPE=... )

TEXT : zone de saisie texte (type par défaut en cas d'omission de TYPE)

SIZE : taille de la zone

RADIO : bouton radio tous les boutons ayant même nom (NAME) ∈ au même groupe dans ce cas, les attributs (VALUE) permettent de les différencier

CHECKBOX : boîte à cocher

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

RESET : bouton d'effacement du formulaire


Formulaire: Envoi des données au serveur

Lorsque l'utilisateur appuie sur le bouton SUBMIT, le navigateur :

construit une chaîne de caractères contenant toutes les données du formulaire

envoie cette chaîne au serveur

Cette chaîne :

ensemble de couples séparées par le caractère &

chaque couple est de la forme nom de champ = valeur saisie

les espaces sont remplacés par le caractère +

Exemple (1 seule ligne)client=XXY+AZERTY&rue=5410+rue+Gambetta&ville=Quebec&cp=G1S3E5&carte=0123456789&cc=visa&cr=on

Rq : pour les boîtes à cocher = on si cochée, rien sinon


Autres types possibles pour la balise INPUT

<FORM ACTION=prog.exe" METHOD="POST">

Mot de passe <INPUT TYPE= PASSWORD NAME=" passe" SIZE= 16> <P>

Sélectionner un fichier <INPUT TYPE= FILE NAME=" fichier"> <P>

<INPUT TYPE= SUBMIT VALUE="Envoi">

<INPUT TYPE= RESET VALUE=" Remise à zéro"> <P>

</FORM>

PASSWORD :zone de saisie d'un mot de passe

FILE : sélection d'un fichier à envoyer


Autres types possibles pour la balise

SELECT: définition d'un menu déroulant

HIDDEN : champ caché transmission d'informations "furtives" dans une chaîne de formulaires

BUTTON : un bouton simple ! association avec un traitement JavaScript ou Vbscript

TEXTAREA : zone de saisie d'un texte sur plusieurs lignes

13


Autres types possibles pour la balise<FORM>Champ caché <INPUT TYPE= HIDDEN NAME="cache" VALUE="toto"> <P><INPUT TYPE= BUTTON VALUE=" Cliquez" onClick=" fonctionJavaScript()" >TEXTAREA NAME=" zone" ROWS= 3 COLS= 40> texte initial< /TEXTAREA > <P><SELECT NAME=" musicTypes"><OPTION > R&B<OPTION > Jazz<OPTION > Blues<OPTION > New Age<INPUT TYPE= SUBMIT VALUE=" Envoi"><INPUT TYPE= RESET VALUE=" Remise à zéro"> <P></FORM>


Les CSS: pourquoiObjectif: fournir un mécanisme pour associer différents styles à un même document

Article

...

Présentations

Contenu


Exemple

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 en couleur bleue.

Appeler cette mise en forme "titre" l’appliquer à chaque nouveau chapitre

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

Idée reprise de MS-WORD

<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1><H2><B><FONT COLOR="green">- A -</FONT></B></H2><H3><B><FONT COLOR="red">...a....</FONT></B></H3> <H1><B><FONT COLOR=blue>Titre2</FONT></B></H1><H2><B><FONT COLOR="green">- B-</FONT></B></H2><H3><B><FONT COLOR="red">...b....</FONT></B></H3>

STYLE des titres STYLE des sous-titres STYLE du texte STYLE des titres STYLE des sous-titres STYLE du texte


Utilité et avantages

Séparation du contenu et de la mise en forme.

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

externes.

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.

Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à

ses différentes versions.

14


Introduction aux bases de données


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

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.


Définitions

Niveaux de représentation d’une BD Relationnelle

Schéma interne : Description des données en termes de

représentation physique en machine

Schéma conceptuel : Description des données indépendamment de

la manipulation qui en sera faite Ex: Personne(nom, prénom, ddn, ID,

Salaire,…)

Schéma externe : Description externe d’une partie de la BD

correspondant à une vision particulière d ’un utilisateur ou d ’une

application


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

Gestion des inscriptions

Gestion des examens

Gestion des comptes informatiques

Etudiant

Nom Prénom ddnlogin Date d ’entrée ID

Insc_examen

Intitulé (Cours) ID (Etudiant)

Etudiant

Nom Prénom login

Etudiant

Nom Prénom ddnlogin Date d ’entrée ID

Suit

Cours

IntituléEnseignant Assistant

Application Niveau logique Niveau Conceptuel

15


Système de fichiers vs Bases de Données


Gestion des examens


Applications Données

Gestion des examens


SGBD


–couplage fort données/programmes–redondance des données–faible partage des données entre applications–coûts élevés de développement et de maintenance


Définition SGBD

Ensemble de programmes qui permettent de

Définir une BD : structure de données, schéma conceptuel

Construire une BD : stockage dans un support physique,

Manipuler les données: effectuer des requêtes, mettre à jour,

etc.

Ex: MS SQL Server, MS Access, Oracle, Sybase, etc.


Fonctions d’un SGBD

Description des données

Recherche des données

Mise à jour des données

Transformation des données

Passage d’un niveau de représentation à un autre


Objectifs d’un SGBD

Indépendance physique

Changer les structures internes sans remettre en cause les entités et

relations définies au niveau conceptuel

Possibilité d ’opérer des améliorations de bas niveau sans affecter le

reste du système d ’information

16



Indépendance logique

Indépendance entre la manière dont les données sont représentées

et l’utilisation faite de ces données.

Indépendance entre les applications manipulant ces données

Manipulation des données par des langages non-procéduraux ( Ex:

SQL, QBE)



SUPPORT DE TRANSACTIONS ACID

Atomique (tout ou rien)

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

Isolée (non visibilité des mises à jour non commise)

Durable (garantie des mises à jour commises)



PARTAGEABILITÉ ET SÉCURITE DES DONNÉES

Simultanéité lecture/écriture maximum

Accès transactionnels & décisionnels

Confidentialité (authentification, droits d'accès, cryptage)

Restauration après pannes (journaux, sauvegardes)


Architecture 2-tiers

Une architecture 2-tiers est composée de deux éléments, un client et un serveur et où le tiers fait référence non pas à une entitéphysique mais logique

ClientClient ServeurServeur

ServeurServeur

Contexte Base de données

ClientClient Serveur de BD

Serveur de BDServeurServeur

BDBD

17


Architecture 2-tiers

Caractéristiques :

La fonction de présentation est à la charge du client exclusivement.

Le calcul (processing) est réparti entre le client et le serveur

Le logiciel client est généralement spécifique au serveur

Les données sont stockées ou accessibles via le serveur

Le serveur est polyvalent (capable de fournir directement

l'ensemble des ressources demandées par le client)

Le client assume des tâches de : présentation processing, Communication avec le serveur

le client est dit "lourd "


Architecturesde Bases de Données

Affichage et saisie des données

Client

Serveur

ApplicationConnexion, exécution de requêtes, traitement des résultats

API de La BD

Connexion aux sources de données, lecture et écriture du protocole de données

SGBDExécution des commandes pourl’accès aux données


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

Application : Ensemble de programmes qui permettent :

d ’interagir avec l ’utilisateur via une interface graphique

d’envoyer des requêtes aux bases de données et de traiter les réponses

Ex: gestion des ressources humaines, gestion de stocks, tableurs, etc.

API (Application Programming Interface) : Ensemble de méthodes prescrites par un SGBD qui permettent :

d’établir une connexion, d’arrêter une connexion,

de formuler des requêtes aux BD et de recevoir les réponses


Composantsd’un Système de Bases de données

Le logiciel qui exécute les commandes pour accéder aux données.

Il comprend d ’autres composants fournissant des services de

gestion des données (sécurité, transactions, reprise après panne,

etc.)

Le support physique de stockage (Là ou sont physiquement

stockées les données)

Ex: Microsoft SQL Server, Oracle, etc

Serveur

18


IntégrationWeb et Bases de Données

Pourquoi ?

Comment ?

Bases de donnéesWEB

?


Intégration Web et Bases de Données

Distribution ProductionAccès

Internet

Pourquoi intégrer Web et BD ?

Trois aspects

www.tnw.tn


Pourquoi une intégration Web/BD ?

Grande quantité de données (Ex: moteurs de recherche, grands sites

commerciaux, etc. )

BD? une meilleure gestion des données

Données volatiles (Ex: disponibilité de produits, données financières,

news, etc. )

BD? Une meilleure gestion de la mise à jour

Données complexes (Ex: horaires de train, données techniques )

BD? Une meilleure structuration des données ? un meilleur traitement

(Production)



Ressources de données diverses

BD? une Intégration de données simplifiée

Utilisation de données existantes

BD? développement d’applications sans modification des structures de données

Réduction des coûts de développement

WEB? utilisation des browsers

Mise en œuvre d ’applications évoluées ( ex: personnalisation, prédiction des comportements)

BD? servir des applications complexes telles que les applications d ’analyse de données (datamining)

(Production)

19


Exemple : Le site de SNCFT

Gestion deshoraires

Gestiondes

réservations

Statistiques des

ventes

Informations

www.sncft.tn



Faibles coûts de déploiement

Les utilisateurs n’ont pas besoin d’accéder directement

aux applications de la BD. Un Browser suffit

Gestion de versions des applications

Pas de mise à jour du côté client

Distribution universelle

(Distribution)



Indépendance de la plate-forme

disponibilité des browsers pour l’utilisation finale

Accès simplifié aux données : hypertexte, formulaires simples.

Complexité transparente

(Distribution)


Exemples d’applications Web/BD

Commerce Electronique Gestion des commandes en ligne Catalogues commerciaux. Prix et disponibilité de produits

Service après-vente

Production

feedback, propositions d ’amélioration

Administration

Inscriptions à distance

Finances

Rapports financiers en ligne

Enseignement

Dictionnaires en ligne, Cours en ligne

20


Une nouvelle génération d ’applications Web/BDLe Web: un moyen de capture du comportement, des goûts et des opinions des

utilisateurs

Objectifs:

Améliorer la qualité des produits : analyse de la navigation dans l’aide en ligne

Améliorer l’accès : analyse des chemins de navigation dans un site (Ex:National semiconductors est passée d ’une moyenne de 7 à 2 pages visitées)

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

comportement avec 50 à 70 % de précision => publicité ciblée )

Prendre de décisions stratégiques : (ExDell a capturé grâce au Web le

désintéressement des clients professionnels envers les Network Computers

Moyens:

SGBD (Oracle, Sybase, etc) Outils d ’analyse de données


Données

ApplicationMoniteur transactionel SGBD

Processus d'interactionutilisateur

Processus d'utilisation

Processus de traitement Processus de Données

Serveur d'affichage

Client d'affichageClient de traitement

Serveur de traitement

Serveur de données

Client de données

1er Tier 2nd Tier 3ème Tier

Poste client

GUI

Architectures 3 tiers


Architecture 3-tiers (1)

1. Le client: le demandeur de ressources

2. Le serveur d'application (middleware): le serveur chargé de

Fournir la ressource mais faisant appel à un autre serveur

3. Le serveur secondaire (généralement un serveur de base de données)

fournissant un service au premier serveur

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



Le client qui n'a donc que des fonctions d'affichage ne fait que des

requêtes vers le serveur, aucun calcul n'est effectué par le client.

Les résultats de ses requêtes sont ensuite affichées.

1

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

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

SGBD).

2

21



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

notamment par :

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

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

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

(Remote procedure Call) au HTTP via du HTML, PHP etc.

3


Une nouvelle génération d ’applications Web/BD

Pages visitées

Historique des achats

Catalogues •Prédiction des achats •Etude de la réaction aux offres


Intégration Web et BD

Web Statique

Navigateur Serveur WebSystème

de fichiersHTTP

Fichier HTML

UrlFichier HTML

Statiques

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

Une multitude de solutions


Architecture Web

Logicielpasserelle

Client

Connexionspécifique

ServeurWeb

CGI

HTTP/html

Connexionvirtuelle

1er tronçon

2ème tronçon

Processus d’utilisation

22


Types d ’interfaces Web / BD: CGI

Navigateur Serveur WebSystème

de fichiersHTTP

Fichier HTML

Url

CGI

Base de

Données

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

CGI ( Common Gateway Interface)

Un standard pour l’interface entre applications et serveurs d’informations


Types d ’interfaces Web / BD: CGI

Un ensemble de règles par lesquels un serveur Web:

passe les requêtes des utilisateurs à un programme externe

récupère les données pour les renvoyer à l ’utilisateur

fait partie du protocole HTTP

Le nom de l’application, les paramètres et leurs valeurs font

partie du message HTTP ou de l ’URL

Ex: http://www.monsite.tn/agenda?nom=Slama¶m2=Mounir


Des informations utiles

Variable d'environnement Information fournie

SERVER_SOFTWARE Nom du logiciel serveur Web

SERVER_NAME Nom DNS de la machine hébergeant le serveur

Web

GATEWAY_INTERFACE Version du protocole CGI utilisée par le serveur

SERVER_PROTOCOL Version du protocole HTTP utilisée par le serveur

SERVER_PORT Port utilisé par le serveur Web

REQUEST_METHOD Méthode (GET ou POST) selon laquelle le

formulaire a été soumis


Des informations utiles

Variable d'environnement Information fournie

PATH_TRANSLATED Chemin complet menant au programme CGI lancé

SCRIPT_NAME Nom du programme CGI lancé

QUERY_STRING Si method=GET, contient la chaîne CGI, sinon vide

CONTENT_LENGTH Si method=POST, contient la longeur de la chaîne

CGI, sinon 0

REMOTE_HOST Nom DNS de la machine distante qui a soumis le formulaire

REMOTE_ADDR Adresse IP de cette machine distante

23


CGI (Exemples)

Commandes Batch

ECHO OFF

ECHO content-type: text/html

ECHO.

ECHO

^<HTML^>^<HEAD^>^<TITLE^>^</TITLE^>^</HEAD^>^<BODY

^>

ECHO REQUEST_METHOD=%REQUEST_METHOD%

ECHO ^</BODY^>^</HTML^>


Delphi

if getvar('REQUEST_METHOD')='POST' then begin parmstring:=getvar('CONTENT_LENGTH');

if parmstring<>'' then begin size:=strtoint(parmstring); setlength(parmstring,size); for i:=1 to size do read(parmstring[i]); end; end

else parmstring:=getvar('QUERY_STRING');


CGI : Common Gateway Interface

Simple à développer dans n’importe quel langage

de programmation

L'échec d ’un processus CGI n ’a pas de

conséquences sur d ’autres processus


CGI : Common Gateway Interface

Au niveau Interface graphique

pas de pré-formatage des champs: Ex jj/mm/aa

validation du coté Serveur: augmente la complexité

tout le traitement se fait du côté du serveur surcharge

Chaque requête est traitée indépendamment des requêtes précédentes. (stateless protocol)

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

24


Types d ’interfaces Web / BD :

Navigateur Serveur WebOssature de

fichiers HTML

HTTP

Fichier HTML

Url

Les server-side-includes Ex ASP, Coldfusion

Base de Données

Base de Données

Canevas de fichiers HTML


Schéma Server Side Include

Poste clientMachine Serveur

Client WebServeur Web

.shtml

Le client émet une requête httphttp://www.fst.tn/recherche.cgi

1

Le serveur contrôleles droits d'accès

2

Le serveurrecherche le fichier

shtml

3

Le fichier estré-analysé par leserveur

4

le fichier htmlest renvoyé auclient

5

Le client affiche ledocument et interagitavec l'utilisateur

6


SSI

Server Side Include (.shtml)

Tag interprété par le serveur :

• <!- #commande paramètre(s)="argument"->

Commandes :

• <!- #echo var="SERVER_NAME" ->

• <!- #include file="truc.html" ->(virtual)

• <!- #exec cmd="/bin/ps" -> (cgi)


SSI

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"><html><head><title>Exemple XSSI</title></head><body bgcolor="#FFFFFF"><br>Fichier modifié le : <br>Nom du serveur :  <br>Il est temps de se mettre à jour !

</body> </html>

25


Cold Fusion

Requête

ODBCServer WebHTML, HTTP

Résultats

ServerApplicatif Cold

Fusion

SQL

HTML, CFML

HTML,ISAPI,NSAPI,

CGI


Exemple : Cold Fusion

<HTML>

<CFQUERY NAME="Resultats" DATASOURCE="FST">

SELECT NOM_LABORATOIRE from laboratoires

</CFQUERY>

<CFTABLE QUERY="Resultats">

<CFCOLS WIDTH="30" TEXT="<LI>

#NOM_LABORATOIRE">

</CFTABLE>

…


Types d ’interfaces Web / BD :

Logique de l ’application intégrée dans le serveur Web

NavigateurServeur Web

HTTP

Fichier HTML

Url

Base de

Données

Base de

Données

ODBC API native

L'accès API : à utiliser une API existante entre le serveur HTTP et le base de données.

Deux API auxquelles se conforment les principales bases de données: NSAPI de Netscape et ISAPI de Microsoft.

DLL

Canevas de fichiers HTML


Approche Microsoft

"Interface entre Web et bases de données sous Windows NT" A.Homer, Darren Gill, S.JakabEyrolles 1998

Apps CGIFiltres, etc...

Poste client Client Web IISISAPI

Procéduresstockées

Internet DataBaseConnector (IDC) Microsoft dbWeb

Pilote ODBC

DLL OLEISAPI

Scripts ServeurActiveX

Microsoft IndexServer

Autres fonctions

26


Approche IDC/HTX

Requête

ODBC

Serveur

IDCSQL

ModèleHTX

URL du modèleet variables

Réponse

HTML

Résultats


Exemple 1: IDC/HTX

DataSource: FST_Lab

UserName : wwwapp

Password : ?????

Template : listeLabo.htx

SQLStatement :

+SELECT * from laboratoires

<html><body>

<%BeginDetail%>

Les noms des labos sont:

<%NOM_DU_LABORATOIRE%><BR>

<%EndDetail%>

</body>

demo.idcdemo.idc

listeLabo.htxlisteLabo.htx


Exemple 2: IDC/HTX

Datasource: ppasTemplate: ville_dans_dept_1.htxSQLStatement: SELECT ville.Code, ville.Nom+FROM ville+WHERE (((ville.dept)=%[numerodept]%));

Fichier .IDC

<FORM METHOD="GET" ACTION="ville_dans_dept_1.IDC">dept ? <INPUT TYPE="Text" NAME="[numerodept]" SIZE=2><INPUT TYPE="Submit" VALUE="Envoi"></FORM> Extrait fichier .HTML

...<%BeginDetail%><TR><TD><%Code%><BR></TD><TD><%Nom%><BR></TD></TR><%EndDetail%> ...

Extrait ville_dans_dept_1.HTX


IDC/HTX

Simple et rapide (généré par Access, …)Paramétrable (critères de

sélection)

consultation uniquementbases ODBC et serveurs

IIS (ou PWS)

27


OLEISAPI

Requête

ODBC

Serveur

OLEISAPI.dll

Réponse

HTML

Résultats

DLL ServeurOLE

SQL

Autresfonctions


Exemple

http://serveurNT/utilisat/OLEISAPI.dll/toto.ReturnBonjour

<Serveur OLE : toto.dllPublic Sub ReturnBonjour (strValuePairsIn As

String, strHTMLResponse As String)strHTMLResponse ="Content-Type: text/html" & vbCrLF & "Bonjour";

End SubPublic Sub main()End Sub


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 est référencée par le client (Une copie séparée est lancée à chaque fois)

Une seule application peut gérer plusieurs requêtes provenant de plusieurs navigateurs à la fois. Si une requête est envoyée depuis le navigateur, Il y a de fortes chances que la DLL soit déjà chargée.

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


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

Cet accès est très à la mode mais plus que douteux en terme

de portabilité des applications, d'une part par rapport aux

serveurs HTTP mais également par rapport aux bases de

données.

28


Types d ’interfaces Web / BD

NavigateurServeur

HTTP

Fichier HTML

Url

Base de Données

Base de Données

Web

Serveur Web fortement lié au serveur de bases de données

BDServeur

NavigateurOracle

HTTP

Fichier HTML

Base de Données

Base de Données

Web Listener Oracle 7OWA

OWA

Systèmede

fichiers

Systèmede

fichiers

Oracle Web Server UtilitairesPL SQL


Types d ’interfaces Web / BD

Applications Web développées de la même manière que les applications Bases de Données

Convient à la publication de bases de données Oracle existantes

Portabilité: applications développées en langage propriétaire (PL/SQL)


Approche Oracle

Oracle Web Server (=>OWApplicationS V3)

Serveur Standard : Web Listener

CGI 'like' : Web Request Broker (WRB)

Toolkit : Ensemble de procédures cataloguéesHTP : HyperText ProceduresHTF : HyperText Functions

htp.print(htf.italic('coucou'));

OWA_UTIL : utilitairesowa_util.tableprint

OWA : procédures internes


Architecture OWS

Poste client Client Web

Web Listener webDispatcher

Procéduresstockées

WRB API

cartouchePL/SQL

cartoucheJava

WRBX WRBX WRBX

29


OWS Exemple 1<html>

<body>

<form METHOD="POST"

ACTION="http://lisiaix0/owa/afftab>

Nom de la table

<INPUT NAME="nom_table"

TYPE="TEXT">

<INPUT TYPE="SUBMIT" VALUE="Afficher">

</form>

</body>

</html>


OWS Exemple 1

create or replace

procedure afftab(nom_table in varchar2)

is

x boolean;

begin

x:=owa_util.tableprint(nom_table, 'BORDER');

end;

/


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;

/

Documents

Introduction Cours