January 27, 2024 5:03 am

How to create a comment system with jQuery

Comments is very useful for your website where users can give there feedback suggestion and discuss problems with us so for that i have decided that to create a comments system in jQuery where page cannot reload but your comment posted.

create-comment-system-with-jQuery

[wpdm_file id=38]DEMO

Database Details:

database name => phpgang
table name => status,comments

db.sql

Database file run in your mysql to create database and add data in table.

CREATE TABLE `comments` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `sid` int(10) NOT NULL,
  `comment` text NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `comments` VALUES (1, 1, 'WOW thats great..... :)', '2013-10-21 04:19:07');

CREATE TABLE `status` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `status` text NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

INSERT INTO `status` VALUES (1, 'Vote in the Google India Impact Challenge for the 4 NGOs that you think are changing the world. Each of the 4 NGOs that win will receive a Global Impact Award worth approximately $500K USD, as well as support from Google to make their vision a reality. Visit g.co/indiachallenge to vote now.', '2013-10-21 04:18:38');

db.php

Database configuration file edit database name, user and password as per your configuration.

<?php
    $connection = mysqli_connect('localhost','phpgang','********','phpgang');
    if (mysqli_connect_errno())
    {
       echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
?>

index.php

<?php
include('db.php');
if($_POST)
{
    $sid = mysqli_real_escape_string($connection,$_POST['sid']);
    $comment = mysqli_real_escape_string($connection,$_POST['comment']);

    $strSQL_Result  = mysqli_query($connection,"insert into comments(sid,comment) values($sid,'$comment')");
    exit;
}
$strSQL_Result  = mysqli_query($connection,"select id,status from status LIMIT 1");
$row            = mysqli_fetch_array($strSQL_Result);

$sid         = $row['id'];
$status     = $row['status'];
$commentshow = "";
$strSQL_Comment     = mysqli_query($connection,"select id,comment from comments LIMIT 3");
while($rowcomm = mysqli_fetch_array($strSQL_Comment))
{
    $id             = $rowcomm['id'];
    $comment        = $rowcomm['comment'];
    $commentshow    .= "<div class='commentarea'>".$comment."</div>";
}
echo = '<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<div class="status">'.$status.'</div>
<div id="commentbox">
'.$commentshow.'
</div>
<input type="hidden" name="sid" id="sid" value="'.$sid.'">
<input type="text" name="comment" id="comment" placeholder="Write a comment...." />';

?>

jQuery required to comment:

<script>
$(document).ready(function() {
$('#comment').keyup(function(e)
    {
        if(e.keyCode == 13)
        {
        var comment = $('#comment').val()
        var sid = $('#sid').val()
            if(comment == "")
            {
                alert("Please write something in comment.");
            }
            else
            {
                $("#commentbox").append("<div class=\'commentarea\'>"+comment+"</div>");
                $.post("index.php", {sid:sid,comment:comment},function(data)
                {                                         
                })
                $('#comment').val("");
            }
        }
    });            
});
</script>

CSS show nicely managed text and comments:

<style>
.status
{
    width:350px;
    font-size: 13px;
    line-height: 18px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
.commentarea
{
    width:350px;
    font-size: 13px;
    line-height: 18px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    border: thin;
    border-color: white;
    border-style: solid;
    background-color: hsl(0, 0%, 96%);
    padding: 5px;
}
#comment
{
    width: 357px;
    height: 23px;
    font-size: 15px;
}
</style>

Feel free to comment and share your experience we love to answer your questions.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

31 responses to “How to create a comment system with jQuery”

  1. Boomsalakalaka says:

    wth i cannot download it says i am not subscribed.. but i am alread subscribed… the one with hotmail email

  2. Md Asif says:

    I’ve subscribed. But when I download it shows me

    Download script for Subscribed users only!

  3. Shahbaz Ahmed Bhatti says:

    GOOOOOOOOOOOOOOOD LOVE This Tutorial without Submit Button We can Post like Facebook Comments

    The Message Field SHould be increase when comment text increase

  4. sdfsdf says:

    tyrttrh

  5. Zai Blitz says:

    not live to other user though. comments only live in user browser.

  6. Test says:

    testar

  7. rashida says:

    how to add email and name field along with comments. just like one which is used here

  8. jitendra sen says:

    how to convert english static website into fully hindi language ?

  9. Max John says:

    This article has made me like phpgang

  10. Alex Gole says:

    Instead of displaying the db data slide by slide in one div. Is it possible to to fetch the data and display several slides at once?

  11. Mayowa Abbey says:

    hi! i wish you could explain the jquery area… i wanna understand… Could you?
    thanks

  12. Humphrey Pietersen says:

    Two thumbs

  13. Max John says:

    This really is very useful. Thank you very much

  14. asep wahyudi says:

    nice

  15. nyamnyamh says:

    its not working, just display error 500

  16. kaed says:

    hola probandp

Leave a Reply

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