TP4 "Conception de Systèmes d'Information" - Introduction à l'interfaçage d'une BdD avec PHP

Avant de commencer ce TP, vous devez avoir terminé la construction de votre schéma relationnel. N'oubliez pas les contraintes de clés étrangères. Aussi, je vous conseille d'ajouter, à côté des clés primaires numériques qui ne sont pas également des clés étrangères, le mot clé AUTO_INCREMENT:

CREATE TABLE tab (
id_tab INT PRIMARY KEY AUTO_INCREMENT,
...
)

Ceci permet à la table de générer automatiquement un nouvel identifiant lorsqu'on insère de nouvelles lignes dans la table.

L'objectif de ce TP est d'apprendre à accéder à une base de données par le biais d'interfaces développées pour des navigateurs web. Nous emploierons pour cela le langage PHP et ses instructions de connexion et d'interactions avec une base MySQL.

Vous pouvez revoir le cours de présentation de l'environnement de développement.

1. Écriture de pages web en HTML

Avant d'utiliser PHP pour accéder à une base de données, il nous faut écrire une page web définissant le contenu et la forme de son rendu. Le langage HTML est utilisé à cet effet.

1.1. Structure générale d'un document HTML

La caractéristique primordiale du langage HTML est que c'est un langage à balises. Cela signifie qu'il définit un ensemble de marqueurs permettant d'encadrer des parties de texte et interprétées par le navigateur pour l'affichage de la page web. Les balises s'utilisent sur une partie du texte par une balise ouvrante juste avant cette partie et une balise fermante juste après. Par exemple, la première phrase de ce paragraphe utilise la balise <b> pour mettre du texte en gras et s'écrit :

La caract&eacute;ristique primordiale du langage HTML est que c'est un langage <b>&agrave; balises</b>.

Consultez le code source de la page web que vous êtes en train de lire pour avoir un aperçu d'une page complète. Vous pouvez accéder à ce code source depuis le navigateur en faisant un clic droit sur la page puis en sélectionnant Code source de la page, ou bien Afficher la source, ou encore Afficher le code source de la page selon votre navigateur.

Une page web écrite en HTML a ainsi une structure hiérarchique par imbrication de balises. Le fichier HTML commence par la balise de plus haut niveau <html> et se termine par la balise fermante associée </html>.

La balise <head> donne des informations sur la page Web qui n'apparaissent pas lorsqu'on charge la page dans un navigateur Web. Puis, le corps de la page est précisé dans la balise <body>. C'est dans cette espace que vous placerez le contenu de votre page.

Le but de ce TP n'est pas de vous apprendre à concevoir des pages Web. Cependant, si vous voulez embellir votre interface, vous pouvez consulter l'abondante documentation sur le sujet en cherchant avec votre moteur de recherche préféré. Pour ce qui est du travail demandé, on se contentera du minimum.

Enregistrez le fichier premierepage.html avec un clic droit sur le lien. Ce fichier contient le "squelette" de votre interface Web.

1.2. Liens hypertextes

Les liens hypertextes permettent de naviguer d'une page Web à une autre. Ils permettent également de transmettre des données au serveur Web. Un lien hypertexte apparaît dans un navigateur comme une portion de texte généralement soulignée et de couleur distincte du texte normal. En HTML, on l'écrit comme ceci :

<p>Ceci est <a href="profile.php?surnom=kikoolol42">un lien hypertexte</a>.</p>

Dans le cas de la balise <a>, la balise ouvrante contient une information supplémentaire, indiquée par l'attribut href. Il s'agit de la destination du lien hypertexte. Si l'on clicke sur le lien, le navigateur demandera au serveur la page Web qui a pour nom profile.php. En outre, ce qui se trouve après le ? sert à indiquer un paramètre au serveur. Ici, on précise que le paramètre surnom pour la page profile.php aura la valeur kikoolol42. De cette manière, le serveur pourra éventuellement adapter sa réponse lorsqu'il fournira la page Web demandée.

1.3. Formulaires

Les formulaires HTML sont utilisés pour saisir des informations dans un navigateur qui sont soumises au serveur Web et déclenchent une action. Souvent, cette action consiste à orienter vers une autre page choisie ou générée en fonction des informations saisies. Nous allons principalement nous intéresser aux formulaires pour utiliser le navigateur pour saisir les paramètres de requêtes SQL.

Un formulaire est déclaré dans une balise <form>. Deux attributs sont associés à cette balise : action qui détermine la page réceptrice des valeurs saisies dans le formulaire et method qui détermine le mode de déclenchement de l'action (nous ne détaillerons pas ici ce paramètre et le fixerons toujours à la valeur "post").

Les champs de saisie sont définis dans cette balise <form> dans des balises <input>. Les principaux attributs de la balise <input> sont :

