Untuk membuat aplikasi Android berbasis HTML5 menggunakan
Phonegap
yang berisi konten-konten informasi, alangkah baiknya kita menggunakan
engine database SQLite. Meskipun kita bisa menuliskan secara langsung
data / teks / informasi secara inline, tapi akan lebih terstruktur jika
menggunakan sebuah database.
Phonegap and Sqlite
Berikut adalah beberapa keuntungannya :
- Data lebih terstruktur
- Kode lebih ringkas dibanding menulis informasi langsung ke dalam syntax HTML
- Data bisa dipakai ulang
- Informasi dapat diupdate dengan mudah
Tutorial kali ini, penulis akan membuat sebuah aplikasi sederhana
yang memanfaatkan database SQLite. Aplikasi ini merupakan contoh
pemanfaatan SQLite di Phonegap yang akan kita query informasi di
dalamnya menggunakan Jquery Mobile. Kita tahu Jquery Mobile merupakan
library yang dapat dimanfaatkan untuk memanipulasi tampilan aplikasi
mobile berbasis web.
Berikut adalah beberapa library yang akan kita embed ke dalam aplikasi ini :
- Jquery Mobile versi 1.3.1 (atau terbaru)
- Cordova.js (Phonegap)
Dengan
memanfaatkan MDS Applaud kita akan dapat membuat project dengan cukup
ringkas dan mudah. Silahkan ikuti tutorial cara instalasi dan pemasangan
MDS Applaud di Eclipse jika pembaca belum mengetahui cara instalasinya.
Plugin ini sangat mempermudah kita membuat project berbasis Phonegap.
Berikut adalah informasi project aplikasi kita kali ini:
- Nama Aplikasi : Phonegap with SQLite
- Target / Build Target : Android 2.1 (minimal)
- Package Name : com.mkhuda.phonegapsqlite (opsional/bisa dirubah)
- Konfigurasi : Minimal Phonegap Project
- Versi : Phonegap 1.9.0 (Rekomendasi MDS)
Setelah project berhasil dibuat, silahkan edit
AndroidManifest.xml dengan menghapus sintaks
xLargeScreen agar kesalahan pada kode hilang dan aplikasi dapat berjalan. Kemudian upload file library yang dibutuhkan kedalam folder
assets/www/[folder_anda] yang bisa Anda buat, semisal saya membuat folder bernama JQM. Lihat gambar berikut :
Pada gambar di atas, bisa Anda lihat saya telah menempatkan seluruh
aset library Jquery Mobile yang terdiri dari file javascript dan css.
Selain itu saya juga menaruh library Jquery 1.8.3 ke dalam folder
tersebut untuk memudahkan dan menstrukturkan library yang ada.
Kemudian
kita berlanjut ke koding utama pemrograman Sqlite dengan menaruhnya ke
dalam file index.html. Setelah semua file library Anda include-kan ke
dalam index.html, selanjutnya Anda bisa membuat script sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<script type="text/javascript" charset="utf-8">
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
// fungsi untuk membuat databse baru bernama Database Sqlite
function onDeviceReady() {
var db = window.openDatabase("Database", "1.0", "Database Sqlite", 200000);
db.transaction(populateDB, errorCB, successCB);
}
// Membuat tabel ke dalam database yang berisi id dan data
function populateDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS SQLITE');
tx.executeSql('CREATE TABLE IF NOT EXISTS SQLITE (id unique, data)');
tx.executeSql('INSERT INTO SQLITE (id, data) VALUES (1, "Halaman Pertama")');
tx.executeSql('INSERT INTO SQLITE (id, data) VALUES (2, "Halaman Kedua")');
}
// Callback jika terjadi kesalahan pada database
function errorCB(err) {
alert("Error processing SQL: "+err);
}
// Callback atau fungsi untuk membuka database yang tadi telah kita buat
function successCB() {
$(document).ready(function() {
db = window.openDatabase("Database", "1.0", "Database Sqlite", 200000);
db.transaction(queryDB, errorCB);
function queryDB(trans) {
console.log("QUery DB");
trans.executeSql('SELECT * FROM SQLITE', [], querySuccess);
}
// Melakukan query data ke dalam html yang telah kita manipulasi dengan Jquery Mobile
function querySuccess(trans, results) {
console.log("Results DB");
var len = results.rows.length;
var s = '';
for (var i=0; i<len; i++){
$("#list").append("<li><a href='#"+results.rows.item(i).id+"' data-transition='none' ><h3>"+results.rows.item(i).id+"</h3><p>"+results.rows.item(i).data+"</p></a></li>");
$("body").append("<div data-role='page' id='"+results.rows.item(i).id+"'><div
data-role='header' data-position='fixed'
data-theme='b'><h1>Page</h1><a data-icon='arrow-l'
data-corners='false' href='#example-list'
data-transition='none'>Kembali</a></div><center><a
href='#' data-corners='false'
data-role='button'>Share</a></center></div>");
}
$("#list").listview();
}
});
}
</script>
|
Pada kode di atas, saya membuat 5 fungsi utama yang terangkum dalam fungsi init(), dimana fungsi-fungsi tersebuat adalah :
- onDeviceReady(); membuat database baru
- populateDB(); memasukkan tabel data ke dalam database yang telah dibuat
- errorCB(); notifikasi jika terjadi error pada eksekusi database
- successCB(); Melakukan select database jika eksekusi database berhasil
- querySuccess(); melakukan query database ke dalam bentuk list jquery mobile
Oke,
fungsi script utama untuk melakukan query database sqlite telah kita
buat. Selanjutnya kita akan membuat script html di dalam tag
<body></body> dimana class dan definisinya merunut kepada
dokumentasi Jquery Mobile. Silahkan ketik kode ini di dalam tag
<body></body> :
|
|
<body onload="init();" id="stage" class="theme">
<div id="example-list" data-role="page" data-theme="b" data-content-theme="a">
<div data-role="header" id="headerku" data-theme="a">
<h3>Phonegap SQLite</h3>
</div>
<div id="kontenku">
<ul id="list" data-inset="false" data-filter="true" data-theme="d" data-divider-theme="d" data-icon="false" data-filter-placeholder="Cari data" data-global-nav="demos" class="jqm-list"></ul>
</div>
</div>
</body>
|
Silahkan dicoba dijalankan ke android simulator atau device. Semoga
berhasil. Saya juga telah menyertakan source code tutorial ini yang
dapat Anda gunakan dan implementasikan untuk belajar maupun proyek
sebenarnya.
Terima kasih, selamat mencoba !
1 comments:
Minta link untuk phonegapnya
ReplyPost a Comment