PHP ve JS ile basit bildirim sistemi mantığı

Yuspro dedi:

Çana basmadan sayfayı yenilemeyi denediniz mi? Deneseydiniz bir şeylerin yanlış olduğunu fark edecektiniz

PHP kodları sunucu tarafında çalıştırılır, JS kodları ise istemcide (tarayıcıda) çalıştırılır. Sunucu için, <p> etiketi içine yazdığınız metin ile <script> etiketi içine yazdığınız JS kodlarının bir farkı yoktur, ikisi de teksttir. Sunucu sadece PHP kodlarını çalıştırır.

Update işlemini JS kodları arasına yazdığınız için sunucu tarafında çalıştırılıp gönderiliyor. Yani bildirimler sayfayı açarken okundu olarak güncelleniyor. Butona basıldığında bildirimlerin okundu olarak güncellenmesini istiyorsanız, butona basıldıktan sonra sunucuya bir istek (request) gönderip, ilgili PHP kodlarının (Update işlemi) çalıştırılmasını sağlamanız gerekiyor. Sayfa yenilemeden request oluşturmak için @Eray T'un dediği gibi AJAX kullanmalısınız.

Genişletmek için tıkla...

Eray T dedi:

Ajax öğrenmeniz lazım. Sayfa yenilenmeden ilgili PHP sayfasına Ajax ile arka plan üzerinde otomatik gidip oradan bir geri dönüş alıp bunu JavaScript ile ekrana basmanız lazım.

Rehberimi okuyunuz.

Rehber: Ajax nedir ve nasıl kullanılır?

Merhababalar. Bugün sizlere Ajax'ın ne olduğunu ve nasıl kullanıldığını anlatmaya çalışacağım. Öncelikle Ajax nedir? Ajax, Asynchronous JavaScript and XML, Türkçe olarak eşzamansız ve XML'in kısaltılmışıdır. Sunucuya gelen herhangi bir isteği arka planda işleyerek web uygulamalarının eşzamanlı...

www.technopat.net

Genişletmek için tıkla...

Webcam kullanan insan dedi:

Aslında sayfaya girilir girilmez otomatik olarak okundu yapmıyor, çan ikonuna tıklandığında update işlemini gerçekleştiriyor ancak çan ikonunun yanındaki bildirim sayısını güncellemiyor. Halledemediğim şey oydu. Yine de teşekkür ederim.

Genişletmek için tıkla...

Yuspro dedi:

O halde sayfa yüklendikten sonra veri tabanını kontrol edin, tüm bildirimlerin okundu olarak güncellendiğini göreceksiniz. Sayfa kaynağını görüntüleyip (Ctrl+U) JS kodunuzu da kontrol edebilirsiniz. Çana tıklandığında, konsola "Bildirimler okundu." yazdırmak dışında bir işlem yapmadığını göreceksiniz.

Daha önce belirttiğim gibi sunucu tüm PHP kodlarını çalıştırdıktan sonra ürettiği sonucu (HTML, JSON vs.) istemciye gönderir. İstemci tarafında PHP kodu çalıştırılmaz.

Genişletmek için tıkla...

Webcam kullanan insan dedi:

Hocam zaten benim istediğim çana tıklandığında bütün bildirimleri okundu olarak işaretlemesiydi, başka bir şey yapmadım ki zaten. Sizin istediğiniz şey nedir anlamadım, biraz daha açma şansınız var mı acaba?

Genişletmek için tıkla...

<script type="text/javascript">
        $(document).ready(function(){
            $("#notifications").click(function(){
                <?php
                $oldStat = 'Unread';
                $newStat = 'Read';
                $notquery = $db -> prepare("UPDATE notifications SET status = ? WHERE status = '$oldStat'");
                $notquery -> bindParam(1, $newStat, PDO::PARAM_STR);
                $notquery -> execute();
                if($notquery) {
                    ?>
                    console.log("Bildirimler okundu.");
                    <?php
                } else {
                    ?>
                    console.log("Bildirimler okundu.");
                    <?php
                }
                ?>
            });
        });
</script>

<script type="text/javascript">
        $(document).ready(function(){
            $("#notifications").click(function(){
               //Çana tıklandığında AJAX ile istek oluşturulsun (örneğin, veri tabanınının güncelleneceği notificationsRead.php dosyası çalıştırılsın)
               //Gelen yanıta göre (örneğin update işlemi başarılı/başarısız) JS ile bildirim sayısı güncellensin.
            });
        });
