Membuat Sistem Notifikasi Real-Time Sederhana dengan AJAX

Sistem notifikasi real-time telah menjadi fitur penting bagi berbagai aplikasi web. Mulai dari sistem komentar, chat, hingga dashboard admin. Semua memerlukan cara cepat dan efisien untuk memberi tahu pengguna mengenai aktivitas terbaru.

Apa Itu Notifikasi Real-Time?

Notifikasi real-time adalah pemberitahuan yang langsung muncul pada saat kejadian berlangsung, tanpa harus me-reload halaman secara manual. Sistem ini memberikan pengalaman interaktif yang lebih baik dan menjaga pengguna tetap terhubung dengan aktivitas dalam aplikasi.

Teknologi yang Digunakan

PHP: Bahasa server-side untuk menangani logika backend.
MySQL: Database yang menyimpan data notifikasi.
AJAX (JavaScript + jQuery): Untuk mengambil data secara berkala tanpa reload halaman.
HTML + CSS: Tampilan antarmuka notifikasi.

Struktur Tabel Notifikasi

Buat tabel notifikasi pada database:

CREATE TABLE notifikasi (
    id INT AUTO_INCREMENT PRIMARY KEY,
    pesan TEXT NOT NULL,
    status ENUM('baru','dibaca') DEFAULT 'baru',
    waktu TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Tabel ini menyimpan pesan notifikasi, status, dan waktu pembuatan.

Menambahkan Notifikasi

Gunakan script PHP sederhana berikut untuk menambahkan notifikasi baru ke database:

<?php
$koneksi = mysqli_connect("localhost", "root", "", "nama_database");

$pesan = "Pengguna baru telah mendaftar!";
mysqli_query($koneksi, "INSERT INTO notifikasi(pesan) VALUES('$pesan')");
?>

Kode di atas bisa dipanggil ketika ada peristiwa penting, seperti pendaftaran pengguna baru, pengisian form, dan sebagainya.

Menampilkan Notifikasi Secara Real-Time

Gunakan AJAX untuk mengambil data secara berkala:

<div id="notifikasi-box"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
setInterval(function () {
    $.ajax({
        url: 'ambil_notifikasi.php',
        method: 'GET',
        success: function (data) {
            $('#notifikasi-box').html(data);
        }
    });
}, 3000); // refresh setiap 3 detik
</script>

ambil_notifikasi.php:

<?php
$koneksi = mysqli_connect("localhost", "root", "", "nama_database");

$query = mysqli_query($koneksi, "SELECT * FROM notifikasi WHERE status = 'baru' ORDER BY waktu DESC LIMIT 5");

while ($data = mysqli_fetch_array($query)) {
    echo "<p><strong>•</strong> {$data['pesan']} <em>({$data['waktu']})</em></p>";
}
?>

Mengubah Status Notifikasi Menjadi Dibaca

Setelah notifikasi ditampilkan, statusnya bisa diubah agar tidak ditampilkan lagi di iterasi berikutnya:

mysqli_query($koneksi, "UPDATE notifikasi SET status='dibaca' WHERE status='baru'");

Keamanan Tambahan

Selalu gunakan prepared statement untuk mencegah SQL injection.
Batasi jumlah data yang ditampilkan agar performa tetap optimal.
Validasi semua input dari sisi server.

Alternatif Lebih Lanjut

Untuk kebutuhan yang lebih kompleks dan benar-benar real-time (tanpa polling setiap beberapa detik), kamu bisa menggunakan WebSocket (melalui Ratchet atau Node.js) atau layanan seperti Pusher. Namun, untuk banyak aplikasi skala kecil hingga menengah, pendekatan PHP + AJAX seperti di atas sudah cukup efektif dan mudah diimplementasikan.

Kesimpulan

Membangun sistem notifikasi real-time tidak harus rumit. Dengan memanfaatkan PHP, MySQL, dan AJAX, kamu bisa menciptakan pengalaman interaktif yang lebih baik bagi pengguna. Selain meningkatkan efisiensi komunikasi, sistem ini juga membantu pengguna tetap up-to-date terhadap aktivitas penting di dalam aplikasi.

Membuat Sistem Notifikasi Real-Time Sederhana dengan AJAX, PHP dan MySQL