Tutorial Express.js Restful API #5 : Menampilkan Detail Data
Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara melakukan proses insert data ke dalam database menggunakan Rest API di Express.js. Sekarang kita akan lanjutkan untuk belajar bagaimana cara menampilkan detail data dari database.
Langkah 1 - Menambahkan Route Detail
Di dalam route ini kita akan melakukan query ke dalam database dengan parameter ID yang didapatkan dari URL browser. Silahkan buka file routes/posts.js, kemudian ubah kode-nya menjadi seperti berikut ini :
const express = require('express');
const router = express.Router();
//import express validator
const { body, validationResult } = require('express-validator');
//import database
const connection = require('../config/database');
/**
* INDEX POSTS
*/
router.get('/', function (req, res) {
//query
connection.query('SELECT * FROM posts ORDER BY id desc', function (err, rows) {
if (err) {
return res.status(500).json({
status: false,
message: 'Internal Server Error',
})
} else {
return res.status(200).json({
status: true,
message: 'List Data Posts',
data: rows
})
}
});
});
/**
* STORE POST
*/
router.post('/store', [
//validation
body('title').notEmpty(),
body('content').notEmpty()
], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(422).json({
errors: errors.array()
});
}
//define formData
let formData = {
title: req.body.title,
content: req.body.content
}
// insert query
connection.query('INSERT INTO posts SET ?', formData, function (err, rows) {
//if(err) throw err
if (err) {
return res.status(500).json({
status: false,
message: 'Internal Server Error',
})
} else {
return res.status(201).json({
status: true,
message: 'Insert Data Successfully',
data: rows[0]
})
}
})
});
/**
* SHOW POST
*/
router.get('/(:id)', function (req, res) {
let id = req.params.id;
connection.query(`SELECT * FROM posts WHERE id = ${id}`, function (err, rows) {
if (err) {
return res.status(500).json({
status: false,
message: 'Internal Server Error',
})
}
// if post not found
if (rows.length <= 0) {
return res.status(404).json({
status: false,
message: 'Data Post Not Found!',
})
}
// if post found
else {
return res.status(200).json({
status: true,
message: 'Detail Data Post',
data: rows[0]
})
}
})
})
module.exports = router;
Dari perubahan kode di atas, kita menambahkan 1 route baru yaitu untuk mencari detail data berdasarkan parameter ID.
router.get('/(:id)', function (req, res) {
//...
}
Di dalam route di atas, pertama kita membuat variable baru dengan nama id, dan isinya kita ambil dari parameter yang bernama id.
let id = req.params.id;
Setelah itu, kita melakukan query ke dalam table posts dengan parameter ID tersebut.
connection.query(`SELECT * FROM posts WHERE id = ${id}`, function (err, rows) {
//...
}
Di dalam query di atas, kita membuat beberapa kondisi, yaitu :
- Check Query
- Data Tidak Ditemukan
- Data Ditemukan
Check Query
Jika di dalam proses query ada kesalahan, maka kita akan melakukan return ke dalam format JSON dengan status code 500 dan menampilkan pesan Internal Server Error.
return res.status(500).json({
status: false,
message: 'Internal Server Error',
})
Data Tidak Ditemukan
Dan jika dari proses query di atas berhasil dilakukan, tetapi tidak mendapatkan data yang sesuai dengan parameter yang di cari, maka kita akan melakukan return dengan status code 404 dan menampilkan pesan Data Post Not Found!.
return res.status(404).json({
status: false,
message: 'Data Post Not Found!',
})
Data Ditemukan
Kondisi terakhir, jika query berhasil dijalankan dan mendapatkan hasil data sesuai dengan parameter ID, maka kita akan melakukan return ke dalam format JSON dengan status code 200 dan menampilkan detail data tersebut.
return res.status(200).json({
status: true,
message: 'Detail Data Post',
data: rows[0] // <-- detail data
})
Langkah 2 - Uji Coba Rest API Detail Data
Sekarang kita akan lakukan uji coba untuk menampilkan detail data berdasarkan ID. SIlahkan buka aplikasi Postman dann masukkan URL berikut ini http://localhost:3000/api/posts/3 dan untuk method-nya silahkan pilih GET.
CATATAN : di atas, kita coba menambahkan parameter ID
3, yang mana ID tersebut belum ada di dalam table database.
Sekarang, silahkan klik Send, maka kita akan mendapatkan response bahwa data tidak ditemukan di dalam table, kurang lebih seperti berikut ini :
{
"status": false,
"message": "Data Post Not Found!"
}
Sekarang, kita akan lanjutkan untuk melakukan uji coba dengan data yang ada di dalam table posts, silahkan buka aplikasi Postman dan masukkan URL berikut ini http://localhost:3000/api/posts/1 dan untuk method-nya silahkan pilih GET.
CATATAN : di atas, kita coba menambahkan parameter ID
1, yang mana ID tersebut sudah ada di dalam table database.
Jika kita klik Send, maka kita akan mendapatkan sebuah response JSON dengan informasi detail data posts berdasarkan ID tersebut.
{
"status": true,
"message": "Detail Data Post",
"data": {
"id": 1,
"title": "Belajar Express.js di SantriKoding.com",
"content": "Belajar Express.js di SantriKoding.com"
}
}
Sampai disini pembahasan bagaimana cara menampilkan detail data berdasarkan ID di dalam Express.js. Di artikel selanjutnya kita akan belajar bagaimana cara melakukan proses update data ke dalam database menggunakan Rest API di Express.js.
Terima Kasih
- Membangun Toko Online Dengan Laravel, Vue.js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway
- Membangun Toko Online Dengan Laravel, Nuxt.js dan Payment Gateway : https://bit.ly/ebook-laravel-nuxt-js-payment-gateway
