Cara Mudah Menggunakan Sweet Alert di Laravel
Package Laravel Laravel 10

Cara Mudah Menggunakan Sweet Alert di Laravel
Admin
Admin
ID • 1 year ago • 15 min read • 19934 views
Cara Mudah Menggunakan Sweet Alert di Laravel

Cara Mudah Menggunakan Sweet Alert di Laravel

id • 15 min read • 19934 views

Laravel Sweet Alert - Halo Sobat Dev 👋 di artikel ini saya menuliskan mengenai cara yang sangat mudah dalam mengimplementasikan Sweetalert2 library di laravel. Tujuan dari artikel ini yaitu membantu kalian yang mungkin bingung dalam mengimplementasikan Sweetalert2 library di laravel.

Sweetalert2 digunakan untuk membuat atau menampilkan berbagai type custom alert messages atau membuat custom popup seperti success messages, error messages, warning messages, confirmation modal, custom messages, dan lain-lain.

Di artikel ini, saya akan memperkenalkan laravel sweet alert package by realrashid yang akan sangat membantu kita dalam menggunakan sweetalert2 library di laravel dengan cara yang sangat mudah. 🚀 🤘

Table of Contents

Install Laravel

Hal pertama yang akan kita lakukan disini yaitu memulainya dengan menginstall fresh laravel project menggunakan perintah seperti di bawah ini.

laravel new laravel-sweetalert

Install Sweet Alert Package

Cara mudah menggunakan sweet alert di laravel yaitu dengan menggunakan sweet alert package dari realrashid. Laravel sweet alert adalah sebuah package untuk laravel yang menyediakan cara mudah untuk menampilkan alert message dengan menggunakan Sweetalert2 library.

Untuk menginstall package tersebut, kita bisa menggunakan perintah composer seperti di bawah ini.

composer require realrashid/sweet-alert

Kemudian publish asset package tersebut dengan perintah artisan seperti di bawah ini.

php artisan sweetalert:publish

Nah, setelah itu, kita bisa menyematkan kode seperti di bawah ini pada master layout atau file view kita.

@include('sweetalert::alert')

Implementasi Sweet Alert di Laravel

Pada artikel ini saya akan memberikan contoh penerapannya untuk post management. Jadi, nanti kita buat post management sederhana untuk menampilkan data post pada table dan membuat fungsi create dan delete yang akan menampilkan sweet alert, entah itu success message, error message atau confirm alert.

Oke, untuk itu disini saya mengajak kalian untuk membuat file model Post beserta migrationnya dengan menjalankan perintah artisan seperti di bawah ini.

php artisan make:model Post -m

Buka file model Post dan tambahkan kode seperti di bawah ini agar kita bisa menggunakan mass assignment.

protected $guarded=[];

Lanjut ke migration post. Ubah method up menjadi seperti di bawah ini. Sebagai contoh, disini kita akan membuat posts table dengan field; id, title, description, created_at dan updated_at.

public function up(): void
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('description');
        $table->timestamps();
    });
}

Selanjutnya, jalankan perintah php artisan migrate. Tapi sebelumnya, pastikan kalian sudah membuat database dan mengaturnya pada file .env.

php artisan migrate

Membuat Fungsi Create Data

Oke. Kita lanjut ke Controller ya. Buatlah controller baru menggunakan perintah seperti di bawah ini.

php artisan make:controller PostController

Kemudian buka file PostController yang baru saja kita generate. Disini saya berikan contoh dengan membuat method index dan store.

Coba perhatikan pada barisan teratas. Disini kita perlu import facade Alert untuk dapat mengimplementasikan sweet alert di laravel dengan menggunakan facade. Kemudian pada method store, setelah data tersimpan kita akan menampilkan success alert.

<?php

namespace App\Http\Controllers;

use Alert;
use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::latest()->paginate();

        return view('welcome',compact('posts'));
    }

    public function store(Request $request)
    {
        Post::create($request->all());
        Alert::success('Hore!', 'Post Created Successfully');
        return redirect()->back();
    }
}

