menggunakan database pada cordova - tobuku.com database pada cordova.pdf · membuat projek baru...

www.tobuku.com

1

Menggunakan Database pada Cordova

Agustus 2015 Tingkat: √

Oleh : Feri Djuandi Pemula Menengah Mahir

Selain 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.

Di dalam fungsi tersebut terdapat sebuah perintah dari plugin storage yang dijalankan adalah

http://www.tobuku.com/

www.tobuku.com

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);

$("#content").find( ":jqmData(role=listview)" ).listview();


www.tobuku.com

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.


www.tobuku.com

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

//

function onDeviceReady() {


www.tobuku.com

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;

}

// Transaction error callback


www.tobuku.com

6

//

function errorCB(tx, err) {

alert("Error processing SQL: "+err);

}

// Transaction success callback

//

function successCB() {

alert("success!");

}


www.tobuku.com

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" 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

}

www.tobuku.com

8

</script>

</head>

<body>



<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>



<div data-role="page" data-dialog="true" id="clean">


<h1>Clean Storage</h1>

</div>


<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>



<div data-role="page" data-dialog="true" id="insert">


<h1>Insert Items</h1>

</div>


<p>Do you want to add some random data items into the storage?</p>

<p align="center">

<a href="#" data-ajax="false" data-role="button" data-icon="plus" data-iconpos="left" data-inline="true" data-

theme="b" onclick="populateItems();$.mobile.changePage('#mainmenu'); return false;">Yes, populate Items</a></p>

</div>

</div>



<div data-role="page" id="display">

www.tobuku.com

9


<h2>Display Storage</h2>

<a href="#mainmenu" data-icon="home" data-iconpos="notext">Home</a>

</div>


<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>


www.tobuku.com

10

Mempersiapkan file-file gambar File-file gambar ada di dalam folder ..\storage\www\img.

Mempersiapkan file icon Sebuah icon baru telah dipersiapkan untuk menggantikan icon standar dari aplikasi Cordova.

1. Siapkan sebuah gambar dengan format PNG dan berukuran 96 x 96 pixel.

2. Pada folder projek aplikasi Cordova, silakan masuk ke sub-folder ..\platforms\android\res. Di

situ akan dijumpai beberapa folder drawable dan drawable-xxx seperti pada gambar berikut

ini.

3. Hapus semua folder drawable-xxx dan tinggalkan sebuah folder bernama drawable. Dengan

dihapusnya folder-folder drawable-xxx maka perangkat mobile selalu akan mencari gambar icon

di dalam folder drawable.

4. Di dalam folder drawable terdapat file bernama icon.png. File inilah yang dapat diganti dengan

gambar lain supaya icon aplikasi berubah sesuai dengan gambar yang diinginkan. Silakan

mengambil gambar icon yang baru dan salin ke dalam folder ini dengan nama file yang sama

(hapus file icon.png yang asli). Pastikan resolusinya sama dengan gambar yang asli.


www.tobuku.com

11

Menjalankan aplikasi 1. Sambungkan kabel data dari komputer ke perangkat Android. Pastikan perangkat Android

terdeteksi oleh komputer.

2. Masuk ke dalam folder ..\Cordova\workshop\storage dan jalankan perintah:

cordova run android

Tampilan aplikasi saat dijalankan diperlihatkan pada gambar di bawah ini.

Fungsi-fungsi yang tersedia

Menghapus isi table

Mengisi table

Menampilkan jumlah record


www.tobuku.com

12

Menampilkan isi table

Referensi:

http://cordova.apache.org/docs/en/2.4.0/cordova_storage_storage.md.html

https://github.com/litehelpers/Cordova-sqlite-storage

Proverbs 1:7. The fear of the LORD is the beginning of knowledge: but fools despise wisdom and

instruction.


menggunakan database pada cordova - tobuku.com database pada cordova.pdf · membuat projek baru...

Documents