January 2010

Home Grown Comments for TAMB

I have implemented comments in my blog "Nothing Happens At Ten". I did this myself in order to keep control of the code that is running on my web page. It also was an interesting programming challenge to solve. I did not write all of the code I used, but I did make some significant changes to the code that I downloaded.

The blog pages must be published as .php files for this to work because the comments feature is written in php, and the server needs to see the .php suffix in order to know that the pages are really php programs.

This is a long and detailed post because it contains implementation details about how I did this. I hope you can find some useful hints in here. If you are not interested in the details, feel free to press on to more interesting matters.

To get the requisite files uploaded, import the following files into the TAMB blog web folder:

• 1.gdf
• 1.ttf
• 2.gdf
• 2.ttf
• 3.gdf
• 3.ttf
• 4.ttf
• captcha.form.php5
• captcha.function.php5
• captcha.image.php5
• comments.php
• protected.png

They will be uploaded to the root of the blog directory structure when the blog is published.

I have put the php code into some .txt files out on the server so that you can see what the code looks like. Your browser will display the contents of the .txt files instead of executing them. If you decide to use this, you must copy the code from the .txt files into files with the "php" and "php5" suffixes. Here are the files:

comments.php 

captcha.form.php5 

captcha.function.php5 

captcha.image.php5 

The ttf, gdf and png files are support files required by the Captcha code. They are available from TheCAPTCHA (a link is provided below). You can also get them from this web site through the links below:

1.gdf  1.ttf  2.gdf  2.ttf  3.gdf  3.ttf  4.ttf  protected.png 

My comments feature was put together from two different sources, which I merged, writing some php code to make them work together. The two sources are

1). a simple commenting system from the following site:

Notes From James

and

2). the code to generate a Captcha image from the following site:

TheCAPTCHA

I did some major modifications to the files to get both of the features to work together seamlessly. I modified comments.php from James to post the captcha.form, and I modified the captcha.form from TheCAPTCHA to save the comments in local files as well as emailing the results to me.

Here is how it works.

The file "comments.php" is included in the TAMB template files using a normal php "include" command. It creates an "Add Comment" button on the blog pages. Each entry in the blog includes the code, so each entry has its own button. The button posts the blog entry name and the base address of the web page to the program "captcha.form", which creates a new web page into which the user can type the comment. Comments are stored in text files on the server. The files are named after the TAMB name for the entry, for example comments for entry 3 of the blog are contained in the file "e_3.txt".

To provide comments throughout the entire blog, I have included comments.php in the following tempates:

• main.template
• archive.template
• category.template
• entry.template

The index template and the feed template do not provide the ability to leave comments.

I have modified the program, captcha.form, to provide my own text and formatting to make it fit in with the rest of my blog. The form has input areas for the commenter's name, email and comment. It also calls the function "captcha.image" to generate a unique captcha image for the page. The commenter is required to correctly solve the captcha puzzle in order to submit the comment to the blog. This is to minimize spamming from bots, which have a hard time reading the captcha image.

The captcha.form includes the captcha.function file, which has the code to generate the captcha image and the code to verify that the commenter has entered the correct captcha word.

Got that?

OK. Here is the summary.

The TAMB template includes comments.php
    which displays the "Add Comment" button that posts to the program captcha.form
        which includes captcha.function and calls
            captcha.image to create the image and also calls
            captcha_verify_word() to verify the user's best guess of the characters in the image.

The captcha.form posts to itself, meaning that this is recursive code. When the program is entered, it decides based on a posted value of the argument called "initial", whether to process the posted comment or simply post the form.

The main button on the blog screen sets the initial value to true which causes the program to display the form and quit. The form itself does not post an initial value of true, which causes it to process the comment, flag errors and repost the form, or if there are no errors, to process the comment and post a "Thank You" page.

To implement my comments feature, I edited the templates and added the following code where the blog entries are found, just after the line which contains the <$CategoryLink$> tag. The differences in the code snippets are the number of relative directories it has to go up to find the php code.

main.template - front page

  <?php
  $article="e" . "<$CurrentDate format="yyyy"$>". "_" . "<$EntryID$>";
  $base='.';
  include 'comments.php';
  ?>

archive.template - archive pages

  <?php
  $article="e" . "<$CurrentDate format="yyyy"$>". "_" . "<$EntryID$>";
  $base='../';
  include '../comments.php';
  ?>

category.template - category pages

  <?php
  $article="e" . "<$CurrentDate format="yyyy"$>". "_" . "<$EntryID$>";
  $base='../';
  include '../comments.php';
  ?>

entry.template - individual entry pages

  <?php
  $article="e" . "<$CurrentDate format="yyyy"$>". "_" . "<$EntryID$>";
  $base='../../../';
  include '../../../comments.php';
  ?>

index.template - archive index page

The index template has no entries, so don't use comments.

feed.template

Don't use comments in the feed template. RSS feed only.

Publish the blog, and the comments capability should be in place.

I Have Archived my Other Blog

I have successfully archived my 2009 blog and started the 2010 follow-on blog.

You can see the results here

I used the procedures that I outlined before but I found some issues that were not obvious to me before. The issues are:

The URL's to images in the blog are hardwired to the base directory when the image is included. I have not found a way to change this even when I republish the entire blog into its new archive folder. The images are uploaded into the new media folder, but they are not referenced there. They are referenced with a fully qualified URL to the base media folder.

To fix the problem, I just left the images in the base level media folder. It is not necessary to copy the images into the archived media folder, although the final upload of the archived blog to the new folder will put them there.

Another issue was the naming of the files that contain comments on my blog. They are named after the entry numbers, which repeat from 0 to n since I have restarted with a new blog. I have fixed that by running a copy of comments.php down in the archive folder, so it leaves and retrieves the comment files in that folder. The new blog uses the base folder, so there is no conflict even though the file names are repeated in the new blog.

Since the blog starts over each year, I have added a link to the archive folder for the previous year's blog in my favorite links section.

1. Create a new archive folder named after the previous year e.g. arch2009
2. Move the old blog files into the the new folder.
3. Copy the scripts, hitcounter, etc. into the new folder
4. Move the e_<n>.txt comment files into the new folder.
5. Change the blog settings to publish the old blog into the new folder
6. Republish the entire blog.
7. Create a new blog using the new year in the name.
8. Copy the template files into the new blog area.
9. Re-create the custom tags in the new blog.
10. Import scripts, images, etc. into the web folder for the new blog.
11. Edit the search file to include the new archive folder.
12. Publish the new blog at the top level

I had to change my search program a bit to fix some bugs in it that made it fail to find entries in the archive folder. Here is a newer version of the file.

nhat_search

I will document my comments code in a later post.

This has been a bit of trouble to implement, and it requires some handwork moving files around, but I think it will be worth it to avoid the always increasing upload times as the blog grows over the years.