Sunday, July 24, 2011

ADD REPLY FUNCTIONALITY TO OUR COMMENT SYSTEM part1

continuing from http://phpcoderboard.blogspot.com/2011/06/learn-how-to-create-comment-system-with.html
first create a table and call it "reply" with 4 fields rid, repto, 
repname, repcom.
this page index.php
<?php
include_once "mysql.php";
//////render data that is already stored in the data base
$sql_comments = mysql_query("SELECT * FROM comment ORDER BY id DESC");
while($row = mysql_fetch_array($sql_comments)){
$id = $row["id"];
$name = $row["name"];
$comment = $row["comment"];


$sql_hreply = mysql_query("SELECT * FROM reply WHERE repto !='$id'" );
while($row = mysql_fetch_array($sql_hreply)){
$r = "";
}
$sql_reply = mysql_query("SELECT * FROM reply WHERE repto='$id'" );
while($row = mysql_fetch_array($sql_reply)){
$replycom = $row["repcom"];
$replyname = $row["repname"];
$r .= 'name : '.$replyname.'<br />comment : '.$replycom.'<hr>' ;


}  
$commentlist .= 'name : '.$name.'<br />comment : '.$comment.'<br /> <div id="'.$id.'" class="reply"><span>reply</span><hr>name<br />
<input type="text" id="repname'.$id.'" />
<br />
comment<br />
<textarea id="repcomment'.$id.'" cols="30" rows="2"></textarea>
<br />
<input type="submit" name="button" id="button" value="Submit" 
onclick="return false" onmousedown="javascript:reply('.$id.');"/></form>
<br />' . $r . '</div> <hr>';
}
//////////////the highlight is new code added to old script
?>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#loading').hide();
$('#notice').hide();
}); function wall(){
$('#loading').show();
var name = $('#name').val();///#name is the input id and will be equal the variable "name"
var comment = $('#comment').val();/////#comment is textarea id and will be equal the variable "comment"
var URL = "post.php"; /////post.php will be equal the variable "URL" $.post(URL,{wall:"post",name1:name,comment1:comment},function(data){
//parameter wall will be equal "post", name1 will be equal to the var "name" and comment1 will be equal to the var "comment"
$("#result").prepend(data);//.show() the result will be placed above the the #result div
$('#loading').hide();
var name = $('#name').val("");
var comment = $('#comment').val("");
});
} function reply(comid){  
var repname = $('#repname'+comid).val();///#repname is the input id and will be equal the variable "name"
var repcomment = $('#repcomment'+comid).val();/////#repcomment is textarea id and will be equal the variable "comment"
alert(comid + "" + repname + " " + repcomment) var URL = "post.php"; /////post.php will be equal the variable "comment"
$.post(URL,{wall:"reply",repname1:repname,repcomment1:repcomment,repto1:comid},function(data){

//parameter wall will be equal "post", repname1 will be equal to the var "repname" and repcomment1 will be equal to the var "repcomment"
$("#"+ comid).append(data);//render result
//$('#loading').hide();
var repname = $('#repname'+comid).val("");
var repcomment = $('#repcomment'+comid).val("");
});
}  
</script>


<style type="text/css">
<!--
#notice {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #660000;
background-color: #FFF2F2;
padding: 5px;
border: 1px solid #FF6666;
text-align: center;
}
.reply {
margin-left: 50px;
}
span{
font-size: 14px;
font-weight: bold;
color: #333333;
}
-->
</style>  
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><form>
name<br />
<input type="text" id="name" />
<br />
comment<br />
<textarea id="comment" cols="45" rows="5"></textarea> <br />
<input type="submit" name="button" id="button" value="Submit" onclick="return false" onmousedown="javascript:wall();"/>
<img src="loading.gif" alt="" width="15" height="15" id="loading" />
<br /></form>
<div id="notice">Your comment will be reviewed by the webmaster before publishing</div>
<div id="result"><?php print"$commentlist";?></div></td>
</tr>



No comments:

Post a Comment