Delete Data Di Next.Js Di Laravel 9 Dan Next.Js — Part 7

Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.

Tahapan Implementasi & Walkthrough Kode

Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:

Tahap 1: Penulisan Kode & Konfigurasi

//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

Tahap 2: Penulisan Kode & Konfigurasi

//router
import { useRouter } from 'next/router';

Tahap 3: Penulisan Kode & Konfigurasi

//router
const router = useRouter();

Tahap 4: Penulisan Kode & Konfigurasi

//refresh data
const refreshData = () => {
    router.replace(router.asPath);
}

Tahap 5: Penulisan Kode & Konfigurasi

<button onClick={() => deletePost(post.id)} className="btn btn-sm btn-danger border-0 shadow-sm mb-3">DELETE</button>

Tahap 6: Penulisan Kode & Konfigurasi

//function "deletePost"
const deletePost = async (id) => {

	//...
	
}

Tahap 7: Penulisan Kode & Konfigurasi

await axios.delete(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/posts/${id}`);

Tahap 8: Penulisan Kode & Konfigurasi

//refresh data
refreshData();

Kesimpulan

Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.

Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!