Menampilkan Pesan Sukses / Error dengan Alert Bootstrap dan SweetAlert di PHP

Ketika membuat sistem CRUD (Create, Read, Update, Delete) dengan PHP, pengguna perlu tahu apakah aksi mereka berhasil atau gagal. Daripada hanya menampilkan teks biasa seperti Data berhasil disimpan!, kita bisa membuat tampilannya jauh lebih menarik dengan dengan Alert Bootstrap dan SweetAlert di PHP.

Artikel ini akan mengajarkan dua cara praktis untuk menampilkan pesan sukses/error:

Bootstrap Alert – tampil langsung di halaman.

SweetAlert2 – tampil sebagai pop-up elegan dengan animasi.

1. Persiapan File Bootstrap & SweetAlert

Tambahkan link CDN berikut di bagian <head> file PHP kamu (misalnya index.php):

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Dan sebelum tag </body>, tambahkan Bootstrap JS:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

2. Menampilkan Pesan dengan Bootstrap Alert

Contoh sederhana (tambah.php)

<?php
include 'koneksi.php';
$message = "";

if (isset($_POST['submit'])) {
    $nama = $_POST['nama'];
    $email = $_POST['email'];

    $stmt = $conn->prepare("INSERT INTO users (nama, email) VALUES (?, ?)");
    $stmt->bind_param("ss", $nama, $email);

    if ($stmt->execute()) {
        $message = '<div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Sukses!</strong> Data berhasil disimpan.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>';
    } else {
        $message = '<div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Gagal!</strong> Terjadi kesalahan saat menyimpan data.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>';
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Tambah Data dengan Bootstrap Alert</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

<?= $message; ?>

<form method="post" class="w-50">
    <div class="mb-3">
        <label>Nama</label>
        <input type="text" name="nama" class="form-control" required>
    </div>
    <div class="mb-3">
        <label>Email</label>
        <input type="email" name="email" class="form-control" required>
    </div>
    <button type="submit" name="submit" class="btn btn-primary">Simpan</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Kelebihan:

Mudah digunakan tanpa JavaScript tambahan.
Dapat dikombinasikan dengan session agar tetap muncul setelah redirect.

3. Menampilkan Pesan dengan SweetAlert2 (Popup Interaktif)

SweetAlert2 memberikan tampilan yang lebih modern seperti notifikasi pop-up di aplikasi besar (Shopee, Tokopedia, dll).

Contoh (tambah.php dengan SweetAlert2)

<?php
include 'koneksi.php';
$alert = "";

if (isset($_POST['submit'])) {
    $nama = $_POST['nama'];
    $email = $_POST['email'];

    $stmt = $conn->prepare("INSERT INTO users (nama, email) VALUES (?, ?)");
    $stmt->bind_param("ss", $nama, $email);

    if ($stmt->execute()) {
        $alert = "success";
    } else {
        $alert = "error";
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Tambah Data dengan SweetAlert2</title>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>

<form method="post">
    <label>Nama:</label><br>
    <input type="text" name="nama" required><br><br>
    <label>Email:</label><br>
    <input type="email" name="email" required><br><br>
    <input type="submit" name="submit" value="Simpan">
</form>

<?php if ($alert == "success"): ?>
<script>
Swal.fire({
    icon: 'success',
    title: 'Berhasil!',
    text: 'Data berhasil disimpan.',
    showConfirmButton: false,
    timer: 2000
})
</script>
<?php elseif ($alert == "error"): ?>
<script>
Swal.fire({
    icon: 'error',
    title: 'Gagal!',
    text: 'Terjadi kesalahan saat menyimpan data.',
    showConfirmButton: true
})
</script>
<?php endif; ?>

</body>
</html>

Kelebihan:

Desain lebih menarik dan profesional.
Bisa otomatis hilang (timer).
Dapat digunakan untuk
konfirmasi hapus, logout, dan lainnya.

4. Contoh Penggunaan SweetAlert untuk Konfirmasi Hapus

<a href="hapus.php?id=<?= $row['id']; ?>" 
   onclick="return confirmDelete(event, <?= $row['id']; ?>)">Hapus</a>

<script>
function confirmDelete(e, id) {
    e.preventDefault();
    Swal.fire({
        title: 'Yakin ingin menghapus?',
        text: "Data yang dihapus tidak bisa dikembalikan!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, hapus!'
    }).then((result) => {
        if (result.isConfirmed) {
            window.location = 'hapus.php?id=' + id;
        }
    });
}
</script>

Tips Tambahan

Gunakan Bootstrap Alert untuk pesan yang perlu tampil di halaman.
Gunakan SweetAlert2 untuk pop-up atau aksi interaktif.
Pesan bisa disimpan sementara di $_SESSION agar tetap muncul setelah redirect.
Hindari menampilkan error mentah dari server (gunakan pesan umum seperti “Terjadi kesalahan, coba lagi.”)

Kesimpulan

Dengan Bootstrap Alert dan SweetAlert2, aplikasi PHP kamu akan:

Lebih interaktif dan modern ✨
Memberikan umpan balik visual yang jelas kepada pengguna
Meningkatkan pengalaman pengguna (user experience)

Gunakan Bootstrap untuk tampilan sederhana, dan SweetAlert2 untuk efek profesional di aksi penting seperti tambah, edit, atau hapus data.