Membuat Notifikasi text dengan PHP dan AJAX

Jika Hanya mengandalkan PHP Untuk membuat Notifikasi maka rasanya hal itu kurang diinamis karena untuk pemrosesan data dengan PHP dilakukan disisi server jadi akan selalu ada proses refresh browser sebelum hasil ditampilkan. karena masalah tersebutlah muncul sebuah ide baru yang disebut dengan AJAX (Asynchronous JavaScript and XMLHTTP)

Dengan menggunakan AJAX tidak akan ada proses reload ulang halaman untuk melakukan suatu proses karena akan ada komunikasi secara continoue antar client side scripting (JavaScript) dengan server side scripting (PHP).

Langkah-Langkah Membuat Notifikasi Text dengan Ajax

1. Untuk hasil yang lebih maksimal, utamanya masalah tampilan, gunakan css untuk mempercantik tampilan. disini hanya sekedar contoh maka tidak ada desain

2. Selanjutnya. Buat sebuah database notifikasi dengan minimal sebuah tabel komentar. Dalam hal ini kita akan menampikan alert komentar yang ada pada tabel database. berikut contoh tabel yang saya gunakan.

3. Berikutnya adalah membuat sebuah halaman komentar atau index dengan contoh script sebagai berikut. 

<form action="aksi.php?aksi=input" method="post">
<table class="table">
<tbody>
<tr>
 <td>Nama</td><td><input name="nama" required="" type="text" /></td>
</tr>
<tr>
 <td>Email</td><td><input name="email" required="" type="text" /></td>
</tr>
<tr>
 <td>Komentar</td><td><textarea cols="30" name="komentar" required="" rows="5"></textarea></td>
</tr>
<tr>
 <td colspan="3"><center>
 <input name="komentar" type="submit" value="Kirim" />
 <input type="reset" value="Hapus" />
 </center>
</td>
</tr>
</tbody></table>
</form>

4. Kemudian kita perlu mengetikan sebuah script php untuk menghandel aksi atau aksi.php yang dilakukan oleh user (Pengiriman komentar) dah menghitung jumlah komentar yang ada didalam tabel database. contohnya sebagai berikut

<?php
 // Sisipkan File Koneksi
 include "koneksi.php";
 // Ambil Aksi
 $act = $_GET['aksi'];
 // Jikan Aksi = Input
 switch($act){
 case "input":
   $result = mysql_query("INSERT INTO komentar(id,
          nama,
          email,
          komentar,
          status) 
           VALUES('',
          '$_POST[nama]',
          '$_POST[email]',
          '$_POST[komentar]',
          'Baru')");
   if($result){
  ?>
   <script type="text/javascript">alert('Komentar Terkirim'); window.location = 'index.php';</script>
  <?php }else{?>
   <script type="text/javascript">alert('Ops, Ada Kesalahan'); window.location = 'index.php';</script>
  <?php }
 break; 
 // Jika Tidak Ada Aksi = Select
 case "select":
   $sql = mysql_query("SELECT * FROM komentar WHERE status='Baru'");
   $array = mysql_num_rows($sql);
   echo json_encode($array);
 break;
}
?>

5. Berikutnya adalah kita memerlukan sebuah jquery untuk itu silahkan download disini.

6. Yang Terakhir membuat aksi yang akan mengecek data yang ada di tabel komentar berdasarkan status komentar. Hal ini dilakukan secara continoue jadi ini semacam timer. silahkan letakan script ini didalam file komentar atau index anda.

<?php include "koneksi.php"; ?>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
   function ambilKomentar(){
   $.ajax({
      type: "POST",
      url: "aksi.php?aksi=select",
      dataType:'json',
      success: function(response){
       $("#jumlah").text(""+response+"");
       timer = setTimeout("ambilKomentar()",5000);
      }
     });  
  }
  $(document).ready(function(){
   ambilKomentar();
  });
  </script>
  <div class="menu">
  <ul>
  <li><a href="#">Komentar<span class="bubble" id="jumlah">0</span></a></li>
  </ul>
  </div>
 

7. sekian semoga bermanfaat.....