Konfirmasi Delete dengan SweetAlert2 di Laravel 8

Confirmation delete? Tutorial konfirmasi delete dengan sweetalert2? Tambahkan reactjs di laravel? Berikut adalah cara membuat konfirmasi delete dengan sweetalert2 di laravel menggunakan reactjs.

Konfirmasi delete sangatlah dibutuhkan karena action ini adalah “delete/hapus” sehingga jangan sampai user melakukan delete tanpa disengaja. Maka dari itu membuat konfirmasi sebelum menghapus adalah tindakan pencegahan yang baik.

Karena membutuhkan javascript untuk mengaktifkan sweetalert maka saya biasa menggunakan reactjs sebagi medianya, untuk fullstack developer laravel dan reactjs bukanlah pilihan yang buruk dibuat dalam 1 folder yang sama.

Install SweetAlert2 dan ReactJS dengan mengetikkan kode berikut pada terminal :

npm install --save-dev sweetalert2 react react-dom @babel/preset-react

Buka webpack.mix.js dan ubah menjadi code berikut :

mix
.js("resources/js/app.js", "public/js")
.react()
.postCss("resources/css/app.css", "public/css", [
	require("postcss-import"),
	require("tailwindcss"),
	require("autoprefixer")
]);

Cukup perhatikan pada .react saja, Anda tambahkan .react() setelah js

Buat file resources/js/components/buttons/ButtonDelete.js dan masukkan code berikut :

import React from "react";

function ButtonDelete({ onClick }) {
  return (
    <button
      onClick={onClick}
      className="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition bg-red-500 border border-transparent rounded-full shadow select-none focus:border-red-600 hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-500 focus:ring-opacity-30 disabled:opacity-50"
    >
      <svg
        className="w-4 h-4 -mx-2"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fillRule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
          clipRule="evenodd"
        />
      </svg>
    </button>
  );
}

export default ButtonDelete;

Sekarang buat file resources/js/components/actions/Delete.js dan masukkan code berikut :

import ButtonDelete from "../buttons/ButtonDelete";
import React from "react";
import ReactDOM from "react-dom";
import Swal from "sweetalert2";

function Delete(props) {
  const handleDestroy = () => {
    try {
      Swal.fire({
        title: "Are you sure?",
        text: "You won't be able to revert this!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Yes, delete it!"
      }).then(result => {
        if (result.isConfirmed) {
          axios.delete(props.endpoint).then(response => {
            Swal.fire("Deleted!", response.data.message, "success").then(
              function() {
                window.location.reload();
              }
            );
          });
        }
      });
    } catch (error) {
      console.log(error.response.data.errors);
    }
  };

  return <ButtonDelete onClick={handleDestroy} />;
}

export default Delete;
if (document.querySelectorAll(".delete")) {
  const deleteNodes = document.querySelectorAll(".delete");
  deleteNodes.forEach(item => {
    var endpoint = item.getAttribute("endpoint");
    ReactDOM.render(<Delete endpoint={endpoint} />, item);
  });
}

Buka resources/js/app.js dan tambahkan component delete seperti code berikut :

require("./components/actions/Delete");

Sekarang jalankan perintah berikut untuk memuat semua file js yang telah dibuat pada langkah di atas :

npm run dev

Buka resources/views/articles/index.blade.php dan ubah button delete menjadi seperti kode berikut :

<div endpoint="{{ route('articles.destroy', $article) }}" class="inline delete"></div>

Buka app/Http/Controllers/ArticleController.php dan ubah bagian destroy menjadi kode berikut :

public function destroy($id)
{
    $article = Article::findOrFail($id);
    $article->delete();

    return response()->json(['message' => 'Article <span class="italic font-medium">deleted</span> successfully.']);
}

Maka sekarang jika Anda coba klik tombol delete akan terlihat seperti gambar berikut :

Itualah artikel tentang cara membuat konfirmasi delete dengan sweetalert2 di laravel yang dapat saya sampaikan, semoga bermanfaat. Untuk full source code nya bisa Anda unduh pada link di bawah.