Untuk membuat REST API menggunakan Express JS dan MySQL database, ikuti langkah-langkah di bawah ini.

Langkah 1: Instalasi Node JS

Langkah pertama adalah melakukan instalasi Node JS. Node JS berfungsi untuk menjalankan sebuah kode Javascript di sisi server.

Untuk instalasi Node JS, langkah-langkahnya bisa mengikuti dari situs resminya: 

Untuk memastikan Node JS dapat digunakan, kita bisa mencoba menjalankan perintah berikut di terminal/CMD untuk memeriksa versi Node JS.

node -v

npm -v

Jika berhasil maka akan tampil versi Node JS dan NPM yang di instal.

Langkah 2: Membuat Project Express JS

Setelah menginstal Node JS, langkah selanjutnya adalah membuat project Express JS atau setup project. Buat sebuah folder baru dimana kita akan menyimpan project-nya.

Pada tutorial ini, kita akan membuat sebuah folder baru dengan nama api-express-mysql melalui terminal/CMD menggunakan perintah berikut:

mkdir api-express-mysql

Setelah folder berhasil dibuat, sekarang kita akan masuk ke dalam folder tersebut menggunakan perintah berikut.

cd api-express-mysql

Jika sudah berada di dalam folder api-express-mysql, jalankan perintah berikut untuk membuka folder api-express-mysql di code editor seperti Visual Studio Code (VS Code).

code .

Setelah folder terbuka di code editor VS Code, untuk menginisiasi project baru, jalankan perintah berikut di terminal VS Code.

npm init

Ketika perintah tersebut dijalankan, maka kita akan mendapatkan beberapa pertanyaan tentang project yang kita buat. Ikuti langkah-langkah berikut ini untuk menjawabnya.

  • package name: silahkan klik enter jika ingin menggunakan default package name sesuai dengan nama folder yang dibuat.
  • version: silahkan klik enter atau bisa memberikan versinya terlebih dahulu.
  • description: silahkan klik enter atau bisa memberikan deskripsi projectnya terlebih dahulu. Pada project ini, kita buat deskripsinya yaitu Membuat Rest API dengan Express JS & MySQL Database.
  • entry point: secara default nama main file project adalah index.js atau bisa disesuaikan terlebih dahulu lalu klik enter.
  • test command: silahkan klik enter.
  • git repository: silahkan klik enter.
  • keywords: silahkan klik enter.
  • author: silahkan klik enter atau bisa disesuaikan terlebih dulu.
  • licence: silahkan klik enter.

