Membuat Komentar Dengan Jquery

Kali ini saya akan berbagi tentang cara membuat komentar dengan menggunakan jquery namun saya tidak memasukkan kedalam database dan Anda bisa merubahnya jika akan memasukkan kedalam database.

                     


Skrip kode dibawah ini adalah jquery untuk proses pengiriman data kemudian langsung di tampilkan

//fungsi untuk memproses pengiriman komentar dengan jQuery
$(function() {
//proses setelah button submit di klik
$(".kirimkeun").click(function() {
//data yang terdapat pada input nama
var ngaran = $("#ngaran").val();
//data yang terdapat pada input email
var email = $("#email").val();
//data yang terdapat pada input komentar
var comment = $("#comment").val();
//memanggil semua data yang akan di eksekusi
var dataString = 'ngaran='+ ngaran + '&email=' + email + '&comment=' 
     + comment;
 //membuat validasi apabila terdapat input teks yang kosong
 if(ngaran=='' || email=='' || comment=='')
   {
    alert('Tidak Boleh ada yang kosong');
   }
 else
 {
 //menampilkan loading sebelum komentar muncul
 $("#flash").show();
 $("#flash").fadeIn(400).html('<div style="margin-left:160px;
   "><img src="images/loading.gif" align="absmiddle">&nbsp;
   <span class="loading">Silahkan tunggu...</span></div>');
 $.ajax({
  //proses eksekusi data dengan method post
  type: "POST",
    //menentukan file dimana data yang terdapat pada input
      teks di eksekusi
  url: "komentarajax.php",
  data: dataString,
  cache: false,
  success: function(html){
  //menampilkan data apabila data berhasil di eksekusi
  $("ol#update").append(html);
  $("ol#update li:last").fadeIn("slow");
  //mengembalikan input teks menjadi kosong apabila data
      berhasil di eksekusi
  document.getElementById('email').value='';
  document.getElementById('ngaran').value='';
    document.getElementById('comment').value='';
  $("#ngaran").focus();
  
  $("#flash").hide();
  
   }
  });
}
return false;
 });



});

Dari kode di atas telah saya masukkan penjelasan mengenai fungsi dari skrip tersebut jadi saya tidak perlu jelaskan kembali.
Untuk file prosesnya Anda buat skrip kode dibawah ini dengan nama file komentarajak.php.

<?php
if($_POST){
//hasil data yang akan di eksekusi dari input teks
$ngaran        = $_POST['ngaran'];
$email          = $_POST['email'];
$comment    = $_POST['comment'];

}
?>
<!-- menampilkan hasil dari data yang dikirim tadi -->
<li class="box">
    <img src="images/no-avatar.png" style="float:left; width:80px;
    height:80px; margin-right:20px"/>
    <span style="font-size:16px; color:#663399; font-weight:bold">
    <?php echo $ngaran;?></span><br /><br />

    <?php echo $comment; ?>
</li> 

Sekarang kita buat tampilan form untuk mengirimkan data atau untuk mengirim komentarnya.

<div id="header">
      <a href="http://www.infobelajar.com">
          <img src="https://lh6.googleusercontent.com/-pirzIcLYm7c/
          UQFQuAgcPUI/AAAAAAAAAXo/3I5qJAFME4Y/s334/
          logofv.png" width="200px;">
    </a>
</div>
<div id="content">
<center>
<table border="0">
    <tr>
        <td valign="top" style="min-height:500px;">
            <div id="demo">
                <div id="main">
                    <ol  id="update" class="timeline"></ol>
                    <div id="flash" align="left"  ></div>
                    <center>
                        <form action="#" method="post" id= 
                        "formurang">
                            <input type="text" name="ngaran" id= 
                            "ngaran" placeholder="Nama Anda..."  
                            style="padding-left:8px"/>
                            <input type="text" name="email" id= 
                             "email" placeholder="Email Anda..."
                              style="padding-left:8px"/><br>
                            <textarea name="comment" id="comment"
                             style="width:420px"
                             placeholder="Komentar Anda...">
                            </textarea><br />
                            <div style="margin-left:360px">
                                <button class="kirimkeun" id= 
                                "buttonkomen" type="submit"
                                 onclick="$.('#formurang').submit();">
                                Submit</button>
                            </div>
                        </form>
                    </center>
                </div>
            </div>
            <div id="bawahdemo">
                <b>Demo</b>
            </div>
        </td>
    </tr>
    <tr>
        <td align="center" colspan="2" style="font-size:11px;">
            Copyright &copy;2013 powered by
            <a href="http://www.infobelajar.com">www.infobelajar.com</a>
        </td>
    </tr>
</table>
</center>
</div>

Sekian share komentar jquery semoga dapat bermanfaat.