Melanjutkan Postingan Sebelumnya tentang nodejs untuk pemula, pada postingan ini saya akan sharing membuat CRUD sederhana dengan nodejs - mysql
pertama kita buat database dulu di localhost/phpmyadmin dengan nama db_nodejs setelah itu kita buat table dengan nama tbl_siswa seperti berikut :
selanjutnya kita buka project yang sudah dibuat di postingan Sebelumnya dan jalankan command berikut :
npm init
jika sudah tekan enter dan didalam project akan tercreate file baru dengan nama package.json dan folder baru node_modules
setelah itu kita install express, mysql, dan body-parser :
dan satu lagi yang akan kita install di project yaitu nodemon, nodemon ini berfungsi untuk menjalankan local server aplikasi nodejs kita, dengan nodemon ini kita tidak perlu melakukan restart server ketika ada perubahan source code di server nodejs kita, nodemon ini akan otomatis melakukan restart server setiap ada perubahan source code di sisi server
dan di file package.json ini akan menjadi seperti berikut :
selanjutnya kita buat folder baru dengan nama public dan didalamnya kita buat file index.html dan script.js, sehingga tampilan struktur project akan seperti berikut :
kemudian buat file index.html menjadi seperti berikut :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<title>CRUD | Nodejs - MySql </title>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header" style="background: #343a40;color: white;align-content: center;">
CRUD | Nodejs - MySql
</div>
<button type="button" class="btn btn-primary btnTambahData mt-1" data-toggle="modal" data-target="#exampleModal" data-zurl="<?= BASEURL; ?>">
Tambah Mahasiswa
</button>
<hr>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Nis</th>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Hobi</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="databody">
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tambah Mahasiswa</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body">
<div class="form-group">
<label for="nis">Nomor Induk Siswa</label>
<input type="text" class="form-control" id="nis" placeholder="Masukkan Nomor Induk Siswa" autocomplete=off>
</div>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" class="form-control" id="nama" placeholder="Masukkan Nama" autocomplete=off>
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<input type="text" class="form-control" id="alamat" placeholder="Masukkan Alamat" autocomplete=off>
</div>
<div class="form-group">
<label for="hobu">Hobi</label>
<input type="text" class="form-control" id="hobi" placeholder="Masukkan Hobi" autocomplete=off>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="btn_save">Simpan</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script src="script.js"></script>
</body>
</html>
dan script.js seperti berikut :
getData();
async function getData(){
const response = await fetch('/read');
const json = await response.json();
console.log(json);
showData(json);
}
const btnSave = document.getElementById('btn_save');
btnSave.addEventListener('click', async event => {
const action = btnSave.textContent;
const nis = document.getElementById('nis').value;
const nama = document.getElementById('nama').value;
const alamat = document.getElementById('alamat').value;
const hobi = document.getElementById('hobi').value;
let data = {
nis : nis,
nama : nama,
alamat : alamat,
hobi : hobi,
action : action
}
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
};
const response = await fetch('/api', options);
const json = await response.json();
console.log(json);
getData();
$('#exampleModal').modal('hide');
if(action === 'Simpan'){
$.alert('Data Berhasil ditambah!');
}else{
$.alert('Data Berhasil dirubah!');
}
});
function showData(json){
let tr = '';
$('#databody').html('');
let no;
for (let i = 0; i < json.length; i++) {
no = i + 1;
tr = $('<tr/>');
tr.append("<td>" + no + "</td>");
tr.append("<td>" + json[i].nis + "</td>");
tr.append("<td>" + json[i].nama + "</td>");
tr.append("<td>" + json[i].alamat + "</td>");
tr.append("<td>" + json[i].hobi + "</td>");
tr.append(`
<td>
<button type="button" class="badge badge-primary badge-pill btnEdit" data-nis="`+ json[i].nis +`">
Edit
</button>
<button type="button" class="badge badge-danger badge-pill btnHapus" data-nis="`+ json[i].nis +`">
Hapus
</button>
</td>`
);
$('#databody').append(tr);
}
//Jquery Selector
$(function(){
$('.btnTambahData').on('click', function(){
document.getElementById('nis').readOnly = false;
document.getElementById('nis').value = '';
document.getElementById('nama').value = '';
document.getElementById('alamat').value = '';
document.getElementById('hobi').value = '';
$('#exampleModalLabel').html('Tambah Data Siswa');
$('.modal-footer button[id=btn_save]').html('Simpan');
});
$('.btnEdit').on('click', async function(){
let nis = $(this).data('nis');
console.log(nis);
const url = `readbynis/${nis}`;
const response = await fetch(url);
const json = await response.json();
console.log(json[0].nis);
document.getElementById('nis').readOnly = true;
document.getElementById('nis').value = json[0].nis;
document.getElementById('nama').value = json[0].nama;
document.getElementById('alamat').value = json[0].alamat;
document.getElementById('hobi').value = json[0].hobi;
$('#exampleModalLabel').html('Ubah Data Siswa');
$('.modal-footer button[id=btn_save]').html('Ubah Data');
$('#exampleModal').modal('show');
});
$('.btnHapus').on('click', async function(){
let nis = $(this).data('nis');
$.confirm({
title: 'Hapus Data Siswa',
content: 'Apakah Anda Yakin...???',
buttons: {
ya: {
text: 'YA',
btnClass: 'btn-blue',
action: async function(){
const url = `hapus/${nis}`;
const response = await fetch(url);
const json = await response.json();
$.alert('Data Berhasil dihapus!');
getData();
}
},
tidak: function () {
}
}
});
});
})
}
kemudian rubah file server.js seperti berikut :
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
//Koneksi ke mysql database
const conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'db_nodejs'
});
//connect ke database
conn.connect((err) =>{
if(err) throw err;
console.log('Koneksi berhasil');
});
app.use(bodyParser.json());
app.listen(4000, () => console.log('Server berjalan di port 4000'));
app.use(express.static('public'));
//Baca Semua Data
app.get('/read',(req, res) => {
let sql = "SELECT * FROM tbl_siswa";
let query = conn.query(sql, (err, results) => {
if(err) throw err;
res.json(results);
});
});
//Baca Data Berdasarkan NIS
app.get('/readbynis/:nis', async (req, res) =>{
const nis = req.params.nis;
console.log(nis);
let sql = "SELECT * FROM tbl_siswa Where nis = "+ nis +"";
let query = conn.query(sql, (err, results) => {
if(err) throw err;
res.json(results);
});
});
//route untuk insert data
app.post('/api', (req, res) => {
let action = req.body.action;
let data = {nis: req.body.nis, nama: req.body.nama, alamat: req.body.alamat, hobi: req.body.hobi};
let sql;
if(action === 'Simpan'){
sql = "INSERT INTO tbl_siswa SET ?";
}else{
sql = `UPDATE tbl_siswa SET nama='`+req.body.nama+`',
alamat='`+req.body.alamat+`', hobi='`+ req.body.hobi +`'
WHERE nis='`+req.body.nis+`';`
}
console.log(sql);
let query = conn.query(sql, data,(err, results) => {
if(err) throw err;
res.json(results);
console.log(results);
});
});
//Baca Data Berdasarkan NIS
app.get('/hapus/:nis', async (req, res) =>{
const nis = req.params.nis;
console.log(nis);
let sql = `DELETE FROM tbl_siswa Where nis = '`+ nis +`';`
let query = conn.query(sql, (err, results) => {
if(err) throw err;
res.json(results);
});
});
jika sudah coba jalankan server dengan command berikut :
nodemon server.js
dan kita buka web browser dan jalankan localhost:4000
Tambah Data
Edit Data
Hapus Data
Sekian sharing kali ini, semoga bermanfaat,, full source code-nya bisa di dowload DISINI
