Membuat Script Notifikasi Seperti Facebook dengan jQuery dan PHP Membuat Script Notifikasi Seperti Facebook dengan jQuery dan PHP

07:12 24 Oct 2010 @Ajax
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 :

<br /> --<br /> -- Table structure for table `tabel_pesan`<br /> --<br /> <br /> CREATE TABLE `tabel_pesan` (<br /> `nomor` int(10) NOT NULL auto_increment,<br /> `waktu` varchar(20) NOT NULL,<br /> `dari` varchar(50) NOT NULL,<br /> `kepada` varchar(50) NOT NULL,<br /> `pesan` text NOT NULL,<br /> `sudahbaca` varchar(1) NOT NULL,<br /> PRIMARY KEY (`nomor`)<br /> ) ;<br />

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.

<br /> function cek(){<br /> $.ajax({<br /> url: "cekpesan.php",<br /> cache: false,<br /> success: function(msg){<br /> $("#notifikasi").html(msg);<br /> }<br /> });<br /> var waktu = setTimeout("cek()",3000);<br /> }<br />

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. Untuk Belajar jQuery silahkan
baca di pengenalan jQuery dan
Tutorial jQuery Ajax.
Berikut kode cekpesan.php

<br /> <?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){<br /> echo $j;<br /> }<br /> ?><br />

Pada kode diatas kita melakukan query, cek jika ada pesan untuk $userid dan
belum dibaca (sudahbaca='N').
$userid kita dapat dari variabel
$_SESSION yang sudah kita set di
halaman utama. Bagaimana cara menggunakan
$_SESSION silahkan baca di artikel Membuat Login
Multi User dengan PHP.
Untuk database dan kode lengkapnya silahkan
download Source Code |
lihat demo