Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB

Pada artikel kali ini BapakNgoding akan membuat sebuah artikel tentang CRUD dimana kali ini saya akan membuat CRUD menggunakan NodeJS, ExpressJS, dan MariaDB sebagai databasenya. Namun sebelum saya masuk ke pokok pembahasannya mari kita pelajari dulu apa itu CRUD.

CRUD adalah singkatan dari (Create, Read, Update, Delete) yang artinya adalah sebagai berikut :

Create adalah membuat atau memasukan data baru ke dalam sebuah database
Read adalah menampilkan hasil data dari database ke dalam sebuah Website
Update adalah mengubah atau memperbarui suatu data dari database
Delete adalah menghapus suatu data dari database

Seperti itulah kurang lebihnya pengertian CRUD, dan tentu saja semua itu dilakukan dengan menggunakan API dan bukan manual dari databasenya hehe..

Nah tanpa panjang lebar lagi mari kita ke pokok pembahasan.

Pertama-tama buat project baru yaitu dengan mengetikan npm init pada Terminal/CMD anda
Setelah langkah 1 selesai maka akan terdapat file package.json di directory tempat anda melakukan langkah 1
Setelah selesai sekarang ketikan perintah di bawah ini pada Terminal/CMD anda

npm install express
npm install mariadb
npm install ejs
Buat file baru bernama App.js dan ketikan code berikut :

const express = require('express')
const app = express()
var bodyParser = require('body-parser');
const port = 3000;

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

app.get('/', function (req, res) {
res.render("../views/home.ejs")
})

app.listen(port, () => console.log("Server run at 3000"))
Buat folder views dan buat file home.ejs, edit_guru.ejs, add_guru.ejs, lalu buat file db_config.js hingga memiliki struktur seperti gambar berikut :

Gambar Struktur semua file

Nah sekarang coba jalankan dengan mengetikan perintah berikut :

node app.js

Jika sudah seperti gambar di atas sekarang coba buka localhost:3000 di browser dengan cara mengetikannya di url browser anda, jika berhasil dibuka maka kita ke langkah selanjutnya yaitu membuat Database MariaDB.

Untuk membuat database sebenarnya cukup simple dalam contoh ini saya akan membuat sebuah database dengan nama sekolah dengan struktur sebagai berikut :

struktur database sekolah

Dimana isi dari table master_guru adalah sebagai berikut :

Gambar daftar field di table master_guru

Nah selesai membuat database sekolah sekarang mari kita mulai membuat CRUD, dengan langkah-langkah sebagai berikut :

Setting Database

Nah langkah pertama sebelum membuat CRUD adalah kita harus membuat sebuah file db_config.js dimana didalamnya terdapat konfigurasi untuk menyambungkan API kita ke database kita.

Tambah kode berikut ke dalam file db_config.js

const mariadb = require('mariadb')
const conn = mariadb.createConnection({
host: "localhost",
user: "root",
database: "sekolah",
password: "password",
port: 3307,
});

const query = function (params) {
return new Promise(function (resolve, reject) {
conn.then(async (conn) => {
try {
const result = await conn.query(params)
resolve({
success: true,
data: result
})
} catch (e) {
console.log(e)
reject({
success: false
})
}
})
})
}

module.exports = { query }

Note : Ganti text yang bewarna merah sesuai dengan konfigurasi Database MariaDB anda
Sekarang save dan file konfigurasi telah siap lalu import ke dalam file app.js dengan menambahkan kode berikut ke dalam file app.js

const db = require('./db_config')
Nah sekarang kita bisa menggunakan fungsi query yang berada di dalam file db_config ke file app.js dimana db tersebut akan kita gunakan untuk mengeksekusi Query SQL

CREATE

Langkah untuk membuat CREATE atau menambah data pada database melalui website adalah sebagai berikut :

Tambah kode berikut di dalam file app.js

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 db.query(`INSERT INTO master_guru(name,mapel)VALUES('${name}','${mapel}')`)
res.json(result)
})
Tambahkan kode berikut ke dalam file add_guru.ejs

<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.success){
alert("Data berhasil dimasukan")
}else{
alert("Gagal")
}
}
})
}
</script>

Note : Disana saya menggunakan ajax sebagai perantara API, namun kalian bisa menggunakan apapun seperti XMLHttpRequest, dll

Nah sekarang coba buka localhost:3000/tambah_guru dan masukan nama serta mapel guru, jika data berhasil dimasukan maka akan terlihat seperti gambar berikut :

Gambar hasil akhir menambah data di table_master guru jika sukses

Read

Nah sekarang kita akan menampilkan data dari table master_guru ke dalam website kita dengan menggunakan langkah-langkah berikut :

Tambahkan kode berikut ke dalam file app.js

app.route('/')
.get(function (req, res) {
res.render("../views/home.ejs")
})
.post(async function (req, res) {
const result = await db.query('SELECT * FROM master_guru')
res.send(result)
})
Tambahkan kode berikut ke dalam file home.ejs

<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.data
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>

Disana saya menggunakan table dan memasukan data dari API ke dalam table menggunakan DOM, jika kalian belum tau caranya kalian bisa lihat artikel berikut : Cara Memasukan Data API ke dalam Table di EJS Template
Sekarang coba buka localhost:3000/ dan jika telah berhasil maka akan keluar data guru-guru di dalam table master_guru seperti gambar berikut:

Gambar halaman utama setelah dilakukan penambahan guru

UPDATE

Nah sekarang kita akan membuat update atau halaman untuk mengubah data di table master_guru melalui website kita dengan langkah-langkah berikut :

Tambah kode berikut ke dalam file app.js

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 db.query(`UPDATE master_guru SET Name='${name}', Mapel='${mapel}' WHERE GuruID='${id}'`)
res.send(result)
})
Sekarang tambahkan juga kode berikut ke dalam file edit_guru.ejs

<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) {
if (result.success) {
alert("Data berhasil diperbarui")
} else {
alert("Gagal")
}
}
})
}
</script>
Note : arti dari <%= id %>, <%= name %> , <%= mapel %> disana adalah saya mengambil parameter dari file app.js sebelumnya yaitu :

res.render('../views/edit_guru.ejs', {
id: id,
name: name,
mapel: mapel
})
Sekarang coba pilih salah satu data guru dan tekan tombol edit di halaman localhost:3000 lalu masukan data terbarunya seperti gambar berikut:

Gambar hasil akhir dari edit guru jika berhasil

Jika sudah maka data akan otomatis terganti seperti berikut :

Gambar data setelah di update

DELETE

Nah yang terakhir adalah delete dimana kita akan menghapus data di table master_guru melalui website dengan langkah-langkah berikut :

Tambahkan kode berikut ke dalam file app.js

app.route('/delete_guru')
.get(async function (req, res) {
const { id } = req.query
const result = await db.query(`DELETE FROM master_guru WHERE GuruID='${id}'`)
res.redirect('/')
})

Note : Disana saya menghapus data di table master_guru berdasarkan id yang diberikan di parameter GET

Sekarang coba pilih salah satu data guru dan tekan tombol delete di halaman localhost:3000, jika berhasil maka data akan langsung terhapus seperti berikut :

Gambar data guru setelah dihapus

Nah itulah tadi beberapa caranya, berikut adalah isi kode dari semua file yang tadi kita buat :

App.js

const express = require('express')

const app = express()

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

const db = 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 db.query(`INSERT INTO master_guru(name,mapel)VALUES('${name}','${mapel}')`)

res.json(result)

})

app.route('/')

.get(function (req, res) {

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

})

.post(async function (req, res) {

const result = await db.query('SELECT * FROM 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,

mapel: mapel

})

.post(async function (req, res) {

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

const result = await db.query(`UPDATE master_guru SET Name='${name}', Mapel='${mapel}' WHERE GuruID='${id}'`)

res.send(result)

})

app.route('/delete_guru')

.get(async function (req, res) {

const { id } = req.query

const result = await db.query(`DELETE FROM master_guru WHERE GuruID='${id}'`)

res.redirect('/')

})

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

db_config.js

const mariadb = require('mariadb')

const conn = mariadb.createConnection({

host: "localhost",

user: "root",

database: "sekolah",

password: "rafael",

port: 3307,

});

const query = function (params) {

return new Promise(function (resolve, reject) {

conn.then(async (conn) => {

try {

const result = await conn.query(params)

resolve({

success: true,

data: result

})

} catch (e) {

console.log(e)

reject({

success: false

})

}

})

}

module.exports = { query }

home.ejs

<a href="/tambah_guru">+ Tambah Guru</a>

<thead>

<tr>

<th scope="col">Mapel</th>

<th scope="col">Action</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

$(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.data

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>

add_guru.ejs

<h1>Tambah Guru +</h1>

</div>

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: {

mapel: mapel,

success: function (result) {

if(result.success){

alert("Data berhasil dimasukan")

}else{

alert("Gagal")

}

})

}

</script>

edit_guru.ejs

</div>

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 %>',

mapel: mapel,

success: function (result) {

if (result.success) {

alert("Data berhasil diperbarui")

} else {

alert("Gagal")

}

})

}

</script>

Baca Juga : Mengenal Class, Method Static dan Non Static Serta Contohnya di Java

Nah itulah tadi beberapa Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB.

Sekian dari saya dan mohon maaf bila ada kesalahan kata atau apapun itu.

Jangan lupa share artikel ini ya, karena dengan begitu kalian telah mensupport blog ini untuk selalu membuat konten-konten yang baru.

BapakNgoding

Sunday, December 1, 2019

Cara Membuat CRUD dengan NodeJS, Express JS, dan MariaDB

Related Posts