dochtml
download 
Plainte Transcription
html
Développement
d'applications bases de
données sur le Web
INT Management
265
Plan
Quelques éléments sur HTML, HTTP et
Javascript
slide 267
Principes d'interconnexion Web/BD
slide 291
La passerelle Oracle/Web de l'INT
slide 312
266
Éléments sur HTML, HTTP
et Javascript
267
Langage HTML
Permet de définir des hyper-documents
multimédia, répartis
Langage de balises
structure du document (H1, H2, ...)
présentation (SMALL, B, ...)
aspects dynamiques (SCRIPT, FORM, ...)
268
Exemple de page HTML
<html>
<head><title>Ceci est un essai</title></head>
<body bgcolor="white">
<h1>Ceci est un essai</h1>
<hr/>
C'est une liste :<p/>
<ul>
<li>element 1</li>
<li>element 2</li>
</ul>
</body>
</html>
269
Hyper-lien
Un document peut référencer un autre
document au moyen d'une balise A HREF en
désignant le document cible
<A HREF="toto.html"> désigne le fichier de
nom toto.html (on peut aussi désigner le
fichier de manière absolue par une URL)
Le document référencé peut se situer sur une
autre machine
270
Notion d'URL
Uniform Resource Locator
Mécanisme d'adressage UNIQUE d'un fichier
Protocole://serveur-web/chemin-au-fichier
http://www-inf.int-evry.fr/~defude/index.html
demande via http à la machine de nom www-inf.int-evry.fr
d'un fichier localisé sur la racine du compte de l'utilisateur
defude et qui s'appelle index.html
ftp://ftp.int-evry.fr
271
Les formulaires HTML
Un formulaire autorise l’interactivité entre le
client et le serveur
Un formulaire contient:
des zones de saisie avec des boutons, des listes de
choix, ..
un attribut action qui définit l'URL d'un programme
exécutable sur le serveur
un attribut method qui définit le mode de transfert
des données vers le programme
272
Balise FORM
<form
name="f1"
nom du
formulaire
action="http://www-inf.int-evry.fr/prog.cgi"
method="get"
target="resultat">
...
</form>
url du programme
CGI
mode d'invocation
du CGI
optionnel nom
fenêtre résultat
273
Balise INPUT
Un formulaire comprend un ensemble de
variables déclarées par des balises INPUT
optionnel
<input
type="hidden" ou "submit"
name="nom"
value="10"
>
valeur par
défaut
nom de la
variable
274
Exemples d'INPUT
<input type="hidden" name="cru"
value="cornas">
<input name="numero" value="10">
attribut de nom cru défini comme champ caché
attribut de nom numéro qui sera affiché
<input type="submit" value="lancer">
bouton de libellé lancer qui permettra d'activer le
CGI
275
Exemple de formulaire
<html><body>
<form name="f1"
action="http://www-inf.int-evry.fr/prog.cgi"
method="get"
target="resultat">
Donner une valeur pour att1 : <input name="att1" value="0">
<input type="hidden" name="att2" value="">
<input type="submit" value="lancer">
</form>
</body></html>
276
Javascript
Langage de script qui n'a de commun avec Java
que le nom !
Permet d'intégrer du code dans une page HTML
qui sera exécuté par le navigateur (suppose que
le navigateur sache le faire et qu'on l'y autorise)
Contient les constructions classiques de
programmation (variables, conditionnelles,
itérations, fonctions et procédures, ...)
Des restrictions dues à la sécurité (pas d'accès
au système de fichier local p.e)
277
Exemple Javascript
<html>
<script>
function check(form){
if (form.NOM.value==""){
alert(‘champ NOM non rempli’);
}
else {
form.submit();
}
}
</script>
<body>
<form
action="http://www-inf/cgi-bin/bd/prive/multi2.cgi"
target="resultat"
method="GET"
name="fqbe">
NOM = <input name="nom"
value="">
<input type="button" value="interroger"
onClick="check(fqbe);">
<input type="reset" value="effacer">
</form>
</body></html>
278
WWW - Architecture de base
HTTP
Client W3
page
HTML
affichée
Serveur W3
chaque page
possède un URL
pages
HTML
système
de
fichiers
279
WWW - Le client W3
Logiciel de consultation hypertexte
interprète et affiche le texte HTML
affiche le texte plat sans interprétation
visualise les images fixes gif, jpeg et x-bitmap
Contient des plug-in ou des visualiseurs externes
spécialisés pour divers formats
son, image animée, Postcript, ..
280
WWW - Le serveur W3
Fonctions assurées
gère les connexions des clients W3
assure la protection des documents statiques (HTML,
images, ..)
vérifie la validité des requêtes et les droits des clients
exécute les requêtes des clients
renvoyer un document statique
exécuter un programme externe
281
WWW - Le protocole HTTP
HTTP est un protocole simple (GET, EXEC,
HEAD, ...)
HTTP est un protocole sans session
la nouvelle version HTTP 1.1 permet de maintenir une
connexion persistante
HTTP est un protocole peu sécurisé
évolution avec S-HTTP (Secure) du NCSA ou SSL
(Secure Socket Layer) de Netscape
282
WWW - Stockage des documents
Système de fichiers de la machine serveur
Arborescence de fichiers
par défaut, à partir du serveur W3 avec un répertoire
racine fixé par l'administrateur
à partir d’un compte utilisateur avec le répertoire racine
/public_html
Un fichier de l’espace de stockage W3 doit être en
lecture pour tous
283
WWW - Protection documents
Protections standard du système d’exploitation
Protections propres au système Web pour accéder
un document
accès avec un nom utilisateur et un mot de passe
accès à partir d’un domaine IP
accès depuis une machine particulière
284
WWW - Architecture étendue
HTTP
client W3
form
W3
page
W3
CGI
serveur W3
système
de fichiers
Pages HTML
statiques
script
CGI
protocole
dédié
appli externe
BD ou
système
de fichiers
Pages HTML
dynamiques
285
Programme CGI
Interface CGI définit le moyen de passer des
informations du client vers le prog. CGI et
retour
Un prog. CGI reçoit un seul argument de type
chaîne de caractères
Cette chaîne se décompose en couples
attributs-valeurs
Deux modes de transmission GET et POST
286
Programmation CGI (suite)
Programme CGI doit décoder la chaîne pour
extraire les paramètres
Renvoie son résultat sur sa sortie standard
en ayant préalablement déclaré le type
(content-type: text/html par exemple)
Langages utilisés : Perl souvent, mais on
peut choisir n'importe lequel
287
Exemple de CGI en Perl
#!/usr/bin/perl -w
use CGI qw (:standard);
$ior = param('IOR');
print header;
print "<HTML><HEAD>\n";
print "<TITLE>Résultat décodage IOR</TITLE></HEAD>\n";
print "<H4>IOR décodé</I></H4><BR>";
print "<HR WIDTH=80%><BR>\n";
open(FILE, "-|") || exec "/inf/QOS_CORBA/Olivier/bin/iordump", "-f", $ior;
while ($LIG=<FILE>) { print "$LIG<br>\n"; }
print "<HR WIDTH=80%><BR>\n";
close(FILE);
print "</BODY>\n";
print "</HTML>\n";
288
Principes d'interconnexion
web/BD
289
Principes des passerelles
Passerelles mono-requête
Passerelles multi-requêtes ou
transactionnelles
architectures spécifiques
support d'un langage de script côté serveur
comme PHP, servlet - JSP Java, ASP, XSP
(Cocoon)
290
Fonctionnalités à assurer
(1) décodage de la requête http (passage
var. environnements vers SQL)
(2) exécution de la requête sur le SGBD
(3) formatage HTML du résultat
291
Exécution d ’une requête SQL
Programme écrit avec une interface BD
solution dépendante du SGBD
solution indépendante du SGBD (ODBC, JDBC
ou DBI pour Perl)
Langages de programmation utilisables
classiques : C, C++, Ada, … si embedded SQL
Perl (avec DBI)
292
Habillage HTML du résultat
Solution générique (et automatisable) :
select : tableau HTML
autre requête : chaine de caractères
Solution spécifique : codage spécifique pour
chaque requête
dans la passerelle (une passerelle / requête !)
dans le SGBD (procédure stockée)
Solution intermédiaire :
paramétrisation du résultat (formulaire de mise à
jour, parcours hypertexte d ’une BD ,…)
293
Interface BD/Web
Le langage PHP
Version opensource de la technologie page
active
Page active programme s ’exécutant côté
serveur (généralise CGI et ISAPI)
Suppose l’installation d’un interpréteur
associé au serveur HTTP
interface BD via une API spécifique ou une
couche d’abstraction (AdoDB p.e)
294
Principe page active
Serveur
Client
Browser
Page
demandée
Page active
PHP
Interprète
PHP
BD
Décodage
HTTP
Encodage
HTTP
Ajout
enveloppe
HTTP
Page
dynamique
295
Architecture générale
Internet
Serveur
HTTP
Interprète
PHP
SSinclude
API SGBD
SGBD
Pages actives (fichiers PHP)
296
Plan d ’une page active
<HTML>
Sections HTML normales
<HEAD>
…
</HEAD>
Script serveur (création page)
<BODY>
<?php …………….. ?>
<SCRIPT LANGUAGE=Javascript>
…
Script client (interprétation page)
</SCRIPT>
<!--#Include … -->
<TABLE>
SSI (script ou HTML
…
</TABLE>
</BODY>
HTML normal
</HTML>
dans fichier séparé)
297
PHP-MySQL
Prog. PHP-MySQL
Lib SGBD+
Lib PHP
Interprète PHP
résultats
298
Le modèle de programmation web
Client
variables
Cookies $_COOKIES
Formulaires $_GET, $_POST
Environnement $_ENV
ServerVariables $_SERVER
ClientCertificate
Serveur
variables
Cookies
variables SESSION
299
Exemple de formulaire
<html>
<body>
Exemple de formulaire<p/>
<form name= "f1" method= "post" action= "traiter.php">
Nom = <input name= "nom » value=""><p>
Prenom = <input name= "prenom" value=""><p>
Ville = <input name= "ville" value=""><p>
Dept = <input name= "departement" value=""><p>
<input type= "submit" value= "go">
</form>
</body>
300
Traiter.php
<?php
echo "<h1 align=center>Premier programme PHP d'utilisation de
formulaires</h1>";
echo "<br><br><ul>";
echo "<li>Nom = ".$_POST["Nom"];
echo "<li>Prénom = ".$_POST["Prenom"];
echo "<li>Ville = ".$_POST["Ville"];
echo "<li>Département = ".$_POST["Departement"];
echo "</ul>"; ?>
<br><br>voir le <a href="affiche.txt">source</a>
?>
301
Exemple de connexion avec ADODB
<?php include('init-ado.php');
$connection = &ADONewConnection('mysql');
$connection->Connect (dbnode, dbuser, dbpasswd, dbinstance);
$reqsql=$_GET[‘reqsql’];
$rs=$connection->Execute($reqsql);
if ($rs == false) die("failed");
print '<p>Number of tuples = '.$rs->RecordCount();
print '<p><table border=1><tr>';
for ($i=0; $i<$rs->FieldCount(); $i++) {
$ff = $rs->FetchField($i);
print '<td>'.$ff->name. '</td>'; }
print '</tr>';
while ($arr = $rs->FetchRow()) {
print '<tr>';
for ($i=0; $i<$rs->FieldCount(); $i++) { print '<td>'.$arr[$i].'</td>'; }
print '</tr>'; }
print '</table>'; ?>
302
Exemple Simple PHP-ADODB
<?php
include(‘init-ado.php');
$connection = &ADONewConnection(‘mysql');
$connection->Connect (dbnode, dbuser, dbpasswd,
dbinstance);
$connection->debug=true;
$rs=$connection->Execute('select id, titre from films');
rs2html($rs);
?>
303
init-ado.php
<?php
include('/mci/inf/defude/adodb/adodb.inc.php');
include('/mci/inf/defude/adodb/tohtml.inc.php');
define("dbnode", "santorin.it-sudparis.eu");
define("dbuser", "em2_1");
define("dbpasswd", "em2");
define("dbinstance", "Base_des_films");
?>
304
Des exemples pour s’inspirer
http://www-inf.itsudparis.eu/cours/BD/PRIVATE/MsCWEBDB
/CodeSample/MySQL/
305
