Membuat CRUD sederhana dengan Javascript

halo teman teman dumet school , kali ini kita akan belajar Membuat CRUD sederhana dengan Javascript, yuk kita praktekan yah teman teman.

Karena ini memakai framework bootstrap, kalian bisa pasang dulu yah bootstrap nya.

nah untuk desain struktur hMTL nya seperti berikut teman terman.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> CRUD Javascript</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-10 offset-1">
			<h2>Crud JS</h2>
			<form action="javascript:void(0);" method="POST" onsubmit="app.Add()"> 
			  <input type="text" id="add-name" placeholder="New Kota">
			  <input type="submit" value="Add">
			</form>

			<div id="spoiler" role="aria-hidden">
			  <form action="javascript:void(0);" method="POST" id="saveEdit">
			    <input type="text" id="edit-name">
			    <input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">✖</a>
			  </form>
			</div>

			<p id="counter"></p>

			<table class="table-responsive">
			  <tr>
			    <th>Name</th>
			    <th>Action</th>
			  </tr>
			    <tbody id="kota">
			    </tbody>
			</table>
			</div>
		</div>
	</div>



</body>
</html>

seperti ini desain nya sangat simpel kok temant eman.

setelah itu kita ke Javascript nya, ketika script berikut sebelum tag penutup body yah teman teman.

<script>
var app = new function() {
this.el = document.getElementById(‘kota’);
this.kota = [‘Jakarta’, ‘Surabaya’, ‘Bandung’, ‘Maksar’, ‘Banten’, ‘Bogor’, ‘Semarang’, ‘Medan’, ‘Jayapura’];
this.Count = function(data) {
var el = document.getElementById(‘counter’);
var name = ‘kota’;
if (data) {
if (data > 1) {
name = ‘<b>kota</b>’;
}
el.innerHTML = data + ‘ ‘ + name ;
} else {
el.innerHTML = ‘No ‘ + name;
}
};

this.FetchAll = function() {
var data = ”;
if (this.kota.length > 0) {
for (i = 0; i < this.kota.length; i++) {
data += ‘<tr>’;
data += ‘<td>’ + this.kota[i] + ‘</td>’;
data += ‘<td><button class=”btn btn-info” onclick=”app.Edit(‘ + i + ‘)”>Edit</button></td>’;
data += ‘<td><button class=”btn btn-danger” onclick=”app.Delete(‘ + i + ‘)”>Delete</button></td>’;
data += ‘</tr>’;
}
}
this.Count(this.kota.length);
return this.el.innerHTML = data;
};
this.Add = function () {
el = document.getElementById(‘add-name’);
// Get the value
var country = el.value;
if (country) {
// Add the new value
this.kota.push(country.trim());
// Reset input value
el.value = ”;
// Dislay the new list
this.FetchAll();
}
};
this.Edit = function (item) {
var el = document.getElementById(‘edit-name’);
// Display value in the field
el.value = this.kota[item];
// Display fields
document.getElementById(‘spoiler’).style.display = ‘block’;
self = this;
document.getElementById(‘saveEdit’).onsubmit = function() {
// Get value
var country = el.value;
if (country) {
// Edit value
self.kota.splice(item, 1, country.trim());
// Display the new list
self.FetchAll();
// Hide fields
CloseInput();
}
}
};
this.Delete = function (item) {
// Delete the current row
this.kota.splice(item, 1);
// Display the new list
this.FetchAll();
};

}
app.FetchAll();
function CloseInput() {
document.getElementById(‘spoiler’).style.display = ‘none’;
}
</script>

hasilnya seperti gambar berikut.

silahkan teman teman praktekan yah, sekian tutorial crud sederhana dengan Javascript, semoga bermanfaat.