Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MENGGUNAKAN SWEET ALERT DI PHP

Panduan langkah demi langkah cara menggunakan Sweet Alert di PHP untuk membuat notifikasi yang menarik dan responsif di aplikasi web kamu.

Sweet Alert adalah pustaka JavaScript yang populer untuk membuat alert atau notifikasi yang lebih menarik dan interaktif daripada alert bawaan browser. Dengan mengintegrasikan Sweet Alert dalam PHP, kamu bisa memberikan feedback yang lebih baik kepada pengguna saat mereka berinteraksi dengan aplikasi web kamu. Berikut adalah cara menggunakan Sweet Alert di PHP.

Persiapan

Sebelum memulai, pastikan kamu telah memiliki Sweet Alert di halaman web kamu. Kamu bisa mendapatkannya dengan menambahkan skrip Sweet Alert melalui CDN:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

Tambahkan baris di atas di dalam tag <head> atau sebelum tag penutup </body> pada halaman HTML kamu.

Tampilkan Sweet Alert

Untuk menampilkan Sweet Alert, kamu perlu menulis skrip JavaScript yang memanggil fungsi Sweet Alert saat event tertentu terjadi, seperti setelah form terkirim. Berikut adalah contoh penggunaannya dalam event PHP:

if (isset($_POST['submit'])) {
    // Proses data form
    echo "<script>
            Swal.fire({
              title: 'Sukses!',
              text: 'Pendaftaran kamu berhasil!',
              icon: 'success',
              confirmButtonText: 'OK'
            });
          </script>";
}

Penanganan Kondisional dengan PHP

Kamu juga bisa menggunakan Sweet Alert untuk menampilkan notifikasi berdasarkan kondisi tertentu, contohnya untuk menampilkan pesan sukses atau error setelah menyimpan data:

if (isset($_POST['submit'])) {
    // Proses data
   
    if ($data_tersimpan) {
        echo "<script>
                Swal.fire({
                  title: 'Sukses!',
                  text: 'Data berhasil disimpan.',
                  icon: 'success',
                  confirmButtonText: 'OK'
                });
              </script>";
    } else {
        echo "<script>
                Swal.fire({
                  title: 'Error!',
                  text: 'Data gagal disimpan.',
                  icon: 'error',
                  confirmButtonText: 'Coba lagi'
                });
              </script>";
    }
}

Penggunaan Sweet Alert dengan Redirect

Kadang kamu ingin menampilkan Sweet Alert di halaman berikutnya setelah redirect. Kamu bisa menggunakan sesi untuk menyimpan status dan pesan yang akan ditampilkan:

// Setelah proses penyimpanan data
if ($data_tersimpan) {
    $_SESSION['status'] = 'Sukses';
    $_SESSION['message'] = 'Data berhasil disimpan.';
    header('Location: halaman_sukses.php');
} else {
    $_SESSION['status'] = 'Gagal';
    $_SESSION['message'] = 'Data gagal disimpan.';
    header('Location: halaman_gagal.php');
}

// Kemudian di halaman_sukses.php atau halaman_gagal.php
if (isset($_SESSION['status'])) {
    echo "<script>
            Swal.fire({
              title: '".$_SESSION['status']."!',
              text: '".$_SESSION['message']."',
              icon: '".strtolower($_SESSION['status'])."',
              confirmButtonText: 'OK'
            });
          </script>";
    unset($_SESSION['status']);
    unset($_SESSION['message']);
}

Dengan mengikuti langkah-langkah di atas, kamu sudah bisa mengintegrasikan Sweet Alert dalam PHP untuk menambah interaktivitas di aplikasi web kamu. Selamat mencoba!

cover kelas Kelas membuat website dengan HTML dan CSS
Kelas membuat website dengan HTML dan CSS

belajar membuat website kamu dari nol. Cocok untuk pemula

Lihat Kelas

Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding