Professional Documents
Culture Documents
Par Codel96
www.openclassrooms.com
Licence Creative Commons 6 2.0
Dernire mise jour le 6/05/2012
Sommaire
2 Sommaire ...........................................................................................................................................
3 Un chat en PHP/AJAX .......................................................................................................................
3 Prsentation ......................................................................................................................................................................
3 Fonctionnalits ............................................................................................................................................................................................................
4 Les pr-requis .............................................................................................................................................................................................................
4 Bases de donnes et code HTML .....................................................................................................................................
4 Les tables SQL ............................................................................................................................................................................................................
5 Code HTML/CSS .........................................................................................................................................................................................................
8 Attaquons le PHP ..............................................................................................................................................................
8 Cration des fonctions ................................................................................................................................................................................................
10 Pages appeles en Ajax ............................................................................................................................................................................................
18 Adaptation du fichier chat.php... a faisait longtemps ! .............................................................................................................................................
20 Codons Javascript ! .........................................................................................................................................................
20 Utilisation d'une librairie ............................................................................................................................................................................................
21 Mise en place des fonctions ......................................................................................................................................................................................
26 Annexes ..........................................................................................................................................................................
26 Fonctions en plus ......................................................................................................................................................................................................
29 Amliorations ............................................................................................................................................................................................................
30 Partager .....................................................................................................................................................................................................................
2/31
www.openclassrooms.com
Un chat en PHP/AJAX
Par Codel96
Mise jour : 06/05/2012
Difficult : Intermdiaire Dure d'tude : 1 heure
Salut tous, braves citoyens !
Si vous tes ici, c'est pour une bonne raison, me tromp-je ? Une seule et unique raison. Vous avez dcid de raliser un chat
pour votre site internet ! Le moins que je puisse dire c'est que vous tes sur la bonne page.
Mais un chat, a peut faire peur. Et oui, car dans la plupart des cas, sa ralisation 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 dsirez 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.
Sommaire du tutoriel :
Prsentation
Bases de donnes et code HTML
Attaquons le PHP
Codons Javascript !
Annexes
Prsentation
Nous nous apprtons commencer programmer, mais avant cela, une petite prsentation 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 raliser un chat qui
affiche les x derniers messages envoys, du plus rcent, au plus ancien. Je vous promets que ce sera trs simple. La partie la
plus complique pour les javascrophobes sera de raliser la partie dynamique de ce chat. En effet, nous n'utiliserons aucune
"frame" (fentre intgre dans une autre fentre) 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 donnes en JavaScript
Ce tutoriel est trs explicite et c'est celui dont je me suis servi principalement pour connatre les fonctionnalits de cette merveille.
Fonctionnalits
Venons-en aux fonctionnalits de notre chat. Elles seront trs simples. Notre chat disposera des messages, d'une liste de
connects 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 got, inutile puisqu'il est extrmement facile de contourner un bannissement. Je vous
Sommaire 3/31
www.openclassrooms.com
laisserais donc vous en occuper si vous le souhaitez. C'est nanmoins une fonction trs intressante 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
donnes. Cette insertion servira de rfrence pour les autres tables. Le pseudo pourra donc tre affich devant chaque message
correspondant. Deux sessions seront cres : 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 dbutant
Connatre les bases du SQL, ici MySQL - Langage SQL
Il est prfrable d'avoir dj utilis la librairie PDO en PHP. Le cours sur le langage SQL a t mis jour rcemment 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 connatre un minimum dans le domaine de l'Ajax, ce dont je ne doute pas aprs le lien que je vous ai donn... n'est-ce
pas ? (bande de coquins !)
Bases de donnes et code HTML
Je pense qu'il est grand temps de commencer expliquer les bases de notre chat. Commenons... par le commencement.
Les tables SQL
Nous allons donc commencer par crer les tables ncessaires au bon fonctionnement du chat. En effet, nous ne fonctionnerons
pas par un systme de fichiers pour crire les messages, mais par MySQL que vous connaissez tous ! Je trouve ce systme
plus simple manipuler et modifier. Il vous sera donc possible d'y rajouter les fonctionnalits que vous souhaitez trs facilement.
Pour nos tables, nous aurons besoin d'une table pour les membres connects, donc avec la dernire 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 cration de nos tables avec nos meilleures explications :
Les tables :
chat_messages > La table contenant l'ensemble des messages
chat_online > Table contenant les membres connects au chat
chat_annonce > Contient l'annonce visible en haut du chat
chat_accounts > Table des membres qui se sont connects
Secret (cliquez pour afficher)
Code : SQL
--
-- 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
Un chat en PHP/AJAX 4/31
www.openclassrooms.com
-- - 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 caractres
-- - 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'espre. Vous tes des professionnels ! Je suis sr que vous n'en
aviez mme pas besoin. Mais bon, vous voyez ? C'tait trs simple ! Maintenant, place au code HTML de la page. Nous y
verrons aussi l'interface de notre page code en CSS. Un aperu du chat est donn plus bas.
Code HTML/CSS
Vous voulez sans doute avoir un aperu 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 mnera vers la page de test que j'ai
cre) :
Sans plus attendre, c'est parti ! Celui qui me reproduit ce design au pixel prt remporte le prix du plus courageux. Bon
srieusement, voici les deux pages dont nous aurons besoin actuellement. Le fichier chat.js inclut au dbut de la page
chat.php sera cr dans un chapitre suivant.
La page HTML
Dcortiquons notre code HTML (la page est nanmoins enregistre en .php pour des ajouts PHP sur celle-ci plus tard).
Un chat en PHP/AJAX 5/31
www.openclassrooms.com
Entre les balises <head>, effectuons une mini-requte sur les fichiers dont nous aurons besoin (je vous laisse le choix pour le
titre, j'ai mis "Mon super chat" moi) :
Code : HTML
<link rel="stylesheet" type="text/css" href="stylechat.css">
<script src="chat.js"></script>
Ensuite, nous devons afficher le champ de slection du statut :
Code : HTML
<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é</option>
<option value="2" selected>En ligne</option>
</select>
</td>
</tr></table>
Ensuite, nous incluons la zone o les messages seront affichs et les membres connects. Veuillez noter que l'image ajax-
loader.gif peut tre modifie. Je vous donne donc un bon site d'images de prchargements : Ajaxload. Celle utilise
actuellement est la suivante :
Code : HTML
<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 connects 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 :
Code : PHP
<!-- Zone de texte
//////////////////////////////////////////////////////// -->
<a name="post"></a>
<table class="post_message"><tr>
Un chat en PHP/AJAX 6/31
www.openclassrooms.com
<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> prsentes dans
le code HTML, donc aussi adapter dans le code CSS prsent ci-dessous. La balise <table> a t adopte pour plus de
facilit. En effet, en utilisant cette balise, TOUS les navigateurs ont le mme comportement.
Secret (cliquez pour afficher)
Code : CSS - stylechat.css
body {
background: #d2d2d2;
}
/* Pour que les liens ne soient pas souligns */
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 affichs les messages
et utilisateurs connects */
.chat {
width: 95%;
margin: 10px auto;
border: 1px solid #d2d2d2;
padding: 0px;
}
/* Bloc de chargement */
.chat #loading {
margin-top: 50px;
Un chat en PHP/AJAX 7/31
www.openclassrooms.com
}
/* 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 connects */
.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 cur 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 runira des comptences trs pointues.
En fait ce sera assez simple.
Dans tous les cas, comme d'habitude le code se trouve plus bas dans la page.
Cration des fonctions
Ici, vous allez devoir crer une page de fonctions qui nous servira tout au long de l'aventure. Quels genre de fonctions ?
La premire, la plus logique, la fonction de connexion la base de donnes pour ne pas avoir la rcrire sur chaque
page.
La seconde permettra de vrifier si l'utilisateur est connect. Nous aurons donc une variable session <?php
$_SESSION['id'] ?> contenant le nom d'utilisateur du membre.
Enfin, la dernire fonction dtectera 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 donnes (pour rcuprer les messages, poster un message etc.).
Un chat en PHP/AJAX 8/31
www.openclassrooms.com
Vous n'avez plus qu' retrousser vos manches et commencer programmer. Un LONG petit travail vous attend. Je resterai ct.
Quand vous avez fini faites-moi signe.
Quoi ? Dj ???
Et bien on peut dire que vous n'avez pas chm mes enfants. Vous tes all plus vite que moi pour coder mes propres
fonctions. Mais ct de grands pros comme vous, j'ai dsormais peur de les dvoiler.
Allez... je me lance quand mme !
Voici mes fonctions contenues dans la page functions.php (j'ai pour habitude d'appeler mes pages en anglais).
Connexion la base de donnes
La premire fonction s'intitule db_connect(). Elle permettra de se connecter la base de donnes, 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.
Code : PHP - functions.php
<?php
function db_connect() {
// dfinition des variables de connexion la base de donnes
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 nomme user_verified(). Elle vrifiera que l'utilisateur est connect et renvoie true si la session 'id'
existe, false en cas contraire.
Code : PHP
<?php
function user_verified() {
return isset($_SESSION['id']);
}
?>
Dtection des liens
Enfin, la dernire fonction, appele urllink() dtectera les liens dans les messages et les transformera en URLs cliquables.
Code : PHP
Un chat en PHP/AJAX 9/31
www.openclassrooms.com
<?php
function urllink($content='') {
$content = preg_replace('#(((https?://)|(w{3}\.))+[a-zA-Z0-
9&;\#\.\?=_/-]+\.([a-z]{2,4})([a-zA-Z0-9&;\#\.\?=_/-]+))#i', '<a
href="$0" target="_blank">$0</a>', $content);
// Si on capte un lien tel que www.test.com, il faut rajouter le
http://
if(preg_match('#<a href="www\.(.+)" target="_blank">(.+)<\/a>#i',
$content)) {
$content = preg_replace('#<a href="www\.(.+)"
target="_blank">(.+)<\/a>#i', '<a href="http://www.$1"
target="_blank">www.$1</a>', $content);
//preg_replace('#<a href="www\.(.+)">#i', '<a
href="http://$0">$0</a>', $content);
}
$content = stripslashes($content);
return $content;
}
?>
Pages appeles en Ajax
Avant de programmer notre fichier Javascript chat.js, nous allons coder les fonctions du chat. Elles seront au nombre de 4 :
Le fichier de rcupration des derniers messages affichant galement l'annonce en haut.
Celui recherchant les membres connects.
Un fichier permettant de poster son message.
Et enfin, un fichier permettant de modifier son statut.
Mthode d'appel
Pour appeler nos pages, nous utiliserons le format de donnes JSON. Pour ceux qui ont dj utilis le format XML, vous
comprendrez trs vite. Si vous n'avez jamais utilis le JSON, ce ne sera pas trs compliqu mais je vous conseille de vous rfrer
Google et sur notre fabuleux SdZ afin d'en savoir plus.
Nos pages PHP seront donc parses au format JSON. Petit rappel, il est de la forme :
Code : JavaScript
{
"variable-1" : "valeur",
"variable-2" : "valeur",
"variable-3" : {
"sous-variable-1" : "valeur",
"sous-variable-2" : "valeur",
"sous-variable-3" : "valeur"
}
}
Ce sera donc trs simple, je vous expliquerais au fur et mesure.
Rcupration des messages - get-message.php
Crez un nouveau fichier et enregistrez-le dans le dossier phpscripts cr prcdemment. Nommez-le : get-message.php. Ce
fichier se trouvera donc dans le mme dossier que functions.php.
Tout d'abord, tant donn que ce fichier sera appel via la mthode Ajax, il devra inclure functions.php et demander la
connexion la base de donnes. L'appel de la fonction session_start() permettra d'utiliser les sessions que nous crerons par la
suite.
Code : PHP
<?php
Un chat en PHP/AJAX 10/31
www.openclassrooms.com
session_start();
include('functions.php');
// Appel de la fonction de connexion la base de donnes
$db = db_connect();
?>
Ici, nous allons vrifier que le compte de l'utilisateur existe toujours. S'il a t supprim, il ne faut pas le laisser crire des
messages et on doit le rediriger aprs avoir supprim ses sessions. La redirection s'effectuera en Javascript. Le fichier renvoie 0
si le compte a t supprim et les messages dans le cas contraire.
Secret (cliquez pour afficher)
Code : PHP
<?php
/* On vrifie d'abord que le compte existe, si ce n'est pas le
cas,
on s'arrte, on supprime les sessions et on renvoie 0. */
$checkUser = $db->prepare("SELECT * FROM chat_accounts WHERE
account_id = :id AND account_login = :login ");
$checkUser->execute(array(
'id' => $_SESSION['id'],
'login' => $_SESSION['login']
));
$countUser = $checkUser->rowCount();
if($countUser == 0) {
// On indique qu'il y a une erreur de type unlog
// donc que l'utilisateur connect n'a pas de compte
$json['error'] = 'unlog';
// On supprime les sessions
unset($_SESSION['time']);
unset($_SESSION['id']);
unset($_SESSION['login']);
} else {
// On indique qu'il n'y a aucune erreur
$json['error'] = '0';
// ON PEUT CONTINUER !!!
}
$checkUser->closeCursor();
// Encodage de la variable tableau json et affichage
echo json_encode($json);
?>
Nous devons ensuite afficher l'annonce, situe en haut dans le chat. Extrmement simple, nous ne feront qu'afficher le message
prsent dans la table chat_annonce. Pour rappel, nous utilisons la librairie PDO pour effectuer des interactions avec la base de
donnes. Les autres codes qui vont suivre devront se trouver la place du commentaire "ON PEUT CONTINUER !!!" du code
prcdent.
Secret (cliquez pour afficher)
Code : PHP
<?php
// Affichage de l'annonce
//////////////////////////////////////////
$query = $db->query("SELECT * FROM chat_annonce LIMIT 0,1");
while ($data = $query->fetch())
$json['annonce'] = $data['annonce_text'];
$query->closeCursor();
?>
Un chat en PHP/AJAX 11/31
www.openclassrooms.com
Pour terminer, il nous suffit d'afficher les derniers messages du chat. Pour ce faire, nous devons effectuer une jointure entre la
table chat_messages et chat_accounts afin de rcuprer le pseudo du membre ayant envoy le message.
Secret (cliquez pour afficher)
Code : PHP
<?php
/* On effectue la requte sur la table contenant les messages. On
rcupre
les 100 derniers messages. Enfin, on affiche le tout. */
/* Si vous voulez faire appratre les messages depuis
l'actualisation
de la page, laissez l'AVANT-DERNIERE ligne de la requete, sinon,
supprimez-la */
$query = $db->prepare("
SELECT message_id, message_user, message_time, message_text,
account_id, account_login
FROM chat_messages
LEFT JOIN chat_accounts ON chat_accounts.account_id =
chat_messages.message_user
WHERE message_time >= :time
ORDER BY message_time ASC LIMIT 0,100
");
$query->execute(array(
'time' => $_GET['dateConnexion']
));
$count = $query->rowCount();
if($count != 0) {
$json['messages'] = '<div id="messages_content">';
// On cre un tableau qui continendra notre...tableau
// Afin de placer les emssages en bas du chat
// On triche un peu mais c'est plus simple :D
$json['messages'] .= '<table><tr><td style="height:500px;"
valign="bottom">';
$json['messages'] .= '<table style="width:100%">';
$i = 1;
$e = 0;
$prev = 0;
while ($data = $query->fetch()) {
// Change la couleur ds que l'ID du membre est diffrent du
prcdent
if($i != 1) {
$idNew = $data['message_user'];
if($idNew != $id) {
if($colId == 1) {
$color = '#077692';
$colId = 0;
} else {
$color = '#666';
$colId = 1;
}
$id = $idNew;
} else
$color = $color;
} else {
$color = '#666';
$id = $data['message_user'];
$colId = 1;
}
$text .= '<tr><td style="width:15%" valign="top">';
// Si le dernier message est du mme membre, on crit pas de
nouveau son pseudo
if($prev != $data['account_id']) {
// contenu du message
Un chat en PHP/AJAX 12/31
www.openclassrooms.com
$text .= '<a href="#post"
onclick="insertLogin(\''.addslashes($data['account_login']).'\')"
style="color:black">';
$text .= date('[H:i]', $data['message_time']);
$text .= ' <span
style="color:'.$color.'">'.$data['account_login'].'</span>';
$text .= '</a>';
}
$text .= '</td>';
$text .= '<td style="width:85%;padding-left:10px;"
valign="top">';
// On supprime les balises HTML
$message = htmlspecialchars($data['message_text']);
// On transforme les liens en URLs cliquables
$message = urllink($message);
// Si le nom apparat suivi de >, on le colore en orange
if(user_verified()){
if(preg_match('#'.$_SESSION['login'].'>#is', $message)) {
$message = preg_replace('#'.$_SESSION['login'].'>#is',
'<b><span
style="color:orange;">'.$_SESSION['login'].'></span></b>',
$message);
}
}
// On ajoute le message en remplaant les liens par des URLs
cliquables
$text .= $message.'<br />';
$text .= '</td></tr>';
$i++;
$prev = $data['account_id'];
}
/* On cre la colonne messages dans le tableau json
qui contient l'ensemble des messages */
$json['messages'] = $text;
$json['messages'] .= '</table>';
$json['messages'] .= '</td></tr></table>';
$json['messages'] .= '</div>';
} else {
$json['messages'] = 'Aucun message n\'a t envoy pour le
moment.';
}
$query->closeCursor();
?>
Notre fichier est fin prt ! Il est dsormais votre service, O grand seigneur. Ds qu'on l'appellera, et on le fera bien vite, via notre
magnifique fichier JS que vous rvez tous de programmer, le fichier sera appel et insrera tous les messages ET l'annonce dans
le bloc ayant pour ID "text". Si votre courage ne vous a pas encore perdu, alors continuez et je suis sr que vous irez trs vite.
Persvrez. Vous voyez ? Ce n'est quand mme pas bien compliqu, si ?
Rcupration des membres connects - get-online.php
Nous y voil ! L'une des principales raisons pour lesquelles j'ai dcid autrefois, il y a fort longtemps, de concevoir mon propre
chat. Je cherchais partout sur internet des chats entirement prts tre utiliss, mais je n'en ai trouv aucun permettant
d'afficher la liste des membres de la faon dont je voulais. Ici, on va le faire. Et ce sera trs simple.
Crez donc un nouveau fichier que vous appellerez get-online.php et que vous enregistrerez dans le dossier phpscripts
comme get-message.php.
Un chat en PHP/AJAX 13/31
www.openclassrooms.com
Tout d'abord, on effectue la mme chose que pour la rcupration des messages, soit :
Code : PHP
<?php
session_start();
include('functions.php');
$db = db_connect();
?>
Ensuite, on doit vrifier que l'utilisateur est inscrit dans la table des membres connects. Si c'est le cas, alors on modifie sa date
de dernire connexion pour qu'il ne soit pas ensuite supprim. Dans le cas contraire, on ajoute l'utilisateur dans la base de
donnes.
Secret (cliquez pour afficher)
Code : PHP
<?php
// On vrifie que l'utilisateur est inscrit dans la base de
donnes
$query = $db->prepare("
SELECT *
FROM chat_online
WHERE online_user = :user
");
$query->execute(array(
'user' => $_SESSION['id']
));
// On compte le nombre d'entres
$count = $query->rowCount();
$data = $query->fetch();
if(user_verified()) {
/* si l'utilisateur n'est pas inscrit dans la BDD, on l'ajoute,
sinon
on modifie la date de sa derniere actualisation */
if($count == 0) {
$insert = $db->prepare('
INSERT INTO chat_online (online_id, online_ip, online_user,
online_status, online_time)
VALUES(:id, :ip, :user, :status, :time)
');
$insert->execute(array(
'id' => '',
'ip' => $_SERVER["REMOTE_ADDR"],
'user' => $_SESSION['id'],
'status' => '2',
'time' => time()
));
} else {
$update = $db->prepare('UPDATE chat_online SET online_time =
:time WHERE online_user = :user');
$update->execute(array(
'time' => time(),
'user' => $_SESSION['id']
));
}
}
$query->closeCursor();
?>
Un chat en PHP/AJAX 14/31
www.openclassrooms.com
On doit maintenant supprimer tous les membres dont la dernire date de connexion date de plus de cinq secondes. Voil pourquoi
nous devions actualiser la date de dernire connexion dans le code prcdent. Si le membre n'a pas actualis depuis cinq
secondes, il n'est, soit plus sur le chat, soit bugg.
Secret (cliquez pour afficher)
Code : PHP
<?php
// On supprime les membres qui ne sont pas sur le chat,
// donc qui n'ont pas actualis automatiquement ce fichier
rcemment
$time_out = time()-5;
$delete = $db->prepare('DELETE FROM chat_online WHERE online_time
< :time');
$delete->execute(array(
'time' => $time_out
));
?>
Pour terminer, on doit afficher la liste des membres connects. Le champ online_status va enfin servir. Il va nous permettre de
dfinir le statut de l'utilisateur (qui peut le modifier, on verra a plus tard). Le code ci-dessous :
Secret (cliquez pour afficher)
Code : PHP
<?php
// Rcupre les membres en ligne sur le chat
// et retourne une liste
$query = $db->prepare("
SELECT online_id, online_id, online_user, online_status,
online_time, account_id, account_login
FROM chat_online
LEFT JOIN chat_accounts ON chat_accounts.account_id =
chat_online.online_user
ORDER BY account_login
");
$query->execute();
// On compte le nombre de membres
$count = $query->rowCount();
/* Si au moins un membre est connect, on l'affiche.
Sinon, on affiche un message indiquant que personne n'est
connect */
if($count != 0) {
// On affiche qu'il n'y a aucune erreur
$json['error'] = '0';
$i = 0;
while($data = $query->fetch()) {
if($data['online_status'] == '0') {
$status = 'inactive';
} elseif($data['online_status'] == '1') {
$status = 'busy';
} elseif($data['online_status'] == '2') {
$status = 'active';
}
// On enregistre dans la colonne [status] du tableau
// le statut du membre : busy, active ou inactive (occup, en
ligne, absent)
$infos["status"] = $status;
// Et on enregistre dans la colonne [login] le pseudo
$infos["login"] = $data['account_login'];
// Enfin on enregistre le tableau des infos de CE MEMBRE
Un chat en PHP/AJAX 15/31
www.openclassrooms.com
// dans la [i me] colonne du tableau des comptes
$accounts[$i] = $infos;
$i++;
}
// On enregistre le tableau des comptes dans la colonne [list]
de JSON
$json['list'] = $accounts;
} else {
// Il y a une erreur, aucun membre dans la liste
$json['error'] = '1';
}
$query->closeCursor();
// Encodage de la variable tableau json et affichage
echo json_encode($json);
?>
Envoi d'un message - post-message.php
Et voil ! On y est presque. Cette fois, crez encore un fichier nomm post-message.php et enregistrez-le...encore dans
phpscripts.
Inutile de rpter qu'il faut appeler la fonction session_start() et l'inclusion du fichier de fonctions avec l'appel de la fonction
db_connect()...hein ? Mince je l'ai dj fait ! Tant pis ! Mais n'allez pas croire que a se repassera encore une fois. Bon et
n'oubliez pas que db_connect() est appele de la manire suivante : <?php $db = db_connect(); ?>, tant qu' faire.
Ne nous reste plus qu' programmer la suite, trs simple !
Tout d'abord, vrifier que l'utilisateur est connect et que la zone de texte n'est pas vide. On ne va pas envoyer un message sans
contenu, pas vrai ? Donc si l'utilisateur n'est pas connect, on renvoie l'erreur. En cas contraire, on teste la zone de texte. Si elle
est vide, on renvoie une nouvelle erreur, sinon, on continue ! Ensuite, on doit vrifier la similitude du nouveau message avec le
dernier message de l'utilisateur. Si les deux messages sont trop ressemblants, alors on affiche une erreur. Enfin, on vrifie que le
dernier message n'est pas trop rcent pour viter les floods automatiques.
Et comme je suis un magicien, pouf !
Secret (cliquez pour afficher)
Code : PHP
<?php
if(user_verified()) {
if(isset($_POST['message']) AND !empty($_POST['message'])) {
/* On teste si le message ne contient qu'un ou plusieurs points
et
qu'un ou plusieurs espaces, ou s'il est vide.
^ -> dbut de la chaine - $ -> fin de la chaine
[-. ] -> espace, rien ou point
+ -> une ou plusieurs fois
Si c'est le cas, alors on envoie pas le message */
if(!preg_match("#^[-. ]+$#", $_POST['message'])) {
$query = $db->prepare("SELECT * FROM chat_messages WHERE
message_user = :user ORDER BY message_time DESC LIMIT 0,1");
$query->execute(array(
'user' => $_SESSION['id']
));
$count = $query->rowCount();
$data = $query->fetch();
// Vrification de la similitude
if($count != 0)
similar_text($data['message_text'], $_POST['message'],
$percent);
if($percent < 80) {
// Vrification de la date du dernier message.
Un chat en PHP/AJAX 16/31
www.openclassrooms.com
if(time()-5 >= $data['message_time']) {
// YES ! ON PEUT CONTINUER ! Ouiiiii.
} else
echo 'Votre dernier message est trop rcent. Baissez le
rythme :D';
} else
echo 'Votre dernier message est trs similaire.';
} else
echo 'Votre message est vide.';
} else
echo 'Votre message est vide.';
} else
echo 'Vous devez tre connect.';
?>
Pour terminer, ou continuer comme je l'ai dit, nous devons insrer le message dans la base de donnes. On renvoie true la fin
de l'insertion SQL.
Secret (cliquez pour afficher)
Code : PHP
<?php
// A placer l'intrieur du if(time()-5 >=
$data['message_time'])
$insert = $db->prepare('
INSERT INTO chat_messages (message_id, message_user, message_time,
message_text)
VALUES(:id, :user, :time, :text)
');
$insert->execute(array(
'id' => '',
'user' => $_SESSION['id'],
'time' => time(),
'text' => $_POST['message']
));
echo true;
?>
Modification du statut du membre - set-status.php
C'est fini pour les actions, enfin pas encore, mais presque. Plus qu'une page programmer et ce sera bon ! Nous allons donc
coder de nos propres mains ce fichier. Je vous prviens : a ne va pas tre un jeu d'enfant ! Attention, coeurs fragiles, s'abstenir !
Non je PLAISANTE. Trve de bavardage, allons-y !
Srieusement a va tre trs simple, sans aucun doute la plus rapide raliser. Vous allez donc crer un nouveau fichier du nom
de set-status.php et le placer dans phpscripts/.
Comme d'habitude, commencez par inclure les trois lignes cites deux, voire trois fois plus haut. Ensuite, ajoutez une condition
pour vrifier que le visiteur est connect. Pour finir, il ne vous reste qu' raliser une requte SQL pour modifier le statut du
membre concern.
Je suis magicien, mais aussi un ange et je vais faire appel mes pouvoirs divins :
Code : PHP
<?php
if(user_verified()) {
$insert = $db->prepare('
UPDATE chat_online SET online_status = :status WHERE online_user =
Un chat en PHP/AJAX 17/31
www.openclassrooms.com
UPDATE chat_online SET online_status = :status WHERE online_user =
:user
');
$insert->execute(array(
'status' => $_POST['status'],
'user' => $_SESSION['id']
));
}
?>
On peut dire que ce fut trs dur et fort en motions, non ? Ah ben tant pis. Moi j'ai souffert. Si si je vous jure.
Voil pour les actions PHP que nous appellerons via notre fichier JS. Ne vous inquitez pas, sa programmation approche. Je sais
que vous rvez de toucher au Javascript.
Adaptation du fichier chat.php... a faisait longtemps !
Cette fois, a va tre plutt rapide. Nous allons devoir indiquer notre fichier chat.php qu'il doit demander un pseudo et son
mot de passe l'utilisateur s'il n'est pas connect. Aprs le formulaire rempli, l'utilisateur est connect et peut donc "chatter"
avec les autres membres.
Premirement, il va encore falloir inclure les trois petites lignes au dbut de la page chat.php, donc session_start() etc. Mais
voil, si vous avez fait attention, il y a une correction apporter. La voici :
Code : PHP
<?php
session_start();
include('phpscripts/functions.php');
$db = db_connect();
?>
Vous avez pu constater que nous avons rajout phpscripts/ avant functions.php. Pourquoi ? Ah, et bien si vous ne savez
pas, c'est que vous avez d faire une ENORME erreur. Non c'est une blague. En fait, vous n'avez peut-tre pas cr le dossier
phpscripts/ dans lequel vous avez plac les fichiers suivants : functions.php, get-message.php, get-online.php,
set-status.php et post-message.php. Dans ce cas, si TOUS les fichiers sont la racine du site, vous pouvez mettre :
<?php include('functions.php'); ?> tout simplement. Nanmoins, la cration de ce dossier permet une meilleure
organisation.
Maintenant, nous devons vrifier que l'utilisateur est connect. S'il l'est, alors nous affichons le chat, sinon nous affichons le
formulaire. Vous devez donc rajouter ce bout de code entre les lignes surlignes :
Secret (cliquez pour afficher)
Code : PHP
<h1>Mon super chat</h1>
<?php
// permettra de crer l'utilisateur lors de la validation du
formulaire
if(isset($_POST['login']) AND !preg_match("#^[-. ]+$#",
$_POST['login'])) {
}
/* Si l'utilisateur n'est pas connect,
d'o le ! devant la fonction, alors on affiche le formulaire */
if(!user_verified()) {
?>
<div class="unlog">
<form action="" method="post">
Indiquez votre pseudo afin de vous connecter au chat.
Aucun mot de passe n'est requis. Entrez simplement votre
pseudo.<br><br>
Un chat en PHP/AJAX 18/31
www.openclassrooms.com
<center>
<input type="text" name="login" placeholder="Pseudo" /><br />
<input type="password" name="pass"
placeholder="Mot de passe" /><br />
<input type="submit" value="Connexion" />
</center>
</form>
</div>
<?php
} else {
?>
<table class="post_message"><tr>
Vous devez aussi rajouter entre les lignes surlignes :
Secret (cliquez pour afficher)
Code : PHP
<option value="2">En ligne</option>
</select>
</td>
</tr></table>
<?php
}
?>
</div>
Pour vous donner un aperu du formulaire de connexion, voici une image de la page de connexion.
Vous avez d remarquer la prsence du <?php if(isset($_POST['login'])) ?>. Nous allons devoir la remplir. Pour
rappel, elle vrifie s'il existe une variable de type POST nomme login. Si la fonction isset() renvoie true, alors il faut continuer,
sinon, on passe cette tape.
Dans ce traitement, nous vrifions s'il existe un membre portant ce pseudo, s'il existe, alors il est seulement connect. En cas
contraire, nous l'enregistrons dans la base de donnes. Voici le code insrer dans la condition prcdente <?php
if(isset($_POST['login']) AND !empty($_POST['login'])) ?> :
Secret (cliquez pour afficher)
Code : PHP
<?php
/* On cre la variable login qui prend la valeur POST envoye
car on va l'utiliser plusieurs fois */
$login = $_POST['login'];
$pass = $_POST['pass'];
// On cre une requte pour rechercher un compte ayant pour nom
$login
$query = $db->prepare("SELECT * FROM chat_accounts WHERE
account_login = :login");
$query->execute(array(
'login' => $login
));
// On compte le nombre d'entres
$count=$query->rowCount();
Un chat en PHP/AJAX 19/31
www.openclassrooms.com
// Si ce nombre est nul, alors on cre le compte, sinon on le
connecte simplement
if($count == 0) {
// Cration du compte
$insert = $db->prepare('
INSERT INTO chat_accounts (account_id, account_login,
account_pass)
VALUES(:id, :login, :pass)
');
$insert->execute(array(
'id' => '',
'login' => htmlspecialchars($login),
'pass' => md5($pass)
));
/* Cration d'une session id ayant pour valeur le dernier ID cr