Manajemen Query & Ekstraksi Data Efisien Di Astro Di Astro, React & Laravel — Part 4

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

npm install react@18.2.0 react-dom@18.2.0

Tahap 2: Penulisan Kode & Konfigurasi

npm install @astrojs/react@3.0.0

Tahap 3: Penulisan Kode & Konfigurasi

npm install @astrojs/renderer-react@0.5.0

Tahap 4: Penulisan Kode & Konfigurasi

import { defineConfig } from "astro/config";
import react from "@astrojs/react";

export default defineConfig({
  // renderers: ["@astrojs/renderer-react"],
  integrations: [react()],
  output: "server",
});

Tahap 5: Penulisan Kode & Konfigurasi

import react from "@astrojs/react";

Tahap 6: Penulisan Kode & Konfigurasi

integrations: [react()],

Tahap 7: Penulisan Kode & Konfigurasi

npm install axios@1.5.0

Tahap 8: Penulisan Kode & Konfigurasi

//import axios
import axios from "axios";

const api = axios.create({
  //set default endpoint API
  baseURL: "http://localhost:8000",
});

export default api;

Tahap 9: Penulisan Kode & Konfigurasi

//import useState dan useEffect
import { useState, useEffect } from "react";

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

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

  //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 useEffect
  useEffect(() => {
    //call method "fetchDataPosts"
    fetchDataPosts();
  }, []);

  return (
    <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 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>
  );
}

Tahap 10: Penulisan Kode & Konfigurasi

//import useState dan useEffect
import { useState, useEffect } from "react";

Tahap 11: Penulisan Kode & Konfigurasi

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

Tahap 12: Penulisan Kode & Konfigurasi

//init state
const [posts, setPosts] = useState([]);

Tahap 13: Penulisan Kode & Konfigurasi

//define method "fetchDataPosts"
const fetchDataPosts = async () => {

	//...
	
}

Tahap 14: Penulisan Kode & Konfigurasi

//fetch data from API with Axios
await api.get("/api/posts").then((response) => {

	//...
	
}

Tahap 15: Penulisan Kode & Konfigurasi

//assign response data to state "posts"
setPosts(response.data.data.data);

Tahap 16: Penulisan Kode & Konfigurasi

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

Tahap 17: Penulisan Kode & Konfigurasi

posts.map((post, index) => (

	//...

))

Tahap 18: Penulisan Kode & Konfigurasi

---
//import transitions effect
import { ViewTransitions } from "astro:transitions";

//import layout
import MainLayout from "../../layouts/MainLayout.astro";

//import list posts React component
import PostsIndex from "../../components/PostsIndex.jsx";
---

<MainLayout>
  <ViewTransitions />
  <div class="container mb-5" style="margin-top: 5rem;">
    <div class="row">
      <div class="col-md-12">
        <a
          href="/posts/create"
          class="btn btn-md btn-success rounded shadow-sm border-0 mb-3"
          >ADD NEW POST</a
        >
        <div class="card border-0 rounded shadow-sm">
          <div class="card-body">
            <PostsIndex client:visible />
          </div>
        </div>
      </div>
    </div>
  </div>
</MainLayout>

Tahap 19: Penulisan Kode & Konfigurasi

//import transitions effect
import { ViewTransitions } from "astro:transitions";

Tahap 20: Penulisan Kode & Konfigurasi

<ViewTransitions />

Tahap 21: Penulisan Kode & Konfigurasi

//import layout
import MainLayout from "../../layouts/MainLayout.astro";

Tahap 22: Penulisan Kode & Konfigurasi

//import list posts React component
import PostsIndex from "../../components/PostsIndex.jsx";

Tahap 23: Penulisan Kode & Konfigurasi

<PostsIndex client:visible />

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!