Kita pindah ke routes/web.php, tambahkan route baru seperti di bawah ini. Disini kita akan menambahkan dua route yaitu posts dan store.

Route::get('posts', [App\Http\Controllers\PostController::class, 'index'])->name('posts.index');
Route::post('posts/store', [App\Http\Controllers\PostController::class, 'store'])->name('posts.store');

Kemudian buka file welcome.blade.php. Ubah kode yang ada dengan kode di bawah ini. Disini kita akan membuat dua card yaitu; form create dan table yang menampilkan data-data dari table posts.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Sweet Alert</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    </head>
    <body>
        <div class="container py-5">
            <div class="row">
                <div class="card mb-5">
                    <div class="card-body">
                        <form action="{{ route('posts.store') }}" method="post">
                            @csrf
                            <div class="mb-3">
                                <label for="title" class="form-label">Title</label>
                                <input type="text" name="title" id="title" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea name="description" id="description" class="form-control"></textarea>
                            </div>
                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary">Create</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card mb-3">
                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Title</th>
                                    <th scope="col">Description</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($posts as $key => $post)
                                <tr>
                                    <th scope="row">{{ ++$key }}</th>
                                    <td>{{ $post->title }}</td>
                                    <td>{{ Str::limit($post->description, 50) }}</td>
                                    <td>#</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center">No data found</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                        {{ $posts->links() }}
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Oke, jika semua tahap sudah dilakukan, sekarang waktunya kita untuk menguji apakah sweet alert sudah bisa berjalan ketika kita berhasil submit data. Silakan coba jalankan laravel project kalian, dan buka pada browser. Coba isi field title dan description lalu klik button create. Jika berhasil, maka sweet alert akan tampil seperti gambar di bawah ini.

laravel sweet alert

Menambahkan Fungsi Delete dengan Confirm Alert

Nice. Kita sudah berhasil mengimplementasikan sweet alert (success alert) di laravel. Sekarang saya akan mengajak kalian untuk mencoba mengimplementasikan confirm alert di laravel. Jadi ceritanya kita akan menambahkan fungsi delete atau menambahkan button delete pada table yang telah kita buat sebelumnya di file welcome.blade.php tadi. Ketika button delete tersebut diklik maka akan tampilkan confirm alert.

Silakan buka file PostController, ubah atau tambahkan kode seperti di bawah ini pada method index. Disini kita menambahkan variable title dan text yang akan tampil pada confirm alert, jadi kalian bebas mau mengisikan dengan text seperti apa.

public function index()
{
    $posts = Post::latest()->paginate();
    $title = 'Delete Data!';
    $text = "Are you sure you want to delete?";
    confirmDelete($title, $text);

    return view('welcome',compact('posts'));
}

Lanjut kita tambahkan method destroy pada PostController. Jika pada method store kita menggunakan facade, maka pada method destroy ini saya memberikan contoh penggunaan helper function. Jadi, ketika button delete diklik maka akan tampil confirm alert dan ketika diklik Yes, delete it maka data akan terhapus dan akan menampilkan success alert yang berisikan pesan Post Deleted Successfully.

public function destroy(Post $post) {
    $post->delete();
    alert()->success('Hore!','Post Deleted Successfully');
    return back();
}

Kita berpindah lagi ke routes/web.php untuk menambahkan route destroy seperti di bawah ini.

Route::delete('posts/{post}/destroy', [App\Http\Controllers\PostController::class, 'destroy'])->name('posts.destroy');

Kemudian, buka file welcome.blade.php, cari kode seperti di bawah ini.

<td>#</td>

Lalu ganti dengan seperti di bawah ini. Disini kita menambahkan link atau button delete yang mengarah ke route destroy yang baru saja kita tambahkan. Coba perhatikan juga, disini kita menambahkan attribute data-confirm-delete ke delete button untuk me-trigger confirmation popup.

<td>
    <a href="{{ route('posts.destroy', $post->id) }}" class="btn btn-danger" data-confirm-delete="true">Delete</a>
</td>

