Halo teman-teman semuanya, pada artikel sebelumnya kita telah melakukan proses edit dan update data ke dalam database, sekarang kita akan lanjutkan belajar bagaiamana cara melakukan proses delete data di dalam Next.js.
Langkah 1 - Menambahkan Method Delete Post
Sekarang kita akan menambahkan sebuah method di dalam halaman posts index, dimana method tersebut yang akan digunakan untuk proses hapus data ke dalam database melalui Rest API.
Silahkan buka file pages/posts/index.js, kemudian ubah kode-nya menjadi seperti berikut ini.
//layout
import Layout from "../../components/layout";
//import Link
import Link from 'next/link';
//import axios
import axios from "axios";
//router
import { useRouter } from 'next/router';
//fetch with "getServerSideProps"
export async function getServerSideProps() {
//http request
const req = await axios.get(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/posts`)
const res = await req.data.data.data
return {
props: {
posts: res // <-- assign response
},
}
}
function PostIndex(props) {
//destruct
const { posts } = props;
//router
const router = useRouter();
//refresh data
const refreshData = () => {
router.replace(router.asPath);
}
//function "deletePost"
const deletePost = async (id) => {
//sending
await axios.delete(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/posts/${id}`);
//refresh data
refreshData();
}
return(
<Layout>
<div className="container" style={{ marginTop: '80px' }}>
<div className="row">
<div className="col-md-12">
<div className="card border-0 shadow-sm rounded-3">
<div className="card-body">
<Link href="/posts/create">
<button className="btn btn-primary border-0 shadow-sm mb-3">TAMBAH</button>
</Link>
<table className="table table-bordered mb-0">
<thead>
<tr>
<th scope="col">IMAGE</th>
<th scope="col">JUDUL</th>
<th scope="col">CONTENT</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
{ posts.map((post) => (
<tr key={ post.id }>
<td className="text-center">
<img src={`${process.env.NEXT_PUBLIC_API_BACKEND}/storage/posts/${post.image}`} width="150" className="rounded-3"/>
</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center">
<Link href={`/posts/edit/${post.id}`}>
<button className="btn btn-sm btn-primary border-0 shadow-sm mb-3 me-3">EDIT</button>
</Link>
<button onClick={() => deletePost(post.id)} className="btn btn-sm btn-danger border-0 shadow-sm mb-3">DELETE</button>
</td>
</tr>
)) }
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</Layout>
)
}
export default PostIndex
Dari perubahan kode di atas, pertama kita import hook useRouter dari Next.js.
//router
import { useRouter } from 'next/router';
Setelah itu di dalam function component PostIndex kita membuat variable baru dengan nama router yang mana isinya adalah hook useRouter di atas.
//router
const router = useRouter();
Di bawahnya, kita buat method baru dengan nama refreshData. Method ini akan dipanggil ketika kita berhasil melakukan delete data di dalam server. Tujuannya agar data di refresh dengan data yang terbaru.
//refresh data
const refreshData = () => {
router.replace(router.asPath);
}
Kemudian di bawahnya kita membuat method baru dengan nama deletePost. Dimana method tersebut akan dijalankan ketika button delete di klik.
<button onClick={() => deletePost(post.id)} className="btn btn-sm btn-danger border-0 shadow-sm mb-3">DELETE</button>
//function "deletePost"
const deletePost = async (id) => {
//...
}
Di dalam method deletePost, kita melakukan HTTP request menggunakan Axios dengan method DELETE ke dalam endpoint /api/posts/:id.
await axios.delete(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/posts/${id}`);
Kemudian kita panggil method refreshData yang sudah kita buat sebelumnya.
//refresh data
refreshData();
Langkah 2 - Uji Coba Delete Post
Silahkan buka halaman posts index, kemudian klik button DELETE di salah satu data yang teman-teman miliki, jika berhasil maka kurang lebih seperti berikut ini.
Kurang lebih seperti itu cara melakukan proses hapus data di dalam Next.js dengan API yang dibuat di dalam Laravel. Jika teman-teman mangalami kendala saat praktek atau mengikutinya, maka silahkan bisa berrtanya pada kolom komentar atau di group telegram santrikoding.
Terima Kasih.