logo pemburukode.com
PemburuKode
Temukan kode pemrograman untuk berkarya

Cara Membuat Notifikasi Pesan dengan PHP (Flash Message & Toast)

| | PHP
Cara Membuat Notifikasi Pesan dengan PHP (Flash Message & Toast)

Notifikasi pesan adalah elemen penting dalam aplikasi web yang memberikan feedback kepada pengguna setelah melakukan suatu aksi. Misalnya pesan “Data berhasil disimpan!” setelah submit form, atau “Login gagal!” ketika username/password salah.

Dalam tutorial ini, kita akan membuat sistem notifikasi dengan PHP menggunakan beberapa metode: flash message dengan session, notifikasi toast dengan JavaScript, dan notifikasi persisten dengan database.

Jenis Notifikasi yang Akan Dibuat

  1. Flash Message — notifikasi sekali tampil menggunakan session PHP
  2. Toast Notification — notifikasi kecil di pojok layar yang hilang otomatis
  3. Alert Bootstrap-style — notifikasi berwarna sesuai tipe (sukses, error, warning, info)
  4. Notifikasi dengan Database — notifikasi yang disimpan dan bisa dilihat ulang

Metode 1: Flash Message dengan Session PHP

Flash message adalah notifikasi yang disimpan di session dan hanya ditampilkan sekali. Setelah ditampilkan, pesannya dihapus otomatis.

File flash.php — Helper Function

<?php
session_start();

/**
 * Menyimpan pesan flash ke session
 * @param string $tipe - Tipe pesan: success, error, warning, info
 * @param string $pesan - Isi pesan yang akan ditampilkan
 */
function setFlash($tipe, $pesan) {
    $_SESSION['flash_message'] = [
        'tipe' => $tipe,
        'pesan' => $pesan
    ];
}

/**
 * Menampilkan pesan flash dan menghapusnya dari session
 */
function showFlash() {
    if (isset($_SESSION['flash_message'])) {
        $flash = $_SESSION['flash_message'];
        unset($_SESSION['flash_message']);

        $warna = [
            'success' => '#22c55e',
            'error'   => '#ef4444',
            'warning' => '#f59e0b',
            'info'    => '#3b82f6'
        ];

        $icon = [
            'success' => '&#10004;',  // ✓
            'error'   => '&#10008;',  // ✘
            'warning' => '&#9888;',   // ⚠
            'info'    => '&#8505;'    // ℹ
        ];

        $bg = $warna[$flash['tipe']] ?? '#6b7280';
        $ic = $icon[$flash['tipe']] ?? '&#8505;';

        echo '<div class="flash-message" style="
            padding: 15px 20px;
            background: ' . $bg . ';
            color: white;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: Arial, sans-serif;
            font-size: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            animation: slideDown 0.3s ease;
        ">
            <span style="font-size:20px;">' . $ic . '</span>
            <span style="flex:1;">' . htmlspecialchars($flash['pesan']) . '</span>
            <span onclick="this.parentElement.remove()" style="cursor:pointer;font-size:18px;opacity:0.8;">&times;</span>
        </div>';

        echo '<style>
            @keyframes slideDown {
                from { opacity: 0; transform: translateY(-20px); }
                to { opacity: 1; transform: translateY(0); }
            }
        </style>';
    }
}

Penjelasan:

  • setFlash() — menyimpan pesan ke $_SESSION dengan tipe dan isi pesan
  • showFlash() — menampilkan pesan dari session lalu menghapusnya (supaya tidak tampil lagi saat refresh)
  • $warna — array warna sesuai tipe notifikasi (hijau untuk sukses, merah untuk error, dll)
  • $icon — simbol Unicode untuk setiap tipe notifikasi

Contoh Penggunaan (index.php)

<?php
require_once 'flash.php';

