Vous êtes sur la page 1sur 187

Technologies Web

Philippe Rigaux

adaptation

AbdelAli.ED­DBALI@univ­orleans.fr

d'après

Pratique de PHP et MySQL
O'Reilly
http://oreilly.free.fr/mysqlphp

Technologies web 1
Objectifs

Comprendre le fonctionnement de quelques outils 
de la création web :
HTML (HyperText Markup Language), XHTML
Les feuilles de style CSS (Cascading Style Sheets)
Le langage côté client Javascript
Le langage de script PHP
Le SGBD relationnel MySQL
L'articulation de tous ces outils pour créer des sites 
internet/intranet dynamiques

Technologies web 2
Plan
Les bases du Web : architecture, adressage, 
HTTP
Langages côté client :
HTML
Feuilles de style CSS
JavaScript
CGI et PHP
PHP et MySQL

Technologies web 3
Pour tout savoir
Sur les standards du web :
Le site du consortium WWW: http://www.w3c.org
Les documents de référence sur HTTP, HTML, CSS, XML, 
XHTML, et plein d'autres gros mots.
Publiés sous la forme de RFC (Request For Comments). 
Certains ont acquis le statut de norme (ex HTML 4.0)
Ça bouge tout le temps: à consulter régulièrement
D'autres sites spécifiques à PHP et MySQL :
PHP : www.php.net, www.phpfrance.com
MySQL : www­fr.mysql.com

Technologies web 4
L'internet

 C'est le réseau des réseaux !
   Basé sur un protocole (de bas niveau), TCP/IP
Permet d'échanger des données dans un environnement 
hétérogène
Chaque ordinateur est connu par une adresse IP unique
On peut aussi y faire référence par son nom
Ex: cortes.cnam.fr = 163.173.212.26

Technologies web 5
Le Domain Name Service

 Établit une correspondance noms/adresses
Jusqu'en 1984, tout était centralisé dans un seul fichier 
hosts.txt !
Remplacé par le DNS: une organisation hiérarchique des 
noms de domaine
La gestion du DNS est décentralisée: un sous­domaine 
est géré par un serveur de nom

Technologies web 6
Structure du DNS

Les serveurs de nom collaborent entre eux pour 
convertir un nom de machine en adresse IP.
.com .org .fr

fnac bhv afplc apache sncf cnam univ-orleans

www www xml java www cortes

Technologies web 7
Le Web

C'est un système d'information basé sur l'Internet
Ce SI est constitué de « documents », terme à 
prendre au sens large
Ils sont fournis par des serveurs web
Ils sont consultés grâce à des clients web
Les serveurs et les clients communiquent à l'aide 
d'un protocole : HTTP ­ HyperText Transfer Protocol

Technologies web 8
Fonctionnement du Web

HTTP PHP, Java, 
Perl, C, ...

requêtes
programme programme 
Internet
client serveur
document
machine client documents

HTML
CSS documents
JavaScript

machine serveur

Technologies web 9
Quelques mots sur HTTP
Protocole (langage) d'échange d'informations 
propre au Web
On ouvre une connexion
On envoie un en­tête
Puis une ligne blanche
Puis éventuellement un contenu
Et on ferme la connexion.
Pas de connexion permanente !

Technologies web 10
Les requêtes HTTP

 Principaux types de requêtes :
GET: on demande quelque chose au serveur.
GET /index.html HTTP/1.0
POST: on envoie quelque chose au serveur.
POST /cgi­bin/prog.php HTTP/1.0
nom=rigaux&prenom=philippe
HEAD: on demande des infos sur un document.

Technologies web 11
Les réponses HTTP

En­tête/ligne blanche/contenu :
Date: Tue, 05 Jun 2001 20:39:56 GMT
Server: Apache/1.3.17 (Unix) mod_jk PHP/4.0.2
Last­Modified: Tue, 05 Jun 2001 20:13:39 GMT
Content­Length: 159
Connection: close
Content­Type: text/html

<html>
<head>
 <title>Page d'accueil</title>
</head>
<body bgcolor="white">
 <h1 align="center">Page d'accueil</h1>
</body>
</html>

Technologies web 12
Informations d'une réponse HTTP

Dans l'en­tête :
Le type de contenu Content­type
indique si le contenu est du HTML, du gif, du pdf, du XML ...
la longueur du contenu (permet de savoir combien de 
temps ça va prendre)
la date de dernière modification (pour gérer le cache)
éventuellement des cookies

Technologies web 13
Le client (navigateur)

Le programme client est en charge du rendu des 
documents
Il dialogue avec le serveur
En lui demandant des documents
En lui fournissant des informations
(paramètres, fichiers)
Il communique les documents à l'utilisateur
(textes, images, sons)

Technologies web 14
Le programme serveur

En général c'est un démon (Unix) ou un service 
(Windows)
Il est en écoute permanente sur un port réseau (en 
général le port 80)
Il reçoit, analyse les requêtes de clients web
Il transmet en retour un document résultat de la 
requête.

Technologies web 15
Adressage de documents : les URL
Uniform Resource Locator

prot://serveur[:port]/chemin/document?args
prot le protocole: http, ftp ou autre
serveur le nom ou adresse IP du serveur
port port d'écoute
chemin arborescence des répertoires pour accéder 
au document
document nom du document
args liste de paramètres pour les scripts
(programmes qui fournissent comme résultat un
document HTML)

Technologies web 16
Exemples d'URL

http://localhost/WEB/ExHTML1.html
Le serveur est la machine locale (aussi 127.0.0.1)
Le document est dans le sous­répertoire WEB du 
répertoire racine (ex.: /usr/local/apache/htdocs/WEB)
http://localhost/FILMS/Film.php?titre=Seven
http://127.0.0.1/FILMS/Film.php?titre=Alien
Plus sophistiqué : le document est généré 
dynamiquement

Technologies web 17
HTML

Technologies web 18
Documents hypertextes : HTML

Un langage de présentation de documents
Des balises intégrées dans le texte indiquent le formatage 
souhaité
c'est le navigateur qui détermine la présentation finale
Les ancres
Certaines parties du texte donnent accès à d'autres 
documents
Navigation vs lecture séquentielle

Technologies web 19
Histoire : Les premiers visionnaires du
Web

Le premier navigateur (browser) aurait été utilisé dès 
la Renaissance! Cette image est la reproduction d'une 
gravure du capitaine Agostina Ramelli (Paris, 1588). 
La machine devait faciliter les études. Le chercheur 
consulte plusieurs livres donnant des informations 
ponctuelles, simplement en tournant une roue, le 
premier des "browsers".

Le premier modèle électronique de l'hypertexte fut 
publié en 1945 par Vannevar Bush. Il conceptualisa 
alors le "MEMEX" (MEMory Extension). L'utilisateur 
aurait eu la possibilité d'y accéder grâce à des liens 
entre les textes et les illustrations.

Technologies web 20
Un premier document HTML

<html>
<head>
  <title>Un exemple de document HTML</title>
</head>
<body bgcolor="white">
  <!­­ Ceci est un commentaire ­­>
  <center><h1>Mon premier document HTML</h1>
  </center>
  Je tape du texte
  <b>n'importe comment</b>
</body>
</html>

Technologies web 21
Les balises HTML

Les conteneurs
appliquent un formatage à tout le texte compris entre 
<balise> et </balise>
Ex: <b> Ceci est important </b>
met en caractères gras
Les éléments vides
Insèrent un élément de présentation
Exemple : <hr /> trace une ligne horizontale

Technologies web 22
Les ancres

La balise <a href="url"> est un conteneur qui 
permet de marquer les ancres
url peut être un fichier local ou n'importe quelle 
adresse URL
<a href='ExHTML1.html'>L'autre document</a>
<a href='/FILMS/Film.php?titre=Seven'>...</a>
<a href='http://serveur.machin.com/doc.html'>...</a>

Technologies web 23
Document avec ancres

<html><head>
<title>Document avec des ancres</title>
</head>
<body bgcolor="white">
<center>
  <h1>Document avec des ancres</h1>
</center>
Une ancre vers <a href='/WEB/ExHTML1.html'>le 
premier document</a>
<p>
Une ancre vers <a href='/FILMS/Film.php?
titre=Seven'>Seven</a>
</body></html>

Technologies web 24
Quelques balises HTML

Listes
numérotées : <ol> <li> ... </li> <li> ... </li> </ol>
à puces : <ul> <li> ... </li> <li> ... </li> </ul>
<p>...</p> : nouveau paragraphe
<hn> (0 ≤ n ≤ 8) pour les titres

<table> pour des tableaux
<form> pour des formulaires
<img src='url'> pour insérer une image
<b> , <i> , <tt> : gras, italique, courier

Technologies web 25
Les tableaux HTML

Entre les balises <table> et </table>
<tr> et </tr> définissent une ligne
<td> et </td> définissent une cellule
On peut imbriquer une autre table ou n'importe quoi 
d'autre dans une cellule
Toute la disposition est calculée par le navigateur
Permet d'organiser la présentation d'une page

