Powered byBlog Widgetand shared by JUNIAWAN89

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....

Previous
Next Post »

4 comments

Write comments
Anonymous
AUTHOR
February 15, 2014 at 4:47 AM delete

Mantabz gan....

Reply
avatar
Anonymous
AUTHOR
December 28, 2017 at 5:25 AM delete

Wow, wonderful blog layout! How long have you been blogging for?

you made blogging look easy. The overall look of your web site
is wonderful, let alone the content!

Reply
avatar

Pengunjung yang baik selalu memberikan masukan / komentar.... ConversionConversion EmoticonEmoticon

Popular