Membuat Notifikasi Login Real-Time Menggunakan AJAX dan Database Log di PHP

Dalam sistem web modern, keamanan dan pengalaman pengguna menjadi dua aspek penting yang saling melengkapi. Salah satu fitur yang kini banyak digunakan pada aplikasi web profesional adalah notifikasi login real-time, yaitu sistem yang memberikan peringatan langsung saat ada aktivitas login baru di akun pengguna.

Dengan notifikasi login real-time, pengguna dapat segera mengetahui jika ada login dari lokasi atau perangkat yang tidak dikenal. Fitur ini biasanya dikombinasikan dengan database log aktivitas yang menyimpan riwayat login, serta sistem AJAX untuk menampilkan notifikasi secara dinamis tanpa perlu me-refresh halaman. Dalam artikel ini, kita akan membahas langkah-langkah membuatnya di PHP secara lengkap dan aman.

Langkah 1: Menyiapkan Database Log Aktivitas

Buat tabel khusus untuk menyimpan riwayat login pengguna.

CREATE TABLE login_logs (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL,
    ip_address VARCHAR(45),
    user_agent TEXT,
    login_time DATETIME DEFAULT CURRENT_TIMESTAMP,
    status ENUM('success', 'failed') DEFAULT 'success',
    is_notified TINYINT(1) DEFAULT 0
);

Keterangan:

• ip_address menyimpan alamat IP pengguna.

• user_agent menyimpan informasi perangkat dan browser.

• is_notified menandakan apakah aktivitas login sudah ditampilkan dalam notifikasi real-time.

Langkah 2: Menyimpan Log Aktivitas Saat Login

Tambahkan proses logging ke dalam file login.php setelah validasi berhasil.

<?php
// Misalnya validasi login sukses
session_start();
$user_id = $row['id'];
$ip = $_SERVER['REMOTE_ADDR'];
$agent = $_SERVER['HTTP_USER_AGENT'];

$stmt = $conn->prepare("INSERT INTO login_logs (user_id, ip_address, user_agent) VALUES (?, ?, ?)");
$stmt->bind_param("iss", $user_id, $ip, $agent);
$stmt->execute();
?>

Langkah ini memastikan setiap login tersimpan di database, sehingga nanti bisa ditampilkan secara real-time ke pengguna atau admin.

Langkah 3: Membuat API untuk Menampilkan Notifikasi Login Terbaru

Kita akan menggunakan file bernama get_notifications.php untuk diakses oleh AJAX secara berkala.

<?php
session_start();
require 'config.php';

$user_id = $_SESSION['user_id'];

$query = $conn->prepare("SELECT * FROM login_logs WHERE user_id = ? AND is_notified = 0 ORDER BY login_time DESC LIMIT 5");
$query->bind_param("i", $user_id);
$query->execute();
$result = $query->get_result();

$notifications = [];
while ($row = $result->fetch_assoc()) {
    $notifications[] = [
        'time' => $row['login_time'],
        'ip' => $row['ip_address'],
        'agent' => $row['user_agent']
    ];

    // tandai sebagai sudah ditampilkan
    $update = $conn->prepare("UPDATE login_logs SET is_notified = 1 WHERE id = ?");
    $update->bind_param("i", $row['id']);
    $update->execute();
}

echo json_encode($notifications);
?>

Langkah 4: Menampilkan Notifikasi dengan AJAX (Tanpa Reload)

Tambahkan script berikut pada halaman dashboard atau area pengguna yang ingin menampilkan notifikasi real-time:

<div id="notification-area"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function loadNotifications() {
    $.ajax({
        url: 'get_notifications.php',
        method: 'GET',
        dataType: 'json',
        success: function(response) {
            if (response.length > 0) {
                response.forEach(item => {
                    $('#notification-area').prepend(`
                        <div class="alert alert-info alert-dismissible fade show mt-2" role="alert">
                            <strong>Login Baru Terdeteksi!</strong><br>
                            IP: ${item.ip}<br>
                            Waktu: ${item.time}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    `);
                });
            }
        }
    });
}

// Jalankan setiap 10 detik
setInterval(loadNotifications, 10000);
</script>

Script di atas akan memanggil get_notifications.php setiap 10 detik untuk mengecek apakah ada aktivitas login baru, lalu menampilkannya di halaman secara otomatis.

Langkah 5: Menambahkan Notifikasi Email (Opsional)

Untuk keamanan tambahan, Anda bisa menambahkan pengiriman email otomatis jika terdeteksi login dari perangkat atau IP baru.

Contoh menggunakan PHPMailer:

use PHPMailer\PHPMailer\PHPMailer;
$mail = new PHPMailer(true);
$mail->setFrom('no-reply@website.com', 'Security Alert');
$mail->addAddress($user_email);
$mail->Subject = 'Login Baru Terdeteksi';
$mail->Body = "Hai $username,\n\nKami mendeteksi login baru dari IP: $ip\nBrowser: $agent\n\nJika ini bukan Anda, segera ubah password Anda.";
$mail->send();

Langkah 6: Tampilan Notifikasi Real-Time yang Lebih Interaktif

Untuk pengalaman pengguna yang lebih baik, Anda bisa mengganti alert Bootstrap dengan SweetAlert2:

Swal.fire({
    title: 'Login Baru!',
    text: `Login baru dari IP: ${item.ip}`,
    icon: 'info',
    confirmButtonText: 'Oke'
});

Dengan pendekatan ini, notifikasi akan tampil lebih modern dan menarik secara visual.

Kesimpulan

Fitur notifikasi login real-time bukan hanya menambah nilai profesionalitas aplikasi, tetapi juga memperkuat sistem keamanan pengguna. Dengan kombinasi AJAX, PHP, dan database log, sistem ini bisa berjalan tanpa reload halaman dan memberikan pengalaman yang responsif.

Langkah berikutnya, Anda dapat mengembangkan fitur ini dengan menambahkan notifikasi push (WebSocket) atau integrasi dengan sistem email dan SMS, agar pengguna benar-benar merasa aman setiap kali ada aktivitas di akunnya.