Concevez votre site web avec PHP et MySQL

Concevez votre site web avec PHP et MySQL

Mis à jour le lundi 16 juin 2014

Voilà un TP qui va nous permettre de mettre en pratique tout ce que l'on vient d'apprendre sur le langage SQL. Il faut dire qu'on a enchaîné beaucoup de nouveautés dans les chapitres précédents : base de données, extraction des informations contenues dans une table, etc.

Avec les connaissances que vous avez maintenant, vous êtes en mesure de réaliser de vrais scripts qui pourront vous être utiles pour votre site, comme un mini-chat (ce qu'on va faire) ou encore un livre d'or, un système de news (ou blog), etc. Ces scripts sont en fait assez similaires, mais le plus simple d'entre eux est le mini-chat.

Ce dernier permettra d'ajouter facilement une touche de dynamisme à votre site… mais encore faut-il le construire. À nous de jouer !

Instructions pour réaliser le TP

Pour préparer ce TP, nous allons voir les points suivants :

  • prérequis ;

  • objectifs ;

  • structure de la table MySQL ;

  • structure des pages PHP ;

  • rappel sur les consignes de sécurité.

Prérequis

Vous pourrez suivre ce TP sans problème si vous avez lu tous les chapitres précédents. Plus précisément, nous allons utiliser les notions suivantes :

  • transmission de variables via un formulaire ;

  • lire dans une table ;

  • écrire dans une table ;

  • utilisation de PDO et des requêtes préparées.

Objectifs

Qu'est-ce que je vous avais dit qu'il fallait absolument faire avant de commencer à attaquer notre script PHP ? Un brouillon !

Eh oui, votre script ne va pas s'écrire tout seul, comme par magie, alors il va falloir réfléchir un petit peu avant de commencer. Il faut particulièrement se demander ce que l'on veut exactement faire.

Quelles seront les fonctionnalités de mon mini-chat ?

Ce sera quelque chose de basique pour commencer, mais rien ne vous empêchera de l'améliorer à votre sauce.

On souhaite avoir, sur la même page et en haut, deux zones de texte : une pour écrire votre pseudo, une autre pour écrire votre petit message. Ensuite, un bouton « Envoyer » permettra d'envoyer les données à MySQL pour qu'il les enregistre dans une table.

En dessous, le script devra afficher les 10 derniers messages qui ont été enregistrés en allant du plus récent au plus ancien.

C'est un peu flou ? O.K., regardez sur la figure suivante à quoi doit ressembler votre page PHP une fois terminée.
Une fois que l'on sait ce que l'on veut obtenir, il nous sera beaucoup plus facile de le réaliser ! Et ne rigolez pas, trop de gens se lancent dans un script sans vraiment savoir ce qu'ils veulent faire, ce qui les conduit bien souvent dans un mur.

Aperçu du mini-chat une fois réalisé
Aperçu du mini-chat une fois réalisé

Structure de la table MySQL

Comme à chaque fois que l'on se servira d'une base de données, on va commencer par étudier sa forme, c'est-à-dire la liste des champs qu'elle contient. Voici un petit tableau que j'ai réalisé en une minute sur une feuille de papier brouillon :

ID

pseudo

message

1

Tom

Il fait beau aujourd'hui, vous ne trouvez pas ?

2

John

Ouais, ça faisait un moment qu'on n'avait pas vu la lumière du soleil !

3

Patrice

Ça vous tente d'aller à la plage aujourd'hui ? Y'a de super vagues !

4

Tom

Cool, bonne idée ! J'amène ma planche !

5

John

Comptez sur moi !

On distingue les champs suivants :

  • ID (type INT) : il nous permettra de savoir dans quel ordre ont été postés les messages. Il faudra le mettre en auto_increment pour que les numéros s'écrivent tout seuls, et ne pas oublier de sélectionner « Primaire » (cela dit à MySQL que c'est le champ qui numérote les entrées) ;

  • pseudo (type VARCHAR) : pensez à indiquer la taille maximale du champ (je vous conseille de mettre le maximum, « 255 ») ;

  • message (type VARCHAR) : de même, on indiquera une taille maximale de 255 caractères. Si vous pensez que vos messages seront plus longs, utilisez plutôt le type TEXT, beaucoup moins limité.

