Developpez.com - PHP
X

Choisissez d'abord la catégorieensuite la rubrique :


Réaliser un chat en PHP

Par Guillaume Rossolini (Tutoriels Web)
 

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.

I. Introduction
I-A. Remerciements
I-B. Prérequis
II. Préparation
II-A. Environnement
II-A-1. Base de données
II-A-2. Programme de test
II-A-3. Site Web
II-A-4. Réaliser le script chez vous
II-B. Structure du projet
II-C. Logique du projet
II-D. Premiers résultats
III. Du code, du code et encore du code...
III-A. Pas à pas !
III-A-1. login.php
III-A-2. Conseils
III-A-3. Améliorations possibles
IV. Conclusion


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 :

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 :
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 :
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, fr allez ici.

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 !

info 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 :

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 :

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 :
La table message :

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 :


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 :

login.php

inscription.php

confirmation.php

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 :
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 :
<form method="post" action="chat.php">
</form>
On insère à l'intérieur les entrées :
<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 :
<input type="submit"/>

Une fois cela fait, on peux boucler le formulaire, un petit résumé ?
<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 :
<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) :
<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 !) :
<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 :
<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 :
Pour les informations facultatives, je vous propose :
Donc pour résumer, voilà le formulaire d'inscription :
<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 :

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 :
Bon si, on codait un peu tout ça ! On commence par login.php :
<?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 :
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 :

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 :

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.



Valid XHTML 1.1!Valid CSS!

Copyright © 2007 Shugo78. Aucune reproduction, même partielle, ne peut être faite de ce site et 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.

Contacter le responsable de la rubrique PHP