Plan

Š Concepts du Web

Techniques de Connexion Web et Bases de Données

Š Protocle HTTP

Introduction

Š Langage HTML Š Rappel de notions de bases de données

Sadok Ben Yahia, PhD [email protected]

Š Intégration Web et Bases de données

Département d’Informatique 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 ‰ ‰

Concepts de Web

‰ Internet, Web, HTML ‰HTTP

Web Messagerie

‰

Transfert de fichiers (FTP)

‰

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

‰Principes du Web ‰

Hypertexte

: HTML

‰

Client/serveur

: HTTP

‰ © Sadok Ben Yahia Fac Sces Tunis

3

Schéma de désignation :

URL

© Sadok Ben Yahia Fac Sces Tunis

4

1

Hypertexte

Client/serveur

‰ Texte "normal "

‰

Client : le navigateur Serveur : le serveur Web

organisation linéaire

(Internet Explorer, Netscape, ...) (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

‰ 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

HTTP

Serveur Web

réponse : document HTML

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

© Sadok Ben Yahia Fac Sces Tunis

5

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

6

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

Organisation hiérarchique possible pour les pages (=hiérarchie fichier disque) Protocole :// serveur / répertoire / ... / page http://www.ulaval.ca/papers/2002/index.html

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)

Exemple http://[email protected]:8080/pub/cv.html#diplomes ftp://[email protected] 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 Déclaration version HTML utilisée

HTML : Règles de balisage En-tête

En-tête Corps du document

Corps du document

Deux types de balises :

‰autonome

< .. >

(ex. : )

‰délimitant une zone

‰balise de début de zone ‰balise de fin de zone

< ... >

‰Identifiants de balise non sensibles à la casse

( =

)

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

© Sadok Ben Yahia Fac Sces Tunis

(ex. : )

(ex. : )

© Sadok Ben Yahia Fac Sces Tunis

9

HTML : Règles de balisage

10

HTTP: Hypertext Transfert Protocol

certaines balises sont associées à un ou plusieurs attributs

Protocole réseau d’échange de l’information sur le Web

:

Principe de base

chaque attribut à un identifiant et une valeur (entre " " et après = )

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

ex. :

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

‰ commentaires ‰



encodage de caractère <>&

Client

…….

Web

IIS Apache ...

< > &

caractères accentués éàô

Explorer Netscape …..

& ... ;

Les éléments inclus sont désignés par des URLs Ils 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

& lettre accent ; é à ô

© 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

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

se on rép

serveur Web

serveur HTTP démon HTTPD

‰version 0.9 9

Š Š Š Š Š Š Š

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

‰version 1.0 9

restée un Internet Draft (RFC 1945)

‰actuellement version 1.1 9

RFC 2616 (juin 1999)

Š Pas de session permanente entre client/serveur

© Sadok Ben Yahia Fac Sces Tunis

13

Déroulement d’une requête HTTP client se on rép

Š Š Š Š Š Š Š

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

14

Exemple de transaction HTTP serveur

protocole sans état

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

démon 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 Trying 148.60.4.30... Connected to apollon.univ-tunis1.tn. Escape character is '^]'.

% telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur web Trying 148.60.4.30... Connected to apollon.univ-tunis1.tn Escape character is '^]'. GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfert Host: apollon.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nom du serveur From: [email protected] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle) (ligne blanche = fin de l’entête HTTP de la requête)

© Sadok Ben Yahia Fac Sces Tunis

17

Exemple de transaction HTTP

(ligne blanche = fin de l’entête HTTP de la requête) HTTP/1.1 200 OK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse du serveur Date: Tue, 02 Jun 2001 14:11:17 GMT Server: Apache/1.3b6 Last-Modified: Mon, 07 Apr 2001 10:39:08 GMT . . . . . . . . . . . . . informations sur la ressource ETag: "b3dd-524-33b78ccc" Content-Length: 1316 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . taille de la ressource Accept-Ranges: bytes Content-Type: text/html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . type MIME (ligne blanche = fin de l’entête HTTP de la réponse)

© Sadok Ben Yahia Fac Sces Tunis

18

Exemple de transaction HTTP

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

….

© Sadok Ben Yahia Fac Sces Tunis

(contenu)

19

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

© Sadok Ben Yahia Fac Sces Tunis

(contenu)

fermeture de la connexion

20

5

Requête HTTP (2)

