TD5 - PHP/MySQL : Premier exercice avec une connexion à une base de données : commenter un article

Objectif

Dans ce TD, nous allons relier vos pages web à une base de données. Comme exemple, vous créez un article sur un sujet de votre choix, et vous permettez aux internautes de laisser des commentaires via un formulaire. Vous affichez également les commentaires laissés par les internautes. Afin de ne pas afficher des commentaires ayant du contenu illicite, nous allons passer par une étape de validation des commentaires.

Pour ce faire, il y aura plusieurs étapes :

  • Découverte de votre interface phpMyAdmin, disponible sur les serveurs du CREMI, ou via MAMP/Wampserver/Xampp.
  • Création d’une base de données et d’une table commentaire dans votre interface phpMyAdmin.
  • Liaison de vos pages web à votre base de données via un fichier connexion_base.php que vous incluez en tout début de vos pages web.
  • Exécution de requêtes MySQL dans vos pages web.
  • Administration de votre base de données via votre interface phpMyAdmin.
Note

Vous disposez d’une nouvelle Cheatsheet pour la connexion PHP-MySQL !

Utilisez aussi systématiquement la référence MDN pour HTML :

<https://developer.mozilla.org/fr/docs/Web/HTML/Element

et la référence PHP :

https://www.php.net/manual/fr/langref.php

Important

A respecter tout au long de ce TD :

  • Les extensions des fichiers doivent être toujours .php
  • Dans le navigateur, l’URL commence toujours par http:// et non pas par file://
  • Si vous travaillez sur vos propres ordinateurs avec un environnement de développement du serveur web local, comme par exemple MAMP, vérifiez que votre serveur Apache (donc MAMP) est bien démarré.

phpMyAdmin : Création de votre base de données

Option 1 : Ordinateurs du CREMI : Votre interface d’administration de base de données phpMyAdmin avec les serveurs du CREMI

Si vous travaillez sur vos propres ordinateurs, passez directement à l’option 2.

  1. Il faut tout d’abord créer votre base de données MySQL au CREMI, et choisir un mot de passe. Vous pouvez faire cela sur le lien suivant : https://services.emi.u-bordeaux.fr/mariadb/

Choisissez un mot de passe que vous pouvez me montrer, car il apparaîtra en clair dans vos fichiers de configuration.

  1. Ouvrez l’interface phpMyAdmin via le lien https://services.emi.u-bordeaux.fr/mariadb/phpmyadmin/ et connectez-vous en mettant votre login ENT, ainsi que le mot de passe que vous avez choisi. Vous allez voir que votre base de données MySQL créé porte le nom de votre login ENT.

Passez maintenant directement au premier exercice, sans faire l’option 2.

Option 2 : Sur vos ordinateurs : Votre interface d’administration de base de données phpMyAdmin avec MAMP/Wampserver

Ouvrez votre interface phpMyAdmin, disponible avec MAMP (via la page web start) ou Wampserver (via le menu de la barre des tâches) :

Si on vous demande un login, c’est root, et le mot de passe est également root si vous utilisez MAMP (il est vide pour Wampserver).

  1. Créez une base de données MySQL qui s’appelle conceptionweb (uniquement sur vos propres ordinateur, pas au CREMI : au CREMI, votre base de données s’appelle comme votre loginENT).

phpMyAdmin : Création d’une table MySQL et manipulation de données

Exercice 5.1 Création d’une table MySQL dans votre base de données

  1. Sélectionnez votre base de données en cliquant sur son nom dans la barre latérale gauche (votre base de données s’appelle conceptionweb si vous travaillez avec MAMP, et si vous travaillez sur les serveurs du CREMI, elle porte le nom de votre login ENT).

  1. Dans votre base de données, créez une nouvelle table nommé commentaire avec quatre champs :

Les quatre champs sont les suivants :

  • un champs INT qui s’appelle id avec un index de clé primaire (PRIMARY) ainsi que “auto-increment” (A_I),
  • un champs TEXT qui s’appelle nom,
  • un champs TEXT qui s’appelle texte,
  • un champs DATETIME qui s’appelle date.

Exercice 5.2 Manipulation d’enregistrements dans une table d’une base de données MySQL

  1. En cliquant sur “Insérer” dans votre interface, créez un nouvel enregistrement avec un nom, un texte, et une date de votre choix. Cliquez sur exécuter.

