Sweet Alert pada Laravel


    Assalamualaikum, gimana kabarnya temen temen semua ? semoga temen temen semua selalu diberikan kesehatan dan dalam keadaan baik baik saja. Pada blog kali ini saya akan membagikan sedikit materi mengenai Laravel. Biasanya kita menampilkan pesan success atau error di laravel itu menggunakan alert pada boostrap, tapi pada blog kali ini saya akan memberitahu bagaimana caranya jika kita menampilkan pesan success atau error itu menggunakan sweet alert. Jika yang belum tau sweet alert itu apa kalian bisa kunjugi web Sweet Alert . Langsung saja kita ke materinya, sebelum itu kita siapkan tools tools yang biasa kita gunakan untuk mengerjakan project laravel seperti Text Editor, Terminal dan Browser.

Langkah Langkah

1. Install Sweet Alert di terminal kalian dengan memasukkan command di bawah ini

    

2. Setelah terinstall, masukan command di bawah ini untuk mempublish asset yang diperlukan

3. Jika sudah, include file sweet alert ke dalam page yang diinginkan. Untuk contoh, saya mencobanya di file sweet-alert.blade.php dan untuk kodingannya bisa dilihat dibawah ini

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

    {{-- CDN CSS Bootstrap --}}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    {{-- CDN Fontawesome --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

</head>
<body>
    @include('sweetalert::alert')
    <center>        
        <a href="/alert" class="btn btn-primary p-3" style="margin-top:300px;">Tampilkan Alert</a>
    </center>
</body>
</html>

4. Tambahkan message pada controller yang nanti akan ditampilkan dan passing data nya

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Alert;

class AlertController extends Controller
{
    public function index()
    {
        return view('sweet-alert');
    }

    public function alert()
    {
        Alert::success('Success','Message Success');
        return redirect('/');
    }
}

5. Atur routing halamannya di file web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/''AlertController@index');
Route::get('/alert''AlertController@alert');


Uji Coba dan Hasil


Mungkin cukup sekian materi yang dapat saya bagikan ke teman teman semua mengenai Sweet Alert pada Laravel. Semoga materi ini bermanfaat dan bisa membantu temen temen yang kesulitan. Jangan lupa comment dan share jika kalian merasa materi ini bermanfaat. Terima Kasih, Wassalamualaikum.


0 Comments