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 ltHTMLgt  
• elle doit être fermée à la fin du document par
  lt/HTMLgt.
• La balise de titre ltTITLEgt 
• elle permet dindiquer le titre de la page éditée
  de manière spéciale par les navigateurs   se
  termine après le titre par une balise lt/TITLEgt.
• Les balises de niveaux
• Exemple ltH1gt Bienvenue sur le Web lt/H1gt, ltH2gt
  Les BD et le Web lt/H2gt.
• Les balises de mise en forme
• Exemple ltBgt Ceci est en gras lt/Bgt, ltIgt Ceci est
  en italique lt/Igt.
• Les balises dintégration dimages et de son
• ltIMG SRC "URL de limage"gt.
• Les amarres vers dautres documents
• exemple ltA HREF "URL de lamarre"gt cliquez ici
  lt/Agt.
• Les listes non numérotées du type
• ltULgt ltLIgt alinea 1 ltLIgt alinea 2 lt/ULgt.
• Les listes numérotées du type
• ltOLgt ltLIgt alinea 1 ltLIgt alinea 2 lt/OLgt.

5
Exemple (1)

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
  Transitional//EN"gt
• ltHTMLgt
• ltHEADgt
• ltMETA HTTP-EQUIV"Content-Type"
  CONTENT"text/html charsetiso-8859-1"gt
• ltMETA NAME"GENERATOR" CONTENT"Mozilla/4.06
  fr (Windows2000 I) Netscape"gt
• ltMETA NAME"AUTHOR" CONTENT"Gardarin"gt
• ltTITLEgtSYSTEMES D'INFORMATION XMLlt/TITLEgt
• lt/HEADgt
• BODYgt
• ltHRgt
• ltH1gtSYSTEMES D'INFORMATION XMLlt/H1gt
• ltPREgtltIgtGeorges GARDARINlt/Igtlt/PREgt
• ltHRgt

6
Exemple (2)

• ltPgtl'ouvrage de reacutefeacuterence
• en matiegravere de bases de donneacutees et
  XML.
• ltBRgtpreacutesente les points suivants
• ltULgt
• ltLIgtXML, origines et eacutevolution,
  XQuery, optimisation et implantationlt/LIgt
• ltLIgtconcepts de base des services Web,
  Architecture .NET, Seacutecuriteacute lt/LIgt
• ltLIgtInteacutegration de donneacuteeslt/LIgt
  
• lt/ULgt
• Ce livre indispensable preacutesente donc une
  synthegravese tregraves complegravete des
  techniques XML.
• lt/BODYgt
• lt/HTMLgt

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.

Serveur HTTP
GET / test.html
http//www. prism.uvsq.fr/test.html
Text/html (test.html)
blablabla
Client
test.html
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
ltLINK REL"stylesheet" HREF"fichier.css"gt
... TD, TH font-family "Helvetica",
sans-serif line-height 1.35 H1, H2
margin-top 1.2em margin-left -7
color 900 clear both ...
_at_import "truc.css" BODY color 000
background FBFBFF margin-left 9
margin-right 6 font-family "Helvetica",
sans-serif line-height 1.35
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 lentreprise
• 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
2. Common Gateway Interface (CGI)

• Protocole dappel 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

Serveur Web
Client
Page HTML
téléchargement
Page HTML
url longue
Prog. CGI
réponse
données
17
Scénario
Param
.
Url Longue /cgi-bin/p?param
P
SQL
p
a
HTML
s
s
e
r
e
HTML
l
l
e
Navigateur
...
Bases de
Serveur
données
HTTP
Scripts
d'application
Serveur d'application
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 ltFORMgt 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

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Exemple de formulairelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtExemple de formulairelt/H1gt
• ltFORM METHODPOST ACTION"/cgi-bin/invite.exe"gt
• Nom ltINPUT TYPETEXT SIZE30 NAME"nom"gtltBRgt
• Adresse e-mail ltINPUT TYPETEXT SIZE20
  NAME"email"gtltBRgt
