Cara Mudah Membuat REST API Menggunakan Express JS #4: Dasar Router


Rizqi Maulana
PHP/Javascript Backend Developer

Oke dari tahap ini kita akan mulai masuk ke bagian utama dalam membangun REST API. Tapi sebelumnya ada baiknya kita perlu sedikit mempelajari dasar router.

Router dalam web development secara sederhana dapat diartikan sebagai suatu modul dalam aplikasi yang berfungsi untuk mengatur jalan/rute pada aplikasi berbasis web. Jadi semisal ketika user mengakses url http://testapi.com/posts, maka router bertugas memberitahukan kepada aplikasi bahwa user mengakses url http://testapi.com/posts dan mengarahkan proses apa yang akan dilakukan selanjutnya. Misal dari contoh route http://testapi.com/posts akan mengembalikan output berupa semua data posts.

Router juga mengimplementasikan standar http yang artinya router juga memilah request berdasarkan http method. Ada beberapa http request method yang biasanya digunakan pada REST API:

  • GET : method ini biasanya hanya digunakan untuk mengambil atau membaca data saja baik satu atau banyak data.
  • POST: method ini biasanya digunakan untuk mengirimkan data ke server dan menyimpannya sebagai sebuah data baru.
  • PUT: method ini biasanya digunakan untuk mengirimkan data ke server dan memodifikasi data yang sudah ada
  • PATCH: hampir sama seperti PUT, tetapi digunakan untuk memodifikasi sebagian dari data yang ada.
  • DELETE: method ini digunakan untuk menghapus data yang ditentukan

Selengkapnya mengenai http request methods bisa kamu pelajari dari link berikut : https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

Merancang API endpoint

Ketika kita membangun sebuah REST API, setidaknya kita perlu merancang API endpoint meskipun dalam bentuk yang sangat sederhana. API endpoint sendiri dapat dipahami sebagai kumpulan titik akhir yang berbentuk url untuk memetakan request. Contohnya /api/v1/users, /api/v1/posts dsb (koreksi jika saya salah menjelaskan tentang endpoint ini :) )

Karena kita hanya akan membangun REST API sederhana yaitu untuk menghandle pengolahan data artikel/post untuk web blog. Maka API endpoint kita bisa rancang seperti ini:

+-----------------------------------+------------+--------+
| Operasi                           | API Route  | Method |
+-----------------------------------+------------+--------+
| Membuat artikel baru              | /posts     | POST   |
+-----------------------------------+------------+--------+
| Mengambil semua artikel           | /posts     | GET    |
+-----------------------------------+------------+--------+
| Mengambil artikel berdasarkan ID  | /posts/:id | GET    |
+-----------------------------------+------------+--------+
| Mengupdate artikel berdasarkan ID | /posts/:id | PUT    |
+-----------------------------------+------------+--------+
| Menghapus artikel berdasarkan ID  | /posts/:id | DELETE |
+-----------------------------------+------------+--------+

Membuat Router Baru

Berdasarkan API endpoint yang sudah kita buat sebelumnya, kita akan membuat sebuah router baru di aplikasi kita. Pertama kita perlu membuat file baru di dalam folder routes dengan nama file posts.js. Kita sesuaikan nama filenya seperti nama tabelnya agar tidak bingung. Ubah file routes/posts.js menjadi seperti ini:

routes/posts.js

import express from 'express'

const router = express.Router();

/**
 * Route untuk mengambil semua data artikel
 */
router.get('/', function(req, res, next) {
  res.send('router posts');
});

/**
 * Route untuk mengambil artikel berdasarkan ID
 */
router.get('/:id', function(req, res, next) {
	  
});

/**
 * Route untuk membuat artikel baru
 */
router.post('/', function(req, res, next) {
	  
});

/**
 * Route untuk mengupdate artikel berdasarkan ID
 */
router.put('/:id', function(req, res, next) {
	  
});

/**
 * Route untuk menghapus artikel berdasarkan ID
 */
router.delete('/:id', function(req, res, next) {
	  
});

export default router;

Dari kode di atas kita sudah membuat sekumpulan route berdasarkan API endpoint tetapi belum kita tuliskan proses apa yang akan dilakukan pada masing-masing route tersebut (hanya menampilkan teks "router posts" pada route yang pertama). Kita akan membahas dan menulisnya satu per satu pada Part-part selanjutnya. Jadi harap bersabar dulu ya.

Langkah selanjutnya kita harus mendaftarkan route baru yang sudah kita buat tadi. Buka file app.js lalu tambahkan beberapa baris kode seperti di bawah ini:

app.js

import indexRouter from './routes/index';
//import router posts
import postsRouter from './routes/posts';

...

app.use('/', indexRouter);
//daftarkan router posts
app.use('/posts', postsRouter);

Perubahan Kode selengkapnya bisa dilihat di bawah ini:

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

import indexRouter from './routes/index';
//import router posts
import postsRouter from './routes/posts';
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
//daftarkan router posts
app.use('/posts', postsRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Simpan perubahan dan jalankan aplikasi jika aplikasi belum berjalan

npm run server

Buka alamat http://localhost:3000/posts pada browser , Jika tidak ada kesalahan seharusnya akan menampilkan teks "router posts" pada halaman yang kita akses.

Pada Tutorial selanjutnya kita akan menambahkan proses satu-persatu dari setiap API endpoint yang sudah kita buat. Jadi Tetep ikuti update dari seri tutorial ini ya. terima kasih

Untuk mendownload atau melihat full source code pada tahap ini, silahkan kunjungi repo github https://github.com/sakukode/simple-restapi/tree/v0.3


Rizqi Maulana
PHP/Javascript Backend Developer

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

Buy me a coffeeBuy me a coffee
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR