Comment System Using PHP & MySQL
In this blog, we will learn how to make Comment System in PHP & MySQL. On the Blog page we mostly see a comment system on the website in this blog we will create a nested comment and reply system by using simple steps:
Step1: Create Database comment_system_php
CREATE DATABASE comment_system_php;Step2: Create table blogs
CREATE TABLE `blogs` (
`id` int(11) NOT NULL,
`addeddate` date DEFAULT NULL,
`title` text COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`description` longtext COLLATE utf8mb4_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Step3: Create table comments
CREATE TABLE `comments` (
`id` int(11) NOT NULL,
`blog_id` int(11) DEFAULT NULL,
`comment_id` int(11) DEFAULT NULL,
`name` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`description` longtext COLLATE utf8mb4_unicode_ci DEFAULT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Step4: Create connection.php file
<?php
$servername = "localhost";
$username = "root";
$password="";
$db = "comment_system_php";
// Create connection
$conn = mysqli_connect($servername, $username, $password,$db);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
Step5: Create index.php file
<?php
include('connection.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blogs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>All Blogs</h2>
<p>To Comment on blog please click on view detail link.</p>
<table class="table table-striped">
<thead>
<tr>
<th>Sr.No</th>
<th>Title</th>
<th>Description</th>
<th>View</th>
</tr>
</thead>
<tbody>
<?php
$sql="select * from blogs";
$result=mysqli_query($conn,$sql);
$i=1;
while($data=mysqli_fetch_array($result))
{?>
<tr>
<td><?php echo $i;?></td>
<td><?php echo $data['title'];?></td>
<td><?php echo $data['description'];?></td>
<td><a href="blog-detail.php?blogid=<?php echo $data['id'];?>">view detail</a></td>
</tr>
<?php $i++; } ?>
</tbody>
</table>
</div>
</body>
</html>
Step6: Create blog-detail.php file
<?php
include('connection.php');
function showComments()
{
$comment="";
$comment.=commenttree();
echo $comment;
}
function commenttree($parentid=NULL)
{
$comments='';
$sql='';
if(is_null($parentid))
{
$sql="select * from comments where comment_id='0'";
}
else
{
$sql="select * from comments where comment_id=$parentid";
}
$result=mysqli_query($GLOBALS['conn'],$sql);
while($data=mysqli_fetch_array($result))
{
// echo $data['comment_id'];
// echo '<pre>';
// print_r($data);
if($data['comment_id']=='0')
{
$comments.='
<div class="media border comment0 p-3">
<div class="media-body">
<h4>'.$data['name'].'<small><i> Posted on February 19, 2016</i></small></h4>
'.$data['description'].'
<p><a href="#postcomment" class="btn btn-primary mt-2 float-right" onclick="reply('.$data['id'].')">reply</a></p>
</div>
</div>
';
}
else
{
$comments.='<div class="media border reply p-3">
<div class="media-body">
<h4>'.$data['name'].'<small><i> Posted on February 19, 2016</i></small></h4>
'.$data['description'].'
<p><a href="#postcomment" class="btn btn-primary mt-2 float-right" onclick="reply('.$data['id'].')">reply</a></p>
</div>
</div>
';
}
$comments.='<div class="media parent p-3">
<div class="media-body">'.commenttree($data['id']).'</div></div>';
}
return $comments;
}
$blogid=$_GET['blogid'];
if(isset($_POST['submit']))
{
if(empty($_POST['commentid']))
{
$commentid='0';
}
else
{
$commentid=$_POST['commentid'];
}
$sql="insert into comments (blog_id,comment_id,name,description) values ('".$blogid."','".$commentid."','".$_POST['name']."','".$_POST['description']."')";
$result=mysqli_query($conn,$sql);
if($result)
{
echo '<script>alert("comment added successfully, we will published after verify your comment.")</script>';
}
else
{
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog Detail</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-lg-12">
<?php
$sql="select * from blogs where id=$blogid";
$result=mysqli_query($conn,$sql);
$data=mysqli_fetch_array($result);
?>
<h2><?php echo $data['title'];?></h2>
<p><?php echo $data['description'];?></p>
</div>
<div class="col-lg-12">
<h4>Comments</h4>
<?php showComments(); ?>
</div>
<div class="col-lg-12" id="postcomment">
<h4 class="mt-4">Post Your Comment</h4>
<form method="post">
<input type="hidden" name="commentid" id="commentid">
<label>Name</label>
<input type="text" class="form-control" name="name">
<label>Comment</label>
<textarea class="form-control" name="description"></textarea>
<input type="submit" name="submit" class="btn btn-primary mt-2">
</form>
</div>
</div>
<script>
function reply(commentid)
{
//alert(commentid);
$("#commentid").val(commentid);
}
</script>
</body>
</html>
To create this comment system I have used the recursion concept.
Recursion: Recursion is a concept that allowing a function to call itself from within its own code.
Note: In this blog, we have inserted blogs in the table directly, there is not any add blog system, you can customize this code according to your need.
