1. Membuat Koneksi Database Node Js ke Mysql
Sebelum membuat koneksi, kalian harus sudah menginstall node js di komputer kalian. saya anggap kalian sudah menginstalnya karena sudah mengikuti tutorial angular dari awal. Setelah itu kalian install modul mysql nya ke dalam directory/folder dimana kalian akan membuat aplikasi node js nya. Pada tutorial kali ini saya akan meletakkan aplikasi node js nya ke dalam folder LATIHAN NODE JS/db_mysql. Untuk cara installnya adalah melalui terminal/command promp. Pastekan kode dibawah ini :
tampilanya kurang lebih seperti ini:
tampilanya seperti itu karena saya sudah pernah install.
Kemudian kalian install module express, agar kita dapat menampilkan data nya ke dalam browser. Caranya pastekan kode ini ke dalam terminal kalian:
Selanjutnya kita buat database nya di mysql. Saya buat nama databasenya db_nodejs, kemudian buat table dengan nama staff yang isi field nya adalah :
id (int) primary_key
nama (varchar) 100
alamat (varchar) 100
email (varchar) 50
username (varchar) 20
password (varchar) 100
Setelah itu, buatlah file bernama index.js yang diletakkan di folder LATIHAN NODE JS/db_mysql seperti proses install modul mysql diatas. Kemudian pastekan kode dibawah ini :
var mysql = require('mysql'); //koneksi ke database mysql var db = mysql.createConnection({ host: "127.0.0.1", user: "db_nodejs", password: "db_nodejs123", database: "db_nodejs" }); db.connect(function(err) { if (err) throw err; console.log("Connected!"); });
Perhatikan pada user,password dan database. Kalian sesuaikan dengan xampp atau wamp kalian. biasanya setting defaultnya adalah user : root dan password : kosong (diisi -> ""). Jika koneksi berhasil, maka akan tampil connected! pada terminal kalian. Coba kita jalankan dengan cara :
Tampilanya akan seperti ini :
2. Membuat Method GET (Tampil Data)
Selanjutnya kita tambahkan kode untuk menampilkan data dari database. Tambahkan kode dibawah ini ke dalam file index.js :
//tampil data app.get("/staff", async (req, res) => { try{ let sql = "SELECT * FROM staff"; db.query(sql, function (err, result) { if (err) throw err; res.status(200).json(result); }); } catch (err) { throw err; } });
kode di atas akan menampilkan data jika url aksesnya adalah staff dan method nya get.
Kemudian kita tambahkan module express agar bisa ditampilkan di dalam browser. Kita juga tambahkan coding untuk mengizinkan CORS agar tidak di block oleh browser saat nanti diakses oleh frontend. Silahkan tambahkan kode dibawah ini ke dalam file index.js :
const express = require("express"); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); next(); }); app.listen(8002, () => { console.log(`Server is running port 8002.`); });
Tambahkan kode tersebut di atas koneksi. Simpan file index.js nya kemudian jalankan lagi di terminal dengan kode node index.js. Tampilanya akan seperti ini :
Untuk mengetes tampilan data di browser, coba kalian tambahkan data pada databasenya secara manual di xampp. Contohnya seperti ini :
Kemudian buka pada browser dengan url localhost:8002/staff. jika tidak ada error maka tampilan di browser akan seperti ini :
//insert data ke database app.post("/staff", async (req, res)=>{ try{ const {nama, alamat, email, username, password} =req.body; let sql ="INSERT INTO staff (nama, alamat, email, username, password) VALUES ?"; var values = [
[nama, alamat, email, username, password]
]; db.query(sql, [values], function (err, result) { if (err) throw err; res.send(req.body); }); } catch (err){ console.error(err.message); } });
kode diatas untuk proses insert data ke dalam database mysql. data di dapat dari req.body yang dikirim oleh frontend. Untuk mengecek apakah coding kita sudah berfungsi, kita bisa menggunakan aplikasi postman. Sebelumnya kita simpan dulu perubahan kode nya kemudian kita jalankan ulang aplikasinya lewat terminal dengan kode node index.js. Jika sudah running maka kita bisa cek di postman dengan cara seperti dibawah ini :
Tampilan diatas adalah contoh jika proses penyimpanan berhasil. Kita bisa cek di database kita maka akan bertambah datanya :
Method POST sudah berjalan dengan baik dan bisa digunakan oleh frontend nantinya.
4. Membuat Method GET by id (Tampil Data by id)
Langkah berikutnya kita akan membuat method GET by id, yaitu menampilkan data berdasarkan id yang di masukkan oleh frontend. Gunanya nanti untuk keperluan edit data. Langsung saja tambahkan kode dibawah ini ke dalam file index.js :
//tampil data berdasarakan id app.get("/staff/:id", async (req, res) => { const {id} =req.params; try{ let sql = "SELECT * FROM staff WHERE id=?"; let data = [ [id] ]; db.query(sql, [data], function (err, result) { if (err) throw err; res.status(200).json(result); }); } catch (err) { throw err; } });
Jika sudah ditambahkan, kita simpan perubahan kode nya kemudian kita running ulang aplikasi node js kita dengan cara ketik node index.js pada terminal. Setelah berhasil running, sekarang kita cek menggunakan postman apakah berhasil menampilkan data. Tampilanya akan seperti ini :
Kita juga bisa cek di browser dengan url localhost:8002/staff/2, maka tampilanya akan seperti ini :
Browser akan menampilkan data dengan id= 2.
Jika sudah tampil seperti ini maka method GET by id sudah berhasil dibuat.
5. Membuat Method PUT (Update Data)
Berikutnya kita membuat method PUT untuk keperluan Update data ke database. Pada method ini kita memerlukan data sebagai perubahan/edit dan parameter id sebagai acuan data mana yang akan di edit. Untuk kode nya silahkan tambahkan dibawah ini ke dalam file index.js kalian :
//Update data ke database app.put("/staff/:id", async (req, res)=>{ try{ const {id} =req.params; const {nama, alamat, email, username, password} =req.body; let sql = "UPDATE staff SET nama=?, alamat=?, email=?, username=?, password=? WHERE id=?"; let data =[nama, alamat, email, username, password, id]; db.query(sql, data, function (err, result) { if (err) throw err; res.json('Update success'); }); } catch (err){ throw err; } });
Jika sudah ditambahkan silahkan di simpan kemudian jalankan lagi aplikasi node js nya lewat terminal dengan kode node index.js. Jika sudah running kita cek menggunakan postman. Caranya sebagai berikut :
//Hapus data dari database app.delete("/staff/:id", async (req, res)=>{ try{ const {id} =req.params; let sql = "DELETE FROM staff WHERE id=?"; db.query(sql, id, function (err, result) { if (err) throw err; res.json('Delete success'); }); } catch (err){ throw err; } });
Jika sudah silahkan simpan dan running ulang aplikasinya dengan cara node index.js di dalam terminal. Jika sudah running kita bisa cek dengan postman, caranya adalah sebagai berikut :
