Monday, November 5, 2018

Cara Membuat Flash Message dengan Sweet Alert di Laravel

Cara Membuat Flash Message dengan Sweet Alert di Laravel



Pada postingan kali ini saya akan membagikan sesuatu yang elegan dan keren yaitu sebuah flash message. Seperti namanya, flash message artinya pesan cepat atau pesan kilat yang akan disampaikan kepada user mengenai sesuatu. Bisa kita katakan sebagai feedback balasan untuk user karena telah melakukan sesuatu. Pada gambar diatas merupakan contoh flash message dimana ketika kita telah berhasil menambahkan data baru pada database.

Setelah sekian lama saya mencoba dan terus mencoba flash message ini akhir nya berhasil juga. Ada perasaan senang yang tak terlukiskan sehingga saya menuangkan nya disini dalam bentuk tulisan sekaligu untuk dokumentasi saya sendiri. Apabila lupa akan bisa lihat kembali pada blog yang saya tulis ini.

Okee.. pada kasus ini saya menggunakan flash message dengan sweet alert di laravel. Terbilang gampang-gampang susah. Dikatakan gampang ketika kita sudah tau, sulit ketika kita kita mengalami error sampai beberapa hari. Namun, ternyata membuat nya cukup sederhana dan simple sekali.

Hal yang pertama kali yang harus kita lakukan adalah menmbahkan "uxweb/sweet-alert": "~1.4" pada file composer.json.


Selanjutnya adalah lakukan perintah composer update pada CMD. Tunggu proses nya hingga selesai.

Setelah itu, tambahkan pada config/app.php, pada bagian providers UxWeb\SweetAlert\SweetAlertServiceProvider::class,  

Tambahkan juga pada aliases,  'Alert' => UxWeb\SweetAlert\SweetAlert::class,

Setelah itu pada bagian layout, kita akan menambahkan file .css dan .js dari sweet-alert. Kunjungi web resmi cdnjs dan cari sweet-alert atau bisa langsung kunjungi DISINI. Dowload file .min.js dan .min.css atau bisa langsung kaitkan pada link tersebut.


Letakkan link .min.css pada tag sebelum </head> dan .min.js pada bagian sebelum tag </body>.  

Jangan lupa untuk menambahkan view dari sweet-alertnya pada bagian bawah script .min.js barusan, dengan perintah @include('sweet::alert'). Dalam kasus ini saya meletakkan langsung pada layout jadi tidak di file view nya karena view akan banyak, sedangkan view pasti memiliki layout.


Selanjutnya, kita akan bergerak menuju tak terbatas dan melampaui nya ke controller. Pada controller kita akan deklarasikan class yang sudah kita pasang tadi dengan perintah use Alert; sehingga kita bisa menggunakan fungsi dari alert pada class. 

Setelah itu, kita akan tambahkan fungsi alert pada bagian function save. Kita akan memanggil flash messange nya sebelum di redirect sehingga dia akan muncul. Seperti gambar dibawah ini.


Silahkan lakukan tambah data, dan jika berhasil maka akan terlihat muncul flash message yang telah dibuat tadi.

Itulah tadi cara membuat flash message dengan sweet-alert di laravel, untuk libraries seewt alertnya bisa dilihat pada situs  Packalyst. Disana terdapat kumpula package khusus LARAVEL.

#SyntaxError


EmoticonEmoticon