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

CODING ANDRO

Cara Membuat CRUD Database MySql dengan Node js

Membuat Database

Membuat Koneksi ke Database

Beberapa Error yang Bisa Anda Temui

MySql belum dijalankan

Database Tidak ditemukan

Membuat Template

read.html

insert.html

update.html

css.css

index.js

Select Data Database MySql

Insert Database MySql

Delete Data Database MySql

Update Data Database MySql

kaka

Popular Posts

Blog Archive

Labels Cloud

Recent Posts

Cari Blog Ini

Laporkan Penyalahgunaan

Mengenai Saya