NELER YENI?
Yukleniyor...

Jquery ile Bildirim Sistemi

Herhangi bir durumda kullanıcının ekranında açılan alertbox kullanarak, kullanıcıya bildirim göstermek isteyebilirsiniz hatta ses kullanarak. JQuery ile bunu yapmak çok basit hemen nasıl yapılacağına geçiyorum.



İlk önce javascript kodlarımızı hazırlıyoruz, tabi öncesinde jquery kütüphanesininde include edilmiş olması lazım.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(setInterval(function(){
$.ajax({
type:'POST',
url:'denetle.php',
data:'alert=',
cache:false,
success:function(msg){
$('#alertbox').fadeIn('slow').prepend(msg);
$('#alerts').delay(8000).fadeOut('slow');
}
}); }, 10000));
</script>

Burada setInterval kullanarak 10 sn (10000 milisaniye)'de bir denetle.php isimli dosyayı çalıştırmasını söylüyoruz eğer bir veri var ise alertboxu yavaş hareketlerle 8 saniye gösterip kaybetmesini söylüyoruz. Bu facebook bildirimlerine benzetilebilir. Burada denetlenecek dosyayı, süreleri değiştirebilirsiniz

Daha sonra alertboxun dizaynı için css kodlarımızı ekliyoruz.

<style>
#alerts:hover{background-color:#C6D3EC;}
#alerts{ font-family:Tahoma, Geneva, sans-serif; color:#000; font-size:11px; margin:5px;padding:4px; border:solid #9dabc9 1px; width:250px; height:80px;border-radius:5px; background-color:#e2e7ee}
#alerts li{ margin:0; padding:0; list-style:none; cursor:pointer;}
#alertbox{position:fixed;width:250px; height:auto; left:100px; bottom:10px;}
</style>

Bu kodlarda tasarımınıza uygun değişiklikler yapabilirsiniz. HTML bir div ekliyoruz bunu </body> etiketinden önce koyabilirsiniz.

<div id="alertbox"> </div>
Şimdi sıra geldi denetleme yapacağı dosyaya. Bu dosyada örneğin veri tabanında bir tabloda veya satırında bir değişiklik veya ekleme olduğunda alerbox çıktısı üretecek şekilde kullanabilirsiniz. Eğer böyle bir şey yapacaksanız ilgili tabloda birde bildirim için bir sütun daha oluşturmanız gerekli. Örneğin yeni bir kayıt oluştuğunda kullanıcıya bildirim gösterecekseniz time ve notif diye bir sutün ekleyip, varsayılan değer 1 olacak şekilde ayarlayın. Kullanıcı ekrana bağlandığında veya o an bağlı ise denetle.php dosyası çalışacak bildirim veya bildirimleri göstererek otomatik notif sutununu sıfır yaptırabilirsiniz. 

Eğer birden fazla kullanıcı aynı değişikliği görmesi gerekiyor ise ona göre bir düzenleme ve algoritma oluşturmanız gerekiyor. 

Bir diğeri ise eğer bildirimler sadece o an ekranda bağlı olan birden fazla kullanıcılar için gösterilecekse unix biçiminde zaman tutan bir alan daha açıp kayıt eklenir eklenmez alana on anki saniye yazılarak, denetle.php dosyasında 9 saniyeden daha yeni ise (if (fark) < 9) kontrolü yaptırdığınızda, alertbox 10 saniyede bir dosyayı kontrol edeceği için ikinci kontrole kadar kullanıcılara bildirimler gösterilecek ve daha sonrasında gösterilmeyecektir. Biraz karışık gelebilir ama bu benim kullandığım bir algoritma siz istediğiniz gibi kodlayabilirsiniz.

if($veri['notif'] == '1'){
echo '<div id="alerts">
<audio id="audioplayer" autoplay=true>
<source src="sound/glass.mp3" type="audio/mpeg">
 Tarayiciniz ses elementlerini desteklemiyor. </audio>
<li>
<img src="icons/no.png" align="top" style="float:left; margin-right:2px;" />
<div><strong>Yeni Mesaj Var</strong><br /> Falan Filan Gödnerdi<br />  </div> Abuk Sabuk
</li>
</div>';
$mysqli->query("UPDATE tabloadi SET notif='0' WHERE id=".$veri['id']." ");
}else {
}

Örneğin basitçe oluşturduğum php dosyasi bu tabi öncesinde veri tabanında sorgulamalar yapılıyor. Siz kendinize göre düzenleyin. Asp veya diğer web dilleri ile de kendinize uygun yapabilirsiniz. Benim kullandığım ses dosyasını aşağıdaki linkten indirebilirsiniz.


Bildirimler aynen facebooktaki gibi sol alt köşede diğer divlerden bağımsız şekilde çıkacaktır.

