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));
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>
<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.
thanks for sharing sir
ReplyDeletethanks
Deletegood work
ReplyDeletekeep it up
how to add reply option?
ReplyDeletedoes the comments appear on all blog posts? or are the comments unique to individual post?
ReplyDeleteAdd reply please! ;) great script!
ReplyDeleteThanks
yes it seems like a professional work. the points you have discussed this all points are very impotent for the developer.
ReplyDeleteSaudi web design
hi,
ReplyDeletetks 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
nice script thanks
ReplyDeleteThis is really a special moment in knowing about the proper things there.regards.thanks for to sharing this information.
ReplyDeleteWeb developer
Its such a nice blog on HTML,CSS and on scripting... thanks for sharing this blog with us.
ReplyDeleteWeb design and development company
This all points are very impotent for the developer.
ReplyDeleteFall Protection Systems
nice i have that realise :)
ReplyDeletehow to use this script for many webpage ....
ReplyDeleteWhen i try emplementing it on other pages, the same comment posted on the previous page appears ... how to solve this ????
hmmm
Deletet
ReplyDeleteIt 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