Threaded Comment System - Simple, yet Complicated Way! :)

How do I start?

Well, that was the same question even I had when I started initially. Then I found out a way to start. Lets start with the initial HTML markup and then gradually, go ahead with the database and functionality parts.

When you consider anything like a comment system or set of links, you can literally call them as Lists. As said, we need to use either Unordered Lists orOrdered Lists for this case. Now our comments thread would be chronologically ordered. So, we would be using an Ordered List here.

An unordered list has what is commonly called "bullets". We can add a bulleted list by adding an unordered list. The unordered list is contained within the Unordered list tags, (<ul></ul>) tags. Each item in the list will be contained within the list item tags ([*] ).

An ordered list has what is commonly called "numbered list". We can add a numbered list by adding an ordered list. The ordered list is contained within the Ordered list tags, (

) tags. Each item in the list will be contained within the list item tags ([*] ).

Where is our Markup?

In our case, lets use Ordered Lists, as it is going to be numbered comments, at least not literally! So, the initial markup should be looking like this:

[list]
    [*]This is the parent first comment!
        [list]
            [*]This is the reply for the first parent comment!
                [list]
                    [*]This is a reply for the first reply of the parent comment!
                    [*]This is a third reply for the first parent comment!
                [/list]
            
            [*]This is another reply for first parent comment!
        [/list]
    </li>
    [*]This is gonna be parent second comment!
        [list]
            [*]This is a reply for the second comment!
        [/list]
    
    [*]This is fourth parent comment!
[/list]

When you check out the code closely, you can find starting OL tag and inside the LI of the parent comment, another OL tag is inserted and will be iterated nested, until there are no child comments.

The Nesting Function

Now lets find out how to recursively invoke the function to display the comments and its replies. The logic of the code should be this way: function getComments($parent)
{
    # Get the data from SQL.
    # Check if it has nested comments.
    if (hasComments())
        getComments($child); # $child is the ID of the current comment.
} You can see here that we are calling the getComments() function inside the same function, recursively. This function is called as a Recursive function. Next, lets see how to display the data.

Data Fetching & Displaying

Since I am dealing with PHP, the obvious database would be MySQL. Those who are familiar with MySQL will know how to fetch a row and echo it out. It is really simple, and it is explained here. The original now is: <?php
    mysql_connect('localhost', 'root');
    mysql_select_db('nestedcomments');
    function getComments($parent)
    {
        $res = mysql_query("SELECT * FROM `nestcomm` WHERE `parent` = $parent");
        if (mysql_num_rows($res))
        {
            echo "<ul>\n";
            while (($dat = mysql_fetch_array($res)) !== false)
                echo "[*]", $dat["text"], getComments($dat["id"]), "\n";
            echo "</ul>\n";
        }
        else
            echo ($parent === 0) ? 'No Comments!' : "";
    }
    getComments(0);
?> Explanation of the Code

1. The first two lines are the database core, which is used to connect to the Database server, and select the appropriate database. (PS: See I started using an ordered list here).
2. Then comes the next code block, which is the recursive function, which I explained before. Now, inside the function we are:
   1. Creating a Query to fetch the rows from the MySQL Database.
   2. Only if there are any comments, we are proceeding.
   3. First insert the starting OL tag.
   4. Until you have data, keep on iterating and output the comment's text.
   5. Before closing the LI tag, call the same function for rendering the replies for this particular comment. (Now see Step 2.1 to 2.6).
   6. After all the comments are listed, render a closing UL tag and come out.
3. Just to invoke this function, I called the getComments(0); function here.

Requirements for Working Out

I used a simple WAMP Server to complete this experiment. You can just copy the code and work on it. Anyways, I forgot the MySQL Database Dump. It is:

+----+------------------------------------------------------------+--------+
| id | text                                                       | parent |
+----+------------------------------------------------------------+--------+
|  1 | This is the parent first comment!                          |      0 |
|  2 | This is gonna be parent second comment!                    |      0 |
|  3 | This is the reply for the first parent comment!            |      1 |
|  4 | This is another reply for first parent comment!            |      1 |
|  5 | This is a reply for the first reply of the parent comment! |      3 |
|  6 | This is a reply for the second comment!                    |      2 |
|  7 | This is a third reply for the first parent comment!        |      3 |
|  8 | This is fourth parent comment!                             |      0 |
+----+------------------------------------------------------------+--------+

Hope you found this tutorial useful. Queries in the replies are nested comments please! 😉

Before You Implement!!! Known Issues!

1. This code will be better if we use mysqli_* functions instead of deprecated mysql_* functions.
2. Each and every iteration, a query is fired to MySQL Server, which is a very serious performance and bandwidth issue, so use only when the connections are limited to under 10.

gr8

Pramod Dondgr8