Membuat Notifikasi Realtime dengan php dan Jquery

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan bersama-sama belajar membuat notifikasi secara realtime menggunakan teknologi php dan jquery, penasaran?, ayo ikuti tutorialnya berikut ini.

Realtime notification adalah sebuah keharusan jika kalian membuat website atau aplikasi dengan fitur notifikasi. Pasalnya dengan adanya realtime notification pembaruan notifikasi akan dilakukan oleh sistem sehingga data yang dimunculkan akan selalu baru. User juga tidak perlu merefresh website berulang kali untuk mengetahui notifikasi yang masuk, hal ini sangat merepotkan dan tidak canggih.

Cara Membuat Notifikasi Realtime dengan Php dan Jquery

Baiklah kali ini kita akan membuat sebuah website sederhana yang akan menampilkan notifikasi secara realtime, dan tentu kita membutuhkan data yang bersumber dari database MySQL nantinya. Ada 2 hal yang akan kita tampilkan nanti, yaitu counting notifikasi, dan 5 pesan notif terbaru.

1. Membuat Database dan Tabel

Buatlah sebuah database baru dengan nama latihan dengan menggunakan phpmyadmin. Lalu buat sebuah tabel baru di dalmnya dengan nama pesan adapun struktur tabelnya dapat kalian lihat pada gambar di bawah ini dan jangan lupa untuk memasukkan minimal 5 data di dalmnya.

Tampilan tabel pesan

2. Membuat Tampilan Aplikasi

Buatlah sebuah folder baru di dalam folder htdocs dengan nama realtimenotif, kemudian buatlah sebuah file dengan nama index.php di dalam folder realtimenotif. Lalu copy script di bawah ini dan pastekan di dalam file index.php



<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
            integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    
    <body>
        <div class="container">
            <nav class="navbar navbar-dark bg-primary">
                <div class="container">
                    <a class="navbar-brand" href="#">
                        <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30"
                            alt="">
                        <b> LaraPost</b>
                    </a>
                </div>
            </nav>
            <br>
            <div class="dropdown">
                <button type="button" class="btn btn-primary" data-toggle="dropdown">
                    Notifications <span class="badge badge-light" id="notif"></span>
                </button>
                <div id="pesan" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    
                </div>
            </div>
        </div>
    
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
        </script>
    
        <script src="https://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="tampil.js"></script>
    </body>
    
    </html>

Kita membuat sebuah tampilan sederhana, dimana ada navbar di atasnya lalu di bawahnya ada tombol notifikasi. Jumah notif yang masuk akan kita tampilkan di dalam id="notif" dan 5 pesan terbaru akan kita tampilkan pada id="pesan" untuk file tampil.js akan kita buat pada tahap ke 4.

Buka browser kalian, lalu akses alamat berikut ini http://localhost/realtimenotif maka tampilannya akan tampak seperti gambar di bawah ini

Tampilan aplikasi

3. Membuat Data Json

Buatlah sebah file baru dengan nama data.php file ini berfungsi untuk mengambil dan menghitung jumlah pesan yang masuk ke dalam tabel pesan. Copy script di bawah ini dan pastekan di dalam file data.php



<?php

    // melakukan koneksi 
    $connect = mysqli_connect('localhost', 'root', '', 'latihan');
    
    //menghitung jumlah pesan dari tabel pesan
    $query= mysqli_query($connect, "Select Count(idpesan) as jumlah From pesan");
    
    //menampilkan data
    $hasil = mysqli_fetch_array($query);
    
    //membuat data json
    echo json_encode(array('jumlah' => $hasil['jumlah']));
    
    ?>

Jika file data.php dijalankan maka hasilnya akan tampak seperti gambar di bawah ini. Itu adalah jumlah total jumlah data yang masuk ke dalam tabel pesan. Jika belum ada datanya, silahkan kalian isi beberapa data terlebih dahulu

Data json data.php

Selanjuntya buatlah sebuah file baru dengan nama data_pesan.php file ini berfungsi untuk menampilkan 5 pesan terbaru yang ada di dalam tabel pesan. Copy script di bawah ini dan pastekan ke dalam file data_pesan.php