Requête HTTP 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

GET :

Format de la requête (plusieurs lignes)

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

Format de la requête (1 ligne)

commande

URL

GET

/index.html

HTTP/1.1

version HTTP comprise par le client HTTP/1.1 © Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

21

22

Réponse HTTP (2)

Réponse HTTP (1) La

/cgi-bin/prog.exe

Nom=XXX&Prenom=YYTZl

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)

version HTTP du serveur

code retour

en-têtes HTTP : informations transmises par le serveur sur le document envoyé

Exemple d'en-têtes

commentaire

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

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

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

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

200

•Server : nom du logiciel serveur OK

•Expire : date d'expiration du document •Content-Type : type MIME ( Multipurpose Internet Mail Extensions) du document

....

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

Š 10x : information

forme : médium/format

‰ text/html

Š 20x : succès

: 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

200 OK

Š 30x : redirection

301 Moved permanently

Š 40x : erreur du client

401 Unauthorized 402 Payment required 403 Forbidden 404 Not found

Š 50x : erreur du serveur

500 Internal server error

PostScript

‰application/octet-stream : fichier d'octets "brut" + nombreux autres types existants

© Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

25

26

Mise en forme du texte Š Gras[Bold] ... <STRONG>...

Début et fin de zone en gras

Š Italique[Italic] ... <EM>...

Début et fin de zone en italique

Š Taille de caractère[Font size] ...

Le language (HTML): Hypertext Markup Language

Début et fin

de zone avec cette taille

Š Couleur de caractère[Font color] Début et fin de zone en couleur

Š A la ligne[Line break]


Aller à la ligne

Š Commentaires[Comments] Ne pas afficher Š Centrage[Center]

© Sadok Ben Yahia Fac Sces Tunis

27

© Sadok Ben Yahia Fac Sces Tunis

Centrer

28

7

Les titres

Les titres

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

Š Liste ordonnée[Numbered list]

:Afficher le texte sous forme d'une liste ordonnée.

niveau n et sauter une ligne

Š Elément de liste[List items] :

Voici un élément de la Š Liste non-ordonnée [Bullet list]

:Afficher le texte sous

liste

Š Paragraphe[Paragraph]

:Saut de ligne, insérer

forme d'une liste non-ordonnée.

une ligne vierge et commencer un paragraphe

© Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

29

Les titres: exemple

Les images

Les mois du printemps

• avril
• mai
• juin

Les mois d'automne

1. octobre
2. novembre
3. décembre

30

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

© 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] Début et fin de tableau

Fichier d'aide

Définition d'une ligne[Table Row] Début et fin de ligne

Fichier d'aide

Définition d'une cellule[Table Data] Début et fin de cellule

Fichier d'aide

1	2
3	4

Image et lien:

© Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

33

Les tableaux

34

Les tableaux … Š L'espace entre les cellules ou l'épaisseur des lignes du quadrillage

Bordure de cadre [Border]

Š La largeur de la table

1	2
3	4

1	2
3	4

© 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



colonnes égales

cellule1

cel. 2

3

1	2
3	4

Š Ajoutons la balise de largeur de la cellule CENTER>

cellule1

cel. 2

3

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

Les tableaux: Atelier Š

38

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

cellule 1
cellule 1	cel 2	3

Š

© Sadok Ben Yahia Fac Sces Tunis

37

„

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

cellule 1	cel 2	3
	cel 2	3

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

Tester cette instruction © Sadok Ben Yahia Fac Sces Tunis

39

© Sadok Ben Yahia Fac Sces Tunis

40

10

Exemple de formulaire HTML

Formulaires : Balises Š Déclaration d'un formulaire

< FORM ACTION="http://monserveur.com/cgi-bin/prog.exe" METHOD=POST> Nom Rue Ville Code postal Carte de crédit No Expire M/C VISA Contre remboursement

Š Attributs principaux (

‰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é

© 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 Š Attributs principaux (

‰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 ⇒ 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 Š Lorsque l'utilisateur appuie sur le bouton SUBMIT, le navigateur :

Déclaration des champs de saisie (exclusivement entre )

‰construit une chaîne de caractères contenant toutes les données du formulaire ‰ envoie cette chaîne au serveur

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

Š Cette chaîne : Š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

‰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

© Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

45

Autres types possibles pour la balise INPUT

46

Autres types possibles pour la balise

Mot de passe

Sélectionner un fichier

FILE : sélection d'un fichier à envoyer

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

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

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

PASSWORD :zone de saisie d'un mot de passe

© Sadok Ben Yahia Fac Sces Tunis

47

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

© Sadok Ben Yahia Fac Sces Tunis

48

12

Autres types possibles pour la balise

Les CSS: pourquoi

Champ caché

TEXTAREA NAME=" zone" ROWS= 3 COLS= 40> texte initial< /TEXTAREA >

<SELECT NAME=" musicTypes"> R&B Jazz Blues New Age

© Sadok Ben Yahia Fac Sces Tunis

Š Objectif: fournir un mécanisme pour associer différents styles à un même document

Article

Présentations

Contenu

...

© Sadok Ben Yahia Fac Sces Tunis

49

Exemple

50

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

Š 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

Š 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.

Š Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et cela en

Š Idée reprise de MS-WORD

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

Titre1

- A -

...a....

Titre2

- B-

...b....

© Sadok Ben Yahia Fac Sces Tunis

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

Š Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à ses différentes versions.

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

© Sadok Ben Yahia Fac Sces Tunis

53

Définitions

54

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

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

Gestion des inscriptions

Nom Prénom ddn login Date d ’entrée ID

Insc_examen Intitulé (Cours) ID (Etudiant)

Gestion des comptes informatiques

Etudiant

Application 55

Etudiant

Nom Prénom ddn login Date d ’entrée ID

Gestion des examens

application © Sadok Ben Yahia Fac Sces Tunis

Etudiant

Nom Prénom login

Niveau logique © Sadok Ben Yahia Fac Sces Tunis

Suit

Cours Intitulé Enseignant Assistant

Niveau Conceptuel 56

14

Système de fichiers vs Bases de Données Applications

Définition SGBD

Données

Gestion des inscriptions

Ensemble de programmes qui permettent de

Gestion des inscriptions

Gestion des examens

Gestion des examens

Gestion des comptes informatiques

Gestion des comptes informatiques

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

‰Construire une BD : stockage dans un support physique, ‰Manipuler les données: effectuer des requêtes, mettre à jour, etc.

–couplage fort données/programmes –redondance des données

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

–faible partage des données entre applications –coûts élevés de développement et de maintenance

© Sadok Ben Yahia Fac Sces Tunis

57

© Sadok Ben Yahia Fac Sces Tunis

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

© Sadok Ben Yahia Fac Sces Tunis

58

reste du système d ’information

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 et l’utilisation faite de ces données.

‰ Atomique (tout ou rien)

‰ 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

© Sadok Ben Yahia Fac Sces Tunis

61

62

Architecture 2-tiers

Objectifs d’un SGBD

‰ 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

‰ PARTAGEABILITÉ ET SÉCURITE DES DONNÉES

‰ Simultanéité lecture/écriture maximum Client Client

BD BD

Serveur Serveur

‰ Accès transactionnels & décisionnels Serveur Serveur Client Client

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

‰ Restauration après pannes (journaux, sauvegardes)

© Sadok Ben Yahia Fac Sces Tunis

Serveur Serveur

Serveur Serveur de deBD BD

Contexte Base de données

63

© Sadok Ben Yahia Fac Sces Tunis

64

16

Architectures de Bases de Données

Architecture 2-tiers ‰ 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

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

‰Les données sont stockées ou accessibles via le serveur ‰Le serveur est polyvalent (capable de fournir directement

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

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

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

API de La BD

SGBD

Exécution des commandes pour l’accès aux données

le client est dit "lourd "

© Sadok Ben Yahia Fac Sces Tunis

Client Application

© Sadok Ben Yahia Fac Sces Tunis

65

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

Serveur

66

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 ‰d’envoyer des requêtes aux bases de données et de traiter les réponses

‰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,

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 prescrites par un SGBD qui permettent :

stockées les données) 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 WEB

Pourquoi ?

www.tnw.tn

Bases de données

Comment ?

© Sadok Ben Yahia Fac Sces Tunis

Distribution

Accès

© Sadok Ben Yahia Fac Sces Tunis

69

Pourquoi une intégration Web/BD ?

Production 70

Pourquoi une intégration Web/BD ?

(Production)

(Production)

‰ Grande quantité de données (Ex: moteurs de recherche, grands sites commerciaux, etc. )

‰ Ressources de données diverses ) BD? une Intégration de données simplifiée

‰ Utilisation de données existantes

) BD? une meilleure gestion des données

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

