I want to achieve this is the following image of this style, can refer to the following two Web site message board, their implementation principle is the same
Chang Yan Message Board style:
NetEase Thread Style:
Principle
You need to add two main field IDs and PID in the comment table, and other fields are added at will, such as article ID, reply time, reply content, reply person or something.
Where the PID is the ID of the comment that is currently being replied to.
As can be seen from the above, each layer of the PID is the ID of his previous comment. Carefully observe the layout above. Is it much like a multidimensional array in PHP? If you can think of it, then it's easy.
Implementation Methods
1. Front Desk: This is more simple div-embedded Div. And then set the div's border and margin padding on the line.
<div class= "comment" >
<div class= "comment" >
<div class= "comment" >
</div>
</div>
</div>
<div class= "comment" >
</div>
2, backstage: Use two times recursion, first use recursion to the result of the database reorganization, after reorganization, then use recursively output the kind of foreground code above can
Comment Table structure and contents are as follows
Then read all the comments in the table directly. You can get the following array
Array ([0] => Array ([id] => 1 [PID] => [content] => Comment 1 ) [1] => array ([ID] => 2 [PID] => [content] => comment 2) [2] => Array ([ ID] => 3 [PID] => [content] => comment 3] [3] => Array ([id] => 4 [PID] => 1 [
Content] => Comment 4 reply comment 1) [4] => Array ([id] => 5 [PID] => 1 [content] => Comment 5 reply comment 1)
[5] => array ([ID] => 6 [PID] => 2 [content] => Comment 6 reply comment 2) [6] => Array ( [ID] => 7 [PID] => 4 [content] => Comment 7 reply comment 4] [7] => Array ([id] => 8 [PID] =&G T 7 [content] => comment 8 reply 7) [8] => Array ([id] => 9 [PID] => 8 [content] => comment 9 back to review On 8) [9] => Array ([id] => [PID] => 8 [content] => Comment 10 reply comment 8)]
And then we need to reorganize this array into the form of the message board above.
Where $array is read from the above array, first remove the PID default is empty, and then recursively, in the check out PID for the current comment ID of the array
public static function tree ($array, $child = "Child", $pid = null)
{
$temp = [];
foreach ($array as $v) {
if ($v [' pid '] = = $pid) {
$v [$child] = Self::tree ($array, $child, $v [' id ']);
$temp [] = $v;
}
}
return $temp;
}
After the reorganization, you can get the following array, and you can see that the style of this array has been similar to the foreground comment style.
Array ([0] => array ([ID] => 1 [PID] => [content] => comment 1 [child] => Array ( [0] => Array ([id] => 4 [PID] => 1 [content] => Comment 4 reply comment 1 [child]
=> Array ([0] => array ([ID] => 7 [PID] => 4
[Content] => Comment 7 reply comment 4 [child] => Array ([0] => Array ( [ID] => 8 [PID] => 7 [content] => Comment 8 reply comment 7 [child
] => Array ([0] => array ([ID] => 9
[PID] => 8 [content] => Comment 9 reply comment 8 [child] => Array
()) [1] => Array ( [ID] => [PID] => 8 [content] => Comment 10 reply comment 8 [child] => ;
Array ())) ))) [1] => Array ([id] => 5 [PID] => 1 [content] => Comment 5 reply comment 1 [child] => Array ())) [1] = > Array ([ID] => 2 [PID] => [content] => comment 2 [child] => Array ([0] => Ar
Ray ([ID] => 6 [PID] => 2 [content] => Comment 6 reply comment 2 [child] => Array ())) [2] => Array ([id] => 3 [PID] => [content] =>
Comment 3 [child] => Array ())
Get the above array, then use the recursive output
public static function Traversearray ($array)
{
foreach ($array as $v) {
echo "<div class= ' comment ' style= ' Width:100%;margin:10px;background: #EDEFF0;p adding:20px 10px;border:1px solid #777; ' > ";
echo $v [' content '];
if ($v [' child ']) {
self::traversearray ($v [' child ']);
}
echo "</div>";
}
}
You can then see
The principle is this, is to reorganize the array, and then traverse the output on the line.
The above is the implementation of the PHP free message board and NetEase thread style of the whole process, we can also try to innovate, I hope this article for everyone's learning help.