instructor: December 2012

oki guys with this im gona teach you how to create a simple commenting system for your web site, im only adding to this tutorial the posting ability but i leave the hint and space for controllers deleting and updating ,date time and likes ..

i use MySQL database to save the comment and PHP as a server side scripting language and for the user side controlling i use javascript JQuery for Ajax (Asynchronize JavaScript and XML) contralling with JSON (JavaScript Object Notation) oki i put all the coding below if you need more explanation or ferter instruction plz msg me by mail or by FB.

Index.php

-----------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Adzing.tk comment manager</title>

function save_thread(){

$.post (

'php/save_thread.php' ,

{

uname: $("#txtTUn").val(),

value: $("#txtthread").val()

} ,

function (data){

if( data.err == undefined ){

$("#txtTUn").val("");

$("#txtthread").val("");

var conct = "<div class='threadset' id='t"+data.stid+"'>";

conct += "<div class ='thrdCont'><div class='tbody'><span class='uname'>"+data.cmtu+": </span>"+data.cmt+"</div><div class='buttons' ><a href='#'>delete</a></div></div>"

conct += "<div class='CmntSet'><div class='comenter' id='tcom"+data.stid+"'>";

conct +="<table border='0' width='100%' cellpadding='5' cellspacing='0'><tr><td>User Name: </td><td><input class='inp' type='text' maxle ngth='50' id='txtcommentUn"+data.stid+"'/></td></tr><tr><td>Comment: </td><td><textarea class='inp' id='txtcomment"+data.stid+"'></textarea></t d></tr><tr><td colspan='2' class='buttons'><input type='button' onclick='save_coment(\""+data.stid+"\")' value='Post'/></td></tr></table></div></div ></div>" ;

$("#comntArea").prepend(conct);

}else{

alert ( data.err ) ;

}

} ,

'json'

);

};

function save_coment(tid){

$.post(

'PHP/save_coment.php',

{

uname: $ ( "#txtcommentUn"+tid ) .val () ,

value: $("#txtcomment"+tid).val(),

stid: tid

} ,

function (data){

if( data.err == undefined ){

$("#txtcommentUn"+tid).val("");

$("#txtcomment"+tid).val("");

var cnt ="<div class='comntCont' id='c"+data.cmtId+"'><div class='cbody'><span class='uname'>"+data.cmtu+" : </span>"+data.cmt+"</ div><div class='buttons'><a href='#' onclick=''>delete</a></div></div>";

$ ( "#tcom"+tid ) .before ( cnt ) ;

}else{

alert(data.err);

}

'json'

);

};

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Thread: </td>

</tr>

<tr>

</td>

</tr>

</table>

</div>

<?php

include("php/connectDB.php");

$sqlQuery = "SELECT `tid`, `dtime`, `tname`, `tcomment` FROM `thread` ORDER BY `dtime` DESC LIMIT 0, 10"

$sqlTResult = mysql_query($sqlQuery)or die();

if(mysql_num_rows($sqlTResult) > 0 ){ 89 while($traw = mysql_fetch_array($sqlTResult)){

echo "<div class='threadset' id='t".$traw['tid']."'>";

echo "<div class ='thrdCont'><div class='tbody'><span class='uname'>".$traw['tname'].": </span>".$traw['tcomment']."</div>< div class='buttons'><a href='#'>delete</a></div></div>";

echo "<div class='CmntSet'>";

$sqlQuery = "SELECT `cid`, `tid`, `cdtime`, `cname`, `ccomment` FROM `t_comment` WHERE `tid`=".$traw['tid']." ORDER BY `c dtime` ASC LIMIT 0,10 ";

$sqlCResult = mysql_query($sqlQuery)or die();

if(mysql_num_rows($sqlCResult) > 0 ){

while($craw = mysql_fetch_array($sqlCResult)){

echo "<div class='comntCont' id='c".$craw['cid']."'>

<div class='cbody'><span class='uname'>".$craw['cname']." : </span>".$craw['ccomment']."</div>

<div class='buttons'><a href='#' onclick=''>delete</a></div></div>";

}

echo "<div class='comenter' id='tcom".$traw['tid']."'><table border='0' width='100%' cellpadding='5' cellspacing='0'><tr><td>U ser Name: </td><td><input class='inp' type='text' maxlength='50' id='txtcommentUn".$traw['tid']."'/></td></tr><tr><td>Comment: </td><td> <textarea class='inp' id='txtcomment".$traw['tid']."'></textarea></td></tr><tr><td colspan='2' class='buttons'><input type='button' onclick ='save_coment(\"".$traw['tid']."\")' value='Post'/></td></tr></table></div></div></div>";

}

</div>

<div id="footer">Adcreation.Mtl - Contact: 0750923211 email: admin@adzing.tk</div>

</div>

</body>

</html>

index.Css
----------------------------------------------------------------------------------

@charset "utf-8";

/* CSS Document */

#wrapper {

background-color: #CCC;

height: auto;

width: 500px;

margin-top: 10px;

margin-right: auto;

margin-bottom: 10px;

margin-left: auto;

text-align: center;

}

#wrapper #topdiv {

float: left;

height: auto;

width: 100%;

background-color: #999;

}

#wrapper #comntArea {

float: left;

height: auto;

width: 100%;

margin-top: 20px;

margin-bottom: 20px;

}

.threadset {

text-align: left;

background-color: #F00;

margin-top: 10px;

border-top-width: thin;

border-bottom-width: thin;

border-top-style: groove;

border-bottom-style: groove;

border-top-color: #999;

border-bottom-color: #999;

}

.CmntSet {

height: auto;

width: 90%;

padding-left: 10%;

background-color: #CF0;

}

table {

text-align: left;

}

.inp {

width: 99%;

}

.buttons {

text-align: right;

}

textarea {

width: 99%;

height: 100px;

}

#wrapper #footer {

float: left;

width: 100%;

background-color: #CCC;

}

.thrdCont {

padding: 1%;

text-align: left;

}

.comntCont {

padding: 1%;

border-bottom-width: 3px;

border-bottom-style: groove;

border-bottom-color: #0FF;

text-align: left;

background-color: #9C0;

}

.uname {

font-weight: bolder;

color: #00F;

}

.comenter {

background-color: #9C0;

}

instructor

Sunday, December 2, 2012

Simple commenting system