Tutorial Laravel 9 dan Next.js #7 : Delete Data di Next.js


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Laravel 9 dan Next.js #7 : Delete Data di Next.js

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.



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami