• Langkah 1 - Menambahkan Method Delete Data
• Langkah 2 - Uji Coba Delete Data
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelum-sebelumnya kita telah berhasil menampilkan data, proses insert, edit dan update di Solid Js. Dan pada artikel kali ini, kita semua akan belajar bagaimana cara membuat proses delete data dari database di Solid Js menggunakan Rest API.

Langkah 1 - Menambahkan Method Delete Data

Disini kita cukup menambahkan sebuah method saja di dalam file posts index, method ini nantinya akan dijalankan ketika button delete diklik.

Silahkan teman-teman buka file src/pages/posts/index.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.

src/pages/posts/index.jsx

//import createSignal dan createEffect
import { createSignal, createEffect } from "solid-js";

//import from @solidjs/router
import { A } from "@solidjs/router";

//import services api
import api from "../../services/api";

export default function PostIndex() {
  //init state
  const [posts, setPosts] = createSignal([]);

  //define method "fetchDataPosts"
  const fetchDataPosts = async () => {
    //fetch data from API with Axios
    await api.get("/api/posts").then((response) => {
      //assign response data to state "posts"
      setPosts(response.data.data.data);
    });
  };

  //run hook createEffect
  createEffect(() => {
    //call method "fetchDataPosts"
    fetchDataPosts();
  }, []);

  //method deletePost
  const deletePost = async (id) => {
    //delete with api
    await api.delete(`/api/posts/${id}`).then(() => {
      //call method "fetchDataPosts"
      fetchDataPosts();
    });
  };

  return (
    <div className="row mt-5">
      <div className="col-md-12">
        <div className="card border-0 shadow rounded">
          <div className="card-body">
            <A
              href="/posts/create"
              className="btn btn-md btn-success rounded shadow border-0 mb-2"
            >
              ADD POST
            </A>
            <table className="table table-bordered">
              <thead className="bg-dark text-white">
                <tr>
                  <th scope="col">Image</th>
                  <th scope="col">Title</th>
                  <th scope="col">Content</th>
                  <th scope="col" style={{ width: "15%" }}>
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody>
                {posts().length > 0 ? (
                  posts().map((post, index) => (
                    <tr key={index}>
                      <td className="text-center">
                        <img
                          src={post.image}
                          alt={post.title}
                          width="200"
                          className="rounded"
                        />
                      </td>
                      <td>{post.title}</td>
                      <td>{post.content}</td>
                      <td className="text-center">
                        <a
                          href={`/posts/edit/${post.id}`}
                          className="btn btn-sm btn-primary rounded-sm shadow border-0 me-2"
                        >
                          EDIT
                        </a>
                        <button
                          onClick={() => {
                            if (window.confirm("Delete the item?")) {
                              deletePost(post.id);
                            }
                          }}
                          className="btn btn-sm btn-danger rounded-sm shadow border-0"
                        >
                          DELETE
                        </button>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan="4" className="text-center">
                      <div className="alert alert-danger mb-0">
                        Data Belum Tersedia!
                      </div>
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

Dari perubahan kode di atas, pertama kita menambahkan method baru dengan nama deletePost. Di dalam method tersebut kita berikan parameter berupa ID dari data post yang akan dihapus.

//method deletePost
const deletePost = async (id) => {

	//...
	
}

Di dalam method tersebut, kita melakukan delete data ke dalam backend / Laravel menggunakan Rest API dengan endpoint /api/posts/:id dan http method yang digunakan adalah DELETE.

//delete with api
await api.delete(`/api/posts/${id}`).then(() => {

	//...
	
}

Jika proses delete data berhasil dilakukan, maka kita panggil method fetchDataPosts, tujuannya agar data posts dilakukan fetching ulang ke backend.

//call method "fetchDataPosts"
fetchDataPosts();

Dan di dalam button, kita cukup menambahkan event onClick yang isinya kita arahkan ke dalam method di atas, yaitu deletePost.

<button
  onClick={() => {
    if (window.confirm("Delete the item?")) {
      deletePost(post.id);
    }
  }}
  className="btn btn-sm btn-danger rounded-sm shadow border-0"
  >
  DELETE
</button>

Langkah 2 - Uji Coba Delete Data

Sekarang silahkan teman-teman klik button DELETE disalah satu data yang dimiliki, jika berhasil maka akan menampilkan alert konfirmasi seperti berikut ini.

Jika teman-teman klik OK, maka data akan dihapus di dalam database.

Kesimpulan

Pada artikel ini kita telah belajar bagaimana cara membuat proses delete data di Solid Js menggunakan Rest API dengan cara menambahkan sebuah method baru pada halaman posts index.

Jika teman-teman sat belajar mengalami kendala ata error, maka jangan sungkan-sungkan untuk bertanya melalui kolom komentar ata bisa juga melalui group Telegram dari SantriKoding.

SOURCE CODE : https://github.com/SantriKoding-com/Solid-Js-CRUD

Terima Kasih

• Membangun Website dan Aplikasi Android Desa Dengan Laravel, React.js dan React Native
• Membangun Smart Home System Dengan Laravel, React Native dan NodeMCU