Operasi CRUD sederhana menggunakan javascript
Apa itu CURD ?
CRUD adalah singkatan dari Create, Read, Update, dan Delete, yang merupakan operasi dasar dalam manajemen data pada sistem basis data atau aplikasi. Setiap huruf merepresentasikan operasi dasar yang sering digunakan dalam pengembangan perangkat lunak untuk memanipulasi data.
Berikut adalah penjelasan singkat untuk setiap operasi CRUD:
Create (Buat):Operasi untuk membuat data baru atau menambahkan data ke dalam basis data. Misalnya, menambahkan catatan baru ke dalam tabel database.Read (Baca):Operasi untuk membaca atau mengambil data dari basis data. Ini termasuk mengambil informasi atau menampilkan data yang sudah ada dalam sistem.Update (Perbarui):Operasi untuk memperbarui atau mengubah data yang sudah ada dalam basis data. Misalnya, mengubah nilai-nilai dari catatan tertentu.Delete (Hapus):Operasi untuk menghapus data yang tidak diperlukan atau tidak relevan dari basis data. Misalnya, menghapus catatan atau data yang sudah tidak diperlukan lagi.
Penerapan operasi CRUD ini sangat penting dalam pengembangan aplikasi dan sistem informasi karena memungkinkan untuk memanipulasi dan mengelola data dengan efisien. Misalnya, dalam pengembangan aplikasi web, CRUD memungkinkan pengguna untuk membuat akun baru (Create), melihat profil mereka (Read), memperbarui informasi profil (Update), dan menghapus akun mereka (Delete).
Nah diartikel ini kita akan mencoba membuat aplikasi CRUD sederhana menggunakan bahasa pemrograman javascript.
Berikut adalah contoh operasi CRUD (Create, Read, Update, Delete) sederhana menggunakan JavaScript untuk memanipulasi data dalam variabel array :
<!DOCTYPE html>
<html>
<head>
<title>Contoh CRUD menggunakan JavaScript</title>
</head>
<style>
#tabel {
width: 50%;
border-collapse: collapse;
}
#tabelCetak {
width: 50%;
border-collapse: collapse;
text-align: center;
}
</style>
<body>
<h1>Tabel Data Mahasiswa</h1>
<table id="tabel" border="1">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Alamat</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="data-table">
<!-- Data akan ditampilkan di sini -->
</tbody>
</table>
<br>
<h2>Tambah Data Mahasiswa</h2>
<input type="text" id="nama" placeholder="Nama">
<input type="text" id="alamat" placeholder="Alamat">
<button onclick="tambahData()">Tambah Data</button>
<br><br>
<button onclick="cetakData()">Cetak Data</button>
<div id="table-container"></div>
<script >
let dataMahasiswa = [];
function tampilkanData() {
const tabel = document.getElementById('data-table');
tabel.innerHTML = '';
dataMahasiswa.forEach(mahasiswa => {
const row = tabel.insertRow();
row.innerHTML = `
<td>${mahasiswa.id}</td>
<td>${mahasiswa.nama}</td>
<td>${mahasiswa.alamat}</td>
<td>
<button onclick="editData(${mahasiswa.id})">Edit</button>
<button onclick="hapusData(${mahasiswa.id})">Hapus</button>
</td>
`;
});
}
function cetakData() {
const table = document.getElementById('table-container');
let tableHTML = '<br> <table id="tabelCetak" border="1">';
tableHTML += '<thead><tr><th>ID</th><th>Nama</th><th>Alamat</th></tr></thead><tbody>';
dataMahasiswa.forEach(mahasiswa => {
tableHTML += `<tr><td>${mahasiswa.id}</td><td>${mahasiswa.nama}</td><td>${mahasiswa.alamat}</td></tr>`;
});
tableHTML += '</tbody></table>';
table.innerHTML = tableHTML;
}
function tambahData() {
if (document.getElementById('nama').value=="" || document.getElementById('alamat').value=="") {
alert("Kolom nama dan alamat tidak boleh kosong");
} else {
const nama = document.getElementById('nama').value;
const alamat = document.getElementById('alamat').value;
const id = dataMahasiswa.length + 1;
const mahasiswaBaru = { id, nama, alamat };
dataMahasiswa.push(mahasiswaBaru);
document.getElementById('nama').value="";
document.getElementById('alamat').value="";
tampilkanData();
}
}
function editData(id) {
const mahasiswa = dataMahasiswa.find(m => m.id === id);
if (mahasiswa) {
const namaBaru = prompt('Masukkan nama baru:', mahasiswa.nama);
const alamatBaru = prompt('Masukkan alamat baru:', mahasiswa.alamat);
if (namaBaru !== null && alamatBaru !== null) {
mahasiswa.nama = namaBaru;
mahasiswa.alamat = alamatBaru;
tampilkanData();
}
}
}
function hapusData(id) {
dataMahasiswa = dataMahasiswa.filter(m => m.id !== id);
tampilkanData();
}
// Menampilkan data awal
tampilkanData();
</script>
</body>
</html>
Silahkan copy script diatas dan jalankan pada browser kalian, pahami fungsi dari script yang dibuat dalam penerapan operasi CRUD menggunakan javascript.
Berikut tampilan ketika aplikasi dijalankan
Demikian sedikit tutorial sederhana tentang penerapan CRUD menggunakan bahasa pemrograman javascript, semoga bermanfaat dan bisa dikembangkan kedalam aplikasi atau sistem yang kalian buat.
Ditutorial berikutnya kita akan bahas lagi tips dan trik tentang javascript dan bahasa pemrograman lainnya.
Terimakasih.
