Friday, 29 December 2017

Comments System using PHP and Ajax

           , , , , , , , , ,      122 comments   
This time we are developing Simple Comment System by using PHP script with Ajax, Jquery, Bootstrap and Mysql Database. If you have seen our how to submit form data by using Ajax JQuery with PHP script without refresh of web page. So we have used same concept here for making Live commenting system by using PHP with Ajax and here comment will be submitted and display on web page without refresh of web page. In short we will make instant comment system without refresh of web page.

In this post we will not discuss simple Comment system in which only single user can submit their comment and nothing but here we have make nested comment system by using PHP code in which if one user has post comment then another user can also reply on that comment and add more review on that comment, and user can reply n level reply. So it will make simple social media system in which they can post their review on particular content. For making nested comment system we have use PHP recursive function which search child comment at n level.


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. So this script will help you if have use non wordpress site then in that system you can use this type of script for providing user to share their review or feedback regarding your content. Commenting are the best way to exchange ideas for made best website content like article or blog. So for this all reason we have make this Live comment system by using PHP script with Ajax JQuery.








Source Code


index.php



<?php
//index.php

?>
<!DOCTYPE html>
<html>
 <head>
  <title>Comment System using PHP and Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <h2 align="center"><a href="#">Comment System using PHP and Ajax</a></h2>
  <br />
  <div class="container">
   <form method="POST" id="comment_form">
    <div class="form-group">
     <input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Enter Name" />
    </div>
    <div class="form-group">
     <textarea name="comment_content" id="comment_content" class="form-control" placeholder="Enter Comment" rows="5"></textarea>
    </div>
    <div class="form-group">
     <input type="hidden" name="comment_id" id="comment_id" value="0" />
     <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
   </form>
   <span id="comment_message"></span>
   <br />
   <div id="display_comment"></div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 
 $('#comment_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"add_comment.php",
   method:"POST",
   data:form_data,
   dataType:"JSON",
   success:function(data)
   {
    if(data.error != '')
    {
     $('#comment_form')[0].reset();
     $('#comment_message').html(data.error);
     $('#comment_id').val('0');
     load_comment();
    }
   }
  })
 });

 load_comment();

 function load_comment()
 {
  $.ajax({
   url:"fetch_comment.php",
   method:"POST",
   success:function(data)
   {
    $('#display_comment').html(data);
   }
  })
 }

 $(document).on('click', '.reply', function(){
  var comment_id = $(this).attr("id");
  $('#comment_id').val(comment_id);
  $('#comment_name').focus();
 });
 
});
</script>

add_comment.php



<?php

//add_comment.php

$connect = new PDO('mysql:host=localhost;dbname=testing', 'root', '');

$error = '';
$comment_name = '';
$comment_content = '';

if(empty($_POST["comment_name"]))
{
 $error .= '<p class="text-danger">Name is required</p>';
}
else
{
 $comment_name = $_POST["comment_name"];
}

if(empty($_POST["comment_content"]))
{
 $error .= '<p class="text-danger">Comment is required</p>';
}
else
{
 $comment_content = $_POST["comment_content"];
}

if($error == '')
{
 $query = "
 INSERT INTO tbl_comment 
 (parent_comment_id, comment, comment_sender_name) 
 VALUES (:parent_comment_id, :comment, :comment_sender_name)
 ";
 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':parent_comment_id' => $_POST["comment_id"],
   ':comment'    => $comment_content,
   ':comment_sender_name' => $comment_name
  )
 );
 $error = '<label class="text-success">Comment Added</label>';
}

$data = array(
 'error'  => $error
);

echo json_encode($data);

?>

fetch_comment.php



<?php

//fetch_comment.php

$connect = new PDO('mysql:host=localhost;dbname=testing', 'root', '');

$query = "
SELECT * FROM tbl_comment 
WHERE parent_comment_id = '0' 
ORDER BY comment_id DESC
";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
 $output .= '
 <div class="panel panel-default">
  <div class="panel-heading">By <b>'.$row["comment_sender_name"].'</b> on <i>'.$row["date"].'</i></div>
  <div class="panel-body">'.$row["comment"].'</div>
  <div class="panel-footer" align="right"><button type="button" class="btn btn-default reply" id="'.$row["comment_id"].'">Reply</button></div>
 </div>
 ';
 $output .= get_reply_comment($connect, $row["comment_id"]);
}

echo $output;

