Un chat en PHP/AJAX

Introduction du cours

Salut à tous, braves citoyens !

Si vous êtes ici, c'est pour une bonne raison, me trompé-je ? Une seule et unique raison. Vous avez décidé de réaliser un chat pour votre site internet ! Le moins que je puisse dire c'est que vous êtes sur la bonne page. :D

Mais un chat, ça peut faire peur. Et oui, car dans la plupart des cas, sa réalisation requiert des connaissances dans plusieurs domaines. Ceux que nous aborderons dans ce tutoriel seront simplement le PHP et l'AJAX (Javascript). Mais aussi l'HTML/CSS.

Bon, et bien armez-vous de courage et si vous désirez toujours continuer, je vous invite à poursuivre la lecture de ce tutoriel qui s'annonce fort en rebondissements !

Que la force soit avec vous, mes amis.

Présentation

Nous nous apprêtons à commencer à programmer, mais avant cela, une petite présentation s'impose. Et c'est ce que je vais faire.

Alors voilà, nous y sommes. Tout d'abord, je vais vous expliquer ce qu'est un chat. Nous verrons comment réaliser un chat qui affiche les x derniers messages envoyés, du plus récent, au plus ancien. Je vous promets que ce sera très simple. La partie la plus compliquée pour les javascrophobes sera de réaliser la partie dynamique de ce chat. En effet, nous n'utiliserons aucune "frame" (fenêtre intégrée dans une autre fenêtre) dans notre page HTML et l'actualisation des messages se fera uniquement en AJAX.

Comment dis-tu ? Ajax ?

Oui, j'ai bien dit Ajax. Et je vais ressortir une vieille vanne : pas la lessive, hein ? :-° Pour comprendre l'Ajax si ce terme vous est inconnu, STOP. Allez directement ici :
AJAX et l'échange de données en JavaScript
Ce tutoriel est très explicite et c'est celui dont je me suis servi principalement pour connaître les fonctionnalités de cette merveille.

Fonctionnalités

Venons-en aux fonctionnalités de notre chat. Elles seront très simples. Notre chat disposera des messages, d'une liste de connectés et enfin : une petite annonce que vous pourrez modifier qui s'actualisera en direct en haut dans le chat.
La fonction de bannissement est à mon goût, inutile puisqu'il est extrêmement facile de contourner un bannissement. Je vous laisserais donc vous en occuper si vous le souhaitez. C'est néanmoins une fonction très intéressante pour les sites disposant d'un espace membre.

Pour notre chat, l'utilisateur arrivera sur une page où on lui demandera de saisir un pseudo. Il sera inscrit dans la base de données. Cette insertion servira de référence pour les autres tables. Le pseudo pourra donc être affiché devant chaque message correspondant. Deux sessions seront créées : une session id qui contiendra l'ID du membre et une session login pour le pseudo. Si l'une des sessions existe, alors on affiche le chat.

Les pré-requis

• Coder en HTML/CSS - HTML5/CSS3

• Savoir programmer en PHP - PHP débutant

• Connaître les bases du SQL, ici MySQL - Langage SQL

• Il est préférable d'avoir déjà utilisé la librairie PDO en PHP. Le cours sur le langage SQL a été mis à jour récemment pour apprendre à l'utiliser. Si vous ne connaissez pas, je vous conseille de vous mettre à jour.

• Avoir de bonnes bases en Javascript - Javascript

• S'y connaître un minimum dans le domaine de l'Ajax, ce dont je ne doute pas après le lien que je vous ai donné... n'est-ce pas ? (bande de coquins !)

Bases de données et code HTML

Je pense qu'il est grand temps de commencer à expliquer les bases de notre chat. Commençons... par le commencement.

Les tables SQL

Nous allons donc commencer par créer les tables nécessaires au bon fonctionnement du chat. En effet, nous ne fonctionnerons pas par un système de fichiers pour écrire les messages, mais par MySQL que vous connaissez tous ! Je trouve ce système plus simple à manipuler et modifier. Il vous sera donc possible d'y rajouter les fonctionnalités que vous souhaitez très facilement.

Pour nos tables, nous aurons besoin d'une table pour les membres connectés, donc avec la dernière date de connexion, d'une table avec les messages et enfin, d'une table contenant l'annonce apparaissant en haut du chat !

Voilà le code SQL pour la création de nos tables avec nos meilleures explications :
Les tables :

• chat_messages > La table contenant l'ensemble des messages

• chat_online > Table contenant les membres connectés au chat

• chat_annonce > Contient l'annonce visible en haut du chat

• chat_accounts > Table des membres qui se sont connectés

