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

Share this

Related Posts

Previous
Next Post »

10 comments

comments
13 May 2015 at 10:52 delete

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

Reply
avatar
Anonymous
19 May 2015 at 15:56 delete

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

Reply
avatar
2 August 2015 at 19:03 delete

maaf, kalo menghilangkan notifikasinya setelah dilihat gimana mas ?

Reply
avatar
20 December 2015 at 16:56 delete

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

Reply
avatar
28 January 2016 at 00:13 delete

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

Reply
avatar
10 February 2016 at 23:58 delete

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

Reply
avatar
21 July 2016 at 14:31 delete

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.

Reply
avatar
20 September 2016 at 00:27 delete

kalo notifnya dari beberapa tabel gimana gan??

Reply
avatar
12 December 2016 at 22:00 delete

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

Reply
avatar
10 March 2017 at 01:56 delete

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

Reply
avatar

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.