Ini Dia.. Membuat Script Notifikasi Seperti Facebook dengan jQuery dan PHP

By. AlgoritmaNews - 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 :


1	--
2	-- Table structure for table `tabel_pesan`
3	--
4
5	CREATE TABLE `tabel_pesan` (
6	`nomor` int(10) NOT NULL auto_increment,
7	`waktu` varchar(20) NOT NULL,
8	`dari` varchar(50) NOT NULL,
9	`kepada` varchar(50) NOT NULL,
10	`pesan` text NOT NULL,
11	`sudahbaca` varchar(1) NOT NULL,
12	PRIMARY KEY (`nomor`)
13	) ;
	view plain \| print \| ?

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.


1	function cek(){
2	$.ajax({
3	url: "cekpesan.php",
4	cache: false,
5	success: function(msg){
6	$("#notifikasi").html(msg);
7	}
8	});
9	var waktu = setTimeout("cek()",3000);
10	}
	view plain \| print \| ?

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


1	<?php
2	session_start();
3	include "config.php";
4	$userid = $_SESSION['userid'];
5	$pesan = mysql_query("SELECT nomor FROM tabel_pesan
6	WHERE kepada='$userid' and sudahbaca='N'");
7	$j = mysql_num_rows($pesan);
8	if($j>0){
9	echo $j;
10	}
11	?>
	view plain \| print \| ?

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

Refrensi