DEV Community

Hilmi Hidayat
Hilmi Hidayat

Posted on • Originally published at divisidev.com on

Cara Mudah Menggunakan Sweet Alert di Laravel

#tutorials

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

php artisan sweetalert:publish
Enter fullscreen mode Exit fullscreen mode

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

@include('sweetalert::alert')
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

protected $guarded=[];
Enter fullscreen mode Exit fullscreen mode

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();
    });
}
Enter fullscreen mode Exit fullscreen mode

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

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Membuat Fungsi Create Data

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

php artisan make:controller PostController
Enter fullscreen mode Exit fullscreen mode

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();
    }
}
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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/bootstrap@5.3.0/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>
Enter fullscreen mode Exit fullscreen mode

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'));
}
Enter fullscreen mode Exit fullscreen mode

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();
}
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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

<td>#</td>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

Toast

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

toast('Your Post as been submited!','success');
Enter fullscreen mode Exit fullscreen mode

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();
}
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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!');
}
Enter fullscreen mode Exit fullscreen mode

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!');
}
Enter fullscreen mode Exit fullscreen mode

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!');
}
Enter fullscreen mode Exit fullscreen mode

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!');
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Read next

oluwanifemi_loveth_1 profile image

Identity and Access Management in AWS: How to Create an IAM User, User Group, and Attach Policy to User Group in AWS

Oluwanifemi Loveth -

mageshk profile image

Understanding Operator Associativity in JavaScript

Magesh -

patfinder profile image

Lodash - a javascript power tool

Le Vuong -

ng_news profile image

Ng-News 24/45: Rationale behind (potential) Authoring Format

ng-news -