Kalian dapat menyesuaikan opsi confirmation popup dengan mengatur environment variable di file .env.

SWEET_ALERT_CONFIRM_DELETE_CONFIRM_BUTTON_TEXT='Yes, delete it!'
SWEET_ALERT_CONFIRM_DELETE_CANCEL_BUTTON_TEXT='No, cancel'
SWEET_ALERT_CONFIRM_DELETE_SHOW_CANCEL_BUTTON=true
SWEET_ALERT_CONFIRM_DELETE_SHOW_CLOSE_BUTTON=false
SWEET_ALERT_CONFIRM_DELETE_ICON='warning'
SWEET_ALERT_CONFIRM_DELETE_SHOW_LOADER_ON_CONFIRM=true

Oke, jika semua sudah dikerjakan, mari kita coba fitur delete. Buka pada browser, kemudian klik salah satu button delete, maka akan tampilkan confirm alert seperti di bawah ini.

confirm alert laravel

Cara-cara Penggunaan Sweet Alert

Ada beberapa cara untuk menggunakan atau menampilkan sweet alert di laravel dengan laravel sweet alert package ini, seperti; menggunakan facade, helper function atau bisa juga menerapkannya dengan middleware.

Menggunakan Facade

Berikut ini merupakan contoh-contoh menampilkan sweet alert dengan menggunakan facade.

Alert::alert('Title', 'Message', 'Type');
Alert::success('Success Title', 'Success Message');
Alert::info('Info Title', 'Info Message');
Alert::warning('Warning Title', 'Warning Message');
Alert::error('Error Title', 'Error Message');
Alert::question('Question Title', 'Question Message');
Alert::image('Image Title!','Image Description','Image URL','Image Width','Image Height', 'Image Alt');
Alert::html('Html Title', 'Html Code', 'Type');
Alert::toast('Toast Message', 'Toast Type');

Menggunakan helper function

Selain menggunakan facade, kita juga dapat menampilkan alert menggunakan helper function.

Alert

Berikut ini merupakan contoh-contoh menampilkan sweet alert dengan berbagai type alert menggunakan helper function.

alert('Title','Lorem Lorem Lorem', 'success');
alert()->success('Title','Lorem Lorem Lorem');
alert()->info('Title','Lorem Lorem Lorem');
alert()->warning('Title','Lorem Lorem Lorem');
alert()->error('Title','Lorem Lorem Lorem');
alert()->question('Title','Lorem Lorem Lorem');
alert()->image('Image Title!','Image Description','Image URL','Image Width','Image Height', 'Image Alt');
alert()->html('<i>HTML</i> <u>example</u>'," You can use <b>bold text</b>, <a href='//github.com'>links</a> and other HTML tags ",'success');

Toast

Selain itu kita juga dapat menampilkan toast di laravel dengan package ini.

toast('Your Post as been submited!','success');

Untuk penggunaan atau menampilkan toast, bisa dilihat pada contoh di bawah ini.

public function store(Request $request)
{
    Post::create($request->all());
    toast('Your Post as been submited!','success');
    return redirect()->back();
}

Jadi, ketika data berhasil disimpan, maka akan muncul toast seperti gambar di bawah ini.

laravel toast

Menggunakan Middleware

Hal pertama yang harus kita lakukan jika kita mau menggunkan middleware yaitu mendaftarkan middleware ke dalam web middleware groups hanya dengan menambahkan middleware class.

\RealRashid\SweetAlert\ToSweetAlert::class,

Tambahkan kode di atas ke dalam $middlewareGroups di app/Http/Kernel.php.

Error messages auto displaying

Untuk menampilkan error message secara otomatis, kita perlu menambahkan key SWEET_ALERT_AUTO_DISPLAY_ERROR_MESSAGES pada file .env dan berikan value true. Dengan begitu, maka akan secara otomatis menampilkan validation error messages.

Error & Succes Alert

Oke, mari kita coba menambahkan validasi pada method store seperti di bawah ini. Disini, cara kita menampilkan sweet alert juga berbeda dengan apa yang sudah dijelaskan di atas. Lebih simple kan?

