Jquery Ile Bildirim Sistemi | Akin Demircan

• Ana Sayfa
• Kategoriler
  • Sistem
    • Microsoft
    • Linux
  • Yazılım
    • PHP
    • Android
    • HTML/CSS/JavaScript
  • Ağ
    • Güvenlik Duvarları
    • Switch
  • Diğer
    • Konu Dışı
• Hakkımda

• Sistem
  • Microsoft
  • Linux
• Yazılım
  • PHP
  • Android
  • HTML/CSS/JavaScript
• Ağ
  • Güvenlik Duvarları
  • Switch
• Diğer
  • Konu Dışı
• Hakkımda

• Arama formu bos!

NELER YENI? Yukleniyor... Sonraki Kayıt Önceki Kayıt Ana Sayfa Jquery ile Bildirim Sistemi Akın Demircan 12/16/2015 03:26:00 ÖS html, jquery 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. https://yadi.sk/d/K1RRhh9mmGanC 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.

facebook

twitter

google+

fb share

Akın Demircan

17 yorum: Yorumunuzu Yazın

1. Adsız12 Mayıs 2016 22:31

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

   YanıtlaSilYanıtlar
   1. Akın Demircan13 Mayıs 2016 16:32

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

      SilYanıtlar
      Yanıtla
   2. Adsız13 Mayıs 2016 21:30

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

      SilYanıtlar
      Yanıtla
   3. Akın Demircan15 Mayıs 2016 16:00

      İlgili demoyu konu sonunda görebilirsiniz.

      SilYanıtlar
      Yanıtla
   Yanıtla
2. Hesaplama7 Mart 2017 09:47

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

   YanıtlaSilYanıtlar
   1. Akın Demircan10 Mart 2017 16:43

      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.

      SilYanıtlar
      Yanıtla
   Yanıtla
3. Adsız10 Mart 2017 10:56

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

   YanıtlaSilYanıtlar
   Yanıtla
4. Tufan14 Mart 2017 13:05

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

   YanıtlaSilYanıtlar
   Yanıtla
5. Akın Demircan16 Mart 2017 17:45

   İ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ıtlaSilYanıtlar
   1. Tufan17 Mart 2017 10:30

      Bir örnek yapabilirmisiniz php ye yeni başladım

      SilYanıtlar
      Yanıtla
   Yanıtla
6. Deniz21 Ağustos 2017 14:42

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

   YanıtlaSilYanıtlar
   Yanıtla
7. Adsız26 Temmuz 2018 12:20

   data:'alert=', neyi ifade ediyor?

   YanıtlaSilYanıtlar
   1. Akın Demircan5 Ekim 2018 16:48

      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.

      SilYanıtlar
      Yanıtla
   Yanıtla
8. Unknown26 Aralık 2018 01:23

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

   YanıtlaSilYanıtlar
   Yanıtla
9. deneme7 Ocak 2019 17:11

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

   YanıtlaSilYanıtlar
   Yanıtla
10. Unknown20 Kasım 2019 21:56

    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ıtlaSilYanıtlar
    Yanıtla
11. Erkan Günerhan26 Nisan 2021 03:48

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

    YanıtlaSilYanıtlar
    Yanıtla

Yorum ekleDaha fazlasını yükle...

TAKIP EDIN:

Popüler Gönderiler

• Zabbix ile Infobip API Kullanarak SMS Göndermek Bu gönderide kendi yazdığım bir scripti paylaşacağım. Zabbix'in SMS gönderme yeteneği var ancak bu bir SMS Gateway kullanarak mümkün. ...
• 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...
• Zabbix Yapılandırma Zabbix'in genel yapılandırmasıyla ilgili bu gönderide bilgiler vereceğim. Daha önce yazdığım Zabbix kurulumunu  bu linkten  inceleyebil...
• Windowsta Herhangi Bir Portu Kullanan Programı Bulmak Yüklediğiniz bir program herhangi bir işlem için belli bir port numarası kullanabilir. Bu port numarasını değiştiremiyor veya değiştirmek...
• Zabbix Kurulumu (CentOS 7 / Zabbix 2.4) CentOS 7 üzerine Zabbix kurulumunu inceleyeceğiz. Zabbix nedir ile başlayalım. Zabbix Enterprise seviyesinde Network ve Networke bağlı cih...
• PHP ile Google'dan Döviz Kurları PHP ile yazdığınız bir projede güncel kur bilgilerine ulaşmak isteyebilirsiniz. Bunu Google'nin servisiyle gerçekleştirebilmek çok kola...
• Cyberoam UTM ile LAN-to-LAN IPSEC VPN (Zyxel Modemle) Bu konuda bir senaryo ile basitçe IPSEC VPN kurulumunu anlatacağım. Ayrı şehirlerde (hatta aralarında internet bağlantısı var ve gecikme s...
• Gentoo Linux Kurulumu  Fazla Türkçe dokümanı veya güncel Türkçe dokümanı olmadığından bu konuyla giriş yapmak istedim. Gentoo Linux nedir? Kurucusu Daniel Rob...
• Exchange 2013 Günlükleri (Log) Temizleme Bazen Exchange 2013 Logları (Günlük Kayıtları) sunucu diskinizde çok fazla alan kaplar. Aşağıdaki PowerShell betik dosyasını Exchange sun...
• Windows Zabbix Agent'ı Group Policy ile Bilgisayarlara Dağıtımı Zabbix kurulumunu yaptık. Şimdi sıra geldi Agentların bilgisayarlara yüklenmesine. Eğer az sayıda bilgisayarınız var ise veya sadece sunucu...

Etiketler

• centos
• cyberoam
• dkim
• döviz
• elastix
• exchange
• firewall
• gentoo
• google
• gpo
• guid
• html
• ilk
• ipsec
• jquery
• karakter
• konudisi
• kur
• linux
• microsoft
• monitoring
• mssql
• netstat
• php
• pid
• port
• server
• sms
• snmp
• uac
• vpn
• windows
• zabbix
• zyxel

Facebook'ta Takip Edin

Akın Demircan

Lisans

Bu sitede yayınlanan makaleler Creative Commons Atıf 4.0 Uluslararası Lisansı ile lisanslanmıştır. Kaynak linkini yazdığınız sürece paylaşmakta, yayınlamakta özgürsünüz.

Videolar

İzleyiciler

Powered by Blogger.

© Akin Demircan