Membangun Aplikasi CRUD Armada dari Nol

Apa yang akan kita bangun?

Sukarobot adalah aplikasi pengelolaan data armada robot. Satu halaman berisi daftar armada, kolom pencarian, formulir tambah/ubah, dan tombol hapus dengan konfirmasi. Semua data disimpan di MySQL melalui API.

Teknologi yang dipakai

• Backend: Node.js, Express 5, mysql2 — API JSON di port 5000.
• Frontend: React 18 + Vite — halaman di port 5173.
• Database: MySQL, database sukarobot, tabel armada.
• Styling: satu file CSS biasa, tanpa framework.

Yang perlu disiapkan

Ada tiga hal yang harus terpasang di komputer: Node.js, MySQL, dan terminal. Tidak perlu akun atau layanan berbayar untuk belajar di komputer sendiri.

Node.js 18 atau lebih baru

Unduh installer dari nodejs.org, pilih versi LTS, lalu install dengan opsi bawaan. Setelah selesai, buka terminal baru dan cek versinya:

node -v
npm -v

Angka pertama harus 18 atau lebih (contoh: v20.11.0). Kalau perintah tidak dikenali, tutup terminal lalu buka lagi agar PATH diperbarui.

MySQL

Pilih salah satu: MySQL Community Server, MariaDB, atau Laragon untuk pengguna Windows. Catat host, user, dan password yang kamu set saat instalasi — nanti dipakai di bagian Database.

Terminal / command prompt

Windows: Git Bash atau PowerShell. macOS/Linux: Terminal bawaan. Contoh perintah di modul ini memakai format bash; untuk PowerShell, cara mengatur environment variable ditulis di bagian Backend.

Editor kode

VS Code atau editor lain. Tidak wajib, tapi sangat membantu untuk membaca dan mengubah file.

Memahami isi project

Project terdiri dari dua aplikasi terpisah. Keduanya punya package.json sendiri, jadi npm install dijalankan dua kali — sekali di backend, sekali di frontend.

sukarobot/
├─ backend/
│  ├─ db.js              koneksi + pembuatan database/tabel
│  ├─ server.js          route API Express
│  └─ package.json
├─ frontend/
│  ├─ index.html
│  ├─ vite.config.js     port 5173 + proxy /api
│  ├─ package.json
│  └─ src/
│     ├─ App.jsx         halaman utama
│     ├─ api.js          pemanggilan API
│     ├─ main.jsx        entry point React
│     ├─ styles.css
│     └─ components/
│        ├─ armadaList.jsx
│        └─ armadaForm.jsx
├─ index.php             modul belajar ini
└─ README.md

Siapa melakukan apa?

• backend/server.js — menerima request HTTP, memvalidasi, lalu menjalankan query.
• backend/db.js — membuat database dan tabel sekali saat start, lalu menyediakan fungsi query().
• frontend/src/App.jsx — menyimpan state daftar armada, pencarian, dan form.
• frontend/src/api.js — satu tempat untuk semua fetch ke /api/armada.

Menyiapkan database

Kabar baiknya: kamu tidak perlu membuat database secara manual. Saat backend pertama kali dijalankan, db.js otomatis membuat database sukarobot dan tabel armada bila belum ada.

1. Pastikan MySQL menyala

   Lewat Laragon klik Start All, atau jalankan service MySQL di sistem operasi.

2. Periksa kredensial di backend/db.js

   Default: host localhost, user root, password kosong, database sukarobot. Sesuaikan bila MySQL-mu memakai password.

3. Jalankan backend sekali

   Perintahnya ada di bagian Backend. Kalau berhasil, database dan tabel langsung terbentuk.

Pengaturan koneksi

Nilai default bisa diganti tanpa mengedit file, cukup lewat environment variable sebelum perintah start:

# Git Bash, macOS, Linux
DB_PASSWORD=rahasia npm run dev

# PowerShell (Windows)
$env:DB_PASSWORD="rahasia"; npm run dev

# Command Prompt (Windows)
set DB_PASSWORD=rahasia && npm run dev

Skema tabel

Tabel armada memiliki lima kolom. Waktu dibuat otomatis oleh db.js:

Menjalankan server API

Backend adalah sumber data. Nyalakan lebih dulu sebelum frontend, karena halaman React langsung meminta daftar armada saat dibuka.

1. Masuk ke folder backend
   terminalSalin

   cd backend

2. Pasang dependency

   Hanya perlu sekali, atau setiap kali package.json berubah.

   terminalSalin

   npm install

3. Jalankan server
   terminalSalin

   npm run dev

   Jika berhasil muncul: api berjalan di http://localhost:5000.

Cek backend tanpa frontend

Buka terminal baru (biarkan server tetap berjalan), lalu uji dengan curl:

# Ambil semua armada (awalnya array kosong)
curl http://localhost:5000/api/armada

