Voilà un TP qui va nous permettre de mettre en pratique tout ce que l'on vient d'apprendre avec 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.
Le Mini-Chat permettra d'ajouter facilement une touche de dynamisme à votre site, mais il faut encore le construire. A nous de jouer !
Pour préparer ce TP, nous allons voir les points suivants :
- Prérequis
- Objectifs
- Structure de la table MySQL
- Structure des pages PHP
- Rappels 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
- Ecrire dans une table
- Utilisation de PDO et des requêtes préparées
Objectifs
Avant de commencer à attaquer notre script PHP, qu'est-ce que je vous avais dit qu'il fallait absolument faire en premier ? 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. En particulier, il faut se demander ce qu'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, deux zones de texte en haut : 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 (parce que si vous les affichez tous et que vous avez 1000 messages ça risque d'être un peu long !) en allant du plus récent au plus ancien.
C'est un peu flou ? OK, voilà à quoi doit ressembler votre page PHP une fois terminée :
Maintenant 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.
Structure de la table MySQL
Comme à chaque fois que l'on se servira d'une base de données, on va commencer par étudier la forme de la table, c'est-à-dire la liste des champs. Voici un petit tableau que j'ai réalisé en 1 minute sur une feuille de papier brouillon :
| ID | pseudo | message |
|---|
| 1 |
Tom |
Il fait beau aujourd'hui vous trouvez pas ? |
| 2 |
John |
Ouais, ça faisait un moment qu'on n'avait pas vu la lumière du soleil ! |
| 3 |
Patrice |
Ca 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) : qui 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" (ça 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 qui est 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 2 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 2 fichiers comme ici.
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 :
Code : 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.
La fonction header() permet d'envoyer ce qu'on appelle des en-têtes HTTP. C'est le protocole utilisé sur le web entre le serveur et le client pour échanger des pages web. Ici, on utilise une des possibilités de HTTP qui commande une redirection via la commande Location.
Par rapport à d'autres types de redirection (comme la balise <meta>), cette technique a l'avantage d'être instantanée et transparente pour l'utilisateur. De plus, s'il rafraîchit ensuite la page minichat.php, il ne risque pas d'avoir le message souvent gênant et déroutant : "Pour afficher cette page, les informations précédemment transmises doivent être renvoyées. Etes-vous sûr de vouloir le faire ?".
Rappels 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 2 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 à 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.
A 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 !
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.
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Mini-chat</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
form
{
text-align:center;
}
</style>
<body>
<form action="minichat.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();
?>
|
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 le pseudo. Toutes les données issues du formulaire doivent être protégée 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.
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | <?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 surprises. 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.
En fait, ce code peut être amélioré (je vais en parler un peu plus loin). En effet, on ne teste pas si le pseudo et le message existent bien, s'ils sont vides ou non, etc. Il est donc en théorie possible d'enregistrer des messages vides, ce qui idéalement ne devrait pas être autorisé.
Vous voulez tester le minichat ? Pas de problème ! Ce lien ouvre la page
minichat.php :
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 corrections pour chacune de ces idées, ce serait beaucoup trop long.
Mais ne vous en faites pas : si je vous propose de faire des améliorations, c'est que vous en êtes capables. Et puis, n'oubliez pas qu'il y a un forum sur le site : 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 :
Code : HTML | <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 (le web n'a pas vraiment été prévu pour ce type d'applications à la base). 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, tous les afficher 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 !
Flux RSS News
Twitter
Facebook