Hello Reader's!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.
Now let's start
First you need to create database and table.
database name:comment
table name:comments
Database: create database if not Exists comment
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`)
);
after creating the database and table now create index.php page and establish connection with database.
<?php
$connection = mysqli_connect('localhost','root','admin','comment');
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
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;
}
$commentshow = "";
$strSQL_Comment = mysqli_query($connection,"select id,comment from comments");
$cnt=mysqli_num_rows($strSQL_Comment);
$msg=null;
if($cnt!='0')
{
while($rowcomm = mysqli_fetch_array($strSQL_Comment))
{
$id = $rowcomm['id'];
$comment = $rowcomm['comment'];
$commentshow .= "<div class='commentarea'>".$comment."</div>";
}
}
else
{
$msg.="No Comment";
}
$content ='<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<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>
<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: hsla(120, 100%, 50%, 0.3);
// background-color: hsl(0, 0%, 85%);
padding: 5px;
}
#comment
{
width: 357px;
height: 23px;
font-size: 15px;
}
</style>
<div class="status">'.$msg.'</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....Press Enter" />';
$pre = 1;
$title = "Comment In PHP with jQuery";
$heading = "Please Enter Your Comment";
include("html.inc");
?>
After Completing above task now you need to create html.inc file which provide you data without refreshing your page
html.inc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php echo $title;?> | PGPGang.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
img {border-width: 0}
* {font-family:'Lucida Grande', sans-serif;}
</style>
</head>
<body>
<div>
<h2><?php echo $heading;?></h2>
<p>
</div>
</p>
<hr />
<p>
<?php if(!isset($pre)) {?>
<pre>
<?php print_r($content); ?>
</pre>
<?php }else{ ?>
<?php print_r($content); ?>
<?php } ?>
</p>
</body>
</html>
if u have above code nicely now you need to download jquery-1.8.0.min.js file.
u can download file attachment below.
Hope this will be helpful for you!!! Contact me if there is any problem :)
2 Comment(s)