-- -- Structure de la table `chat_messages` -- - message_id > L'ID du message -- - message_user > L'ID de l'utilisateur -- - message_time > La date d'envoi -- - message_text > Le contenu du message -- CREATE TABLE IF NOT EXISTS `chat_messages` ( `message_id` int(11) NOT NULL auto_increment, `message_user` int(11) NOT NULL, `message_time` bigint(20) NOT NULL, `message_text` varchar(255) collate latin1_german1_ci NOT NULL, PRIMARY KEY (`message_id`) ) ENGINE=MyISAM ; -- -- Structure de la table `chat_online` -- - online_id > L'ID du membre connecte -- - online_ip > Son adresse IP -- - online_user > L'ID de l'utilisateur -- - online_status > Pour informer les membres (ex : en ligne, absent, occupe) -- - online_time > Pour indiquer la date de derniere actualisation -- CREATE TABLE IF NOT EXISTS `chat_online` ( `online_id` int(11) NOT NULL auto_increment, `online_ip` varchar(100) collate latin1_german1_ci NOT NULL, `online_user` int(11) NOT NULL, `online_status` enum('0','1','2') collate latin1_german1_ci NOT NULL, `online_time` bigint(21) NOT NULL, PRIMARY KEY (`online_id`) ) ENGINE=MyISAM ; -- -- Structure de la table `chat_annonce` -- - annonce_id > L'ID de l'annonce -- - annonce_text > Le contenu de l'annonce -- CREATE TABLE IF NOT EXISTS `chat_annonce` ( `annonce_id` int(11) NOT NULL auto_increment, `annonce_text` varchar(300) collate latin1_german1_ci NOT NULL, PRIMARY KEY (`annonce_id`) ) ENGINE=MyISAM ; -- -- Structure de la table `chat_accounts` -- - account_id > L'ID du membre -- - account_login > Le pseudo du membre entre 2 et 30 caractères -- - account_pass > Le mot de passe -- CREATE TABLE IF NOT EXISTS `chat_accounts` ( `account_id` int(11) NOT NULL auto_increment, `account_login` varchar(30) collate latin1_german1_ci NOT NULL, `account_pass` varchar(255) collate latin1_german1_ci NOT NULL, PRIMARY KEY (`account_id`) ) ENGINE=MyISAM ;

Et voilà ! C'est terminé ! Les explications sont suffisantes j'espère. Vous êtes des professionnels ! Je suis sûr que vous n'en aviez même pas besoin. :D Mais bon, vous voyez ? C'était très simple ! Maintenant, place au code HTML de la page. Nous y verrons aussi l'interface de notre page codée en CSS. Un aperçu du chat est donné plus bas.

Code HTML/CSS

Vous voulez sans doute avoir un aperçu de ce à quoi ressemblera notre page de chat ? Non ? Et bien passez votre chemin. En cas contraire, cliquez sur l'image ci-dessous pour voir un exemple de la page (le lien vous mènera vers la page de test que j'ai créée) :

Sans plus attendre, c'est parti ! Celui qui me reproduit ce design au pixel prêt remporte le prix du plus courageux. Bon sérieusement, voici les deux pages dont nous aurons besoin actuellement. Le fichier chat.js inclut au début de la page chat.php sera créé dans un chapitre suivant.

La page HTML

Décortiquons notre code HTML (la page est néanmoins enregistrée en .php pour des ajouts PHP sur celle-ci plus tard).

