Instalasi Sweet Alert Pada Laravel

Instalasi Sweet Alert Pada Laravel

Instalasi Sweet Alert Pada Laravel

Assalamu’alaikum warohmatullahi wabarokatuh.

Membuat Feedback sebagai informasi akibat dari tindakan yang dilakukan oleh user sangatlah penting, karena user harus tau apakah tindakan yang dilakukannya berhasil atau gagal.

Setiap kali user malakukan suatu proses misalnya proses menambah data agar tujuannya tercapai maka kita harus memberikan alert agar kita tau apakah proses menambah data berhasil atau gagal.

Kali ini saya akan membahas tentang mempercantik flash message pada laravel menggunakan package sweet alert yang dapat kita temukan di packagist.org.

Tahap Instalasi Sweet Alert

Menambahkan baris berikut pada composer.json 

"uxweb/sweet-alert": "~1.4"

Kemudian jalankan perintah :

    composer update

Atau kita dapat menggunakan cara cepat dengan terminal :

    composer require uxweb/sweet-alert

Tambahkan service provider di dalam  config/app.php :

UxWeb\SweetAlert\SweetAlertServiceProvider::class,

Tambahkan facade alias ke file yang sama ini di bagian bawah:

'Alert' => UxWeb\SweetAlert\SweetAlert::class,

Pada Layout Tambahkan CSS, JS dari sweet alert

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

Dan juga tambahkan code berikut dibawah sweetalert js.

@include('sweet::alert')

Pada Controller anda tambahkan use statements ;

use Alert;

Contoh Penggunaan Sweet Alert, disini saya membuat HomeController.php dan menampilkannya pada welcome.blade.php  :

public function index() { 
    Alert::success('Isi dari Pesan yang ingin ditampilkan', 'Judul Pesan'); 
    return view('welcome'); 
}

Tahap Instalasi Telah selesai saatnya menjalankan program anda sesuai routing anda disini saya mengakses localhost:8000 dan hasilnya sebagai berikut :

Untuk opsi sweet 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 anda dapat membaca dokumentasi github sweet alert

Untuh Source code anda bisa dapatkan di sweet-alert-laravel.

 

Ditulis oleh : Luki Sanjaya (Peserta didik MIT School)

Related posts:

Loading Facebook Comments ...