// Simulasi aksi form submit
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $nama = trim($_POST['nama'] ?? '');

    if (empty($nama)) {
        setFlash('error', 'Nama tidak boleh kosong!');
    } elseif (strlen($nama) < 3) {
        setFlash('warning', 'Nama terlalu pendek, minimal 3 karakter!');
    } else {
        setFlash('success', 'Data "' . $nama . '" berhasil disimpan!');
    }

    header('Location: index.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flash Message PHP</title>
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background: #f9fafb;
        }
        .form-box {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }
        h1 { color: #1f2937; margin-bottom: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: 600; color: #374151; }
        input[type="text"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 15px;
        }
        input[type="text"]:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
        }
        button {
            background: #3b82f6;
            color: white;
            padding: 10px 24px;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            cursor: pointer;
        }
        button:hover { background: #2563eb; }
    </style>
</head>
<body>
    <!-- Tampilkan flash message -->
    <?php showFlash(); ?>

    <div class="form-box">
        <h1>Form Input Data</h1>
        <form method="POST">
            <div class="form-group">
                <label for="nama">Nama Lengkap</label>
                <input type="text" name="nama" id="nama" placeholder="Masukkan nama lengkap" required>
            </div>
            <button type="submit">Simpan Data</button>
        </form>
    </div>
</body>
</html>

Metode 2: Toast Notification dengan JavaScript

Toast notification adalah notifikasi kecil yang muncul di pojok layar dan hilang otomatis setelah beberapa detik. Cocok untuk notifikasi yang tidak mengganggu.

File toast.php

<?php
session_start();

function setToast($tipe, $pesan) {
    $_SESSION['toast'] = ['tipe' => $tipe, 'pesan' => $pesan];
}

function renderToast() {
    if (!isset($_SESSION['toast'])) return;

    $toast = $_SESSION['toast'];
    unset($_SESSION['toast']);

    $warna = [
        'success' => '#22c55e',
        'error'   => '#ef4444',
        'warning' => '#f59e0b',
        'info'    => '#3b82f6'
    ];

    $bg = $warna[$toast['tipe']] ?? '#6b7280';
    $pesan = htmlspecialchars($toast['pesan']);

    echo <<<HTML
    <div id="toast-notif" style="
        position: fixed;
        top: 20px;
        right: 20px;
        background: {$bg};
        color: white;
        padding: 15px 25px;
        border-radius: 8px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        z-index: 9999;
        transform: translateX(400px);
        transition: transform 0.4s ease;
        max-width: 350px;
    ">
        <div style="display:flex;align-items:center;gap:10px;">
            <span style="flex:1;">{$pesan}</span>
            <span onclick="hideToast()" style="cursor:pointer;font-size:18px;">&times;</span>
        </div>
    </div>

    <script>
        // Tampilkan toast dengan animasi slide
        setTimeout(function() {
            document.getElementById('toast-notif').style.transform = 'translateX(0)';
        }, 100);

        // Sembunyikan toast setelah 4 detik
        setTimeout(function() {
            hideToast();
        }, 4000);

        function hideToast() {
            var toast = document.getElementById('toast-notif');
            if (toast) {
                toast.style.transform = 'translateX(400px)';
                setTimeout(function() { toast.remove(); }, 400);
            }
        }
    </script>
    HTML;
}

Contoh Penggunaan Toast

<?php
require_once 'toast.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $aksi = $_POST['aksi'] ?? '';

    switch ($aksi) {
        case 'simpan':
            setToast('success', 'Data berhasil disimpan ke database!');
            break;
        case 'hapus':
            setToast('error', 'Data berhasil dihapus!');
            break;
        case 'update':
            setToast('info', 'Data berhasil diperbarui!');
            break;
        default:
            setToast('warning', 'Aksi tidak dikenali!');
    }

    header('Location: ' . $_SERVER['PHP_SELF']);
    exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Toast Notification PHP</title>
</head>
<body style="font-family:Arial; padding:50px; background:#f3f4f6;">
    <?php renderToast(); ?>

    <h1>Test Toast Notification</h1>
    <p>Klik tombol di bawah untuk melihat berbagai jenis notifikasi toast:</p>

    <div style="display:flex; gap:10px; margin-top:20px;">
        <form method="POST"><input type="hidden" name="aksi" value="simpan">
            <button type="submit" style="background:#22c55e;color:white;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;">Simpan (Success)</button>
        </form>
        <form method="POST"><input type="hidden" name="aksi" value="hapus">
            <button type="submit" style="background:#ef4444;color:white;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;">Hapus (Error)</button>
        </form>
        <form method="POST"><input type="hidden" name="aksi" value="update">
            <button type="submit" style="background:#3b82f6;color:white;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;">Update (Info)</button>
        </form>
        <form method="POST"><input type="hidden" name="aksi" value="lainnya">
            <button type="submit" style="background:#f59e0b;color:white;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;">Warning</button>
        </form>
    </div>
</body>
</html>

Metode 3: Multiple Toast (Stack Notification)

Jika kamu ingin menampilkan beberapa notifikasi sekaligus (stack), gunakan versi berikut:

<?php
session_start();

function addNotif($tipe, $pesan) {
    if (!isset($_SESSION['notifications'])) {
        $_SESSION['notifications'] = [];
    }
    $_SESSION['notifications'][] = ['tipe' => $tipe, 'pesan' => $pesan];
}

function renderNotifications() {
    if (!isset($_SESSION['notifications']) || empty($_SESSION['notifications'])) return;

    $notifs = $_SESSION['notifications'];
    unset($_SESSION['notifications']);

    $warna = [
        'success' => '#22c55e',
        'error'   => '#ef4444',
        'warning' => '#f59e0b',
        'info'    => '#3b82f6'
    ];

    echo '<div id="notif-stack" style="position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;">';

    foreach ($notifs as $i => $notif) {
        $bg = $warna[$notif['tipe']] ?? '#6b7280';
        $pesan = htmlspecialchars($notif['pesan']);
        $delay = $i * 200;

        echo "<div class=\"notif-item\" data-index=\"{$i}\" style=\"
            background:{$bg};color:white;padding:12px 20px;border-radius:8px;
            font-family:Arial;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15);
            max-width:350px;transform:translateX(400px);transition:transform 0.4s ease;
            display:flex;align-items:center;gap:10px;
        \">
            <span style=\"flex:1;\">{$pesan}</span>
            <span onclick=\"closeNotif(this)\" style=\"cursor:pointer;font-size:16px;\">&times;</span>
        </div>";
    }

    echo '</div>';

    echo '<script>
        // Tampilkan semua notifikasi dengan delay bertahap
        document.querySelectorAll(".notif-item").forEach(function(el, i) {
            setTimeout(function() {
                el.style.transform = "translateX(0)";
            }, ' . $delay . ' + 100);

            // Hilangkan otomatis setelah 5 detik
            setTimeout(function() {
                el.style.transform = "translateX(400px)";
                setTimeout(function() { el.remove(); }, 400);
            }, 5000);
        });

        function closeNotif(btn) {
            var el = btn.parentElement;
            el.style.transform = "translateX(400px)";
            setTimeout(function() { el.remove(); }, 400);
        }
    </script>';
}

