MasRud

Membuat Notifikasi dengan Sweet Alert pada PHP

02 April 2017|Kategori: JavaScript

Suatu aplikasi yang baik pasti memberikan notifikasi/pemberitahuan. Notifikasi tersebut biasanya muncul setelah pengguna tersebut melakukan interaksi terhadap program aplikasi maupun sebab lainnya.

Notifikasi tersebut bertujuan untuk memberikan informasi kepada pengguna bahwa apa yang mereka lakukan telah berhasil dieksekusi oleh program atau belum, apakah data yang diinputkan salah atau hal-hal lainnya.

Dengan demikian pengguna akan tahu apa yang harus mereka lakukan sehingga mudah dalam menggunakan aplikasi.

Termasuk aplikasi berbasis web yang dibuat dengan bahasa pemrograman PHP. Sesuatu yang umum digunakan untuk membuat notifikasi pada aplikasi berbasis web PHP adalah dengan Javascript, yaitu berupa alert.

contoh alert dengan javascript standar.

<script language="javascript">window.alert("Login Error! Silakan coba lagi");</script>

Kode di atas akan menampilkan notifikasi alert seperti ini.

Cara pembuatan notifikasi semacam ini mudah, akan tetapi dilihat dari segi tampilannya kurang menarik. Karena itulah muncul sebuah library Javascript untuk mempercantik notifikasi alert javascript ini, namanya Sweet Alert.

Coba bandingkan kedua notifikasi alert di bawah ini.

Notifikasi Javascript sandart

Notifikasi Sweet Alert

Bagaimana, lebih keren yang notifikasi Sweet Alert bukan?

Untuk menggunakan library Sweet Alert, pertama kita kita harus menginstall dan mendownload Sweet Alert terlebih dahulu.

1. Install melalui bower(untuk frontend)

$ bower install sweetalert

2. Install melalui NPM(untuk Node.js)

$ npm install sweetalert

3. Download file Sweet Alert CSS dan Javascript

Download file Sweet Alert css dan javascript melalui link di bawah ini (link ini diambil dari repository Sweet Alert di Github).

Download

Setelah selesai proses download file Sweet Alert tersebut, langkah berikutnya adalah memasukkan file CSS dan Javascript Sweet Alert ke dalam source kode aplikasi PHP yang kita buat.

Letakkan css Sweet Alert dibagian atas

<link rel="stylesheet" type="text/css" href="asset/css/sweetalert.css">

Letakkan javascript Sweet Alert dibagian bawah

<script src="asset/js/sweetalert.min.js"></script>

Kemudian panggil fungsi sweetAlert.

swal("Login Gagal! Silakan coba lagi")

Untuk lebih jelasnya, masrud telah membuat sebuah contoh penerapan Sweet Alert untuk membuat notifikasi login error. Silakan Anda amati dan pelajari source code di bawah ini.

Pada source code diatas, masrud menerapkan Sweet Alert menggunakan session. Jadi Sweet Alert akan dimuat pada saat session error dibuat. Kodenya seperti ini

swal({title: "Login Gagal!",
             text: "Silakan coba lagi",
             timer: 3000,
             type: "error",
             showConfirmButton: false
})

Selain beberapa yang masrud sebutkan di atas, masih banyak opsi-opsi lainnya silakan lihat di situs resminya di http://t4t5.github.io/sweetalert/

Inilah screenshoot dari notifikasi error login dengan Sweet Alert.

Untuk lebih praktis dan reusable, sweet alert ini dijadikan sebagai fungsi yang bisa dipanggil saat membutuhkan notifikasi.

Demikianlah tutorial singkat yang dapat saya sampaikan, semoga bermanfaat dan selamat mencoba :).

Freelance PHP programmer dari Nganjuk, Jawa Timur. Anda dapat menghubungi saya melalui WhatsApp 0852-3290-4156 (fast response), email m45rud@gmail.com atau facebook.com/m45rud