Menu
CoddyTech

Membuat dengan POST

Termasuk bagian REST API dalam perjalanan Node.js di Coddy. Pelajaran 2 dari 25.

client yang menambahkan tugas perlu tahu lokasi tugas baru. client mengirim sumber daya baru ke URL list dengan POST, lalu server menjawab 201 Created dengan sumber daya tersebut dan header Location yang mencantumkan URL-nya.

POST /api/events   { "name": "Launch party" }

201 Created
Location: /api/events/12
{ "id": 12, "name": "Launch party" }

server memilih ID, sehingga dua client tidak akan pernah bisa mengklaim ID yang sama. Dengan header Location, client dapat mengambil acara baru tanpa membuat URL-nya sendiri. res.location(path) menetapkan header tersebut, dan dapat dirangkai seperti res.status:

res.status(201).location(`/api/events/${event.id}`).json(event);
challenge icon

Tantangan

Mudah

Klien memerlukan cara untuk menambahkan tugas. Tambahkan rute POST yang membuat tugas dan memberi tahu klien lokasi tugas baru tersebut.

  1. Di routes/tasks.js, tambahkan rute untuk POST /api/tasks (di dalam router, path tersebut adalah '/'). Rute ini membaca title dari body JSON, misalnya { "title": "Order new chairs" }.
  2. Buat tugas baru dengan empat field:
    • id: dari fungsi nextId() di store.js. Impor fungsi tersebut bersama tasks.
    • title: dari body.
    • done: false.
    • createdAt: new Date().toISOString(), waktu saat ini dalam bentuk teks.

    Tambahkan tugas tersebut ke array tasks, sehingga GET /api/tasks juga menampilkannya.

  3. Berikan respons dengan status 201 dan tugas baru sebagai JSON. Atur header Location ke URL tugas itu sendiri: untuk tugas 4, URL-nya adalah /api/tasks/4. Saat kamu menekan tombol Jalankan dalam keadaan baru, isi body respons akan terlihat seperti ini (createdAt milikmu menunjukkan waktu saat kamu mengirimnya):
    { "id": 4, "title": "Order new chairs", "done": false, "createdAt": "2026-10-30T09:12:44.512Z" }
  4. Jika body tidak memiliki title, berikan respons dengan status 400 dan { "error": "title is required" }, lalu jangan tambahkan apa pun ke daftar.

Coba: pilih POST, path /api/tasks, dan body { "title": "Order new chairs" }. Kamu seharusnya melihat 201 dan tugas di atas dengan id 4, lalu tab Headers pada respons menampilkan Location: /api/tasks/4. Kirim GET /api/tasks/4: kamu akan mendapatkan tugas yang sama. Lalu kirim POST {} ke /api/tasks: kamu akan mendapatkan 400 dengan error, dan GET /api/tasks tetap menampilkan 4 tugas karena POST yang ditolak tidak menambahkan apa pun.

Coba sendiri

import { Router } from 'express';
import { tasks } from '../store.js';

const router = Router();

router.get('/', (req, res) => {
    res.json(tasks);
});

router.get('/:id', (req, res) => {
    const task = tasks.find((t) => t.id === Number(req.params.id));
    if (!task) {
        return res.status(404).json({ error: 'Task not found' });
    }
    res.json(task);
});

export default router;

Semua pelajaran di REST API

Latihan sendiri: Playground Express