BD Web

1

BD Web

1. Introduction au Web

2. Technique de base CGI

3. Les pages actives ASP

4. Les pages active JSP

5. Les pages actives PHP

2

1. Qu'est-ce-que le Web ?

Service Internet permettant de naviguer à travers des pages web.

HTTP (HyperText Transfer Protocol) est le protocole le utilisé pour envoyer les requêtes et recevoir les pages

HTTP spécifié par le consortium W3C est actuellement à sa version 1.1.

HTTPS est une version sécurisée permettant de crypter les échanges.

3

HTML

Langage dérivé de SGML définissant un jeu de balises fixes pour coder et transférer des documents avec présentations intégrées sur le Web.

Les documents sont liés entre eux par des hyperliens 1-1

Les éléments de données sont marqués par des balises selon leur rôle et mise en forme

4

Principales balises

La balise de début <HTML> elle doit être fermée à la fin du document par </HTML>.

La balise de titre <TITLE> elle permet d’indiquer le titre de la page éditée de manière spéciale par les navigateurs ; se termine après

le titre par une balise </TITLE>. Les balises de niveaux

Exemple: <H1> Bienvenue sur le Web </H1>, <H2> Les BD et le Web </H2>. Les balises de mise en forme

Exemple: <B> Ceci est en gras </B>, <I> Ceci est en italique </I>. Les balises d’intégration d’images et de son

<IMG SRC = "URL de l’image">. Les amarres vers d’autres documents

exemple <A HREF = "URL de l’amarre"> cliquez ici </A>. Les listes non numérotées du type

<UL> <LI> alinea 1 <LI> alinea 2 </UL>. Les listes numérotées du type

<OL> <LI> alinea 1 <LI> alinea 2 </OL>.

5

Exemple (1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="GENERATOR" CONTENT="Mozilla/4.06 [fr] (Windows2000; I)

[Netscape]"> <META NAME="AUTHOR" CONTENT="Gardarin"> <TITLE>SYSTEMES D'INFORMATION XML</TITLE></HEAD>BODY> <HR> <H1>SYSTEMES D'INFORMATION XML</H1> <PRE><I>Georges GARDARIN</I></PRE> <HR>

6

Exemple (2)

<P>l'ouvrage de référence

en matière de bases de données et XML.

<BR>présente les points suivants :

<UL>

<LI>XML, origines et évolution, XQuery, optimisation et implantation;</LI>

<LI>concepts de base des services Web, Architecture .NET, Sécurité ;</LI>

<LI>Intégration de données;</LI>

</UL>

Ce livre indispensable présente donc une synthèse très complète des techniques XML.

</BODY>

</HTML>

7

Scénario typique

1.Le navigateur demande l'URL http://www.gardarin.org/test.html au browser.

2.Le client envoie la requête /test.html au serveur HTTP www.gardarin.org.

3.Le serveur reçoit la requête /test.html.

4.Le serveur envoie au client le fichier test.html encapsulé en format MIME.

5.Le client réceptionne l'objet test.html en format MIME.

6.Le navigateur interprète et affiche l'objet test.html.

http://www.prism.uvsq.fr/test.html

GET / test.html

test.html

Text/html … (test.html)blablabla

Serveur HTTP

Client

8

W3C et HTML

W3C Organisme chargé de standardiser les protocoles et langages

relatifs à Internet

HTML 4.01 Dernière version de HTML, les nouveaux développements

portant sur XML (langage à tags ouverts)

DHTML (Dynamic HyperText Markup Language) Ensemble de specs complémentaires au HTML permettant de

rendre une page web dynamique côté client

9

DHTML

Javascript permet d'exécuter des scripts (programmes en texte)

sur le navigateur du client

DOM (Document Object Model) définit une arborescence d'objets représentant la

structure du document permet de manipuler l'ensemble des objets contenus

dans le document (avec Javascript)

10

Feuilles de style CSS

Les feuilles de style (CSS - cascading StyleSheets) permettent de définir de façon annexe au document

les styles de chaque balise peuvent être incluse dans le même fichier ou

référencées. Un même document peut avoir plusieurs styles selon

le terminal d'affichage.

11

Exemple

@import "truc.css"

BODY {

color: #000 ;

background: #FBFBFF ;

margin-left: 9% ;

margin-right: 6% ;

font-family: "Helvetica", sans-serif ;

line-height: 1.35 ;

}

@import "truc.css"

BODY {

color: #000 ;

background: #FBFBFF ;

margin-left: 9% ;

margin-right: 6% ;

font-family: "Helvetica", sans-serif ;

line-height: 1.35 ;

}

[ ... ]TD, TH { font-family: "Helvetica",

sans-serif line-height: 1.35 ;}

H1, H2 { margin-top: 1.2em ; margin-left: -7% ; color: #900 ; clear: both ;}[ ... ]

[ ... ]TD, TH { font-family: "Helvetica",

sans-serif line-height: 1.35 ;}

H1, H2 { margin-top: 1.2em ; margin-left: -7% ; color: #900 ; clear: both ;}[ ... ]

<LINK REL="stylesheet" HREF="fichier.css"><LINK REL="stylesheet" HREF="fichier.css">

12

Limites HTML statique

Maintenance difficile du fait de l'obligation de modifier manuellement chacune des pages

Impossibilité de renvoyer une page personnalisée selon le visiteur

Impossibilité de créer une page dynamiquement selon le contenu d'une base de données

13

Site Web BD

Site Web dynamique partage d ’une base de données globales utilisation de templates côté serveur avec accès SQL standardisation des méta-données et des formulaires accès via SQL optimisé avec indexation du contenu augmentation de la productivité des développeurs

14

Application: Commerce électronique

Présentation de catalogues contact du consommateur exploration des produits

Accès hiérarchique aux description et prix Visualisation multimédia 2 ou 3D, démonstrations

Couplage aux BD de l’entreprise Transactions sur Internet

saisie de la commande paiement sécurisé via Internet

carte de crédit, monnaie digitale, chèque électronique suivi de la commande

15

Les techniques

CGI (Common Gateway Interface) consiste à activer des programmes (généralement écrits en perl ou en

javascript voir en C), puis de leur faire renvoyer un contenu HTML

ASP (Active Server Pages) de Microsoft permet de simplifier l'écriture de tels scripts en manipulant des objets en

VBScript.

JSP (Java Server Pages) permet d'utiliser la puissance de Java pour créer des pages web

dynamiques.

PHP (Hypertext Preprocessor) Langage simple bien adapté au Web

16

ClientServeur Web

Prog. CGI

Page HTML

téléchargement

url longue

Page HTML

donnéesréponse

2. Common Gateway Interface (CGI)

Protocole d’appel dynamique de programme sur un serveur Web depuis un client Surcouche de HTTP pour passer des paramètres Programmes ou scripts invoqués par CGI

17

Scénario

Bases dedonnées

Scripts

d'application

ServeurHTTP

Navigateur

Passerelle

.

...

Serveur d'application

SQL

Param

HTMLUrl Longue/cgi-bin/p?param

HTML

p

18

Vue Synthétique

19

Qu'est-ce que l'interface CGI ?

Définition et propriétés standard de programmation pour accéder aux données des

formulaires HTML côté serveur la passerelle invoque les scripts en passant les paramètres sous

une forme codée un processus séparé est activé à chaque appel de programme

L'envoi de paramètres à un script CGI se fait par l'intermédiaire d'un formulaire HTML. créé à l'aide de la balise <FORM> contenant des boutons, des

champs, des listes et/ou des cases à cocher repérés par les noms de paramètres, et un bouton de soumission du formulaire

20

Exemple de Formulaire

<HTML><HEAD><TITLE> Exemple de formulaire</TITLE></HEAD><BODY><H1>Exemple de formulaire</H1><FORM METHOD=POST ACTION="/cgi-bin/invite.exe">Nom: <INPUT TYPE=TEXT SIZE=30 NAME="nom"><BR>Adresse e-mail: <INPUT TYPE=TEXT SIZE=20 NAME="email"><BR><P>Commentaires:<BR><TEXTAREA COLS=60 ROWS=15 NAME="comment"></TEXTAREA><INPUT TYPE=SUBMIT VALUE="OK"></FORM> …

21

Variables d'environnement

Données stockées dans des variables permettant au programme d'avoir des informations sur son environnement

Informations sur le serveur DATE_GMT, DATE_LOCAL

Date actuelle au format GMT et local DOCUMENT_ROOT

Racine des documents Web sur le serveur HTTP_HOST

Nom de domaine du serveur SERVER_SOFTWARE

Type (logiciel) du serveur web ...

22

Informations sur le client

CONTENT_LENGTH Longueur du corps de la requête

CONTENT_TYPE Type de données du corps (format

MIME)

HTTP_COOKIE Cookie du client si jamais un

cookie est effectivement présent sur le disque du client

HTTP_REFERER URL de la page qui a appelé le

script CGI

HTTP_REQUEST_METHOD Méthode d'appel (GET, POST, ...)

HTTP_USER_AGENT Navigateur et OS du client

PATH chemin d'accès au script CGI

PATH_INFO chemin d'accès au script CGI

QUERY_STRING Paramètres du script

REMOTE_ADDR Adresse IP du client appelant le

script CGI

23

Get ou Post ?

GET envoie les paramètres du formulaire via l'URL en ajoutant l'ensemble des paires nom/valeur à l'URL du script,

séparé de celui-ci par un point d'interrogation, ce qui donne une URL longue (limitée à 255 caractères) du type: http://nom_du_serveur/cgi-bin/ script.cgi?

champ1=valeur1&champ2=valeur2... passe les données dans la variable QUERY_STRING

POST code les données de la même manière mais envoie les données à la suite des en-têtes HTTP, dans un champ

appelé corps de la requête les données présentes dans le corps de la requête sont

accessibles via le fichier de flux d'entrée standard STDIN

24

Les scripts serveur

Programme ou script (fichier de commandes) capable de recevoir des paramètres depuis des clients, d’accéder à une ou plusieurs sources de données de générer des résultats sous forme HTML ou XML.

Langages de scripting ou de programmation Interprété ou compilé Perl, JavaScript, VB Script, Python C, C++, Java, VB, C#, L4G

25

Exemple de Script Perl

#! /usr/local/bin/perl print "content-type : text/html\n\n"; // Fixe le format MIME print "<HTML>"; print "<HEAD>"; print "<TITLE>Hello world</TITLE>"; print "</HEAD>"; print "<BODY>"; print "Hello world!"; print "</BODY>"; print "</HTML>";

26

CGI – évaluation

Avantages utilisable avec n’importe quel navigateur et serveur Web simple - intégré avec HTML serveurs dans tous les langages

Inconvénients supporte mal le multi-utilisateur pas de gestion de contexte (session)

Extensions version« fast CGI »

27

3. Les ASP de Microsoft

Standard mis au point par Microsoft en 1996 Développement d'applications Web dynamiques Intégration de scripts serveur au sein d'une page HTML à

l'aide de balises spéciales Compilés avec la version .NET

Environnement de programmation côté serveur permettant de représenter sous forme d'objets les interactions

entre le navigateur du client, le serveur web, ainsi que les connexions à des bases de données via SQL (ADO)

28

Déclaration et Exemple

Intégration de scripts dans des pages HTML ou XML

<SCRIPT language="VBScript|Jscript" [runat="server|client"] [type="text/vbscript | jscript"] [src="url"] > code du script </SCRIPT>

<% code du script %> Impression du texte et

interprétation du code par le serveur d’ASP

Exemple simple:<%@ LANGUAGE="VBSCRIPT" %>

<HTML>

<HEAD><TITLE>Exemple de script ASP</TITLE>

</HEAD>

<BODY>

<% FOR i = 1 to 10 %>

Bienvenue au cours BD Web

<% Next %>

</BODY>

</HTML>

29

Exemple d’accès BD

Intégration indirecte des requêtes

nécessite un script dialogue avec les formes,

boutons, tables, ... émission des requêtes récupération des résultats

Accès par objets VBScript Accès à la base via des ADO Création d’objets données

<HTML><%

Vin=Request.QueryString("NumVin")Set NObj=Server.CreateObject("VINS.NumVin") if NObj.GetCru(Vin)=False then

Server.Redirect("NumVin/entryform.htm")

%><H1> VIN CHOISI :<%=NObj.Cru%> </H1> <TABLE><TR><TD>Degre</TD><TD>Millesime</

TD><TD>Region</TD></TR><TR><TD><%=NObj.Degre%></TD><TD><%=NObj.Mill%></TD><TD><%=NObj.Region%></TD></TR></TABLE><H2> DATE DE SELECTION : <%=time()%><

%=date()%></H2></HTML>

30

Objets d'environnement

31

4. Les JSP du monde Java

Possibilité de définir des documents mixtes HTML Java (Scriptlets) Appel de servlet (balise <servlet>) Communication par des variables Utilisation de tags <% … %> (similaire aux ASP)

Compilés en Servlet Lors de la première utilisation Prise en compte automatique des mises à jour

Possibilité d'intégrer des JavaBeans

32

Exemple de JSP

Intégration de Java dans HTML

Directives de pages importation de packages sessions demandées buffers et threads

Possibilité de variables globales

Facilités d'éditions expressions Java converties objets textes et flots binaires

PrintWriter OutputStream

<HTML><HEAD><TITLE> Exemple de JSP </TITLE></HEAD><BODY><%@ page language = "java" %><% char c = 0; %><% for (int i = 0; i < 26; i++) { c = (char) (0x41 + i) ;%><% = c %><% } %></BODY></HTML

33

Objets d'environnements

Objet Description

request Objet contenant la requête du client

responseObjet contenant la réponse de la page JSP. Généralement inutilisé (HTML en flux de sortie)

pageContext Objet contenant des informations sur l'environnement du serveur

session Objet contenant la session en cours

application Objet contenant le contexte de servlet

out Objet contenant le flux de sortie

config Objet contenant la configuration de la servlet

page Objet désignant la page elle-même

exception Objet représentant une exception non interceptée

34

Les servlet Java

Servlet Moteur multi-thread d'exécution de classe côté serveur Approche API objet (e.g., services, httprequest) L’utilisateur surcharge de méthodes standards Dialogue au-dessus de HTTP, RMI, … via CGI améliorée

Accès aux BD JDBC : interface type ODBC (CLI RDA) depuis Java SQLJ : incorporation d'ordres SQL dans Java pré-compilés

35

Architecture Servlet

ServletContainer

Create Thread Pool

Instantiate Servelet

Call init() methodHTTP Request

Allocate Thread Call service() method

Do service()

Return ResponseFree Thread

HTTP Response Terminate Thread Pool

Call destroy() method

Mécanisme d ’exécution de services

au-dessus de HTTP Multithreads et performant dispatcher de requêtes HTTP

Génération de contenus HTML

format MIME supportés JPEG, GIF, etc.

36

Accès BD : JDBC

// ConnexionConnection con =

DriverManager.getConnection(url);// Création d'une instructionStatement statement = con.createStatement();// Exécution d'une requeteString query = "SELECT * FROM Employés";ResultSet resultset = statement.executeQuery(query);// Traitement des résultatswhile(resultset.next()) {System.out.println(resultset.getString(2) + " " +

resultset.getString(3)); }// fermeture de la connexioncon.close();}

Application Serveur dedonnées

Base dedonnées

SQL

ResultSet

37

5. PHP de Apache (Open Source)

Langage de scripts intégré aux pages HTML

Les scripts PHP sont entre balises <?php .. … ?>

Possibilité de récupérer les variables de formulaires HTML

$variable

Exemple :<html>

<head> <title>Hello World</title>

</head> <body> <?php echo "Hello world"; ?> </body>

</html>

38

Gestion de formulaires en PHP

PHP transforme tous les champs en variables d' environnement (globales) Directement accessibles par nom Également accessibles dans les tableaux associatifs

$HTTP_POST_VARS et $HTTP_GET_VARS : suivant la méthode d' envoi GET ou POST

Attention: Il ne faut pas avoir deux zones de formulaires avec le

même nom sur la même page

39

Accès aux BD

Méthode similaire quelque soit le SGBD: Oracle, Sybase, DB2, MS SQL Server MySQL, PostgreSQL, InterBase Pilote ODBC

Il faut suivre la séquence : 1.Connexion 2.Requête 3.Exploitation des résultats 4.Fermeture de la connexion

40

Exemple : insertion d’un vin

Saisie du numéro, cru et millésime par une forme HTML

Insertion dans MySQL en PHP<?php mysql_connect("localhost","root","");

$connexion_reussi=mysql_selectdb("test"); if (!$connexion_reussi) echo "Connexion râtée";

mysql_query("insert into vins (num, cru, date) values ('$num', '$cru', NOW()) ") or die("Impossible d'insérer le vin");

echo "Merci"; ?>

41

6. Bilan Pages Actives

Mixage HTML + scripts serveur

Compilés en code intermédiaire ou interprétés

Accès aux BD intégrés Évolution vers XML

séparation fond et forme complément à XSL

Documents

BD Web