Aplikasi Android Phonegap Dengan Database SQLite

Written by: Muhammad K Huda
July 5, 2013

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.

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 !

30 Comments

sriyono suke
July 5, 2013
puyeng aku,
#wis tuwo 😀
christiawan
October 4, 2013
kog pas di taruh di eclipse ada tanda seru warna merah ya ?
kenapa ?
Herzianda
November 21, 2013
Bisa gak mas database nya di hubungkan dengan Node.js??
- Muhammad K Huda
  November 27, 2013
  Bisa, tapi utk server spesifikasi tdk bisa menggunakan shared hosting, minimal VPS.
  - aden
    May 19, 2014
    Maaf mas khuda ,, kalo membuat database dan user login dengan phonegap gimana ya?
    soalnya aplikasi sekarang kan kebanyakan harus login dulu ?? terima kasih sebelumnya
    - Muhammad K Huda
      May 22, 2014
      implementasinya cukup rumit, hampir sama dengan get push. tapi nanti jika ada waktu saya buatkan tutorialnya.
M. ridho
December 16, 2013
Mas, saya sudah berhasil ikutin tutor yang diatas, cuman saya mau tanya letak file databasenya sqlite.db dimana ya ? saya cari ga ketemu2 ???
- Muhammad K Huda
  December 24, 2013
  bisa mas, namun utk melihat file db bisa di create saat aplikasi berjalan lalu disimpan ke mmc,
Heru Purwito
December 18, 2013
thanks bro.. dicoba dulu
Reza
January 1, 2014
gan mau nanya kalo mau ngeluarin hasil yang udah di database gimana caranya ya ? makasih
Kang Ahid
January 31, 2014
bisa ga mas, membuat aplikasi ques, namun datanya di taruh di sql (menggabungkan JQuizMe dgn Sql)?
Marshel
April 8, 2014
terima kasih mas sangat membantu..
jadi sqlite di android juga bisa dipake di html5 yg utuk android ya..
Yogi
April 21, 2014
mas, klu scriptnya seperti yg dicontohkan, apakah setiap menjalankan aplikasi bakalan create database terus ?
- Muhammad K Huda
  April 21, 2014
  nggak mas..
  - Yogi
    April 21, 2014
    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
  - Yogi
    April 21, 2014
    oh iya mas, saya paham..
    
    makasih info dan tutorialnya mas 🙂
    - Muhammad K Huda
      April 21, 2014
      coba diutak-atik pada line tersebut, atau mungkin dihapus mas. 🙂
dani indra
May 29, 2014
mas buat tutor pencarian pake database di android donk
- Muhammad K Huda
  May 31, 2014
  Oke mas indra, lagi proses..
kinoy
June 16, 2014
om.. kalo phonegap itu bisa buat website kita sendiri tidak yaah..! caranya gimna kalau bisa.. mungkin bisa di share … makasih yah!
wiri
June 20, 2014
kenapa waktu dipasang ada tanda seru merah?
mohon solusinya.
- Muhammad K Huda
  June 20, 2014
  Tanda seru merah dimana mas ?
  - wiri
    June 20, 2014
    disamping nama projectnya
    - Muhammad K Huda
      June 21, 2014
      Di panel bawah error tulisannya apa mas ?
dendi
July 24, 2014
gan, klo koneksinya dengan mysql gimana yah gan ? atau mungkin koneksi dengan database di hosting ?
- Muhammad K Huda
  July 27, 2014
  jika di hosting, bisa dicoba tutorial saya yang ini http://mkhuda.com/html5/integrasi-json-php-dan-jquery-untuk-aplikasi-mobile/
aswar wahyu
November 16, 2014
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.
- Muhammad K Huda
  January 3, 2015
  Kelebihan phonegap ada di development, tapi kurang bagus di performa. Tinggal mas aswar lebih familier dengan html atau java ?
suriyadi
November 28, 2014
Bagus tutorialnya…
Itu kan buat databasenya setiap aplikasi dijalankan yaaa
jadi, gmana kalau saya sudah punya dtabasenya?
- Muhammad K Huda
  January 3, 2015
  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.