Commencez donc par créer cette table dans votre base de données avec phpMyAdmin. Appelez-la comme vous voulez, moi j'ai choisi minichat.

Structure des pages PHP

Comme pour le TP « Page protégée par mot de passe », nous allons utiliser deux fichiers PHP :

  • minichat.php : contient le formulaire permettant d'ajouter un message et liste les 10 derniers messages ;

  • minichat_post.php : insère le message reçu avec $_POST dans la base de données puis redirige vers minichat.php.

Il aurait été possible de tout faire sur une seule page PHP, mais pour bien séparer le code il est préférable d'utiliser deux fichiers, comme sur la figure suivante.

Organisation des pages du mini-chat
Organisation des pages du mini-chat

Vous avez toutes les connaissances nécessaires pour réaliser un mini-chat basé sur la structure du schéma précédent… à l'exception de la redirection. En effet, il existe plusieurs moyens de rediriger le visiteur vers une autre page (via une balise <meta> par exemple), mais le plus propre et le plus rapide consiste à faire une redirection HTTP. Voici comment il faut procéder pour faire cela sur la page minichat_post.php :

<?php
// Effectuer ici la requête qui insère le message
// Puis rediriger vers minichat.php comme ceci :
header('Location: minichat.php');
?>

Le visiteur ne verra jamais la page minichat_post.php. Celle-ci n'affiche rien mais commande en revanche au navigateur du visiteur de retourner sur minichat.php.

Rappel sur les consignes de sécurité

Un petit rappel ne peut pas faire de mal : ne faites jamais confiance aux données de l'utilisateur ! Tout ce qui vient de l'utilisateur doit être traité avec la plus grande méfiance.

