
Home	Richard's Blog	Sabrina's Galery	Katharina	Short But Close	Grandparents	Dr. Schwarz
Pictures	Development	Sabrina's Shanghai		Claudio		Klaus
Links	Recipes	Sabrina's Shorts		Reviews		Karl
		MajusArts
_

Create a homemade comment management on your site

My kids wanted to be able to comment on our family site - no big deal I thought, there have to be hundreds of examples on the web and - Google is your friend - started to search. I found nothing suitable and had to tinker something for myself. When you want to use it or to build on it download the zip file with the js and cgi files

Before you start make sure that your provider allows you to use own Perl scripts. This was a big shock for me when nothing worked after the upload. I had to upgrade my account in order to use Perl and CGI scripts.

Basic Concept

Comments are stored in a flat file (comments.txt). It's basically a csv file, only I use # for field separation. Commas and semicolons are more likely to occur in a comment. I have created a folder named "comtxt" to store it. I use two additional files: one for a comment history (named com_list.txt) and another to record the spam entries caught in the spam trap (spam_list.txt). These files have to have write permissions for everyone, so I'd strongly recommend to store them in an own folder. Don't put other files in this folder..
Comments and a comment form are displayed by the Perl script comment.cgi. To identify a comment section you call it with two parameters: the name of your comment section and the url of your page.
New comments are handled by the script com_in.cgi. This little script does a basic validation and writes the comment into the flat file. It also adds to the com_list or - in case it's spam to the spam_list.
For filtering spam I found a nice trick on the web. There is an extra field in the comment form which the proper commentator must not fill. Only when it is blank a comment gets saved otherwise I just make an entry in the spam_list for my curiosity.
As my first attempt (with two interwoven JavaScripts) didn't work in IE, I had to simplify it using only the collapse_expand script. But for displaying the comment count before expanding the section I had to include another small cgi script (com_intro.cgi) which just counts the number of lines of a given comment_id (first field in comments.txt).
For expanding and collapsing the comment section within your page I found a great JavaScript module doing the job wonderfully:
- collapse_expand_single_item.js: For more information go to the interconnection.net support site
- The script is included in the zip file.

Step by Step

ToDo's on your page

Include the JavaScript in the head of pages where you want to place a comment section. At my site it looks like this:


<script type="text/javascript" src="../js/collapse_expand_single_item.js"></script>

Place the following code in the body of your page where you want to have your comment section:


<p align="left">There are  <object type="text/html" id="com_but" data="/cgi-bin/com_intro.cgi?sabrina01" ></object></p>
<a name="_sabrina01"></a>
<p align="left"><img src="/Images/expand.gif" name="imgsabrina01">
	<a href="#sabrina01" onclick="shoh('sabrina01');">Read comments and write your own</a></p>
<div style="display: none;" id="sabrina01" >
	<object type="text/html" id="comments" data="/cgi-bin/comment.cgi?sabrina01+../Sabrina/SabrinaChina.html"></object>
</div>

The sabrina01 represents both the html tag (for getting back to this section) and the comment ID which identifies the comments in the comments.txt file. By naming them the same, we only have to submit one parameter for it to the Perl program. But naturally we need the url of the page ../Sabrina/SabrinaChina.html in this example as an additional argument.

The first line of the above code shows the number of comments posted to the topic. It calls the script com_intro.cgi with the parameter of the comment ID. The com_but id is there for css styling purposes - but I'm not happy yet with my settings (especially in IE) and leave it to you as you are probably more skilled in css than me.
The following a-tag is just for navigating back to this comment section.
The next two lines are using the JavaScript function "shoh" to unhide the comment section. The image plays an important role in controlling the expand/collapse process.
The following div section is hidden by default and gets the html of existing comments and the comment form from the comment.cgi script.
For a new comment section I just copy this code and do a simple find and replace on the comment ID.

Customizing the code

com_in.cgi
You probably will have to change the stylesheet reference (right now it points at: ../css/stylesheet.css). This reference is only for printing an error message when validation doesn't pass.
Otherwise you only need changes when you want different fields or different validation rules. I set mine only to checking whether a user name is present and to make sure that at least 10 characters are in the comment text area. That's all.
comment.cgi

The defined variables are:


my $cgi = new CGI;
my $args = @ARGV;
my @com_lines;
my $linkdesc;
my $id = $ARGV[0];
my $url = $ARGV[1];
my $comurl = join("", $url, "_#", $id);
my $onclick = join("","shoh('",$id, "')");
my $imgname = join("","img",$id);

