Mini chat html code
Dating > Mini chat html code
Click here: ※ Mini chat html code ※ ♥ Mini chat html code
En voyant la correction, vous apprendrez énormément de choses! Vous allez maintenant voir ce que j'attendais de vous. Voilà un TP qui va nous permettre de mettre en pratique tout ce que l'on vient d'apprendre sur le langage SQL. This site does not collect, process or sell personal data. On doit actuellement saisir à nouveau son pseudo à chaque nouveau message. Voici quelques idées pour améliorer le script. Faites l'effort dans tous les cas de travailler ce script ; ce sera très formateur, vous verrez! Appelez-la comme vous voulez, moi j'ai choisi minichat.
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! Prérequis Vous pourrez suivre ce TP sans problème si vous avez lu tous les chapitres précédents. Objectifs Qu'est-ce que je vous avais dit qu'il fallait absolument faire avant de commencer à attaquer notre script PHP? 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? 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é 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? Y'a de super vagues! 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. 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 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 par exemple , mais le plus propre et le plus rapide consiste à faire une redirection HTTP. Celle-ci n'affiche rien mais commande en revanche au navigateur du visiteur de retourner sur minichat. La fonction header permet d'envoyer ce qu'on appelle des « en-têtes HTTP ». C'est le protocole qu'utilisent 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 , cette technique a l'avantage d'être instantanée et transparente pour l'utilisateur. De plus, s'il rafraîchit ensuite la page minichat. Êtes-vous sûr de vouloir le faire? 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. 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. 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. On se connecte à la base, on insère les données et on redirige le visiteur vers la page minichat. 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é. Le mini-chat 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. 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 : Remplacez M teo21par 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. 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. Ainsi, s'il y a de nouveaux messages, ils apparaîtront après un clic sur le lien. 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.
Last updated
