Membuat Notifikasi Seperti Facebook dengan PHP dan AJAX

Jika Hanya mengandalkan PHP Untuk membuat Notofikasi seperti Facebook maka rasanya hal itu tidaklah mungkin 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). Mantap Bukan ?

Langkah-Langkah Membuat Notifikasi Seperti Facebook dengan Ajax

1. Untuk hasil yang lebih maksimal, utamanya masalah tampilan, saya merekomendasikan anda untuk membaca postingan saya sebelumnya tentang membuat tampilan notifikasi seperti facebook dengan css disini.

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

Membuat Notifikasi Seperti Facebook dengan PHP dan Ajax

3. Berikutnya adalah membuat sebuah halaman komentar dengan contoh script sebagai berikut. 
  <form method="post" action="aksi.php?aksi=input">
  <table class="table">
  <tr>
   <td>Nama</td><td><input type="text" name="nama" required /></td>
  </tr>
  <tr>
   <td>Email</td><td><input type="text" name="email" required /></td>
  </tr>
  <tr>
   <td>Komentar</td><td><textarea cols="30" rows="5" name="komentar" required></textarea></td>
  </tr>
  <tr>
   <td colspan="3">
   <center>
   <input type="submit" value="Kirim" name="komentar"/> 
   <input type="reset" value="Hapus"/>
   </center>
   </td>
  </tr>
  </table>
  </form>
4. Kemudian kita perlu mengetikan sebuah script php untuk menghandel aksi 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 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. Jangan Lupa untuk membuat file koneksi database. Hasil yang saya peroleh adalah sebagai berikut.
Membuat Notifikasi Seperti Facebook dengan PHP dan AJAX

Post a Comment

13 Comments

  1. untuk insert nya cuman bisa sekali aja gan? ane coba insert data kedua kok malah salah? mohon pencerahan gan

    ReplyDelete
  2. saya noob saya ngak ngerti cara peletakkan file nya.. gimana

    ReplyDelete
  3. maaf, kalo menghilangkan notifikasinya setelah dilihat gimana mas ?

    ReplyDelete
    Replies
    1. buat query update mas, jika komentar dilihat maka update 'baru' menjadi 'lama'.

      Delete
  4. ini cuma nampilin jumlah dari komentarnya?
    kenapa ribet2 pake javascript dll?

    kenapa ga pake mysql_num_rows ?

    kecuali kalo ini nampilin jumlah pesan yang belum dibaca, ketika di baca jumlah notifikasinya berkurang. itu baru bagus

    ReplyDelete
    Replies
    1. Kalo saran seperti yg agan tulis di komen ini ada contohnya, cek disini gan: http://britha.com/inbox
      disana kalo pesan udah dibaca akan berkurang jumlah notifnya

      Delete
  5. Min gimana caranya bikin notifikasi ke komputer yang dituju ? Misalnya si user ngeinput dikomputernya sendiri terus ngesubmit nah pas si user ngesubmit muncul notif di komputer nya si admin.

    ReplyDelete
  6. kalo notifnya dari beberapa tabel gimana gan??

    ReplyDelete
  7. thx gan sy dr kemarin cari ini
    skrip ini tinggal ditingkatkan kalo sudah dibaca nanti bakal berkurang sendiri notif nya bagi yg mengerti

    ReplyDelete
  8. wooow ini mungkin yang saya magsud :) di coba dulu ah :)

    ReplyDelete
  9. Ooow! It's wek, wek, wek.... Thanks, Gan!

    ReplyDelete
  10. mas klo notifikasinya di kasih suara bisa ga

    ReplyDelete
  11. kenapa internal server error ya?

    ReplyDelete

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.