Menambahkan Notifikasi Real-time pada Website Menggunakan PHP dan jQuery

Notifikasi real-time dapat membuat aplikasi web lebih interaktif dan responsif terhadap pengguna. Dalam tutorial ini, kita akan belajar cara membuat notifikasi sederhana yang muncul secara otomatis tanpa harus melakukan refresh halaman. Kita akan menggunakan PHP untuk mengelola data dan jQuery untuk menangani interaksi di sisi frontend.

Prasyarat

Pastikan Anda memiliki dasar tentang:

• HTML dan CSS
• PHP dasar
• jQuery untuk interaksi AJAX

Langkah 1: Membuat Database

Buat database dan tabel untuk menyimpan notifikasi. Misalnya, Anda bisa membuat tabel bernama notifications dengan kolom berikut:

CREATE TABLE notifications (
  id INT PRIMARY KEY AUTO_INCREMENT,
  message VARCHAR(255) NOT NULL,
  is_read TINYINT(1) DEFAULT 0
);

Tabel ini berfungsi untuk menyimpan notifikasi yang belum dibaca (nilai is_read 0 berarti belum dibaca).

Langkah 2: Menambahkan Data Notifikasi (Simulasi)

Buat skrip PHP untuk menambahkan notifikasi baru. Simulasi ini bisa dilakukan dengan kode sederhana:

<?php
include 'database.php'; // Hubungkan ke database

$message = "Notifikasi baru di " . date("H:i:s");
$query = "INSERT INTO notifications (message) VALUES ('$message')";
mysqli_query($conn, $query);
?>

Langkah 3: Membuat Skrip PHP untuk Mengambil Notifikasi

Buat file get_notifications.php untuk mengambil data notifikasi yang belum dibaca:

<?php
include 'database.php';

$query = "SELECT * FROM notifications WHERE is_read = 0";
$result = mysqli_query($conn, $query);
$notifications = [];

while ($row = mysqli_fetch_assoc($result)) {
    $notifications[] = $row;
}

echo json_encode($notifications);
?>

Langkah 4: Membuat Tampilan Notifikasi dengan HTML dan jQuery

Di dalam file HTML, buat elemen yang akan menampilkan jumlah notifikasi:

<div id="notification">
  <span id="notif-count">0</span> Notifikasi Baru
</div>

<div id="notif-content"></div>

Tambahkan kode jQuery untuk mengambil notifikasi secara berkala (misalnya setiap 5 detik):

$(document).ready(function() {
  setInterval(checkNotifications, 5000);

  function checkNotifications() {
    $.ajax({
      url: 'get_notifications.php',
      method: 'GET',
      success: function(response) {
        const notifications = JSON.parse(response);
        $('#notif-count').text(notifications.length);
        $('#notif-content').empty();

        notifications.forEach(notification => {
          $('#notif-content').append('<p>' + notification.message + '</p>');
        });
      }
    });
  }
});

Langkah 5: Menandai Notifikasi Sebagai Sudah Dibaca

Agar notifikasi tidak ditampilkan lagi setelah dibaca, buat skrip untuk memperbarui status is_read:

<?php
include 'database.php';

$query = "UPDATE notifications SET is_read = 1 WHERE is_read = 0";
mysqli_query($conn, $query);
?>

Jalankan skrip ini setelah pengguna melihat notifikasi. Anda bisa menghubungkannya dengan jQuery AJAX untuk memperbarui status setelah notifikasi ditampilkan.

Langkah 6: Styling dengan CSS

Agar tampil lebih menarik, tambahkan sedikit CSS:

#notification {
  position: relative;
  background-color: #ff5722;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

#notif-count {
  font-weight: bold;
}

#notif-content p {
  background: #f1f1f1;
  margin: 5px 0;
  padding: 8px;
  border-radius: 4px;
}

Kesimpulan

Dengan langkah-langkah di atas, Anda telah membuat sistem notifikasi real-time sederhana menggunakan PHP dan jQuery. Sistem ini dapat membantu pengguna tetap up-to-date dengan informasi terbaru di aplikasi Anda.