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

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Apa Sih Itu Svelte Js? Bagaimana Cara Menjalankannya? Yuks Simak Pembahasan Berikut Ini

(Sumber : Website https://svelte.dev/)   Hallo Sahabat Coders, Semoga kita semua selalu diberikan Kesehatan dan keberlimpahan dalam pekerjaan atau usaha kita. Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba.  Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini. Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/ ). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi ( Curriculum Director di Hacktiv8 Indonesia ). Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka ( user interface) yang dibuat oleh Rich Harris . Namun menurut penulisn...
Posting Komentar
Baca selengkapnya

Mengenal Apa itu Android Studio

Android Studio merupakan tools IDE ( Integrated Development Environment ) yang digunakan untuk membuat aplikasi android. Fungsi utamanya adalah sebagai editor yang menyediakan berbagai kebutuhan dalam membangun aplikasi android seperti widget, library, dll. Android Studio versi terbaru telah mendukung 2 bahasa pemrograman yaitu Java dan Kotlin. Sebelumnya hanya mendukung bahasa Java. Android Studio hadir sebagai pengganti Eclipse ADT ( Android Development Tools ) yaitu tools utama sebelumnya. Tools Android Studio ini dibangun di atas aplikasi yang sudah populer sebagai editor programer yaitu JetBrains IntelliJ IDE. Selain itu Android Studio di lengkapi dengan Emulator sendiri. Sama halnya seperti Eclipse, Android Studio juga memerlukan SDK ( Software Development Kit ) untuk membangun aplikasi android. Bedanya Android Studio didukung penuh oleh Google sebagai pengembangnya serta menggunakan grandle dalam melakukan build. Baca juga : Perbedaan Membuat Aplikasi Android Menggunakan Ecli...
Posting Komentar
Baca selengkapnya

Cara Membuat Project Baru dengan Ruby on Rails

    Pada postingan sebelumnya Mengenal dan Menginstall Ruby on Rails kita telah menginstall bahan-bahan yang diperlukan untuk menjalankan Rails atau Ruby on Rails. Tentunya membuat project baru adalah langkah yang perlu di ketahui sebagai dasar membuat web menggunakan Rails ini. Membuat Project baru di Rails Sebagai contoh disini kita akan membuat project baru bernama " hello_world ". Cara membuatnya sangat mudah anda tinggal buka CMD dengan menekan Windows + R kemudian ketikkan CMD. Setelah CMD terbuka, arahkan ke folder tempat anda ingin menyimpan file Rails anda. Disini saya mengarahkannya pada "E:\ruby_on_rails", anda bisa menentukan sesuka hati tempat penyimpanannya. Untuk mengarahkan ketikkan perintah " cd E: " kemudian masuk ke folder " cd ruby_on_rails ", seperti pada gambar.     Setelah berada di folder atau directory yang di inginkan, ketikkan perintah rails new hello_world . Intruksi tersebut mengisyaratkan untuk membuat project ba...
Posting Komentar
Baca selengkapnya