IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Réaliser un chat en PHP

Ce tutoriel a pour but de vous apprendre la réalisation d'un chat en PHP, il suppose que vous conaissez les rudiments de PHP.

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

I-A. Remerciements

I-B. Prérequis

Ce tutoriel est comme un exercice pratique vous permettant de mettre vos conaissances de PHP à l'oeuvre dans la réalisation d'un chat !

Le cours est structuré en plusieurs parties (c'est plus facile à avaler en petits morceaux ^^ !).

II. Préparation

II-A. Environnement

Pour la création de notre chat, il vous faut :
  • Une base de données ;
  • Un programme de test PHP, par exemple EasyPHP, WampServer ou Zend Core ;
  • Éventuellement un site web où mettre votre chat une fois fini ;
  • Pour réaliser le script chez vous, regarder le dernier point.

II-A-1. Base de données

Il vous faut une base de données composée de deux tables.

J'utiliserai MySQL durant ce cours. Si vous utilisez un autre SGBD, il vous sera peut être nécessaire d'apporter certaines modifications aux requêtes.

Table qui stocke les inscriptions :
Sélectionnez
CREATE TABLE `inscrit` (
  `Nom` text NOT NULL,
  `Prenom` text NOT NULL,
  `Pseudo` text NOT NULL,
  `Mot_de_passe` text NOT NULL,
  `Adresse` text NOT NULL,
  `Date` text NOT NULL,
  `Pays` text NOT NULL,
  `Sexe` text NOT NULL,
  `Region` text NOT NULL,
  `Commentaire` text NOT NULL,
  `ID` int(11) NOT NULL auto_increment,
  KEY `ID` (`ID`)
) ;
Table qui stocke les messages :
Sélectionnez
CREATE TABLE `messages` (
  `Message` text NOT NULL,
  `Date` text NOT NULL,
  `Expediteur` text NOT NULL,
  `ID` int(11) NOT NULL auto_increment,
  KEY `ID` (`ID`)
) ;

Il ne vous reste plus qu'à importer les deux tables dans la base que vous avez créée pour le chat. J'ai appelé cette base "chat" tout simplement.

II-A-2. Programme de test

Ce que j'appelle un programme de test est un programme permettant d'avoir un "aperçu" du résultat d'un script PHP, car à moins d'être très sûr de vous, vous n'allez pas uploader votre script directement dans votre site et le corriger puis le re-uploader à chaque fois ! Il vous faut donc un outil permettant de voir ce qu'un script PHP va donner sans avoir à le testé sur le serveur directement ! Si vous avez déjà un tel outil, tant mieux, sinon, je vous conseille fortement EasyPHP, qui est un pack bien pratique, le lien de téléchargement direct est celui-ci. Pour une présentation rapide d'EasyPHP, allez iciIntroduction à EasyPHP.

Il y a aussi WAMP ou XAMPP sous Linux, une fois l'installation terminée, nous pouvons passer à la suite !

II-A-3. Site Web

Si vous souhaitez mettre votre chat à disposition sur votre site (en admettant que vous soyez hébergé), il vous faut créer une base de données du nom de votre choix et importer les deux tables que je vous ai données auparavant. Il vous faut biensur pouvoir employer PHP, faîtes attention ! Car oui les hébergements sans PHP ça existe ! Mais rien ne vous empêche de faire ce script par pure curiosité intellectuelle, dans ce cas, vous pouvez utiliser EasyPHP(ou autre chose) pour créer une base de données sur votre ordinateur et tout réaliser chez vous !

II-A-4. Réaliser le script chez vous

Pour réaliser le script chez vous, EasyPHP est indispensable, téléchargez le puis allez dans administration(clique-droit sur l'icône puis dans le menu, clique sur administration). Ensuite cliquez sur Gestion BDD, là vous êtes dans PHPmyadmin, il vous suffit de créer une base de données puis d'importer les deux tables que je vous ai donnée. Puis vous exécuterez le script en passant par EasyPHP !

Voilà, c'est tout pour cette partie, rien de très dur pour l'instant, n'est-ce pas ? Maintenant on va s'attaquer a la structure du projet, si vous voulez bien !

II-B. Structure du projet

Dans cette partie nous allons donc établir, la structure de notre projet, car, vous vous en doutez surement, notre projet ne contiendra pas qu'un fichier :P. Et, une bonne habitude à prendre dans un projet d'envergure est de toujours passer par des étapes intermédiaires avant de coder comme nous le faisons ici !

Réfléchissons déjà aux besoins du script.

C'est un chat (non sérieux !). Cela doit donc être un espace fermé en quelque sorte !

Je vous explique :
  • Acceuil du chat (pour l'entrée du login) -> login.php
  • Page d'inscription -> inscription.php
  • Pour la confirmation d'inscription -> confirmation.php
  • Et enfin le chat en lui même -> chat.php

Il ne faut pas oublier de prévoir la structure de la base de donnée, bien que je vous l'ai donnée toute faîte, il faut que vous sachiez tout de même de quoi il convient !

Il y a deux tables :
  • inscrit ;
  • message.

La première contiendra les données des personnes inscrites, la seconde table stockera les messages et quelques informations les concernant, regardons ces tables de plus près !

La table inscrit :
  • Le champ Nom sert à stocker le nom du membre ;
  • Le champ Prenom sert à stocker le prénom du membre ;
  • Le champ Pseudo sert à stocker le pseudo auquel est attribué le membre ;
  • Le champ Mot_de_passe sert à stocker le mot de passe (crypté) ;
  • Le champ Adresse permet de stocker l'adresse e-mail du membre ;
  • Le champ Date stocke la date de naissance du menbre ;
  • Le champ Pays contient le pays dans lequel habite le membre ;
  • Le champ Sexe stocke le sexe du menbre (masculin ou féminin) ;
  • Le champ Région stocke la région dans laquelle le menbre habite ;
  • Le champ Commentaire permet de stocker un commentaire étant adressé au gestionnaire du chat(vous pour ceux qui n'avaient pas compris !), vous pourrez donc lire les commentaires en accédant à la base de donnée !
  • Le champ ID numérote les inscrits, nous n'interviendrons pas sur le champ ID car il est en auto_increment.
La table message :
  • Le champ Message sert à contenir le message en lui-même ;
  • Le champ Date contient la date d'envoie du message ;
  • Le champ Expéditeur sert a contenir le pseudo de l'éxpéditeur du message ;
  • Le champ ID numérote les messages (il est en auto_increment).

C'est tout pour la structure du projet. Maintenant, nous allons établir la logique du programme.

II-C. Logique du projet

Il est temps pour vous (et pour moi) d'établir la logique du projet !

Réfléchissons ! Il faut d'abord cerner le déroulement exacte d'une "exécution" du script, c'est ce que nous allons faire dans cette partie !

Exemple d'exécution :
  1. Clique sur le lien ;
  2. Ouverture de la page login.php ;
  3. L'utilisateur est inscrit -> il rentre son login et son passe, vérificaton puis accès à la page chat.php ;
  4. L'utilisateur n'est pas inscrit, il clique sur le lien pour s'inscrire(page inscription.php), puis il confirme (page confirmation.php), un message lui est envoyé avec le lien vers l'enregistrement de son profil.

Cela ne doit pas être très clair dans votre esprit, c'est pour ça que j'ai réalisé ce schéma (moche je vous l'accord) qui a le mérite d'être clair :

Image non disponible

C'est tout de suite plus clair avec un shcéma n'est-ce pas ? Cela ne devrait pas poser de problème particulier, si ?

Vous deviez même déjà avoir des idées de code plein la tête, pas vrai ? Mais ne tombez pas dans le piège qui consiste à commencer à coder sans finir les préliminaires obligatoires ! Alors attention, retenenz votre souris et votre clavier qui vous titille et lisez encore là dernière partie avant le code !

Nous allons maintenant voir la conception visuelle de la chose, ou plutôt, le résultat attendu !

II-D. Premiers résultats

Bon, dernière ligne droite avant d'attaquer !

Nous (enfin vous) devons voir quel résultat ce chat va donner !

Donc voici quelques images :

Image non disponible
login.php
Image non disponible
inscription.php
Image non disponible
confirmation.php
Image non disponible
chat.php

Quelques commentaires suivent sûrement ces images, non ?

Alors déjà, vous remarquerez le design (très pauvre), eh bien, autant vous prévenir, ce n'est pas avec moi que vous apprendrez à faire des beaux designs (je suis complétement nul :(), vous agrémenterez le tout à votre sauce !

Puis, vous remarquerez une gestion des erreurs lors de l'inscription (dans l'exemple, j'ai envoyé le formulaire sans remplir aucun champ)et une proposition pour recommencer l'inscription(vous pourrez éventuellement rajouter un lien vers la page d'acceuil de votre site) !

Ensuite, vous pouvez enfin vous faire une idée visuelle de la chose, ce qui peut être utile pour ne pas commencer à coder des lignes de codes comme un bourrin sans vraiment savoir ce que l'on fait ! Je le répète (encore !), ici je me contenterai du minimum du script. En pratique, il serait bien de rajouter un arrière plan ou d'améliorer ça. Dans ce tutoriel, nous explorerons la partie technique uniquement !

Et voilà, vous touchez à la fin de la partie I, autant vous prévenir, dans la partie deux, on commence à coder et pas qu'un petit peu ! Alors accrochez vous bien !

III. Du code, du code et encore du code...

III-A. Pas à pas !

Voici enfin venu le temps du code ! Nous allons donc y aller pas à pas, en suivant le schéma logique du programme, nous allons donc commencer par créer les ficheirs un par un puis nous les retoucherons pour les adaptés les uns aux autres, si vous voulez bien, nous allons commencer !

III-A-1. login.php

C'est par ce fichier que nous commencerons, cela semble logique étant donné que ce sera la page d'accueil en quelque sorte de notre chat !

Il faut donc prévoir deux zones de texte :
  • Une pour le pseudo ;
  • Une pour le mot de passe.

Le tout doit être dans un formulaire, avec un bouton (type="submit") pour envoyer le formulaire. Nous devons aussi prévoir la possibilitée que l'utilisateur n'est pas inscrit, pour cela, il faudrait un lien vers la page d'inscription du type : "Tu n'es pas encore inscrit !? Cliques ici ;)". Nous avons fait le tour des besoins de notre page, donc on va pouvoir commencer !

Je vous propose de commencer par le plus simple, le HTML brut !

C'est simple :

Un formulaire :
Sélectionnez
<form method="post" action="chat.php">
</form>
On insère à l'intérieur les entrées :
  • Une de type text ;
  • L'autre de type password.
 
Sélectionnez
<label>Entre ton pseudo : </label>
<input type="text"/>
</p>
<p>
<label>Entre ton mot de passe : </label>
<input type="password"/>
</p>
Un bouton (submit) pour confirmer :
Sélectionnez
<input type="submit"/>

Une fois cela fait, on peux boucler le formulaire, un petit résumé ?

 
Sélectionnez
<form method="post">
<p>
<strong>Entrez dans le chat :</strong><br>
<br>
<label>Entre ton pseudo : 
<input type="text"/></label>
</p>
<p>
<label>Entre ton mot de passe : 
<input type="password"/></label>
</p>
<p>
<input type="submit"/>
</p>
</form>

Bon, comme prévu, au niveau interface, c'est pas ça, mais je vous avais prévenu, nous n'étudierons pas le design, à vous d'améliorer le tout à votre sauce ! Si vous voulez bien, nous allons passer à la suite ! On rajoute le petit texte avec un lien :

 
Sélectionnez
<p>
<a href="inscription.php">Tu n'es pas encore inscrit !? Clique vite ici ;) !</a>
</p>

Voilà, maintenant, je vous propose de commencer par l'inscription (inscription.php).

Pour commencer, on va demander le nom et le prénom (le tout dans un formulaire bien sûr) :

 
Sélectionnez
<label>Entre ton nom : 
<input type="text" name="nom"/></label>
</p>
<p>
<label>Entre ton prénom : 
<input type="text" name="prenom"/></label>
</p>

Ensuite, l'utilisateur doit se définir un pseudo et un mot de passe (qu'il doit confirmer une deuxième fois !) :

 
Sélectionnez
<label>Entre ton futur pseudo : 
<input type="text"/></label>
</p><p>
<label>Entre ton futur mot de passe : 
<input type="password" name="pass1"/></label>
<label>Confirme ton mot de passe : 
<input type="password" name="pass2"/></label>
</p>

Note : Remarquez que pour le mot de passe et sa confirmation, j'ai utilisé une entrée de type password, et non de type text, pour que ce que tape l'utilisateur reste confidentiel (sous forme d'étoiles) !

Il faut aussi l'adresse mail de la personne, avec quelque chose comme :

 
Sélectionnez
<p>
<label>Entre ton adresse e-mail (elle doit être valide pour confirmer ton inscription !) : 
<input type="text" name="adresse"/></label>
</p>
Voilà les informations obligatoires, mais il en manque, mais les autres sont un peu plus personelles, je vous propose donc de séparer le truc en deux choses :
  • Informations obligatoires (mot de passe, pseudo, e-mail, nom, prénom) ;
  • Informations facultatives (tout le reste).
Pour les informations facultatives, je vous propose :
  • Date de naissance (le champ Date de la table inscrit) ;
  • Pays (champ Pays de la table inscrit) ;
  • Sexe (champ Sexe de la table inscrit) ;
  • Région (champ Region de la table inscrit) ;
  • Commentaires personels (champ Commentaire de la table inscrit).
Donc pour résumer, voilà le formulaire d'inscription :
Sélectionnez
<body>
<p>
<u>Informations obligatoires :</u>
</p>
<form method="post">
<p>
<label>Entre ton nom : 
<input type="text" name="nom"/></label>
</p>
<p>
<label>Entre ton prénom : 
<input type="text" name="prenom"/></label>
</p>
<p>
<label>Entre ton futur pseudo : 
<input type="text"/></label>
</p><p>
<label>Entre ton futur mot de passe : 
<input type="password" name="pass1"/></label>
<label>Confirme ton mot de passe : 
<input type="password" name="pass2"/></label>
</p>
<p>
<label>Entre ton adresse e-mail (elle doit être valide pour confirmer ton inscription !) : 
<input type="text" name="adresse"/></label>
</p>
<p>
<u>Informations facultatives :</u>
<br><br>
<p>
<label>Quelle est ta date de naissance ?
<select name="jour">
<option value="j1">01</option>
<option value="j2">02</option>
<option value="j3">03</option>
<option value="j4">04</option>
<option value="j5">05</option>
<option value="j6">06</option>
<option value="j7">07</option>
<option value="j8">08</option>
<option value="j9">09</option>
<option value="j10">10</option>
<option value="j11">11</option>
<option value="j12">12</option>
<option value="j13">13</option>
<option value="j14">14</option>
<option value="j15">15</option>
<option value="j16">16</option>
<option value="j17">17</option>
<option value="j18">18</option>
<option value="j19">19</option>
<option value="j20">20</option>
<option value="j21">21</option>
<option value="j22">22</option>
<option value="j23">23</option>
<option value="j24">24</option>
<option value="j25">25</option>
<option value="j26">26</option>
<option value="j27">27</option>
<option value="j28">28</option>
<option value="j29">29</option>
<option value="j30">30</option>
<option value="j31">31</option>
</select></label>
<select name="mois">
<option value="janvier">Janvier</option>
<option value="fevrier">Février</option>
<option value="mars">Mars</option>
<option value="avril">Avril</option>
<option value="mai">Mai</option>
<option value="juin">Juin</option>
<option value="juillet">Juillet</option>
<option value="aout">Août</option>
<option value="septembre">Septembre</option>
<option value="octobre">Octobre</option>
<option value="novembre">Novembre</option>
<option value="decembre">Decembre</option>
</select>
<input type="text" name="annee"/>
</p>
<label>Dans quel pays habitez-vous ?
<select name="pays">
<option value="canada">Canada</option>
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="autre">Autre...</option>
</select></label>
<p>
Quel est votre sexe ?
<br>
<label><input type="radio" name="sexe" value="masculin" /> Masculin</label>
<br>
<label><input type="radio" name="sexe" value="feminin" /> Feminin</label>
<br>
<p>
<label>Dans quel région de votre pays habitez-vous ?<br>
<input type="text" name="region"></input></label></p>
</p>
<p>
<textarea name="message" rows="8" cols="45">Tapez un commentaire personel dont vous voudriez nous faire part ici...</textarea>
</p>
<p>
<input type="submit" text="Valider l'inscription"/>
</form>
</body>

Nous en sommes au point pour l'interface, maintenant il faudrait commencer à penser à l'action de nos formulaires (action symbolisée par l'attribut action="" dans la balise <form>) !

Pour cela, on va revoir la structure et la logique des fichiers de manière plus détaillée :

Image non disponible
login.php

On a donc l'interface de login.php, il nous faut préparer le reste. Si vous êtes d'accord, en avant !

Il faut donc déterminer l'action de nos formulaires. Pour login.php, le plus simple serait qu'il pointe sur lui même donc on rajoute l'attribut action="login.php" dans la balise <form>, pour inscription.php, la balise action du formulaire contiendra confirmation.php, qui vérifiera que tous les champs obligatoires sont remplis, et le tout se terminera en envoyant un mail à l'adresse donnée, ce mail contiendra un lien vers la page qui activera le compte, en créant une entrée dans la baser de donnée.

Il nous faut rajouter du code PHP dans notre login.php, l'objectif de ce code sera :
  • Lire les données entrés dans les champs ;
  • Tenter de lire l'entrée correspondante ;
  • Si il y a une erreur, alors on appel la fonction Error() qui affiche un lien vers la procédure à suivre si on a oublié son mot de passe.
Bon si, on codait un peu tout ça ! On commence par login.php :
Sélectionnez
<?php
// On se connecte à mysql
mysql_connect("localhost", "root", "");
// On choisi la base de donnée (nommée chat)
mysql_select_db("chat");
// a présent on vérifie l'éxistence des variables
if(isset($_POST['pseudo']) && isset($_POST['password'])
{
    // On tente de sélectionner une entrée dans la base de données qui y correspond
    $reponse = mysql_query('SELECT FROM Inscrit WHERE pseudo = '.mysql_real_escape_string($_POST['pseudo']).', password = '.mysql_real_escape_string($_POST['password'])) or die(error());
}
?>
}

J'ai implicitement défini les noms des input du formulaire, vous aviez compris mais je le dis quand même, le nom correspondant au champ de texte pour le pseudo est pseudo, et le nom du champ de texte pour le mot de passe est password.

Voilà c'est dit, maintenant continuons, il nous faut encore écrire la fonction error :
Sélectionnez
function error()
{
    ?>
    <font color="red">Error : Vous n'êtes pas dans la base de donnée.</font> Cliquez<a href="login.php">ici</a>. <br/>Pour revenir a la page d'accueil.
    <?php
}

login.php me semble prêt, continuons.

Nous allons coder confirmation.php à présent, pour commencer il faut vérifier que toutes les variables obligatoires existent, ensuite, envoyer un mail a l'adresse donné contenant dans ce mail un texte explicatif, puis on ajoute l'entrée dans la base de données. Aucun obstacle particulier, pas la peine que je vous fasse un dessin. S'il y a des erreurs, on explique quel champs n'a pas été correctement remplis et on donne un lien vers inscription.php. Revenons à login.php, on organise la réponse avec mysql_fetch_array puis on donne un lien vers chat.php. Définissons le chat (donc le fichier chat.php) en lui-même à présent :

Lorsque l'on rentre dans le chat, on a un textarea qui contient le message que l'on veut poster, je vous donne le système :
  1. On envoie le message en appuyant sur le bouton de confirmation ;
  2. On entre le message et d'autres informations (notamment l'heure) dans la base de données puis on lit et on écrit les 20 derniers messages à l'écran.

Je vous souhaite bonne chance pour la suite, ça serait pas marrant si je vous donnais la solution en entière ! Faîtes tout de même l'effort de lire la page suivante avant de commencer à coder comme un bourrin.

III-A-2. Conseils

Bon, avant que vous vous lanciez tête baissée dans le code, il est de mon devoir de vous donner quelques précisions/conseils/astuces.

Pour commencer, lorsque vous devez créer un fichier, passez toujours pas plusieurs étapes intermédiaires :
  • Définitions des objectifs ;
  • Pseudo-code ;
  • Et ensuite on code, seuleument ensuite !

Ensuite suivez attentivement la logique du programme, pour coder.

Essayez de rester concentrer sans vous dispersé sur les 500 améliorations et gadgets que vous pourriez ajouter.

N'hésitez pas à bien relire les tutoriels et à y passer du temps, Bonne chance !

III-A-3. Améliorations possibles

Bon, rien que pour le plaisir, je vous fais une petite liste des améliorations possibles :
  • Utiliser GD pour charger un avatar ;
  • Envoyer un mail avec un lien d'activation du compte ;
  • Utiliser une feuille de style pour décorer le Chat ;
  • Permettre aux menbres d'entamer des discussions privées ;
  • Et bien d'autres encore !

Les possibilités sont quasiment infinies !

Bonne chance et bon développement !

IV. Conclusion

Après ce petit tutoriel, ne m'en vueillez pas de ne pas donner les sources en entier, mais si je me contentais de vous donner les sources toutes cuites dans la bouche, je m'éloignerais de l'objectif premier de mon tutoriel : expliquer comment réaliser un chat mais en suivant une méthode de développement qui peut s'adapter à de nombreux projets intéressants.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2007 Shugo78. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.