• ltPgtCommentairesltBRgt
• ltTEXTAREA COLS60 ROWS15 NAME"comment"gt
• lt/TEXTAREAgt
• ltINPUT TYPESUBMIT VALUE"OK"gt
• lt/FORMgt

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?champ1v
  aleur1champ2valeur2...
• 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,
• daccé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 "ltHTMLgt"
• print "ltHEADgt"
• print "ltTITLEgtHello worldlt/TITLEgt"
• print "lt/HEADgt"
• print "ltBODYgt"
• print "Hello world!"
• print "lt/BODYgt"
• print "lt/HTMLgt"

26
CGI évaluation

• Avantages
• utilisable avec nimporte 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
• ltSCRIPT language"VBScriptJscript"
  runat"serverclient" type"text/vbscript
  jscript" src"url" gt code du script lt/SCRIPTgt
• lt code du script gt
• Impression du texte et interprétation du code par
  le serveur dASP

• Exemple simple
• lt_at_ LANGUAGE"VBSCRIPT" gt
• ltHTMLgt
• ltHEADgtltTITLEgtExemple de script ASPlt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt FOR i 1 to 10 gt
• Bienvenue au cours BD Web
• lt Next gt
• lt/BODYgt
• lt/HTMLgt

29
Exemple daccè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 dobjets données

• ltHTMLgt
• lt
• VinRequest.QueryString("NumVin")
• Set NObjServer.CreateObject("VINS.NumVin")
• if NObj.GetCru(Vin)False then
• Server.Redirect("NumVin/entryform.htm")
• gt
• ltH1gt VIN CHOISI ltNObj.Crugt lt/H1gt
• ltTABLEgt
• ltTRgtltTDgtDegrelt/TDgtltTDgtMillesimelt/TDgtltTDgtRegionlt/TD
  gtlt/TRgt
• ltTRgtltTDgtltNObj.Degregtlt/TDgt
• ltTDgtltNObj.Millgtlt/TDgt
• ltTDgtltNObj.Regiongtlt/TDgtlt/TRgt
• lt/TABLEgt
• ltH2gt DATE DE SELECTION lttime()gtltdate()gtlt/H
  2gt
• lt/HTMLgt

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 ltservletgt)
• Communication par des variables
• Utilisation de tags lt gt (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

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Exemple de JSP lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt!-- Fixer les parametres de la page --gt
• lt_at_ page language "java" gt
• lt!-- Declarer une variable caracteres --gt
• lt char c 0 gt
• lt!-- Scriplet - Code Java --gt
• lt
• for (int i 0 i lt 26 i)
• c (char) (0x41 i)
• gt
• lt!-- Afficher c --gt
• lt c gt
• lt gt
• lt/BODYgt
• lt/HTML

33
Objets d'environnements
34
Les servlet Java

• Servlet
• Moteur multi-thread d'exécution de classe côté
  serveur
• Approche API objet (e.g., services, httprequest)
• Lutilisateur 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

• 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

• // Connexion
• Connection con DriverManager.getConnection(url)
  
• // Création d'une instruction
• Statement statement con.createStatement()
• // Exécution d'une requete
• String query "SELECT FROM Employés"
• ResultSet resultset statement.executeQuery(query
  )
• // Traitement des résultats
• while(resultset.next())
• System.out.println(resultset.getString(2) " "
  resultset.getString(3))
• // fermeture de la connexion
• con.close()

SQL
ResultSet
Base de données
Application
Serveur de données
37
5. PHP de Apache (Open Source)

• Langage de scripts intégré aux pages HTML
• Les scripts PHP sont entre balises lt?php .. ?gt
• Possibilité de récupérer les variables de
  formulaires HTML
• variable

• Exemple
• lthtmlgt ltheadgt lttitlegtHello Worldlt/titlegt
  lt/headgt ltbodygt lt?php    echo "Hello world"
   ?gt lt/bodygt
• lt/htmlgt

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 dun vin

• Saisie du numéro, cru et millésime
• par une forme HTML
• Insertion dans MySQL en PHP
• lt?php mysql_connect("localhost","root","")
  connexion_reussimysql_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" ?gt

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