Belajar Membuat CRUD di Next JS

CRUD adalah salah satu fitur paling umum dalam pengembangan aplikasi web. Dalam tutorial ini, kita akan melihat cara membuat aplikasi CRUD sederhana menggunakan Next.js dan React. Proyek ini akan memungkinkan Anda untuk membuat, membaca, memperbarui, dan menghapus entri dalam basis data.

Langkah 1: Persiapan Lingkungan

Sebelum kita mulai, pastikan Anda telah menginstal Node.js dan npm di komputer Anda. Anda juga perlu menginstal Next.js dengan perintah berikut:

npx create-next-app my-crud-app
cd my-crud-app
npm install

Langkah 2: Membuat Tampilan

Kita akan menggunakan beberapa komponen React untuk membuat tampilan aplikasi CRUD. Pertama, mari buat tampilan daftar item dengan tabel sederhana untuk menampilkan data. Setelah itu, buat component List.js:

import React from 'react';

const List = ({ items, onEdit, onDelete }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Nama</th>
          <th>Deskripsi</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        {items.map((item) => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.description}</td>
            <td>
              <button onClick={() => onEdit(item)}>Edit</button>
              <button onClick={() => onDelete(item.id)}>Delete</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default List;

Langkah 3: Implementasi CRUD

Selanjutnya, mari kita implementasikan operasi CRUD pada aplikasi kita. Kami akan menggunakan contoh sederhana dengan menyimpan data dalam array. Kemudian, buat component Crud.js untuk mengelola operasi CRUD:

import React, { useState } from 'react';
import List from './List';

const Crud = () => {
  const [items, setItems] = useState([]);
  const [formData, setFormData] = useState({ name: '', description: '' });

  const handleCreate = () => {
    const newItem = { ...formData, id: Date.now() };
    setItems([...items, newItem]);
    setFormData({ name: '', description: '' });
  };

  const handleEdit = (itemToEdit) => {
    setFormData(itemToEdit);
  };

  const handleUpdate = () => {
    const updatedItems = items.map((item) =>
      item.id === formData.id ? formData : item
    );
    setItems(updatedItems);
    setFormData({ name: '', description: '' });
  };

  const handleDelete = (id) => {
    const updatedItems = items.filter((item) => item.id !== id);
    setItems(updatedItems);
  };

  return (
    <div>
      <h1>Aplikasi CRUD Sederhana</h1>
      <input
        type="text"
        placeholder="Nama"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
      />
      <input
        type="text"
        placeholder="Deskripsi"
        value={formData.description}
        onChange={(e) =>
          setFormData({ ...formData, description: e.target.value })
        }
      />
      {formData.id ? (
        <button onClick={handleUpdate}>Perbarui</button>
      ) : (
        <button onClick={handleCreate}>Buat</button>
      )}
      <List items={items} onEdit={handleEdit} onDelete={handleDelete} />
    </div>
  );
};

export default Crud;

Berikut penjelasan code di atas:

Import React dan useState: Kode dimulai dengan impor React dan useState dari pustaka React. useState digunakan untuk mengelola state komponen.

Inisialisasi State: Komponen Crud menggunakan dua state:

items: Ini adalah state array yang menyimpan entri data. Setiap entri memiliki properti id, name, dan description. Awalnya, array ini diinisialisasi sebagai array kosong.
formData: State ini digunakan untuk mengelola data yang akan dimasukkan atau diubah oleh pengguna. Ini memiliki dua properti, name dan description, yang akan diisi oleh pengguna melalui input form. formData juga memiliki properti id yang digunakan untuk menentukan apakah pengguna sedang melakukan pembaruan atau pembuatan data baru.

handleCreate: Ini adalah fungsi yang dipanggil saat pengguna mengklik tombol “Buat”. Fungsi ini membuat objek baru dengan data dari formData, menambahkannya ke items, dan kemudian mengosongkan form untuk data selanjutnya.

handleEdit: Fungsi ini dipanggil saat pengguna mengklik tombol “Edit” pada item tertentu dalam daftar. Ini mengatur formData ke nilai item yang akan diedit, sehingga pengguna dapat mengedit data tersebut.

handleUpdate: Fungsi ini digunakan ketika pengguna ingin menyimpan perubahan setelah mengedit entri. Ini melakukan pembaruan pada item yang ada dalam items dengan menggunakan map untuk mencari item yang cocok berdasarkan id, dan kemudian menggantinya dengan formData. Setelah pembaruan, formData dikosongkan untuk mengizinkan pembaruan atau pembuatan data selanjutnya.

handleDelete: Fungsi ini digunakan untuk menghapus item dari daftar. Itu menggunakan filter untuk membuat array baru yang tidak termasuk item yang memiliki id yang sesuai dengan id yang akan dihapus. Hasilnya adalah daftar yang sudah diperbarui tanpa item yang dihapus.

Render Form dan Daftar: Di bagian render komponen, Anda menampilkan elemen-elemen berikut:

Dua input form untuk name dan description.
Tombol “Perbarui” atau “Buat” tergantung pada apakah ada id dalam formData.
Komponen List untuk menampilkan daftar item dengan tombol “Edit” dan “Delete” pada setiap item.

Komponen ini memungkinkan pengguna untuk membuat, mengedit, dan menghapus item dari daftar dengan mengisi form, mengklik tombol “Buat” atau “Edit”, dan mengklik tombol “Hapus”.

Ini adalah kerangka kerja dasar untuk mengelola operasi CRUD dalam aplikasi web dengan menggunakan React dan Next.js. Dalam implementasi nyata, Anda akan berinteraksi dengan server atau database untuk menyimpan dan mengambil data.

Langkah 4: Menggunakan Component CRUD

Sekarang, kita dapat menggunakan komponen Crud dalam halaman utama aplikasi Next.js. Buat file pages/index.js:

import Crud from '../components/Crud';

function Home() {
  return (
    <div>
      <Crud />
    </div>
  );
}

export default Home;

Dengan cara ini, kita telah menghubungkan komponen Crud ke halaman utama aplikasi Next.js. Ketika pengguna mengunjungi halaman utama, mereka akan melihat antarmuka pengguna yang dikelola oleh komponen Crud dan dapat mulai melakukan operasi CRUD pada entri data.

Langkah 5: Menjalankan Aplikasi

Sekarang kita telah menyiapkan aplikasi CRUD sederhana menggunakan Next.js. Untuk menjalankannya, jalankan perintah berikut:

npm run dev

Akses aplikasi melalui peramban Anda di http://localhost:3000, dan Anda dapat mulai menambah, mengedit, dan menghapus entri. Ini adalah contoh sederhana, dan dalam pengembangan sebenarnya, Anda akan berinteraksi dengan basis data nyata.

Selamat! Anda telah berhasil membuat aplikasi CRUD dengan Next.js. Anda dapat memperluasnya dengan menghubungkannya ke database, mengelola otentikasi, atau menambahkan fitur lain sesuai kebutuhan aplikasi Anda.