Sebelumnya kita telah belajar bagaimana cara membuat project baru dengan Node Js pada postingan kali ini kita akan melanjutkan dengan membuat CRUD database MySql.
Untuk kamu yang belum tahu apa itu CRUD ?
Jadi CRUD merupakan singkatan dari Create Read Update and Delete, ini merupakan aksi yang bisa dilakukan pada database.
Sebelumnya pastikan komputer anda telah terpasang XAMPP atau sejenisnya yang dapat memberikan anda akses ke MySql. Jika sudah punya silahkan jalankan MySql.
Membuat Database
Buka http://localhost/phpmyadmin/ di browser anda, kemudian buat database baru dengan nama coba_app. Kemudian buat tabel dengan nama akun dengan field seperti berikut :
Keterangan :
- id_akun INT (255) PRIMARY_KEY AUTO_INCREMENT
- username VARCHAR (255)
- password VARCHAR (255)
- nama_lengkap VARCHAR (255)
Membuat Koneksi ke Database
Setelah memiliki database yang siap untuk dihubungkan, langkah selanjutnya adalah membuat koneksi ke database tersebut. Caranya sebagai berikut.
1. Saat membuat project baru kita sudah memiliki 3 file di folder utama atau root yaitu
index.js,
package-lock.json, dan
package.json.
Edit file
index.js ini dengan kode seperti di bawah:
var http = require('http');
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var port = 8080;
// koneksi ke database
var mysql = require('mysql');
var db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database:"coba_app"
});
db.connect(function(err) {
if (err) throw err;
console.log("Connected!");
});
Pastikan anda mengisi nama host, user, password, dan database sesuai dengan database anda. Disini saya menghubbungkan project dengan database bernama
coba_app.
3. Menginstall beberapa module yang dibutuhkan seperti
express, mysql, ejs, dan body-parser.
- mysql ketikkan perintah npm i mysql
- express ketikkan perintah npm i express
- ejs ketikkan perintah npm i ejs
- body-parser ketikkan perintah npm i body-parser
4. Mengecek apakah aplikasi sudah terhubung atau belum, caranya dengan menjalankan project tersebut. Buka cmd kemudian ketikkan perintah node index.js. Bila muncul keterangan "Connected!" seperti pada gambar berarti aplikasi sudah terhubung dengan database.
Beberapa Error yang Bisa Anda Temui
Jika anda melewatkan beberapa detail anda bisa saja mendapatkan keterangan error seperti pada gambar di bawah ini. Tapi tenang saya akan berikan cara penyelesaiannya.
MySql belum dijalankan
Bila muncul error seperti pada gambar di bawah ini berarti MySql anda belum jalan. Solusinya dengan membuka aplikasi XAMPP dan klik start pada MySql.
Database Tidak ditemukan
Jika nama database tidak ditemukan maka akan muncul error seperti pada gambar di bawah. Solusinya dengan membuat database baru dengan nama database yang ingin anda hubungkan dengan project.
Membuat Template
Template atau tampilan ini akan tampil pada saat aplikasi web di jalankan. Beberapa tampilan yang perlu dibuat adalah read.html, insert.html, update.html. Untuk memulainya silahkan buat folder baru dengan nama public didalam public buat 2 folder baru dengan nama asset dan view. Berikut struktur lengkapnya :
Edit beberapa file menjadi kode seperti dibawah :
read.html
<!DOCTYPE html>
<html>
<head>
<title>Read Database</title>
<link rel="stylesheet" type="text/css" href="../asset/css/css.css">
</head>
<body>
<div class="konten d-flex">
<div class="card m-auto w-40">
<div class="p-2">
<h1 class="m-0">Daftar Akun</h1>
</div>
<div class="p-2">
<table class="tg" style="width: 100%;">
<thead>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Username</td>
<td>Aksi</td>
</tr>
</thead>
<tbody>
<%
no = 0;
for(var i=0;i<data.length;i++){
no++;
%>
<tr>
<td><%=no%></td>
<td><%=data[i].nama_lengkap%></td>
<td><%=data[i].username%></td>
<td>
<div class="w-100 d-flex">
<button class="m-auto btn btn-success"><a href="/update?i=<%=data[i].id_akun%>">Edit</a></button>
<button onclick="hapus('<%=data[i].id_akun%>');" class="m-auto btn btn-danger" >Hapus</button>
</div>
</td>
</tr>
<%}%>
</tbody>
</table>
</div>
<div class="p-2">
<button class="btn btn-primary"><a href="/insert">Tambah Akun</a></button>
</div>
</div>
</div>
<script type="text/javascript">
function hapus(i) {
if (confirm("Hapus akun ini ?")) {
window.location.href ="/hapus_akun?i="+i;
}
}
</script>
</body>
</html>
insert.html
<!DOCTYPE html>
<html>
<head>
<title>Insert Database</title>
<link rel="stylesheet" type="text/css" href="../asset/css/css.css">
</head>
<body>
<form action="/tambah_akun" method="post">
<div class="konten d-flex">
<div class="card m-auto w-40">
<div class="p-2">
<h1 class="m-0">Tambah Akun</h1>
</div>
<div class="p-2">
<div class="form-group w-90">
<label>Nama Lengkap</label>
<input type="text" name="nama_lengkap" class="form-control">
</div>
<div class="form-group w-90">
<label>Username</label>
<input type="text" name="username" class="form-control">
</div>
<div class="form-group w-90">
<label>Password</label>
<input type="password" name="password" class="form-control">
</div>
</div>
<div class="p-2">
<button class="btn btn-primary"><a href="/insert">Simpan</a></button>
</div>
</div>
</div>
</form>
</body>
</html>
update.html
<!DOCTYPE html>
<html>
<head>
<title>Update Database</title>
<link rel="stylesheet" type="text/css" href="../asset/css/css.css">
</head>
<body>
<form action="/update?i=<%=data.id_akun%>" method="post">
<div class="konten d-flex">
<div class="card m-auto w-40">
<div class="p-2">
<h1 class="m-0">Edit Akun</h1>
</div>
<div class="p-2">
<div class="form-group w-90">
<label>Nama Lengkap</label>
<input value="<%=data.nama_lengkap%>" type="text" name="nama_lengkap" class="form-control">
</div>
<div class="form-group w-90">
<label>Username</label>
<input value="<%=data.username%>" type="text" name="username" class="form-control">
</div>
<div class="form-group w-90">
<label>Password</label>
<input value="<%=data.password%>" type="password" name="password" class="form-control">
</div>
</div>
<div class="p-2">
<button class="btn btn-primary">Update</button>
</div>
</div>
</div>
</form>
</body>
</html>
css.css
body{
margin: 0px;
padding: 0px;
font-family: 'calibri';
}
.konten{
width: 100%;
height: 100%;
position: absolute;
background: #00abff;
}.d-flex{
display: flex;
}.m-auto{
margin: auto;
}.card{
min-height: 200px;
background: white;
border-radius: 4px;
box-shadow:1px 1px 3px black;
}.w-10{
width: 10%;
}.w-20{
width: 20%;
}.w-30{
width: 30%;
}.w-40{
width: 40%;
}.w-50{
width: 50%;
}.w-60{
width: 60%;
}.w-70{
width: 70%;
}.w-80{
width: 80%;
}.w-90{
width: 90%;
}.w-100{
width: 100%;
}.p-2{
padding: 20px;
}.m-0{
margin: 0px;
} .tg {
border-collapse:collapse;
border-spacing:0;
border-color:#aabcfe;
margin:0px auto;
} .tg td{
font-family:Arial, sans-serif;
font-size:14px;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:#aabcfe;
color:#669;
background-color:#e8edff;
} .tg th{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:#aabcfe;
color:#039;
background-color:#b9c9fe;
}.btn{
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid
transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}.form-group {
margin-bottom: 1rem;
}label {
display: inline-block;
margin-bottom: .5rem;
}.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color:
#495057;
background-color:
#fff;
background-clip: padding-box;
border: 1px solid
#ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}.btn-danger {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
Terakhir edit kembali index.js seperti berikut :
index.js
var http = require('http');
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var port = 8080;
// koneksi ke database
var mysql = require('mysql');
var db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database:"coba_app"
});
db.connect(function(err) {
if (err) throw err;
console.log("Connected!");
});
app.use(bodyParser.json());
var server = app.listen(port, () => {
console.info('listening on %d', port);
});
app.use(bodyParser.urlencoded({
extended: true
}));
app.engine('html', require('ejs').renderFile);
app.use(express.static('public'));
app.get('/', function (req, res) {
let s = "SELECT * FROM akun";
let query = db.query(s, (err, results)=>{
var data = {
data:results
}
res.render(__dirname+"/public/view/read.html", data);
});
});
app.get('/insert', function (req, res) {
res.render(__dirname+"/public/view/insert.html");
});
app.get('/update', function (req, res) {
let s = "SELECT * FROM akun WHERE id_akun='"+req.query.i+"'";
let query = db.query(s, (err, results)=>{
var data = {
data:results[0]
}
res.render(__dirname+"/public/view/update.html", data);
});
});
// insert data
app.post("/tambah_akun", function (req, res) {
let data = {nama_lengkap: req.body.nama_lengkap, username: req.body.username, password:req.body.password};
let sql = "INSERT INTO akun SET ?";
let query = db.query(sql, data,(err, results) => {
if (err) {
res.send({result:"error"});
}else{
res.redirect("/");
}
});
});
//delete data
app.get("/hapus_akun", function (req, res) {
let sql = "DELETE FROM akun WHERE id_akun='"+req.query.i+"'";
let query = db.query(sql, (err, results) => {
if (err) {
res.send({result:"error"});
}else{
res.redirect("/");
}
});
});
//update data
app.post("/update", function (req, res) {
let data = {nama_lengkap: req.body.nama_lengkap, username: req.body.username, password:req.body.password};
let sql = "UPDATE akun SET ? WHERE id_akun='"+req.query.i+"'";
let query = db.query(sql, data,(err, results) => {
if (err) {
console.log("error");
res.send({result:"error"});
}else{
console.log("success");
res.redirect("/");
}
});
})
Select Data Database MySql
Berikut kode untuk mengambil data dalam database mysql
app.get('/', function (req, res) {
let s = "SELECT * FROM akun";
let query = db.query(s, (err, results)=>{
var data = {
data:results
}
res.render(__dirname+"/public/view/read.html", data);
});
});
Insert Database MySql
Berikut kode untuk menginput data kedalam database mysql
app.post("/tambah_akun", function (req, res) {
let data = {nama_lengkap: req.body.nama_lengkap, username: req.body.username, password:req.body.password};
let sql = "INSERT INTO akun SET ?";
let query = db.query(sql, data,(err, results) => {
if (err) {
res.send({result:"error"});
}else{
res.redirect("/");
}
});
});
Delete Data Database MySql
Berikut kode untuk menghapus data di dalam database mysql
app.get("/hapus_akun", function (req, res) {
let sql = "DELETE FROM akun WHERE id_akun='"+req.query.i+"'";
let query = db.query(sql, (err, results) => {
if (err) {
res.send({result:"error"});
}else{
res.redirect("/");
}
});
});
Update Data Database MySql
Berikut kode untuk mengubah data di dalam database mysql
app.post("/update", function (req, res) {
let data = {nama_lengkap: req.body.nama_lengkap, username: req.body.username, password:req.body.password};
let sql = "UPDATE akun SET ? WHERE id_akun='"+req.query.i+"'";
let query = db.query(sql, data,(err, results) => {
if (err) {
console.log("error");
res.send({result:"error"});
}else{
console.log("success");
res.redirect("/");
}
});
})