public function store(Request $request)
{
    //validation
    $request->validate([
        'title'       => 'required|min:3',
        'description' => 'required|min:3'
    ]);
    $post = Post::create($request->all());
    return redirect('posts')->with('success', 'Post Created Successfully!');
    // OR
    return redirect('posts')->withSuccess('Post Created Successfully!');
}

Sekarang, kita coba tambahkan data dengan mengosongkan field description. Ketika kita submit, maka akan muncul error alert dengan validation message seperti gambar di bawah ini.

laravel error alert

Cara lainnya seperti di bawah ini.

public function store(Request $request)
{
    $validator = Validator::make($request->all(), [
        'title'       => 'required|min:3',
        'description' => 'required|min:3'
    ]);

    if ($validator->fails()) {
        return back()->with('errors', $validator->messages()->all()[0])->withInput();
    }
    $post = Post::create($request->all());
    return redirect('posts')->with('success', 'Post Created Successfully!');
    // OR
    return redirect('posts')->withSuccess('Post Created Successfully!');
}

Error Toast

Selain bisa menampilkan validation error message dalam bentuk alert, dengan package ini kita juga bisa menampilkannya dengan toast. Contohnya seperti di bawah ini.

public function store(Request $request)
{
    $validator = Validator::make($request->all(), [
        'title'       => 'required|min:3',
        'description' => 'required|min:3'
    ]);

    if ($validator->fails()) {
        return back()->with('toast_error', $validator->messages()->all()[0])->withInput();
    }
    $post = Post::create($request->all());
    return redirect('posts')->with('success', 'Post Created Successfully!');
    // OR
    return redirect('posts')->withSuccess('Post Created Successfully!');
}

Jika kita coba lagi dengan skenario yang sama atau dengan mengosongkan field, maka ketika submit akan muncul error toast seperti gambar di bawah ini.

laravel toast error

Succces Toast

Nah, untuk menampilkan success toast, kalian bisa menggunakan cara seperti contoh di bawah ini.

public function store(Request $request)
{
    $validator = Validator::make($request->all(), [
        'title'       => 'required|min:3',
        'description' => 'required|min:3'
    ]);

    if ($validator->fails()) {
        return back()->with('toast_error', $validator->messages()->all()[0])->withInput();
    }
    $post = Post::create($request->all());
    return redirect('posts')->with('toast_success', 'Post Created Successfully!');
    // OR
    return redirect('posts')->withToastSuccess('Post Created Successfully!');
}

Kita tidak dapat menggunakan helper method dengan middleware, tapi kita bisa mengatur default value di file config/sweetalert.php. Disini saya merekomendasikan untuk menggunakan key .env yang contohnya bisa dilihat di bawah ini. Tambahkan key & value di bawah ini pada file .env.

SWEET_ALERT_MIDDLEWARE_AUTO_CLOSE=false
SWEET_ALERT_MIDDLEWARE_TOAST_POSITION='top-end'
SWEET_ALERT_MIDDLEWARE_TOAST_CLOSE_BUTTON=true
SWEET_ALERT_MIDDLEWARE_ALERT_CLOSE_TIME=5000
SWEET_ALERT_AUTO_DISPLAY_ERROR_MESSAGES=true

Sekian untuk artikel kali ini. Sampai disini saya rasa kita sudah belajar banyak tentang cara yang sangat mudah untuk menggunakan sweet alert di laravel, baik itu dalam bentuk pop up ataupun toast. Untuk dokumentasi lebih lengkap, kalian bisa mempelajari package ini di situs resmi Laravel Sweet Alert by Realrashid.

 

Full Documentation: Laravel Sweet Alert

Published on June 25, 2023
Last updated on January 24, 2025
Tutorials
Package Laravel Laravel 10
Previous Integrasi Google Analytics GA4 di Laravel dengan L...
Next Kirim Email di Laravel Menggunakan Gmail SMTP

If you like this post and want to support us, you can support us via buymeacoffee or trakteer.

trakteer divisidev divisidev: buy me a coffee