Membuat CRUD sederhana dengan Javascript
halo teman teman Source Code Aplikasi , kali ini kita akan belajar Membangun CRUD sederhana dengan Javascript, yuk kita praktekan yah teman teman.
Karena ini memakai framework bootstrap, kalian dapat pasang dulu yah bootstrap nya.
nah bagi 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=Menej /> <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 betul-betul 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.Menej(‘ + i + ‘)”>Menej</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.Menej = 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) {
// Menej 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, demikian panduan crud sederhana dengan Javascript, semoga bermanfaat.
Sumber https://kursuswebsite.org
