• Langkah 1 - Membuat Proses Delete Data
• Langkah 2 - Uji Coba Delete Data
• Kesimpulan

Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat proses delete data di dalam Preact menggunakan Rest API. Disini konsepnya sangat mudah sekali, karena kita tinggal menambahkan 1 method saja di dalam file post index.

Langkah 1 - Membuat Proses Delete Data

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

src/pages/posts/index.jsx

//import useState dan useEffect
import { useState, useEffect } from "preact/hooks";

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

//import Link
import { Link } from "preact-router/match";

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

  //define method
  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 useEffect
  useEffect(() => {
    //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="container mt-5 mb-5">
      <div className="row">
        <div className="col-md-12">
          <Link
            href="/posts/create"
            className="btn btn-md btn-success rounded shadow border-0 mb-3"
          >
            ADD NEW POST
          </Link>
          <div className="card border-0 rounded shadow">
            <div className="card-body">
              <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">
                          <Link
                            href={`/posts/edit/${post.id}`}
                            className="btn btn-sm btn-primary rounded-sm shadow border-0 me-2"
                          >
                            EDIT
                          </Link>
                          <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>
    </div>
  );
}

Dari perubahan kode di atas, pertama kita menambahkan method baru dengan nama deletePost, method tersebut memiliki parameter id.

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

	//...
	
}

Di dalamnya, kita melakukan fetch ke backend untuk proses delete data dengan endpoint /api/posts/:id menggunakan method DELETE.

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

	//...
	
}

Jika proses delete data berhasil dilakukan, maka kita akan memanggil method fetchDataPosts, tujuannya agar dilakukan fetch ulang dengan data yang terbaru.

//call method "fetchDataPosts"
fetchDataPosts();

Dan di dalam button DELETE, kita tinggal memanggil method di atas.

<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 seperti berikut ini.

Jika kita klik OK, maka akan melakukan proses delete data di dalam server dan kita akan mendapatkan hasil seperti berikut ini.

Kesimpulan

Pada artikel terkahir ini, kita telah belajar bagaimana cara membuat proses delete data di dalam Preact dengan Rest API.

Jika teman-teman mempunyai kendala saat belajar, jangan sungkan-sungkan untuk bertanya melalui kolom komentar dimasing-masing post, atau juga bisa melalui group Telegram dari SantriKoding.

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