Add comments to static web pages

Want to know what readers think of your article? You can install a complete content management system, spend several weeks moving pages and make the system look like your site has so far, or use a special tool that is easy to install and work on your own.

The comment system is very simple:
- Each page to be commented will have an accompanying XML file that will contain all comments for that page.
- when the article is displayed, the contents of the XML file are dynamically loaded with the Ajax script, and comments are displayed at the bottom of the page.
- the authentication script is additionally used to store logins, passwords, email addresses, etc. in another XML file.

For the first demonstration, the reader can enter a simple comment and save it in the demo-comment.xml file, then this page is loaded, the XML file is loaded with the Ajax script, and the content is analyzed and displayed at the bottom of the page.

Here is the code that scans the XML file using the getElementByTagName () and getElentById () DOM methods.

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 the page, demo

In a real application, a login and password are first requested, a comment will be added to the XML file with previous comments, and the contents of this file will be dynamically added to the web page when it is downloaded. Frames are created for each comment.
A full manager for viewing and deleting comments will be available later to shut down the tool.
The page template must include JavaScript.

1. Enter a login (enter anything) and add a comment to the form.
   Click Add Comment.
2. The page is loaded, and the login and comment are inserted into the frame at the bottom of the page .

Download Demo

Demo Source Codes:

• Viewing a JavaScript File
• See XML file generator

Comments and multiple users

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

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

When creating a file, the functions of the DOMDocument PHP 5 object are used:

$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);

The JavaScript file extracts the content to load the page using the Ajax function and transfers the XML data to 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;
}

The full source code is archived.

• Download zip file with several comments.