‰ Données volatiles (Ex: disponibilité de produits, données financières, news, etc. )

données

‰ Réduction des coûts de développement ) 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

Pourquoi une intégration Web/BD ?

Exemple : Le site de SNCFT

(Distribution) Gestion des horaires

www.sncft.tn

‰ Faibles coûts de déploiement

Gestion 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

© Sadok Ben Yahia Fac Sces Tunis

‰Distribution universelle © Sadok Ben Yahia Fac Sces Tunis

73

Pourquoi une intégration Web/BD ?

74

Exemples d’applications Web/BD

(Distribution)

‰ Commerce Electronique

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

‰ Indépendance de la plate-forme

‰ 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 utilisateur

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

Processus de traitement

Processus de Données

Processus d'utilisation

ligne

‰Améliorer l’accès : analyse des chemins de navigation dans un site

Poste client

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

Moniteur transactionel

Données

SGBD

Application GUI

‰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

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

2nd Tier

3ème Tier

Serveur d'affichage

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

Client d'affichage

‰ Moyens:

Serveur de traitement Client de traitement

Client de données Serveur de données

‰SGBD (Oracle, Sybase, etc) ‰Outils d ’analyse de données © Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

77

Architecture 3-tiers (1)

78

Architecture 3-tiers (1)

1.

Le client: le demandeur de ressources

2.

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

3.

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

1

Fournir la ressource mais faisant appel à un autre serveur

fournissant un service au premier serveur

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.

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

2 ‰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)

© Sadok Ben Yahia Fac Sces Tunis

79

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

© Sadok Ben Yahia Fac Sces Tunis

80

20

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

Architecture 3-tiers (2) 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 •Etude de la réaction aux offres

(Remote procedure Call) au HTTP via du HTML, PHP etc. © Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

81

Intégration Web et BD

82

Architecture Web 1er tronçon

Web Statique Navigateur

Url Serveur Web

HTTP

Système de fichiers

2ème tronçon

Fichier HTML Statiques

HTTP/ html

Fichier HTML

Client

Serveur Web

CGI Connexion spécifique

Processus d’utilisation

Logiciel passerelle

‰Comment créer des interfaces entre le Web et les bases de données ? ‰Une multitude de solutions © Sadok Ben Yahia Fac Sces Tunis

Connexion virtuelle 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 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 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

© Sadok Ben Yahia Fac Sces Tunis

SERVER_SOFTWARE SERVER_NAME

‰ 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

© Sadok Ben Yahia Fac Sces Tunis

85

Des informations utiles Variable d'environnement

‰ passe les requêtes des utilisateurs à un programme externe

86

Des informations utiles Variable d'environnement

Information fournie

Information fournie

PATH_TRANSLATED

Chemin complet menant au programme CGI lancé

Nom du logiciel serveur Web

SCRIPT_NAME

Nom du programme CGI lancé

Nom DNS de la machine hébergeant le serveur

QUERY_STRING

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

CONTENT_LENGTH

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

REMOTE_HOST

Nom DNS de la machine distante qui a soumis le formulaire

REMOTE_ADDR

Adresse IP de cette machine distante

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

CGI, sinon 0

formulaire a été soumis © Sadok Ben Yahia Fac Sces Tunis

87

© Sadok Ben Yahia Fac Sces Tunis

88

22

CGI (Exemples) Commandes Batch

Delphi

ECHO OFF ECHO content-type: text/html ECHO. ECHO ^^^<TITLE^>^^^ ECHO REQUEST_METHOD=%REQUEST_METHOD% ECHO ^^

© Sadok Ben Yahia Fac Sces Tunis

89

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');

© 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)

‰ Transfert des données + Transfert de la présentation des

conséquences sur d ’autres processus

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

Les server-side-includes Ex ASP, Coldfusion

2

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

Le serveur contrôle les droits d'accès

Url Navigateur

HTTP

Serveur Web

Ossature de fichiers HTML

Fichier HTML

Base Base de de Données Données

© Sadok Ben Yahia Fac Sces Tunis

Poste client

6

5

Serveur Web

Le serveur recherche le fichier shtml

4

© Sadok Ben Yahia Fac Sces Tunis

Machine Serveur

3

le fichier html est renvoyé au client Le fichier est ré-analysé par le serveur

93

SSI