Technologies web 26
Exemple de tableau

<html>
<head><title>Tableau HTML</title></head>
<body bgcolor="white">
<table border="4" cellspacing="2" cellpadding="2">
<caption align="bottom"><b>Mes films</b></caption>
<tr><th>Titre</th><th>Année</th>
    <th>Nom Réalisateur</th></tr>
<tr><td>Alien</td><td>1979</td><td>Scott</td></tr>
<tr><td>Vertigo</td><td>1958</td><td>Hitchcock</td></tr>
<tr><td>Van Gogh</td><td>1991</td><td>Pialat</td></tr>
<tr><td>Pulp Fiction</td><td>1994</td>
    <td>Tarantino</td></tr>
</table>
</body>
</html>

Technologies web 27
Résultat

Technologies web 28
Couleurs, polices, et autres attributs

Jusqu'à HTML 3.2 : on utilise les attributs des 
balises. Exemples :
<body bgcolor='white'> ... </body>
<font color='red' face='time'> ... </font>

 Quelques soucis:
Lourd et répétitif (moins vrai si on utilise un logiciel type 
DreamWeaver)
Contrôle incomplet sur le positionnement

Technologies web 29
Feuilles de style (CSS)

À partir de la version 4 : on peut définir des feuilles 
de style
On définit globalement des instructions de mise en 
forme
Les instructions sont rassemblées dans un document 
indépendant
Ce document peut être associé à un ou plusieurs 
documents HTML

Technologies web 30
Exemple d'une feuille CSS

/* Le fond est toujours en blanc   */
body {background­color: white}

