Pernah tidak kepikiran untuk membuat feedback sebagai informasi yang akan didapatkan oleh user ? Jika tidak, ayo mulai untuk dipikirkan dan jika sudah mari kita lanjutkan untuk memikirkannya. Feedback untuk setiap aksi yang dilakukan user merupakan hal yang wajib untuk diberikan. Kenapa ? Sederhana, agar user tahu apakah tindakan yang telah dilakukan pada sebuah website berhasil, gagal, atau yang lainnya.
Supaya ada tujuan yang akan di capai, maka case kali ini adalah setelah berhasil login dan setiap kali mengakses halaman dashboard / home maka akan menampilkan alert. Jadi ini merupakan lanjutan dari tutorial sebelumnya yakni : Mudahnya membuat fitur register dan login pada laravel 5.4
Manisnya Sweet Alert
Package ini dibuat oleh uxweb, yang dapat anda temukan di packagist.org. Sweet alert sudah di design menarik dan mudah untuk digunakan, jadi anda dapat memberikan flash message pada user ketika tindakannya benar atau salah. Saya akan menunjukkannya setelah package ini sudah di install. Berikut langkah langkah yang harus dilakukan :
Pertama, gunakan composer require untuk melakukan instalasi via command line :
composer require uxweb/sweet-alert
opsi lainnya bisa juga dengan menambahkan baris berikut pada composer.json :
"uxweb/sweet-alert": "~1.4"
Kemudian running command :
composer update
Jika sudah selesai, buka config/app.php kemudian tambahkan baris berikut pada providers array :
UxWeb\SweetAlert\SweetAlertServiceProvider::class,
Lalu tambahkan juga pada facade alias yang terletak dibawah providers :
'Alert' => UxWeb\SweetAlert\SweetAlert::class,
Terakhir, anda harus mendownload .js dan .css file disini : http://t4t5.github.io/sweetalert/ . Buka file resources/views/layouts/app.blade.php kemudian tambahkan baris berikut sebelum tag </head>
<link rel="stylesheet" type="text/css" href="/pathto/css/sweetalert.css">
Dan sebelum tag </body> tambahkan baris ini :
<script src="/pathto/js/sweetalert.js"></script>
@include('sweet::alert')
Karena disini saya menggunakan cdn saja untuk css dan js sweetalert maka cukup saya tambahkan link cdnsnya, sehingga akan menjadi seperti ini :
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
Instalasi dan pengaturan view sudah dilakukan, saatnya berpindah ke controller. Buka file HomeController pada App/Http/Controllers/ lalu modifikasi baris berikut :
public function index()
{
Alert::success('pesan yang ingin disampaikan', 'Judul Pesan');
return view('home');
}
dan jangan lupa untuk menambahkan use statements :
use Alert;
Persiapan telah selesai, saatnya untuk proses testing. Silahkan akses localhost/daengweb.id/public/login atau localhost:8000/public/login, kemudian setelah login anda akan di direct ke halaman dashboard yang sekaligus akan menampilkan alert seperti berikut :
Contoh lainnya dalam penggunaan alert, semisal ingin menampilkan pesan error maka cukup memodifikasinya menjadi :
public function index()
{
Alert::error('pesan yang ingin disampaikan', 'Judul Pesan');
return view('home');
}
Dan anda akan melihat alert error yang akan ditampilkan. Untuk opsi alert lainnya yang bisa anda gunakan :
Alert::message('Message', 'Optional Title');
Alert::basic('Basic Message', 'Mandatory Title');
Alert::info('Info Message', 'Optional Title');
Alert::success('Success Message', 'Optional Title');
Alert::error('Error Message', 'Optional Title');
Alert::warning('Warning Message', 'Optional Title');
Untuk lebih lengkapnya dapat anda cek pada dokumentasi sweet alert uxweb
Flash Messages
Jika anda ingin membuat flash messages tanpa menggunakan package sweet alert, maka anda dapat merujuk pada dokumentasi laravel : flash messages
Pada controller, anda bisa membuatnya menjadi seperti ini :
session()->flash('status', 'Task was successful!');
session() method tersedia secara global pada controller dan views. Pada contoh kali ini ‘status’ adalah kuncinya dan ‘task was successful!’ adalah valuenya.
Kemudian pada view, anda dapat menggunakan dengan cara :
@if(session()->has('status'))
{{ session('status') }}
@endif
Tentu saja perbedaannya dari segi tampilan akan berbeda dengan sweet alert
Anda bisa mempercantik tampilannya dengan menggunakan bootstrap alert, jika anda menginginkannya, anda bisa merujuk pada dokumentasi ini.
Comments