PHP: Creating an infinite-pole comment module

The comment module for my bi project was originally done with a multi-plug-in, but I now want to be able to manage comments myself, so I started to write a comment module. The specific preparation uses a structure similar to the following comment, that is, the first level comment is displayed directly below the article, and the level two or three comment appears below the first level comment as shown in:

Comment Structure

I think this can be said to be an infinite pole classification of an application, accurate is the use of descendants tree, after the descendants of the tree classification, the loop output content, the formation of comments (do not understand the infinite pole classification of friends can go to see my article infinite Pole classification principle and implementation).

Of course, there are other key points to truly complete the infinite-pole reply comment, and here's how I've done the infinite comment.

Database design

The first is the design of the data table. If it is a forum system, you can split the data of the comments into two tables, one table stores the comment information, including the user IDof the post, the user ID of the reply, the Post IDof the reply, the time of the reply , and the other table, which stores the content of the comment, Includes the subject of the post and the content of the reply.

I finished the comment module of the article, it is not divided into two tables, directly put the content of the comments and information together, such as the following structure:

Column Name	column Type	Column Properties	Description
comm_id	Int	UNSIGNED PRIMARY KEY auto_increment	Primary key
user_id	Int	UNSIGNED not NULL DEFAULT 0	User ID
parent_id	Int	UNSIGNED not NULL DEFAULT 0	The parent of the comment
artcile_id	Int	UNSIGNED not NULL DEFAULT 0	Article ID of the comment
Comm_cont	TEXT		Content of comments
Comm_time	Int	UNSIGNED not NULL DEFAULT 0	Time of comment release

SQL statements:

CREATE TABLE Comment (    comm_id int UNSIGNED PRIMARY KEY auto_increment,    user_id int UNSIGNED not NULL DEFAULT 0, c2/>parent_id int UNSIGNED NOT NULL default 0,    article_id INT UNSIGNED NOT null default 0,    Comm_cont TEXT,    C Omm_time INT UNSIGNED not NULL DEFAULT 0) Engine=myisam Charset=utf8;

This structure is the basis for the completion of the infinite pole response, it is also clear that the extracted data can be very good for the infinite classification.

Structural analysis of comments

It is easy to complete a comment module, put a comment into the database, and then retrieve it in HTML, as well as complete the comment module. However, this structure is very messy and disorderly. To complete a comment module like a review, you have to use a special approach.

Well, look at the structure of the review.

Comment Structure

In combination with the above data table structure, it is possible to infer that the data from the data table and the infinite pole classification should be structured like this:

Array (level comment    ,        Child=>array (level            Two comment, level            three comment            )        ),    array (        level comment        , Child=>array (            )    ...

Why do you say that? You can clearly see that level two and level three comments are wrapped in a first-level comment, while two-level, three-level reviews are parallel, so two-level, three-level reviews are the descendants of a one-level comment, while two-level, three-level comments are parallel nodes, and there are no parent-child relationships.

Therefore, it can be concluded that the classified data have only one descendant node, the multilevel comment whether it is not to reply to the first-level comment, as long as it is in the scope of the first comment, then its parent node must be a first-level comment.

So, how is the two-level, three-level reply @某某某 ? In fact, I have been troubled here for a long time. I expect to do this with the table's own connection, but no, it destroys the structure described above. Finally, I got the answer from the JSON data I requested, see the JSON data for the comment:

JSON data

After uploading a bit blurry, you can use Firefox or google browser plug-ins above to observe the JSON data.

Focus on the compiled_content field, and you can infer that it will be @某某某 stored directly in the database. This solves the problem, while observing the JSON data, and verifying that the structure I described above is correct.

Specific implementation

After analyzing the structure, we can say how to complete the infinite reply. The first step, a level of comment formation, this simple, directly to the comments stored can be

First-level reviews

And the level two comment to use JS, click on the comment, get the user name of a first-class comment, and save, in the release of the reply note that it and the content of the comments together to send to the background:

Second-level reviews

Replyuser is the username @xxxxvar content = $ (' #reply '). Val.split (Replyuser) [1];var userlink = ' <a href= ' # ' class= ' xxx ' t arget= "_blank" > ' + replyuser + ' </a> '; var comm_cont = encodeURIComponent (userlink+content);

Then the database behaves as follows:

Data Sheet Contents

After that is a key point, using the descendants of the tree classification, the classification function is as follows:

/** * @param $data array  data * @param $parent  The name of a string parent element, such as parent_id * @param $son     The name of a string child element, such as comm_id  * @param $pid     int    The ID of the parent element actually passes the element's primary key * @return array  */function getsubtree ($data, $parent, $son, $pid = 0) {    $tmp = array ();    foreach ($data as $key + $value) {        if ($value [$parent] = = $pid) {            $value [' child '] =  getsubtree ($data, $pa Rent, $son, $value [$son]);            $tmp [] = $value;                    }    }    return $tmp;}

After this classification, the data structure changes, roughly as follows:

Post-categorization data

Having this structure will be a good way to complete the review, as follows

<?php foreach ($tree as $key = $val)? ><p class= "Comm_list" >    
At the same time, the resulting response style is as follows:



Snipaste20170105_204906.png

The infinite-pole reply to such a comment structure is complete.

Ps

This is only a form of comment, such as a stair-like structure, this implementation is more simple, such as:



Stair Style Comment structure

This structure is easy to accomplish, as long as the parent_id in the storage database is exactly equal to the comm_id you reply to, it can be done with the following infinite pole classification.

/** * Descendants tree */function getsubtree ($data, $parent, $son, $pid = 0, $lev = 0) {    $tmp = array ();    foreach ($data as $key + $value) {        if ($value [$parent] = = $pid) {            $value [' lev '] = $lev;            $tmp [] = $value;            $tmp = Array_merge ($tmp, Getsontree ($data, $parent, $son, $value [$son], $lev + 1);}    }    return $tmp;}
The classification of this infinite-polar descendant tree is different from that of the descendants in the preceding tree, and will not be wrapped in the child after classification, but will form a rank, the highest level is 0, then down.

For example: The first level comment comm_id=1,parent_id=0, then the level two comment comm_id=2,parent_id=1; the comm_id=3,parent_id=2 of the three-level commentary;

The classification finally forms the following structure

Array (' comm_id ' =>1,parent_id=>0,art_id=>1, ' Lev ' =>0), array (' comm_id ' =>2,parent_id=>1, Art_id=>1, ' Lev ' =>1), array (' comm_id ' =>3,parent_id=>2,art_id=>1, ' Lev ' =>2), array (' comm_id ' = = 4,parent_id=>3,art_id=>1, ' Lev ' =>3), array (' comm_id ' =>5,parent_id=>2,art_id=>1, ' Lev ' =>2));
Then the direct loop output, and Lev as a property in the HTML, and finally the use of JS read Lev, and according to different levels to assign different margin-left can, it will be different from the margin of the arrangement in different locations, as follows:

<?php foreach in HTML ($tree as $key = $val) {><p class= "comm_list" lev= "<?php echo $val [' Lev ']?> ' > ... </p><?php}? >//js in $ (' p.comm_list '). CSS (' Margin-left ', Lev);