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:

[​IMG]
[​IMG]
[​IMG]

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:
[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! 😉
@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
gr8
4.3k views

Related Posts

@Ankita Katdare · Jul 22, 2014

Micromax has launched a brand new 32 inch LED TV in India as an addition to its portfolio which has two more LED TVs to offer. The Micromax 32T42ECHD is...
8.9k views

@Kaustubh Katdare · Dec 3, 2014

Reliance Jio is getting their website ready and the hawk eyed folks at the blog Telecom Talk got access to the test site. The information they saw about the broadband...
16.3k views

@zaveri · Apr 6, 2012

if you check out the technical specifications of any vehicle and look under the engine section , there will be a parameter which will go like : max.torque : x...
9.8k views

@Shah Sharath · Oct 20, 2013

what is working mechanism of the diwali gun pls explain me how its happening simultaneously
6k views

@m.vivekanandan · Apr 13, 2012

why are we not using starters for small bulbs while we use it for tube lights???im intersted in knowing basics of electrical engg....
41.4k views