# Tambah satu armada
curl -X POST http://localhost:5000/api/armada \
  -H "Content-Type: application/json" \
  -d '{"nama":"Robot Alpha","tipe":"Otonom","deskripsi":"Robot pengantar barang"}'

Respons sukses berisi objek dengan id dan timestamp. Kalau muncul {"error":"..."}, baca pesannya — biasanya karena kolom kosong atau MySQL tidak siap.

Kalau port 5000 sudah dipakai

PORT=5001 npm run dev

Setelah itu sesuaikan juga proxy di frontend/vite.config.js ke http://localhost:5001, jika tidak frontend akan tetap mencari port 5000.

Menjalankan tampilan React

Frontend berjalan di port 5173 dan meneruskan semua request /api ke backend di port 5000. Inilah yang membuat frontend tidak perlu menulis alamat lengkap di setiap pemanggilan.

1. Buka terminal baru

   Jangan tutup terminal backend. Modul ini butuh dua terminal berjalan bersamaan.

2. Masuk ke folder frontend dan pasang dependency
   terminalSalin

   cd frontend
   npm install

3. Jalankan Vite
   terminalSalin

   npm run dev

   Vite menampilkan alamat http://localhost:5173. Buka di browser.

Perintah frontend lainnya

Uji semua fitur

Dengan dua terminal aktif — backend di 5000 dan frontend di 5173 — buka http://localhost:5173 dan lakukan lima pemeriksaan berikut.

• Halaman menampilkan judul Daftar Armada dan tombol Tambah Armada.
• Klik Tambah Armada, isi ketiga kolom, lalu klik Simpan. Kartu baru muncul dan pesan sukses tampil.
• Ketik kata kunci di kolom pencarian. Daftar menyempit sesuai nama, tipe, atau deskripsi.
• Klik Ubah pada satu kartu, ganti namanya, lalu simpan. Perubahan langsung terlihat.
• Klik Hapus, setujui konfirmasi, dan kartu tersebut hilang dari daftar.

Alur data satu kali simpan

1. Form mengirim data ke api.create().
2. api.js memanggil POST /api/armada.
3. Vite meneruskan request ke Express di port 5000.
4. server.js memvalidasi, menyimpan ke MySQL, dan mengembalikan baris baru.
5. App.jsx menaikkan nilai versi sehingga daftar dimuat ulang.

Kontrak data

Semua endpoint berada di bawah /api/armada. Format request dan respons selalu JSON.

Body request

{
  "nama": "Robot Alpha",
  "tipe": "Otonom",
  "deskripsi": "Robot pengantar barang"
}

Contoh respons

{
  "id": 1,
  "nama": "Robot Alpha",
  "tipe": "Otonom",
  "deskripsi": "Robot pengantar barang",
  "created_at": "2026-11-10 22:47:44",
  "updated_at": "2026-11-10 22:47:44"
}

Format error

DELETE yang berhasil mengembalikan {"message":"Data berhasil dihapus"}.

Bagian penting yang perlu dipahami

Kamu tidak perlu menghafal semua baris. Fokus pada empat file ini: koneksi database, route API, pemanggil API di frontend, dan pengelolaan state halaman.

1. Koneksi database — backend/db.js

Koneksi memakai mysql2/promise agar bisa dipakai dengan async/await. Fungsi init() membuat database lebih dulu dengan koneksi tanpa nama database, baru setelah itu membuat pool dan tabel.

const mysql = require('mysql2/promise');

const config = {
  host: process.env.DB_HOST || 'localhost',
  user: process.env.DB_USER || 'root',
  password: process.env.DB_PASSWORD || '',
  database: process.env.DB_NAME || 'sukarobot'
};

async function init() {
  const awal = await mysql.createConnection({
    host: config.host,
    user: config.user,
    password: config.password
  });
  await awal.query(`CREATE DATABASE IF NOT EXISTS \`${config.database}\``);
  await awal.end();

  pool = mysql.createPool({ ...config, dateStrings: true, connectionLimit: 10 });
  await pool.query(`CREATE TABLE IF NOT EXISTS armada (...)`);
}

2. Route API — backend/server.js

Setiap route dibungkus try/catch dan memakai prepared statement (tanda ?) supaya nilai dari pengguna tidak disisipkan langsung ke SQL.

app.get('/api/armada', async (req, res) => {
  try {
    const q = String(req.query.q ?? '').trim();
    const [rows] = await db.query(
      'SELECT * FROM armada WHERE nama LIKE ? OR tipe LIKE ? OR deskripsi LIKE ?',
      [`%${q}%`, `%${q}%`, `%${q}%`]
    );
    res.json(rows);
  } catch (err) {
    tanganiError(err, res);
  }
});

app.post('/api/armada', async (req, res) => {
  const { data, error } = validasi(req.body);
  if (error) return res.status(400).json({ error });

  const [hasil] = await db.query(
    'INSERT INTO armada (nama, tipe, deskripsi) VALUES (?, ?, ?)',
    [data.nama, data.tipe, data.deskripsi]
  );
  res.status(201).json(await ambilSatu(hasil.insertId));
});