<?php

    // melakukan koneksi 
    $connect = mysqli_connect('localhost', 'root', '', 'latihan');

    //mengambil data 5 pesan terbaru 
    $sql = mysqli_query($connect, "SELECT * FROM pesan ORDER BY idpesan DESC limit 5");
    $result = array();
    
    while ($row = mysqli_fetch_assoc($sql)) {
        $data[] = $row;
    }

    echo json_encode(array("result" => $data));
?>

Jika file data_pesan.php kalian jalankan, maka hasilnya akan tampak seperti gambar di bawah ini. Itu adalah 5 pesan terbaru yang berasal dari tabel pesan. Jika belum ada datanya, silahkan kalian isi berapa data terlebih dahulu

Data json data_pesan.php

4. Membuat Fungsi Jquery

Langkah terakhir, buatlah sebuah file baru dengan nama tampil.js lalu copy script di bawah ini dan pastekan di dalam file tampil.js




$(document).ready(function() {
    selesai();
});
 

function selesai() {
    setTimeout(function() {
        jumlah();
        selesai();
        pesan();
    }, 200);
}


function jumlah() {
    $.getJSON("data.php", function(datas) {
        $("#notif").html(datas.jumlah);
    });
}



function pesan() {
    $.getJSON("data_pesan.php", function(data) {
        $("#pesan").empty();
        var no = 1;
        $.each(data.result, function() {
            $("#pesan").append(`<a id="pesan" class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
            </svg>&nbsp;`+this['pesan'].substr(0, 20)+`...</a>`);
        });
    });
}

Jika kalian perhatikan pada function selesai() fungsi ini berguna untuk menjalankan function jumlah() dan function pesan() setiap 2 detik sekali, sehingga data yang di tampilkan dapat selalu realtime.

function jumlah(), fungsi ini berguna untuk menangkap data yang berasal dari file data.php lalu datanya akan ditampilkan pada id="notif" yang ada di dalam file index.php

Sedangkan function pesan(), fungsi ini berguna untuk menampilkan data pesan yang berasal dari data_pesan.php lalu datanya akan ditampilkan di dalam id="notif" yang ada di dalam file index.php

perbedaan dari html() dan append() adalah html() akan mereplace element yang ada di dalamnya, sedangkan append() tidak mereplace element tapi menambah data yang sudah ada sebelumnnya.

Sampai tahap ini kalian telah selesai membuat sebuah aplikasi penampil notifikasi sederhana, silahkan akses project kalian di http://localhost/realtimenotif jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Hasil akhir

Untuk mengetes apakah database realtime kalian sudah berhasil, maka sandingkan halaman project kalian dan phpmyadmin, lalu coba untuk mengisi data di dalam tabel pesan seperti gambar di bawah ini

Testing realtime notif

Kalian bisa meng-improvisasi fitur ini dengan tampilan yang lebih menarik. Beberapa template bootstrap menyediakan tampilan notifikasi yang bisa kalian custom sendiri. Selain itu kalian perlu menambahkan fungsi url di setiap pesan notif yang masuk dan mengarahkannya ke halaman detail pesan.

Sekitan tutorial membuat notifikasi realtime dengan php dan jquery. Semoga bermanfaat bagi kalian semua, jika pembahasan di atas masih ada yang membingungkan bagi kalian silakan tanyakan di kolom komentar di bawah ini, dan mari kita diskusikan bersama. Sampai jumpa di tutorial pemrograman keren lainnya. Happy Coding 😀

11 comments:

Hikmatyar A LeghariJune 20, 2021 at 8:11 PM
Apakah tutorial diatas bisa diterapkan di CI?
UnknownJuly 8, 2021 at 8:23 AM
kalau diakses orang banyak apa tdk membebani server mas,karna tiap 2 detk dia load data?
Ade Visual FXSeptember 14, 2021 at 10:53 PM
misalkan ingin menambahkan suara notif code nya bagaimana mas
Mas ArulSeptember 24, 2021 at 2:01 AM
Saya ingin membuat push notification utk member saya, tujuannya ketika ada artikel baru, maka di browsernya akan muncul info bahwa di web sy ada artikel baru yg sudah diupload, apakah bisa ?
UnknownMay 28, 2022 at 1:36 AM
klo buat ngilangin notif nya gimana bang
anonimMay 30, 2022 at 5:52 AM
bang kalo buat ngurangin nilai notifnya misal kalo udah di baca pesannya itu gimana bang?

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi