Cara Menampilkan Notifikasi pada Program Berbasis PHP

Notifikasi merupakan bagian yang cukup penting dalam sebuah program berbasis PHP. Disebut penting, karena notifikasi merupakan bentuk umpan balik (feedback) program terhadap aksi yang dilakukan oleh pengguna (user). Misalnya, saat pengguna selesai mengunggah berkas, program dapat memberi notifikasi, apakah proses mengunggah berkas berhasil atau gagal.

Oleh karena itu, penting bagi kita untuk memahami cara menampilkan notifikasi pada program berbasis PHP. Sebelum membahas lebih lanjut, mari perhatikan Daftar Isi berikut.

Contoh Program yang Menggunakan Notifikasi

Sebuah program yang baik, menggunakan notifikasi sebagai umpan balik terhadap aksi yang dilakukan oleh pengguna. Aksi tersebut dapat berupa menambah, menyunting, atau menghapus data. Ada banyak aplikasi web berbasis PHP yang menggunakannya. Sebagai contoh, website MathPro.id menampilkan notifikasi pada saat pengguna menyimpan Problem Matematika.

Jika program berhasil memenuhi permintaan pengguna, maka sebuah notifikasi akan muncul. Begitupun jika program gagal memenuhi permintaan pengguna.

Contoh lainnya adalah halaman subscribe pada website KimiaMath, sebuah website yang ditujukan untuk teman-teman yang ingin belajar matematika. Jika pengunjung memasukkan email, maka program akan mengirimkan email konfirmasi. Informasi mengenai berhasil atau tidaknya proses ini, akan ditampilkan kepada pengguna melalui notifikasi.

Penulis belum sempat menambah tangkapan layar (screenshot) untuk contoh ini. Jika anda penasaran, silakan subscribe website KimiaMath dan lihat bagaimana notifikasi yang muncul. 🙂

Alur dalam Menampilkan notifikasi?

Proses ini terdiri dari dua bagian, yaitu mengatur isi notifikasi dan menampilkan notifikasi kepada pengguna. Keseluruhan proses ini memanfaatkan fitur SESSSION pada PHP. Kita akan membuat sebuah fungsi untuk mengatur isi notifikasi, dengan nama setNotif, dan sebuah fungsi untuk menampilkan notifikasi, dengan nama showNotif.

Mengatur Isi notifikasi

Pertama, kita buat kerangka fungsi setNotif. Sebagai contoh, kita akan membuat notifikasi yang paling sederhana. Disebut sederhana, karena notifikasi ini hanya menggunakan satu parameter, yaitu isi notifikasi.

function setNotif($isi) {
  // Blok kode yang akan dijalankan
}

Agar lebih mudah dipahami, notifikasi akan kita buat sesederhana mungkin. Dalam contoh ini, kita hanya menuliskan notifikasi dalam sebuah tag div. Elemen HTML ini kemudian disimpan ke dalam variabel $_SESSION[‘notif’].

function setNotif($isi) {
  $_SESSION['notif'] = "<div>$isi</div>";
}

Sampai di sini, fungsi untuk mengatur isi notifikasi telah selesai. Fungsi ini menyimpan isi notifikasi di dalam variabel $_SESSION[‘notif’], yang nantinya ditampilkan menggunakan fungsi showNotif.

Menampilkan Isi Notifikasi

Fungsi showNotif hanya menyampilkan isi notifikasi yang tersimpan di dalam SESSION, sehingga tidak memerlukan parameter.

function showNotif() {
  if(isset($_SESSION['notif'])) {
    echo $_SESSION['notif'];
    unset($_SESSION['notif']);
  }
}

Dengan fungsi isset, program memeriksa apakah ada notifikasi yang tersimpan di dalam SESSION. Jika ada, maka perintah echo akan menampilkan isi notifikasi. Selanjutnya, notifikasi tersebut dihapus dari SESSION menggunakan fungsi unset.

Implementasi pada Program

Membuat File function.php

Buat sebuah file dengan nama function.php dengan isi sebagai berikut.

