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().

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.

1. Entrer un login (taper n'importe quoi) et ajouter un commentaire dans le formulaire.
   Cliquer sur le bouton "Ajouter Commentaire".
2. La page est rechargée et le login et le commentaire sont insérés dans le cadre en bas de page.

Télécharger la démonstration

Les codes sources de la démonstration:

• Voir le fichier JavaScript
• Voir le générateur de fichier XML

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.

• Télécharger l'archive zip multi-commentaires.

© 2006-2015 Scriptol.fr