Cara Membuat CRUD dengan Knex, NodeJS, Express JS, dan MariaDB

Setelah kemarin kita membahas tentang Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB kali ini saya akan membuat CRUD lagi namun dengan cara lain khusunya di bagian API.

Yap kali ini saya akan membagikan artikel membuat CRUD dengan menggunakan Knex.
Sebelum lanjut alangkah baiknya jika kita tau terlebih dahulu apa itu Knex.

Knex adalah salah satu query builder yang dimiliki Javascript dan NodeJS, query builder sendiri adalah pengganti query SQL yang biasanya kita ketikan secara manual seperti jika kita biasanya mengetikan "SELECT * FROM nama_table" untuk menampilkan data dari suatu table maka jika menggunakan Knex kita hanya perlu mengetikan knex('nama_table'), terlihat lebih simple bukan?
selain itu menggunakan query builder juga memberikan kita beberapa keuntungan seperti

Mempersingkat waktu pembuatan query SQL
Mengurangi dan memperpenggunaan kata dalam suatu script program
Membantu kita saat ingin migrate database

Di point no 3 saya menyebutkan tentang migrate database, dimana migrate database sendiri adalah perpindahan antara database satu ke database lain seperti MySQL ke Oracle tentu saja keduanya memiliki query yang berbeda kan, nah dengan query builder kita tidak perlu menggantinya lagi di program kita karena query builder akan selalu menyesuaikannya dengan database kita.
Pada saat artikel ini ditulis Knex telah mendukung Postgres, MSSQL, MySQL, MariaDB, SQLite3, dan Oracle

Sekarang mari kita lanjut ke langkah penggunaanya sebagai berikut namun sebelum lanjut saya sarankan membaca artikel saya tentang Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB karena disana cara kerjanya sama dengan artikel ini cuma berbeda di bagian API nya saja.

Install Knex dan Konfigurasi Database

Buat project baru dengan mengetikan npm init pada CMD/Terminal
Install package-package berikut dengan cara mengetikannya pada CMD/Terminal anda

npm install express
npm install ejs
npm install mysql
npm -g install nodemon
npm install knex
Note : Pada Knex database MariaDB dan MySQL sama-sama menggunakan package mysql
Buat database pada contoh ini saya membuat database dengan nama sekolah

Gambar : Struktur Database

Sekarang buat field master_guru dengan isi sebagai berikut :

Gambar : Struktur table master_guru
Buat file baru bernama db_config.js lalu masukan kode berikut ke dalamnya :

const knex = require('knex')({
client: 'mysql',
connection:{
host: "localhost",
user: "root",
database: "sekolah",
password: "password",
port: 3307,
}
})

module.exports = { knex }
Note : Ganti text bewarna merah dengan konfigurasi anda dan untuk client sesuaikan dengan database anda, untuk MariaDB dan MySQL sama-sama menggunakan mysql

Buat file app.js lalu ketikan kode berikut ke dalamnya :

const express = require('express')
const app = express()
var bodyParser = require('body-parser');
const { knex } = require('./db_config')
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))
app.set('view engine', 'ejs')

app.get('/', function (req, res) {
res.send('Welcome to BapakNgoding')
})

app.listen(port, () => console.log("Server run at 3000"))
Disana terlihat kita mengimport knex package dari file db_config.js, sekarang kita dapat menjalankannya dengan mengetikan nodemon app.js pada CMD lalu membukanya di localhost:3000
Buat folder views dan buat file home.ejs, edit_guru.ejs, dan add_guru.ejs di dalamnya seperti gambar berikut :

Gambar Struktur file

Nah persiapan kita telah selesai sekarang mari kita buat CRUD nya dengan langkah-langkah berikut :

CREATE

Langkah untuk membuat CREATE dengan Knex adalah :

Buka file app.js lalu tambahkan kode berikut :

app.route('/tambah_guru')
.get((req, res) => {
res.render("../views/add_guru.ejs")
})
.post(async (req, res) => {
const { name, mapel } = req.body
const result = await knex('master_guru').insert({ name: name, mapel: mapel })
res.json(result)
})

Note : Disana saya memasukan data ke table master_guru dengan menggunakan knex('master_guru').insert({}) sebagai pengganti query "INSERT INTO ... " dimana master_guru adalah nama table yang akan kita ditambah datanya

