Cara menggunakan node express mysql crud

Question

https://codingrakitan.blogspot.com/2020/08/cara-membuat-crud-database-mysql-dengan.html

Table of Contents Show

Beberapa Error yang Bisa Anda Temui
MySql belum dijalankan
Database Tidak ditemukan
insert.html
update.html
Apa itu express pada node js?
Apa itu Sequelize di Node JS?
Apa fungsi Sequelize?

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

Bagikan artikel ke:

Facebook Google+ Twitter

Apa itu express pada node js?

Node.js adalah software open-source yang bisa digunakan untuk membuat aplikasi jaringan dan aplikasi server-side yang real-time dan scalable (bisa dikembangkan sesuai kebutuhan). Pada dasarnya, Node.js adalah runtime environment lintas platform single-thread yang dibangun berdasarkan engine JavaScript V8 Chrome.

Apa itu Sequelize di Node JS?

Sequelize adalah ORM berbasis promise di Node.js yang mendukung Postgres, MySQL, SQL Server. Sequelize menyediakan cara yang mudah untuk mengelola data yang ada dalam database.

Apa fungsi Sequelize?

Sequelize berfungsi untuk bekerja dengan database dan relasi-relasi di dalamnya. Sehingga pada saat deployment kamu tidak perlu melakukan perubahan konteks saat menuliskan kode karena kamu sudah membuat interaksi menggunakan bahasa Javascript melalui api yang sudah disediakan oleh Sequelize.

kode mysql