Beranda / Pemrograman / Tutorial

Tutorial PHP: Flash Message / Toast Notifikasi (Part 7)

Posting Komentar

🔔 Tutorial PHP: Flash Message / Toast Notifikasi (Part 7)

Sobat ngoding, kali ini kita akan menambahkan fitur flash message atau notifikasi pop-up sederhana di aplikasi PHP kita. Cocok banget untuk memberi feedback ke user setelah aksi seperti login, update profil, logout, atau error!

Notifikasi Alert PHP

📌 Apa Itu Flash Message?

Flash message adalah pesan sementara (biasanya disimpan di $_SESSION) yang ditampilkan sekali lalu hilang. Contoh:

  • Login berhasil!
  • Email tidak ditemukan!

1. Tambahkan File flash.php (Reusable)


<?php
function flash() {
  if (isset($_SESSION['flash'])) {
    echo '<div class="flash '.$_SESSION['flash']['type'].'">'.$_SESSION['flash']['msg'].'</div>';
    unset($_SESSION['flash']);
  }
}
?>

2. Tambahkan CSS untuk Gaya Alert


<style>
.flash {
  padding: 10px 20px;
  margin-bottom: 15px;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  animation: fadeOut 4s forwards;
}
.flash.success { background: #4caf50; }
.flash.error   { background: #f44336; }
@keyframes fadeOut {
  0%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; display: none; }
}
</style>

3. Gunakan di File Login/Register/Profil (Contoh: login.php)


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

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $email = $_POST['email'];
  $pass = $_POST['password'];

  // Cek akun
  $stmt = $conn->prepare("SELECT id,password FROM users WHERE email=?");
  $stmt->bind_param("s", $email);
  $stmt->execute();
  $res = $stmt->get_result();

  if ($res->num_rows === 1) {
    $user = $res->fetch_assoc();
    if (password_verify($pass, $user['password'])) {
      $_SESSION['user_id'] = $user['id'];
      $_SESSION['flash'] = ['type' => 'success', 'msg' => 'Login berhasil!'];
      header("Location: dashboard.php");
      exit;
    }
  }
  $_SESSION['flash'] = ['type' => 'error', 'msg' => 'Email atau password salah!'];
  header("Location: login.php");
  exit;
}
?>

4. Tampilkan Flash Message di Halaman Tujuan


<?php
session_start();
require 'flash.php';
?>

<body>
  <?php flash(); ?>

  <!-- Konten halaman lain di sini -->
</body>

🧠 Tips Penggunaan

  • Jangan lupa panggil flash() di setiap halaman redirect
  • Bisa juga ditaruh di header layout supaya global
  • Bisa ditambah ikon atau ditutup manual dengan JavaScript

✅ Kesimpulan

Sekarang aplikasi kamu sudah bisa memberikan feedback langsung ke user lewat notifikasi yang keren dan rapi! 🚀

Di part selanjutnya kita akan belajar upload multiple file / gambar dengan PHP. Sampai jumpa di tutorial lanjutan ya! 😊

Posting Komentar untuk "Tutorial PHP: Flash Message / Toast Notifikasi (Part 7)"

Posting Komentar