Tutorial kali ini akan membahas mengenai pembuatan aplikasi CRUD (Create, Read, Update dan Delete). Aplikasi CRUD android ini akan menggunakan Web SQL untuk databasenya. Pada aplikasi yang akan kita buat, kita menggunakan framework UI bootstrap setelah pada beberapa tutorial sebelumnya menggunakan OnsenUI (agar lebih variatif saja). Bootstrap yang digunakan pada tutorial kali ini adalah Bootstrap v4.0.0-beta (anda dapat mengganti dengan versi lain).
Tutotial ini akan dibagi menjadi 2 part dimana part pertama akan membahas Web SQL dan bagaimana cara menggunakannya serta membuat tampilan. Sedangkan part kedua akan membahas pembuatan fungsi CRUD dari database yang telah dibuat.
Web SQL
Web SQL sendiri adalah API dari halaman web untuk menyimpan data dalam database yang dapat ditanyakan menggunakan varian/query SQL (seperti insert, update, delete, dll). Tentunya bagi yang sudah pernah membuat aplikasi desktop maupun web familiar dengan query-query dari SQL (misalnya MySQL). Layaknya SQL yang lainnya, Web SQL dapat melakukan proses pembuatan data master maupun transaksional.
Terus bagaimana kita menggunakan Web SQL ini? Web SQL sudah tertanam di dalam browser, jadi kita tidak perlu aplikasi lain lagi. Di bawah ini akan dijelaskan dalam melihat Web SQL melalui Browser.
Buka Browser kemudian masuk mode developer/inspect halaman (tekan F12). Perhatikan jendela bagian kanan yang ditandai kotak warna merah. Masuk ke menu Application, secara default biasanya belum muncul diatas secara langsung, jadi pilih dahulu tanda >>, baru pilih Application.
Setelah menu Application dipilih akan muncul daftar jenis/model penyimpanan. Kita disini menggunakan penyimpanan Web SQL. Pada contoh gambar di bawah ini, sudah terdapat beberapa data, dengan nama database “biodata” dan tabel “person”. Selain itu sudah ada 2 isi record data yang menunjukkan masing-masing field.
Selain itu kita dapat juga langsung menuliskan query pada tampilan yang saat ini dibuka tersebut. Untuk bisa menulis query, pilih databasenya terlebih dahulu. Setelah itu kita dapat menulis query pada kursor yang aktif di halaman tersebut. Di bawah ini merupakan gambar contoh menulis query secara langsung.
Kita dapat menginputkan query setelah database tercipta. Untuk menciptakan database kita perlu menggunakan function di javascript. Hal ini bisa kita praktekan sekalian setelah kita membuat tampilan aplikasi terlebih dahulu.
Membuat Tampilan Aplikasi
Seperti yang dijelaskan sebelumnya untuk tampilan kita menggunakan Bootstrap untuk framework UI-nya. Yang kita butuhkan hanya 2 file, yaitu bootstrap.css dan bootstrap.js, untuk file lain silakan bisa dimasukkan atau tidak (opsional). Silakan susun file seperti pada gambar di bawah ini ya.
Pada root aplikasi terdapat 2 folder (css dan js) dan 1 file index.html (silakan buat file index.html). Setelah semua ditata sedemikian rupa sekarang kita akan memulai membuat tampilan aplikasi. Silakan ketikkan kode berikut pada file index.html yang telah dibuat.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags dibutuhkan untuk membuat tampilan mobile -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Aplikasi CRUD dengan WebSql</title>
<!-- memanggil css dari bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<br/>
<h3 class="text-center">Aplikasi CRUD</h3>
<hr/>
<h4>Input Data</h4>
<div id="form_data">
<form>
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control" id="nama" placeholder="Input Nama">
</div>
<div class="form-group">
<label>Alamat</label>
<input type="text" class="form-control" id="alamat" placeholder="Input Alamat">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info" onclick="tambah_data();">Simpan</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</form>
</div>
<hr/>
<h4>Data Yang Telah Diinput</h4>
<div>
<table class="table">
<thead>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="list_data">
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- javascript untuk bootstrap -->
<script scr="js/bootstrap.min.js"></script>
<!-- main js untuk function-function CRUD -->
<script src="js/main.js"></script>
</body>
</html>
Pada file index.html tersebut fokus kita hanya membuat tampilan untuk input data dan menampilkan data melalui tabel. Baris 22-35 kita membuat form inputan untuk menginput isian data. Kemudian baris 40-51 merupakan pembuatan tabel untuk nantinya menampilkan data yang telah diinput. Jalankan file index.html tersebut melalui browser, kurang lebih tampilannya seperti pada gambar di bawah ini.
Membuat Database
Selanjutnya adalah membuat file main.js seperti yang tertera pada gambar sebelumnya (gambar susunan file). Tempatkan file main.js di dalam folder js, kemudian lengkapi kodenya menjadi seperti berikut.
//Cek compatibility browser dalam menangani websql
if (window.openDatabase) {
//Membuat database, parameter: 1. nama database, 2.versi db, 3. deskripsi 4. ukuran database (dalam bytes) 1024 x 1024 = 1MB
var mydb = openDatabase("biodata", "0.1", "biodata peserta workshop", 1024 * 1024);
//membuat tabel person dengan SQL untuk database menggunakan function transaction
mydb.transaction(function (t) {
t.executeSql("CREATE TABLE IF NOT EXISTS person (id INTEGER PRIMARY KEY ASC, nama TEXT, alamat TEXT)");
});
} else {
alert("WebSQL tidak didukung oleh browser ini!");
}
Untuk penjelasannya masing-masing baris terdapat pada komentar di source code di atas. Sekarang jalankan kembali kemudian masuk mode developer (tekan F12). Cek apakah database sudah muncul? jika belum berarti terdapat permasalahan (yang bermasalah silakan komentar di bawah).
Setelah database dan 1 tabel berhasil dibuat, silakan uji coba dengan memasukkan beberapa query SQL. Sebagai percobaan silakan kerjakan latihan berikut:
- Tampilan semua data di tabel person
- Masukkan 5 data dengan query insert
- Tampilan semua data di tabel person
- Hapus 2 data menggunakan query delete
- Tampilan semua data di tabel person
- Update 1 data untuk field nama, update 1 data untuk field alamat
- Tampilan data ttertentu dengan kondisi where pada field nama
Setelah selesai coba screenshoot dan masukkan komentar ya 🙂
Kurang lebihnya seperti itu untuk pembuatan database Web SQL beserta memanipulasi datanya. Part pertama selesasi, nantikan part berikutnya untuk membuat fungsi CRUD sesuai tampilan yang kita buat.
Jika ada pertanyaan atau permasalahan silakan komentar di bawah. Enjoy Learning and Happy Coding 🙂
