PHP Ajax Live Comment System

Looking to add a comment facility to your blog? If your answer is yes, You are at the right page.
In this tutorial, we will learn how to create a Comment system which will be loaded without page refresh. We will be using AJAX and PHP with MySQL to perform the task.

Overview

Moving ahead in the tutorial you will need to create edit and save the following files in the same directory. The functions of each of the page and their codes will be discussed subsequently.

  • dbConfig.php
  • index.php
  • post_comment.php
  • Style.css

Database Schema

Creating a database,
Let us create a table to store the data, use the following code to create a database;

Create database “commentdb”;

Adding tables to the database.

CREATE TABLE `comments` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` text NOT NULL,
`comment` text NOT NULL,
`post_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=latin1

DbConfig.php

This file contains the configuration codes needed to connect the form with the MySQL database. It helps to establish the connection between the database and the form for the retrieval of info to and from the database.

<?php
$host="localhost";
$username="root";
$password="";
$databasename="commentdb";

$connect=new mysqli($host,$username,$password,$databasename);

if($connect->connect_errno){
echo "Connection Error $connect->connect_error";
}

Index.php

The index file contains the HTML form which renders the Comment form as well as the comment list, which are fetched from the database.
First of all, it will read all the contents from the database and show them in the comment list. Then as a user enters a comment with AJAX it will send the data to backend system where data is stored in database and waits for a success call back. As soon as the call back reaches AJAX, it will update the comment list with a new comment.

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="js/jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript">

function sendPost() {
var comment = document.getElementById("comment").value;
var name = document.getElementById("username").value;
if (comment && name) {
$.ajax
({
type: 'POST',
url: 'post_comment.php',
data: {
user_comm: comment,
user_name: name
},
success: function (response) {
console.log(response);
document.getElementById("all_comments").innerHTML = response + document.getElementById("all_comments").innerHTML;
document.getElementById("comment").value = "";
document.getElementById("username").value = "";

}
});

}

return false;
}

</script>

</head>

<body>

<form method='post' action="" onsubmit="return sendPost();">
<textarea id="comment" name="comment" placeholder="Write Your Comment Here....."></textarea>
<br>
<input type="text" id="username" name="username" placeholder="Your Name">
<br>
<input type="submit" value="Post Comment">
</form>

<div align="center" id="all_comments">
<?php
include_once 'dbConfig.php';
$comm = $connect->query("select name,comment,post_time from comments order by post_time desc");
while($row=$comm->fetch_array(MYSQLI_ASSOC))
{
$name=$row['name'];
$comment=$row['comment'];
$time=$row['post_time'];
?>

<div class="comment_div">
<p class="name">Posted By:<?php echo $name;?></p>
<p class="comment"><?php echo $comment;?></p>
<p class="time"><?php echo $time;?></p>
</div>

<?php
}
?>
</div>

</body>
</html>

Post_comment.php

Post comment contains the PHP codes for database handling. The AJAX call gives the relevant data which needs to be stored in the database.

<?php
include_once 'dbConfig.php';
if(isset($_POST['user_comm']) && isset($_POST['user_name']))
{
$comment=$_POST['user_comm'];
$name=$_POST['user_name'];
$insert=$connect->query("insert into comments values('','$name','$comment',CURRENT_TIMESTAMP)");

$id= $connect->insert_id;
$select=$connect->query("select name,comment,post_time from comments where name='$name' and comment='$comment' and id='$id'");

if($row=$select->fetch_array(MYSQLI_ASSOC))
{
$name=$row['name'];
$comment=$row['comment'];
$time=$row['post_time'];
?>
<div class="comment_div">
<p class="name">Posted By:<?php echo $name;?></p>
<p class="comment"><?php echo $comment;?></p>
<p class="time"><?php echo $time;?></p>
</div>
<?php
}
exit;
}
else{
echo "No Data Is set";
}

?>

Style.css

The CSS file contains the design codes that adds some styling to the form.

body
{
text-align:center;
font-family:helvetica;
background-color:#A9D0F5;
}
h1
{
color:blue;
text-align:center;
margin-top:100px;
}
textarea
{
width:500px;
height:100px;
border:1px solid silver;
border-radius:5px;
font-size:17px;
padding:10px;
font-family:helvetica;
}
input[type="text"]
{
width:500px;
height:35px;
border:1px solid silver;
margin-top:10px;
border-radius:5px;
font-size:17px;
padding:10px;
font-family:helvetica;
}
input[type="submit"]
{
width:150px;
height:40px;
border:none;
background-color:#2E64FE;
color:white;
margin-top:10px;
border-radius:5px;
font-size:17px;
}
.comment_div
{
width:500px;
background-color:white;
margin-top:10px;
text-align:left;
}
.comment_div .name
{
height:30px;
line-height:30px;
padding:10px;
background-color:grey;
color:white;
text-align:left;
}
.comment_div .comment
{
padding:10px;
}
.comment_div .time
{
font-style:italic;
padding:10px;
background-color:grey;
color:white;
text-align:left;
}

Download the demo

Download the complete source code.

Grab the the free working demo Intantly!

You have Successfully Suscribed!

9 thoughts on “PHP Ajax Live Comment System

  1. Hi Shivam, Glad you liked it.Appreciate you took time to comment. Check my other tutorials and don’t forget to provide me the feedback. It really encourages.

    1. Basic tutorial but just noting that this is vulnerable to XSS. Be sure to use php built-in htmlentities function on final output (“echo” statements) of the comment.

  2. Basic tutorial but just noting that this is vulnerable to XSS. Be sure to use php built-in htmlentities function on final output (“echo” statements) of the comment.

Leave a Reply

Your email address will not be published. Required fields are marked *