Un exemple de formulaire est donné dans le fichier formulaire.html. Voici le bout de code qui permet de générer le formulaire. Il doit être placé entre les balises <body> et </body> de votre page HTML.

<h1>Saisie d'un nouveau client</h1>
<form action="ajout_client.php" method="post">
<p>Nom du client : <input type="text" name="name" /></p>
<p>Adresse du client : <textarea name="address" rows="4">Veuillez entrer l'adresse ici</textarea></p>
<p>Avec carte de fidélité : <input type="radio" name="loyalty" value="yes" /> Oui
<input type="radio" name="loyalty" value="no" /> Non</p>
<p>Numéro de carte (si nécessaire) : <input type="text" name="cardnumber" /></p>
<p><input type="submit" /></p>
</form>

Cet exemple fait intervenir deux nouvelles balises sur la forme de l'affichage : <h1> pour un titre principal et <br /> pour un retour à la ligne. Notez qu'il existe des balises qui sont à la fois ouvrantes et fermantes, car elles ne contiennent pas de texte ou d'autres balises. C'est le cas de <br />, et l'on repère ce type de balise par le / avant le caractère >.

Pour le moment une soumission sur ce formulaire provoquera une erreur car la page mentionnée dans l'attribut action n'existe pas.

2. Introduction à PHP

Les instructions écrites en PHP sont interprétées par le serveur Web (et donc pas directement par le navigateur du client) s'il est muni de l'extension PHP de manière à générer automatiquement un fichier HTML envoyé au navigateur client.

Pour tester vos pages PHP, il faut faire tourner un serveur Web disposant de l'extension PHP. EasyPHP, que vous démarriez pour lancer le serveur MySQL, intègre également un serveur Web capable d'exécuter des scripts PHP. Démarrez EasyPHP comme d'habitude (accessible en tappant "EasyPHP" dans le menu "Démarrer"). Cette exécution fait apparaître une icône en bas à droite (il faut peut-être clicker sur le petit triangle blanc pour la voir) correspondant à EasyPHP. Faites un clic droit sur cette icône et sélectionnez Web local pour faire un test local. Cela ouvre une page d'un navigateur Web sur le contenu du serveur local. Ce contenu correspond au répertoire C:\Program Files\EasyPHP-DevServer-13.1VC11\data\localweb. Tous les fichiers utilisées pendant cette séance (PHP et HTML) devront se situer dans ce répertoire.

Pour que les instructions PHP soient interprétées par le serveur, il faut que le fichier ait pour extension .php (et non .html).

Le code PHP commence par une balise ouvrante <?php et se termine par la balise ?>. On peut placer du code PHP au milieu d'un document HTML, comme s'il s'agissait d'une balise, par exemple :

<html>
<head>
<title>Ceci est une page Web avec du code PHP</title>
</head>
<body>
<h1>Le titre de la page</h1>
<?php
des instructions en langage PHP (voir ci-dessous)
?>
</body>
</html>

Remarquez à nouveau que la balise ouvrante <html> indique le début du code HTML, la balise fermante </html> indique la fin du code, <head> et </head> délimite les données relatives au fichier qui ne seront pas affichées dans la fenêtre principale du navigateur, et <body> ... </body> délimite le "corps" de la page, qui sera affichée par le navigateur. Mais avant que le navigateur n'affiche cette page, le serveur interprètera le bout de code PHP, qui génèrera du code HTML. Du point de vue du navigateur, c'est comme si on lui avait envoyé une page HTML classique.

2.1. Affichage et variables

L'instruction echo est utilisée pour afficher du texte dans la page générée. Par exemple :

<?php
echo 'Hello World !';
?>

Comme en langage C, il faut mettre un point-virgule aprè chaque instruction. Les chaînes de caractères peuvent être écrites avec des guillemets simples ou doubles, à condition d'utiliser le même type de guillemets au début et à la fin de la chaîne. Les variables sont représentées par un $ suivi du nom de variable. Elles ne sont pas typées à leur déclaration. Par exemple :

<?php
$nom = 'Barack';
echo 'Hi ';
echo $nom;
?>

2.2. Accès aux paramètres de la destination d'un lien hypertexte

Lorsqu'on utilise la balise <a> avec un attribut href qui contient un paramètre (voir l'exemple de la section 1.2 ci-dessus), on peut récupérer et utiliser la valeur du paramètre dans le code PHP. La variable $_GET contient tous les paramètres transmis au serveur par ce moyen. Par exemple, si on clicke sur le lien hypertexte de l'exemple de la section 1.2, $_GET['surnom'] aura la valeur 'kikoolol42' durant l'exécution de profile.php. On peut donc faire un traitement et un affichage différent selon la valeur de ce paramètre.

2.3. Accès aux données d'un formulaire

