RESTful API Node JS + Express + MySQL dengan Model & Controller
Haloo semuanyaa…
Gausah pake basa basi lagii yah, kali ini gua bakal lanjutin tutorial sebelumnya yang Membuat RESTful API Node JS + Express + MySQL (CRUD). Kalau belum ikutin tutorial yang pertama, kalian bisa pergi kesini dulu yah ikutin antrian hehehe
Karena bagian ini adalah tutorial lanjutan dari tutorial diatas yaa
Sebelumnya, udah tau belum model, controller, dan route itu apa sih? nah gua jelasin sedikit aja yah
- Model, fungsinya untuk mengatur, memanipulasi dan mengorganisasikan data (dari database) sesuai dengan instruksi dari controller. Gampangnya, model ini tempat buat nampung seluruh fungsi utama yang punya interaksi dengan database
- Controller, fungsinya untuk mengatur apa yang harus dilakukan oleh model. Jadi bisa dibilang pusat control nya itu ada disini
- Route, fungsinya untuk mengatur alamat URI yang bakal kita akses nantinya
Okee langsung sikat ya!
Pertama, kita install package tambahan yang ngebantu proses develop projectnya. Yaitu nodemon, yang fungsinya supaya bisa auto reload project ketika kita ngelakuin perubahan kodingan/file. Jadi kita gausah ribet-ribet berhentiin server lalu kita jalankan lagi setiap ada file/kodingan yang berubah.
Caranya dengan ketik perintah dibawah ini :
npm i -D nodemonDisini gua jadikan package nodemon sebagai devDependencies karena package ini cuma di pakai untuk development project aja yaa
Setelah install, silahkan kalian buka file package.json nya dan ubah bagian scripts jadi seperti ini :
Kalau udah, silahkan kalian coba jalanin dulu projectnya pakai “npm run dev”, kalau berhasil nanti bakal kaya gini :
Kalau outputnya gitu, dan ga ada error kita bisa lanjut ke tahap selanjutnya yaa. Kalau masih ada error, kemungkinan ada kesalahan konfigurasi di laptop/pc temen-temen. Jadi kalian bisa cari tau sendiri di tempat lain cara solvingnya karena gua ga sediain tutorialnya disini hehehe
Kalau masih gabisa, tahap diatas bisa kalian skip kok, tapi harus reload server yaa setiap ada perubahan kodingan/file
Selanjutnya, silahkan buat folder dan kasih nama “utils” dan buat sebuah file dengan nama “response-handler.js” lalu isi file tersebut dengan kode berikut :
Disini gua buat 2 buah fungsi untuk handling response dari server. Kenapa perlu dipisah? supaya kalian terbiasa ngoding terstruktur dengan file yang terpisah sesuai dengan kebutuhannya. Dan supaya mempermudah kalian juga kalau seumpama lagi ngelakuin maintenance project.
Models
Selanjutnya, kita buat lagi folder sejajar dengan folder utils lalu kita kasih nama “models” dan buat sebuah file bernama “bootcamp-model.js”
Lalu di dalamnya mari kita isi dengan kumpulan code yang cantik ^_^
Pertama, kita panggil dulu si koneksi dari folder config buat interaksi sama databasenya, lalu kita panggil juga 2 buah handling response yang sebelumnya udah kalian buat
const koneksi = require('../config/database');
const { responseData, responseMessage } = require('../utils/response-handler');Sekarang, kita mulai dari create data dulu, ayo kita buat fungsi insert data terlebih dahulu
exports.insertBootcamp = () => {}
Kenapa gua pakai exports? karena nantinya fungsi ini akan kita gunakan di controllers, jadi kita perlu exports function supaya bisa di gunakan oleh file lain. Silahkan kalian eksplorasi sendiri kalau mau tau penjelesan detailnya tentang module exports ini.
Nahh sekarang, kita flashback dulu yokk :) ayo kita buka lagi file app.js dan fokusin mata kalian ke fungsi create data yang sebelumnya dibuat dan coba lebih fokusin lagi ke code yang gua seleksi
Mari perhatikan baris ke 14 dan 15, dua variabel/object ini nantinya yang akan menjadi isian parameter di function model yang barusan kita buat diatas. Jadi tentunya kalian pasti udah harus ngerti dong apa itu parameter dan gunanya apa buat function? Simplenya sih, parameter itu isian yang bakal dipakai di dalam sebuah function.
Dan juga pada function di model ini, kalian wajib masukin response juga, karena model ini perlu kasih response ke user buat ngasih tau, apakah berhasil atau gagal?
Nahh kalau udah nyimak penjelasan diatas, sekarang saatnya kalian CUT kode yang gua seleksi (baris 17 -26) lalu PASTE ke dalam function insertBootcamp() yang ada di dalam bootcamp-model.js
Nanti jadinya kaya gini
Nahh sekarang tinggal kita buat isian parameter di function insertBootcamp() ini dengan response (res), statement (querySql), dan data
Dan juga kita ganti kode pada baris 13 menggunakan fungsi responseMessage() yang sebelumnya kita panggil
Dan ujungnya kodingan kalian bakal kaya gini :
Silahkan kalian bandingin dulu dengan kodingan sebelumnya supaya tau apa yang berubah
Gua harap sampe sini kalian paham yaa karena perjalanan kita masih panjang nihh:) Sekarang silahkan kalian lakuin hal yang sama juga pada fungsi Read, Update, dan Delete.
Kalau udah, nanti hasil isi file bootcamp-model.js kalian kurang lebih kaya gini :
Controllers
Selanjutnya, kita buat lagi folder sejajar dengan folder utils, dan models lalu kita kasih nama “controllers” dan buat sebuah file bernama “bootcamp-controller.js”
Lalu kita panggil fungsi-fungsi yang sebelumnya kalian buat di bootcamp-model.js
const {
insertBootcamp,
getBootcamps,
updateBootcamp,
deleteBootcamp
} = require('../models/bootcamp-model');Nahh sekarang kita mulai dari create data dulu yaa, ayo kita buat function createData() di dalam controller ini
// create bootcamp
exports.createData = (req, res, next) => {}
Kita flashback lagi yokk :) ayo kita buka lagi file app.js dan fokusin mata kalian ke fungsi create data dan coba lebih fokusin lagi ke code yang gua seleksi
Wahh jadi pendek kok? yaiyalahh kan fungsi buat insert ke databasenya udah kita pindahin ke model, jadi sisanya tinggal kita pindahin ke controller cuy!
Terus isian parameter di controllernya yang mana dong? ya itu yang gua kotakin biru :)
Terus gimana lagi? tinggal kalian CUT code yang gua seleksi (baris 13–15) lalu PASTE ke dalam function createData() yang ada di dalam file bootcamp-controller.js
Setelah ini, tinggal kalian pakai deh fungsi insertBootcamp() yang sebelumnya kalian buat di model
const {
insertBootcamp,
getBootcamps,
updateBootcamp,
deleteBootcamps
} = require('../models/bootcamp-model');// create bootcamp
exports.createData = (req, res) => {
// buat variabel penampung data dan query sql
const data = { ...req.body };
const querySql = 'INSERT INTO bootcamp SET ?'; // masukkan ke dalam model
insertBootcamp(res, querySql, data);
};
Abis itu hapus dah fungsi create data yang ada di app.js hehehe soalnya udah ga dibutuhin lagi, karena app.js baiknya diisi dengan konfigurasi utama aja, jadi ga ada kodingan buat fungsionalitas.
Silahkan di pahamin dulu kalau masih bingung. Kalau udah silahkan kalian lakuin hal yang sama juga pada fungsi Read, Update, dan Delete.
Kalau udah, nanti hasil isi file bootcamp-controller.js kalian kurang lebih kaya gini :
Dan isi file app.js kalian kurang lebih kaya gini :
const express = require('express');
const bodyParser = require('body-parser');
const koneksi = require('./config/database');
const app = express();
const PORT = process.env.PORT || 5000;// set body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));// buat server nya
app.listen(PORT, () => console.log(`Server running at port: ${PORT}`));
Routes
Selanjutnya, kita buat lagi folder sejajar dengan folder utils, models, dan controllers lalu kita kasih nama “routes” dan buat sebuah file bernama “bootcamp-router.js”
Lalu panggil fungsi-fungsi yang sebelumnya kita buat di bootcamp-controller.js dan juga express router
const {
createData,
readData,
updateData,
deleteData
} = require('../controllers/bootcamp-controller');
const express = require('express');
const router = express.Router();Kemudian masukkan routingnya dan tentukan method sesuai dengan fungsinya, lalu exports routernya agar bisa kita set ke konfigurasi utama pada file app.js
router.route('/')
.post(createData)
.get(readData);router.route('/:id')
.put(updateData)
.delete(deleteData);module.exports = router;
Kalau udah, nanti isi file bootcamp-router.js kalian kurang lebih kaya gini :
Nahh yang terakhir nihh, kita buka file app.js, lalu hapus variabel koneksi, soalnya udah ga dibutuhin lagi karena udah kita pakai di model.
Kemudian, kita panggil bootcamp-router yang barusan kita buat dan set routingnya untuk dimasukkan ke dalam middleware
Sekarang ngapain lagi? Yaa tinggal kita test berhasil apa gagal nihh. udah pada tau kan cara pakai postman nya?
Jadi, kalian punya 4 routes :
- POST [/api/bootcamp] untuk menambahkan data bootcamp
- GET [/api/bootcamp] untuk menampilkan semua data bootcamp
- PUT [/api/bootcamp/:id] untuk mengubah data bootcamp
- DELETE [/api/bootcamp/:id] untuk menghapus data bootcamp
Yuk kita coba! kita mulai dari insert data, nih datanya
{
"name": "ModernTech Bootcamp",
"description": "ModernTech has one goal, and that is to make you a rockstar developer and/or designer with a six figure salary. We teach both development and UI/UX",
"website": "https://moderntech.com",
"phone": "(222) 222-2222",
"email": "enroll@moderntech.com",
"address": "220 Pawtucket St, Lowell, MA 01854"
}
Kemudian kita coba get data
Lalu kita coba update data (ganti nama bootcamp) dengan id = 3
Lalu kita coba hapus data dengan id = 3
Wahh berhasil semua nihh mantap betul!! sampai sini dulu yaa tutorialnya, di bagian selanjutnya kita bakal buat middleware untuk error handlingnya dimana nanti kita bakal misahin lagi fungsi buat handling si error ini nihh..
Semoga bermanfaat yaa, dan selamat berpuasa ^_^
Source code tutorial ini bisa diambil disini yaa, di branch mc-pattern :
Tutorial selanjutnya ada disini gaiss
