Monday, December 24, 2012

Modern Comment System in Php using Ajax and jQuery

Comment Systems are an integral and indispensable requirement for any blog or website. Today we have designed the simplest comment system using Php, Ajax and jQuery which works at real-time, is dynamic and Image Support with Gravatar. Once you post the comment, you will see your comment appear below, without the page getting reloaded. This is a modern comment system, its fast and easy to use.

This a very simple and basic comment system, but is best for the beginner level developers, to understand how a Comment System actually works, its made dynamic using Ajax and the image support is using Gravatar.com. We will soon come with an upgraded version of this script.



Database Design

Step 1 after downloading the Script is creating the required database. So create a new schema (database) in MySql named comm_sys, add following table into it.

  comments :  


CREATE TABLE comments (
com_id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100),
email VARCHAR(100),
rating VARCHAR(30),
comment VARCHAR(300));


  index.php  


<head>
<link rel="stylesheet" href="wtfdiary.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" > //JavaScript Starts here
$(function() {
$("#comment_submit").click(function() 
{
var name = $("#name").val();
var email = $("#email").val();
var rating = $("#rating").val();
var comment = $("#comment").val();
var dataString = 'name='+ name + '&email='+ email + '&comment='+ comment + '&rating=' +rating;
if(name=='' || email=='' || comment=='' || rating=='')
{alert('Please fill all textboxes');
}
else
{
$.ajax({
type: "POST",
url: "save_form.php",
data: dataString,
cache: false,
success: function(html){
$("#name").val('');
$("#email").val('');
$("#rating").val('');
$("#comment").val('');
$("#success_msg").prepend(html);
});
}return false;
}); });
</script>
</head>
<body>
<div id="container">
<form action="#" method="POST"> //Form for Submission
<table>
<tr><td colspan="2">
<h2>Name :</h2>
<div><input type="text" name="name" placeholder="Enter your Name..." class="textbox" id="name"/></div>
</td></tr>
<tr><td style="width:220px;">
<h2>Email :</h2>
<div><input type="text" name="email" placeholder="Enter your Email Address..." class="textbox" id="email"/></div>
</td>
<td>
<h2>Rate our Post : ><div><select id="rating">
<option value="l">Love it</option>
<option value="i">Interesting</option>
<option value="t">Hot</option>
<option value="u">Useful</option>
<option value="a">Average</option>
<option value="b">Boring</option>
<option value="h">Hate it</option>
</select>
</div>
</td></tr>
<tr><td colspan="2">
<h2>Comment :</h2>
<div><textarea name="name" placeholder="Write your comment..." id="comment"></textarea></div>
</td></tr>
</table>
<div><input type="submit" class="btn" value="Comment" id="comment_submit"></div>
</form>
<div id="success_msg">
<?php include('load_comments.php');?>
</div>
</div>
</body>


From the Form, as soon the Submit button is clicked, the values from the textboxes, textarea and dropdown, is fetched by the JavaScript into variables, and all the values are sent to save_form.php from where values are saved into the database. Also save_form.php appends the new comment onto the already existing list of comments dynamically.

As we post a comment, comment gets appended at the top of other comments, without page getting refreshed.

We have also included Rating System, shown at the right-top corner, along with related icon. This depends on user's selection from the dropdown to rate the post while commenting on it.

In the zip file of the script you will also find,

load_comments.php - To display list of comments, form database.
save_form.php - To save the new comment into database, and append it with others.
wtfdiary.css - Stylesheet for the comment system. (you can do customization in it.)
db.php - File to link to database.

Image support is included using the email address entered by the user while posting the comment. The email address is converted to its MD5 form, and used to fetch Gravatar related to that email address. So you must create account on Gravatar.com to see the image function work.



17 comments:

  1. how to add reply option?

    ReplyDelete
  2. does the comments appear on all blog posts? or are the comments unique to individual post?

    ReplyDelete
  3. Add reply please! ;) great script!

    Thanks

    ReplyDelete
  4. yes it seems like a professional work. the points you have discussed this all points are very impotent for the developer.
    Saudi web design

    ReplyDelete
  5. hi,
    tks for this script, i would like to know how to put it on different page of my website cause i need comments about some pictures.
    Tks in advance
    Marck

    ReplyDelete
  6. nice script thanks

    ReplyDelete
  7. This is really a special moment in knowing about the proper things there.regards.thanks for to sharing this information.
    Web developer

    ReplyDelete
  8. Its such a nice blog on HTML,CSS and on scripting... thanks for sharing this blog with us.
    Web design and development company

    ReplyDelete
  9. This all points are very impotent for the developer.
    Fall Protection Systems

    ReplyDelete
  10. how to use this script for many webpage ....
    When i try emplementing it on other pages, the same comment posted on the previous page appears ... how to solve this ????

    ReplyDelete
  11. It looks okay, but there are like a thousand scripts like this one out there.. Why can't someone just program a comment section for registered users only and with a register/login system for free? Thanks anyway!

    ReplyDelete