Chapitre 5 : Introduction à la création de pages dynamiques
Jusqu’ici, nous avons conçu des pages web dites statiques : même avec du DHTML (Dynamic HTML), le contenu des pages est celui que le webmestre a explicitement indiqué.
Il est possible de modifier le contenu en fonction du contexte grâce à un language de scripts qui permet de créer des pages dynamiques. Par exemple, on peut se connecter à une base de données afin d’y enregistrer des données ou de récupérer des informations sur un utilisateur...
Le web dynamique consiste simplement à générer tout ou partie de la page HTML qui va s’afficher, selon la demande.
L’idée est la suivante : le client demande quelque chose (un article par exemple) ; le serveur web plutôt que de servir une page déjà faite (une page statique), va créer cette page dans l’instant et la renvoyer au client.
Voir le site de référence : http://php.net
PHP signifiait dans ses premières versions Personal Homepage. Il permet de créer facilement certaines parties dynamiques d’un site web : forums, livre d’or, formulaires...
C’est un langage de scripts dynamique côté serveur, c’est à dire que c’est le serveur web qui exécute les scripts.
Il faut donc installer un serveur Web afin de le tester en local (sur sa propre machine). On peut utiliser pour cela le package EasyPHP qui installe le trio Apache (serveur web) - PHP (langage de scripts) - MySQL (base de données) ainsi que la suite PHPMyAdmin qui permet de gérer facilement la base de données MySQL (cf. Base de données MySQL)
5.2.1. Installer le trio Apache/PHP/MySQL
EasyPHP (http://easyphp.org) permet d’installer facilement le serveur web Apache, PHP, MySQL et PHPMyAdmin afin de tester son site dynamique en local sur une machine Windows.
Si vous utilisez Linux, vous pouvez choisir les packages Apache, PHP, MySQL et phpMyAdmin dans les versions récentes des CD-Rom d’installation de votre distribution ou sur Internet
Procédure d’installation
- Il faut tout d’abord télécharger l’archive. Rendez vous à l’adresse http://www.easyphp.org, allez dans la rubrique Téléchargements et téléchargez la dernière version sur le bureau de votre machine.
- Ensuite, on l’installe sur la machine. Pour cela, double-cliquer sur l’icone puis suivre les instructions à l’écran pour installer EasyPHP
- Cliquer avec le bouton droit de la souris sur l’icone EasyPHP en bas à droite de l’écran afin de faire apparaître le menu. Cliquez sur Démarrer pour démarrer les serveurs Apache et MySQL sur votre machine.
5.2.2. Préprocesseur Hypertext
Puisqu’il s’intègre au milieu d’une page HTML, et suite à son évolution, PHP signifie désormais Préprocesseur Hypertext
En effet, une page PHP, qui porte l’extension .php3 pour la version 3 de ph pou .php depuis la version 4, peut se composer comme suit :
<HTML>
<HEAD>
<!-- Code HTML -->
</HEAD>
<BODY>
<!-- Code HTML -->
<? //Code PHP ?>
</BODY>
</HTML>
On remarque que le code PHP s’écrit entre les balises <? et ?>. Ce qui suit le double slash // est un commentaire.
Exemple :
Remplaçons le contenu de la balise <BODY> par le code suivant :
<BODY>
Voilà du <B>HTML</B>
<P>
<?
echo "Voilà un peu de <B>PHP</B>";
?>
<P>
Encore un peu de <B>HTML</B>
</BODY>
Et appelons cette première page test.php
Le résultat obtenu à l’écran est le suivant :
Voilà du HTMLVoilà un peu de PHP
Encore un peu de HTML
5.2.3. Fonctionnement
On place le code PHP entre les balises <? et ?> n’importe où dans le fichier source, autant de fois que nécessaire.
Attention Il faut passer par le serveur pour visualiser le résultat, puisque c’est lui qui interprète le langage PHP. Si le fichier a été enregistré à la racine du serveur, nous pourrons le visualiser à l’adresse http://localhost/test.php
Cet exemple nous apprend plusieurs choses :
- Une commande PHP se termine toujours par ;
- On peut insérer des balises HTML dans du code PHP
- La commande echo ""; affiche dans une page HTML le contenu des guillemets.
De plus, en affichant le code source de la page obtenue, on remarque que le code a été interprété par le serveur : le PHP a disparu, on ne lit que du code HTML ! Pour vous en rendre compte, affichez le code source de la page obtenue.
Lorsque le client fait appel à une page PHP, le serveur traite d’abord le script. Il envoie ensuite le résultat au client sous forme de page HTML qui peut être interprétée et affichée par le navigateur.
- Le client envoie une requete au serveur web
- Le serveur web, de son côté, plutôt que de simplement renvoyer une page toute faite, va executer un programme
- Ce programme, en fonction des paramètres que lui passe la requête (identifiant et mot de passe par exemple), va chercher les données dans la base de données
- Avec ces données, le programme va construire à la volée une page HTML. De la même façon que vous pourriez écrire vous même le code HTML de votre page (par exemple avec notepad) et le sauvegarder sur disque, le programme va automatiquement écrire le code HTML et le sauvegarder quelque part sur le disque du serveur
- Enfin, le serveur web renvoie cette page au client
5.2.4. Un exemple simple de page dynamique
Nous allons dans un premier temps créer un formulaire simple qui permettra de saisir du texte et de soumettre la requête à une page dynamique qui affichera le résultat.
<html>
<head>
<title>Formulaire</title>
</head>
<body>
<p>Bonjour, quel est votre nom ?</p>
<form method="get" action="traite.php">
<input type="text" name="nom" value="Anonyme">
<input type="submit" value="OK">
</form>
</body>
</html>
Tapez le code de cette page à l’aide du bloc-notes de Windows puis enregistrez-le sous formulaire.html.
Cette page Web statique crée un formulaire dans lequel on met un champ texte appelé nom à remplir où l’on inscrit par défaut "Anonyme" et un bouton pour valider. "value=" n’est pas indispensable mais peut souvent être utile pour éviter de faire saisir des informations que l’on connaît déjà (c’est la valeur par défaut).
Il s’agit maintenant de traiter cette information dans une autre page qui va afficher un message de bienvenue personnalisé. Cette page doit être dynamique puisque son contenu va changer en fonction de la valeur de la variable nom. Ce sera une page PHP qui portera le nom traite.php. C’est la page appelé dans le formulaire (action="traite.php") du fichier formulaire.html.
<html>
<head>
<title>Réception formulaire</title>
</head>
<body>
<? echo "Bonjour ".$nom; ?>
</body>
</html>
Le point (.) est l’opérateur de concaténation de chaînes de caractères. On est désormais capable de faire du dynamisme ! En effet lorsque l’on soumet le formulaire, on est en mesure d’afficher le nom entré dans celui-ci. Le résultat obtenu est équivalent à entrer l’URL : traite.php ?nom=xxxx.
Attention ! pour que le code soit interprété par le serveur, il faut placer les fichiers formulaire.html et traite.php dans un répertoire adéquat (accessible au serveur) et passer par le serveur pour les interpréter. On peut par exemple créer un répertoire tests à la racine du serveur web et y placer les 2 fichiers. L’url à appeler sera alors http://127.0.0.1/tests/ (vérifier auparavant que le serveur Apache est en marche : le point rouge de l’icone EasyPHP doit clignoter).
MySQL est une base de données. Elle est composée de tables (tableaux) contenant des champs (colonnes) et des enregistrements (lignes).
Prenons par exemple une table Eleves. Chaque champ ou colonne permet de définir ce qu’est un élève (Nom, prénom, sexe, âge, ville, pays, email...). Chaque enregistrement ou ligne est un élève distinct.
Une base de données permet d’enregistrer des données dans des tables, et de récupérer et afficher (on dit sélectionner) des données selon des critères définis dans une requête.
Exemple
On peut par exemple demander à MySQL d’afficher la liste des femmes de moins de 40 ans habitant au Niger classées par ville puis par nom dans l’ordre croissant.
Le langage qui permet d’envoyer des requêtes à un serveur MySQL est le SQL : Structured Query Language (Langage de requête structuré). Il se rapproche du langage naturel en anglais et est relativement simple d’utilisation.
Il existe de nombreux outils tels que PHPMyAdmin qui permettent d’écrire du SQL via une interface graphique de manière transparente, ce qui permet de gérer une base de données sans connaître le langage SQL.
Ainsi, on peut créer la table Eleves de la BDD Exercice contenant les colones ID, Nom, Prenom, Email, Age de 2 façons :
- soit on tape la requête SQL : CREATE TABLE Eleves(id INT not null AUTO_INCREMENT, Nom VARCHAR(40) not null, Prenom VARCHAR(40) not null, Email varchar(40), Age INT not null, PRIMARY KEY(id)
- soit on utilise l’interface de PHPMyAdmin :
Le type : ce qui définit le contenu du champ - texte, chiffre, date... Les types que nous utiliserons le plus couramment sont INT (entier), VARCHAR (texte limité en longueur), TEXT (texte non limité en longueur)
La longueur : nombre maximum de caractères que pourra contenir le champ
auto-increment : ce champ augmente tout seul à chaque nouvel enregistrement
Primaire : clef nécessaire lorsque l’on veut qu’un champ soit auto-incrémentable
Nous allons voir comment utiliser le contenu de notre base de données. Dans un premier temps, nous allons simplement afficher le contenu de la table Eleves sur une page PHP. Utilisons l’interface phpMyAdmin afin d’effectuer nos premiers enregistrements dans la base de données.
Note
Ce chapitre est destiné aux webmestres qui désirent aller plus loin dans la conception dynamique ou simplement curieux de comprendre le fonctionnement. Il ne s’agit que d’une rapide initiation à l’utilisation du duo PHP/MySQL, qui est aujourd’hui facultative grâce aux outils qui ont été élaborés et dont il est traité plus bas. Vous pouvez donc passer au chapitre suivant si la technique vous rebute.
5.4.1. Connection à une base de données MySQL
Nous souhaitons dans un premier temps afficher le contenu de la table eleves de la base ntbf. Il faut pour cela se connecter au serveur MySQL. Nous utiliserons quelques commandes pour traiter les informations contenues dans une base de données.
$db = mysql_connect('localhost', 'root', 'mot_de_passe');
$db : variable dans laquelle est stockée le "handle" de la base. C’est le "ticket" qui nous permettra de travailler avec la base ensuite.
localhost : c’est le nom attaché à l’adresse IP 127.0.0.1, Dans d’autres cas, il faut remplacer localhost par l’adresse du serveur SQL (ex : SQL.multimania.com)
root : C’est l’utilisateur avec lequel nous nous connectons. Le root à tous les droits, il est donc dangereux de l’utiliser sur un serveur distant. Généralement, il faut utiliser votre identifiant et votre mot de passe.
mot_de_passe : le mot de passe associé a votre utilisateur. Dans ce cas, laisser ’’ (deux simples cotes = pas de mot de passe) car nous travaillons en local.
mysql_select_db('Exercice',$db);
On sélectionne la base Exercice comme base pour la suite du travail.
$SQL = "SELECT * FROM Eleves";
Requête signifiant qu’il faut sélectionner tous les enregistrements contenus dans la table Eleves.
$result = mysql_query($SQL);
On envoie la requête au serveur. Un résultat est stocké dans la variable $result, mais il n’est pas directement exploitable. Il faut le traiter pour lui donner la forme que l’on souhaite.
$num = mysql_num_rows($result);
Renvoie le nombre d’enregistrements trouvés.
while($row = mysql_fetch_row($result))
{
echo "$row[1], $row[2], $row[...]";
}
mysql_fetch_row()
Renvoie dans un tableau le 1er enregistrement trouvé, et renvoie le suivant à chaque autre appel. Le traitement continue jusqu’au dernier enregistrement (toute la table est affichée).
$row[0] vaut mysql_num_rows($result)
Le tableau $row contiendra en 0 le 1er champ, en 1 le 2ème, etc.
5.4.2. Lire les données d’une table et afficher les résultats
Ce script nous permet de lire et afficher le contenu de la table Eleves de la base de données Exercices que nous venons de créer.
interroge.php
<HTML>
<HEAD>
<TITLE>Affichage du contenu de la base</TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER"><FONT FACE="Arial" SIZE=5>
Table <B>Eleves</B> de la base <B>Exercice</B>
</FONT></P>
<FONT FACE="Arial">
<?
$db = mysql_connect('localhost', 'root', '') or die("Connection impossible : ".mysql_error());
mysql_select_db('Exercice',$db) or die("Impossible d'accéder à la BDD : ".mysql_error());
$SQL = "SELECT * FROM Eleves";
$result = mysql_query($SQL) or die("La requête <BR><PRE>$SQL</PRE>a échoué : ".mysql_error());
$num = mysql_num_rows($result);
echo "La base contient $num enregistrements (Elèves)<BR><BR>\n";
echo "Nom ; Prénom ; Email ; Age<BR><BR>\n";
while($row = mysql_fetch_row($result))
{
echo "$row[1] ; $row[2] ; $row[3] ; $row[4]<BR>\n";
}
?>
<P ALIGN="CENTER">
<A HREF="formulaire.php" TITLE="Ajouter un enregistrement">Cliquez ici pour ajouter un enregistrement</A>
</P>
</FONT>
</BODY>
</HTML>
Avant d’afficher le contenu de la table, on affiche le nombre d’enregistrements.
Le code or die(...) permet de quitter en affichant une chaîne de caractères.
La fonction mysql_error() permet d’afficher l’erreur SQL en cours (celle qui a déclenché le or)
Il est bien entendu possible d’améliorer la mise en forme de l’affichage de la base de données. Cela vous exercera à l’utilisation des tableaux ainsi qu’au traitement automatique des données grâce à la programmation en PHP et l’affichage en HTML.
Enfin, un lien permettra d’ajouter un enregistrement dans la base en appelant le formulaire formulaire.php ci-après.
5.4.3. Utiliser phpMyAdmin pour gérer sa base de données
Lorsqu’on appelle la page interroge.php (en passant par le serveur web) pour la première fois, il y a évidemment 0 enregistrements dans la table Eleves. Nous allons utiliser phpMyAdmin afin d’y insérer des enregistrements. Rendons-nous pour celà à l’adresse http://localhost/mysql (aussi disponible par l’icone EasyPHP - Administration puis cliquer sur le bouton phpMyAdmin).
La première chose à faire est de choisir la langue française dans la liste déroulante de l’accueil.
Choisissez maintenant la base sur laquelle se trouvent les tables contenant les enregistrements à modifier : la base Exercice. Le (1) signifie que cette base contient une table.
Cliquez sur le lien Insérer de la table Eleves afin d’insérer des enregistrements. Une nouvelle page s’affiche dans laquelle il suffit de remplir les champs Nom, Prenom, Email, Age (le champ id se remplira automatiquement). Choisissez Insérer un nouvel enregistrement puis cliquez sur Exécuter afin d’enregistrer un second enregistrement dans la table.
Retournez maintenant à la page interroge.php et actualisez si nécessaire. Le contenu de la table apparaît.
5.4.4. Recueillir les informations à enregistrer dans la base
Afin de recueillir les informations, il faut créer un formulaire HTML :
formulaire.php
Avant d’afficher le formulaire, on interroge la base de données afin d’afficher le numéro de l’enregistrement en cours. Cela permet de s’assurer que la connection avec la base est possible avant de demander la saisie.
<HTML>
<HEAD>
<TITLE>Formulaire d'inscription</TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER"><FONT FACE="Arial" SIZE=5>
Table <B>Eleves</B> de la base <B>Exercice</B>
</FONT></P>
<FONT FACE="Arial">
<?
$db = mysql_connect('localhost', 'root', '') or die("Connection impossible ".mysql_error());
mysql_select_db('Exercice',$db) or die("Impossible d'accéder à la BDD ".mysql_error());
$SQL = "SELECT * FROM Eleves";
$result = mysql_query($SQL) or die("La requête <BR><PRE>$SQL</PRE>a échoué : ".mysql_error());
$num = mysql_num_rows($result);
echo "Ajout du ".($num+1)."° enregistrement<BR><BR>\n";
?>
<FORM ACTION="ajoute.php">
Nom <INPUT TYPE="TEXT" NAME="nom"><BR>
Prénom <INPUT TYPE="TEXT" NAME="prenom"><BR>
Email <INPUT TYPE="TEXT" NAME="email"><BR>
Age <INPUT TYPE="TEXT" NAME="age" size=3 maxlength=3><BR>
<INPUT TYPE="SUBMIT" VALUE="Valider">
</FORM>
</FONT>
</BODY>
</HTML>
Cette fois, c’est un bouton qui nous permettra de passer à la page suivante. En effet, il faut soumettre la requête du formulaire. Une fois de plus, n’hésitez pas à améliorer la mise en forme. Note : si on n’accédait pas à la base pour afficher le numéro de l’enregistrement en cours, on aurait pu se contenter d’une page en HTML pur (formulaire.html).
5.4.5. Enregistrer ces données dans la base de données
Enfin, il faut insérer les données dans la base de données MySQL
ajoute.php
<HTML>
<HEAD>
<TITLE>Insertion d'un enregistrement dans la base</TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER"><FONT FACE="Arial" SIZE=5>
Table <B>eleves</B> de la base <B>Exercice</B>
</FONT></P>
<FONT FACE="Arial">
<?
$db = mysql_connect('localhost', 'root', '') or die("Connection impossible ".mysql_error());
mysql_select_db('Exercice',$db) or die("Impossible d'accéder à la BDD ".mysql_error());
$SQL="INSERT INTO Eleves VALUES('','$nom','$prenom','$email','$age')";
$result = mysql_query($SQL) or die("La requête <BR><PRE>$SQL</PRE>a échoué : ".mysql_error());
echo "$nom $prenom a été correctement ajouté !<BR>\n";
?>
<P ALIGN="CENTER">
<A HREF="interroge.php" TITLE="Interroger la base">Cliquez ici pour afficher la table</A>
</P>
</FONT>
</BODY>
</HTML>
Cliquez sur le lien Cliquez ici pour afficher la table (qui pointe vers interroge.php) afin de vérifier que l’enregistrement est bien dans la table. Vous pouvez aussi utiliser phpMyAdmin.
Vous connaissez désormais les principes de base qui vous permettront de construire des sites statiques ou dynamiques. Si vous avez des questions à propos de la conception web, n’hésitez pas à utiliser des sites dédiés tels que http://www.phpfrance.com.
De plus, vous pouvez intégrer des scripts client en javascript sans connaître ce langage de programmation grâce à des sites tels que http://www.editeurjavascript.com... mais vous n’en aurez sans doute pas besoin !
En effet, ces connaissances théoriques vous permettront de mieux comprendre le fonctionnement des exemples pratiques que nous allons mettre en oeuvre.