Aplikasi Android Phonegap Dengan Database SQLite

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

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)

1Dengan 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)

2Setelah 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 :

Folder JQM

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.

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

4Oke, 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 !

 
Muhammad K Huda

Muhammad K Huda

A non exhausted blogger person within fullstack engineer (spicy food), open source religion, self-taught driver and maybe you know or don't like it. Simply says, Hello from Me!

 

30 thoughts on “Aplikasi Android Phonegap Dengan Database SQLite

      1. Maaf mas khuda ,, kalo membuat database dan user login dengan phonegap gimana ya?
        soalnya aplikasi sekarang kan kebanyakan harus login dulu ?? terima kasih sebelumnya

  1. Mas, saya sudah berhasil ikutin tutor yang diatas, cuman saya mau tanya letak file databasenya sqlite.db dimana ya ? saya cari ga ketemu2 ???

  2. terima kasih mas sangat membantu..
    jadi sqlite di android juga bisa dipake di html5 yg utuk android ya..

  3. mas, klu scriptnya seperti yg dicontohkan, apakah setiap menjalankan aplikasi bakalan create database terus ?

      1. klu tabelnya mas ?
        di contoh spt ini “tx.executeSql(‘DROP TABLE IF EXISTS SQLITE’);”
        klu aplikasi dijalankan bakalan drop table terus setiap dijalankan ?
        saya belum paham pada line tsb.

        terimakasih banyak atas responnya mas

  4. om.. kalo phonegap itu bisa buat website kita sendiri tidak yaah..! caranya gimna kalau bisa.. mungkin bisa di share … makasih yah!

  5. terima kasih sebelumnya atas tutorialnya yang sangat berharga.
    begini mas, saya lagi menggarap skripsi Sistem Akademik Berbasis Android.
    Menurut mas, lebih mudahnya pake phonegap atau bagaimana ?
    mohon pencerahannya mas.

  6. Bagus tutorialnya…
    Itu kan buat databasenya setiap aplikasi dijalankan yaaa
    jadi, gmana kalau saya sudah punya dtabasenya?

    1. sqlite bisa dimanage melalui data yang diambil dari external misalnya web service. Tapi memang harus ada penyesuaian kode agar sqlite tidak terus menerus melakukan create database.

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaptcha * Time limit is exhausted. Please reload CAPTCHA.