Posted by 
Biasanya kita membuat pop up notifikasi dengan menggunakan perintah alert dari javascript ataupun menggunakan bootstrap alert. Nah dalam artikel kali ini saya akan menjelaskan bagaimana cara membuat pop up notifikasi yang tampak bagus secara visual menggunakan plugin Sweet Alert. Seperti biasanya, saya hanya akan menjelaskan penggunaannya secara sederhana saja tidak sampai modifikasi secara mendalam.
#INSTALASI
Di sini saya menggunakan plugin sweet-alert yang terdapat pada link berikut ini https://github.com/uxweb/sweet-alert. Cara instalasi yang saya gunakan seperti biasanya adalah dengan menggunakan composer. Jalankan perintah berikut pada command promt dari direktori program laravel anda.
composer require uxweb/sweet-alert
Tunggu sampai proses download selesai kemudian tambahkan kode berikut pada file config/app.php.
'providers' => [
UxWeb\SweetAlert\SweetAlertServiceProvider::class,
];
'aliases' => [
'Alert' => UxWeb\SweetAlert\SweetAlert::class,
];
Seperti penggunaan package pada umumnya, tambahkan baris providers pada bagian providers dan baris aliases pada bagian aliases. Proses instalasi sudah berakhir sampai tahap ini, dan sekarang saatnya mempelajari bagaimana cara penggunaannya.
#CARA PENGGUNAAN
Untuk tutorial ini saya menggunakan route sebagai berikut untuk contohnya
Route::get('sweetalert','HomeController@index');
Kemudian buatlah file controller HomeController.php pada direktori app\Http\Controllers. Yang perlu diingat adalah kita harus melakukan include plugin ini terlebih dahulu. Jadi tambahkan kode berikut pada file controller tersebut.
use Alert;
Langkah berikutnya adalah membuat action index sesuai dengan action yang tertera dari route yang kita buat sebelumnya. Berikut ini adalah contoh kode dari action index yang saya gunakan
public function index()
{
Alert::message('Message', 'Optional Title');
return view ('sweetalert');
}
Terakhir adalah membuat file viewnya untuk menampilkan alert tersebut. Berikut ini adalah kode dari file sweetalert.blade.php yang saya buat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sweet Alert</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@include('sweet::alert')
</body>
</html>
Yang perlu diperhatikan dari kode di atas adalah anda perlu menambahkan file sweetalert.min.js di mana saya menggunakan url cdn yang telah disediakan. Kemudian anda juga harus menambahkan kode @include('sweet::alert') setelahnya.
#FUNGSI-FUNGSI SWEETALERT
Pada bagian ini saya akan menjelaskan beberapa cara penggunaan dari sweetalert selain cara default yang telah dijelaskan sebelumnya. Berikut ini adalah daftar kode yang dapat 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');
Mode success, info, warning, dll akan menampilkan notifikasi disertai dengan icon info, success, dll sesuai dengan perintah yang anda gunakan.
Selain cara tersebut, anda juga dapat menggunakan cara pemanggilan seperti kode di bawah ini
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');
alert()->basic('Basic Message', 'Mandatory Title')->autoclose(3500);
alert()->error('Error Message', 'Optional Title')->persistent('Close');
Kedua cara pemanggilan di atas akan menampilkan notifikasi yang sama. Pada contoh kode di atas terdapat perintah autoclose(). Perintah tersebut digunakan untuk membuat popup secara otomatis menutup setelah periode tertentu sesuai dengan parameter yang anda masukkan. Selain itu terdapat juga perintah persistent() yang digunakan jika anda ingin popup notifikasi dapat tertutup hanya setelah user menekan button Close (sesuai dengan string yang anda masukkan).
#MENGGUNAKAN MIDDLEWARE
Anda juga dapat menggunakan middleware untuk menggunakan sweetalert ini. Caranya adalah dengan menambahkan kode berikut ini
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
...
\UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class,
],
'api' => [
'throttle:60,1',
],
];
Sesuai dentgan dokumentasinya, pastikan anda menambahkan sweetalert hanya pada group web saja. Jika anda menggunakan cara middleware ini, popup hanya akan muncul jika program mendeteksi session flash errors, success, warning, info, message, basic. Contoh penggunaannya adalah dengan menggunakan perintah redirect seperti kode berikut ini :
return redirect('dashboard')->with('success', 'Profile updated!');
Jika anda menggunakan cara di atas maka program akan menampilkan popup dengan mode persistent (button OK). Sampai artikel ini ditulis saya masih belum tahu bagaimana caranya untuk mengganti string dari persistent tersebut atau menggantinya menjadi mode autoclose.
Demikianlah artikel Tutorial Laravel 5.5 - Membuat Popup Notifikasi dengan Sweet Alert ini. Semoga penjelasan saya pada artikel ini dapat mudah dipahami. Untuk cara penggunaanya yang lebih detail dapat anda baca dokumentasinya pada link github yang telah saya sertakan sebelumnya. Selamat mencoba.
comment 0 komentar
more_vert