</script>

Yuspro dedi:

Elbette.
Şimdi siz çana tıklandığında bildirimlerin okundu olarak işaretlemesini istiyorsunuz. Bunun için aşağıda belirttiğim bir JS kodu yazmışsınız. Bu kodun, çana tıklandığında bildirimleri okundu olarak işaretleyip (veri tabanını güncelleyip) konsola "Bildirimler okundu." yazmasını bekliyorsunuz.

HTML:Panoya kopyala

<script type="text/javascript">
        $(document).ready(function(){
            $("#notifications").click(function(){
                <?php
                $oldStat = 'Unread';
                $newStat = 'Read';
                $notquery = $db -> prepare("UPDATE notifications SET status = ? WHERE status = '$oldStat'");
                $notquery -> bindParam(1, $newStat, PDO::PARAM_STR);
                $notquery -> execute();
                if($notquery) {
                    ?>
                    console.log("Bildirimler okundu.");
                    <?php
                } else {
                    ?>
                    console.log("Bildirimler okundu.");
                    <?php
                }
                ?>
            });
        });
</script>

Fakat sunucu JS kodlarını algılamaz, sadece <?php ?> arasındaki kodları yorumlar (çalıştırır). JS kodları arasına yazdığınız PHP kodları sunucuda çalıştırıldıktan sonra sayfa yüklenir. Yani bırakın çana basmayı, daha sayfa yüklenmeden PHP kodları çalıştırıldığı için sayfa yüklendiğinde veri tabanı çoktan güncellenmiş olur.

Yazmanız gerek kod şu şeklide:

HTML:Panoya kopyala

<script type="text/javascript">
        $(document).ready(function(){
            $("#notifications").click(function(){
               //Çana tıklandığında AJAX ile istek oluşturulsun (örneğin, veri tabanınının güncelleneceği notificationsRead.php dosyası çalıştırılsın)
               //Gelen yanıta göre (örneğin update işlemi başarılı/başarısız) JS ile bildirim sayısı güncellensin.
            });
        });
</script>

Genişletmek için tıkla...

Webcam kullanan insan dedi:

Tamamdır hocam, şimdi anladım anlatmak istediğinizi. Bunu bilmiyordum, öğrendiğim iyi oldu teşekkür ederim. Peki sorum şu, "notificationsRead.php" dosyasını nasıl çağıracağım? Herhalde "include("notificationsRead.php"); şeklinde değildir, farklı bir JS kodu vardır.

Genişletmek için tıkla...

Yuspro dedi:

Yapacağınız işlem bir çağırma işlemi değil. AJAX ile yeni bir istek (request) oluşturacaksınız. Sunucu bu istek doğrultusunda "notificationsRead.php" dosyasını çalıştırıp (bu dosyada veri tabanı güncellenecek) bir sonuç (response) dönecek. Projede jQuery kullandığınız için AJAX post işlemini kolayca yapabilirsiniz.

Google ve Youtube'da "php jquery ajax" şeklinde arama yaparak pek çok örnek kod/proje bulabilirsiniz.

Genişletmek için tıkla...

GitHub - vFurky/notification-with-php: PHP ve JavaScript ile temel olarak hazırlanmış geliştirmeye açık bir bildirim sistemi.

PHP ve JavaScript ile temel olarak hazırlanmış geliştirmeye açık bir bildirim sistemi. - GitHub - vFurky/notification-with-php: PHP ve JavaScript ile temel olarak hazırlanmış geliştirmeye açık bir ...

github.com

Eray T dedi:

Ajax öğrenmeniz lazım. Sayfa yenilenmeden ilgili PHP sayfasına Ajax ile arka plan üzerinde otomatik gidip oradan bir geri dönüş alıp bunu JavaScript ile ekrana basmanız lazım.

Rehberimi okuyunuz.

Rehber: Ajax nedir ve nasıl kullanılır?

Merhababalar. Bugün sizlere Ajax'ın ne olduğunu ve nasıl kullanıldığını anlatmaya çalışacağım. Öncelikle Ajax nedir? Ajax, Asynchronous JavaScript and XML, Türkçe olarak eşzamansız ve XML'in kısaltılmışıdır. Sunucuya gelen herhangi bir isteği arka planda işleyerek web uygulamalarının eşzamanlı...

www.technopat.net

Genişletmek için tıkla...