Ici, on a une page minichat_post.php assez simple qui reçoit deux champs : le pseudo et le message. A priori, il n'y a pas de vérification supplémentaire à faire, si ce n'est qu'il faudra veiller, lors de l'affichage, à protéger les chaînes de caractères contre la faille XSS (celle qui permet d'insérer du HTML et du JavaScript dans la page). Il faudra donc bien veiller à appeler htmlspecialchars() pour protéger les chaînes.

À vous de jouer !

Allez, j'en ai assez dit. C'est maintenant à votre tour de réfléchir. Avec les éléments que je vous ai donnés, et avec ce que vous avez appris dans les chapitres précédents, vous devez être capables de réaliser le mini-chat !

Si vous avez un peu de mal, et si votre script ne marche pas, ne le supprimez pas dans un moment de rage (il ne faut jamais s'énerver). Faites une pause et revenez-y plus tard.

Si vous coincez vraiment, vous pouvez demander de l'aide sur les forums ou regarder la correction pour vous aider. Faites l'effort dans tous les cas de travailler ce script ; ce sera très formateur, vous verrez !

Correction

Hop, hop, hop ! On relève les copies !

Vous allez maintenant voir ce que j'attendais de vous. Si vous avez réussi à faire quelque chose qui marche, bravo !
Et si vous n'y êtes pas arrivés, ne vous en faites pas trop : le principal est que vous ayez fait l'effort de réfléchir. En voyant la correction, vous apprendrez énormément de choses !

Il y avait deux fichiers ; commençons par minichat.php.

minichat.php : formulaire et liste des derniers messages

Cette page contient le formulaire d'ajout de message ainsi que la liste des derniers messages.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mini-chat</title>
    </head>
    <style>
    form
    {
        text-align:center;
    }
    </style>
    <body>
    
    <form action="minichat_post.php" method="post">
        <p>
        <label for="pseudo">Pseudo</label> : <input type="text" name="pseudo" id="pseudo" /><br />
        <label for="message">Message</label> :  <input type="text" name="message" id="message" /><br />

        <input type="submit" value="Envoyer" />
	</p>
    </form>

<?php
// Connexion à la base de données
try
{
	$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}

// Récupération des 10 derniers messages
$reponse = $bdd->query('SELECT pseudo, message FROM minichat ORDER BY ID DESC LIMIT 0, 10');

// Affichage de chaque message (toutes les données sont protégées par htmlspecialchars)
while ($donnees = $reponse->fetch())
{
	echo '<p><strong>' . htmlspecialchars($donnees['pseudo']) . '</strong> : ' . htmlspecialchars($donnees['message']) . '</p>';
}

$reponse->closeCursor();

?>
    </body>
</html>

Le code de cette page est séparé en deux parties :

  • le formulaire (en HTML) ;

  • la liste des messages (affichée en PHP à l'aide d'une requête SQL).

Il n'y avait pas de piège particulier, à l'exception du htmlspecialchars() à ne pas oublier sur le message ET sur le pseudo. Toutes les données issues du formulaire doivent être protégées pour éviter la faille XSS dont nous avons parlé dans un chapitre précédent.

minichat_post.php : enregistrement et redirection

La page minichat_post.php reçoit les données du formulaire, enregistre le message et redirige ensuite le visiteur sur la liste des derniers messages.

<?php
// Connexion à la base de données
try
{
	$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}

// Insertion du message à l'aide d'une requête préparée
$req = $bdd->prepare('INSERT INTO minichat (pseudo, message) VALUES(?, ?)');
$req->execute(array($_POST['pseudo'], $_POST['message']));

// Redirection du visiteur vers la page du minichat
header('Location: minichat.php');
?>

Ce code est relativement court et sans surprise. On se connecte à la base, on insère les données et on redirige le visiteur vers la page minichat.php comme on vient d'apprendre à le faire.

Vous voulez tester le mini-chat en ligne ? Pas de problème !

Tester la page minichat.php

Aller plus loin

Il serait dommage d'en rester là… Le script de mini-chat que je vous ai fait faire est certes amusant, mais je suis sûr que vous aimeriez l'améliorer !

Cependant, je ne peux que vous donner des idées. Je ne peux pas vous proposer de correction pour chacune de ces idées car ce serait beaucoup trop long.
Mais ne vous en faites pas : si je vous propose de procéder à des améliorations, c'est que vous en êtes capables. Et puis, n'oubliez pas qu'il y a un forum sur le Site du Zéro : si jamais vous séchez un peu, n'hésitez pas à aller y demander de l'aide !

Voici quelques idées pour améliorer le script.

  • Retenir le pseudo. On doit actuellement saisir à nouveau son pseudo à chaque nouveau message. Comme vous le savez probablement, il est possible en HTML de pré-remplir un champ avec l'attribut value. Par exemple :

<input type="text" name="pseudo" value="M@teo21" />

Remplacez M@teo21 par le pseudonyme du visiteur. Ce pseudonyme peut être issu d'un cookie par exemple : lorsqu'il poste un message, vous inscrivez son pseudo dans un cookie, ce qui vous permet ensuite de pré-remplir le champ.

  • Proposez d'actualiser le mini-chat. Le mini-chat ne s'actualise pas automatiquement s'il y a de nouveaux messages. C'est normal, ce serait difficile à faire à notre niveau. À la base, le Web n'a pas vraiment été prévu pour ce type d'applications. En revanche, ce que vous pouvez facilement faire, c'est proposer un lien « Rafraîchir » qui charge à nouveau la page minichat.php. Ainsi, s'il y a de nouveaux messages, ils apparaîtront après un clic sur le lien.

  • Afficher les anciens messages. On ne voit actuellement que les 10 derniers messages. Sauriez-vous trouver un moyen d'afficher les anciens messages ? Bien sûr, les afficher tous d'un coup sur la même page n'est pas une bonne idée. Vous pourriez imaginer un paramètre $_GET['page'] qui permet de choisir le numéro de page des messages à afficher.

  • Au travail !

    Exemple de certificat de réussite
    Exemple de certificat de réussite