Just a brief explanation about what does what (as I'm not so firm myself I guess this may help).


# open the file for reading
open(IN, "/comtxt/comments.txt") or &dienice("Can't open /comtxt/comments.txt $!");
# set a shared lock
flock(IN, LOCK_SH); 
      my @ary = <IN>;
close(IN);

Reading the comment file and store the content into an array.


  foreach my $line (@ary) {
    my @fields = split(/#/, $line);
    if ($fields[0] ne $id){
     	next; 
     	} 
     	push (@com_lines, "<b>", $fields[1],"</b>", " wrote ",$fields[3],"<br />");
        push (@com_lines, "<p>",$fields[2],"<br />");
  # when link is filled then add the fields to the com_lines
   if ($fields[4]){
        push (@com_lines, "<a href='",$fields[4],"' target='_blank'>");
	 	push (@com_lines,"Link: " , $fields[5], "</a></p>");}
	else {
	  	push (@com_lines,"</p>");
	}
  }

The lines are split into fields (field are separated by # in the flat file). When the comment ID ($field[0]) matches the ID of the referring comment section ID ($ID] the lines are prepared for print out , and written into the array @com_lines. When no - optional - links are recorded these fields are skipped thru the if claus and only the closing p-tag is added.

Now we come to the heart of this little program which creates the content. It is terrific how you can create a whole html page with forms and all with just a view lines of code.


print $cgi->header(-charset=>'utf-8'),
   start_html(-style=>{ -src=>'../css/stylesheet.css'}), 
		 @com_lines,
	start_form(-action=>'../cgi-bin/com_in.cgi', -name=>'com_form', -method=>'post'),
		 hidden( -name=>'id', -value=>$id),
		 hidden( -name=>'comurl', -value=>$comurl),
 		 '<br />Your input is wanted! Put in a name: <br /> ',
		 textfield(-name =>'username', -size => 40)	,	 
 		 '<br /> ... and a comment (should be at least 10 characters):<br /> ',
		 textarea(-name =>'commenttext', -columns => 100, -rows => 5),
		 '<br /> To share a link put in the url: ',
		 textfield(-name =>'url', -size => 60)	,	 
		 '<br /> ...and here a link description: ',
		 textfield(-name =>'linkdescription', -size => 60)	,			 
		 ' <br />  skip this field (spam-trap!), just push submit',
		 textfield(-name =>'checktext', -size => 20),	 
		 submit(-name =>'submit', -value=>'Submit'), '...and you are done!',
	end_form(),
		 '</div>',
   end_html();

With print $cgi->header you define the char set. I forgot it in my first attempt and had to convert all the German "Umlaute" - you do the crime, you do the time.
In the start_html arguments you define the link to the stylesheet.
Between start_form() and end_form() our little comment entry form is created. Besides the user fields there are two hidden fields for passing the ID and the url information to com_in.cgi. The field names (i.e. comurl) are passed to com_in.cgi as parameters and with the statement "my $comurl = $cgi->param("comurl");" the values are passed on.
The rest is simple as we have already prepared the printout for the existing comments. @com_lines brings it all on the screen.

com_intro.cgi

It's just a trimmed-down version of comment.cgi. It has only the comment ID as a parameter and counts the lines in comment.txt with the given ID. The count part looks as follows (there ar probably more elegant ways but I'm just happy it works):


    foreach my $line (@ary) {
     	my @fields = split(/#/, $line);
     	if ($fields[0] eq $id){
     		$count = $count +1; 
    	} 
    }

collapse_expand_single_item.js

You only have to adjust the reference to your icon files here:


/////////////////BEGIN USER EDITABLE///////////////////////////////
	imgout.src="../Images/expand.gif";
	imgin.src="../Images/collapse.gif";
///////////////END USER EDITABLE///////////////////////////////////

Simple Comment Tracker

This is a real low tech approach. Same way the comments are displayed through comment.cgi in a comment section the small programm com_list.cgi (also in the zip file) writes the last entries and displayes them in an iframe. To get the last comments the reverse(@ary) function is used when reading the file. On the web page itself there are only two lines (not counting the header to this section):


<iframe class="button1" name="com_list" height="60px" width="800px" frameborder="0"
 align="left"  src="../cgi-bin/com_list.cgi"></iframe>

Conclusion

Please excuse the lengthy description. Remember I'm a newbie at this stuff. I bet there are more elegant ways to write this, but you need to start somewhere and at least I now understand most of what happens when a visitor adds a comment to my page. When it will help someone who starts struggling like me - that would make me happy. When you have questione (not sure I'm able to answer them -:) feel free to send me a mail to richardhwinter@hotmail.com .