Installation du G-tchat

Avant l'installation

G-tchat pour Joomla 1.7.x et 2.5.x. est un tchat gratuit, sur une simple page d'article Joomla, qui ne requiert aucune inscription à un site externe, aucune base de donnée supplémentaire et ne permet de tchater qu'aux utilisateurs inscrits dans votre site Joomla. Pas de spam !

Attention cependant : il ne s'agit pas d'une extension classique et il vous faudra procéder à quelques opération sur la base de données et sur le site pour que votre tchat fonctionne. Lisez attentivement et appliquez les instructions suivantes.

Pour pouvoir utiliser votre Tchat, installez d'abord l'extension Sourcerer qui vous permettra d'insérer du code PHP et Javascript dans vos articles Joomla ; pour ce faire, allez dans votre page d'administration puis 'extensions', 'gestion des extension' et 'installation' ; copiez ensuite l'URL de téléchargement de Sourcerer et lancez l'installation. Installez la librairie Xajax que je fournis (dans le dossier chat/xajax) pour éviter les problèmes de compatibilités de versions.

Intégration

Pour que ce module puisse fonctionner, vous avez besoin de l'intégrer à votre site Joomla, il faut pour cela modifier certaines lignes de code pour donner au Tchat, les informations nécessaire à son bon fonctionnement.

La base de données

Ce module fonctionne avec votre base de données sql déjà utilisée pour Joomla : il vous faudra donc créer deux nouvelles tables pour pouvoir utiliser le Tchat. Vous avez la possibilité:

D'importer le fichier chat/tables.sql (la méthode la plus rapide et la plus simple)
Ou de les créer vous même:
Spoiler:
pour cela, connextez vous à phpmyadmin à l'aide de votre login et votre mot de passe. Vous verrez ainsi le nom de plusieurs tables apparaître sur le côté gauche de votre écran. Elles ont un nom sous la forme [nom]_[table].
La Première table sera celle qui permettra de stocker les messages. Elle aura pour nom [nom]_tchat ([nom] est ce qui se trouve avant l'underscore _ de vos autres tables (voir paragraphe précédent). Elle aura la structure suivante:
- Un champ 'id' de type smallint, attribut Unsigned en AI (auto increment) qui permettra d'attribuer un numero unique à chaque reponse.
- Un champ 'posteur' en tinytext pour stocker le nom du posteur
- Un champ 'contenu' en textt pour stocker le contenu des messages
- Un champ 'date' en datetime permettant de stocker la date de l'envoi du messages.
En allant consulter sa structure, vous devriez avoir ceci:

La deuxième table sera celle qui permettra de stocker les utilisateurs présents sur le tchat. Elle aura pour nom [nom]_tchat_presence. Elle aura la structure suivante:
- Un champ 'nom' de type varchar limité en 40 pour stocker le nom des présents
- Un champ 'timestamp' en int(11) pour stocker la dernière date de présence des utilisateurs
En allant consulter sa structure, vous devriez avoir ceci:

Ne vous préoccupez pas de "Aucun index n'est défini". Cela signifie simplement qu'il n'y a pas de valeur permettant de différencier deux entrées ayant le même nom et même timestamp (un champ 'id' par exemple).

Le paramétrage de la connexion à la base de données

La connexion du tchat à la base de données $serveur; $bddname ; $login et $passwd avec vos données personnelles, les mêmes que vous avez utilisées pour paramétrer Joomla.

Les fonctions xajax

Avant toute chose, vous avez besoin de récupérer le chemin absolu de vos fichiers ; allez dans le panneau d'administration de Joomla, allez dans 'gestion des extension' : le chemin absolu est dans 'Dossier d'installation' moins '/tmp' ; cela devrait vous donner quelque chose du type /homez.305/[site]/www/[chemin]/ ; pour simplifier on appelle [chemin absolu] le chemin absolu de la racine de votre site.

Les plus grosses modifications se feront là car c'est là que le code change en fonction des sites.

Ouvrez chat/xajax_functions.php : vous devez remplacer chaque [chemin absolu] par le chemin absolu de votre site (utilisez la fonction "preg&replace" de votre éditeur, le plus souvent le raccourci Ctrl+F ou Ctrl+R)

Pour les plus laborieux :

Spoiler:

Les templates

Pour fonctionner, Xajax a besoin d'écrire du javascript entre les balises head de vos pages ; pour lui permettre ceci, allez dans [racine]/template/[template_utilisé]/index.php ; si vous ne savez pas quel template vous utilisez, ouvrez [urldevotresite]/administrator ; loguez vous et allez dans gestion des templates ; le template utilisé est celui qui possède un emplacement 'site' et une étoile dans 'defaut'. Si vous utilisez plusieurs templates, la modification est à faire pour chacun des index.php

Dans votre [racine]/template/[template_utilisé]/index.php ; recherchez la ligne précédant la fermeture les balises head et collez ce code en changeant bien [chemin] par le chemin de votre site (si votre page d'accueil est http://toto.fr/site1/ ; alors [chemin] est site1) ; ne mettez rien si votre page d'accueil est http://toto.fr :

<!-- DEBUT XAJAX TCHAT !-->

				<!-- PRINT JAVASCRIPT -->

				<?php

				$xajax->configure('javascript URI', '[chemin]/chat/xajax');

				$xajax->printJavascript();

				include('chat/head_functions.php');

				?>

ainsi que :

            // XAJAX TCHAT FUNCTIONS

			include('chat/xajax_functions.php');

à l'intérieur des balises php avant le Doctype.

Un fichier d'exemple est à votre disposition dans chat/index.template.php ; il s'agit du template beez_20. Si vous utilisez ce template, vous n'avez qu'a remplacer le fichier template/beez_20/index.php de votre site par celui fourni.

Evidemment cette opération est à répéter à chaque changement ultérieur de template...

L'installation

Nous allons maintenant passer à l'installation sur votre serveur. Vous avez précédement créé un dossier 'chat' à la racine de votre site ; si ce n'est pas le cas, créez le puis, à l'intérieur de ceui-ci, transferez les dossiers:

icon
smileys
xajax

ainsi que tout le dossier 'chat'

Sur votre site, créez un article pour le tchat, comme contenu, entrez ceci (en remplaçant les chemins des images par [chemin]/chat/icon/[image].png):

Spoiler:

{source}
<?php
$user = &JFactory::getuser(); 
$_SESSION['loginchat'] = $user->name;
?>
<div id="warn" style="background-color:#095197; margin:auto; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif" align="center"><strong style="color:black">Vous êtes sur un site à vocation pédagogique, veuillez conserver un langage correct sur le Tchat. Merci!</strong></div>
<div id="Tchatblock" onscroll="scroll();" style="width : 100%; height: 310px; overflow: auto; margin: auto;"></div>

<p>Utilisateur(s) présent(s) : <span id="presents">Erreur</span></p>

<form action="" id="form_chat">
<fieldset><legend>Entrer ici votre message :</legend>

<label for="posteur">Nom : </label><br>
<input type="text" id="posteur" name="posteur" value="<?php echo $_SESSION['loginchat'];?>" onfocus="this.blur();" onmouseover="this.style.color='red';" title="Vous ne pouvez pas modifier votre nom de compte !" onmouseout="this.style.color='grey';" style="color: red;" /><br />

<label for="message">Message : </label><br />

<img style="cursor: pointer;" src="[chemin]/chat/icon/bold.png" onclick="insertion('[b]', '[/b]')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/italic.png" onclick="insertion('[i]', '[/i]')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/underline.png" onclick="insertion('[u]', '[/u]')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/cool.png" onclick="insertion(' B)', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/sad.png" onclick="insertion(' :(', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/smile.png" onclick="insertion(' :)', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/cheerful.png" onclick="insertion(' :D', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/wink.png" onclick="insertion(' ;)', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/tongue.png" onclick="insertion(' :p', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/angry.png" onclick="insertion(' :angry:', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/dizzy.png" onclick="insertion(' :s', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/shocked.png" onclick="insertion(' :O', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/cry.png" onclick="insertion(' :\'(', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/xD.png" onclick="insertion(' XD', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/whistling.png" onclick="insertion(' :whistle:', '')" />
<img style="cursor: pointer;" src="[chemin]/chat/icon/pinch.png" onclick="insertion(' >.<', '')" /><br />

<textarea rows="5" cols="50" size="100" id="message" name="message" onkeypress="enter(this.submit);" placeholder="Votre message (Shift+Enter pour aller à la ligne)."></textarea><br/>

<input type="button" value="Envoyer" onclick="xajax_envoyer(xajax.getFormValues(this.form)); return false;"><br />
<input type="checkbox" name="sound" id="sound" value="sound" onclick="setsound()" style="margin-top:10px; " checked><label for="sound" id="soundornot" onclick="setsound()"><span style="color:black; margin-left:10px; width:90px;"><img src="[chemin]/chat/sound_on.png" title="Son activé"/> Son activé</span></label>
</fieldset>

</form>
<audio autoload id="nv_message">
<source id="notif_mp3" src="chat/notif.mp3"></source>
<source id="notif_ogg" src="chat/notif.ogg"></source>
</audio>
<script type="text/javascript">
refresh();
refresh_presence();
</script>

{/source}

Votre tchat gratuit est prêt ! Ne me remerciez pas.

Petit récapitulatif

Lorsqu'un utilisateur se connecte sur la page, la fonction refresh() est appelée, celle ci va chercher les 30 derniers messages dans la base de donnée et les insère dans la base 'présents' son nom tout en supprimant les entrées qui n'ont pas envoyé de signal depuis 5 secondes. Si il n'y a pas le même nombre de messages que précédement, on joue le son de notification (seulement si le son est activé -> il est activé par défaut). Cette fonction est appelée toutes les 1.5 secondes.

Lorsqu'un utilisateur envoie un message, on ajoute son message à la base de données en remplaçant le Bbcode, les smileys...

Il serait évidemment plus simple de transformer toutes ces actions en une simple extension pour Jooma : eh bien avis aux programmeurs volontaires !