Membuat Notifikasi Realtime dengan php dan Jquery

Share:

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.

sahretech
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


sahretech
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


sahretech
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

sahretech
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.

sahretech
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

sahretech
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:

  1. Apakah tutorial diatas bisa diterapkan di CI?

    ReplyDelete
    Replies
    1. Sangat bisa mas, jadi masnya buat controller untuk menampung data notifikasi dari database, lalu buat aksesnya dengan routing, lalu routing tersebut di tarok di function jumlah() yg ada d file tampil.js, lalu masnya buat file di dlam view yg isi scriptnya seperti index.php dan tmabhkan script tampil.js di bagian bawah sebelum tag penutup body

      Delete
  2. kalau diakses orang banyak apa tdk membebani server mas,karna tiap 2 detk dia load data?

    ReplyDelete
    Replies
    1. hehe iya mas, opsi lainnya bisa pake websocket

      Delete
  3. misalkan ingin menambahkan suara notif code nya bagaimana mas

    ReplyDelete
  4. 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 ?

    ReplyDelete
    Replies
    1. https://www.sahretech.com/2020/12/cara-mudah-memasang-notifikasi-pada.html. coba pake onesignal gan

      Delete
  5. klo buat ngilangin notif nya gimana bang

    ReplyDelete
    Replies
    1. hapus script yang ini

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

      Delete
  6. bang kalo buat ngurangin nilai notifnya misal kalo udah di baca pesannya itu gimana bang?

    ReplyDelete

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