Tutorial ini merupakan lanjutan dari tutorial membuat aplikasi CRUD Android part pertama. Pada bagian ini akan fokus membuat fitur CRUD sederhana sesuai dengan database dan tabel serta tampilan yang telah kita buat sebelumnya. Jika anda belum membuat silakan ke part pertama terlebih dahulu melalui link di atas tersebut. Tidak perlu lama-lama langsung saja mulai yok ngodingnya.
Fitur Insert Data & Menampilkan Data
Pertama kita membuat fungsi untuk memasukkan data, setelah itu baru membuat fungsi untuk menampilkan data yang telah kita inputkan. Buka kembali file main.js yang di part pertama telah kita buat. Setelah itu tambahkan kode berikut di baris berikutnya.
//function to menginput data ke database
function tambah_data() {
//cek apakah objek mydb sudah dibuat
if (mydb) {
//mendapatkan nilai dari form
var input_nama = document.getElementById("nama").value;
var input_alamat = document.getElementById("alamat").value;
//cek apakah nilai sudah diinput di form
if (input_nama !== "" && input_alamat !== "") {
//Insert data yang diisi pada form, tanda ? hanya sebagai placeholder, akan digantikan dengan data array pada parameter kedua
mydb.transaction(function (t) {
t.executeSql("INSERT INTO person (nama, alamat) VALUES (?, ?)", [input_nama, input_alamat]);
});
} else {
alert("nama dan alamat harus diisi!");
}
} else {
alert("database tidak ditemukan, browser tidak support web sql!");
}
}
Penjelasan Insert Data
Baris kode di atas atau tepatnya pembuatan function tambah_data() merupakan function untuk membuat fungsi input data. Function ini dipanggil ketika tombol “Simpan” pada index.html diklik. Kode tersebut dapat ditemukan di baris kode no.32 kurang lebih kodenya seperti berikut <button type=”submit” class=”btn btn-info” onclick=”tambah_data();”>Simpan</button> .
Perhatikan validasi if else pada main.js pada kode di atas. Validasi tersebut digunakan untuk mengecek apakah objek database telah ada. Disini objek database adalah mydb yang sebelumnya telah dibuat. Jika belum ada maka akan muncul alert database tidak ditemukan. Selanjutnya baris 6 dan 7 adalah inisialisasi variabel untuk data nama dan alamat yang diinputkan melalui form input. Baris kode selanjutnya terdapat validasi if else untuk mengecek apakah sudah ada nilai yang diinputkan atau belum. Kode mydb.transaction(function (t) { t.executeSql(………); }); merupakan sebuah function untuk melakukan eksekusi query sql. Query sql kita tulis di bagian executeSql(…) yang sebenarnya memiliki 4 parameter, dimana parameter pertama bersifat wajib dan parameter selanjutnya bersifat opsional. Parameter pertama digunakan untuk menulis query SQL, parameter kedua untuk argument yang berisi object array. Kemudian parameter ketiga dan keempat merupakan Callback Function setelah eksekusi query yang dijalankan. Lebih detail untuk penjelasan executeSql(…) dapat dilihat pada link berikut ini.
Bagian yang perlu diperhatikan selanjutnya adalah kode t.executeSql(“INSERT INTO person (nama, alamat) VALUES (?, ?)”, [input_nama, input_alamat]); . Di kode tersebut terdapat 2 parameter, parameter pertama query sql dan terdapat tanda tanya (?) yang merupakan sebuah placeholder data. Placeholder ini akan digantikan oleh data di parameter yang kedua secara berurutan. Parameter kedua berisi data dari inputan yang diisikan oleh user yang nantinya akan menggantikan placeholder di parameter pertama. Jalankan aplikasi, kemudian cek pada bagian menu application di mode developer (seperti pada part pertama), dan cek apakah data sudah masuk ke dalam tabel person? Jika ya berarti berhasil dan lanjut tahap selanjutnya.
Tahap berikutnya membuat fungsi untuk menampilkan data pada tabel yang telah dibuat pada tampilan aplikasi. Tambahkan kode di bawah function tambah_data() yang sudah dibuat sebelumnya.
//function untuk mendapatkan data dari database
function show_data() {
//cek apakah objek mydb sudah dibuat
if (mydb) {
//mendapatkan semua data dari database, set update_list sebagai callback function di dalam executeSql
mydb.transaction(function (t) {
t.executeSql("SELECT * FROM person", [], update_list);
});
} else {
alert("database tidak ditemukan, browser tidak support web sql!");
}
}
//function untuk menampilkan data ke tabel di index.html
function update_list(transaction, results) {
//mendapatkan nilai dari komponen list_data
var listholder = document.getElementById("list_data");
//clear list di tabel
listholder.innerHTML = "";
var i;
//perulangan untuk menampilkan hasil
for (i = 0; i < results.rows.length; i++) {
//mendapatkan data pada row ke i
var row = results.rows.item(i);
listholder.innerHTML +=
`<tr>
<td>${row.nama}</td>
<td>${row.alamat}</td>
<td><a href='javascript:void(0);' onclick='edit(${row.id});'>Update</a> |
<a href='javascript:void(0);' onclick='hapus_data(${row.id});'>Hapus</a> </td>
</tr>`;
}
}
// pemanggilan function untuk menampilkan data dari database
show_data();
Penjelasan Menampilkan Data
Pada kode di atas terdapat 2 function dan pemanggilan function yang dibuat. Function show_data() adalah function yang digunakan untuk menjalankan query untuk mengambil data dari database. Sedangkan function update_list(transaction, results) merupakan function untuk menampilkan data ke tampilan di tabel setelah data diambil dari database.
Function show_data() kurang lebih sama seperti function tambah_data() dimana terdapat validasi if else. Kemudian di dalamnya terdapat function transaction dari objek mydb. Yang membedakan adalah pada isi parameter executeSql(“SELECT * FROM person”, [], update_list); yang terdapat 3 parameter. Parameter pertama untuk query mendapatkan semua data dari tabel person, kemudian parameter kedua adalah argument dan disini tidak terdapat isi karena memang tidak dibutuhkan. Yang perlu diperhatikan adalah parameter ketiga, yaitu pemanggilan callback function update_list yang merupakan function untuk menampilkan data.
Function update_list(transaction, results) merupakan function yang dipanggil dari callback function yang dijalankan di dalam function show_data(). variabel listholder = document.getElementById(“list_data”); digunakan untuk mendapatkan id dari tabel dimana data akan ditampilkan. Kemudian kode listholder.innerHTML = “”; digunakan untuk menghapus data terlebih dahulu sebelum update data dijalankan (jika tidak dikosongkan, di tampilan data akan rangkap. Selanjutnya kode for(…){…} yang merupakan proses pengulangan untuk menampilkan seluruh data yang ada hasil dari query yang telah dijalankan. Terdapat kode var row = results.rows.item(i); yang berfungsi untuk membuat variabel tiap baris dari data yang akan ditampilkan. Kemudian proses menampilkan data melalui kode row.nama dan row.alamat. Dan kolom paling kanan membuat aksi update dan hapus data yang di dalamnya menjalankan function untuk masing-masing aksi. Jalankan kembali aplikasi, kurang lebih hasilnya seperti gambar di bawah ini.
Fitur Delete dan Update Data
Setelah selesai membuat fungsi input data dan menampilkan ke tabel, selanjutnya adalah membuat fitur pelengkap CRUD, yaitu delete dan update. Kita akan membuat fungsi hapus(delete) terlebih dahulu. Tambahkan kode berikut di bawah kode terakhir yang kita buat.
//function untuk menghapus data dari database, di dalam parameter terdapat id row dari data yang akan dihapus
function hapus_data(id) {
//cek apakah objek mydb sudah dibuat
if (mydb) {
//menghapus data dari database berdasarkan parameter, set show_data sebagai callback function di dalam executeSql
mydb.transaction(function (t) {
t.executeSql("DELETE FROM person WHERE id=?", [id], show_data);
});
} else {
alert("database tidak ditemukan, browser tidak support web sql!");
}
}
Penjelasan Hapus Data
Pada pembuatan function diatas untuk isinya kurang lebih sama dengan function sebelumnya. Perbedaannya terdapat pada bagian function executeSql(…). Query berisi cara mengahapus data berdasarkan parameter id dari function hapus_data(id). Kemudian setelah mengeksekusi query akan menjalankan callback function show_data() yang akan meng-update data pada tampilan di tabel. Coba jalan aplikasi kembali, harusnya aksi hapus sudah berfungsi.
Bagian CRUD terakhir yang akan dibuat adalah update/edit data yang telah ada di database. Langsung saja tambahkan kode berikut ini di bawah kode yang telah ditulis sebelumnya.
// function ambil data dari tabel dan memasukkan ke data ke form yg akan diedit
function edit(id){
//cek apakah objek mydb sudah dibuat
if (mydb) {
mydb.transaction(function (t) {
//mendapatkan nilai dari komponen list_data
var formholder = document.getElementById("form_data");
//clear list di tabel
formholder.innerHTML = "";
// mengambil data berdasarkan id dan menampilkannya
t.executeSql("SELECT * FROM person where id=?", [id], function (tx, results){
formholder.innerHTML =
`<form>
<input type="hidden" id="id_edit" value="${id}">
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control" id="nama_edit" value="${results.rows.item(0).nama}">
</div>
<div class="form-group">
<label>Alamat</label>
<input type="text" class="form-control" id="alamat_edit" value="${results.rows.item(0).alamat}">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info" onclick="update_data();">Update</button>
<button type="submit" class="btn btn-default" onclick="location.reload();">Batal</button>
</div>
</form>`;
});
});
} else {
alert("database tidak ditemukan, browser tidak support web sql!");
}
}
//function to mengupdate data ke database
function update_data() {
//cek apakah objek mydb sudah dibuat
if (mydb) {
//mendapatkan nilai dari form yang akan diedit
var edit_id = document.getElementById("id_edit").value;
var edit_nama = document.getElementById("nama_edit").value;
var edit_alamat = document.getElementById("alamat_edit").value;
//cek apakah nilai sudah diinput/diedit di form
if (edit_nama !== "" && edit_alamat !== "") {
//update data yang diisi pada form, tanda ? hanya sebagai placeholder, akan digantikan dengan data array pada parameter kedua
mydb.transaction(function (t) {
t.executeSql("UPDATE person SET nama=?, alamat=? WHERE id=?", [edit_nama, edit_alamat, edit_id]);
});
} else {
alert("nama dan alamat harus diisi!");
}
} else {
alert("database tidak ditemukan, browser tidak support web sql!");
}
}
Penjelasan Update Data
Pada kode diatas terdapat dua function, edit(id) dan update_data(). Function edit(id) sendiri berfungsi untuk mengaktifkan dan mengisi nilai pada textfield di form yang akan diedit value/nilainya sesuai dengan data yang dipilih. Sedangkan function update_data() berfungsi untuk mengubah nilai di database sesuai dengan data baru yang telah diinputkan.
Function edit(id) sendiri penggunaannya hampir mirip dengan function update_list(transaction, results) pada proses menampilkan data ke tabel. Bedanya jika function update_list(transaction, results) data didapatkan hasil callback function dari function pemanggilnya. Sedangkan function edit(id) data langsung didapatkan melalui eksekusi function executeSql(…) di dalam function edit(id) itu sendiri. Pada function edit tidak terdapat proses pengulangan karena data yang didapatkan spesifik sesuai id-nya. Setelah data didapatkan dari eksekusi query, kemudian menjalankan callback function secara langsung (disini menjalankan anonymous function) untuk menampilkan data yang akan diedit pada form. Kode formholder.innerHTML = …. merupakan proses menampilkan data yang didapatkan ke form.
Kemudian function update_data()akan dijalankan ketika tombol update (tombol ini terdapat pada kode di dalam function edit(id) di kode sebelumnya). Function ini mirip seperti function tambah_data(), perbedaanya di bagian isi query-nya saja. Jadi tidak perlu dijelaskan lagi ya. Coba jalankan kembali aplikasi, dan seharusnya sudah berfungsi seluruh fitur CRUD-nya. Jika ada masalah silakan tanyakan pada kolom komentar.
Build Aplikasi
Seperti pada aplikasi-aplikasi yang telah dibuat sebelumnya, tahap terakhir adalah tahap build aplikasi melalui PhoneGap. Silakan build aplikasi sendiri. Jika anda belum tahu silakan pelajari link Berkenalan dengan PhoneGap Build dan Aplikasi Android “Hello World” dengan PhoneGap.
Selesai juga untuk tutorial kali ini. Semoga dapat bermanfaat materi kali ini. Tunggu update tutorial di materi yang lainnya ya. Happy Coding ^_^
