Melakukan integrasi JSON, PHP dan Jquery memang sebuah tantangan bagi para developer mobile terutama Phonegap. Selain menguras pikiran, integrasi ini juga membutuhkan pengujian secara berkala untuk masalah delivery data dari server ke aplikasi. Dalam kasus yang sering penulis hadapi, saya dituntut untuk melakukan parsing database ke JSON dari server online agar data JSON tersebut ditangkap aplikasi mobile menggunakan Jquery.
Teori Alur Data
Teori memang mudah, tapi kembali lagi, prakteknya membutuhkan cukup waktu untuk menyelesaikannya. Tapi syukurlah, sekarang penulis sudah menemukan kunci untuk melakukan representasi data JSON ke dalam Jquery. Ibaratnya kita membuat aplikasi mobile yang data kontennya berasal dari database server pribadi / hosting, atau istilahnya data tersebut kita simpan di database MySql online. Database tersebut awalnya akan kita parsing terlebih dahulu dengan syntax PHP, diubah ke bentuk JSON.
Nah, setelah berhasil melakukan convert JSON menggunakan PHP. Kemudian kita akan menangkap data-data JSON tersebut menggunakan aplikasi mobile. Tentunya pada aplikasi tersebut, sudah kita sisipi syntax parsing menggunakan Jquery dan Ajax. Ini lah bagian yang paling krusial. Belum lagi jika terkendala dimasalah network server yang sedang problem, ngadat / over bandwith misalnya. -__-”
Mari lupakan masalah problem tersebut. Misalnya kita memiliki database nama cewek seperti di bawah ini. Data ini sudah kita simpan di MySql server hosting kita. Berikut adalah datanya :
database cewek
Dari database di atas, kita bisa memparsingnya ke bentuk JSON dengan PHP. Beri nama file ini dengan parsing.php, dan taruh di server kita agar bisa diakses melalui browser. Lets write this code ! 😀
Ada yang aneh dengan kode di atas kan? Karena di dalam kode tersebut kita diharuskan memberi penamaan field namacewek dengan nama baru, misal seperti kasus di atas saya ganti menjadi namaceweknya. Karena memang demikian persyaratan untuk memparsing ke bentuk JSON.
And then, kita sudah punya data JSON di awan nih ! Mari kita parsing lagi dalam bentuk yang memungkinkan untuk dibaca manusia. Untuk memparsingnya kita hanya memerlukan Jquery dan tentunya sudah kita sisipkan ke dalam file index.html yang akan kita buat di bawah ini :
Baik, sekarang akses file index.html yang telah anda taruh dimana saja. Bisa di localhost komputer, server hosting, maupun aplikasi HTML5 Phonegap Anda. Saya yakin akan tampil dalam bentuk list, nama-nama yang Anda masukkan di database online tadi. :
Selamat mencoba !
terimakasih, simple dan berarti…
Terima kasih atas tutorial nya. Tetapi ketika saya build program tersebut menggunakan build.phonegap.com dan install apk pada android saya, data dari database tersebut tidak muncul. Padahal apabila saya mengunakan mobile browser pada android saya untuk menghubungi server bisa di akses. Mohon petunjuknya. Terima kasih.
hmm.. kemungkinan besar karena konfigurasi build.phonegap.com berbeda dengan saat kita membuat aplikasi menggunakan Eclipse mas ! 🙂
Coba cek lagi config.xml-nya mas ! mungkin ada yang kurang atau keliru untuk support databasenya..
dokumentasi bisa dilihat disini ==> https://build.phonegap.com/docs/config-xml
Kalo kita pengen ngetes pake database localhost (XAMPP) gimana caranya ya?
coba di url ini
$.ajax({
url: ‘http://namadomain-anda.com/parsing.php’,
dataType: ‘jsonp’,
jsonp: ‘jsoncallback’,
timeout: 5000,
diganti
$.ajax({
url: ‘http://localhost/parsing.php’,
dataType: ‘jsonp’,
jsonp: ‘jsoncallback’,
timeout: 5000,
waduh gann, pemecahan solusi ane ketemu lagi di site sampean, suwun seng akeh gan 😀
dulu masalah google chart, sekarang db phonegap, TY ^^
gan mau tanya ini, untuk masalah phonegap khususnya,
supaya konten di app kita resolusinya mau menyesuaikan dengan resolusi devicenya gimana ya ?
TY b4
ouwh.. kalo itu pakai CSS Media Query mas !
jika mas afif udah terbiasa membuat desain responsive, pasti bisa membuat aplikasi phonegap yang responsive..
🙂
Assalamualaikum W.B.T dan Salam sejahtera.
Thanks for this great tutorial example. Saya nak tanya,if user want to send/input some data from the phonegapp app , did we use Json again to send the data into the mysql database?
thanks in advance.
yes, you can do it !
feel free to follow this site to get it => http://samcroft.co.uk/2012/posting-data-from-a-phonegap-app-to-a-server-using-jquery/
mas kenapa source codenya ngga bisa diliat, cuman ada tulisan kayak gini [gist id="5476804"]. itu kenapa ya mas?
Sudah saya perbaiki mbak !
Silahkan dicek kembali artikel tutorialnya.
aplikasi server di akses uda ok,
tapi waktu saya masukkan ke dalam handphone ngga keluar apa2..
waktu saya coba di localhost tampil pada bagian ini :
alert(‘Error terjadi’);
itu kenapa ya?
list menu dinamis
om kalo misalkan namacewek itu dijadikan list menu dan misalkan kita klik Anggelina Mahmuda dan itu masuk ke viewdetail akan menampilkan data-data Anggelina Mahmuda saja…bagaimana ?
gan kalo listnya jadi link gimana ya ????
diberi tag a href,
$.ajax({
url: ‘http://localhost/parsing.php’,
dataType: ‘jsonp’,
jsonp: ‘jsoncallback’,
timeout: 5000,
mas untuk file parsing yang lewat localhost di letakkan di htdoc berarti
usahakan pakai host online, kalau localhost kemungkinan bisa no-connection
nyambung dg diatas, saya sdh coba di host online, pas awal akses bisa, tp pas refresh ilang tuh lisview nya, ndak ada isinya. di refresh lagi muncul, dan refresh lagi kadang muncul kadang ilang. Itu kenapa ya mas? mksih
refreshnya itu pake fungsi apa ya ? mungkin dari fungsi refresh itu sendiri yg terjadi masalah.
Gan kalo penggunaan Seasson kaya di web browser , bisa di aplikasikan di phonegap or app berbasis html5 ga ya ? mohon pencerahanya , terima kasih.
salah ketik SESSION maksutnya 😀
Session di phonegap bisa menggunakan localstorage. Tutorial tentang localstorage bisa dilihat disini mas http://mkhuda.com/html5/menyimpan-string-data-dengan-html5-localstorage/
Salam Mas,
Apakah pada aplikasi phonegap ini file index.php tidak bisa bekerja sempurna (menjalankan fungsi2nya memanggil dbase mySQL), karena saya sudah melakukan kompilasi apk nya namun ketika dijalankan di HP, database tidak tampil. Mohon petunjuknya apakah yg dapat terbaca hanya file dengan ekstensi index.html saja, karena ketika saya coba di localhost tidak ada masalah, semua database berjalan/tampil .
fyi: saya membangun aplikasi mobile dgn JQUERYmobile dan mencoba menghubungkan database MySQL database dengan PHP.
Terima kasih sebelumnya.
Mas eko, perlu diingat bahwa phonegap hanya akan membaca file html (index.html) dan juga javascript. Jika mas eko memasukkan dan memanggil file bertipe .php seperti index.php maka di phonegap tidak akan berjalan.
index.php di localhost dapat berjalan karena localhost merupakan environment untuk server php.
makasih tutorialnya mas, tetapi kalau mau dimasukin ke listview jquery caranya gimana ya ??
M’f newbie mau tanya mass.
Berarti syntak PHP prosedural biasa bisa dijalankan ya masss di phonegap ini..??
Terima kasih atas responnya.
Bukan begitu mas,
PHP hanya dijadikan untuk pengolahan dari sisi web server saja. Sedangkan Phonegap hanya menggunakan syntax Javascript maupun library Jquery