Bu konuyla ilgili demo uygulamayı aşağıdaki linkten indirebilirsiniz.

https://yadi.sk/d/PG63PTboriipe

Uygulama php ile yazılmıştır. İçinde bulacağınız sql klasörü altındaki tabloyu mysql veri tabanınızda oluşturmanız gerekiyor. Daha sonra denetle.php isimli dosyada (notepad++ ile açabilirsiniz) 4. satırda bulunan bağlantı ayarlarını kendi sisteminize uygun şekilde yapmanız gerekmektedir.

Browserınızdan index.html dosyasını çalıştırdıktan sonra notification isimli tabloda bir veri girişi yapın.
INSERT INTO `notification` (`konu`, `mesaj`, `notif`) VALUES ('Deneme', 'Test', '1');
notif kısmının 1 olması gerektiğine dikkat edin. Buradaki 1'in anlamı henüz bu bildirimin okunmadığı anlamı taşır. denetle.php bu veriyi okuduktan sonra bu sütunu 0 yapmaktadır. Böylece bir bildirim bir kere karşınıza çıkar. denetle.php dosyasını incelediğinizde mantığın basit olduğunu göreceksiniz. Browserınızdan açtığınız index.html sayfasına geri dönün bir süre sonra (10 sn içinde) bildirimin sol alt köşeye geldiğini görecek ve ses duyacaksınız. Bildirim ekranı bir süre sonra kendi kendine kaybolacaktır.

Veri tabanına yeni giriş yaparak veya notif kısmını tekrar 1 yaparak tekrar tekrar test edebilirsiniz. (index.html sayfasını yenilemenize gerek yok. denetle.php 10 saniyede bir veri tabanını kontrol etmektedir)

Bu benim oluşturduğum basit bir mantık siz ihtiyacınıza göre istediğiniz algoritmada bildirim sistemini kullanabilirsiniz.

17 yorum: Yorumunuzu Yazın

  1. Merhaba denememe rağmen çalıştıramadım, sizin yaptığnız demo ve dosyaları ve sql’eyi yollarmısınız acaba?

    YanıtlaSil
    Yanıtlar
    1. Merhaba,

      Geliştirdiğim bir proje içinde kullanmıştım. Gelecek hafta sonu bir demo hazırlayıp upload ederim.

      Sil
    2. Merhaba
      Çok teşekkür ederim bekliyorum sizden haber.

      Sil
    3. İlgili demoyu konu sonunda görebilirsiniz.

      Sil
  2. Sürekli veritabanını sorgulamak siteyi yavaşlatmaz mı?

    YanıtlaSil
    Yanıtlar
    1. Bu göreceli bir soru oldu,

      1 milyon ziyaretçiniz varsa ve bunu karşılayacak donanım, ön bellekleme, ve yazılım opimizasyonu yoksa yavaşlatabilen unsurlardan belki biri olabilir.

      Sil
  3. hocam eline koluna sağlık 2 gündür böyle bişe arıyordum.
    ALLAH razı olsun.

    YanıtlaSil
  4. Birisi girince herkesden kayboluyor, peki her kullanıcımıza ayrı ayrı göstermeyi nasıl yaparız?

    YanıtlaSil
  5. İlk aklıma gelen. Veri tabanından ayrı bir tablo tutarak her kullanıcı için user-id ve notif bilgisinin tutup buna göre INSERT ve UPDATE sorgusu yaparsanız istediğiniz olur.

    YanıtlaSil
    Yanıtlar
    1. Bir örnek yapabilirmisiniz php ye yeni başladım

      Sil
  6. Teşekkürler Akın. Test ettim sonuç olumlu. Projelerimde kullanacağım.

    YanıtlaSil
  7. data:'alert=', neyi ifade ediyor?

    YanıtlaSil
    Yanıtlar
    1. Anlattığım konu içeriğinde pek bir faaliyeti yok. Farkettiğiniz için tebrik ederim. Php dosyasına veri POST etmek için kullanılır. İsterseniz alert kısmına veri ekleyerek php dosyasından $_POST['alert'] yöntemi ile veriyi alabilirsiniz. Farklı ihtiyaçları karşılayabilir. Çeşitlendirebilirsiniz.

      Sil
  8. teşekkür ederim. Sistemi çalıştırdım gayet güzel oldu

    YanıtlaSil
  9. çok başarılı olmuş.. teşekkürler

    YanıtlaSil
  10. Sen varya harbi adamın dibisin aylardır aradığım sistemi anlatmışın başarılı bi şekilde çalıştı ellerine sağlık üstad. Şimdi kendime göre düzenleyeyim :)

    YanıtlaSil
  11. Asp.net geliştiricisiyim. Sisteme entegre etmek 15 dakikamı aldım. Çok güzel açıklamışsın teşekkür ederim.

    YanıtlaSil