Membuat Halaman Tambah Produk di Nuxt 4 (SSR) dengan Laravel 12 sebagai API

Pada sesi kali ini, kita akan membahas bagaimana cara membuat halaman tambah produk pada aplikasi Nuxt 4 yang berjalan dalam mode SSR (Server Side Rendering), dengan Laravel 12 sebagai backend API-nya.

Langkah pertama yang perlu teman-teman lakukan adalah membuat sebuah folder baru dengan nama product. Folder ini nantinya akan berisi seluruh halaman yang berkaitan dengan produk.

Setelah folder product dibuat, silakan tambahkan sebuah file baru bernama create.vue di dalamnya. File ini akan digunakan sebagai halaman untuk menambahkan produk baru.

Dengan demikian, struktur direktori teman-teman akan tampak seperti berikut:

pages/
└── product/
    └── create.vue

Silakan buka file yang baru saja ditambahkan, kemudian masukkan baris kode berikut ini:

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-100 via-white to-blue-100 py-10">
    <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">Tambah Produk</h1>

    <form @submit.prevent="submitProduct" class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md">
      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Nama Produk</label>
        <input v-model="product.name" type="text" class="w-full p-2 border rounded-lg" required />
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Harga</label>
        <input v-model="product.price" type="number" class="w-full p-2 border rounded-lg" required />
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Deskripsi</label>
        <textarea v-model="product.description" class="w-full p-2 border rounded-lg" required></textarea>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 font-medium mb-1">Stok</label>
        <input v-model="product.stock" type="number" class="w-full p-2 border rounded-lg" required />
      </div>

      <div class="flex justify-between">
        <NuxtLink to="/products" class="bg-gray-400 text-white px-4 py-2 rounded-lg hover:bg-gray-500 transition">
          Kembali
        </NuxtLink>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition">
          Simpan
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useHead } from '#imports'

const { addProduct } = useProducts();
useHead({
  title: "Tambah Produk | Toko Online Lagikoding",
  meta: [
    {
      name: "description",
      content: "Tambah data produk terbaik dengan harga terbaik di toko online kami.",
    },
  ],
});
const router = useRouter();
const product = ref({
  name: "",
  price: "",
  description: "",
  stock: "",
});

const submitProduct = async () => {
  const response = await addProduct(product.value);
  if (response) {
    alert("Produk berhasil ditambahkan!");
    router.push("/products");
  } else {
    alert("Gagal menambahkan produk. Silakan coba lagi.");
  }
};
</script>

Bagian Template (<template>)

Di dalam blok <template>, kita membuat struktur antarmuka pengguna berupa:

• Judul Halaman Menggunakan elemen <h1> untuk menampilkan teks "Tambah Produk" dengan gaya teks yang besar dan tebal.

• Formulir Tambah Produk Terdapat form yang memiliki beberapa field input, yaitu:

  • Nama Produk → menggunakan v-model="product.name"
  • Harga → menggunakan v-model="product.price"
  • Deskripsi → menggunakan v-model="product.description"
  • Stok → menggunakan v-model="product.stock"

  Form ini akan diproses saat pengguna menekan tombol "Simpan", namun kita gunakan @submit.prevent="submitProduct" untuk mencegah reload halaman secara default dan menggantinya dengan fungsi submitProduct().

• Tombol Navigasi Di bagian bawah form, terdapat dua tombol:

  • Kembali → menggunakan <NuxtLink> untuk mengarahkan ke halaman daftar produk.
  • Simpan → tombol submit yang akan memicu fungsi submitProduct.

Bagian Script (<script setup>)

Di dalam script ini, kita menggunakan beberapa fitur penting dari Vue dan Nuxt:

• ref() dari Vue Untuk membuat state reaktif yang menyimpan data produk (name, price, description, dan stock).
• useRouter() dari Vue Router Digunakan untuk melakukan navigasi setelah proses penyimpanan berhasil, yaitu dengan router.push("/products").
• useHead() dari Nuxt Digunakan untuk mengatur meta tag halaman seperti judul (title) dan deskripsi halaman untuk SEO.
• addProduct() dari useProducts() Asumsinya, fungsi ini adalah bagian dari composable yang menangani komunikasi dengan Laravel API untuk menambahkan produk baru. Fungsi ini dipanggil di dalam submitProduct() secara asynchronous.

Fungsi submitProduct

Fungsi ini akan:

1. Mengirim data produk yang dimasukkan pengguna ke backend melalui fungsi addProduct.
2. Menampilkan alert sebagai feedback kepada pengguna.
3. Mengarahkan pengguna kembali ke halaman daftar produk apabila proses berhasil.

Npm Run Dev

Silakan teman-teman janlankan perintah npm run dev dan juga php artisan serve untuk laravel API nya. Maka berikut tampilan ketika kita akses halaman aplikasi kita pada url http://localhost:3000/product/create

Dengan pendekatan seperti ini, kita tidak hanya membangun antarmuka yang interaktif dan fungsional, tetapi juga menjaga struktur kode agar tetap bersih, mudah dipahami, dan dapat dikembangkan lebih lanjut. Pada materi berikutnya, kita akan belajar membuat halaman edit product di project nuxt js kita.