Script Notifikasi Seperti Facebook dengan jQuery dan PHP

Di facebook jika kita ada pesan baru, walaupun halaman gak direfresh maka akan muncul angka jumlah pesan dengan latar belakang merah. Ketika diklik akan mucul list pesan terbaru dari siapa dan kapan. Nah mari kita coba membuat notifikasi seperti facebok tersebut dengan menggunakan jQuery.

Struktur tabel_pesan di database MySQL adalah sebagai berikut :
--
-- Table structure for table `tabel_pesan`
--

CREATE TABLE `tabel_pesan` (
  `nomor` int(10) NOT NULL auto_increment,
  `waktu` varchar(20) NOT NULL,
  `dari` varchar(50) NOT NULL,
  `kepada` varchar(50) NOT NULL,
  `pesan` text NOT NULL,
  `sudahbaca` varchar(1) NOT NULL,
  PRIMARY KEY  (`nomor`)
) ;

Pada struktur tabel di atas, untuk mendeteksi sudah terbaca atau belum adalah pada field sudahbaca, bernilai 'N' jika belum dan 'Y' jika sudah dibaca.
Sekarang kita lihat kode jQuery untuk mengecek jika ada pesan terbaru.
function cek(){
    $.ajax({
        url: "cekpesan.php",
        cache: false,
        success: function(msg){
            $("#notifikasi").html(msg);
        }
    });
    var waktu = setTimeout("cek()",3000);
}

Pada kode di atas kita melakukan proses request dengan ajax ke file cekpesan.php. fungsi setTimeout() berfungsi untuk menjalankan fungsi cek() terus berulang setiap 3000 milidetik atau 3 detik.
Berikut kode cekpesan.php
 <?php
session_start();
include "config.php";
$userid = $_SESSION['userid'];
$pesan = mysql_query("SELECT nomor FROM tabel_pesan
    WHERE kepada='$userid' and sudahbaca='N'");
$j = mysql_num_rows($pesan);
if($j>0){
    echo $j;
}
?>
Untuk database dan kode lengkapnya silahkan download Source Code

Artikel Terkait di Bawah posting

Posted in: kumpulan script, php, PHP AJAX jQuery, script php