Comment System using Ajax,PHP and MySQL

admin | Posted on May 13, 2021 |

In this post we will not discuss simple Comment system in which only single user can submit their comment. We all know comment or even we can also called review are best way to keep make connection between website content owner and reader of that content.

HTML, CSS, Ajax and PHP Code

<?php
    define('DB_SERVER', "localhost");
    define('DB_USER', "root");
    define('DB_PASS', "");
    define('DB_DATABASE', "whatsappdwld_db");
    $con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);
?>

<html>
<head>
<style>
    .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;
    }
</style>
      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function post()
{
  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) 
      {
	    document.getElementById("all_comments").innerHTML=response+document.getElementById("all_comments").innerHTML;
	    document.getElementById("comment").value="";
            document.getElementById("username").value="";
      }
    });
  }
  
  return false;
}
</script>

</head>

<body>

  <h1>How to Instant Comment System Using Ajax,PHP and MySQL</h1>

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

  <div id="all_comments">
  <?php
   
    $comm = mysqli_query($con,"select name,comment,post_time from comments order by post_time desc");
    while($row=mysqli_fetch_assoc($comm))
    {
        $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>

PHP Code (post_comment.php)

<?php
define('DB_SERVER', "localhost");
define('DB_USER', "root");
define('DB_PASS', "");
define('DB_DATABASE', "whatsappdwld_db");
$con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);

if (isset($_POST['user_comm']) && isset($_POST['user_name'])) {
    $comment = $_POST['user_comm'];
    $name = $_POST['user_name'];
    $insert = mysqli_query($con,"INSERT INTO comments (name,comment,post_time) VALUES('$name','$comment','".date('Y-m-d H:i:s')."')");
    $id = $conn->insert_id;
    $select = mysqlI_query($con,"SELECT name,comment,post_time FROM comments WHERE name='$name' and comment='$comment' and id='$id'");
    if ($row = mysql_fetch_assoc($select)) {
        $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;
}
?>

Leave a Reply Cancel reply