CrazyEngineers Archive
Old, but evergreen and popular discussions on CrazyEngineers, presented to you in read-only mode.
@PraveenKumar Purushothaman • 28 Jul, 2012 • 3 likes
What are threaded comments?

Generally, this concept is used in many social networking places like Blogs, Public Showcases, Question & Answer forums, etc. Best use of threaded comments is shown in Wordpress Blogs. A few examples of threaded comments include:


Why a sudden need?

I have my own website, as many know, but my problem was using Wordpress there, caused me a lot of trouble by people easily able to bypass security with the help of a Wordpress plugin, namely TinyMCE. So, I decided to build my own blog engine. I started with working on the nested comments first, as that was a peculiar feature of Wordpress.
@PraveenKumar Purushothaman • 28 Jul, 2012 • 3 likes 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:
    [*]This is the parent first comment!
            [*]This is the reply for the first parent comment!
                    [*]This is a reply for the first reply of the parent comment!
                    [*]This is a third reply for the first parent comment!
            [*]This is another reply for first parent comment!
    [*]This is gonna be parent second comment!
            [*]This is a reply for the second comment!
    [*]This is fourth parent comment!
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:
$res mysql_query("SELECT * FROM `nestcomm` WHERE `parent` = $parent");
        if (
            while ((
$dat mysql_fetch_array($res)) !== false)
"[*]"$dat["text"], getComments($dat["id"]), "\n";
            echo (
$parent === 0) ? 'No Comments!' "";
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! 😉
@PraveenKumar Purushothaman • 28 Jul, 2012 • 1 like 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.
@Pramod Dond • 07 May, 2018 gr8
@Pramod Dond • 08 May, 2018
Pramod Dond

Related Posts

@Kaustubh Katdare · May 2, 2010

Popular Indian Author of "Stay Hungry, Stay Foolish", Rashmi Bansal is back with her latest novel, "Connect The Dots". The first book featured stories of entrepreneurs who had a degree...

@Ankita Katdare · Jul 25, 2015

I am sure beginners like me who've started reading and writing about car only a few years back had a tough time understanding what certain car specifications meant. I realized...

@Kaustubh Katdare · Mar 6, 2011

This thread is for all the freshers who've gotten offer letters from Tech Mahindra (TechM). Share your story and also tell us which center you're joining for the initial training....

@amit_pawar242 · Aug 18, 2014

Dear Sir, I am a graduate of 2012 in Mechanical Engineering. From past two years I am working in Pvt Company and my salary package is also good (4, 32,000...

@Ankita Katdare · Oct 16, 2014

Videocon, the Indian mega electronics & telecom manufacturing giant, has come a long way over the last 5 years with its mobile device portfolio ranging from basic colour FM phones...