Client Web

Le client affiche le document et interagit avec l'utilisateur

.shtml

94

SSI

Š Server Side Include (.shtml)


Nom du serveur :
Il est temps de se mettre à jour !

‰Tag interprété par le serveur : •



‰Commandes : •



•

(virtual)

•

(cgi)

© Sadok Ben Yahia Fac Sces Tunis

95

© Sadok Ben Yahia Fac Sces Tunis

96

24

Cold Fusion

Exemple : Cold Fusion

HTML, HTTP

Server Web HTML, ISAPI, NSAPI, CGI

Requête

Server Applicatif Cold Fusion



SQL



ODBC Résultats

SELECT NOM_LABORATOIRE from laboratoires

HTML, CFML

…

© Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

97

Types d ’interfaces Web / BD :

98

Approche Microsoft

Canevas de fichiers HTML Logique de l ’application intégrée dans le serveur Web Url Navigateur

Serveur Web HTTP

DLL

Fichier HTML

ODBC

Poste client

Client Web

API native Base Base de de Données Données

‰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.

Internet DataBase Connector (IDC)

Microsoft Index Server

IIS ISAPI

Microsoft dbWeb

Pilote ODBC

Scripts Serveur ActiveX

DLL OLEISAPI

Apps CGI Filtres, etc...

Autres fonctions

Procédures 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

UserName : wwwapp

SQL

IDC

ODBC

Password : ????? Requête

URL du modèle et variables

Résultats

Template : listeLabo.htx

Modèle HTX

<%BeginDetail%>

SQLStatement :

HTML

+SELECT * from laboratoires

Réponse



Les noms des labos sont: <%NOM_DU_LABORATOIRE%>
<%EndDetail%>

© Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

101

Exemple 2: IDC/HTX

102

IDC/HTX

dept ?

‰Simple et rapide (généré par Extrait fichier .HTML

Access, …)

‰Paramétrable (critères de sélection)

Extrait ville_dans_dept_1.HTX Fichier .IDC

Datasource: ppas Template: ville_dans_dept_1.htx SQLStatement: SELECT ville.Code, ville.Nom +FROM ville +WHERE (((ville.dept)=%[numerodept]%));

... <%BeginDetail%> <%Code%>
<%Nom%>
<%EndDetail%> ...

© Sadok Ben Yahia Fac Sces Tunis

‰consultation uniquement ‰bases ODBC et serveurs IIS (ou PWS) 103

© Sadok Ben Yahia Fac Sces Tunis

104

26

OLEISAPI

Exemple <Serveur OLE : toto.dll Public Sub ReturnBonjour (strValuePairsIn As String, strHTMLResponse As String) strHTMLResponse ="Content-Type: text/html" & vbCrLF & "Bonjour"; End Sub Public Sub main() End Sub

Serveur OLEISAPI.dll

HTML

SQL

DLL Serveur OLE

Requête

ODBC Résultats

Autres fonctions

Réponse

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

© Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

105

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

106

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)

‰Une seule application peut gérer plusieurs requêtes provenant de plusieurs navigateurs à la fois. Si une

de portabilité des applications, d'une part par rapport aux 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 manière que les applications Bases de Données

Url Navigateur

Serveur HTTP

Web

Serveur BD

Base Base de de Données Données

Fichier HTML

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

Utilitaires PL SQL

Oracle Web Server Navigateur

HTTP

Oracle Web Listener OWA

Fichier HTML

Oracle 7 OWA

Système Système de de fichiers fichiers

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

Base Base de de Données Données

© Sadok Ben Yahia Fac Sces Tunis

© Sadok Ben Yahia Fac Sces Tunis

109

Approche Oracle

110

Architecture OWS

Š Oracle Web Server (=>OWApplicationS V3) Web Listener

Š Serveur Standard : Web Listener

web Dispatcher

Š CGI 'like' : Web Request Broker (WRB) Š Toolkit : Ensemble de procédures cataloguées ‰HTP : HyperText Procedures ‰HTF : HyperText Functions 9

Poste client

Client Web

WRBX

WRBX

WRB API

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

cartouche Java

‰OWA_UTIL : utilitaires 9

WRBX

cartouche PL/SQL

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


METHOD="POST"

create or replace

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

procedure afftab(nom_table in varchar2)

Nom de la table
is

TYPE="TEXT">
x boolean;

VALUE="Afficher">

begin



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



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