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

Download Sources

Lihat Tutorial Android Lainnya disini

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 :

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

Download Sources

Lihat Tutorial Android Lainnya disini

Terima kasih, selamat mencoba !