Tutorial Express.js Restful API #5 : Menampilkan Detail Data


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

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 :

  1. Check Query
  2. Data Tidak Ditemukan
  3. 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



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

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

KOMENTAR