/* Couleur rouge pour ancres et en­têtes */
a, h1, h2, h3 {color: #ca0000}

caption {font­size:large; color: #ca0000}

/* Classes pour alterner les couleurs des lignes */
tr.A0 {background­color:white}
tr.A1 {background­color:yellow}

.attention {background­color:red; color:white}

Technologies web 31
Quelques commentaires

Des instructions globales:
a, h1, h2, h3 {color: #ca0000}
le style sera appliqué à toutes les balises
Des classes pour raffiner les styles
tr.A0  {background­color:white}
on peut appliquer <tr class='A0'>
Les classes peuvent être génériques :
.attention {background­color=red}
Ex : <b class='attention'>

Technologies web 32
Application d'une feuille CSS

<html><head><title>tableau html</title>
<link rel="stylesheet" href="excss.css" type="text/css">
</head><body>
<table border=4 cellspacing=2 cellpadding=2>
 <caption><b>Mes films</b></caption>
 <tr><th>Titre</th><th>Année</th>
     <th>Nom Réalisateur</th></tr>
 <tr class='A0'><td>alien</td><td>1979</td>
                <td>scott</td></tr>
 <tr class='A1'><td>vertigo</td><td>1958</td>
                <td>hitchcock</td></tr>
 <tr class='A0'><td>van gogh</td><td>1991</td>
                <td>pialat</td></tr>
</table>
<b class='attention'>Et voilà !</b>
</body></html>

Technologies web 33
Résultat

Technologies web 34
Programmation côté client avec
JavaScript

Technologies web 35
JavaScript

C'est un langage interprété par le navigateur
Initialement proposé par Netscape
Repris (avec des différences) par Internet Explorer
Plus ou moins normalisé par le W3C sous le nom 
d'ECMA­Script
Rôle de JavaScript : rendre plus interactive 
l'interface HTML

Technologies web 36
À quoi sert JavaScript ?

Chaque fois qu'il faut répondre aux actions de 
l'utilisateur sans retourner au serveur.
Pour faire un calcul en local
Pour contrôler une zone de saisie
Pour afficher un message
Pour piloter l'interface du navigateur
(fenêtres, menus déroulant)
Gros souci : la compatibilité avec les navigateurs

Technologies web 37
Un exemple trivial

<html><head>
<title>Mon premier JavaScript</title>
</head>
<script language="JavaScript1.2">
function bonjour()
{
  alert("Bonjour madame, bonjour monsieur");
}
</script>
<body bgcolor="white" onLoad="bonjour();">
     <h1>Je suis poli non ?</h1>
</body></html>

Technologies web 38
Résultat

Technologies web 39
Principe de base

Séquence classique Événement­Action :
On réagit à certains événements sur certaines balises :
onBlur, onClick, onLoad, ...
On déclenche du code (une fonction) qui peut 
accéder aux composants d'un document (champs d'un 
formulaire)
créer de nouveaux composants (fenêtres, boutons, 
messages, zones de saisie)

Technologies web 40
Contrôle de la valeur d'un champ

<input type=text size=20 name="taux"
       onBlur="valeurTaux(value);">

function valeurTaux(taux) {
if (taux != '') {
   mess = '';
   if (taux > 20) mess = "C'est trop !!";
   if (taux <= 5) mess = "Là c'est pas assez !!!";
   if (mess != '')  {
    alert (mess);
    document.forms[0].taux.value = '';
    document.forms[0].taux.focus();
   }
  }
}
Technologies web 41
Résultat

Technologies web 42
Affichage de nouvelles fenêtres

Un manuel utilisateur (événement onClick) :
function afficheDoc()
{
 options = "width=300,height=200";
 fenetre = window.open('','MU',options);
 fenetre.document.open();
 manuel = "<body bgcolor='white'>"
          + "Pour utiliser la calculette "
          + " c'est facile."
          + " Bonne chance !</body>";
fenetre.document.write(manuel);
fenetre.document.close();
}
Technologies web 43
Calcul de nouvelles valeurs

<input type=text size=2 name="pourcVr"
       onChange="calculVR();">
function calculVR()
{
  mt = document.forms[0].mtfin.value;
  pourcVr = document.forms[0].pourcVr.value;
  vr = mt * pourcVr / 100.;
  document.forms[0].vr.value = vr;
}

Technologies web 44
Validation d'un formulaire

<input type=BUTTON value="Vérifier"
       onClick="ctrlForm()">
function ctrlForm()
{
  if (isNaN(window.document.Simul.mtfin.value ))
  {
    alert ("C'est quoi ce montant : " +
           document.Simul.mtfin.value + "?");
    document.forms[0].mtfin.focus();
  }
}

Technologies web 45
Alors, JavaScript ?

Très utile pour animer les pages HTML
De préférence, chercher des ressources existantes sur 
le Web
Exemples
date et heure
liste de liens
texte en barre d'état
aide dynamique
Gros souci : compatibilité des navigateurs.

Technologies web 46
Introduction à la
programmation web avec
CGI et PHP

Technologies web 47
Principes étudiés

Principes généraux de la programmation CGI
Démonstration avec des scripts simples en Shell et 
en C
  Les formulaires
  Échanges client/serveur, illustration avec PHP
Envois du client au serveur
Envois du serveur au client
Cookies et sessions web

Technologies web 48
CGI : Common Gateway Interface

Principe : on déclenche une action (un programme) 
sur la machine serveur
On peut transmettre des informations
(typiquement saisies dans un formulaire)
Le programme CGI renvoie un document
le moyen le plus ancien de créer dynamiquement des 
pages HTML

Technologies web 49
Architecture CGI

requêtes requêtes
programme programme  programme 
Internet
client serveur CGI
document(s) document(s)
HTML HTML
machine client

fichiers

machine serveur

Technologies web 50
Le programme CGI

Lecture des paramètres
transmis par le programme serveur
Traitement de la demande
tout est permis ! Accès BD, génération d'images, ...
Production du document
il est renvoyé au programme serveur, qui le transmet au 
navigateur

Technologies web 51
Transmission client => serveur

En principe à partir d'un formulaire HTML (mais pas 
obligatoire !)
Les arguments sont fournis dans une chaîne au format
nom1=val1&nom2=val2&...
Deux méthodes principales :
GET: la chaîne est transmise dans l'URL
POST : la chaîne est transmise séparément
POST est préférée, car elle évite les très longues 
URL

Technologies web 52
Transmission serveurprogramme

La requête est transmise sous forme de variables 
d'environnement
SERVER_NAME: nom du serveur
HTTP_USER_AGENT : nom du client
REQUEST_METHOD : GET ou POST
QUERY_STRING : la chaîne des paramètres
CONTENT_LENGTH : longueur de la chaîne

Technologies web 53
Action du programme

Trois phases:
Décryptage des paramètres (pénible !)
Traitement (accès BD, calculs, etc)
Écriture du résultat sur la sortie standard (stdout)

Peut être n'importe quel script (shell, Perl) ou 
programme exécutable (C, C++)

Technologies web 54
Un programme CGI très simple !

#!/bin/sh
echo Content­type: text/plain
echo

echo Logiciel serveur = $SERVER_SOFTWARE
echo Machine serveur = $SERVER_NAME
echo Type de requête = $REQUEST_METHOD
echo Navigateur = $HTTP_USER_AGENT
echo La requête = $QUERY_STRING
echo Longueur requête = $CONTENT_LENGTH

Technologies web 55
Exemple : un calcul de loyer

On dispose d'un programme qui sait calculer des 
loyers :
on lui passe le montant à emprunter, le taux et la durée 
en mois ;
il récupère les données et lance le calcul ;
enfin il affiche en retour le tableau d'amortissement.

Technologies web 56
(1) : envoi de l'en-tête HTTP

/* On va retourner un fichier HTML */

printf ("Content­type: text/html\n\n");
printf ("<head><title>");
printf ("Résultat du calcul");
printf ("</title></head><body>");
printf ("<h1>Résultat du calcul</h1>");

/* *** Phase 1: extraction des paramètres *** */

/* Dans la chaîne 'ligne', on place
    les paramètres de la requête        */

strcpy(ligne, getenv("QUERY_STRING"));
Technologies web 57
(2) : lecture des paramètres

/* Décryptage de la chaîne */

mtfin = atof (ExtraitArg (ligne, arg));
taux = atof (ExtraitArg (ligne, arg));
vr = atof (ExtraitArg (ligne, arg));

/** Phase 2: calcul **/

printf ("<HR>Mt=%f Taux=%f Durée=%d<HR>",
           mtfin, taux, duree);
calc = ImfCreateSimpleCalc (mtfin, taux);
ImfAddStep (calc, duree, 1, ARREARS, 0, 0);
ImfCompute (calc, RENTAL_METH);

Technologies web 58
(3) : affichage

printf ("<CENTER><TABLE border=3 cellspacing=5>");
printf ("<tr><TH>Ech.</TH><TH>Loyer</TH>\n");
printf ("<TH>Intérêts</TH><TH>CRB</TH>\n");
printf("<TH>CRD</TH></tr>\n");
for (iech=1; iech <= nbEchTot; iech++)
{  ech = ImfGetInst (calc, iech);
   printf ("<tr><td></td>");;
   printf ("<td>%f</td>", ech.rental);
   printf ("<td>%f</td>", ech.interest);
   printf ("<td>%f</td>", ech.refund);
   printf ("<td>%f</td>", ech.end_bv);
   printf ("</tr>\n");
}
printf ("</table></CENTER>\n");

Technologies web 59
Appel du programme CGI

Exemple: j'emprunte 10 000, à 5 % et sur 12 mois :
SimSple.cgi?mt=10000&taux=5&duree=12
Ce n'est pas très pratique de passer des paramètres de 
cette façon ! (mais on ne peut pas l'empêcher...)
Heureusement il y a les formulaires HTML : le bon 
moyen pour communiquer avec un CGI

Technologies web 60
Formulaires HTML: FORM

<form action='SimSple.cgi' method='GET' name='monForm'>

ACTION est l'URL du script ou du programme à 
déclencher (en principe, sur le serveur)
METHOD est GET ou POST (meilleur)
NAME est le nom du formulaire (utile pour les contrôles 
JavaScript)
ENCTYPE est le mode d'encodage des informations. 
Utile pour transférer des fichiers

Technologies web 61
Exemple : un formulaire HTML

<html><head>
<title>Simulation financière</title>
</head><BODY bgcolor="WHITE">
Entrez le montant, le taux et la durée :
<form action="SimSple.cgi" method="GET">
Mt : <input type=text size=20 name="mtfin"><BR>
Taux : <input type=text size=20 name="taux"></BR>
Durée : <select name='duree'>
          <option value="6">6 mois</option>
          <option value="12">1 an</option>
          <option value="24">2 ans</option>
        </select>
<input type=submit value="Exécuter">
</form></body></html>

Technologies web 62
Résultat

Technologies web 63
Champs de formulaire

Très général: saisie de texte, ou choix dans des 
listes. L'attribut TYPE vaut :
TEXT  pour les chaînes de caractères
HIDDEN  pour les champs cachés
CHECKBOX  pour un choix multiple
RADIOBOX  pour un choix exclusif
SUBMIT  pour déclencher l'action
FILE  pour transmettre un fichier

Technologies web 64
Champs HIDDEN
et SUBMIT

<html>
<head>
  <title>Balise INPUT­SUBMIT</title>
</head>
<BODY bgcolor='white'>
 <form action='ExHTTP.cgi' method='GET'>
 <p>
 <input type='HIDDEN' value='valeur' name='champ'>
 </p>
 <p>
 <input type='submit' value='Pas le choix !'>
 </p>
 </form>
</body></html>
Technologies web 65
Champs de saisie
de texte

<html>
<head>
  <title>Exemple de la balise INPUT</title>
</head>
<BODY bgcolor='white'>
 <form action='ExHTTP.cgi' method='GET'>
 <p>
 Texte : <input type='text' size='20' name='texte'>
 <p>
 Nombre : <input type='text'
                 size='4' name='nombre' value='0'>
 <p>
 <input type=submit value='Allons­y'>
 </form>
</body></html>
Technologies web 66
Boutons radio

<html>
<head>
 <title>Exemple de la balise INPUT­RADIO</title>
</head>
<BODY bgcolor='white'>
<form action='ExHTTP.cgi' method='GET'>
<p>
  Le beurre : 
   <input type='RADIO' value='1' name='choix'><BR>
  L'argent du beurre :
   <input type='RADIO' value='2' name='choix'>
<p>
<input type=submit value='Allons­y'>
</form>
</body></html>
Technologies web 67
Transfert de fichiers

<html>
<head>
 <title>Exemple de la balise INPUT­FILE</title>
</head>
<BODY bgcolor='white'>
<form action='ExHTTP.cgi' method='GET' 
      enctype='multipart/form­data'>
<p>
Fichier:<input type='FILE' size=20 name='file'>
<p>
<input type=submit value='Allons­y'>
</form>
</body></html>
Technologies web 68
Menus déroulant

<html><head>
 <title>Balise INPUT­SELECT</title>
</head>
<BODY bgcolor='white'>
<form action='ExHTTP.cgi' method='GET'>
Choix :
 <select name='choix'>
  <option value='1'>Saucisson</option>
  <option value='2'>Rillettes</option>
  <option value='3'>Paté</option>
 </select>
 <p>
 <input type=submit value='Allons­y'>
</form>
</body></html>

Technologies web 69
Champ TEXTAREA

<html>
<head>
  <title>Balise INPUT­SUBMIT</title>
</head>
<BODY bgcolor='white'>
<form action='ExHTTP.cgi' method='GET'>
 <p>
 <TEXTAREA name='champ' COLS='30' ROWS='4'>
      Entrez votre texte
 </TEXTAREA>
 <BR>
 <input type=submit value="C'est parti">
</form>
</body></html>

Technologies web 70
Quelques limites du CGI

Passage des paramètres : pénible
Pas d'intégration avec HTML
Lancement d'un programme à chaque requête !
Mode totalement déconnecté : pas de mémoire 
des requêtes précédentes
Améliorations avec des langages récents (PHP, 
ASP, JSP)

Technologies web 71
Langages de scripts

PHP, ASP, JSP : de nombreux points communs
✔ Code inclus dans du texte HTML
✔ Interpréteur inclus dans le serveur
✔ Instructions exécutées par le serveur
✔ Décodage automatique des variables provenant du 
client
✔ Dernier problème : les échanges client/serveur en 
mode déconnecté

Technologies web 72
PHP, qu'est-ce que c'est ?

Un langage pour la programmation du 
serveur
Permet d'inclure des parties programmées 
dans du HTML
Très proche du langage C
Très riche en fonctions, notamment pour 
l'accès aux bases de données

Technologies web 73
Les avantages

Facilite énormément la programmation CGI :
Tous les paramètres de la requête HTTP sont 
automatiquement décodés.
La création de l'en­tête pour la réponse est simplifiée
Tout ce qui est HTML « en dur » peut être conservé tel 
quel
Tout n'est pas rose : il faut maîtriser plein de 
langages (HTML, JavaScript, CSS, PHP, SQL)

Technologies web 74
Petit exemple PHP

<html>
<head>
 <title>HTML avec PHP</title>
</head>
<BODY bgcolor='white'>
J'ai reçu les données suivantes, venant du formulaire
<b><?php echo $monNom; ?></b> affiché par le navigateur 
<b><?php  echo $HTTP_USER_AGENT ?></b> :
<p>
<TABLE border=3>
<?php 
  echo "<tr> <td>Titre : <td> $titre \n";
  echo "<tr> <td>Année : <td> $annee \n";
  echo "<tr> <td>Genre : <td> $genre \n";
  echo "<tr> <td>Pays  : <td> $pays \n";
  echo "<tr> <td>Réalisateur  : <td> $realisateur \n";
  echo "<tr> <td>Résumé  : <td> $resume\n";
?>
</table>
</body></html>

Technologies web 75
Comment ça marche

Requête CGI
Programme  Interpréteur
 Navigateur PHP
serveur
Document
HTML
Fichier Exécution 
HTML/PHP des instructions
PHP

machine serveur

Technologies web 76
Syntaxe de PHP

Commentaires
✔ /* ... */ ou //... ou # ...
Variables
✔ Un '$', puis (au moins) une lettre, puis tout ce 
qu'on veut.
✔ Attention : distinction minuscules/majuscules
Constantes
✔ define (PI, 3.14116)

Technologies web 77
Déclaration de variables, types

Pas de déclaration de variable en PHP !
✔ L'apparition d'un nouveau symbole préfixé par '$' 
entraîne la création d'une variable
Ex : $maVariable = 1;
✔ La valeur initiale est '''' ou 0 selon le contexte
Le typage est dynamique
✔ Une même variable peut être utilisée pour stocker
plusieurs types de données
✔ Des conversions sont appliquées quand c'est
nécessaire.
Technologies web 78
Types scalaires

Les entiers
$i = 1;
Les flottants
$i = 1.12;
Les chaînes de caractère
$i = "Je suis une chaîne";
Booléen
$i = true;
✔ NB: 0 ou "" ⇔ false, tout le reste vaut true.

Technologies web 79
A propos des chaînes de
caractères

Apostrophes simples : mise en page 
quelconque.
$c = 'Je suis une chaîne
de caractères';
Apostrophes doubles : possibilité d'inclure 
des variables
$nom = "Phileas Fogg";
$c = "Je m'appelle $nom";

Technologies web 80
Production de HTML

On écrit avec echo ou printf
Des chaînes et/ou des variables
En utilisant la concaténation : . (point)
$nom = "Fogg";
$nb = 3;
echo "Je m'appelle $nom"
    . "et je prends le métro "
    . $nb . " fois par jour";

Technologies web 81
Tableaux

Tableaux indicés :
✔  liste de valeurs indicées par 0, 1, 2, ...
$tab[0] = 1; 
$tab[1] = "une chaîne";
Tableaux associatifs : 
✔ liste de valeurs référencées par des clés
$MES["Vertigo"]="Hitchcock";
$MES ["Gladiator"]="Scott";

Technologies web 82
Initialisation d'un tableau

Avec array :
✔ Indicé: 
$tab = array("e1","el2",120);
✔ Associatif: 
$mes=array("Vertigo"=>"Hitchcock", 
          "Gladiator" => "Scott");
Implicitement (utile pour les formulaires)
✔ $tab[] = "el1";
✔ $tab[] = "el2";
✔ $tab[] = 120;

Technologies web 83
Parcours d'un tableau

Tableau indicé : en incrémentant l'indice
✔ for ($i=0; $i < count($tab); $i++)
echo "Element $i =" . $tab[$i];
Tableau associatif : avec des fonctions
✔ Un curseur sur le tableau est déplacé avec next ou prev
✔ Les fonctions key et current renvoient les données du 
curseur. 
✔  do{
  echo "Clé= key($mes), Elt.= current($mes)"
 } while (next($mes));

Technologies web 84
Expressions

Expression = tout ce qui a une valeur.
✔ En PHP, comme en C, presque toutes les instructions 
ont une valeur.
✔ 10;
✔ $i = 10;
✔ $i;
✔ L'affectation a elle­même une valeur, donc on peut 
écrire
✔ $j = $i = 10;

Technologies web 85
Opérateurs

✔ Opérateurs arithmétiques: +, ­, *, /
✔ $i = 20; $i = ($i + 2) * 34;
✔ Comparaisons : ==, <, >, <=, >=
✔ $i == 20; $j == $j ­ 1;
✔ Opérateurs logiques: && (and) || (or) ! (not)
✔ ($i == 20 && $j = j­1)
✔ Concaténation de chaînes
✔ $c1 = "Phileas"; $c2 = "Fogg";
✔ $nom = $c1 . " " . $c2;

Technologies web 86
Facilités syntaxiques

 Expressions équivalentes:
$i = $i + 20; 
$i += 20;
Valable pour tous les opérateurs
$nom = "Phileas ";
$nom .= "Fogg";
 Incrémentations
Au lieu de $i=$i+1, on écrit $i++ ou ++$i;
Valeur de l'expression ? avant, après incr.

Technologies web 87
Structures de contrôle : tests

if (expression)
{
   // bloc si expression != 0
}
else
{
// bloc si expression = 0
}
expression = tout ce qui produit une valeur !
0 ou "" ⇔ faux, le reste ⇔ vrai
Les if­then­else peuvent s'imbriquer. La partie else 
est optionnelle

Technologies web 88
Structures de contrôle : switch

switch (expression)
{
 case val1:
   // bloc si expression==val1
   break;
 case val2:
   // bloc si expression==val1
   break;
 ...
 default:
   // tout a échoué
   break; 

Technologies web 89
Boucles : do et while

while (expression)
{
  // bloc tant que expression != 0
}

A un moment donné, expression doit devenir 0 !
do
{
  // bloc tant que expression!=0
} while (expression)

NB : le bloc s'exécute au moins une fois

Technologies web 90
Boucles : for

$i = 0;
while ($i < 5)
{
  // bloc
  $i++;
}

Peut être remplacé par :
for ($i=0; $i<5; $i++) {bloc};
NB : on peut faire des choses très compliquées.

Technologies web 91
Instructions break et continue

L'instruction break permet de sortir du corps 
d'une boucle.
L'instruction continue force le passage à 
l'itération suivante.
$i = 0;
while (1)
{
  if (++$i == 5) break;
  if ($i == 3) continue;
  // instructions
}
Technologies web 92
Fonctions: passage des arguments

function Addition ($i, $j)
{
  // NB :$i et  $j sont des variables 
locales
  $somme =  $i + $j;
  $i = 2; $j = 3;
  return $somme;
}
 
 $i = 1; $j = 1;
 // Appel de la fonction, passage par valeur
 $k = Addition ($i, $j);
 // $i et  $j valent toujours 1 !

Technologies web 93
Fonctions: passage par adresse

En préfixant par '&', on passe une variable par 
adresse.
Introduit un effet de bord si la fonction modifie 
ses arguments : très mauvais

 $i = 1; $j = 1;

 // Appel de la fonction, passage par adresse
 $k = Addition (&$i, &$j);

 // $i et  $j valent 2 et 3 !

Technologies web 94
Passage par adresse avec
déclaration

function Addition ($i, $j, &$somme)
{
  $somme =  $i + $j;
  $i = 2; $j = 3;
}
 
 $i = 1; $j = 1;

 // Appel de la fonction, passage par
 // adresse de $k
 Addition ($i, $j, $k);

 // $i et  $j valent toujours 1, $k vaut 2

Technologies web 95
Valeurs par défaut

Il est possible de donner une valeur par 
défaut aux arguments: très pratique
✔ function Connexion ($nom="rigaux", 
                    $passe="mdp",
                    $serveur="cortes")
{ // instructions }
...
// Connexion à cortes 
Connexion ();
// Connexion de Amman à cortes 
Connexion ("amann","mdp2");
// Connexion à cartier
Connexion ("rigaux","mdp","cartier");

Technologies web 96
Fonctions et variables

Bon principe : une fonction n'accède pas aux variables 
du programme appelant, et réciproquement
✔ Variables automatiques : apparaissent et 
disparaissent avec la fonction ⇒ très bon
✔ Variables statiques : locales à la fonction, mais 
persistantes entre deux appels ⇒ bon
✔ Variables globales : visibles partout ⇒ TRES 
MAUVAIS.
⇒ Se limiter aux variables automatiques

Technologies web 97
Intégration avec les formulaires

On récupère, sous forme de variable PHP, 
les champs d'un formulaire
✔ Pour les valeurs scalaires ­> une variable
✔ Pour les valeurs « multiples » ­> un tableau
✔ Pour les fichiers ­> un nom de fichier 
temporaire

Technologies web 98
Passage de valeurs multiples

<form action="http://cartier/ITCE/EXEMPLES/ExPHP2.php" METHOD=POST">

  Titre : <input type='text' size='20' name='titre'>
  <table><tr><th>Prénom</th><th>Nom</th></tr>
    <tr><td><input type='text' size='30' name='prenom[]'></td>
        <td><input type='text' size='30' name='nom[]'></td>
    </tr>
    <tr><td><input type='text' size='30' name='prenom[]'></td>
        <td><input type='text' size='30' name='nom[]'></td>
    </tr>
    <tr><td><input type='text' size='30' name='prenom[]'></td>
        <td><input type='text' size='30' name='nom[]'></td>
    </tr>
  </table>

  <h1>Votre choix</h1>
  <input type='submit' value='Valider'>
  <input type='reset' value='Annuler'>

</form>

Technologies web 99
Que se passe-t-il quand on valide
?

Le programme client transmet au programme 
serveur les infos sous la forme:
titre=t&prenom[]=p1&nom[]=n1&prenom[]=p2&nom[]=n2&
...

Pour le script PHP, cela donne:
✔ $titre = t;
$prenom[] = p1,
$nom[] = n1;
$prenom[] = p2,
$nom[] = n2;
...

⇒ on crée deux tableaux PHP !
Technologies web 100
Ce que fait le script

Une boucle sur les tableaux permet de 
récupérer les valeurs.
<?php
  echo "Pour le film $titre j'ai reçu les acteurs
        suivants :<p>\n";
  $nbActeurs = count($prenom);
  for ($i=0; $i < $nbActeurs; $i++)
   echo "<b> $prenom[$i] $nom[$i]<b><BR>\n";
?>

⇒ à utiliser aussi pour les champs SELECT 
multiples.
Technologies web 101
Variables prédéfinies
avec PHP >= 4.2.0
 « Depuis la version PHP 4.2.0, la valeur par défaut de la directive 
PHP register_globals est off. Ceci est une évolution majeure de 
PHP. Avoir la directive register_globals à off affecte les variables 
prédéfinies du contexte globale. Par exemple, pour lire 
DOCUMENT_ROOT vous devez utiliser 
$_SERVER['DOCUMENT_ROOT'] au lieu de $DOCUMENT_ROOT 
ou bien, il faut lire $_GET['id'] dans l'URL 
http://www.example.com/test.php?id=3 au lieu de $id ou encore 
$_ENV['HOME'] au lieu de $HOME. »
On peut bien sûr continuer comme avant avec register_globals 
positionné à on... mais il déconseillé de procéder ainsi.

Technologies web 102


Variables prédéfinies

$GLOBALS
Contient une référence sur chaque variable qui est en fait 
disponible dans l'environnement d'exécution global. Les clés de 
ce tableau sont les noms des variables globales. $GLOBALS 
existe depuis PHP 3. 
$_SERVER
Les variables fournies par le serveur web, ou bien directement 
liées à l'environnement d'exécution du script courant.

Technologies web 103


Variables prédéfinies
$_GET
Les variables fournies au script via la chaîne de requête URL.
$_POST
Les variables fournies par le protocole HTTP en méthode POST. 
$_COOKIE
Les variables fournies par le protocole HTTP, dans les cookies. 
$_REQUEST
$_GET+$_POST+$_COOKIE

Technologies web 104


Variables prédéfinies

$_FILES
Les variables fournies par le protocole HTTP, suite à un 
téléchargement de fichier.
$_ENV
 Les variables fournies par l'environnement. 
$_SESSION
Les variables qui sont en fait enregistrées dans la session 
attachée au script. 

Technologies web 105


Transmission de fichiers

<form action="http://cartier/ITCE/EXEMPLES/ExPHP3.php"
        method="post" enctype= "multipart/form­data">

<input type='hidden' name='MAX_FILE_SIZE' value='100000'>
Titre : <input type='text' size='20' name='titre'>

  <p>
  
  Affiche : <input type='file' size='20' name='affiche'>
    
  <h1>Votre choix</h1>
  <input type='submit' value='Valider'>
  <input type='reset' value='Annuler'>

</form>

Technologies web 106


Transmission de fichiers
(PHP<4.2.0)

Le fichier est transmis sur le serveur avec 
quelques variables qui le décrivent:
<?php
  echo "Pour le film $titre j'ai reçu le fichier suivant :<p>\n";
  echo "<b>Nom du fichier client :<b>$affiche_name<BR>\n";
  echo "<b>Nom du fichier sur le serveur :<b>$affiche<BR>\n";
  echo "<b>Taille du fichier :<b>$affiche_size<BR>\n";
  echo "<b>Type du fichier :<b>$affiche_type<BR>\n";  

  // Copie du fichier temporaire
  copy($affiche, "./MonAffiche");
 ?>

Technologies web 107


Transmission de fichiers (PHP >=
4.2.0)

<?php
$file=$_FILES['affiche'];

  echo "Pour le film $_POST['titre'] j'ai reçu le fichier suivant 
:<p>\n";
  echo "<b>Nom du fichier client :<b>$file['name']<BR>\n";
  echo "<b>Nom du fichier sur le serveur :<b>$file['tmp_name']<BR>\n";
  echo "<b>Taille du fichier :<b>$file['size']<BR>\n";
  echo "<b>Type du fichier :<b>$file['type']<BR>\n";  

  // Copie du fichier temporaire
  copy($file['tmp_name'], "./MonAffiche");
 ?>

Technologies web 108


Informations d'un fichier

['name'] Le nom original du fichier, tel que sur la machine du client 
web. 
['type'] Le type MIME du fichier, si le navigateur a fourni cette 
information. Par exemple, cela pourra être "image/gif". 
['size'] La taille, en octets, du fichier téléchargé. 
['tmp_name'] Le nom temporaire du fichier qui sera chargé sur la 
machine serveur. 
['error'] Le code d'erreur error code associé au téléchargement de 
fichier. Cet élément a été introduit en PHP 4.2.0 

Technologies web 109


Intégration avec HTML

Question : vaut­il mieux mettre du PHP 
dans du HTML ou l'inverse ??
✔ Pour HTML : on génère le site avec un bon 
éditeur, et on met un peu de PHP dedans
✔ Mais ... le code est ILLISIBLE
✔ Pour PHP : on programme des utilitaires pour 
produire du HTML
✔ Le code est lisible ... pour les informaticiens. 

Technologies web 110


Fonctions produisant du code

   // Fonctions produisant des conteneurs HTML
   function Ancre ($url, $libelle, $classe="")
   {
    return "<a href='$url' class='$classe'>$libelle</a>\n";   
   }

   function Image ($fichier, $largeur=­1, $hauteur=­1, 
                   $bordure=0)
   {
    if ($largeur != ­1) $attrLargeur = " width  = '$largeur %' ";
    if ($hauteur != ­1) $attrHauteur = " height = '$hauteur %' ";

    return "<img src='$fichier'" .  $attrLargeur 
            . $attrHauteur . " border='$bordure'>\n";   
   }

Technologies web 111


Création de module

Un module = un ensemble de fonctions 
prenant en charge une partie de l'application
Exemple: module de production de tableaux:
✔ TblDebut ­> produit la balise <table>
✔ TblFin ­> produit la balise </table>
✔ TblLigne, TblCellule ­> pour écrire la table

Technologies web 112


Module Table : fonction TblDebut

 function TblDebut ($pBordure = '1',   // La bordure
                    $pLargeur = '', 
                    $pEspCell = '2',   // cellspacing
                    $pRemplCell = '4', // cellpadding 
                    $classe = "")
 {
  echo "<table border='$pBordure' "
       . "cellspacing='$pEspCell' "
       . "cellpadding='$pRemplCell' width='$pLargeur  %' "
       . "class='$classe'>\n";
 } // Fin de la fonction

Technologies web 113


Lignes et cellules

 function TblDebutLigne ($classe="")
 {
  echo "<TR class='$classe'>\n";
 } 

 function TblCellule ($contenu, $nbLig=1, 
                      $nbCol=1, $classe="")
 {
  echo "<TD ROWSPAN='$nbLig'  "
        . "COLSPAN='$nbCol' class='$classe'>"
        . "$contenu</td>\n";
 } 

Technologies web 114


Fonction affichant un en-tête

  require ("Table.php");
  require ("HTML.php");
  function Entete ($titre, $texte, $menu, $style)
  {
    echo "<html><head><title>$titre</title>\n";
    echo "<LINK REL=\"stylesheet\" HREF=\"$style\" TYPE=\"text/css\">\n";
    echo "</head><body>\n";

    TblDebut (0, 100); TblDebutLigne (); 
    TblCellule (Image ('/icons/cnam60.gif'));
    TblCellule ("<CENTER><FONT>$texte</FONT></CENTER>", 1, 1, "TITRE");
    TblFinLigne(); TblFin ();

    TblDebut (0, 100);    TblDebutLigne ();
    while ( list ($libelle, $ancre) = each ($menu))
     TblCellule (Ancre ($ancre, $libelle, "MENU"));
      TblFin(); TblFin();
  }

Technologies web 115


Au début de chaque page ...

<?php
  require("Design.php");
  $titre = "Commerce Electronique";
  $menu = array ("Accueil" => "index.php",
                 "Documentation" => "Documentation.php",
                     "Cours" => "Cours.php",
                     "Travaux dirigés" => "TD.php",
                     "Forum" => "Forum.php",
                     "Liens" => "Liens.php");
  $style = "/CSS/uv.css";

  Entete ($titre, "Commerce électronique", $menu, $style);
?>
Bienvenue sur le site de l'U.V. "Commerce électronique" ! 

Technologies web 116


Gestion de l'en-tête dans une réponse
HTTP
On peut transmettre des informations dans l'en­tête 
du document :
✔ Content­type  type MIME du flux de sortie
✔ Content­length taille du document
✔ Expires  indique la fin de validité d'un
document
✔ Location  redirection
✔ Status  code retour
✔ Set­Cookie  enregistrement d'un cookie

Technologies web 117


Format d'un en-tête HTTP

Date: Tue, 05 Jun 2001 20:39:56 GMT
Server: Apache/1.3.17 (Unix) mod_jk PHP/4.0.2
Last­Modified: Tue, 05 Jun 2001 20:13:39 GMT
Content­Length: 159
Connection: close
Content­Type: text/html

<html>
 <head>
 <title>Page d'accueil</title>
 </head>
 <BODY BGCOLOR="white">
 <H1 ALIGN="CENTER">Page d'accueil</h1>
 </body>
</html>

Technologies web 118


Envoi de texte simple

<?php
 Header ("Content­type: text/plain");
?>
 Je suis du texte simple. Je m'affiche

    avec tous les sauts de ligne, les

  caractères
  blancs, et les <b>balises HTML</b>
sont ignorées.

Technologies web 119


Envoi d'une image

<?php
 Header ("Content­type: image/gif");
?>
GIF87ao.................

Technologies web 120


Redirection

Renvoie vers une autre page :

<?php
 Header ("Location: ExEntete1.php");
?>

Technologies web 121


Essentiel : les cookies !

Le serveur envoie au navigateur une variable ayant 
un nom et une valeur
MonServeur dit à MonNavi «stocke lavariable 
MaVariable avec la valeur 100 pendant 2 jours»
Le navigateur transmet ensuite systématiquement la 
variable au serveur qui l'a créée
MonNavi transmet à MonServeur la variable sous la 
forme MaVariable=100

Technologies web 122


Cookies et sessions web
Les cookies sont essentiels pour établir une 
continuité dans le dialogue client/serveur
Quand un client se connecte la première fois :
le serveur lui associe un identifiant de session
Le serveur transmet cet identifiant au client sous la forme 
d'un cookie
On conserve un historique des actions du client, associé à 
l'identifiant de session
Quand le client se connecte à nouveau : on sait l'identifier 
grâce au cookie.

Technologies web 123


Session web

le client le réseau le serveur BD


(navigateur
)
1ère demande création
client d'une session
création du
cookie id=100
client [infos]
id=100 envoi du 
cookie on sait de
session
qui il s'agit

client
envoi du 
cookie
validité

Technologies web 124


L'en-tête Set-Cookie

Il comprend les éléments suivants :
nom=valeur : définition du cookie
expires : date de fin de validité
domain : le domaine pour lequel le cookie est visible. 
Par défaut : nom du serveur qui crée le cookie
path : racine des répertoires pour lesquels le cookie est 
visible. '/' par défaut
secure : indique que le cookie doit être transmis en 
mode sécurisé.

Technologies web 125


Exemple d'un en-tête avec cookie

Set­Cookie:
    MonCookie=200;
    expires=Mon,24­Dec­2000 12:00:00 GMT;
    path=/;
    domain=cnam.fr
Tout est optionnel, à l'exception de la première 
directive.

Technologies web 126


Script pour cookies

<?php
  Header ("Set­Cookie: $nom=$valeur; " .
          "expires=Mon, 24­Dec­2001 " .
          "12:00:00 GMT");
?>
<html><head><title>Liste des cookies</title>
</head><BODY bgcolor='white'>

Liste des cookies:<BR>
<?php
  while (list($nom, $valeur) = each($HTTP_COOKIE_VARS))
      echo "<b>Nom</b>    : $nom " .
           "<b>Valeur</b> : $valeur<BR>\n";
?>

Technologies web 127


Programmation orientée-objet
(PHP4)

Programmation OO : indispensable pour créer des 
utilitaires vraiment puissants.
Idées de base : 
Un objet fournit un ensemble de services relatifs à une tâche 
donnée
L'objet est un sous­système qui gère ses propres fonctions, 
ses propres données, invisibles depuis l'extérieur
Demander un service à un objet doit être le plus simple 
possible.

Technologies web 128


Application : production de
formulaires

Objectif: pouvoir créer un formulaire HTML
Le plus complet possible
Le plus simplement possible
Sans connaître UNE ligne de HTML
Réalisation: une classe Formulaire qui gère:
La production de tous les types de champs
Leur mise en page

Technologies web 129


Quelques choix de conception

Chaque champ est associé à un libellé
Trois types de dispositions :
Libellé 1 champ 1
Mode Table
Libellé 2 champ 2
vertical
Libellé 3 champ 3
Libellé A Libellé B Libellé C
Mode table champ A champ B champ C
horizontal champ C
champ A champ B

Mode libre Libellé champ


Technologies web 130
Formulaire d'inscription

 $form = new Formulaire ("POST","AccesInter.php");

 // Formulaire en mode table, vertical 
 $form­>debutTable();
 // Champs textes
 $form­>champTexte ("E­mail", "email", "", 30);
 $form­>champTexte ("Nom", "nom", "", 30, 40);
 ...
 // Liste des régions
 $form­>champListe ("Région", "region", "", 3, $regions);     
  
 $form­>finTable();

 // Bouton de validation
 $form­>champValider ("Inscrire","insere");
 $form­>fin();

Technologies web 131


La classe Formulaire

On instancie un formulaire en lui passant
le script à exécuter sur le serveur
la méthode CGI à employer
Il existe une méthode par type de champ
Ex.: champTexte prend en argument le libellé, le 
nom du champ, la longueur, la val. défaut
Des méthodes debutTable et finTable 
gèrent le mode de présentation

Technologies web 132


Création d'une classe en PHP

class Formulaire {
// Les variables : privées !
var $modeTable, $orientation;
...
// Méthodes privées
function champInput(...) {...} 
...
// Méthodes publiques 
function Formulaire  (...) {...}//Constructeur 
function champTexte  (...) {...}
function champFichier(...) {...}
function champListe  (...) {...}
} // Fin de la classe

Pas d'encapsulation en PHP 4 !

Technologies web 133


Le constructeur

 function Formulaire ($pMethode, $pAction, 
              $pFichier=FALSE, $pNom="Form")
{
  $this­>modeTable = FALSE;
 
  if ($pFichier)
   $encType = "enctype='multipart/form­data'";

   // Ouverture de la balise
   echo "<form method='$pMethode'" 
        . $encType
        . "action='$pAction'"
        . "name='$pNom'>\n";  
}

Technologies web 134


Le destructeur

    // Fin du formulaire
    function fin ()
    {
      // Fin de la table, au cas où ...
      $this­>finTable();
      echo "</form></CENTER>\n";
    }

Avec l'orienté­objet, on gère l'état d'un objet
Si on a ouvert une table ­> on sait qu'il faut la refermer.
Le destructeur n'est pas appelé automatiquement

Technologies web 135


Méthode privée pour créer des
champs INPUT

 function champINPUT ($pType, $pNom, $pVal,
                      $pTaille, $pTailleMax)
{
  // Création de la balise
  $s = "<input type='$pType' name='$pNom' "
     . "value='$pVal' size='$pTaille' "
     . "MAXLENGTH='$pTailleMax'>\n";
  // Renvoi de la chaîne
  return $s;
}

Attention à la séparation des tâches:
La fonction crée une chaîne avec balise HTML
Elle ne l'affiche pas : une autre fonction s'occupe de ça
Technologies web 136
Méthode privée pour créer des
champs SELECT

 function  champSELECT ($pNom, $pListe,
                       $pDefaut, $pTaille=1)
{
 // Début de la balise
 $s = "<select name='$pNom' size=$pTaille>\n";
 // Toutes les options
 while (list($val, $lib)=each ($pListe))
 {
  if ($val != $pDefaut)
   $s.="<option value='$val'>$lib</option>\n";
  else
   $s .= "<option value='$val' SELECTED>"
         . "$lib</option>\n";
  }
  // Fin de la balise, et retour
  return $s . "</select>\n";
}

Technologies web 137


Méthode générale pour créer des
champs

A ce stade on dispose d'une méthode particulière 
à chaque type de champ
On crée une méthode qui crée un champ de 
formulaire en fonction du type.
Elle prend le type, le nom et la valeur par défaut du 
champ.
Un tableau associatif avec les attributs HTML
La liste des choix pour les champs SELECT, RADIO ou 
CHECKBOX

Technologies web 138


La méthode privée champForm

function champForm  ($pType, $pNom, $pVal, $params,$pListe)
{
  switch ($pType)
  { // Champ INPUT
   case "text": case "PASSWORD": case "submit": case "FILE":
     $taille = $params["SIZE"];
     $tailleMax = $params["MAXLENGTH"];
     return $this­>champINPUT ($pType, 
                               $pNom,$pVal,$taille,$tailleMax);
     break;

   case "select": // Champ SELECT
     $taille = $params["SIZE"];
     return $this­>champSelect ($pNom, $pListe, $pVal, $taille);
     break;
    }
}

Technologies web 139


Affichage d'un champ et de son
libellé

function champLibelle ($pLibelle, $pNom, $pVal,  $pType, 
                                       $params=array(),  
$pListe=array())
{
   // Création du champ
   $champHTML = $this­>champForm ($pType, $pNom, $pVal,
                                  $params, $pListe);    

   // Affichage du champ en tenant compte de la présentation
   if ($this­>modeTable)
   {
     TblDebutLigne();
       TblCellule ("<b>" . $pLibelle . "</b>");
       TblCellule ($champHTML);
     TblFinLigne();
   }
   else
     echo "$pLibelle " .  $champHTML;   
}

Technologies web 140


Les méthodes publiques

Attention:
Les méthodes privées ne sont pas visibles par l'application: on 
peut les modifier librement
Les méthodes publiques sont utilisées par l'application: elles 
sont figées
Donc :
Le service fourni par une méthode publique doit être très 
précisément défini
Ses entrées/sortie (« l'interface ») doivent être clairement 
relatives au service

Technologies web 141


Exemple : production d'un champ
texte

Arguments: libellé, nom, valeur par défaut, taille 
affichée, taille maximale
   function champTexte ($pLibelle, $pNom, $pVal, $pTaille,
                        $pTailleMax=0)
   { 
    $this­>champLibelle ($pLibelle, $pNom, $pVal, 
                         "text",
                         array ("SIZE"=>$pTaille,
                                "MAXLENGTH"=>$pTailleMax));
   }

On s'appuie sur champLibelle qui sait 
comment afficher le champ.
Technologies web 142
Autre exemple : champs RADIO

Arguments: libellé, nom, valeur par défaut, liste 
des options

  function champRadio ($pLibelle, $pNom, $pVal, $pListe)
   {
     $this­>champLibelle ($pLibelle, $pNom, $pVal, 
                          "RADIO", array (), $pListe);
   }

Pas d'attributs HTML: on passe array() à la 
place du tableau associatif $params.

Technologies web 143


Pour choisir le mode d'affichage

function debutTable ($pOrientation=VERTICAL, $pNbLignes=1)
   {
      // Pas de bordure
      if ($pOrientation == VERTICAL) TblDebut (0);
      $this­>modeTable = TRUE;
      $this­>orientation = $pOrientation; 
      $this­>nbLignes = $pNbLignes;
      $this­>nbChamps = 0;
   }

­> l'objet conserve le mode courant dans la 
variable $this­>modeTable
Technologies web 144
C'est fini. Utilisation de la classe :
très simple !!!

<?php
 // Formulaire de saisie d'une requête SQL
 require ("Formulaire.class");

 function FormSQL ($requeteDefaut)
 {
  $form = new Formulaire ("POST", "ExecSQL.php");
  $form­>champFenetre ("", "requete", $requeteDefaut,5, 50);
  echo "<p>";
  $form­>champValider ("Exécuter la requête", "exesql");
  $form­>fin();
 }
?>

Technologies web 145


POO et PHP5

PHP5 permet une « vraie » programmation OO
Héritage, surcharge, visibilité
Variables et méthodes de classe
Classes abstraites et interfaces
...

Technologies web 146


Classe : Syntaxe de base

class NomClasse {
[visibilité]variable [=valeur par défaut];
...
[visibilité] function nomFonction (param) {
...
}
...
}
Visibilité :
public : tout le monde voit
(nécessaire pour méthodes surchargée)
protected : classe et sous classes
private : seule la classe voit

Technologies web 147


Exemple de classe simple

class SimpleClass
{
// déclaration d'un membre
public $var = 'une valeur par défaut';

// déclaration de la méthode
public function displayVar() {
echo $this->var;
}
}

$instance = new SimpleClass();

Technologies web 148


Assignation d'un objet

$assigned = $instance;
$reference =& $instance;

$instance->var = '$assigned aura cette valeur';

$instance = null; // $instance et $reference deviennent null

var_dump($instance);
var_dump($reference);
var_dump($assigned);

Technologies web 149


Constructeur et destructeur

class MyDestructableClass {
function __construct() {
print "In constructor\n";
$this->name = "MyDestructableClass";
}

function __destruct() {
print "Destruction de " . $this->name . "\n";
}
}

$obj = new MyDestructableClass();

Technologies web 150


Chargement de classes

En général, une classe = un fichier
Utiliser une classe = inclure un fichier
Autre solution : autoload
<?php
function __autoload($class_name) {
require_once $class_name . '.php';
}

$obj = new MaClasse1();


$obj2 = new MaClasse2();
?>

Technologies web 151


Héritage et surcharge

<?php
// Rappel // extension de la classe
class SimpleClass { class ExtendClass extends SimpleClass
// déclaration d'un membre {
public $var = 'une valeur par défaut'; // Redéfinition de la méthode parent
function displayVar()
// déclaration de la méthode {
public function displayVar() { echo "Classe étendue\n";
echo $this->var; parent::displayVar();
} }
} }

$extended = new ExtendClass();


$extended->displayVar();
?>

Technologies web 152


final

On peut souhaiter interdire la surcharge d'une 
méthode dans les sous classe : mot clé « final »
class BaseClass {
public function test() { echo "BaseClass::test() appelé\n"; }
final public function moreTesting() {
echo "BaseClass::moreTesting() appelé\n";
}
}
class ChildClass extends BaseClass {
public function moreTesting() {
echo "ChildClass::moreTesting() appelé\n";
}
}
// Résultat : Fatal error: Cannot override final method BaseClass::moreTesting()

Technologies web 153


Visibilité

class MyClass {
public $public = 'Public';
protected $protected = 'Protected';
private $private = 'Private';
function printHello() {
echo $this->private;
echo $this->protected;
echo $this->private;
}
}
$obj = new MyClass();
echo $obj->public; // Fonctionne
echo $obj->protected; // Erreur fatale
echo $obj->private; // Erreur fatale
$obj->printHello(); // Affiche Public, Protected et Private

Technologies web 154


Visiblité (suite)

class MyClass2 extends MyClass {


// On peut redéclarer les éléments publics ou protégés, mais pas les privés
protected $protected = 'Protected2';

function printHello() {
echo $this->public;
echo $this->protected;
echo $this->private;
}
}
$obj2 = new MyClass2();
echo $obj->public; // Fonctionne
echo $obj2->private; // Indéfini
echo $obj2->protected; // Erreur fatale
$obj2->printHello(); // Affiche Public, Protected2 et non Private

Technologies web 155


Méthodes et variables de classe

On peut définir des méthodes et variables de 
classe avec le mot clé « static »
Intérêt ?
Exemple ?
Pour les constantes, mot clé « const »

Technologies web 156


Opérateur de résolution de portée (::)

class MyClass {
const CONST_VALUE = 'Une valeur constante';
}
echo MyClass::CONST_VALUE;

class OtherClass extends MyClass {


public static $my_static = 'variable statique';
public static function doubleColon() {
echo parent::CONST_VALUE . "\n";
echo self::$my_static . "\n";
}
}
OtherClass::doubleColon();

Technologies web 157


Comparaison d'objets / clonage

== : contenu identique
=== : objets identiques

Clonage = génération d'une copie d'objet
$objet2 = clone ($objet1);

Technologies web 158


Programmation avancée

PHP 5 permet :
Interfaces
Classes abstraites
Masques (patterns) : non détaillé ici
Parcours d'objets

Technologies web 159


Interfaces

interface iTemplate {
public function setVariable($name, $var);
public function getHtml($template);
}

class Template implements iTemplate {


private $vars = array();
public function setVariable($name, $var) {
$this->vars[$name] = $var;
}
public function getHtml($template) {
foreach($this->vars as $name => $value) {
$template = str_replace('{' . $name . '}', $value, $template);
}
return $template;
}
}

Technologies web 160


Classes abstraites

abstract class AbstractClass {


abstract protected function getValue();
abstract protected function prefixValue($prefix);
// méthode commune
public function printOut() {
print $this->getValue() . "\n";
}
}

class ConcreteClass1 extends AbstractClass {


protected function getValue() {
return "ConcreteClass1";
}
public function prefixValue($prefix) {
return "{$prefix}ConcreteClass1";
}
}

Technologies web 161


Parcours d'objet : foreach

class MyClass {
public $var1 = 'valeur 1';
public $var2 = 'valeur 2';
public $var3 = 'valeur 3';
var1 => valeur 1
protected $protected = 'variable protégée'; var2 => valeur 2
private $private = 'variable privée';
function iterateVisible() {
var3 => valeur 3
echo "MyClass::iterateVisible:\n";
foreach($this as $key => $value) {
print "$key => $value\n"; MyClass::iterateVisible:
} var1 => valeur 1
}
} var2 => valeur 2
$class = new MyClass();
foreach($class as $key => $value) {
var3 => valeur 3
print "$key => $value\n"; protected => variable protégée
}
echo "\n";
private => variable privée
$class->iterateVisible();

Technologies web 162


Interaction PHP/MySQL

Technologies web 163


CGI et bases de données

Principe : création de documents à partir d'une BD
MySQL se charge du stockage, de la protection des 
données, de l'interface SQL
PHP :
extrait des données et les met en forme
reçoit des données et les stocke
Le navigateur fournit l'interface graphique
Architecture à trois pôles, à la sauce Web

Technologies web 164


Architecture MySQL/PHP

requêtes
requêtes SQL
programme programme  Serveur
Internet
client serveur mysqld
document(s) données
HTML
machine client

fichiers base de
PHP données

site web avec scripts
PHP et MySQL

Technologies web 165


Architecture MySQL

client connexion
mysql Serveur
connexion mysqld
client
mysqldump connexion

client
mysqlimport connexion
base de
données
client
Apache/PHP

Technologies web 166


MySQL : commandes de base

Pour se connecter :
mysql ­h serveur ­u nom ­p base
Pour créer une base :
CREATE DATABASE nomBase;
Pour créer un utilisateur :
GRANT ALL PRIVILEGES
ON nomBase.*
TO nom@machine 
IDENTIFIED BY 'motDePasse';

Technologies web 167


MySQL et SQL

Tout à fait conforme à la norme SQL ANSI
CREATE TABLE, DROP TABLE, ALTER TABLE
SELECT, INSERT, DELETE, UPDATE
Avec des extensions (très utiles)
Types de données (TEXT, BLOB)
Contraintes (AUTO_INCREMENT)
Nombreuses fonctions

Technologies web 168


Exemple

Script de création d'une table.
# Création d'une table 'FilmSimple'
USE Films;
CREATE TABLE FilmSimple
  (titre        VARCHAR (30),
   annee        INTEGER,
   nomMES       VARCHAR (30),
   prenomMES    VARCHAR (30),
   anneeNaiss   INTEGER
  );

À exécuter avec la commande
source FilmSimple.sql;
Technologies web 169
Connexion à MySQL avec PHP
mysql_pconnect (serveur, nom, passe)
établit une connexion. Si OK, renvoie un identifiant non nul (cnx = 
mysql_pconnect(serveur, nom, passe);)
mysql_select_db(base, cnx)
se place dans une base et renvoie vrai si OK
mysql_query(requete, cnx)
exécute une requête et renvoie un identifiant
(resultat = mysql_query(requete, cnx);)
mysql_fetch_object(resultat)
renvoie la ligne suivante sous forme d'objet

Technologies web 170


Exemple (1)

<html>
<head><title>Connexion à MySQL</title></head>
<body>
<h1>Interrogation de la table FilmSimple</h1>
<?php
 require ("Connect.php");
 $connexion = mysql_pconnect(SERVEUR, NOM, PASSE);
 if (!$connexion) {
  echo "Connexion à " . SERVEUR . " impossible\n"
  exit;
 }
 if (!mysql_select_db(BASE, $connexion)) {
  echo "Accès à " . BASE . " impossible\n";
  exit;
 }

Technologies web 171


Exemple (2)

$resultat = mysql_query("SELECT * FROM FilmSimple");
if ($resultat) {
 while ($film = mysql_fetch_object ($resultat))
 {
 echo "$film­>titre, paru en $film­>annee, "
        . "réalisé par $film­>nomMES.<BR>\n";
 }
}
else {
 echo "Erreur MySQL : " . mysql_error($connexion);
}
?>
</body></html>

Technologies web 172


En association avec un formulaire

<form action="ExMyPHP2.php" method=POST>
Ce formulaire vous permet d'indiquer des 
paramètres pour la recherche de films :
 <p>Titre : <input type=text size=20
               name='titre' value='%'><BR>
 <p>Année début : <input type=text size=4
                   name='anMin' value=1900>
    Année fin   : <input type=text size=4
                   name='anMax' value=2100>
 <p><b>Comment combiner ces critères.</b>
 ET <input type=RADIO name='comb' value='ET'>
 OU <input type=RADIO name='comb' value='OU'> ?
 <p><input type=submit value='Rechercher'>
</form>

Technologies web 173


Le script PHP (1)

<?php
 require ("Connect.php");
 echo "<p><b>Titre = $titre "
      . "anMin = $anMin anMax=$anMax\n";
 echo "Combinaison logique : $comb<p></b>\n";
 if ($comb == 'ET')
   $requete = "SELECT * FROM FilmSimple "
      . "WHERE titre LIKE '$titre' "
      . "AND annee BETWEEN $anMin and $anMax";
 else
    $requete = "SELECT * FROM FilmSimple "
       . "WHERE titre LIKE '$titre' "
       . "OR (annee BETWEEN $anMin and $anMax)";

Technologies web 174


Le script PHP

$connexion = mysql_pconnect (SERVEUR, NOM, PASSE);
mysql_select_db (BASE, $connexion);
$resultat = mysql_query ($requete, $connexion);
while ($film = mysql_fetch_object ($resultat))
{
 echo "<p>$film­>titre, paru en $film­>annee "
     . "par $film­>prenomMES $film­>nomMES.\n";
}
?>

Technologies web 175


Mise à jour de la base

On utilise un formulaire de saisie, et on déclenche:
Un ordre INSERT pour des insertions
Un ordre UPDATE pour une modification
Un ordre DELETE pour une destruction
Dans tous les cas la fonction mysql_query permet 
d'exécuter l'ordre.

Technologies web 176


Exemple : mise à jour de FilmSimple

<form action="ExMyPHP3.php" method=POST>
Titre : <input type=text size=20 name="titre"><BR>
Année : <input type=text size=4 MAXLENGTH=4
               name="annee" value="2000">
<p>
Nom :   <input type=text size=20 name="prenom"><b>
Prénom : <input type=text size=20 name="nom"><BR>
<h1>Votre choix</h1>
<input type=submit value='Insérer' name='inserer' >
<input type=submit value='Modifier' name='modifier' >
<input type=submit value='Détruire' name='detruire' >
</form>

Technologies web 177


Le script PHP (1)

<?php
 require ("Connect.php");

 // Test du type de mise à jour effectuée

 if (isset($inserer))
       echo "Insertion du film $titre";
 elseif (isset($modifier))
       echo "Modification du film $titre";
 elseif (isset($detruire))
       echo "Destruction du film $titre";

Technologies web 178


Le script PHP (2)

if (isset($inserer))
 $requete =
    "INSERT INTO FilmSimple (titre, annee, "
    . "prenomMES, nomMES, anneeNaiss) "
    . "VALUES ('$titre', $annee, "
    . "'$nom', '$prenom', $anneeNaiss) ";
if (isset($modifier))
 $requete =
    "UPDATE FilmSimple SET annee = $annee, "
    . "prenomMES = '$prenom', nomMES = '$nom', "
    . "anneeNaiss = $anneeNaiss WHERE titre = '$titre'";
if (isset($detruire))
 $requete = "DELETE FROM FilmSimple "
          . "WHERE titre='$titre'";
$resultat = mysql_query ($requete, $connexion);
?>
Technologies web 179
Gestion des en-têtes HTTP

On récupère automatiquement :
✔ les paramètres CGI
✔ Les variables GET
✔ les variables POST
✔ Les cookies

Technologies web 180


Paramètres CGI (1)

Informations sur le serveur :
✔ SERVER_NAME: nom de la machine serveur
✔ SERVER_SOFTWARE: nom du programme serveur
✔ DOCUMENT_ROOT: répertoire racine des documents 
du site
✔ SCRIPT_NAME: nom du script
✔ SERVER_PROTOCOL: version du protocole
✔ SERVER_PORT: port d'écoute

Technologies web 181


Paramètres CGI (2)

Informations sur le client :
✔ REMOTE_HOST: nom de la machine client
✔ REMOTE_ADDR: adresse IP de la machine client
✔ REMOTE_USER: nom du client après identification
✔ HTTP_ACCEPT: liste des types MIME acceptés par le 
client
✔ HTTP_USER_AGENT: nom du navigateur

Technologies web 182


Paramètres CGI (3)

Informations sur la requête :
✔ REQUEST_METHOD: GET ou POST
✔ QUERY_STRING: informations transmises dans l'URL
✔ CONTENT_LENGTH: informations transmises sur 
l'entrée standard (méthode POST)
✔ CONTENT_TYPE: type des informations sur l'entrée 
standard

Technologies web 183


Exemple avec PHP

<html> <head>
<title>Variables CGI</title>
</head><BODY bgcolor='white'>
<TABLE border=3>
 <tr><TH> Variable </TH><TH> Valeur </TH></tr>
 <tr><td> GATEWAY_INTERFACE </td>
     <td><?php echo $GATEWAY_INTERFACE ?></td></tr>
 <tr><td> SERVER_NAME </td>
     <td><?php echo $SERVER_NAME ?></td></tr>
 <tr><td> SERVER_SOFTWARE </td>
     <td><?php echo $SERVER_SOFTWARE ?></td></tr>
 ...
 <tr><td> titre </td>
     <td><?php echo $titre ?></td></tr>
</table></CENTER>
</body></html>
Technologies web 184
Avec un formulaire

<html>
<head>
 <title>Formulaire pour programme CGI</title>
</head>
<BODY bgcolor='white'>
<h1>Formulaire pour programme CGI</h1>
<form action='ExVarCGI.php' method=GET>
 Titre :
    <input type=text size=20 name='titre'>
    <p>
    <input type=submit value='Rechercher'>
</form>
</body></html>

Technologies web 185


Avec PHP >= 4.2.0

Ce sont des éléments de $_SERVER
$_SERVER[SERVER_NAME]
$_SERVER[QUERY_STRING]
etc.

Technologies web 186


Conclusion

Le Web : conçu pour
✔ transmettre des documents sur l'Internet (HTTP)
✔ inclure dans ces documents des directives de mise en 
forme (HTML)
✔ accéder à d'autres documents de manière transparente 
(URL)
Pas conçu pour échanger des données ou 
déployer des applications !

Technologies web 187