5) TP : un Mini-Chat

Transcription

TP : un Mini-Chat - Site Web - Lecture du tutorial - Le Site du Zéro
1 sur 7
http://www.siteduzero.com/tuto-3-146-1-tp-un-mini-chat.html
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...).
Auteur : M@teo21
Créé le : 17/08/2005 à 16h33
Modifié le : 24/03/2007 à
16h44
Noter et commenter ce tutorial
Imprimer ce tutorial
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 :D. 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
absoluement faire ?
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.
C'est un script très simple, donc vous ne devriez pas avoir de problèmes pour comprendre.
29/07/2007 18:16
2 sur 7
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 (taille limite : 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".
29/07/2007 18:16
3 sur 7
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 !?
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
29/07/2007 18:16
4 sur 7
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
$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
$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
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
29/07/2007 18:16
5 sur 7
<!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) )
{
29/07/2007 18:16
6 sur 7
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 ?
1. 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...
2. 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).
3. 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.
4. 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
<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
29/07/2007 18:16
7 sur 7
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
Auteur : M@teo21
Noter et commenter ce tutorial
Imprimer ce tutorial
29/07/2007 18:16

5) TP : un Mini-Chat

Transcription

Documents pareils

Les conseils clé d`Internet Sans Crainte

Modifier son pseudo

php, mysql - Mediagraf

N° VRA F : Pseudo :

Chef de projet PHP/MySql

Formation PHP MYSQL - Formation Industries Loire

Thomas LANGOUSTET

Programmation de sites Web dynamiqes avec PHP et MySQL

Le tchat (verbe: tchater) Quelques mots de vocabulaires: bavarder

epm expert php/mysql