Buka file add_guru.ejs lalu tambahkan juga kode berikut :

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div style="padding: 20">
<h1>Tambah Guru +</h1>
<input type="text" placeholder="Nama Guru" id="input_name"> <br /><br />
<input type="text" placeholder="Mapel Guru" id="input_mapel"><br /><br />
<input type="button" id="save_btn" value="Simpan" onclick="tambah_guru()">
</div>

<script>
function tambah_guru() {
const name = document.getElementById("input_name").value
const mapel = document.getElementById("input_mapel").value
$.ajax({
url: 'http://localhost:3000/tambah_guru',
method: "POST",
data: {
name: name,
mapel: mapel,
},
success: function (result) {
if(result){
alert("Data berhasil dimasukan")
}else{
alert("Gagal")
}
}
})
}
</script>
Setelah selesai sekarang buka browser dan ketikan localhost:3000/tambah_guru dan masukan data guru yang ingin dimasukan seperti gambar di bawah :

Gambar localhost:3000/tambah_guru
Selesai sekarang coba buka database anda dan lihat apakah data guru yang baru sudah berhasil dimasukan, jika belum silahkan coba lagi langkah diatas.

READ

Setelah membuat CREATE sekarang kita akan menampilkan data dari table master_guru ke dalam website kita.

Buka file app.js lalu tambahkan kode berikut ke dalamnya :

app.route('/')
.get(function (req, res) {
res.render("../views/home.ejs")
})
.post(async function (req, res) {
const result = await knex('master_guru')
res.send(result)
})
Note : Disana saya menggunakan query knex('master_guru') sebagai pengganti query "SELECT * FROM master_guru"

Buka file home.ejs lalu masukan kode berikut :

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div style="padding: 20">
<h1>Data Guru</h1>
<a href="/tambah_guru">+ Tambah Guru</a>
<table class="table" id="table_guru">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama</th>
<th scope="col">Mapel</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

<script>
$(document).ready(function () {
const url = "http://localhost:3000/"
$.ajax({
url: url,
method: "POST",
resultType: "JSON",
success: function (results) {
const table = document.getElementById("table_guru")
const result_data = results
for (var i = 0; i < result_data.length; i++) {
var data = result_data[i]
console.log(data)
var row = table.insertRow(i + 1)
var no = row.insertCell(0)
var nama = row.insertCell(1)
var mapel = row.insertCell(2)
var action = row.insertCell(3)
no.innerHTML = i + 1
nama.innerHTML = data.Name
mapel.innerHTML = data.Mapel
const params_get = `id=${data.GuruID}&name=${data.Name}&mapel=${data.Mapel}`
action.innerHTML = `<a href='/edit_guru?${params_get}'>Edit</a>
|<a href='/delete_guru?id=${data.GuruID}'>Delete</a> `
}
}
})
})
</script>
Note : Disaya saya menggunakan DOM untuk memasukan data dari API ke dalam table saya, kalian bisa menemukan caranya di link berikut Cara Memasukan Data API ke dalam Table di EJS Template

Setelah selesai sekarang coba buka localhost:3000 maka tampilannya akan seperti gambar di bawah

Gambar localhost:3000

UPDATE

Cara untuk membuat query update dengan menggunakan Knex adalah sebagai berikut :

Buka file app.js lalu tambahkan kode berikut :

app.route('/edit_guru')
.get(function (req, res) {
const { id, name, mapel } = req.query
res.render('../views/edit_guru.ejs', {
id: id,
name: name,
mapel: mapel
})
})
.post(async function (req, res) {
const { id, name, mapel } = req.body
const result = await knex('master_guru').where('GuruID', '=', id)
.update({
Name: name,
Mapel: mapel
})
result_res = result == 1 ? true : false //masukan nilai true jika result = 1 dan false jika result = 0
console.log(result_res)
res.send(result_res)
})
Note : Disana saya menggunakan knex('master_guru').where('GuruID', '=', id).update({ Name: name, Mapel: mapel}) dimana jika kita querykan biasa akan menjadi "UPDATE master_guru SET Name = 'name', Mapel = 'Mapel' WHERE id='id'"

