Membuat fitur crud mengunakan javascript
Ok langsung saja kita akan mulai membuat fitur CRUD mengunakan javascript untuk tampilan disini saya akan mengunakan bootstarp
https://getbootstrap.com/
ok langsung kita buat tampilan halaman utama fitur CRUD seperti di bawah ini, Script ini akan menggunakan fungsi CRUD ke array ketika tombol diklik
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://kura-kuracoding.blogspot.com">Kurakuracoding</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Create, Read, Update, Delete (CRUD) Using JavaScript Source Code</h3>
<hr style="border-top:1px dotted #ccc;" />
<div class="col-md-8">
<table class="table table-bordered">
<thead class="alert-info">
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody id="result"></tbody>
</table>
</div>
<div class="col-md-4">
<div id="create">
<form action="javascript:void(0);" method="POST" class="form-group" onsubmit="Create()">
<label>Full Name:</label>
<input type="text" id="name" class="form-control" />
<br />
<center><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>
Create</button></center>
</form>
</div>
<div id="edit">
<form action="javascript:void(0);" method="POST" class="form-group" id="update">
<label>Full Name:</label>
<input type="text" id="update_name" class="form-control" />
<br />
<center><button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span>
Update</button> <button class="btn btn-danger" onclick="editHider()">✖ Close</button>
</center>
</form>
</div>
</div>
</div>
</body>
<script src="js/script.js"></script>
</html>
Selanjutnya kita akan buat fungsi dari CRUD mengunakan javascript untuk script buat seperti di bawah ini
var el = document.getElementById('result');
var names = [];
function Create() {
var el = document.getElementById('name')
var name = el.value;
if (name) {
names.push(name.trim());
el.value = '';
displayData();
}
displayData();
};
function Delete(item) {
names.splice(item, 1);
displayData();
};
function Edit(item) {
var el = document.getElementById('update_name');
el.value = names[item];
document.getElementById('edit').style.display = 'inline';
document.getElementById('create').style.display = 'none';
self = this;
document.getElementById('update').onsubmit = function() {
var name = el.value;
if (name) {
self.names.splice(item, 1, name.trim());
self.displayData();
buttonToggle();
document.getElementById('create').style.display = 'inline';
}
}
};
function buttonToggle() {
document.getElementById('edit').style.display = 'none';
document.getElementById('create').style.display = 'inline';
}
function displayData() {
var data = '';
if (names.length > 0) {
for (i = 0; i < names.length; i++) {
data += '<tr>';
data += '<td>' + names[i] + '</td>';
data += '<td colspan="2"><center><button class="btn btn-warning" onclick="Edit(' + i + ')"><span class="glyphicon glyphicon-edit"></span> Edit</button> | <button class="btn btn-danger" onclick="Delete(' + i + ')"><span class="glyphicon glyphicon-trash"></span> Delete</button></center></td>';
data += '</tr>';
}
}
el.innerHTML = data;
};
displayData();
buttonToggle();
 Menggunakan Kode Sumber JavaScript){kind=link}
0 Komentar