Integrasi dan Implementasi Sweet Alert Pada Laravel 5.1

Sweet alert merupakan salah satu library javascript yang membuat tampilan alert javascript menjadi menawan. Dan untuk kali ini, kita akan mencoba mengimplementasikan ke dalam framework laravel.

1. Langkah awal berupa instalasi melalui file composer.json :

"require": {
    "uxweb/sweet-alert": "~1.1"
}

lalu jalankan composer update. 2. Lalu tambah pada service provider yang berada di file app/config.php

'providers' => [
    UxWeb\SweetAlert\SweetAlertServiceProvider::class
];

3. Untuk memudahkan juga, kita dapat tambahkan Facade di file yang sama

'aliases' => [
    'Alert' => UxWeb\SweetAlert\SweetAlert::class
];

4. Jika sudah anda perlu mendownload file javascript dan css milik sweet alert di sini Setelah didownload, pastikan anda melakukan pemanggilan pada file javascript dan css tersebut ke dalam file view Anda. 5.Lalu Anda perlu menambahkan/include view milik sweet alert ke dalam file view anda @include('sweet::alert') maka keseluruhan file view Anda kurang lebih menjadi seperti :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/sweetalert.css">
</head>
<body>

    <div class="container">
        <p>Welcome to my website...</p>
    </div>

    <script src="js/sweetalert.min.js"></script>

    <!-- Include this after the sweet alert js file -->
    @include('sweet::alert')

</body>
</html>

Nah, untuk implementasi pemanggilan alert menggunakan facade di controller dapat dilakukan seperti :

public function store()
{
    Alert::message('Robots are working!');

    return Redirect::home();
}

fungsi lainnya :

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

atau jika menggunakan helper

public function destroy()
{
    Auth::logout();

    alert()->success('You have been logged out.', 'Good bye!');

    return home();
}

fungsi lainnya dalam helper :

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

Masih banyak kustomisasi yang dapat dilakukan, untuk tahu lebih banyak bisa meluncur ke sini https://github.com/uxweb/sweet-alert

Integrasi dan Implementasi Sweet Alert Pada Laravel 5.1

Bacaan terkait

Cara Install Composer di Windows Dengan Mudah

Panduan Instalasi PHP, MySQL, dan Apache di macOS

Menerapkan IP Blocker di Laravel

Komentar (0)

Tulis komentar