Membuat Form Komentar dengan PHP dan Ajax

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>

<script>
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>
<!---kotak untuk memunculkan animasi loading--->
<div id=msgloading><br>
<center><img src=loading.gif><br>Loading... </center>
</div>
<!--------------------------------------------->
<table border=0 width=500><tr><td>
<?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>
          <div class=konten></font></b><font size=\"2\">$b[2] @$b[3]</font><p>$b[4]</div>
          <br><div class=komentar><img src=komentar1.gif align=left>
          <a href=javascript:(muncul($b[0])) class=isi>Komentar ($b[5])</a>
          <div id=komentar$b[0]>
          </div>
          <div id=inputkomentar$b[0] class=inputkomen>
          <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>
          <textarea name=komen$b[0] cols=45 class=inputteks1 id=komen$b[0]></textarea>
          <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....