[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Officiels > Site Web > Un site dynamique avec PHP ! > La base de données > TP : un Mini-Chat > Lecture du tutoriel

TP : un Mini-Chat

Voilà un TP qui, je l'espère, va vous permettre de souffler un peu. Il faut dire qu'on a pas mal enchaîné de choses totalement nouvelles dans les chapitres précédents (Base de données, extraction des informations contenues dans une table etc...).

Ici, je vous propose de passer à l'application pratique de ce que vous venez d'apprendre. Vous allez voir que vous savez maintenant faire des scripts très intéressants : vous avez le niveau pour réaliser un Mini-Chat (ce qu'on va faire), un livre d'or et même un script de news !

Ces scripts sont en fait assez similaires, mais le plus simple d'entre eux est le Mini-Chat. Ne vous inquiétez pas, le TP pour le système de news ne va pas tarder (je sais que vous mourez d'envie de vous y attaquer, mais vous n'êtes pas tout à fait prêts ;))

Et puis, ne vous y trompez pas : un Mini-Chat sur votre site ça peut s'avérer trrrès intéressant

. Les plus grands sites en ont (ils l'appellent parfois "Shoutbox" ou encore "Tribune libre"). De plus, ça ajoutera énormément de dynamisme à votre site web.

Réalisation du Mini-Chat

Etape 1 : prérequis

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

Transmission de variables via un formulaire
Lire dans une table
Ecrire dans une table

Vous remarquerez que, dans la plupart des TP, la transmission de variables par formulaire est très importante. Pour l'instant, on a rapidement vu comment ça marchait dans le chapitre sur les variables. Mais, dans la partie III, nous étudierons cela plus en détail car il y a beaucoup de choses intéressantes à savoir

Etape 2 : préparation du script

Avant de commencer à rédiger comme des bourrins notre script PHP, qu'est-ce que je vous avais dit qu'il fallait absolument faire ?
Un brouillon !
Eh oui, votre script ne va pas s'écrire tout seul comme par magie :magicien:

, alors il va falloir réfléchir un petit peu avant de commencer.
C'est un script très simple, donc vous ne devriez pas avoir de problèmes pour comprendre.

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 de la Base de Données.

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 :

C'est plus clair là ?

Bon, comme à chaque fois que l'on se servira d'une base de données, on va commencer par étudier la forme de la table (quels seront les champs).
Voici un petit tableau que j'ai mis 1 minute à pondre 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 !

Voilà : on a un champ ID de type INT (comme toujours) 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 tous seuls, et ne pas oublier de sélectionner "Primaire" (ça dit à MySQL que c'est le champ qui numérote les entrées)
Pour les champs "pseudo" et "message", vous utiliserez le type VARCHAR (pensez à indiquer une taille limite dans le champ texte d'à côté : 255 caractères, c'est suffisant, on n'est pas là pour écrire un roman !).

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

C'est fait ? Très bien

Et maintenant ? Eh bien vous êtes pratiquement au point. Comme pour le TP sur la page protégée par mot de passe, vous n'utiliserez qu'une seule page. Le code ressemblera en gros à ceci :

Le formulaire doit renvoyer sur la même page. Si votre page s'appelle "minichat.php", alors votre balise de formulaire sera :
<form action="minichat.php" method="post">
Ca va donc recharger la même page ! Oui, mais cette fois il se passera quelque chose de différent ! En effet, 2 variables seront créées (par exemple $_POST['pseudo'] et $_POST['message']), et vous allez pouvoir vérifier si elle contiennent quelque chose. SI elles contiennent quelque chose, ALORS vous enregistrez les données. Sinon, bah vous ne faites rien (je ne veux pas voir de else dans votre code !).

En résumé, lorsque la page se charge, il y a 2 cas :

L'utilisateur a posté un message, $_POST['pseudo'] et $_POST['message'] ne sont pas vides. On enregistre ces informations, puis on affiche les 2 zones de texte les 10 derniers messages.
L'utilisateur n'a pas posté de message, $_POST['pseudo'] et $_POST['message'] sont vides. Alors on ne fait rien, on se contente d'afficher les 2 zones de texte et les 10 derniers messages.

Vous aurez besoin de deux conditions pour vérifier si vos variables ne sont pas vides :
1) Utilisez un isset pour vérifier si les variables existent (comme dans le premier TP).
2) Puis, si les variables existent, vérifiez si elles ne sont pas vides (NULL).

Si ces 2 conditions sont remplies, alors vous pouvez envoyer le message dans la base de données sans crainte.

Ah mais attendez... il peut y avoir un problème quand même !

Aleeerte ! Ce n'est pas fini, il reste un point important à voir.
Il faut que vous soyez au courant, car si vous ne faites pas attention un tel script peut poser problème pour la sécurité de votre site !

Oui, c'est très important. Il ne s'agit pas de quelque chose de compliqué, pourtant beaucoup de monde l'oublie et ça peut poser problème sur certains sites.

QUOOIIII ? Je vais me faire hacker mon site à cause de ton script !? o_O

Disons qu'il y a un petit danger

En effet, si le visiteur poste dans son message du code HTML, celui-ci sera enregistré dans la base de données. Lorsque que quelqu'un affichera son message, le code HTML sera lu !
OK, si le visiteur a posté une balise inoffensive du style <em>, on ne risque rien. Mais il pourrait très bien insérer un code javascript qui affiche une boîte de dialogue (très gênant) ou même qui pourrait scanner vos cookies et récupérer des informations confidentielles !

Bon je vous ai fait assez peur comme ça

Pour régler le problème en un tour de main, on utilisera une fonction PHP toute prête : htmlspecialchars. On l'appliquera aux 2 variables $_POST['pseudo'] et $_POST['message'] :

Code : PHP

1 2	$message = htmlspecialchars ($_POST['message']); $pseudo = htmlspecialchars ($_POST['pseudo']);

Ceci nous permet donc d'éviter que le visiteur puisse poster du HTML ou (pire) du Javascript.

Pour être totalement sécurisé ça ne suffit pas. Je ne souhaite pas rentrer dans le détail pour le moment (parce que c'est limite un cours de hacking qu'il faudrait après :-°

) mais il faut aussi se protéger des injections sql, c'est-à-dire des gens qui, par une technique précise, pourraient essayer d'introduire du code SQL dans le message. C'est particulièrement dangereux.
Pour éviter ça, là encore il suffit d'appliquer une fonction. Le code parfaitement sécurisé à utiliser sera donc :

Code : PHP

1 2	$message = mysql_real_escape_string(htmlspecialchars($_POST['message'])); $pseudo = mysql_real_escape_string(htmlspecialchars($_POST['pseudo']));

Etape 3 : à vous de jouer !

J'adore l'étape 3 : je n'ai rien à faire :lol:

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

). Au contraire, si vraiment vous n'y arrivez pas, mettez votre code de côté et comparez avec la correction.
Ce sera très enrichissant pour vous, vous verrez !

Etape 4 : 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 !

Code : PHP

<!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>
 
 
<?php
if (isset($_POST['pseudo']) AND isset($_POST['message'])) // Si les variables existent
{
    if ($_POST['pseudo'] != NULL AND $_POST['message'] != NULL) // Si on a quelque chose à enregistrer
    {
        // D'abord, on se connecte à MySQL
        mysql_connect("localhost", "sdz", "mot_de_passe");
        mysql_select_db("coursphp");
 
        // On utilise les fonctions PHP mysql_real_escape_string et htmlspecialchars pour la sécurité
        $message = mysql_real_escape_string(htmlspecialchars($_POST['message']));
        $pseudo = mysql_real_escape_string(htmlspecialchars($_POST['pseudo']));
 
        // Ensuite on enregistre le message
        mysql_query("INSERT INTO minichat VALUES('', '$pseudo', '$message')");
 
        // On se déconnecte de MySQL
        mysql_close();
    }
}
 
 
// Que l'on ait enregistré des données ou pas...
// On affiche le formulaire puis les 10 derniers messages
 
// Tout d'abord le formulaire :
?>
 
 
 
<form action="minichat.php" method="post">
 
<p>
Pseudo : <input type="text" name="pseudo" /><br />
Message :  <input type="text" name="message" /><br />
 
<input type="submit" value="Envoyer" />
</p>
 
</form>
 
 
 
<?php
 
// Maintenant on doit récupérer les 10 dernières entrées de la table
// On se connecte d'abord à MySQL :
mysql_connect("localhost", "sdz", "mot_de_passe");
mysql_select_db("coursphp");
 
// On utilise la requête suivante pour récupérer les 10 derniers messages :
$reponse = mysql_query("SELECT * FROM minichat ORDER BY ID DESC LIMIT 0,10");
 
// On se déconnecte de MySQL
mysql_close();
 
// Puis on fait une boucle pour afficher tous les résultats :
while ($donnees = mysql_fetch_array($reponse) )
{
?>
 
<p><strong><?php echo $donnees['pseudo']; ?></strong> : <?php echo $donnees['message']; ?></p>
 
 
 
<?php
}
// Fin de la boucle, le script est terminé !
?>
 
 
    </body>
</html>

Essayer !

Bien entendu, ce script ne fonctionnera chez vous que si vous avez créé une table "minichat" comme je vous l'ai montré plus haut.
Bon, comment marche ce script ?

Tout d'abord, on fait un isset sur les deux variables $_POST['pseudo'] et $_POST['message'] pour vérifier si les variables existent. Si elles n'existent pas, on ne va pas plus loin. Si elles existent, on procède à un deuxième test...
La seconde condition vérifie si les variables $_POST['pseudo'] et $_POST['message'] contiennent quelque chose. En effet, il serait ennuyeux qu'un visiteur envoie un message vide ou qu'il ne donne pas son pseudo. Si c'est le cas, alors on va enregistrer les données (en n'oubliant pas d'utiliser mysql_real_escape_string et htmlspecialchars pour les raisons de sécurité que je vous ai expliquées plus tôt).
Ensuite, que l'on ait dû enregistrer quelque chose ou pas, on écrit le code HTML du formulaire. C'est tout bête, vous avez déjà vu ça dans le chapitre sur les variables et même dans le TP de la protection par mot de passe.
Enfin, on affiche les 10 derniers messages à l'aide de la requête SQL suivante :
SELECT * FROM minichat ORDER BY ID DESC LIMIT 0,10
Cela signifie : "Sélectionne tous les champs dans minichat (SELECT * FROM minichat), ordonne les entrées dans l'ordre décroissant (ORDER BY ID DESC), et n'en prends que 10 (LIMIT 0,10)"

La première fois que vous affichez la page, $_POST['pseudo'] et $_POST['message'] n'existent pas, donc PHP n'exécutera pas ce qui se trouve dans la condition du isset.
Si vous vous amusez à poster un message, il sera d'abord enregistré dans la base de données. Ensuite, on affiche les messages. Comme le vôtre a été enregistré juste avant, c'est normal qu'il apparaisse de suite !

C'est-y pas beau tout ça ?

Vous allez pouvoir chatter sur votre propre site web avec vos visiteurs !

Etape 5 : améliorez ce script !

Oh, mais il serait dommage d'en rester là... Le script de Mini Chat que je vous ai fait faire est certes marrant, 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, ça 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 qui me viennent à l'esprit :

Retenir le pseudo. En effet, le pseudo qu'a tapé le visiteur se trouve dans la variable $_POST['pseudo'].Comme vous le savez probablement, il est possible en HTML de pré-remplir un champ avec l'attribut "value". Par exemple :

Code : HTML
1
<input type="text" name="pseudo" value="M@teo21" />
Remplacez M@teo21 par un echo de $_POST['pseudo'], et le pseudo sera automatiquement inscrit !
Empêcher les messages en double. En effet, si vous actualisez la page (touche F5) pour voir s'il y a de nouveaux messages, votre navigateur va vous demander s'il doit renvoyer les informations... Si vous dites "oui", alors le message qu'il vient d'envoyer sera réenvoyé, ce qui fait qu'il apparaîtra en double !Pour éviter cela, il y a bien une solution : avant d'enregistrer un message, vous vérifiez que le dernier message posté n'est pas identique. Si c'est le même, vous n'enregistrez pas le message (sinon vous auriez eu un double !).
Supprimer automatiquement les vieux messages. A chaque fois qu'un nouveau message va être posté, vous comptez le nombre total de messages dans la table. S'il y en a par exemple plus de 1000, vous supprimez le plus vieux, histoire de faire de la place pour pas trop encombrer votre base de données (à moins que vous ne préfériez garder un historique complet ;))

Il est probable que peu d'entre vous aient trouvé de suite le code "exact" que j'attendais. Mais si vous n'étiez pas trop loin, c'est tout aussi bon.
Et même si vous n'avez pas réussi, passez un moment à essayer de comprendre le code, c'est super important. Il faut que vous soyez capables de le refaire sans aide !

Maintenant, si vous voulez utiliser ce script PHP sur votre site web, aucun problème ! Mais je vous conseille d'y apporter quelques améliorations : au niveau du graphisme d'abord (parce que c'est rudement moche ce que j'ai fait), mais aussi au niveau du code PHP (vous pourriez ajouter un champ qui enregistre l'heure du message !)

Je vous donne rendez-vous au prochain TP, et d'ici là restez attentifs en cours

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité