Comment is a strong way to express views about any specific thing so this system should be fast because everybody hates the slow way to post comment about any topic.In this tutorial we will create a simple and best instant comment system using Ajax,PHP and MySQL.
To Create An Instant Comment System It Takes Only Four steps:-
- Create a database Table to store the Comments
Make a PHP file and define markup and script for Instant Comment System
Make a PHP file to store and display comments
Make a CSS file and define styling for Instant Comment System
Step 1.Create a database Table to store the Comments
We have to create a database table named comments having four columns id,name,comment,post_time
- Code:
CREATE TABLE `comments` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` text NOT NULL,
`comment` text NOT NULL,
`post_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=latin1
Step 2.Make a PHP file and define markup and script for Instant Comment System
We make a PHP file and save it with a name comments.php
- Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="comment_style.css">
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
function post()
{
var comment = document.getElementById("comment").value;
var name = document.getElementById("username").value;
if(comment && name)
{
$.ajax
({
type: 'post',
url: 'post_comment.php',
data:
{
user_comm:comment,
user_name:name
},
success: function (response)
{
document.getElementById("all_comments").innerHTML=response+document.getElementById("all_comments").innerHTML;
document.getElementById("comment").value="";
document.getElementById("username").value="";
}
});
}
return false;
}
</script>
</head>
<body>
<h1>Instant Comment System Using Ajax,PHP and MySQL</h1>
<form method='post' action="" onsubmit="return post();">
<textarea id="comment" placeholder="Write Your Comment Here....."></textarea>
<br>
<input type="text" id="username" placeholder="Your Name">
<br>
<input type="submit" value="Post Comment">
</form>
<div id="all_comments">
<?php
$host="localhost";
$username="root";
$password="";
$databasename="sample";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);
$comm = mysql_query("select name,comment,post_time from comments order by post_time desc");
while($row=mysql_fetch_array($comm))
{
$name=$row['name'];
$comment=$row['comment'];
$time=$row['post_time'];
?>
<div class="comment_div">
<p class="name">Posted By:<?php echo $name;?></p>
<p class="comment"><?php echo $comment;?></p>
<p class="time"><?php echo $time;?></p>
</div>
<?php
}
?>
</div>
</body>
</html>
In this step we create a form to post comment with the help of Ajax.When the user clicks on Post Comment button an Ajax request is fired which sends all the input data to post_comment.php and then display the comment from post_comment.php.
Step 3.Make a PHP file and store and send the user comment
We make a PHP file named post_comments.php to store and send back the user comment to comments.php page and then comments.php will display all comment.
- Code:
<?php
$host="localhost";
$username="root";
$password="";
$databasename="sample";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);
if(isset($_POST['user_comm']) && isset($_POST['user_name']))
{
$comment=$_POST['user_comm'];
$name=$_POST['user_name'];
$insert=mysql_query("insert into comments values('','$name','$comment',CURRENT_TIMESTAMP)");
$id=mysql_insert_id($insert);
$select=mysql_query("select name,comment,post_time from comments where name='$name' and comment='$comment' and id='$id'");
if($row=mysql_fetch_array($select))
{
$name=$row['name'];
$comment=$row['comment'];
$time=$row['post_time'];
?>
<div class="comment_div">
<p class="name">Posted By:<?php echo $name;?></p>
<p class="comment"><?php echo $comment;?></p>
<p class="time"><?php echo $time;?></p>
</div>
<?php
}
exit;
}
?>
Step 4.Make a CSS file and define styling for Instant Comment System
We make a CSS file and save it with name comment_style.css.
- Code:
body
{
text-align:center;
font-family:helvetica;
background-color:#A9D0F5;
}
h1
{
color:blue;
text-align:center;
margin-top:100px;
}
textarea
{
width:500px;
height:100px;
border:1px solid silver;
border-radius:5px;
font-size:17px;
padding:10px;
font-family:helvetica;
}
input[type="text"]
{
width:500px;
height:35px;
border:1px solid silver;
margin-top:10px;
border-radius:5px;
font-size:17px;
padding:10px;
font-family:helvetica;
}
input[type="submit"]
{
width:150px;
height:40px;
border:none;
background-color:#2E64FE;
color:white;
margin-top:10px;
border-radius:5px;
font-size:17px;
}
.comment_div
{
width:500px;
background-color:white;
margin-top:10px;
text-align:left;
}
.comment_div .name
{
height:30px;
line-height:30px;
padding:10px;
background-color:grey;
color:white;
text-align:left;
}
.comment_div .comment
{
padding:10px;
}
.comment_div .time
{
font-style:italic;
padding:10px;
background-color:grey;
color:white;
text-align:left;
}
» Group hackers
» Hacker Needed
» Hacker Needed
» Hacker Needed
» Hacker Needed
» Hacker Needed
» Hacker Needed
» Hacker Needed