A system that allows users to comment on your blog post and get replies from other users can increase your website's interractivity and user detention. Our goal today is to create such a system. In this project, we use MySQL database to stores all users, posts, comments, and replies and the relationship that exists among them. Then our application will query this info from the database and display on the webpage.
Only logged in users are allowed to post a comment on a blog post. If a user visits the site and is not yet logged in, instead of a comment form, we display a link and ask them to login before posting a comment. Once logged in, they can post their comment, which will be submitted to the server and saved to the database under that particular post and update the page without reloading it; we will be using JQuery and Ajax to make sure a comment is posted without need to refresh the whole page.
I think that is sufficient explanation. Now let's start coding.
Create a project folder called comment-reply-system. Right click on the following image take "save image as" in the menu that appears; save the image in the newly created folder as profile.png:
ez_ad
Or you can google "Avatar profile images" to and download anyone of your choice. Just make sure you rename it as profile.png.
Now in the same coment-system-php folder, create three files namely functions.php, main.css, post_details.php. Open post_details.php and add this code to it:
post_details.php:
<?php include('functions.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comment and reply system in PHP</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 post">
<h2>Post title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nam illum ipsum corporis voluptatibus, perspiciatis possimus vitae consequuntur. Voluptate quisquam reprehenderit sapiente cupiditate esse, consequuntur vel dicta culpa dolorem rerum.</p>
</div>
<!-- comments section -->
<div class="col-md-6 col-md-offset-3 comments-section">
<!-- comment form -->
<form class="clearfix" action="index.php" method="post" id="comment_form">
<h4>Post a comment:</h4>
<textarea name="comment_text" id="comment_text" class="form-control" cols="30" rows="3"></textarea>
<button class="btn btn-primary btn-sm pull-right" id="submit_comment">Submit comment</button>
</form>
<!-- Display total number of comments on this post -->
<h2><span id="comments_count">0</span> Comment(s)</h2>
<hr>
<!-- comments wrapper -->
<div id="comments-wrapper">
<div class="comment clearfix">
<img src="profile.png" alt="" class="profile_pic">
<div class="comment-details">
<span class="comment-name">Melvine</span>
<span class="comment-date">Apr 24, 2018</span>
<p>This is the first reply to this post on this website.</p>
<a class="reply-btn" href="#" >reply</a>
</div>
<div>
<!-- reply -->
<div class="comment reply clearfix">
<img src="profile.png" alt="" class="profile_pic">
<div class="comment-details">
<span class="comment-name">Awa</span>
<span class="comment-date">Apr 24, 2018</span>
<p>Hey, why are you the first to comment on this post?</p>
<a class="reply-btn" href="#">reply</a>
</div>
</div>
</div>
</div>
</div>
<!-- // comments wrapper -->
</div>
<!-- // comments section -->
</div>
</div>
<!-- Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
At the head section, we are including functions.php and main.css. Forget about functions.php for now, we'll come to it later. Open main.css and add this code to it for styling purposes:
main.css:
form button { margin: 5px 0px; }
textarea { display: block; margin-bottom: 10px; }
/*post*/
.post { border: 1px solid #ccc; margin-top: 10px; }
/*comments*/
.comments-section { margin-top: 10px; border: 1px solid #ccc; }
.comment { margin-bottom: 10px; }
.comment .comment-name { font-weight: bold; }
.comment .comment-date {
font-style: italic;
font-size: 0.8em;
}
.comment .reply-btn, .edit-btn { font-size: 0.8em; }
.comment-details { width: 91.5%; float: left; }
.comment-details p { margin-bottom: 0px; }
.comment .profile_pic {
width: 35px;
height: 35px;
margin-right: 5px;
float: left;
border-radius: 50%;
}
/*replies*/
.reply { margin-left: 30px; }
.reply_form {
margin-left: 40px;
display: none;
}
#comment_form { margin-top: 10px; }
Now open your browser and go to http://localhost/comment-reply-system/blog_post.php to view it.
The information is static for now. Let's create a database to store it.
Database
Create a database named comment-reply-system. In this database, we are going to create 4 tables namely: users, posts, comments, and replies.
users:
+----+-----------+------------------------+------------+
| field | type | specs |
+----+-----------+------------------------+------------+
| id | INT(11) | |
| username | VARCHAR(255) | UNIQUE |
| email | VARCHAR(255) | UNIQUE |
| password | VARCHAR(255) | |
| created_at | TIMESTAMP | |
+----------------+--------------+---------+------------+
posts:
+----+-----------+--------------+------------+
| field | type | specs |
+----+-----------+--------------+------------+
| id | INT(11) | |
| title | VARCHAR(255) | |
| slug | VARCHAR(255) | UNIQUE |
| body | TEXT | |
| created_at | TIMESTAMP | |
| updated_at | TIMESTAMP | |
+----------------+--------------+------------+
comments:
+----+-----------+--------------+------------+
| field | type | specs |
+----+-----------+--------------+------------+
| id | INT(11) | |
| user_id | INT(11) | |
| post_id | INT(11) | |
| body | TEXT | |
| created_at | TIMESTAMP | |
| updated_at | TIMESTAMP | |
+----------------+--------------+------------+
replies:
+----+-----------+--------------+------------+
| field | type | specs |
+----+-----------+--------------+------------+
| id | INT(11) | |
| user_id | INT(11) | |
| comment_id | INT(11) | |
| body | TEXT | |
| created_at | TIMESTAMP | |
| updated_at | TIMESTAMP | |
+----------------+--------------+------------+
Here is how these table are related: every reply belongs to a comment which belongs to a post which belongs to a user.
Hope that didn't sound too complicated? In any case, we are not very much concerned about the relationship between user and post for now. We will just create a single post and demonstrate how it relates to the comments and replies. If you want to learn more about users and their relationship with posts, checkout my tutorial on How To Build a Blog With PHP and MySQL database.
Now go to http://localhost/comment-reply-system/blog_post.php and copy all the info that is displaying on the page into the appropriate database tables.
For instance, create a post in the posts table with a title "Post title" and a body "Lorem ipsum ..." Also, copy the comment on that page into the comments table and, for now, set the user_id field to the value 1 for the comment, and for the reply set the user_id to the value 2.
Now let's replace the static content on the webpage with content that we will now query from the database.
Open functions.php file we created earlier and paste this code in it.
<?php
// Set logged in user id: This is just a simulation of user login. We haven't implemented user log in
// But we will assume that when a user logs in,
// they are assigned an id in the session variable to identify them across pages
$user_id = 1;
// connect to database
$db = mysqli_connect("localhost", "root", "", "comment-reply-system");
// get post with id 1 from database
$post_query_result = mysqli_query($db, "SELECT * FROM posts WHERE id=1");
$post = mysqli_fetch_assoc($post_query_result);
// Get all comments from database
$comments_query_result = mysqli_query($db, "SELECT * FROM comments WHERE post_id=" . $post['id'] . " ORDER BY created_at DESC");
$comments = mysqli_fetch_all($comments_query_result, MYSQLI_ASSOC);
// Receives a user id and returns the username
function getUsernameById($id)
{
global $db;
$result = mysqli_query($db, "SELECT username FROM users WHERE id=" . $id . " LIMIT 1");
// return the username
return mysqli_fetch_assoc($result)['username'];
}
// Receives a comment id and returns the username
function getRepliesByCommentId($id)
{
global $db;
$result = mysqli_query($db, "SELECT * FROM replies WHERE comment_id=$id");
$replies = mysqli_fetch_all($result, MYSQLI_ASSOC);
return $replies;
}
// Receives a post id and returns the total number of comments on that post
function getCommentsCountByPostId($post_id)
{
global $db;
$result = mysqli_query($db, "SELECT COUNT(*) AS total FROM comments");
$data = mysqli_fetch_assoc($result);
return $data['total'];
}
Now open post_details.php and update it so it now looks like this (replace all the code in it with this):
<?php include('functions.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comment and reply system in PHP</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 post">
<h2><?php echo $post['title'] ?></h2>
<p><?php echo $post['body']; ?></p>
</div>
<div class="col-md-6 col-md-offset-3 comments-section">
<!-- if user is not signed in, tell them to sign in. If signed in, present them with comment form -->
<?php if (isset($user_id)): ?>
<form class="clearfix" action="post_details.php" method="post" id="comment_form">
<textarea name="comment_text" id="comment_text" class="form-control" cols="30" rows="3"></textarea>
<button class="btn btn-primary btn-sm pull-right" id="submit_comment">Submit comment</button>
</form>
<?php else: ?>
<div class="well" style="margin-top: 20px;">
<h4 class="text-center"><a href="#">Sign in</a> to post a comment</h4>
</div>
<?php endif ?>
<!-- Display total number of comments on this post -->
<h2><span id="comments_count"><?php echo count($comments) ?></span> Comment(s)</h2>
<hr>
<!-- comments wrapper -->
<div id="comments-wrapper">
<?php if (isset($comments)): ?>
<!-- Display comments -->
<?php foreach ($comments as $comment): ?>
<!-- comment -->
<div class="comment clearfix">
<img src="profile.png" alt="" class="profile_pic">
<div class="comment-details">
<span class="comment-name"><?php echo getUsernameById($comment['user_id']) ?></span>
<span class="comment-date"><?php echo date("F j, Y ", strtotime($comment["created_at"])); ?></span>
<p><?php echo $comment['body']; ?></p>
<a class="reply-btn" href="#" data-id="<?php echo $comment['id']; ?>">reply</a>
</div>
<!-- reply form -->
<form action="post_details.php" class="reply_form clearfix" id="comment_reply_form_<?php echo $comment['id'] ?>" data-id="<?php echo $comment['id']; ?>">
<textarea class="form-control" name="reply_text" id="reply_text" cols="30" rows="2"></textarea>
<button class="btn btn-primary btn-xs pull-right submit-reply">Submit reply</button>
</form>
<!-- GET ALL REPLIES -->
<?php $replies = getRepliesByCommentId($comment['id']) ?>
<div class="replies_wrapper_<?php echo $comment['id']; ?>">
<?php if (isset($replies)): ?>
<?php foreach ($replies as $reply): ?>
<!-- reply -->
<div class="comment reply clearfix">
<img src="profile.png" alt="" class="profile_pic">
<div class="comment-details">
<span class="comment-name"><?php echo getUsernameById($reply['user_id']) ?></span>
<span class="comment-date"><?php echo date("F j, Y ", strtotime($reply["created_at"])); ?></span>
<p><?php echo $reply['body']; ?></p>
<a class="reply-btn" href="#">reply</a>
</div>
</div>
<?php endforeach ?>
<?php endif ?>
</div>
</div>
<!-- // comment -->
<?php endforeach ?>
<?php else: ?>
<h2>Be the first to comment on this post</h2>
<?php endif ?>
</div><!-- comments wrapper -->
</div><!-- // all comments -->
</div>
</div>
<!-- Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Refresh the page on the browser. If you did everything correctly, you will see similar data on your browser as before but this time it is coming from the database.
Now let's write code to add a comment. As I said earlier, we will be doing that with JQuery and Ajax; so the comment sent to the server, stored in the database and the page updated to display the newly created comment without reloading the page.
Create a file called scripts.js in the root folder of the project and add this code inside it:
scripts.js:
$(document).ready(function(){
// When user clicks on submit comment to add comment under post
$(document).on('click', '#submit_comment', function(e) {
e.preventDefault();
var comment_text = $('#comment_text').val();
var url = $('#comment_form').attr('action');
// Stop executing if not value is entered
if (comment_text === "" ) return;
$.ajax({
url: url,
type: "POST",
data: {
comment_text: comment_text,
comment_posted: 1
},
success: function(data){
var response = JSON.parse(data);
if (data === "error") {
alert('There was an error adding comment. Please try again');
} else {
$('#comments-wrapper').prepend(response.comment)
$('#comments_count').text(response.comments_count);
$('#comment_text').val('');
}
}
});
});
// When user clicks on submit reply to add reply under comment
$(document).on('click', '.reply-btn', function(e){
e.preventDefault();
// Get the comment id from the reply button's data-id attribute
var comment_id = $(this).data('id');
// show/hide the appropriate reply form (from the reply-btn (this), go to the parent element (comment-details)
// and then its siblings which is a form element with id comment_reply_form_ + comment_id)
$(this).parent().siblings('form#comment_reply_form_' + comment_id).toggle(500);
$(document).on('click', '.submit-reply', function(e){
e.preventDefault();
// elements
var reply_textarea = $(this).siblings('textarea'); // reply textarea element
var reply_text = $(this).siblings('textarea').val();
var url = $(this).parent().attr('action');
$.ajax({
url: url,
type: "POST",
data: {
comment_id: comment_id,
reply_text: reply_text,
reply_posted: 1
},
success: function(data){
if (data === "error") {
alert('There was an error adding reply. Please try again');
} else {
$('.replies_wrapper_' + comment_id).append(data);
reply_textarea.val('');
}
}
});
});
});
});
This file contains the ajax calls. Now open functions.php and add this code to the end of the file to process the ajax calls.
functions.php:
//...
// If the user clicked submit on comment form...
if (isset($_POST['comment_posted'])) {
global $db;
// grab the comment that was submitted through Ajax call
$comment_text = $_POST['comment_text'];
// insert comment into database
$sql = "INSERT INTO comments (post_id, user_id, body, created_at, updated_at) VALUES (1, " . $user_id . ", '$comment_text', now(), null)";
$result = mysqli_query($db, $sql);
// Query same comment from database to send back to be displayed
$inserted_id = $db->insert_id;
$res = mysqli_query($db, "SELECT * FROM comments WHERE id=$inserted_id");
$inserted_comment = mysqli_fetch_assoc($res);
// if insert was successful, get that same comment from the database and return it
if ($result) {
$comment = "<div class='comment clearfix'>
<img src='profile.png' alt='' class='profile_pic'>
<div class='comment-details'>
<span class='comment-name'>" . getUsernameById($inserted_comment['user_id']) . "</span>
<span class='comment-date'>" . date('F j, Y ', strtotime($inserted_comment['created_at'])) . "</span>
<p>" . $inserted_comment['body'] . "</p>
<a class='reply-btn' href='#' data-id='" . $inserted_comment['id'] . "'>reply</a>
</div>
<!-- reply form -->
<form action='post_details.php' class='reply_form clearfix' id='comment_reply_form_" . $inserted_comment['id'] . "' data-id='" . $inserted_comment['id'] . "'>
<textarea class='form-control' name='reply_text' id='reply_text' cols='30' rows='2'></textarea>
<button class='btn btn-primary btn-xs pull-right submit-reply'>Submit reply</button>
</form>
</div>";
$comment_info = array(
'comment' => $comment,
'comments_count' => getCommentsCountByPostId(1)
);
echo json_encode($comment_info);
exit();
} else {
echo "error";
exit();
}
}
// If the user clicked submit on reply form...
if (isset($_POST['reply_posted'])) {
global $db;
// grab the reply that was submitted through Ajax call
$reply_text = $_POST['reply_text'];
$comment_id = $_POST['comment_id'];
// insert reply into database
$sql = "INSERT INTO replies (user_id, comment_id, body, created_at, updated_at) VALUES (" . $user_id . ", $comment_id, '$reply_text', now(), null)";
$result = mysqli_query($db, $sql);
$inserted_id = $db->insert_id;
$res = mysqli_query($db, "SELECT * FROM replies WHERE id=$inserted_id");
$inserted_reply = mysqli_fetch_assoc($res);
// if insert was successful, get that same reply from the database and return it
if ($result) {
$reply = "<div class='comment reply clearfix'>
<img src='profile.png' alt='' class='profile_pic'>
<div class='comment-details'>
<span class='comment-name'>" . getUsernameById($inserted_reply['user_id']) . "</span>
<span class='comment-date'>" . date('F j, Y ', strtotime($inserted_reply['created_at'])) . "</span>
<p>" . $inserted_reply['body'] . "</p>
<a class='reply-btn' href='#'>reply</a>
</div>
</div>";
echo $reply;
exit();
} else {
echo "error";
exit();
}
}
vli_ad