<?php
  // setNotif dan showNotif menggunakan SESSION, jadi kita mulai dulu SESSION-nya
  session_start();

  // setNotif digunakan untuk mengatur isi notifikasi
  function setNotif($isi) {
    $_SESSION['notif'] = "<div>$isi</div>";
  }

  // showNotif digunakan untuk menampilkan isi notifikasi
  function showNotif() {
    if(isset($_SESSION['notif'])) {
      echo $_SESSION['notif'];
      unset($_SESSION['notif']);
    }
  }

File ini berisi fungsi setNotif dan showNotif. Karena melibatkan SESSION, maka kita perlu memulai SESSION terlebih dahulu. Untuk itu, kita menggunakan fungsi session_start.

Sebelum masuk pada bagian berikutnya, mari melakukan ujicoba. Tambahkan script berikut pada akhir file function.php.

setNotif("Berhasil");
showNotif();

Jika muncul notifikasi “Berhasil”, maka kedua fungsi yang telah dibuat berjalan dengan baik. Silakan hapus dua baris di atas pada file function.php. Berikutnya, kita akan membuat file index.php.

Membuat File index.php

Kita akan membuat halaman seperti pada gambar berikut.

Buat sebuah file bernama index.php dengan isi sebagai berikut.

<?php
  // Agar function showNotif bisa digunakan, include file function.php
  include "function.php";
?>

<html>
  <head>
    <title>Program PHP Sederhana</title>
  </head>

  <body>
    <?php showNotif(); // Notifikasi akan tampil pada bagian ini ?>
    <p>Berapakah hasil dari -2+7?</p>
    <form method="POST" action="cek.php">
      <input type="text" name="jawaban">
      <input type="submit" name="cek" value="Periksa">
    </form>
  </body>
</html>

Isi form akan diproses pada file cek.php, yang akan kita buat pada bagian berikutnya.

Notifikasi akan muncul pada bagian di mana fungsi showNotif dijalankan. Jika anda mencoba menjalankan file index.php, maka showNotif() tidak memberi output apapun. Ini terjadi karena showNotif() menampilkan sesuatu, hanya jika variabel $_SESSION[‘notif’] mempunyai nilai. Padahal variabel ini belum punyai nilai, karena function setNotif() belum dijalankan.

Membuat File cek.php

Buat file bernama cek.php dengan isi sebagai berikut.

<?php
  // Agar function setNotif bisa digunakan, include file function.php
  include "function.php";

  if(isset($_POST['cek'])) {
    $jawaban = $_POST['jawaban'];
    if($jawaban == 5) {
      setNotif("Jawaban Anda Benar");
    }else{
      setNotif("Jawaban Anda Salah");
    }
    header('Location: index.php');
    exit;
  }

Setelah form di-submit, program akan memeriksa apakah jawaban tersebut benar. Jika benar, maka dibuat sebuah notifikasi dengan isi “Jawaban Anda Benar”. Sebaliknya, dibuat sebuah notifikasi dengan isi “Jawaban Anda Salah”.

Setelah notifikasi ditetapkan, program akan mengalihkan ke halaman index.php dan notifikasi pun akan tampil.

Penutup

Demikian cara menampilkan notifikasi pada program berbasis PHP, disertai dengan sebuah contoh sederhana. Contoh di atas hanya sekadar ilustrasi agar pembaca dapat memahami dengan lebih mudah.

Dalam kasus tersebut, akan lebih mudah jika form diproses pada halaman yang sama (index.php) dan notifikasipun dapat ditampilkan secara langsung. Dan akan lebih mudah lagi, jika pemrosesan form tidak melibatkan server (tidak menggunakan PHP) dan cukup menggunakan JavaScript.

Anda dapat berkreasi dengan menambahkan parameter lainnya pada fungsi setNotif. Contoh parameter yang dapat ditambahkan adalah tipe notifikasi, seperti success dan warning. Anda juga dapat mengatur tampilan notifikasi menggunakan CSS. Misalnya, notifikasi dengan tipe success akan ditampilkan dengan background berwarna hijau. Semoga bermanfaat! 🙂