Langsung ke konten utama

Cara Membuat CRUD Database MySql dengan Node js

 

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("/");
}
});
})

Komentar

Postingan populer dari blog ini

Cara Mengatasi Blank Hitam Pada Photoshop

Saat ini mungkin anda sedang mengalami hal yang pernah saya alami, dimana ketika mengedit gambar di Photoshop tiba-tiba screen layer project berubah menjadi hitam. Apalagi pas menambahkan atau mengedit tulisan, blank ini kerap kali muncul. Kurang lebih akan tampak seperti gambar berikut. Teman-teman jangan khawatir karena saya telah menemukan solusinya dan berhasil saya terapkan. Berikut Cara Mengatasi Blank Hitam Pada Photoshop. 1. Masuk ke menu preferences dengan menekan menu Edit -> Preferences -> Performance . 2. Pada layar Preferences klik tombol Advanced Settings 3. Pada layar Advanced Graphics Processor Settings pada pilihan Drawing Mode silahkan ganti menjadi basic kemudian klik Ok , anda akan kembali ke layar Preferences silahkan klik lagi OK . 4. Selanjutnya tutup Photoshop anda dengan klik menu File -> exit . 5. Terakhir buka kembali Photoshop dan lihat hasilnya.

Inilah Kelebihan dan Kekurangan Ruby

Ruby merupakan salah satu bahasa pemrograman berorientasi objek berbasis skrip yang dikembangkan oleh Yukihiro Matsumoto yaitu seorang programer asal Jepang. Untuk mengetahui lebih jauh tentang bahasa Ruby silahkan baca postingan sebelumnya : Mengenal Bahasa Pemrograman Ruby  Sesuai judul postingan kali ini kita hanya akan membahas mengenai Kelebihan serta Kekurangan Bahasa Pemrograman Ruby. Berikut beberapa point yang telah kami jabarkan. Kelebihan Bahasa Pemrograman Ruby 1. Kode sederhana  Dibandingkan dengan bahasa pemrograman lainnya, yang kebanyakan untuk menulis kode dibutuhkan sekitar 10 baris, pada Ruby hanya butuh 1 atau 2 baris. Inilah kenapa Ruby dikatakan memiliki kode yang sederhana. Karena kesederhanaan dalam kodenya, akan mengurangi jam kerja programmer. 2. Multi-platform Ruby dapat berjalan di berbagai sistem operasi seperti Mac, Windows, hingga Linux. 3. Tingkat kebebasan yang tinggi Salah satu bentuk kebebasan programer dalam menuliska kode Ruby seperti tidak...

Mengenal Sejarah JavaScript

Para programer berbasis web tentunya sangat ingin mengetehui lebih dalam tentang JavaScript. Hal ini tidak lepas dari fitur yang disediakan oleh JavaScript yang memudahkan dalam mengontrol, memanipulasi sebuah website. Selain itu bahasa pemrograman ini juga digunakan di hampir 90% web diseluruh dunia. Sejarah Bahasa Pemrograman JavaScript JavaScript merupakan salah satu bahasa pemrograman berbasis website yang dikembangkan oleh Netscape, sebuah perusahaan telekomunikasi yang juga mengembangkan browser Netscape Navigator. JavaScript sendiri mulai dibuat pada tahun 1995 yang mana ditangani oleh programer Netscape bernama Brendan Eich. Pada awal kemunculannya bahasa pemrograman ini bernama LiveScript. Nama ini kemudian dirubah menjadi JavaScript dikarenakan pada saat itu Java yang dirilis oleh Sun Microsystem (sekarang Oracle)sedang menjadi sorotan. Bisa dikatakan bahwa tujuan penamaan JavaScript tidak lain untuk menarik perhatian para programan pada waktu itu, jadi JavaScript tidak ada...