Cara Install Sweet Alert di Laravel 5.3

Posted by

Sweet alert adalah sebuah pop up message yang dikemas dan didesain sedemikian rupa menggunakan javascript dan css sehingga menghasilkan pop up alert yang menarik.

Gambar diatas adalah contoh dari sweet alert

Sweet alert dibuat oleh uxweb. dan dapat ditemukan di packagist.org didesain dengan sangat menarik serta mudah untuk digunakan.

berikut dibawah ini cara untuk menginstall sweet alert menggunakan composer :

Pertama, gunakan composer require untuk melakukan instalasi via command line :

composer require uxweb/sweet-alert

Setelah itu update composer paketnya menggunakan command line dibawah ini :

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,

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

Berikut dibawah ini apabila anda ingin menggunakan CDN 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>

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;

Berikut dibawah ini pilihan pilihan paket yang disediakan oleh sweet alert.

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’);

Terima kasih telah membaca artikel cara install sweet alert untuk laravel 5.3