Add comments to static Web pages

♠ Posted by Unknown in CMS at 01:32

Want to know what readers think of your article? You can install a full content management system, and a few weeks to move your pages and you strive to get the system has had the look your site so far, or otherwise use a specialized tool easy to install and operate alone.

The comment system is very simple:
- Every page that will be annotated XML companion file that will contain all comments for this page.
- When the item is displayed, the contents of the XML file is dynamically loaded by an Ajax script and comments are displayed at the bottom of the page.
- An authentication script is also used to store logins, passwords, email addresses, etc ... that in another XML file.

For the first demonstration, a simple comment can be entered by the reader and it is saved in the demo-comment.xml file, then this page is reloaded, the XML file is loaded by an Ajax script and the content is parsed and displayed bottom of the page.

Here is the code that scans the XML file using DOM methods getElementByTagName () and 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; 
} 

Add a comment to a page Demo

In actual application, a login and a password are first requested, the comment will be added to an XML file with the previous comments and content of this file is dynamically added to the web page when loaded. Frames are created for each review.
A complete manager to view and delete comments will be available later to complete the tool.
The template of your pages must include the JavaScript script.

• Enter login (type anything) and add a comment in the form.Click on the "Add Comment" button.

• The page reloads and the login and comment are inserted into the frame at the bottom of the page.

Download the demo

The demonstration source code:

See the JavaScript file
View XML file generator


Comments and multiple users

The next step is support for multiple reviews by different users. The XML file to store the comments in the following format:

<comments>
  <comment login="" post=""/>
  ...
</comments> 

Generating the file uses the functions of the DOMDocument object 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);

JavaScript file retrieves the content to load the page with Ajax function and transfers the XML data in a table.

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;
}

Full source code is in the archive.

Download the zip archive multiple comments.