function get_reply_comment($connect, $parent_id = 0, $marginleft = 0)
{
 $query = "
 SELECT * FROM tbl_comment WHERE parent_comment_id = '".$parent_id."'
 ";
 $output = '';
 $statement = $connect->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 $count = $statement->rowCount();
 if($parent_id == 0)
 {
  $marginleft = 0;
 }
 else
 {
  $marginleft = $marginleft + 48;
 }
 if($count > 0)
 {
  foreach($result as $row)
  {
   $output .= '
   <div class="panel panel-default" style="margin-left:'.$marginleft.'px">
    <div class="panel-heading">By <b>'.$row["comment_sender_name"].'</b> on <i>'.$row["date"].'</i></div>
    <div class="panel-body">'.$row["comment"].'</div>
    <div class="panel-footer" align="right"><button type="button" class="btn btn-default reply" id="'.$row["comment_id"].'">Reply</button></div>
   </div>
   ';
   $output .= get_reply_comment($connect, $row["comment_id"], $marginleft);
  }
 }
 return $output;
}

?>

Database



--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_comment`
--

CREATE TABLE IF NOT EXISTS `tbl_comment` (
  `comment_id` int(11) NOT NULL,
  `parent_comment_id` int(11) NOT NULL,
  `comment` varchar(200) NOT NULL,
  `comment_sender_name` varchar(40) NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_comment`