Regardez la requête MySQL résultante (commençant par “INSERT …”) dans le cadre ci-dessous qui ne tient pas compte des apostrophes de type accent-grave `, ni du nom de la base de données. Notez l’importance des apostrophes ’ qui délimitent les chaînes de caractères.

INSERT INTO commentaire (id, nom, texte, date) VALUES
(NULL,'Paul',  'Article très intéressant', '2022-03-01 08:04:06');
  1. Créez deux autre commentaires de votre choix.

  2. Dans les liens bleus du haut de l’interface, cliquez sur “Afficher” (ou “Parcourir”). Regardez la requête affiché dans votre interface phpMyAdmin, c’est celle-ci (sans accent-grave, ni nom de base de données) :

SELECT * FROM commentaire
  1. Effacer un enregistrement de votre choix (en affichant vos données, et en cliquant sur le petit x rouge à côté de votre enregistrement). Regardez la requête affiché dans votre interface phpMyAdmin, elle ressemble à celle-ci (sans accent-grave, ni nom de base de données) :
DELETE FROM commentaire WHERE id=1
  1. Modifier le texte d’un enregistrement de votre choix selon votre goût (en affichant vos données, et en cliquant sur le petit crayon à côté de votre enregistrement). Regardez la requête affiché dans votre interface phpMyAdmin, c’est celle-ci (sans accent-grave, ni nom de base de données) :
UPDATE FROM commentaire SET texte='Incroyable cet article.' WHERE id=1

PHP - MySQL : Accédez à votre base de données avec PHP

Exercice 5.3 Fichier connexion_base.php à inclure

  1. Créez un nouveau dossier td5 dans votre dossier cswd.

  2. Récupérez le code source du fichier connexion_base.php à partir du cheatsheet MySQL-PHP sur la page du cours https://www.labri.fr/perso/preuter/cswd2025/, collez-le dans un fichier avec votre éditeur de texte, et sauvegardez-le sous le nom connexion_base.php dans votre dossier td5. Ce fichier permet de se connecter à la base de données MySQL et de sélectionner votre base de données.

Important

Si vous travaillez sur les serveurs au CREMI, n’oubliez pas de remplacer MOTDEPASSE par votre mot de passe choisi lors de l’activation de la base de données, et de remplacer loginENT 2 fois avec votre identifiant ENT.

Le voici :

Fichier PHP (connexion_base.php):

<?php
// définition des paramètres de connexion à la base de données
$config_base['hote'] = "localhost";
$config_base['utilisateur'] = "root";
$config_base['motdepasse'] = "root"; // si Wampserver, mettez "" ici
$config_base['nom_base'] = "conceptionweb";

if (substr($_SERVER['SERVER_NAME'],-17) == "emi.u-bordeaux.fr")
{
    $config_base['hote'] = "mariadb";
    $config_base['utilisateur'] = "loginENT";
    $config_base['motdepasse'] = "MOTDEPASSE";
    $config_base['nom_base'] = "loginENT";
}

// connexion à la base de données
try {
    $pdo = new PDO( "mysql:host={$config_base['hote']};
                    dbname={$config_base['nom_base']}",
                    "{$config_base['utilisateur']}",
                    "{$config_base['motdepasse']}");

    // afficher les messages d'erreurs pour trouver les erreurs
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);

    // jeu de caractères : UTF-8
    $pdo->query("SET NAMES utf8");
    $pdo->query("SET CHARACTER SET utf8");
}
catch (PDOException $exception) {
    echo "Connexion échouée : " . $exception->getMessage();
}
?>
Important

Remarque : Par la suite, tous les fichiers qui utilisent votre base de données utiliseront le fichier connexion_base.php} en l’incluant en tout début de page avec

<?php require_once("connexion_base.php"); ?>

Exercice 5.4 Page web d’un article avec commentaires

  1. Créer une nouvelle page HTML5 dans le fichier article.php avec les balises comme d’habitude. Dans la partie body, ajoutez un titre h1 qui sera le titre de l’article (choisissez le titre selon vos envies) et créez les 3 paragraphes (avec la balise avec <p>...</p>) avec le texte issu de la version populaire de “Lorem ipsum” issue de la page https://fr.wikipedia.org/wiki/Faux-texte.

  2. En tout début de votre fichier (donc même avant DOCTYPE), incluez la connexion à la base de données. Faites bien attention qu’il n’y ait ni d’espaces, ni de saut de ligne avant cette instruction !

<?php require_once("connexion_base.php"); ?>
  1. Maintenant, nous allons récupérer tous les enregistrements (avec tous leurs champs) de la table commentaire. Ces enregistrements seront stockés dans un tableau $enregistrements (il s’agit d’un tableau indexé d’un tableau associatif, comme vu dans les TDs précédents). Nous allons déterminer également combien de commentaires se trouvent dans la table commentaire, et le stocker dans la variable $nombreReponses.

Pour ce faire, dans votre fichier article.php et juste après l’inclusion de fichier connexion_base.php, insérez le code suivant :

<?php
// exécuter une requete MySQL
$requete = "SELECT * FROM commentaire;";
$reponse = $pdo->prepare($requete);
$reponse->execute();

// récupérer tous les enregistrements dans un tableau
$enregistrements = $reponse->fetchAll();

// connaitre le nombre d'enregistrements
$nombreReponses = count($enregistrements);
?>
  1. Nous allons maintenant afficher les commentaires dans votre page article.php. Pour ce faire, après votre article (donc après les 3 paragraphes de lorem ipsum), affichez tous les enregistrement de votre tableau $enregistrements. Un exemple pour afficher tous les enregistrements (sans mise en forme) se trouve ci-dessous.
<?php
/// parcourir le tableau des enregistrements
for ($i=0; $i<count($enregistrements); $i++)
{
    echo $enregistrements[$i]['nom'];
    echo $enregistrements[$i]['texte'];
    echo $enregistrements[$i]['date'];
}
?>
  1. Testez.

  2. Modifiez la mise en forme, p.ex. utilisez des tables HTML de 3 colonnes (nom, texte, date), ou, si vous voulez faire plus simple, une liste. Rappelez-vous, nous avons déjà fait cette partie de l’exercice dans les TDs précédents pour des tableaux associatifs …

Exercice 5.5 Formulaires

  1. A la fin de votre page article.php créez un formulaire qui renvoie vers la page ajouter.php avec la méthode post, et qui permet de renseigner un champs d’entrées du texte (appelé nom), d’une zone de texte (appelée texte) ainsi qu’un bouton qui envoie le formulaire (afin d’ajouter le commentaire dans la base de données).

Exercice 5.6 Insertion dans une table d’une base de données

Dans cet exercice, nous allons créer la page ajouter.php. Cette page récupère les données du formulaire, elle insère le commentaire de la table commentaire de votre base de données, et elle affiche un message de succès.

  1. En tout début de votre fichier ajouter.php, incluez le fichier connexion_base.php.

  2. Ensuite, en PHP, affectez les variables $nom et $texte avec les données saisies de votre formulaire.

  3. Ajoutez les données saisies dans la table commentaire de votre base de données comme suit :

<?php
// exécuter une requete MySQL de type INSERT
$requete="INSERT INTO commentaire (nom, texte, date) VALUES (?,?,NOW())";
$reponse=$pdo->prepare($requete);
$reponse->execute(array($nom, $texte));
?>
  1. Ajoutez les balises pour créer un document HTML, et dans la partie body, affichez le texte “Votre commentaire a bien été enregistré” dans un paragraphe <p>...</p>.

  2. A la fin de votre page ajouter.php, créez un lien hypertexte avec le texte “retourner à l’article” qui permet de renvoyer à l’article article.php !

Exercice 5.7 Modération : Administration de commentaires

L’objectif de cet exercice est de modérer les commentaires de vos internautes. Afin de ne pas afficher des commentaires ayant du contenu inadapté, nous allons passer par une étape de validation des commentaires : seulement les commentaires validé par les administrateurs du site (donc vous) doivent être affiché sur votre site.

  1. Dans votre table commentaire, ajouter en fin de table un champs INT qui s’appelle validation. Pour cela, sur phpMyAdmin, choisissez la table commentaire et cliquez sur “structure”. Ensuite, ajouter une colonne en fin de table comme suit :

Comme valeur par défaut, spécifiez 0 :

  1. Dans votre interface d’administration phpMyAdmin, sélectionnez les commentaires que vous validez en mettant le champs validation à 1.

  2. Dans votre interface d’administration phpMyAdmin, dans les liens bleus du haut de l’interface, cliquez sur “Rechercher”. Recherchez tous les commentaires ayant un champs validation de 1. Notez la requête MySQL résultante :

SELECT ...
  1. Dans votre fichier article.php, modifiez votre requête MySQL de l’exercice 5.4.3 pour uniquement afficher les commentaires étant validés :
SELECT * FROM commentaire WHERE validation=1

Exercices optionnels

Exercice 5.8 Utilisation de fonctions PHP (plutôt difficile)

  1. Afin d’améliorer votre page article.php, étudiez les fonctions PHP date(), mktime(), et substr() sur le manuel de PHP (http://www.php.net/manual/fr). Essayez de trouver une meilleure mise en forme pour la date du commentaire postée, de type “Lundi, 5 Mars, à 10h00”. Pour cela, soit vous utilisez les capacités de ces fonctions pleinement, mais vous pouvez aussi définir les deux tableaux suivants qui vont vous aider :
$jours = array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi",
"Vendredi", "Samedi");
$mois = array("Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre",
"Décembre");

Aide : Il y a plein de différentes façons d’arriver à faire cela. Une solution possible, est dans un premier temps, découpez la chaine de caractère de la date en année, mois, jour, heure, minute, secondes avec la fonction substr(). Ensuite, créez un timestamp avec la fonction mktime() à partir de ces informations. Finalement, vous pouvez récupérez les divers informations, comme le jour de la semaine, avec la fonction date()

Important

Comme d’habitude, les exercices sont à rendre sur moodle jusqu’à mercredi prochain, 23h59.