~ We are changing the world with technology. ~

Matt Mullenweg

Sweet Alert dan Flash Messages Laravel 5.4

Sweet Alert dan Flash Messages Laravel 5.4

10943 Dilihat

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.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #8: Manage Customers Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Pelanggan menjadi bagian yang penting dari sebuah perusahaan laundry, maka fitur yang akan dikerjakan pada serial ini adalah sebuah fitur untuk mengelola pelanggan. Adapun schema yang dirancang dimana...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #7: Push Notification Expenses Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Dalam setiap kegiatan berwirausaha pasti terdapat biaya biaya yang harus dikeluarkan untuk menjalankan operasional dari usaha tersebut, maka dalam aplikasi ini, kita tidak hanya akan mencatat transaks...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #6: Role & User Permissions Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Sambil menikmati secangkir kopi ini, kutuliskan serial lanjutan membuat Aplikasi Laundry menggunakan Laravel 5.8 & Vue.js dengan metode SPA (Single Page Application) yang telah memasuki serial ke-6 ny...

Komentar