--
ALTER TABLE `tbl_comment`
  ADD PRIMARY KEY (`comment_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_comment`
--
ALTER TABLE `tbl_comment`
  MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT;

122 comments:

  1. Unknown30 December 2017 at 02:51

    Wonderful tutorial. Keep it going and Happy New Year.

    ReplyDelete
    Replies
    1. host15 October 2020 at 06:57

      is the post above same as this commenting system we are using here(below?

      Delete
    2. Awesome23 January 2021 at 06:08

      hello

      Delete
    3. bd-school15 December 2021 at 05:17

      good work please add download button for your source code so that we can easly download great work

      Delete
  2. Unknown31 December 2017 at 13:46

    Nice post.

    ReplyDelete
  3. km1 January 2018 at 03:46

    Thanks for your code and for your video tutorial

    ReplyDelete
  4. Unknown14 January 2018 at 06:32

    hi

    ReplyDelete
  5. Unknown16 January 2018 at 06:32

    very helpful

    ReplyDelete
  6. Unknown3 February 2018 at 22:30

    Thanks

    ReplyDelete
  7. Unknown13 February 2018 at 13:32

    how does this work with mobile devices and multiple replies?

    ReplyDelete
  8. Unknown21 February 2018 at 10:58

    It's a dop,,,
    keeep it up

    ReplyDelete
  9. abas malla22 February 2018 at 22:04

    Abas

    ReplyDelete
  10. Unknown27 February 2018 at 06:42

    will this work as a live system

    ReplyDelete
  11. Unknown6 March 2018 at 04:29

    hsajdhjashdjahsjdasd

    ReplyDelete
  12. Srikanta Sethy9 March 2018 at 20:14

    prettify js how to use please tell me....

    ReplyDelete
  13. morukhugraphics21 March 2018 at 16:15

    hey! how to i use mysqli because with mysql is giving me error

    ReplyDelete
  14. Unknown25 April 2018 at 03:15

    nice tutorial, i have a problem i would like to echo the comments only related to a particular post, and not all

    ReplyDelete
  15. ●๋•K@ℜ@и●๋•™ ๋●๋♥ в cμτε в ιииΘcεиτ ♥●2 May 2018 at 10:30

    Checkout my commenting system i built using PHP and AJAX -

    https://haymkarran.com/comments.php

    ReplyDelete
  16. Unknown6 May 2018 at 17:28

    Puedes ayudarme con la paginacion de este tutorial

    ReplyDelete
  17. Rocco Suasito14 May 2018 at 01:19

    Thanks for this awesome tutorial! Further on, can you teach us please how to bring down the comment form under a specific comment when we click the reply button?

    ReplyDelete
  18. besttravelagencies15 May 2018 at 03:51

    nice

    ReplyDelete
  19. Unknown21 May 2018 at 19:02

    not working

    ReplyDelete
  20. Unknown2 June 2018 at 13:19

    Wonderful

    ReplyDelete
  21. Unknown2 June 2018 at 13:19

    Wonderful

    ReplyDelete
  22. Intytk Eloi5 June 2018 at 15:15

    how can I replace comment_name by the name of a user who is already logged in?

    ReplyDelete
  23. Unknown23 June 2018 at 16:22

    hello

    ReplyDelete
  24. Alhariri26 June 2018 at 06:22

    what?

    ReplyDelete
  25. Muhammad Waqas28 June 2018 at 07:57

    not showing the results

    ReplyDelete
  26. Yusuf Badalov1 July 2018 at 01:29

    thank you very much!!!

    ReplyDelete
  27. Yusuf Badalov3 July 2018 at 07:15

    please help me how can I change name of database

    ReplyDelete
  28. Unknown3 July 2018 at 18:06

    1

    ReplyDelete
  29. Unknown10 July 2018 at 13:11

    Good one

    ReplyDelete
  30. J-Wise Tech Insights17 July 2018 at 20:06

    Thanks

    ReplyDelete
  31. Life and Technology22 July 2018 at 12:47

    sorry...when I click submit nothing happens!! what is the problem?

    ReplyDelete
  32. Unknown24 July 2018 at 04:47

    thanks

    ReplyDelete
  33. Unknown2 August 2018 at 07:45

    what if we have many other post and we want each post to have its comment

    ReplyDelete
  34. Unknown5 August 2018 at 01:32

    Thank you Very much;
    Its working;

    ReplyDelete
  35. Unknown18 August 2018 at 07:16

    Hi I deployed this code but its not working. My hosting company advised me to connect with database like this although:

    $servername = "localhost";
    $username = "JMainol";
    $password = "xxxxx_";
    $databases = "Blog_Dream_Eco_Safari";

    $connect = mysqli_connect($servername, $JMainol, $password, $databases);

    I dont know where the problem can be

    ReplyDelete
  36. Unknown4 September 2018 at 04:17

    how do i also send post_id to the database

    ReplyDelete
    Replies
    1. Haseeb Nawaz8 October 2018 at 07:09

      i want to know as well

      Delete
    2. Unknown15 October 2018 at 13:09

      Hey, you can do this by capturing the post_id from the page you are displaying your posts. I hope you get what i mean.

      Delete
    3. e14 August 2019 at 04:14

      yes

      Delete
    4. Unknown30 October 2019 at 16:18

      hi
      i just started php 11 years old

      Delete
    5. Anonymous20 December 2019 at 12:30

      jgjghjhg

      Delete
    6. Unknown16 June 2020 at 08:58

      Hi all

      Delete
  37. Unknown27 September 2018 at 04:35

    hi

    ReplyDelete
  38. Intytk Eloi28 September 2018 at 09:45

    how can I can set the condition so that the name of the person who is logged is displayed directly as the comment author?

    ReplyDelete
    Replies
    1. Unknown15 October 2018 at 13:10

      Hey, you can capture the name of the person using the session id of the user currently logged in.

      Delete
    2. WEB11 June 2019 at 10:45

      follow the steps :
      1- login form
      2- session condition for sessions start (); is sessions is started and everything is ok then u let the code of form have to be with echo form etc...
      3- replace the session varible with the name of input box and let the input box have to be hidden then make a event as onfocus for input comment box "so name input box = session varible "
      got it ?

      Delete
  39. Haseeb Nawaz8 October 2018 at 07:09

    how to send post id and fetch the exact comment which are on a particular post

    ReplyDelete
    Replies
    1. Killian Nthakyo30 January 2019 at 12:57

      Very helpful. I have integrated this with my code-igniter application and it works perfectly.

      Delete
    2. Unknown9 September 2019 at 23:20

      i have tried but it not work with code-igniter

      Delete
    3. Unknown12 September 2019 at 09:49

      ;dsqdqs

      Delete
    4. Andrew19 July 2020 at 20:33

      How did you integrate into your application? I have an application, but can't figure out how to add a comment to an existing article.

      Delete
  40. Unknown13 October 2018 at 13:35

    thank

    ReplyDelete
  41. Unknown29 January 2019 at 19:35

    What is i am making a doctor portal and each doctor is given the choice to post an article and this article should be visible on both his and home page for all users.

    ReplyDelete
    Replies
    1. WEB11 June 2019 at 10:47

      we will tell the webslesson admin to make a section for a users chat for better live question and answers

      Delete
  42. Mubeen Momin31 January 2019 at 19:52

    i have uploaded this script to my domain directory and do some changes also in fetchcomment.php and addcomment.php by changing their database name but its not working

    ReplyDelete
  43. usman12 February 2019 at 21:11

    sir, when we refresh the page it shows form resubmition error!
    what should I do for this

    ReplyDelete
  44. Unknown16 February 2019 at 06:02

    Worked perfect for me, Thanks!

    ReplyDelete
  45. TECH ZONE6 March 2019 at 01:06

    l lke thi it's work thanks

    ReplyDelete
  46. Unknown12 March 2019 at 16:24

    hello sir can you add delete function, that would really be great. Thank you.

    ReplyDelete
  47. parasha15 April 2019 at 03:33

    nice

    ReplyDelete
  48. tutto15 May 2019 at 09:32

    please how to Include Add_comment.php and Fecth_comment.php in Index.php

    ReplyDelete
  49. Unknown22 May 2019 at 16:10

    hola

    ReplyDelete
  50. Unknown1 July 2019 at 05:53

    Can you help me out with the newer version of FullCalander Version 4?
    There are some different's there and i don't know how i can get it working. Kind regards Pepijn

    ReplyDelete
  51. Unknown9 September 2019 at 23:59

    how to implement it with code-igniter

    ReplyDelete
  52. Unknown16 September 2019 at 23:27

    great! I had been looking for something like that for days - going cracy. Could you, however, give any recommendation on how to use this of different pages? Would be highly appreciated.

    ReplyDelete
  53. Unknown16 September 2019 at 23:28

    and could you maybe give an idea about what I just got from you after my last post: "your comment will be .. approval" - how is this to be done?

    ReplyDelete
  54. Unknown19 September 2019 at 02:06

    I had a weird effect: I posted to test markup language, , , and tags, the first and last ones work fine, the tag however changed the whole text and not just the enclosing text plus! all prior comments to bold. And I do not like so much that anyone can mess up my whole design. You have any explanation for this? are there more tags that do such stuff, and how to avoid it? Note: before I used this I had substituted the b-tags in the add_comment_php and fetch_command.phh files; also it would be nice, if the number of total comments could be displayed somewhere. I appreciate your efforts, script is very nice apart from the bold thing

    ReplyDelete
  55. Emmanuel Onyemaechi2 October 2019 at 00:01

    This is the best and simplest tutorial I've ever seen. Well done!

    ReplyDelete
  56. Anonymous5 November 2019 at 01:42

    add_comment.php why display the code of error on the webpage

    ReplyDelete
  57. Unknown15 November 2019 at 03:03

    Cool

    ReplyDelete
  58. Unknown1 December 2019 at 06:45

    Thank you for this sir, it really helpfull... but how can i connect my post with comments post ???

    ReplyDelete
  59. AXYZTips30 December 2019 at 12:29

    Sir wiil you please make a multilevel real time commenting system with laravel ajax.... thanks

    ReplyDelete
  60. Unknown1 January 2020 at 08:11

    Thank you. Very very thank you for this comment system.

    ReplyDelete
  61. Unknown8 January 2020 at 05:03

    When I run this code over my local host it works properly but shows 500 error over the real server could anybody please sort out this problem.

    ReplyDelete
  62. Interesting Blog23 January 2020 at 22:10

    Hi

    ReplyDelete
  63. Interesting Blog23 January 2020 at 22:10

    thank you so much

    ReplyDelete
  64. Unknown24 January 2020 at 01:35

    Would be awesome if you could add toogle replies with ajax.

    ReplyDelete
  65. Unknown24 January 2020 at 01:37

    would be awesome if you could add toogle replies with ajax

    ReplyDelete
  66. jay11 February 2020 at 09:56

    Fatal error: Uncaught PDOException: PDO::__construct(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /homepages/29/d775487527/htdocs/comment/fetch_comment.php:5 Stack trace: #0 /homepages/29/d775487527/htdocs/comment/fetch_comment.php(5): PDO->__construct('mysql:host=loca...', 'root', '') #1 {main} Next PDOException: SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Name or service not known in /homepages/29/d775487527/htdocs/comment/fetch_comment.php:5 Stack trace: #0 /homepages/29/d775487527/htdocs/comment/fetch_comment.php(5): PDO->__construct('mysql:host=loca...', 'root', '') #1 {main} thrown in /homepages/29/d775487527/htdocs/comment/fetch_comment.php on line 5

    ReplyDelete
  67. salasa12 February 2020 at 06:25

    hi

    ReplyDelete
  68. m19 February 2020 at 01:30

    It works, but doesn't add any data to the database.

    ReplyDelete
  69. no20 February 2020 at 03:28

    hi

    ReplyDelete
  70. Saurabh Das24 March 2020 at 04:06

    It is interesting to see more and more websites and blogs come up with the nested commenting system. It sure is an encouragement to people to comment and communicate causing a better interaction, especially in case of marketing blogs. Keep sharing more views, tips and suggestions about such innovative options in your posts. See more at https://www.metasyssoftware.com/

    ReplyDelete
  71. Unknown25 March 2020 at 11:41

    some help plz

    Warning: PDO::__construct() [pdo.--construct]: [2002] Une tentative de connexion a �chou� car le parti connect� n�a pa (trying to connect via tcp://localhost:3306) in D:\projets\web\infographieClasse\comment\fetch_comment.php on line 5

    Fatal error: Maximum execution time of 30 seconds exceeded in D:\projets\web\infographieClasse\comment\fetch_comment.php on line 5

    ReplyDelete
  72. Unknown31 March 2020 at 12:21

    Will this work with index.html instead of index.php?

    ReplyDelete
  73. Unknown6 April 2020 at 14:54

    there's an error in fetch_comment line5

    ReplyDelete
  74. Unknown9 April 2020 at 03:49

    its not working

    ReplyDelete
  75. Anonymous16 April 2020 at 14:22

    how can i delete or update my reply sir :o

    ReplyDelete
  76. Anonymous16 April 2020 at 15:27

    help please

    ReplyDelete
  77. Kecsege19 April 2020 at 09:34

    Did this work for somebody once altogether?

    ReplyDelete
  78. Unknown21 April 2020 at 08:22

    i copy and paste the code but it keep posting double value and also submit value when page is refreshed how to fix that

    ReplyDelete
  79. Perry James21 April 2020 at 12:14

    Hi there everyone, I have come across almost all the web development sites. However, your website is far better than other in form of content, tools and easiness of using website. Since I am a developer, I am always looking forward to make people aware of web development tools. I can help you people out by introducing you to range of json tools. Here is the link https://jsononline.net/.

    ReplyDelete
  80. Unknown24 April 2020 at 14:56

    Nice

    ReplyDelete
  81. Unknown6 May 2020 at 21:46

    very good article

    ReplyDelete
  82. unknown7 May 2020 at 03:12


    Fatal error: Uncaught Error: Call to undefined method mysqli_stmt::fetchAll() in C:\xampp\htdocs\comment\fetch_comment.php:21 Stack trace: #0 {main} thrown in C:\xampp\htdocs\comment\fetch_comment.php on line 21

    I've done this more than 3 times and it still gives the same error.I think the problem is from the 'fetch_comment.php' file, from the 'fetchAll()' function.
    PLEASE I NEED YOUR HELP RIGHT AWAY. Thanks in advance.

    ReplyDelete
  83. AI RAJU20 May 2020 at 03:49

    very nice post :) Thank You For This Post :-) Keep it up.
    Random Number Generator
    YTS Torrent Magnet

    ReplyDelete
  84. MANOLASO22 May 2020 at 23:23

    Lo he probado me ha parecido que esta muy bien son pocos archivos y realmente funciona muy bien, quizás añadiría un sistema de captcha , porque uno de los peores problemas de crear un sistema de comentarios es es el spam

    ReplyDelete
  85. Anonymous28 May 2020 at 22:27

    It's not working. Can you do one in procedural for the database part?

    ReplyDelete
  86. Unknown8 June 2020 at 05:00

    hi had added new two columns of like and unlike i also have added buttons respectively nearby the reply i want to update the database by 1 when users click the like or unlike button can u please guide me with this

    ReplyDelete
  87. Website, CRM and Software Development Company16 June 2020 at 05:02

    It's really helpful tips about comments using php & ajax.

    ReplyDelete
  88. Arjun Kapoor3 July 2020 at 09:38

    How to use the database, I mean what extension and all to use?

    ReplyDelete
  89. Narendra5 July 2020 at 05:35

    This comment system work properly localhost but not working my godaddy server pse help

    ReplyDelete
  90. Unknown6 July 2020 at 10:13

    can u tell me how u create this comment section ?

    ReplyDelete
  91. Unknown7 July 2020 at 03:16

    hey I am not able to make this system i am not able to sent the message plz help out

    ReplyDelete
  92. Ankush14 July 2020 at 07:28

    plz provide to download the source code

    ReplyDelete
  93. Clinical Research22 July 2020 at 22:42

    Thanks for sharing such informative post with us regarding creating a comment system in PHP

    ReplyDelete
  94. jim7 September 2020 at 04:08

    its ok for send ,but i see nothing in the page,its the same of demo,i dont understand
    why calendar ist not working

    ReplyDelete
  95. Unknown29 October 2020 at 15:10

    How can we show comments for aspecific page

    ReplyDelete
  96. Unknown15 June 2021 at 22:34

    I am really thankful to you because i was thinking that how to make this comment system and when i try every time i stuck on nested reply but i have found the recursive approach in your video. thanks

    ReplyDelete
  97. Unknown17 June 2021 at 22:25

    there is a small bug you should work on. Comment can't have two reply because of reply button id
    thanks

    ReplyDelete
  98. Easy Mathematics24 December 2023 at 04:43

    This is a very basic starter example and a nice way to demonstrate why nested SQL is not good. Your script works for small pages with a very small amount of comments. I am pretty sure you know that. :)

    You can do it better!

    ReplyDelete