~ 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

12478 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.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi E-Commerce Laravel 6 #4: Upload Products Laravel

Aplikasi E-Commerce Laravel 6 #4: Upload...

Salah satu fitur yang menjadi denyut nadi dari aplikasi penjualan adalah manajemen produk, sehingga pada serial kali ini kita akan membahas bagaimana membuat fitur upload products pada aplikasi e-comm...

Aplikasi E-Commerce Laravel 6 #3: Management Category (CRUD) Laravel

Aplikasi E-Commerce Laravel 6 #3: Manage...

Istilah CRUD adalah lompatan awal yang dijadikan tujuan kebanyakan orang dalam belajar bahasa pemrograman. Saya tipe orang yang setuju bahwa tidak semua aplikasi dibangun dengan potongan-potongan CRUD...

Aplikasi E-Commerce Laravel 6 #2: Templating & Authentication Laravel

Aplikasi E-Commerce Laravel 6 #2: Templa...

Menganalisa struktur database adalah utama yang harus dilakukan sebelum melanjutkan proses development. Hal ini bertujuan untuk mengarahkan kita dalam menentukan bagian mana yang harus dikerjakan terl...

Komentar