Buka file edit_guru.ejs dan tambahkan kode berikut :

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div style="padding: 20">
<h1>Edit Guru </h1>
<input type="text" placeholder="Nama Guru" id="input_name" value="<%=name%>"> <br /><br />
<input type="text" placeholder="Mapel Guru" id="input_mapel" value="<%=mapel%>"><br /><br />
<input type="button" id="save_btn" value="Simpan" onclick="edit_guru()">
</div>

<script>
function edit_guru() {
const name = document.getElementById("input_name").value
const mapel = document.getElementById("input_mapel").value
$.ajax({
url: 'http://localhost:3000/edit_guru',
method: "POST",
data: {
id: '<%= id %>',
name: name,
mapel: mapel,
},
success: function (result) {
alert("Data berhasil diperbarui")
}
})
}
</script>
Setelah selesai sekarang buka localhost:3000/ lalu pilih salah satu guru yang ingin diperbarui dan klik edit
Setelah masuk ke halaman edit maka isikan data baru yang ingin diperbarui dari data guru yang kalian pilih sebelumnya lalu klik simpan

Gambar setelah tombol simpan ditekan

DELETE

Nah untuk perintah Delete menggunakan Knex adalah sebagai berikut :

Buka file app.js lalu tambahkan kode berikut :

app.route('/delete_guru')
.get(async function (req, res) {
const { id } = req.query
const result = await knex('master_guru').where('GuruID', '=', id)
.del()
res.redirect('/')
})
Note : Disana saya menggunakan knex('master_guru').where('GuruID', '=', id)del() sebagai pengganti query "DELETE FROM master_guru WHERE GuruID='id'"

Sekarang buka localhost:3000 lalu pilih salah satu data guru yang ingin dihapus setelah itu klik tombol delete dan Taraaa.. data tersebut telah dihapus

Gambar sebelum ditekan tombol delete

Gambar setelah ditekan tombol delete

Nah itulah "Cara Membuat CRUD dengan Knex, NodeJS, Express JS, dan MariaDB" Berikut semua file saya beserta isinya

app.js

const express = require('express')

const app = express()

var bodyParser = require('body-parser');

const { knex } = require('./db_config')

const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }))

app.set('view engine', 'ejs')

app.route('/tambah_guru')

.get((req, res) => {

res.render("../views/add_guru.ejs")

})

.post(async (req, res) => {

const { name, mapel } = req.body

const result = await knex('master_guru').insert({ name: name, mapel: mapel })

res.json(result)

})

app.route('/')

.get(function (req, res) {

res.render("../views/home.ejs")

})

.post(async function (req, res) {

const result = await knex('master_guru')

res.send(result)

})

app.route('/edit_guru')

.get(function (req, res) {

const { id, name, mapel } = req.query

res.render('../views/edit_guru.ejs', {

id: id,

name: name,

mapel: mapel

})

.post(async function (req, res) {

const { id, name, mapel } = req.body

const result = await knex('master_guru').where('GuruID', '=', id)

.update({

Name: name,

Mapel: mapel

})

result_res = result == 1 ? true : false //masukan nilai true jika result = 1 dan false jika result = 0

console.log(result_res)

res.send(result_res)

})

app.route('/delete_guru')

.get(async function (req, res) {

const { id } = req.query

const result = await knex('master_guru').where('GuruID', '=', id)

.del()

res.redirect('/')

})

app.listen(port, () => console.log("Server run at 3000"))

db_config.js

const knex = require('knex')({
client: 'mysql',
connection:{
host: "localhost",
user: "root",
database: "sekolah",
password: "rafael",
port: 3307,
}
})

module.exports = { knex }

add_guru.ejs

edit_guru.ejs

home.ejs

Nah itulah semua file saya untuk Membuat CRUD dengan Knex, NodeJS, Express JS, dan MariaDB

Sekian dari BapakNgoding dan mohon maaf bila ada kesalahan kata atau apapun itu dan jangan lupa share artikel ini ya, karena dengan begitu kalian telah mensupport blog ini untuk selalu membuat konten-konten yang baru.

BapakNgoding

Tuesday, December 3, 2019

Cara Membuat CRUD dengan Knex, NodeJS, Express JS, dan MariaDB

Related Posts