1
Menggunakan Database pada Cordova
Agustus 2015
Tingkat: √Oleh : Feri Djuandi
Pemula Menengah MahirSelain digunakan untuk mengakses fitur yang ada di dalam sebuah perangkat mobile seperti
accelerometer, geolocation, kamera, contact dan sebagainya melalui plugin Cordova, salah satu fungsi
API Cordova yang sangat berguna saat membuat sebuah aplikasi adalah melakukan operasi dengan
database lokal di dalam perangkat tersebut. Hal-hal yang bisa dilakukan pada saat melakukan operasi
database adalah meliputi pembuatan database termasuk table-table di dalamnya, penambahan data ke
dalam table, menampilkan/mencari data, perubahan data dan penghapusan data. Database sangat
berguna misalnya saat Cordova digunakan untuk membuat sebuah aplikasi bisnis yang membutuhkan
tempat penyimpanan data secara lokal.
Plugin pada API Cordova yang digunakan untuk melakukan operasi database adalah
cordova-sqlite-storage
. Plugin storage ini memungkinkan aplikasi menjalankan perintah SQL yang umum seperti
CREATE TABLE, SELECT, INSERT, UPDATE dan DELETE berikut penanganan kesalahannya.
Sebelum memulai dengan pembuatan aplikasi ini, pastikan komputer kerja Anda telah dipersiapkan
dengan API Cordova dan software yang dibutuhkan lainnya. Untuk mempersiapkan lingkungan kerja
Cordova, silakan membaca artikel “Memulai Cordova” yang dibuat penulis sebelumnya.
Catatan:
Pada artikel ini platform yang digunakan hanya Android, sehingga semua penjelasan yang
diuraikan mengacu pada platform tersebut.
Kode program dari contoh aplikasi telah disertakan bersama artikel ini sehingga Anda bisa
menggunakannya sambil membaca penjelasan agar lebih mudah memahaminya.
Membuat projek baru
Untuk memberikan gambaran mengenai aplikasi contoh ini, berikut ini adalah penjelasan bagian-bagian
yang akan dibuat.
Fungsi
openDB,
yang harus dipanggil sebelum melakukan operasi database apapun. Fungsi ini
mempunyai dua fungsi:
1.
Membuat database jika database belum terbentuk.
2.
Membuat koneksi ke database sebelum menjalankan perintah SQL.
2
var db = window.openDatabase("mydatabase", "1.0", "My Database", 200000);
Pada pertama kali dijalankan perintah ini akan membuat database bernama
mydatabase
dengan
versi
1.0
dan dekskripsi "My Database". Database tersebut berukuran
200000 byte
.
Fungsi
initDB
, yang akan dipanggil ketika koneksi database berhasil dibuat. Perintah SQL yang
akan dijalankan adalah untuk membuat table
DEMO
jika ia belum terbentuk.
tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
Table DEMO ini terdiri dari dua buah field. Field pertama bernama
id
yang bertipe data numeric
dan bersifat unik (tidak boleh duplikat). Field kedua bernama data yang bertipe data string.
Fungsi
getRecordCountDB
, yang berfungsi untuk medapatkan jumlah record di dalam table
DEMO.
tx.executeSql('SELECT * FROM DEMO', [], recordCountSuccess, errorCB ); ...
totalRecordCount = results.rows.length;
Fungsi
cleanDB
, yang berfungsi untuk mengosongkan isi table DEMO/menghapus semua data.
tx.executeSql('DELETE FROM DEMO');
Fungsi
populateDB
,
yang berfungsi untuk mengisi data ke dalam table DEMO secara random.
...for(j=1; j <= i; j++) {
var k = totalRecordCount + j;
var sql = 'INSERT INTO DEMO (id, data) VALUES (' + k + ', "' + randomString() + '")';
tx.executeSql(sql); }
Fungsi
queryDB
, yang berfungsi untuk menampilkan isi table DEMO.
...tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); ...
var storageContent = "<ul data-role='listview' data-inset='true'>\r\n"; var len = results.rows.length;
for (var i=0; i<len; i++){
var item = "Row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data;
storageContent += '<li>' + item + '</li>\r\n'; }
storageContent += '</ul>\r\n'; $("#content").html(storageContent);
3
Fungsi-fungsi di atas adalah bagian-bagian utama dari aplikasi. Selain yang dijelaskan di atas masih
terdapat beberapa fungsi pendukung lainnya. Semua fungsi terdapat di file
index.js
dan
index.html
.
Berikut ini adalah langkah-langkah untuk membuat projek aplikasi tersebut:
1.
Buat sebuah folder kerja untuk projek Cordova. Pada contoh ini folder tersebut diletakkan pada
folder
..\Cordova\workshop
. Anda bebas menentukan nama dan lokasi folder tersebut.
Buka sebuah
command shell
dan masuk ke dalam folder kerja di atas. Pada contoh ini akan
dibuat sebuah projek bernama
storage
.
2.
Jalankan perintah berikut ini:
cordova create storage com.excercise.storage Storage
Setelah projek berhasil dibuat, file-file projek tersebut akan disimpan di dalam folder
..\Cordova\workshop\storage. Silakan menuju folder tersebut dan melihat folder-folder dan
file-file apa saja yang sudah terbentuk.
3.
Tambahkan dukungan untuk platform Android. Silakan masuk ke folder
..\Cordova\workshop\
storage
dan jalankan perintah:
cordova platforms add android
4.
Tambahkan plugin-plugin yang dibutuhkan. Silakan masuk ke folder
..\Cordova\workshop\storage
dan jalankan perintah:
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-console
cordova plugin add cordova-sqlite-storage
5.
Sesuaikan versi API Android yang terinstal pada komputer kerja dengan versi target yang akan
dibuat. Pada API Cordova yang digunakan oleh penulis, secara default target yang ditetapkan
adalah android-22. Namun karena pada komputer kerja penulis versi API Android yang terinstal
adalah 21 maka bagian ini harus diedit secara manual.
4
Buka file
project.properties
di dalam folder
..\workshop\storage\platforms\android
. Ubah
versi API pada bagian
target
dengan yang sesuai.
Buka file
AndroidManifest.xml
di dalam folder
..\workshop\storage\platforms\android
. Ubah
versi API pada bagian
android:targetSdkVersion
dengan yang sesuai.
Mempersiapkan jQuery
Langkah ini bertujuan untuk memperindah tampilan dan tidak berhubungan dengan fungsi inti dari
aplikasi yang sedang dibuat.
jQuery dibutuhkan untuk digunakan bersama-sama jQuery Mobile. Versi jQuery yang digunakan pada
contoh program ini adalah
jquery-1.11.3
. Dianjurkan untuk tidak menggunakan jQuery 2.x karena
terbatasnya versi browser yang didukung oleh versi tersebut.
1.
Silakan mengunduh jQuery dari situs beralamat:
https://jquery.com/download/
2.
Silakan menyalin file
jquery-1.11.3.js
ke dalam folder
..\storage\www\js
.
Mempersiapkan jQuery Mobile
Pada contoh ini framework jQuery Mobile akan digunakan untuk memperindah tampilan antar muka
(
User Interface= UI
). jQuery Mobile adalah UI framework yang sangat populer dan cukup mudah
digunakan. Versi jQuery Mobile yang digunakan pada contoh program ini adalah
jquery.mobile-1.4.5
,
namun demikian tidak ada batasan untuk menggunakan versi yang lebih baru.
1.
Silakan mengunduh jQuery Mobile dari situs beralamat:
https://jquerymobile.com/
2.
Silakan menyalin file
jquery.mobile-1.4.5.min.js
ke dalam folder
..\storage\www\js
.
3.
Silakan menyalin file
jquery.mobile-1.4.5.min.css
ke dalam folder
..\storage\www\css
.
Mengedit file index.js
Buka file
index.js
yang ada di dalam folder
..\storage\www\js.
Hapus semua skrip yang asli dan ganti
dengan skrip yang baru berikut ini.
var totalRecordCount = 0;
// Wait for Cordova to load //
document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready
//
5
getRecordCount();}
//Open & init the database function openDB() {
var db = window.openDatabase("mydatabase", "1.0", "My Database", 200000); db.transaction(initDB, errorCB);
return db; }
function initDB(tx) {
//tx.executeSql('DROP TABLE IF EXISTS DEMO');
tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'); }
//Clean the database function cleanStorage() {
var db = openDB();
db.transaction(cleanDB, errorCB, successCB );
getRecordCount(); //Update the "totalRecordCount" variable }
function cleanDB(tx) {
tx.executeSql('DELETE FROM DEMO'); }
//Random string generator function randomString() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < 10; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length)); return text;
}
//Populate items
function populateItems() { var db = openDB();
db.transaction(populateDB, errorCB, successCB); }
function populateDB(tx) {
getRecordCount(); //Update the "totalRecordCount" variable //alert("totalRecordCount=" + totalRecordCount);
var i = Math.floor((Math.random() * 10) + 1); for(j=1; j <= i; j++) {
var k = totalRecordCount + j; //alert("k=" + k);
var sql = 'INSERT INTO DEMO (id, data) VALUES (' + k + ', "' + randomString() + '")';
//alert("sql=" + sql); tx.executeSql(sql); }
}
//Get total record count function getRecordCount() { var db = openDB(); db.transaction(getRecordCountDB, errorCB); return totalRecordCount; } function getRecordCountDB(tx) {
tx.executeSql('SELECT * FROM DEMO', [], recordCountSuccess, errorCB ); }
function recordCountSuccess(tx, results) { totalRecordCount = results.rows.length; }
6
//function errorCB(tx, err) {
alert("Error processing SQL: "+err); }
// Transaction success callback //
function successCB() { alert("success!"); }
7
Mengedit file index.html
Buka file
index.html
yang ada di dalam folder
..\storage\www.
Hapus semua skrip HTML yang asli dan ganti dengan skrip yang baru berikut ini.
<!DOCTYPE html><html> <head>
<title>Storage Plugin</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--link rel="stylesheet" type="text/css" href="css/index.css"--> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> <script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script> <script>
$(document).bind( "pagebeforechange", function( e, data ) { if ( typeof data.toPage === "string" ) {
var u = $.mobile.path.parseUrl( data.toPage ); var pageId = u.hash.replace( /.*#/, "" ),
pageSelector = u.hash.replace( /\?.*$/, "" ); //alert(pageId); if(pageId=="display") { showData( ); } } }); function showData() { var db = openDB(); db.transaction(queryDB, errorCB ); } function queryDB(tx) {
tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); }
function querySuccess(tx, results) {
var storageContent = "<ul data-role='listview' data-inset='true'>\r\n"; var len = results.rows.length;
for (var i=0; i<len; i++){
var item = "Row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data; storageContent += '<li>' + item + '</li>\r\n';
}
storageContent += '</ul>\r\n';
$("#content").html(storageContent); //ajax to inject the listview
$("#content").find( ":jqmData(role=listview)" ).listview(); //render/refresh the listview html }
8
</script></head> <body>
<!--############# MAIN MENU ############# --> <div data-role="page" id="mainmenu">
<div data-role="header"> <h1>Storage Plugin</h1> </div>
<div data-role="main" class="ui-content"> <p>Please select an action:</p> <ul data-role="listview">
<li><a href="#clean">Clean storage</a></li> <li><a href="#insert">Populate new items</a></li>
<li><a href="#" onclick="alert(getRecordCount() ); return false;">Display item count</a></li> <li><a href="#display">Display storage</a></li>
</ul> </div> </div>
<!--############# CLEAN STORAGE ############# --> <div data-role="page" data-dialog="true" id="clean">
<div data-role="header"> <h1>Clean Storage</h1> </div>
<div data-role="main" class="ui-content">
<p>Are you sure want to remove all items in the storage?</p> <p align="center">
<a href="#" data-ajax="false" data-role="button" data-iconpos="left" data-inline="true" data-theme="b" onclick="cleanStorage();$.mobile.changePage('#mainmenu'); return false;">Yes, remove all</a></p>
</div> </div>
<!--############# INSERT ITEM ############# --> <div data-role="page" data-dialog="true" id="insert">
<div data-role="header"> <h1>Insert Items</h1> </div>
<div data-role="main" class="ui-content">
<p>Do you want to add some random data items into the storage?</p> <p align="center">
<a href="#" ajax="false" role="button" icon="plus" iconpos="left" inline="true" data-theme="b" onclick="populateItems();$.mobile.changePage('#mainmenu'); return false;">Yes, populate Items</a></p>
</div> </div>
<!--############# DISPLAY ############# --> <div data-role="page" id="display">
9
<div data-role="header"><h2>Display Storage</h2>
<a href="#mainmenu" data-icon="home" data-iconpos="notext">Home</a> </div>
<div data-role="main" class="ui-content"> <h3>Storage contents:</h3>
<div id="content"></div> </div>
</div>
<script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script>
</body> </html>
