Membuat crud dengan javascript – Pada Artikel kali ini, kita akan membahas bagaimana membuat CRUD sederhana dengan menggunakan JavaScript. Saat sekarang ini sudah banyak kita lihat berbagai macam dan jenis Framework dari JavaScript ini, tergantung dari fungsi dan kegunaannya. Namun kali ini kita akan mencoba membuat CRUD tanpa Framework, Murni menggunakan JavaScript.
Untuk membuat CRUD biasanya kita akan membutuhkan data. berikut ide dan langkah pembuatannya :
Kita akan Store data JSON, ke tabel dinamis yang akan kita buat menggunakan HTML.
Tiap baris akan kita berikan aksi Tombol Delete, Update dan Add.
Tiap tiap tombol akan tampil secara dinamis.
Contoh Kasus : Membuat Crud Data Buku.
pada aplikasi ini kita akan membuat penambahan data buku, hapus data buku, dan ubah data buku hanya mengggunakan JavaScript saja
var activeRow = oButton.parentNode.parentNode.rowIndex;
this.myBooks.splice((activeRow – 1), 1); // DELETE THE ACTIVE ROW.
this.createTable(); // REFRESH THE TABLE.
};
// SAVE DATA.
this.Save = function (oButton) {
var activeRow = oButton.parentNode.parentNode.rowIndex;
var tab = document.getElementById(‘booksTable’).rows[activeRow];
// UPDATE myBooks ARRAY WITH VALUES.
for (i = 1; i < this.col.length; i++) {
var td = tab.getElementsByTagName(“td”)[i];
if (td.childNodes[0].getAttribute(‘type’) == ‘text’ || td.childNodes[0].tagName == ‘SELECT’) { // CHECK IF ELEMENT IS A TEXTBOX OR SELECT.
this.myBooks[(activeRow – 1)][this.col[i]] = td.childNodes[0].value; // SAVE THE VALUE.
}
}
this.createTable(); // REFRESH THE TABLE.
}
// CREATE NEW.
this.CreateNew = function (oButton) {
var activeRow = oButton.parentNode.parentNode.rowIndex;
var tab = document.getElementById(‘booksTable’).rows[activeRow];
var obj = {};
// ADD NEW VALUE TO myBooks ARRAY.
for (i = 1; i < this.col.length; i++) {
var td = tab.getElementsByTagName(“td”)[i];
if (td.childNodes[0].getAttribute(‘type’) == ‘text’ || td.childNodes[0].tagName == ‘SELECT’) { // CHECK IF ELEMENT IS A TEXTBOX OR SELECT.
var txtVal = td.childNodes[0].value;
if (txtVal != ”) {
obj[this.col[i]] = txtVal.trim();
}
else {
obj = ”;
alert(‘all fields are compulsory’);
break;
}
}
}
obj[this.col[0]] = this.myBooks.length + 1; // NEW ID.
if (Object.keys(obj).length > 0) { // CHECK IF OBJECT IS NOT EMPTY.
this.myBooks.push(obj); // PUSH (ADD) DATA TO THE JSON ARRAY.
this.createTable(); // REFRESH THE TABLE.
}
}
// ****** OPERATIONS END.
}
crudApp.createTable();
</script>
</html>
Perhatikan Script diatas, kita memiliki Global Function crudApp(), fungsinya adalah untuk menampilkan aplikasi CRUD javascript kita. pada Aplikasi ini kita menggunakan JSON yang memiliki Array object pada myBooks. :
dengan menggunakan script diatas kita sudah bisa mengaplikasikan CRUD dengan menggunakan JavaScript tanpa menggunakan Framework sama sekali. Kali ini kita mencoba store data yang kita inputkan menggunakan JSON. lain kali akan kita coba bahas bagaimana langsung Store data yang kita punya ke dalam database.