Lorsqu'une page PHP est appelée comme action résultant de la soumission d'un formulaire HTML, les valeurs des champs du formulaire peuvent être récupérées. Ces valeurs sont stockées dans un tableau accessible par la variable $_POST (dans le cas d'une soumission du formulaire par la méthode "post"). Par exemple, le champ code inséré dans le formulaire précédent est accessible par :

$_POST['name']

Dans le répertoire C:\Program Files\EasyPHP-DevServer-13.1VC11\data\localweb, créez le fichier ajout_client.php correspondant à celui attendu par la soumission du formulaire précédent. Dans ce fichier, écrivez le code PHP pour afficher la valeur de tous les champs du formulaire.

Pour indiquer si le client a une carte de fidélité ou non, vous pouvez utiliser l'instruction if dont la syntaxe est proche de celle du langage C :

if ($_POST['loyalty'] == "yes") {
instructions si vrai
} else {
instructions si faux
}

L'instruction echo génère du code HTML et l'ajoute directement à la suite de tout code HTML précédemment généré. Par exemple :

echo '<p>';
echo 'Le nom saisie est ';
echo $_POST['name'];
echo '</p>';

produira le code HTML suivant (en supposant que l'utilisateur a indiqué le nom "Pierre Martin" dans le champ identifié par "name" lors de la soumission du formulaire) :

<p>Le nom saisie est Pierre Martin</p>

Il est aussi souvent utile de concaténer des chaînes de caractères. En langage C vous deviez utiliser la fonction strcat(char * chaine1, char * chaine2) qui colle la chaîne chaine2 au bout de chaine1. En PHP, c'est beaucoup plus simple : il suffit de mettre un . (un point) entre deux chaînes pour représenter la concaténation des deux chaînes. On peut concaténer autant de chaînes que l'on veut en enchaînant les points et les chaînes de caractères. Par exemple :

$debut_paragraphe = '<p>Un ';
$fin_paragraphe = '<paragraphe./p>\n';
$paragraphe1 = $debut_paragraphe.'premier'.$fin_paragraphe;
$paragraphe2 = $debut_paragraphe.'second'.$fin_paragraphe;
echo $paragraph1;
echo $paragraph2;
echo 'Un peu\n\nde texte.';

On remarque au passage l'utilisation de '\n' qui, comme en langage C indique un retour à la ligne. Ceci génère le code HTML suivant :

<p>Un premier paragraphe.</p>
<p>Un second paragraphe.</p>
Un peu

de texte.

Notez que les retours à la ligne dans le code HTML sont interprétés comme une espace par les navigateurs. Par conséquent, introduire des retours à la ligne ne produit aucun changement dans la manière dont la page Web est affichée. Le retour à la ligne, lorqu'il est utilisé avec echo ne sert qu'à rendre le code HTML généré par PHP plus facilement lisible.

2.4. Pour aller plus loin en PHP

Ici encore, l'objectif n'est pas d'étudier en détail le langage PHP mais d'apprendre à accéder à une base de données en PHP. Vous trouverez plus d'éléments sur le PHP dans de nombreuses ressources disponibles sur le Web, tel que : Cours de PHP - Le PHP Facile.

3. PHP et MySQL

Notre objectif est d'utiliser PHP pour créer des interfaces conviviales d'accès à une base de données. Ces interfaces doivent permettre :

Dans un premier temps, nous allons créer une base avec des enregistrements de manière à tester la connexion par PHP. Lancez EasyPHP puis phpMyAdmin pour créer une base similaire à celle utilisée lors du TP précédent. Pour la création des tables et des enregistrements, téléchargez et exécutez les instructions du fichier db-tp3.sql.

3.1. Connexion à une base de données

La connexion à une base de données utilise l'instruction mysql_connect avec trois paramètres d'entrée : la machine hôte du serveur, un nom d'utilisateur et son mot de passe. Cette fonction renvoie une référence à la connexion que l'on peut garder dans une variable. Il faut ensuite sélectionner la base à laquelle on souhaite se connecter par la fonction mysql_select_db avec comme paramètres le nom de la base et la connexion. Par exemple :

$base = mysql_connect('localhost', 'root', '');
mysql_select_db('bdd_spectacles', $base);

Exéminons ce bout de code  localhost signifie que l'on se connecte à la machine sur laquelle on se trouve ("l'hôte" local), root est un nom d'utilisateur de la base de données, que vous avez créé lors du TP1 et la chaîne de caractères vide correspond au mot de passe que vous avez également attribué lors du TP1.

Une fois que toutes les requêtes sont terminées, il faut fermer la connexion par :

mysql_close();

3.2. Insertion d'enregistrements

L'expression de requêtes SQL se fait en PHP par le passage d'une chaîne de caractères contenant la requête en paramètre de la fonction mysql_query. Par exemple, l'ajout d'un nouvel enregistrement se fera comme suit :

$requete = "INSERT INTO Client(idClient,nomClient,adresseClient,carteDeFidelite) VALUES(151,'Barack Obama','White House',NULL)";
mysql_query($requete);

Copier le fichier ajout_client.php sous un autre nom de fichier .php et modifiez le formulaire pour qu'il soit invoqué lors d'une soumission. Modifiez son contenu pour que les données envoyées par le formulaire ne soient plus affichées dans une page web de retour mais directement insérées dans la base de données par une requête INSERT INTO.

Pour vérifier le bon fonctionnement de cette page PHP, ouvrez MySQL Workbench et consultez le contenu de la table Client.

Dans le cas d'une requête d'insertion, la fonction mysql_query renvoie le nombre de lignes modifiées. Ce résultat peut être stocké dans une variable pour tester si la requête a fonctionné. Si elle n'a pas fonctionné, la fonction retourne la valeur booléenne false. On peut tester le bon fonctionnement d'une requête de la manière suivante :

$id = "151";
$nom = "Barack Obama";
$adresse = "White House";
$requete = "INSERT INTO Client(idClient,nomClient,adresseClient,carteDeFidelite) VALUES(".$id.",'".$nom."','".$adresse."',NULL)";
$ajout = mysql_query($requete);
if (!$ajout) {
traitement de l'erreur
}

Observez comment la requête est construite en fonction de variables. Puisque des variables peuvent changer en fonction de différents paramètres du programme, vous pouvez ainsi construire des requêtes SQL variables en fonction, notamment, des données soumises dans le formulaire.

Modifiez votre page PHP pour qu'elle considère le résultat de la requête d'insertion et affiche "Enregistrement inséré" ou "Insertion invalide" selon le cas. Vous pouvez faire des tests en essayant d'insérer des enregistrements dont la clé existe déjà.

3.3. Interrogation de la base de données

La même fonction est utilisée en PHP pour exprimer des requêtes de sélection. Le type de retour est cependant plus complexe car il contient les données renvoyées par la base. La fonction mysql_fetch_array est utilisée pour y accéder sous la forme d'un tableau. Son utilisation et l'accès aux données du tableau se fait comme dans l'exemple suivant :

$requete = "SELECT nomClient, adresseClient FROM Client WHERE idClient=15";
$retour = mysql_query($requete);
$donnees = mysql_fetch_array($retour);
mysql_free_result($retour);
echo '<p>Le client s'appelle ' . $donnees['nomClient'] . '</p>';
echo '<p>Son adresse est ' . $donnees['adresseClient'] . '</p>';

L'instruction mysql_free_result($retour) a pour effet de libérer la mémoire utilisée pour stocker le résultat. On peut noter aussi au passage que l'opérateur de concaténation s'écrit avec un simple point.

Écrivez un formulaire HTML demandant de saisir le numéro d'une salle de spectacle. Écrivez une page PHP invoquée lors de la soumission de ce formulaire et qui affiche le nom et la capacité de la salle correspondant au code saisi. Les salles sont numérotées de 1 à 135.

Cet exemple fonctionne pour consulter les résultats d'une requête renvoyant un enregistrement. Il est néanmoins possible que plusieurs enregistrements soient dans le résultat. La fonction mysql_fetch_array renvoie alors le premier enregistrement du retour de la requête et doit être rappelée pour accéder au second enregistrement. Lorsque la fonction mysql_fetch_array n'a plus d'enregistrement à renvoyer comme retour de la requête, la variable utilisée pour recevoir son type de retour ne sera plus affectée. Un exemple est donné ci-dessous.

$requete = "SELECT nomClient, carteDeFidelite FROM Client WHERE carteDeFidelite IS NOT NULL";
$retour = mysql_query($requete);
$donnees = mysql_fetch_array($retour);
if (!$donnees) echo "<p>Aucun client n'a de carte de fidélité</p>";
else {
echo '<p>Les clients ayant une carte de fidélité sont :</p><ul>';
while ($donnees) {
echo '<li>' . $donnees['nomClient'] . '</li>';
$donnees = mysql_fetch_array($retour);
}
echo '</ul>';
}
mysql_free_result($retour);

Ce script produit une liste en HTML, que l'on repère par les balises <ul> (qui identifie une liste) et <li> qui identifie un item dans la liste.

Écrivez un formulaire HTML et une page PHP similaires aux précédents, mais où le formulaire demandera la saisie d'un nom de ville. Le résultat de la soumission sera d'afficher les spectacles ayant lieu dans cette ville. Vous pouvez commencer par afficher les noms des salles de spectacles de la ville (l'attribut adresseLieu ne contient que la ville).

Modifiez enfin votre script PHP pour afficher, pour chaque spectacle, le nom de l'artiste principal en gras suivi des noms des artistes supplémentaires.

tp4.html: last modified 2013/01/23 11:49:42 by Antoine Zimmermann.

Valid XHTML 1.0! Valid CSS!