MySQL:
Create tables for the comments and the content being commented.
CREATE TABLE `
content ` (
`id` INT NOT NULL ,
`content` VARCHAR( 50 ) NOT NULL
) ENGINE = MYISAM ;
CREATE TABLE `comments ` (
`comment_id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`id` INT NOT NULL ,
`ip` VARCHAR( 50 ) NOT NULL ,
`username` VARCHAR( 50 ) NOT NULL ,
`comment` TEXT NOT NULL ,
`date_time` VARCHAR( 100 ) NOT NULL
) ENGINE = MYISAM ;
jQuery:
<?php $id = $_GET [ 'id' ]; ?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" ></script>
<script>
$(function(){
$(
"#submit" ).click(function(){
var u
= $(
'#u' ).val();
var c
= $(
'#c' ).val();
var data
= 'u='+ u
+'&c='+ c
+'&id= <?php echo $id ;
?> ' ;
$.ajax
({
type
: 'POST' ,
url
: 'post-comment.php' ,
data
: data,
success
: function(e){
if (e){
if (
! $(
'#error' ).is(
':visible' )){
$(
"#error" ).html(e).fadeIn(
500 ).delay(
2000 ).fadeOut(
500 );
}
}
else {
if (
! $(
'#posted' ).is(
':visible' )){
$(
"#posted" ).html(
"Comment posted" ).fadeIn(
500 ).delay(
2000 ).fadeOut(
500 );
}
$.get(
'ajax-comments.php?id= <?php echo $id ;
?> ' , function(d){
$(
"#comment_posts" ).html(d);
});
$(
'#u, #c' ).val(
'' );
}
}
});
});
$(
".page" ).live(
"click" , function(){
var id
= $(
this ).attr(
"id" );
$.get(
'ajax-comments.php?page='+ id, function(d){
$(
"#comment_posts" ).html(d);
});
});
$(
'.comments' ).live(
"mouseover" , function(){
var id
= $(
this ).attr(
"id" ).
substr (
1 );
$(
"#d"+ id).show();
}).live(
"mouseout" , function(){
var id
= $(
this ).attr(
"id" ).
substr (
1 );
$(
"#d"+ id).hide();
});
$(
'.trash' ).live(
"click" , function(){
var id
= $(
this ).attr(
"id" ).
substr (
1 );
var data
= 'comment_id='+ id;
$.ajax({
type
: 'POST' ,
url
: 'delete-comment.php' ,
data
: data,
success
: function(e){
if (e){
$(
"#error" ).html(e).fadeIn(
500 ).delay(
2000 ).fadeOut(
500 );
}
else {
if (
! $(
'#posted' ).is(
':visible' )){
$(
"#posted" ).html(
"Comment deleted" ).fadeIn(
500 ).delay(
2000 ).fadeOut(
500 );
}
$.get(
'ajax-comments.php' , function(d){
$(
"#comment_posts" ).html(d);
});
}
}
});
});
});
</script>
<style>
#error {
color: #ed3232 ;
display: none ;
font-size: 14px ;
}
#posted {
color: #32baed ;
display: none ;
font-size: 14px ;
}
table.comments {
border-left: 1px #ef89ff solid ;
border-right: 1px #ef89ff solid ;
border-bottom: 1px #ef89ff solid ;
position: relative ;
width: 300px ;
}
table.comments:first-child {
border-top: 1px #ef89ff solid ;
}
.page:hover {
cursor: pointer ;
text-decoration: underline ;
}
.trash {
display: none ;
position: absolute ;
right: 3px ;
bottom: 15px ;
width: 15px ;
}
.p {
background: #32baed ;
}
#tip {
height: 1px ;
left: 6px ;
position: absolute ;
top: -1px ;
width: 3px ;
}
#top {
height: 2px ;
width: 15px ;
}
#p1 {
height: 8px ;
left: 3px ;
position: absolute ;
-webkit-transform: rotate(355deg) ;
top: 2px ;
width: 1px ;
}
#p2 {
height: 8px ;
left: 7px ;
position: absolute ;
top: 2px ;
width: 1px ;
}
#p3 {
height: 8px ;
right: 3px ;
position: absolute ;
-webkit-transform: rotate(5deg) ;
top: 2px ;
width: 1px ;
}
#bottom {
top: 10px ;
height: 2px ;
left: 3px ;
position: absolute ;
width: 9px ;
}
</style>
</head>
<body>
<input id="u" placeholder="Name..." ><br>
<textarea id="c" placeholder="Comment..." ></textarea><br>
<input id="submit" type="button" value="Comment" ><br>
<span id="error" ></span>
<span id="posted" ></span><br><br>
<div id="comment_posts" >
<?php
include 'ajax-comments.php' ;
?>
</div>
</body>
</html>
ajax-comments.php , file with the list of comments
<?php $connect = mysql_connect ( "server" , "username" , "password" ); $db = mysql_select_db ( "your_database" , $connect ); $id = $_GET [ 'id' ]; $ip = $_SERVER [ 'REMOTE_ADDR' ]; $page = 1 ; if( $_GET [ 'page' ]){ $page = $_GET [ 'page' ]; } $rrp = 5 ; $o = ( $page - 1 )* $rrp ; $q = mysql_query ( "SELECT * FROM comments ORDER BY comment_id DESC LIMIT $o, $rrp" ); while( $r = mysql_fetch_array ( $q )){ $c = eregi_replace ( '\r\n' , '<br>' , $r [ 'comment' ]); $u = $r [ 'username' ]; $date = $r [ 'dateposted' ]; if( $r [ 'ip' ]== $ip ){ $delete = '<div class="trash" id="d' . $r [ 'comment_id' ]. '"> <div class="p" id="top"></div> <div class="p" id="tip"></div> <div class="p" id="p1"></div> <div class="p" id="p2"></div> <div class="p" id="p3"></div> <div class="p" id="bottom"></div> </div>' ; } $comment .= '<table class="comments" id="t' . $r [ 'comment_id' ]. '"><tr><td><b>' . $u . '</b><br>' . $c . '<br><br><span style="color:#32baed; font-size:12px">' . $date . '</span>' . $delete . '</td></tr></table>' ; } echo $comment ; $q = mysql_query ( "SELECT * FROM comments WHERE id='$id'" ); $n = mysql_num_rows ( $q ); $pages = ceil ( $n / $rrp ); $range = 4 ; if( $pages > 1 ){ if( $page > 1 ){ $first = '<a class="page" id="1">First</a> ' ; $prev = '<a class="page" id="' .( $page - 1 ). '">Prev</a> ' ; } if( $page < $pages ){ $next = '<a class="page" id="' .( $page + 1 ). '">Next</a> ' ; $last = '<a class="page" id="' . $pages . '">Last</a> ' ; } for( $p =( $page - $range ); $p <=( $page + $range ); $p ++){ if( $p >= 1 && $p <= $pages ){ if( $p == $page ){ $nav .= '<span style="color: #32baed">' . $p . '</span> ' ; } else { $nav .= '<a class="page" id="' . $p . '">' . $p . '</a> ' ; } } } } echo $first . $prev . $nav . $next . $last ; ?>
post-comment.php , ajax file where comment posts would be processed
<?php $connect = mysql_connect ( "server" , "username" , "password" ); $db = mysql_select_db ( "your_database" , $connect ); $ip = $_SERVER [ 'REMOTE_ADDR' ]; $id = $_POST [ 'id' ]; $username = $_POST [ 'u' ]; $comment = $_POST [ 'c' ]; $dateposted = date ( "D, M d, Y" ) . ' at ' . date ( "h:i A" ); $sc = substr_count ( $comment , " " ); $su = substr_count ( $username , " " ); if( $sc < strlen ( $comment )){ if( $su < strlen ( $username )){ mysql_query ( "INSERT INTO comments VALUES('','$id','$ip','$username','$comment','$dateposted')" ); } else { echo 'Please enter a name' ; } } else { echo 'Comment cannot be blank' ; } ?>
delete-comment.php , ajax file where comments would be deleted
<?php $connect = mysql_connect ( "server" , "username" , "password" ); $db = mysql_select_db ( "your_database" , $connect ); $ip = $_SERVER [ 'REMOTE_ADDR' ]; $comment_id = $_POST [ 'comment_id' ]; $q = mysql_query ( "SELECT * FROM comments WHERE comment_id='$comment_id' AND ip='$ip'" ); $n = mysql_num_rows ( $q ); if( $n ){ mysql_query ( "DELETE FROM comments WHERE comment_id='$comment_id' AND ip='$ip'" ); } else { echo 'Error deleting comment' ; } ?>
Views: 402 Likes: 5 Dislikes: 1