Jquery Ajax kullanarak basit bir bildirim sistemi yapımının mantığını anlatacağım. Fazla detaylı bir sistem olmasa da, mantığını anlayacağınızı umuyorum.

Nasıl bir yol izleyeceğiz?

Bildirim sisteminde bildirimlerin içeriği değil de, yeni bir bildirim var mı? kontrolünü yapıp, yeni bildirim sayısını yazdıracağız. Tabi siz isterseniz Mysql yapısını değiştirip sistemi kendinize göre ayarlayabilirsiniz.

Öncelikle “bildirimler” adında, içerisinde sadece “id” ve “sayi” sütunları bulunan bir tablo oluşturuyoruz. Ve 1 tane satır oluşturup, “sayi” sütununa “0” yazıyoruz.

Her yeni bildirim geldiğinde bu 0 sayısı artacak. Jquery ile ise bu dosyanın içeriğini çekip, içerisinde bulunan değer 0 dan farklı ise bildirim sayısının yazılacağı alana bu değeri yazdırıyoruz. Tabi bu değer belirli aralıklarla kontrol ediliyor.

Bildirime tıklandığında ise, php dosyasına “sifirla” değeri Post edilir ve bildirim sayısı sıfırlanır.

Bildirim.php

//Mysql bağlantısı
$kullaniciadi = "root";
$sifre = "password";
$host = "localhost";
$veritabani = "bildirimler";

$baglanti = mysql_connect($host,$kullaniciadi,$sifre) or die(mysql_error());
mysql_select_db($veritabani,$baglanti) or die(mysql_error());

//Tablo sorguları
$bildirim_sorgu = mysql_query("select * from bildirimler"); //Bildirimler tablosudaki verileri aldık.
$bildirim_sayisi = mysql_fetch_array($bildirim_sorgu); //Tüm satırları bir arraya aktardık.

$veriler = array("sayi" => $bildirim_sayisi["sayi"]); //Yeni bir array oluşturup "sayi" değerine, tablodan
//çekilen veriyi atadık.

echo json_encode($veriler); //Verileri Json formatına çevirip yazdırdık.

if($_POST) {
$islem = $_POST["islem"];
if($islem == "sifirla") {
mysql_query("UPDATE bildirimler SET sayi='0'"); //Eğer "sifirla" işlemi Post edilirse, tablodaki "sayi" değerini sıfırladık.
//Yani bildirim sayısı sıfırlandı.
}
}
?>

Index.html






<script></script>
<script>
$(document).ready(function() {
$("#bildirim").find("#bildirim_sayisi").hide(); //Bildirim sayisi bölümünü gizledik.
var bildirim;

setInterval(function() { //100 milisaniyede bir bildirim.php'de bulunan değeri kontrol ettik.
$.get( "bildirim.php", function(data) { //bildirim.php'deki değeri alıyoruz.
bildirim = data.sayi;
if(bildirim != 0) { //Eğer gelen değer 0'dan farklıysa,
$("#bildirim").find("#bildirim_sayisi").html(bildirim); //Bildirim değerini yazdırıyoruz.
}
});
},100);

$("#bildirim").click(function() { //Bildirime tıklandığında,
$.ajax({ //bildirim.php'ye "sifirla" işlemini Post ediyoruz.
type: "POST",
url: "bildirim.php",
data: "islem=sifirla",
success: function(gelen) { //Başarılı olursa,
$("#bildirim").find("#bildirim_sayisi").html(""); //Bildirimi sıfırlıyoruz.
$("#bildirim").find("#bildirim_sayisi").hide(); //Bildirim alanını gizliyoruz.
},
dataType: "json"
});
});

});
</script>