Integrasi JSON, PHP Dan Jquery Untuk Aplikasi Mobile

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.

alur data json php 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.

kerja-yuk-banner

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

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 !

 
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!

 

28 thoughts on “Integrasi JSON, PHP Dan Jquery Untuk Aplikasi Mobile

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

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

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

  3. mas kenapa source codenya ngga bisa diliat, cuman ada tulisan kayak gini [gist id="5476804"]. itu kenapa ya mas?

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

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

  6. $.ajax({
    url: ‘http://localhost/parsing.php’,
    dataType: ‘jsonp’,
    jsonp: ‘jsoncallback’,
    timeout: 5000,

    mas untuk file parsing yang lewat localhost di letakkan di htdoc berarti

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

  7. Gan kalo penggunaan Seasson kaya di web browser , bisa di aplikasikan di phonegap or app berbasis html5 ga ya ? mohon pencerahanya , terima kasih.

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

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

  9. M’f newbie mau tanya mass.
    Berarti syntak PHP prosedural biasa bisa dijalankan ya masss di phonegap ini..??

    Terima kasih atas responnya.

Leave a Reply

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

Chaptcha * Time limit is exhausted. Please reload CAPTCHA.