Entre les balises <head>, effectuons une mini-requête sur les fichiers dont nous aurons besoin (je vous laisse le choix pour le titre, j'ai mis "Mon super chat" moi) :

<link rel="stylesheet" type="text/css" href="stylechat.css"> <script src="chat.js"></script>

Ensuite, nous devons afficher le champ de sélection du statut :

<div id="container"> <h1>Mon super chat</h1> <!-- Statut //////////////////////////////////////////////////////// --> <table class="status"><tr> <td> <span id="statusResponse"></span> <select name="status" id="status" style="width:200px;" onchange="setStatus(this)"> <option value="0">Absent</option> <option value="1">Occup&eacute;</option> <option value="2" selected>En ligne</option> </select> </td> </tr></table>

Ensuite, nous incluons la zone où les messages seront affichés et les membres connectés. Veuillez noter que l'image ajax-loader.gif peut être modifiée. Je vous donne donc un bon site d'images de préchargements : Ajaxload. Celle utilisée actuellement est la suivante :

<table class="chat"><tr> <!-- zone des messages --> <td valign="top" id="text-td"> <div id="annonce"></div> <div id="text"> <div id="loading"> <center> <span class="info" id="info">Chargement du chat en cours...</span><br /> <img src="ajax-loader.gif" alt="patientez..."> </center> </div> </div> </td> <!-- colonne avec les membres connectés au chat --> <td valign="top" id="users-td"><div id="users">Chargement</div></td> </tr></table>

Enfin, nous affichons la barre contenant la zone de texte pour taper le message et le bouton :

<!-- Zone de texte //////////////////////////////////////////////////////// --> <a name="post"></a> <table class="post_message"><tr> <td> <form action="" method="" onsubmit="envoyer(); return false;"> <input type="text" id="message" maxlength="255" /> <input type="button" onclick="envoyer()" value="Envoyer" id="post" /> </form> <div id="responsePost" style="display:none"></div> </td> </tr></table> </div> Le fichier CSS

Et le code du fichier CSS pour appliquer un joli design à notre chat. Libre à vous de modifier les balise <table> présentes dans le code HTML, donc à aussi adapter dans le code CSS présent ci-dessous. La balise <table> a été adoptée pour plus de facilité. En effet, en utilisant cette balise, TOUS les navigateurs ont le même comportement.

body { background: #d2d2d2; } /* Pour que les liens ne soient pas soulignés */ a { text-decoration: none; } img { vertical-align: middle; } /* Conteneur principal des blocs de la page */ #container { width: 80%; margin: 50px auto; padding: 2px 20px 20px 20px; background: #fff; } /* Bloc contenant la zone de texte et bouton */ .post_message { width: 95%; margin: auto; border: 1px solid #d2d2d2; background: #f8fafd; padding: 3px; } /* Zone de texte */ .post_message #message { width: 80%; } /* Bouton d'envoi */ .post_message #post { width: 18%; } /* La zone où sont affichés les messages et utilisateurs connectés */ .chat { width: 95%; margin: 10px auto; border: 1px solid #d2d2d2; padding: 0px; } /* Bloc de chargement */ .chat #loading { margin-top: 50px; } /* Annonce */ .chat #annonce { background: #f8fafd; margin: -6px -7px 5px -7px; padding: 5px; height:20px; box-shadow: 8px 8px 12px #aaa; -webkit-box-shadow: 0px 8px 15px #aaa; } /* Zone des messages */ .chat #text-td { margin: 0px; padding: 5px; width: 80%; background: #fff; } /* Zone des utilisateurs connectés */ .chat #users-td, .chat #users-chat-td { margin: 0px; padding: 5px; width: 20%; background: #ddd; } .chat #text, .chat #users, .chat #users-chat { height:500px; overflow-y: auto; } /* Modification du statut */ .status { width: 95%; border: none; background: #fff; margin: auto; text-align: right; } .info { color: green; } Attaquons le PHP

Nous y voilà ! Au cœur de l'action. Nous allons enfin pouvoir commencer à programmer. Mais quel langage utiliser ? Le titre le dit : nous nous attaquons au PHP. Vous allez devoir vous atteler à un petit exercice qui réunira des compétences très pointues. :-° En fait ce sera assez simple.
Dans tous les cas, comme d'habitude le code se trouve plus bas dans la page.

Création des fonctions

Ici, vous allez devoir créer une page de fonctions qui nous servira tout au long de l'aventure. Quels genre de fonctions ?

• La première, la plus logique, la fonction de connexion à la base de données pour ne pas avoir à la réécrire sur chaque page.

• La seconde permettra de vérifier si l'utilisateur est connecté. Nous aurons donc une variable session <?php $_SESSION['id'] ?> contenant le nom d'utilisateur du membre.

• Enfin, la dernière fonction détectera les liens et les transformera en URL cliquables.

Vous devrez enregistrer ce fichier sous le nom de functions.php dans un dossier que vous nommerez "phpscripts". Ce dossier contiendra l'ensemble des fichiers de codes PHP que nous utiliserons : donc le fichier de fonctions et les fichiers d'interactions avec la base de données (pour récupérer les messages, poster un message etc.).

Vous n'avez plus qu'à retrousser vos manches et commencer à programmer. Un LONG petit travail vous attend. Je resterai à côté. Quand vous avez fini faites-moi signe.

Quoi ? Déjà ???

Et bien on peut dire que vous n'avez pas chômé mes enfants. :D Vous êtes allé plus vite que moi pour coder mes propres fonctions. Mais à côté de grands pros comme vous, j'ai désormais peur de les dévoiler.

Allez... je me lance quand même !
Voici mes fonctions contenues dans la page functions.php (j'ai pour habitude d'appeler mes pages en anglais).

Connexion à la base de données

La première fonction s'intitule db_connect(). Elle permettra de se connecter à la base de données, via l'utilisation de la librairie PDO. Pour la rendre utilisable, remplacez seulement les informations contenues dans INFORMATIONS DE CONNEXION par vos identifiants de connexion.

<?php function db_connect() { // définition des variables de connexion à la base de données try { $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION; // INFORMATIONS DE CONNEXION $host = 'nom d\' hote'; $dbname = 'nom de la base'; $user = 'nom d\'utilisateur'; $password = 'mot de passe'; // FIN DES DONNEES $db = new PDO('mysql:host='.$host.';dbname='.$dbname.'', $user, $password, $pdo_options); return $db; } catch (Exception $e) { die('Erreur de connexion : ' . $e->getMessage()); } } ?> Test de la connexion de l'utilisateur

La seconde fonction sera nommée user_verified(). Elle vérifiera que l'utilisateur est connecté et renvoie true si la session 'id' existe, false en cas contraire.