3. Pemanggil API — frontend/src/api.js

Semua fetch dikumpulkan di satu objek. Fungsi request() menangani header JSON, membaca respons, dan melempar error bila status bukan 2xx.

const BASE = '/api/armada';

async function request(url, options = {}) {
  const res = await fetch(url, {
    headers: { 'Content-Type': 'application/json' },
    ...options,
  });
  const body = res.status === 204 ? null : await res.json();
  if (!res.ok) throw new Error(body?.error || 'Terjadi kesalahan.');
  return body;
}

export const api = {
  list: (q = '') => request(`${BASE}?q=${encodeURIComponent(q)}`),
  create: (data) => request(BASE, { method: 'POST', body: JSON.stringify(data) }),
  update: (id, data) => request(`${BASE}/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
  remove: (id) => request(`${BASE}/${id}`, { method: 'DELETE' }),
};

4. State halaman — frontend/src/App.jsx

Daftar dimuat ulang setiap kali q (kata pencarian) atau versi (penanda data berubah) ikut berubah. Setelah simpan atau hapus, cukup naikkan versi — tidak perlu mengubah array secara manual.

const [armadas, setArmadas] = useState([]);
const [q, setQ] = useState('');
const [versi, setVersi] = useState(0);

useEffect(() => {
  let aktif = true;

  async function muat() {
    const data = await api.list(q);
    if (aktif) setArmadas(data);
  }

  muat();
  return () => { aktif = false; };
}, [q, versi]);

// setelah simpan / hapus:
setVersi((v) => v + 1);

Penanda aktif mencegah respons lama menimpa hasil pencarian yang lebih baru saat pengguna mengetik cepat.

Menaikkan ke domain sendiri

Ada dua hal berbeda yang dipublikasikan: halaman modul ini (index.php) dan aplikasinya (frontend + backend + MySQL). Keduanya bisa berada di domain yang sama, tetapi cara menyiapkannya berbeda.

Langkah 1 — build frontend

cd frontend
npm run build

Perintah ini menghasilkan folder frontend/dist berisi index.html dan aset statis. Folder itulah yang diunggah ke hosting.

Langkah 2 — sesuaikan alamat API

Saat mode pengembangan, /api diteruskan oleh Vite. Di produksi tidak ada Vite, jadi ada dua pilihan:

• Satu domain dengan reverse proxy. Arahkan /api/* ke server Node, misalnya lewat Nginx. Frontend tetap memakai BASE = '/api/armada'.
• Domain API terpisah. Ubah BASE di src/api.js menjadi alamat lengkap, contoh https://api.domainmu.com/api/armada, lalu build ulang. Backend sudah mengaktifkan CORS, sehingga request lintas domain diizinkan.

// opsi 2: backend di subdomain terpisah
const BASE = 'https://api.domainmu.com/api/armada';

Langkah 3 — siapkan hosting backend

Backend butuh runtime Node.js dan koneksi ke MySQL. Ini tidak bisa dijalankan di hosting PHP biasa. Pilihan yang umum:

Langkah 4 — unggah dokumentasi

Unggah index.php ke folder publik domain (misalnya public_html/modul/index.php). File ini mandiri — tidak butuh database, build, atau file lain. Buka https://domainmu.com/modul/ dan modul siap dibaca.

Checklist produksi

• Password MySQL tidak lagi kosong; simpan lewat environment variable di server.
• BASE di src/api.js sudah menunjuk alamat API produksi (atau reverse proxy dikonfigurasi).
• Frontend sudah di-build ulang setelah mengubah BASE.
• Backend berjalan permanen (PM2, systemd, atau proses platform), bukan hanya npm run dev.
• Coba semua endpoint dari browser/Postman setelah online.

Error yang sering muncul

Sebagian besar masalah berasal dari tiga hal: MySQL belum siap, backend belum jalan, atau alamat API tidak cocok. Buka bagian yang sesuai.

Setelah semuanya berjalan

Cara terbaik memastikan paham adalah membangun ulang. Mulai dari project kosong, lalu bandingkan hasilnya dengan kode ini.

1. Bangun ulang dari nol

   Buat folder backend dan frontend, lalu tulis ulang file satu per satu tanpa menyalin. Fokus pada alur request, bukan pada hafalan.

2. Tambah satu kolom baru

   Misalnya status dengan nilai Aktif atau Perbaikan. Ubah tabel, validasi, route, form, dan tampilan kartu. Ini melatih pemahaman dari database sampai UI.

3. Tambahkan pagination

   Tambahkan ?page= dan ?limit= di backend, lalu tombol “Sebelumnya / Berikutnya” di frontend.

4. Rapikan pesan error

   Buat pemberitahuan yang lebih ramah untuk jaringan putus, alih-alih hanya teks error dari API.

5. Publikasikan

   Ikuti bagian Build & publikasi. Menghadapi error deployment adalah bagian dari belajar.