Berikut adalah contoh kode untuk membuat aplikasi CRUD (Create, Update, dan Delete) menggunakan JavaScript dan UI Bootstrap. Aplikasi ini memungkinkan pengguna untuk mengubah data yang telah diinput tanpa menggunakan database.
See the Pen Aplikasi CRUD JavaScript by WebbizID (@De-Orchids) on CodePen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi CRUD</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Aplikasi CRUD</h1>
<form id="form-data">
<div class="form-group">
<label for="nama">Nama:</label>
<input type="text" class="form-control" id="nama" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" required>
</div>
<button type="submit" class="btn btn-primary">Tambah</button>
</form>
<table class="table mt-4">
<thead>
<tr>
<th>Nama</th>
<th>Email</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="data-table">
<!-- Data akan ditambahkan secara dinamis menggunakan JavaScript -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Fungsi untuk menambahkan data ke tabel
function tambahData() {
var nama = document.getElementById('nama').value;
var email = document.getElementById('email').value;
var row = '<tr>' +
'<td>' + nama + '</td>' +
'<td>' + email + '</td>' +
'<td>' +
'<button class="btn btn-sm btn-primary" onclick="editData(this)">Edit</button> ' +
'<button class="btn btn-sm btn-danger" onclick="hapusData(this)">Hapus</button>' +
'</td>' +
'</tr>';
document.getElementById('data-table').innerHTML += row;
// Reset form setelah data ditambahkan
document.getElementById('form-data').reset();
}
// Fungsi untuk mengedit data
function editData(button) {
var row = button.parentNode.parentNode;
var nama = row.cells[0].innerHTML;
var email = row.cells[1].innerHTML;
document.getElementById('nama').value = nama;
document.getElementById('email').value = email;
// Hapus baris setelah data diambil untuk diedit
row.remove();
}
// Fungsi untuk menghapus data
function hapusData(button) {
var row = button.parentNode.parentNode;
row.remove();
}
// Event listener untuk form submit
document.getElementById('form-data').addEventListener('submit', function (e) {
e.preventDefault();
tambahData();
});
</script>
</body>
</html>Anda dapat mengganti kode ini sesuai dengan kebutuhan Anda. Semoga contoh ini dapat membantu Anda dalam membuat aplikasi CRUD sederhana menggunakan JavaScript dan UI Bootstrap.
Leave a Reply