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
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 :
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> :
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.
Terima kasih, selamat mencoba !

1 comments:

Minta link untuk phonegapnya

Reply

Post a Comment