Membuat Form Komentar dengan PHP dan Ajax

Oleh Juniawan89 18 Jul, 2013 4 komentar

Membuat Form Komentar Ajax

Berikut kode untuk membuat form komentar dengan Ajax:

Simpan dengan nama komentarajax.php

<html>

<head>

<title>Komentar Ajax</title>

<style>

a{color:#00505E}

a:hover{text-decoration:none}

div.komentar{background-color:#B8DCDC;padding:5;

border-bottom:#036885 1px solid;font-family:verdana;font-size:8pt}

div.inputkomen{display:none}

#msgloading{position:absolute;z-index:1000;top:300;left:200;

width:200;height:80;background-color:#648BFF;border:#003FFB 1px solid;display:none}

div.komentar2{padding:5;background-color:#DEEFEF;color:#316464}

.inputteks1{border:#036885 1px solid}

</style>

var show = "hilang";

var iddiv;

var iddivkomen;

var idsebelumnya = "";

var drz;

var idnama;

var idweb;

var idkomen;

function muncul(id){

if(id!=idsebelumnya){

show = "hilang";

}

iddiv = "inputkomentar"+id;

iddivkomen = "komentar"+id;

idsebelumnya = id;

if(show=="hilang"){

document.getElementById(iddiv).style.display = "block";

document.getElementById(iddivkomen).style.display = "block";

show = "muncul";

ambil(id);

}else{

document.getElementById(iddiv).style.display = "none";

document.getElementById(iddivkomen).style.display = "none";

show = "hilang";

}

function ambil(id){

iddivkomen = "komentar"+id;

idnama = "nama"+id;

idweb = "web"+id;

idkomen = "komen"+id;

munculloading();

drz = buatajax();

var url="ambilkomentar.php";

url=url+"?topikid="+id;

url=url+"&sid="+Math.random();

drz.onreadystatechange=stateChanged;

drz.open("GET",url,true);

drz.send(null);

}

function kirim(id){

iddivkomen = "komentar"+id;

idnama = "nama"+id;

idweb = "web"+id;

idkomen = "komen"+id;

namax = document.getElementById(idnama).value;

web = document.getElementById(idweb).value;

komen = document.getElementById(idkomen).value;

if(namax.length > 0 && komen.length > 2){

munculloading();

drz = buatajax();

var url="isikomentarajax.php";

url=url+"?topikid="+id;

url=url+"&nama="+namax;

url=url+"&web="+web;

url=url+"&komentar="+komen;

url=url+"&sid="+Math.random();

drz.onreadystatechange=stateChanged;

drz.open("GET",url,true);

drz.send(null);

}

function buatajax(){

if (window.XMLHttpRequest){

return new XMLHttpRequest();

}

if (window.ActiveXObject){

return new ActiveXObject("Microsoft.XMLHTTP");

}

return null;

}

function stateChanged(){

var data;

if (drz.readyState==4){

data=drz.responseText;

hilangloading();

document.getElementById(iddivkomen).innerHTML = data;

document.getElementById(idnama).value = "";

document.getElementById(idweb).value = "";

document.getElementById(idkomen).value = "";

}

function munculloading(){

var dsocleft=document.body.scrollLeft;

var dsoctop=document.body.scrollTop;

document.getElementById("msgloading").style.top = parseInt(dsoctop) + 300;

document.getElementById("msgloading").style.display = "block";

}

function hilangloading(){

document.getElementById("msgloading").style.display = "none";

}

</script>

</head>

<body>

<center><img src=loading.gif><br>Loading... </center>

</div>

<?php

mysql_connect("localhost","root","") or die("tidak bisa koneksi ke database");

mysql_select_db("test");

$blog = mysql_query("select * from topik order by nomor desc limit 5");

while($b=mysql_fetch_row($blog)){

echo "<div class=judul><b><font size=\"5\"><a href=baca.php?no=$b[0] class=link0>$b[1]</a>

</div>

<a href=javascript:(muncul($b[0])) class=isi>Komentar ($b[5])</a>

</div>

<br>

Nama : <input type=text name=nama id=nama$b[0] class=inputteks1>

Web : <input type=text name=email id=web$b[0] class=inputteks1>

<br>

<br>

<button onclick=kirim($b[0])>Input</button>

</div>

</div><br>";

}

</td></tr></table>

</body>

</html>

Berikut kode untuk mengambil komentar :

Simpan dengan nama ambilkomentar.php

<?php

mysql_connect("localhost","root","") or die("tidak bisa koneksi ke database");

mysql_select_db("test");

$topikid = $_GET['topikid'];

$query = mysql_query("select * from komentar where topikid=$topikid");

while($q = mysql_fetch_array($query)){

echo "<br><div class=komentar2><b>Nama :</b> $q[2]";

echo ", $q[5] <br>";

echo "<b>komentar : </b>$q[6]</div>";

}

Berikut kode untuk mengisi komentar :

Simpan dengan nama isikomentarajax.php

<?php

mysql_connect("localhost","root","") or die("tidak bisa koneksi ke database");

mysql_select_db("test");

$waktu = date("H:i d M Y");

$email ="gabenk@yahoo.com";

$topikid = $_GET['topikid'];

$nama = $_GET['nama'];

$komentar = $_GET['komentar'];

$web = $_GET['web'];

$nama = htmlspecialchars($nama);

$email = htmlspecialchars($email);

$web = htmlspecialchars($web);

$komentar = htmlspecialchars($komentar);

$isi = mysql_query("insert into komentar values(

null,'$topikid','$nama','$waktu','$email','$web','$komentar')");

$isi = mysql_query("update topik set komentar=komentar+1 where nomor=$topikid");

$query = mysql_query("select * from komentar where topikid=$topikid");

while($q = mysql_fetch_array($query)){

echo "<br><div class=komentar2><b>Nama :</b> $q[2]";

echo ", $q[5] <br>";

echo "<b>komentar : </b>$q[6]</div>";

}

Jika dijalankan tampilan nya sebagai berikut :

Download code lengkap disini

Selesai...

Semoga Bermanfaat....