Saatnya menerapkan semua yang telah kita pelajari tentang Express dan routing! Di pelajaran ini, kita akan membuat sebuah API sederhana untuk mengelola data siswa. Kita akan membuat dua endpoint: satu untuk melihat semua data siswa, dan satu lagi untuk menambahkan data siswa baru.

Bagian 1: Persiapan Awal (Data Sementara)

Karena kita belum terhubung ke database, kita akan membuat “database palsu” menggunakan sebuah variabel array di dalam kode kita.

// Database sementara dalam bentuk array
let students = [
  { id: 1, nama: 'Andi' },
  { id: 2, nama: 'Citra' }
];

Bagian 2: Membuat Route GET /students (Membaca Semua Siswa)

Tujuan kita adalah membuat sebuah endpoint yang ketika diakses, akan menampilkan semua data siswa yang ada di dalam array kita.

1. Tambahkan Kode Route: Di bawah array students, tambahkan kode berikut untuk membuat route GET.

   // Endpoint untuk mendapatkan semua data siswa
   app.get('/students', function (request, response) {
     // Mengirim array 'students' sebagai respons dalam format JSON
     response.json(students);
   });​

    

   • app.get('/students', ...): Kita memberitahu Express untuk membuat route baru di alamat /students yang merespons metode GET.
   • response.json(students): Ini adalah cara mudah di Express untuk mengirim data JavaScript (seperti array atau object) sebagai respons JSON.

Bagian 3: Membuat Route POST /students (Menambah Siswa Baru)

Selanjutnya, kita akan membuat endpoint untuk menambahkan data siswa baru ke dalam array kita.

1. Aktifkan Middleware express.json(): Untuk bisa membaca data yang dikirim oleh client (Postman) dalam format JSON di body request, kita perlu menambahkan sebuah middleware. Tambahkan baris kode ini di bawah const app = express();.

   // Middleware untuk membaca body request dalam format JSON
   app.use(express.json());

   Penting: Baris ini harus ada sebelum kamu mendefinisikan route POST.

2. Tambahkan Kode Route: Sekarang, tambahkan kode untuk route POST di bawah route GET yang sudah kita buat.

   // Endpoint untuk menambahkan data siswa baru
   app.post('/students', function (request, response) {
     // Mengambil data siswa baru dari body request
     const newStudent = request.body;
   
     console.log('Menerima data siswa baru:', newStudent); // Untuk debugging di terminal
   
     // Menambahkan siswa baru ke dalam array 'students'
     students.push(newStudent);
   
     // Mengirim pesan sukses sebagai respons
     response.send('Siswa baru berhasil ditambahkan!');
   });​

    

   • request.body: Di sinilah data JSON yang dikirim oleh Postman akan tersimpan, berkat middleware express.json() yang kita pasang tadi.

Bagian 4: Kode Lengkap dan Pengujian

Berikut adalah kode lengkap di dalam file index.js-mu sekarang:

const express = require('express');
const app = express();
const port = 3000;

// Middleware untuk membaca body request dalam format JSON
app.use(express.json());

// Database sementara dalam bentuk array
let students = [
  { id: 1, nama: 'Andi' },
  { id: 2, nama: 'Citra' }
];

app.get('/', function (request, response) {
  response.send('Halo, ini server pertamamu dengan Express.js!');
});

// Endpoint untuk mendapatkan semua data siswa
app.get('/students', function (request, response) {
  response.json(students);
});

// Endpoint untuk menambahkan data siswa baru
app.post('/students', function (request, response) {
  const newStudent = request.body;
  console.log('Menerima data siswa baru:', newStudent);
  students.push(newStudent);
  response.send('Siswa baru berhasil ditambahkan!');
});

app.listen(port, function () {
  console.log(`Server berjalan di http://localhost:${port}`);
});

Saatnya Uji Coba!

1. Jalankan Server: Simpan file index.js, lalu jalankan server di terminal: node index.js.
2. Uji Coba GET /students:
   • Buka Postman, buat request baru.
   • Metode: GET
   • URL: http://localhost:3000/students
   • Klik Send. Kamu akan melihat daftar Andi dan Citra dalam format JSON.
3. Uji Coba POST /students:
   • Buat request baru di Postman.
   • Metode: POST
   • URL: http://localhost:3000/students
   • Pindah ke tab Body, pilih raw, dan di menu dropdown di kanannya, pilih JSON.
   • Ketik data siswa baru di dalam area teks, contohnya:

     {
         "id": 3,
         "nama": "Budi"
     }

   • Klik Send. Kamu akan melihat pesan “Siswa baru berhasil ditambahkan!”.
4. Verifikasi: Kembali ke request GET /students dan klik Send lagi. Sekarang kamu akan melihat Budi sudah ada di dalam daftar!

Selamat! Kamu telah berhasil membuat API pertamamu yang bisa membaca dan menulis data!