Ajouter des commentaires aux pages Web statiques
Vous aimeriez savoir ce que les lecteurs pensent de votre article? Vous pouvez installer un système de gestion de contenu complet, et passer quelques semaines à déplacer vos pages et vous efforcer d'obtenir que le système ait le look qu'avait votre site jusque là, ou sinon utiliser un outil spécialisé facile à installer et fonctionnant seul.
Le système de commentaires est très simple:
- chaque page qui doit être commentée aura un fichier d'accompagnement
XML qui contiendra tous les commentaires pour cette page.
- quand l'article est affiché, le contenu du fichier XML est chargé
dynamiquement par un script Ajax et les commentaires sont affichés
en bas de page.
- un script d'authentification est utilisé en outre pour stocker les
logins, mot de passe, adresses e-mail, etc... cela dans un autre fichier XML.
Pour la première démonstration, un simple commentaire peut être entré
par le lecteur et il est sauvé dans le fichier demo-comment.xml,
puis la présente page est rechargée, le fichier XML est chargé
par un script Ajax et le contenu est parsé et affiché en bas
de page.
Voici le code qui scanne le fichier XML en utilisant les méthodes de
DOM getElementByTagName() et getElementById(). Voir le Tutoriel
DOM pour plus d'informations.
function processData(doc)
{
var element = doc.getElementsByTagName('login').item(0);
document.getElementById("login").innerHTML= element.firstChild.data;
document.getElementById("comment").innerHTML=
doc.getElementsByTagName('comment').item(0).firstChild.data;
}
Ajouter un commentaire à une page, démo
Dans l'application réelle, un login et un mot de passe sont d'abord
demandés, le commentaire sera ajouté dans un fichier XML avec
les précédents commentaires et le contenu de ce fichier est
ajouté dynamiquement à la page Web lorsqu'elle est chargée.
Des cadres sont créés pour chaque commentaire.
Un gestionnaire complet permettant de voir et effacer les commentaires sera
plus tard disponible pour compléter l'outil.
Le template de vos pages doit inclure le script JavaScript.
- Entrer un login (taper n'importe quoi) et ajouter un commentaire dans
le formulaire.
Cliquer sur le bouton "Ajouter Commentaire". - La page est rechargée et le login et le commentaire sont insérés dans le cadre en bas de page.
Les codes sources de la démonstration:
Commentaires et utilisateurs multiples
L'étape suivante est le support de commentaires multiples par des utilisateurs différents. Le fichier XML pour stocker les commentaires a le format suivant:
<comments> <comment login="" post=""/> ...
</comments>
La génération du fichier utilise les fonctions de l'objet DOMDocument de PHP 5:
$fname="demo-comment.xml";
$doc = new DOMDocument("1.0", "UTF-8");
$doc->load($fname);
$list=$doc->getElementsByTagName("comments")->item(0);
$comtag= $doc->createElement("comment");
$list->appendChild($comtag);
$comtag->setAttribute("login", $login);
$comtag->setAttribute("post", $comment);
$doc->save($fname);
Le fichier JavaScript récupère le contenu au chargement de la page avec une fonction Ajax et transfère les données XML dans un tableau.
function checkComments(xcontent)
{
var dnl = xcontent.getElementsByTagName("comment");
var arr = new Array();
for(i=0;i< dnl.length;i++)
{
var e = dnl.item(i);
var login = unescape(e.getAttribute("login"));
var comment = unescape(e.getAttribute("post"));
arr[i] = new Array(login, comment);
}
return arr;
}
Le code source complet est dans l'archive.
|
|
|