Metode 4: Notifikasi dengan Database

Untuk notifikasi yang perlu disimpan dan bisa dilihat ulang (seperti notifikasi di media sosial), gunakan tabel database:

CREATE TABLE notifikasi (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL,
    judul VARCHAR(100) NOT NULL,
    pesan TEXT NOT NULL,
    tipe ENUM('success','error','warning','info') DEFAULT 'info',
    sudah_dibaca BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

<?php
// Menyimpan notifikasi ke database
function simpanNotif($pdo, $user_id, $judul, $pesan, $tipe = 'info') {
    $stmt = $pdo->prepare('INSERT INTO notifikasi (user_id, judul, pesan, tipe) VALUES (?, ?, ?, ?)');
    $stmt->execute([$user_id, $judul, $pesan, $tipe]);
}

// Mengambil notifikasi yang belum dibaca
function ambilNotif($pdo, $user_id, $limit = 10) {
    $stmt = $pdo->prepare('SELECT * FROM notifikasi WHERE user_id = ? AND sudah_dibaca = FALSE ORDER BY created_at DESC LIMIT ?');
    $stmt->bindValue(1, $user_id);
    $stmt->bindValue(2, $limit, PDO::PARAM_INT);
    $stmt->execute();
    return $stmt->fetchAll();
}

// Menandai notifikasi sudah dibaca
function tandaiDibaca($pdo, $id) {
    $stmt = $pdo->prepare('UPDATE notifikasi SET sudah_dibaca = TRUE WHERE id = ?');
    $stmt->execute([$id]);
}

// Menghitung jumlah notifikasi belum dibaca
function hitungNotif($pdo, $user_id) {
    $stmt = $pdo->prepare('SELECT COUNT(*) FROM notifikasi WHERE user_id = ? AND sudah_dibaca = FALSE');
    $stmt->execute([$user_id]);
    return $stmt->fetchColumn();
}

Tips dan Best Practice

1. Gunakan flash message untuk aksi sekali tampil Flash message cocok untuk pesan “Data berhasil disimpan” setelah submit form. Pesannya hilang setelah refresh.

2. Gunakan toast untuk notifikasi real-time Toast cocok untuk notifikasi yang muncul tanpa reload halaman, misalnya setelah AJAX request.

3. Gunakan notifikasi database untuk pesan penting Notifikasi database cocok untuk pesan yang perlu disimpan dan dilihat ulang, seperti notifikasi transaksi atau pesan sistem.

4. Batasi panjang pesan Notifikasi yang terlalu panjang sulit dibaca. Usahakan maksimal 100 karakter.

5. Gunakan warna yang konsisten

  • Hijau = sukses/berhasil
  • Merah = error/gagal
  • Kuning = warning/peringatan
  • Biru = info/informasi

6. Tambahkan suara notifikasi (opsional) Untuk notifikasi penting, kamu bisa menambahkan suara:

function playNotifSound() {
    var audio = new Audio('notif.mp3');
    audio.play();
}

Artikel Terkait

Kesimpulan

Ada beberapa cara membuat notifikasi pesan dengan PHP:

  1. Flash Message — disimpan di session, tampil sekali lalu hilang. Cocok untuk feedback setelah submit form.
  2. Toast Notification — muncul di pojok layar dengan animasi, hilang otomatis. Cocok untuk notifikasi ringan.
  3. Stack Notification — beberapa notifikasi muncul bersamaan. Cocok untuk proses batch.
  4. Notifikasi Database — disimpan permanen di database. Cocok untuk notifikasi penting yang perlu dilihat ulang.

Pilih metode yang sesuai dengan kebutuhan aplikasi kamu. Untuk aplikasi sederhana, flash message sudah cukup. Untuk aplikasi yang lebih kompleks, kombinasikan dengan notifikasi database.

Sigit N avatar
Full-stack developer & technical writer. Berpengalaman di PHP, Laravel, NodeJS, MySQL, dan Python. Aktif menulis tutorial pemrograman dan maintaining open-source projects di PemburuKode sejak 2021.