Maka akan keluar output seperti berikut:

   {
  "name": "api-express-mysql",
  "version": "1.0.0",
  "description": "Membuat Rest API dengan Express JS & MySQL Database",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Kemudian akan ada pertanyaan lagi is this OK? (yes), klik enter dan kita akan mendapatkan sebuah file bernama package.json yang berisi detail informasi dari project kita (isinya sama seperti di atas).

Sekarang, kita akan menginstal Express JS. Pastikan kita berada di folder project kita saat menjalankan perintah berikut.

npm install express

Jika instalasi Express JS berhasil, kita akan mendapatkan satu folder baru dengan nama node_modules yang berisi dependensi dari Node JS dan termasuk Express JS.

Kita bisa melihat dependensi yang sudah berhasil kita instal di dalam file package.json di bagian dependencies seperti berikut:

   
"dependencies": {
    "express": "^4.18.2"
  }

Lihat dokumentasinya di sini https://expressjs.com/en/starter/installing.html

Langkah 3: Membuat Main File Express JS

Sebelum masuk ke syntax dasar server pada express, kita akan menambahkan tipe modul pada file package.json yang bertujuan agar kita dapat menggunakan ES6 Module Syntax.

Sehingga file package.json terlihat menjadi seperti berikut:

   {
  "name": "api-express-mysql",
  "version": "1.0.0",
  "description": "Membuat Rest API dengan Express JS & MySQL Database",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

Sekarang kita akan mulai dengan membuat main file bernama index.js di root direktori project (setara dengan folder node_modules dan file package.json) dan menambahkan satu route untuk mencobanya di dalam web browser.

Kode di atas adalah kode dasar server pada Express JS. Kode tersebut akan dijalankan paling awal ketika aplikasi di start.

Pada kode di atas, pertama, kita mengimport library express dengan kode:

Kemudian menginisialisasi express dengan membuat variabel app yang valuenya adalah variabel express di atas:

Setelah itu kita membuat variabel bernama port yang valuenya adalah 3007. Port ini akan digunakan untuk menjalankan project:

Kemudian kita membuat satu route menggunakan menthod GET dengan endpoint atau path /, lalu menambahkan callback function yang akan dieksekusi saat route dipanggil dan memberikan hasil teks Hello World!. Fungsi res.send() digunakan untuk memberikan response dari route yang dipanggil tersebut.

Dan kita akan listen express ke dalam port yang kita buat dan akan menampilkan pesan app running at http://localhost:3007 di console sebagai penanda bahwa express berhasil dijalankan di dalam localhost dengan port 3007.

Untuk menjalankan server, kita dapat mengetikan perintah berikut pada terminal VS Code:

node index.js

Jika muncul tulisan "app running at http://localhost:3007", artinya aplikasi express kita telah berhasil dijalankan dan kita bisa melihatnya di dalam web browser url: http://localhost:3007. 

Jika bejalan dengan baik, maka akan terlihat teks “Hello World!” di halaman browser.

Lihat dokumentasinya di sini https://expressjs.com/en/starter/hello-world.html.

Langkah 4: Instalasi Nodemon

Nodemon merupakan package atau library yang akan membantu developer dalam pengembangan aplikasi terutama berbasis Node JS. Nodemon akan melakukan restart secara otomatis terhadap aplikasi yang dijalankan ketika ada perubahan kode yang dilakukan.

Kita akan menginstal nodemon secara global di dalam komputer dengan perintah berikut:

npm install -g nodemon

Kita bisa mengecek apakah nodemon sudah berhasil kita instal secara global dengan perintah berikut:

npm list -g

Maka akan tampil daftar package yang diinstal secara global di komputer kita.

Sekarang, untuk menjalankan project Express JS, kita gunakan perintah berikut.

npx nodemon

Kita juga dapat menggunakan nodemon dengan menambahkan script nodemon pada file package.json. Script yang ditambahkan kita beri nama server dan index.js adalah file yang pertama kali dieksekusi saat aplikasi dijalankan, maka kodenya seperti ini:

"server": "nodemon index.js"

Sehingga file package.json terlihat menjadi seperti berikut:

   {
  "name": "api-express-mysql",
  "version": "1.0.0",
  "description": "Membuat Rest API dengan Express JS & MySQL Database",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "nodemon index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

Sekarang untuk menjalankan project Express JS, kita gunakan perintah berikut.

npm run server

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan hasil seperti berikut ini:

Lihat dokumentasinya di sini https://www.npmjs.com/package/nodemon.

Langkah 5: Membuat Design Rest API

Pada langkah sebelumnya, kita telah membuat sebuah route untuk menampilkan pesan “Hello World!”. Sekarang kita lanjutkan menambahkan route untuk operasi dasar CRUD yaitu Create, Read, Update, dan Delete data di database. Router inilah yang nantinya kita akses sebagai Rest API di dalam project Express JS.

Berikut rancangan endpoint atau path dari RESTful API yang akan kita buat:

Untuk permulaan, kita akan membuat design Rest API terlebih dahulu, jadi setiap HTTP method yang dipanggil hanya akan menampilkan sebuah pesan bukan data.

Method POST

  • Menambahkan product

Sekarang kita tambahkan sebuah route untuk menghandle POST request yang diarahkan ke url /user.

Untuk menguji route yang sudah dibuat, kita akan menggunakan Postman. Sekarang kita tambahkan dulu route untuk method yang lainnya:

Method GET

  • Mendapatkan semua user

  • Mendapatkan satu user


Method PUT

  • Mengupdate user

Method DELETE

  • Menghapus user

Sehingga file index.js terlihat menjadi seperti berikut:

Lihat dokumentasinya di sini https://expressjs.com/en/starter/basic-routing.html

Selanjutnya kita akan menguji route yang sudah dibuat menggunakan API testing tools yang sering digunakan oleh developer yaitu Postman.

Langkah 6: Testing Menggunakan Postman

Postman adalah salah satu tools yang banyak digunakan developer dalam mengembangkan sebuah API. Dengan postman kita bisa membuat, menguji dan memodifikasi API dengan mudah.

Pada bagian ini kita akan menggunakan Postman untuk menguji API yang sudah kita buat. Silahkan download postman disini kemudian install. Tampilan Postman setelah install (bisa berbeda tergantung versi).

Cara menggunakan postman untuk test Rest API:

1. Buat sebuah collection baru

Klik tombol New -> Pilih Collection -> Beri nama collection Tutorial Express-Api (atau pilih nama sesuai keinginan) -> Klik Create atau bisa pilih menu Create New Collection dari Launchpad.

2. Buat sebuah request baru

Klik tombol New -> Pilih Request -> Beri nama request GET All User -> Simpan di collection Tutorial Express-Api -> Klik Create



3. Masukan url endpoint http://localhost:3007/users kemudian set method request menjadi GET. Jika sudah klik Send. Hasilnya akan menampilkan response pesan Receive GET request. 




Kita bisa ulangi langkah di atas untuk menguji endpoint dengan HTTP method yang lain (POST, PUT, DELETE).

Postman menyediakan banyak opsi yang bisa digunakan untuk mempermudah kita melakukan testing API, seperti menambahkan Query Params, Authorization, Headers atau Body pada sebuah request.

Langkah 7: Membuat Database & Table

Sekarang, kita lanjutkan untuk membuat Database dan Table di dalam MySQL yang akan kita gunakan untuk menyimpan data yang dikirim melalui url API.

MySQL adalah sistem manajemen database relasional (RDBMS) berbasis structured query language (SQL) yang berfungsi untuk mengelola data secara terstruktur dan sistematis.

Silahkan install MySQL secara standalone ataupun melalui paketan seperti XAMPP. Di tutorial ini, kita akan menginstal MySQL melalui XAMPP yaitu perangkat lunak yang terdiri atas Apache, MySQL, dan PHP yang digunakan untuk membuat dan menjalankan web server secara lokal.

Silakan download XAMPP melalui website resminya kemudian instal. Jika XAMPP sudah terinstall, bukalah aplikasi tersebut untuk melanjutkan cara membuat database dengan MySQL.

Kita akan melihat lima module yang terinstall, yaitu: Apache, MySQL, FileZilla, Mercury dan Tomcat. Untuk membuat sebuah website, kita hanya perlu menjalankan dua module saja, Apache sebagai web server dan MySQL untuk database.

Klik tombol Start pada Apache dan MySQL agar kita dapat mengakses localhost/phpMyAdmin untuk membuat database.

Setelah itu, masuk ke phpmyadmin di XAMPP. Caranya, ketik di browser url localhost/phpmyadmin, kemudian buat database baru dengan nama db_express_api seperti berikut:

Selanjutnya, klik Database db_express_api dan buat Table baru dengan nama users dan memiliki 4 field/column.


Di bagian ini, kita harus memasukkan nama kolom dan tipe datanya. Untuk tabel users, kita membuat kolom id, name, email, dan address. Jika sudah terisi seperti gambar di bawah ini, klik tombol Save.


Di atas, kita set 4 field/column seperti berikut:
  • id menggunakan tipe data INT kemudian kita set menjadi PRIMARY dan AUTO INCREMENT.
  • name menggunakan tipe data VARCHAR dengan value 225, kemudian kita set NULL.
  • email menggunakan tipe data VARCHAR dengan value 225, kemudian kita set NULL.
  • address menggunakan tipe data VARCHAR dengan value 225, kemudian kita set NULL.

Sekarang, kita sudah memiliki database db_express_api dengan tabel users yang siap dipakai dan dihubungkan dengan project kita.


Langkah 8: Membuat Koneksi Database

Untuk dapat menggunakan MySQL di Node.js kita membutuhkan library mysql2. Library ini merupakan driver MySQL yang digunakan untuk menghubungkan antara project Express JS dan database MySQL.

Silahkan jalankan perintah berikut untuk menginstalnya:

npm i mysql2

Setelah berhasil melakukan instalasi, selanjutnya kita akan membuat koneksi database di dalam project kita. Buka file index.js kemudian tambahkan kode berikut.

Sehingga file index.js terlihat menjadi seperti berikut.

Pada kode di atas, pertama, kita import library atau package mysql2 terlebih dahulu.

Kemudian kita membuat variabel dbPool yang isinya merupakan konfigurasi dari koneksi database MySQL.

Pada bagian ini, kita set database di dalam MySQL yang akan kita gunakan untuk project ini adalah db_express_api. Kemudian untuk password, silahkan disesuaikan dengan konfigurasi MySQL-nya masing-masing.

Setelah itu kita membuat kondisi untuk melihat apakah koneksi database ke MySQL berhasil atau tidak.

Jika koneksi database berhasil, maka ketika kita menjalankan project akan tampil pesan Connection Succuessfully! di console atau terminal/CMD seperti berikut:


Lihat dokumentasinya di sini https://www.npmjs.com/package/mysql2.

Langkah 9: Menampilkan Data dari Database

Sekarang kita akan mulai mengimplementasikan Rest API yang sudah kita buat untuk operasi Create, Read, Update, dan Delete (CRUD) ke table users di database db_express_api.

Kita mulai dengan mengimplementasi Rest API untuk operasi Read data dari MySQL database dan melakukan uji coba menggunakan Postman.

Silahkan ubah route dengan nama /users yang menggunakan method GET menjadi seperti berikut:

Pada kode di atas, membuat handler router yang isinya query ke table users dengan perintah SELECT * FROM users. 

Perintah query tersebut akan menampilkan seluruh isi table users, kodenya seperti berikut.

Kemudian di dalam block query di atas, kita membuat sebuah kondisi untuk memastikan apakah proses dari query tersebut berhasil atau tidak.

Jika terdapat kesalahan, maka akan mengembalikan sebuah response JSON dengan status code 500, kodenya seperti berikut:

Tapi jika dari proses query di atas berhasil, maka akan melakukan return ke dalam format JSON dengan status code 200 dan menampilkan data dari hasil query tersebut.

Sekarang, kita akan mencobanya di Postman. Sebelum itu, kita akan menginputkan data di tabel users terlebih dulu. Caranya, klik menu Insert pada toolbar bagian atas. Kemudian, isilah data sesuai dengan field id, name, email, dan Address. Jika sudah, klik tombol Go.


Setelah itu kembali ke tabel users untuk mengecek apakah input data sudah berhasil. Jika berhasil, kurang lebih tampilannya akan seperti ini.

Sekarang kita akan mencobanya di Postman. Silahkan buat request baru dengan nama Get All User, kemudian masukkan url http://localhost:3007/users dan set method request menjadi GET lalu klik Send.


Di atas, kita telah berhasil membaca data di table users dari database db_express_api. Output datanya dalam bentuk array yang berisi objek dari tiap baris atau data.

Langkah 10: Menampilkan Detail Data ke Database

Sekarang kita lanjutkan dengan mengimplementasikan Rest API untuk operasi Read detail data dari MySQL database.

Kita akan melakukan query ke dalam database dengan parameter id yang didapatkan dari url browser. 

Silahkan ubah route dengan nama /user/:id yang menggunakan method GET menjadi seperti berikut:

Pada kode di atas, kita membuat route untuk menampilkan detail data berdasarkan parameter id.

Kemudian di dalam route, kita membuat variabel dengan nama id dan isinya kita ambil dari parameter yang bernama id.

Setelah itu, kita melakukan query ke dalam table users dengan parameter id tersebut.

Lalu di dalam query, kita membuat 3 kondisi, yaitu:

1. Check query

Jika dari query di atas terdapat kesalahan, maka akan mengembalikan sebuah response JSON dengan status code 500 dan menampilkan pesan Internal Server Error, kodenya seperti berikut:

2. Data tidak ditemukan

Jika dari proses query di atas berhasil dilakukan, tetapi tidak mendapatkan data yang sesuai dengan parameter yang dicari, maka akan melakukan return dengan status code 404 dan menampilkan pesan Data Not Found!

3. Data ditemukan

Kondisi terakhir, jika dari proses query di atas berhasil dan mendapatkan hasil data sesuai parameter ID, maka melakukan return ke dalam format JSON dengan status code 200 dan menampilkan detail data tersebut.

Sekarang kita akan lakukan uji coba untuk menampilkan detail data berdasarkan id. Silahkan buka Postman dan masukkan url http://localhost:3007/users untuk melihat terlebih dulu data yang ada di database.


Pada gambar di atas, kita bisa lihat hanya ada satu data user di database dengan id yaitu 1. 

Selanjutnya, kita akan coba menampilkan data yang memiliki id 1 tersebut. Silahkan buat request baru dan masukkan url http://localhost:3007/user/:id dan untuk methodnya pilih GET, kemudian masukkan id datanya ke bagian value seperti berikut, lalu klik Send.

Hasilnya kita mendapatkan sebuah response JSON dengan informasi detail data users berdasarkan id yang diminta.

Sekarang kita lanjutkan untuk melakukan uji coba dengan parameter id yang tidak ada datanya di database. Silahkan ganti id-nya menjadi 2 seperti berikut, kemudian klik Send.

Karena di database belum ada data dengan id tersebut, maka kita mendapatkan rensponse bahwa data tidak ditemukan di table users, seperti berikut.

Terakhir, kita akan mencobanya di browser. Silahkan masukkan url http://localhost:3007/user/1 di browser, kemudian enter, maka browser menampilkan detail data yang memiliki id 1 seperti berikut.

Langkah 11: Insert Data ke Database

Selanjutnya kita akan mengimplementasikan Rest API untuk operasi Create data atau insert data ke dalam database. 

Silahkan ubah route dengan nama /user yang menggunakan method POST menjadi seperti berikut:

Pada kode di atas, kita membuat route dengan nama /user dan method yang digunakan POST. 

Kemudian di dalam router di atas, kita membuat variabel formData yang value-nya sebuah object yang isinya request body seperti berikut.

Kemudian setelah data berhasil di tampung di dalam variabel formData, sekarang kita lakukan insert ke dalam database menggunakan query.

Di dalam query di atas, kita melakukan sebuah pengecekan kondisi, jika proses query gagal, maka akan mengembalikan sebuah response JSON dengan status code 500 dan menampilkan pesan Internal Server Error, kodenya seperti berikut:

Dan jika proses insert data berhasil dilakukan, maka kita akan mengembalikan return dengan format JSON dan status code 201.

Sekarang kita akan melakukan uji coba route di atas. Sebelum melakukan uji coba, kita perlu menambahkan middleware bawaan Express JS, yaitu fungsi express.json() dan express.urlencode().

Fungsi express.json() berfungsi untuk memparsing data JSON yang dikirimkan oleh HTTP POST dan menyimpannya sebagai object Javascript yang dapat di akses melalui req.body. 

Sedangkan fungsi express.urlencode() berfungsi untuk memparsing data url-encode yang dikirimkan oleh HTTP POST dan menyimpannya sebagai object Javascript yang dapat di akses melalui req.body.

Pada kode di atas, kita menggunakan method app.use() untuk memberitahu express untuk menggunakan middleware JSON dan URL Encode.

Sehingga kode file index.js menjadi seperti berikut.

Sekarang kita akan lakukan uji coba untuk insert data dalam format JSON ke database. Silahkan buka Postman dan masukkan url http://localhost:3007/user dan untuk methodnya pilih GET, kemudian pilih body, pilih raw, dan pilih JSON, setelah itu kita buat datanya seperti berikut, lalu klik Send.

Hasilnya, kita akan mendapatkan rensponse bahwa kita berhasil melakukan insert data ke dalam database, kurang lebih seperti berikut.

Kita dapat mengeceknya menggunakan route /users seperti berikut.

Pada gambar di atas, kita berhasil melakukan insert data ke database. Data tersebut memiliki id-nya 21, kenapa 21, bukannya 2?  karena sebelumnya saya sudah menambahkan data sebanyak 20 data dan menghapusnya untuk testing.

Sekarang kita akan mencoba insert data url-encode ke database. Silahkan buka Postman dan masukkan url http://localhost:3007/user dan untuk methodnya pilih GET, kemudian pilih body, pilih x-www-form-url-encoded.

Setelah itu, buat datanya menggunakan pasangan key-value seperti berikut, lalu klik Send.


Kita dapat mengeceknya menggunakan route /users seperti berikut.



Langkah 12: Update Data ke Database

Selanjutnya kita akan mengimplementasikan Rest API untuk operasi Update data ke dalam database. 

Silahkan ubah route dengan nama /user/:id yang menggunakan method PUT menjadi seperti berikut:

Dari perubahan kode route di atas, kita membuat route untuk proses update data berdasarkan id tertentu menggunakan method PUT. 

Di dalam route tersebut, pertama kita membuat variabel dengan nama id yang isinya diambil dari parameter yang bernama id. Variabel ini nantinya akan digunakan sebagai parameter untuk proses update di dalam query database.

Setelah itu, kita membuat variabel dengan nama formData, kemudian membuat query update ke dalam database berdasarkan id, dan di dalam proses update tersebut, kita membuat kondisi untuk pengecekan apakah prosesnya berhasil atau tidak.

Selanjutnya, kita akan melakukan uji coba menggunakan Postman. Silahkan buka Postman dan masukkan url http://localhost:3007/users dan gunakan method GET, lalu klik Send. Hasilnya menampilkan data users yang ada di database seperti berikut.

Pada gambar di atas, kita bisa lihat ada 3 data user yang ditampilkan. Kita akan melakukan update pada data user yang id-nya adalah 22.

Silahkan buat request baru lalu masukkan url http://localhost:3007/user/:id dan untuk methodnya pilih PUT, kemudian masukkan id datanya ke bagian value seperti berikut, lalu klik Send.

Setelah itu, silahkan buka tab body dan pilih x-www-form-url-encoded, kemudian masukkan key dan valuenya seperti berikut, lalu klik Send.



Hasilnya, kita akan mendapatkan rensponse bahwa kita berhasil melakukan update data seperti di atas. Kita dapat mengeceknya menggunakan route /users seperti berikut.



Langkah 13: Delete Data dari Database

Terakhir, kita akan mengimplementasikan Rest API untuk operasi Delete data dari database. 

Silahkan ubah route dengan nama /user/:id yang menggunakan method DELETE menjadi seperti berikut:

Dari perubahan kode route di atas, kita membuat route untuk proses delete data berdasarkan id tertentu menggunakan method DELETE. 

Setelah itu, kita membuat handler route tersebut yang sama dengan handler route update. Perbedaannya ada pada perintah query yang digunakan.

Sekarang kita lakukan uji coba di Postman. Silahkan buka Postman dan masukkan url http://localhost:3007/users dan gunakan method GET, lalu klik Send. Hasilnya menampilkan data users yang ada di database seperti berikut.

Pada gambar di atas, kita bisa lihat ada 3 data user yang ditampilkan. Kita akan melakukan delete pada data user yang id-nya adalah 21.

Silahkan buat request baru lalu masukkan url http://localhost:3007/user/:id dan untuk methodnya pilih DELETE, kemudian masukkan id datanya ke bagian value seperti berikut, lalu klik Send.


Hasilnya, kita akan mendapatkan rensponse bahwa kita berhasil melakukan delete data seperti di atas. Kita dapat mengeceknya menggunakan route /users seperti berikut.

Selesai. Kita telah membuat Restful API untuk operasi Create, Read, Update, dan Delete (CRUD) menggunakan Express JS dan MySQL database. Tapi sekarang kode file index.js menjadi sangat panjang seperti berikut.

Jadi pada artikel berikutnya, kita akan melakukan refactoring agar kode di file index.js tidak terlalu panjang.

Terima kasih.