ahmadajah03 Thu Nov 2020 1 year ago

Cara Menggunakan SweetAlert2 dengan AJAX di Laravel 8.x

Pada artikel ini, saya akan membagikan cara menggunakan SweetAlert2 di Laravel 8.x dengan AJAX. Ayo mulai.

1. Buat Controller

Buat controller user menggunakan perintah ini:

php artisan make:controller UserController

Buka controller user dan tempel kode ini:

UserController.php

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    // all users
    public function users()
    {
        $users = User::all();
        return view('users', compact('users'));
    }

    // delete user
    public function delete($id)
    {
        $delete = User::destroy($id);

        // check data deleted or not
        if ($delete == 1) {
            $success = true;
            $message = "User deleted successfully";
        } else {
            $success = true;
            $message = "User not found";
        }

        //  return response
        return response()->json([
            'success' => $success,
            'message' => $message,
        ]);
    }
}

Saya telah membuat dua fungsi. Satu untuk mendapatkan semua users dan satu lagi untuk menghapus user.

2. Tentukan Route & Masukkan data dummy

Mari tentukan route untuk dua fungsi tersebut:

routes/web.php

<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::get('users', [UserController::class, 'users']);
Route::post('delete/{id}', [UserController::class, 'delete']);

Sekarang mari kita masukkan beberapa data user dummy:

\App\Models\User::factory(5)->create(); // 5 fake user data

3. Set SweetAlert2 dengan AJAX di File Blade

Buat tampilan bernama "users.blade.php " dan tempel kode ini:

users.blade.php

<!doctype html>
<html lang="en">
<head>
    <!-- meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- csrf-token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.5.1/sweetalert2.all.min.js"></script>

    <title>How to Use SweetAlert2 with AJAX in Laravel 8.x</title>
</head>
<body class="container" style="margin-top: 40px;">

<div class="row" style="margin-bottom: 20px;">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h3>Users</h3>
        </div>
    </div>
</div>

<table class="table table-bordered">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th width="280px">Actions</th>
    </tr>
    @foreach ($users as $user)
        <tr>
            <td>{{ $user->id }}</td>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
            <td>
                <button class="btn btn-danger" onclick="deleteConfirmation({{$user->id}})">Delete</button>
            </td>
        </tr>
    @endforeach
</table>

<script type="text/javascript">
    function deleteConfirmation(id) {
        swal.fire({
            title: "Delete?",
            icon: 'question',
            text: "Please ensure and then confirm!",
            type: "warning",
            showCancelButton: !0,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            reverseButtons: !0
        }).then(function (e) {

            if (e.value === true) {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    type: 'POST',
                    url: "{{url('/delete')}}/" + id,
                    data: {_token: CSRF_TOKEN},
                    dataType: 'JSON',
                    success: function (results) {
                        if (results.success === true) {
                            swal.fire("Done!", results.message, "success");
                            // refresh page after 2 seconds
                            setTimeout(function(){
                                location.reload();
                            },2000);
                        } else {
                            swal.fire("Error!", results.message, "error");
                        }
                    }
                });

            } else {
                e.dismiss;
            }

        }, function (dismiss) {
            return false;
        })
    }
</script>
</body>
</html>

4. Jalankan dan Lihat Output

Sekarang jalankan proyek Laravel dan kunjungi route ini http://localhost:8000/users . Anda akan melihat halaman seperti ini:

Klik tombol Hapus  dan kotak konfirmasi SweetAlert2 akan muncul:

Jika Anda memilih  tombol Yes  maka data akan dihapus melalui AJAX dan Anda akan melihat pesan konfirmasi seperti ini:

Itu dia. Terima kasih sudah membaca. 🙂

laravel 8 laravel sweetAlert