
Aturan Baku Komunikasi Sistem (CRUD)
Website React (Frontend) dan Server Node.js (Backend) adalah dua program yang berbeda. Agar mereka bisa bertukar data, mereka harus menyepakati satu protokol komunikasi standar. Di industri IT, standar paling populer ini bernama REST API (Representational State Transfer).
REST API memiliki 4 "Kata Kerja" (HTTP Methods) utama yang sangat mirip dengan fungsi CRUD (Create, Read, Update, Delete).
1. GET (Membaca Data / Read)
Digunakan saat *Frontend* HANYA ingin mengambil data, tanpa mengubah apapun di server.
// Endpoint: GET http://localhost:3000/api/users
app.get('/api/users', (req, res) => {
const dataUser = [{ id: 1, nama: "Budi" }, { id: 2, nama: "Siti" }];
// Mengembalikan data dalam format JSON
res.status(200).json(dataUser);
});2. POST (Membuat Data Baru / Create)
Digunakan saat *Frontend* ingin mengirim data baru (seperti Form Registrasi). Data tersebut akan disembunyikan di dalam "Tas" yang disebut Body.
Catatan Penting: Agar Express bisa membaca JSON dari dalam Body, kamu WAJIB menambahkan baris app.use(express.json()); di bagian atas kodemu!
// Endpoint: POST http://localhost:3000/api/users
app.post('/api/users', (req, res) => {
// Menangkap data yang dikirim Frontend dari dalam tas (req.body)
const newUser = req.body;
console.log("User baru diterima: ", newUser);
res.status(201).json({ pesan: "User berhasil dibuat!" });
});3. PUT / PATCH (Memperbarui Data / Update)
Jika Budi ingin mengganti namanya menjadi "Budi Setiawan", kita menggunakan PUT. Biasanya kita harus menyertakan ID Spesifik di dalam URL (disebut URL Parameter).
// Endpoint: PUT http://localhost:3000/api/users/1
// Tanda titik dua (:id) berarti ini adalah variabel dinamis
app.put('/api/users/:id', (req, res) => {
const idTarget = req.params.id; // Menangkap angka 1 dari URL
const namaBaru = req.body.nama;
res.json({ pesan: `User dengan ID ${idTarget} diubah namanya menjadi ${namaBaru}` });
});4. DELETE (Menghapus Data)
Fungsinya sangat jelas, menghancurkan data berdasarkan ID.
// Endpoint: DELETE http://localhost:3000/api/users/1
app.delete('/api/users/:id', (req, res) => {
const idTarget = req.params.id;
res.json({ pesan: `User ID ${idTarget} telah dimusnahkan.` });
});Cara Mengetesnya
Kamu tidak bisa mengetes POST, PUT, dan DELETE melalui *browser* Chrome biasa (Chrome hanya bisa melakukan GET). Kamu wajib meng-install aplikasi penguji API profesional seperti Postman atau Insomnia untuk mensimulasikan pengiriman data JSON ke servermu!
Mau langsung pakai template?
Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.
Browse Templates