PhoneGap Tutorial : Menampilkan dan Parsing Data JSON Dari Web Services (Android & iOS)

phonegap_lab

Melepas kepenatan sejenak, setelah beberapa hari ini saya belajar+mengerjakan sesuatu yang baru. 1 minggu ini saya lagi asik-asiknya ngulik framework Yii, framework PHP yang sangat-sangat powerfull untuk membuat aplikasi berbasis web. Banyak kemudahan yang diberikan, seperti extension, widget, dan yang paling bikin saya kesemsem ialah fitur generatornya. Dengan hanya klik, klik dan klik, sudah menghasilkan sebuah aplikasi CRUD :D. Kayaknya memang harus pindah ke Yii, setelah CI tidak ada perkembangan sama sekali dalam beberapa bulan ini. Apalagi kemarin, kancah dunia per-CI-an dibuat heboh, gara-gara Ellislab si empunya CI, ingin menjual kepemilikian framework tersebut -_-.

Nah, di postingan malam ini saya ingin berbagi sedikit tentang sebuah tutorial PhoneGap sederhana, yaitu Menampilkan dan Parsing Data JSON Dari Web Services (Android & iOS). Salah satu framework mobile yang keren menurut saya dan framework mobile yang dibilang masih beta serta tidak layak pakai oleh dosen saya (wkakakakkkk…). Untuk menampilkan data dari server online di aplikasi berbasiskan PhoneGap, kita akan menggunakan javascript untuk melakukan parsing data dalam bentuk JSON yang dihasilkan oleh web service di sisi server. OK deh, kita langsung aja ke langkah-langkah pembuatannya.

1. Silahkan install terlebih dahulu framework PhoneGap, untuk platformnya terserah rekan-rekan saja. Bisa di android atau IOS, disini saya menggunakan android. Tutorial instalasi silahkan dicek disini.

2. Di project, akan terbuat sebuah folder “assets”. Kita akan meletakkan file html, css dan js di folder ini.

3. Buat sebuah tabel seperti di bawah ini :

CREATE TABLE IF NOT EXISTS `tbl_kategori` (
  `id_kategori` int(5) NOT NULL AUTO_INCREMENT,
  `nama_kategori` varchar(100) NOT NULL,
  PRIMARY KEY (`id_kategori`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

INSERT INTO `tbl_kategori` (`id_kategori`, `nama_kategori`) VALUES
(1, 'Teknologi'),
(2, 'Gosip dan Curhat'),
(3, 'Pendidikan'),
(4, 'Kuliner'),
(5, 'Politik'),
(6, 'Hukum'),
(7, 'Kriminal');

4. Sebagai web service-nya, buat sebuah file dengan nama DBConnect.php. Hasil query database, dikonversi menjadi format JSON dengan fungsi json_encode(). Simpan di dalam folder htdocs.

<?php
class DBConnect
{
public $host;
public $user;
public $pass;
public $perintah;
public $database;
public $koneksi;

	function __construct()
	{
		$this->host="localhost";
		$this->user="root";
		$this->pass="";
		$this->koneksi=mysql_connect($this->host,$this->user,$this->pass);
		if(!$this->koneksi)
		{
			echo "Koneksi gagal";
			exit();
		}

		$this->database="db_services";
		$q=mysql_select_db($this->database,$this->koneksi);
		if(!$q)
		{
			echo "Database tidak ditemukan";
		}
	}

	public function GetKategori()
	{
		$this->perintah = mysql_query("select * from tbl_kategori");
		while($r=mysql_fetch_array($this->perintah))
		{
			$arr[] = $r;
		}

		echo '{"items":'. json_encode($arr).'}';
	}
}

header("content-type: application/json");
$db = new DBConnect();
$db->GetKategori();

?>

5. Untuk tampilannya, disini saya menggunakan jQueryMobile. Sehingga untuk link css dan js, memanggil versi online-nya saja. Buat sebuah file, dengan nama kategori.html di dalam folder assets.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script src="js/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
    <script src="js/kategori.js"></script>
    <style type="text/css">
        .listview-custom{
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        .listview-custom a{
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>

<div data-role="page">

    <div data-role="header" data-position="fixed">
        <h1>Data Kategori</h1>
    </div>

        <div data-role="content">

            <div id="loading" style="display:none;text-align:center;">
                <b>Sabar Brow...!</b>
                <br><br>
                <img src="loading.gif">
            </div>

            <div id="gagal" style="display:none;text-align:center;color:#F00;">
                <div class="alert alert-danger">
                    <strong>Koneksi ente ngenesss broww...</strong>
                </div>
            </div>

            <div id="tampilData" style="display:none;">
                <ul id="dataList" data-role="listview" data-divider-theme="a">
                </ul>
            </div>
        </div>

    <div data-role="footer" data-position="fixed">
        <h4>Data Kategori</h4>
    </div>
</div>

</body>
</html>

6. Sekarang untuk melakukan parsing dari format JSON yang dihasilkan oleh web service di atas, kita membutuhkan bantuan javascript. Buat sebuah file dengan nama kategori.js di dalam folder /assets/js.

$(document).ready(function() {

$('#loading').show();

get_data();

function get_data(){
	var AmbilData;
	$.ajax({
				type : 'GET',
				url : 'http://10.0.2.2/services/DBConnect.php',
				async: true,
				beforeSend: function(x) {
					if(x && x.overrideMimeType) {
      					 x.overrideMimeType("application/j-son;charset=UTF-8");
      				}
				},
				dataType : 'json',
				success : function(data){
						AmbilData = data.items;
							$('#loading').hide();
							$('#tampilData').show();
							$.each(AmbilData, function(index, loaddata) {
							$('#dataList').append(
								'<li data-role="list-divider" data-theme="a" class="listview-custom"><a onClick="alert(\''+ loaddata.nama_kategori + '\');" data-ajax="false">'+ loaddata.nama_kategori + '</a></li>');
							});
				},
				error: function(jqXHR, exception) {
					$('#loading').hide();
					$('#gagal').show();
				}
		});
}

});

7. Untuk tambahan seperti animasi loading, bisa menggunakan gambar animasi dalam bentuk .gif yang banyak tersedia di internet.

8. Jalankan via emulator android atau IOS. Disini saya mencobanya di kedua emulator tersebut, dan hasilnya seperti di bawah ini :

simple-android-service

simple-ios-service

Tampak memang benar-benar hybrid, karena dengan sekali membuat aplikasinya untuk di satu platform, sudah tersedia juga untuk platform lainnya. Benar-benar efisien untuk urusan teknis dan waktu, sehingga dateline produk pun bisa dengan cepat terselesaikan. Jadi kalau sudah begini, apa masih beta dan tidak layak pakai…??? (wkakakakakakkk.,.).

Untuk contoh source code lengkapnya, bisa di download di akhir postingan ini. OK deh, sekian dulu postingan saya kali ini. Semoga bisa bermanfaat untuk rekan-rekan yang sedang belajar PhoneGap.

“Stay Foolish, Stay Hungry”

Happy Blogging and Keep Coding

Cheerrrss….!!!!

[to_like]Download Aplikasi[/to_like]

35 comments

  1. dede Reply

    mas, mau tanya kalau misalkan pakai methode pos dan get untuk login dan register ada tidak contohnya? oh iya klo misalkan dalam pembuatannya ini ada pada localhost saja bagaimana mas?

  2. Hermiza Reply

    Mas…bagaimana caranya kalau Kita mau memafaatkan API dari website lain….

  3. ajuz Reply

    sekalian tutornya donk mas,… ” CRUD data JSON dengan Phonegap”.
    di tunggu… 😀

  4. harysay Reply

    Kok aku coba ngga bisa tampil ya mas?
    Yang tampil malah “Koneksi ente ngenesss broww…”
    padahal kan localhostnya dah jalan?

      • Gede Lumbung Post authorReply

        nyobanya dimana??
        emulator??
        device??
        emulator pake ip 10.0.2.2
        kalo device, pake hosting atau bisa jg pake database lokal dengan konsep adhoc

  5. Putra Reply

    Thanks banget tutornya, cm ada pertanyaan sedikit nih. Kenapa saat saya menggunakan DBConnect.php yang di lokal dapat jalan dengan baik sedangkan saat saya menggunakan DBConnect.php yang ada di hosting saya jadinya gagal yah. Padahal saya jalankan file nya dapat ditampilkan di browser. Thx

    • Gede Lumbung Post authorReply

      mungkin gara2 hostingnya yg masih mengembalikan tag html di json nya,,
      coba cari2 solusinya di stackoverflow, kemarin saya sempat nemu link nya, tapi lupa save

  6. pelukis Reply

    Gan, kok di tempat ane, ada tanda silang di jquery jquery-1.7.1.min.js nya
    Kenapa ya?

  7. freddy Reply

    Gan ….
    mau tanya nih ….
    misalnya tampilanya saya buat lewat phonegap ….
    dan ngambil databasenya lewat JSON ….
    menurut Juragan sendiri nih yah bisa gag …
    trim’s …

  8. Ebob Reply

    Mantap bli, ternyata ada juga org indo yg seneng phonegap, keknya dosennya males belajar lagi, atau mungkin udh stack di bhs pemograman tertentu, atau memang phonegap terlalu instan buat dia 🙂

    So well, Phonegap dikembangkan bukan oleh sembarang orang, Adobe jd salah satu vendor software yg ikut terlibat.

  9. Hendy Reply

    Pagi gan, saya sudah instal phonegap 3.2 di PC windows 7, IDE yg dipakai Eclipse. Saya sudah membuat simple app menggunakan listview dan sudah berjalan di emulator android. yang mau saya tanyakan, apakah kode yang sama dapat berjalan di emulator IOS? jika saya tidak punya IOS mac/laptop, apakah kode yang sama bisa saya compile di phonegap build agar menghasilkan sebuah app yang berjalan di IOS platform? terima kasih

  10. Tri Wiyono Reply

    bro punya aq kok munculnya cuma koneksi ente ngenes, aq pakai mysql yang ada di pc aq, dan phonegap nya di pc yang sama, aq pakai localhost dan 127.0.0.1 di file javascriptnya gak mau juga
    type : ‘GET’,
    url : ‘http://localhost/json/cread_json.php’,
    async: true,
    beforeSend: function(x) {
    if(x && x.overrideMimeType) {
    x.overrideMimeType(“application/j-son;charset=UTF-8”);
    }
    },

  11. dedhy2001 Reply

    mas brow,,sempatin upload android restonya mas brow. yang lengkap. client dan servernya.

    ane dapet clientnya di github. tapi ga ada servernya. servernya langsung ke resto.gedelumbung.com.

    kalo bisa dapat sourcodenya kan enak buat belajar. soalnya ane cepet belajar kalo pake sistem ATM. pengen belajar bikin aplikasi android, phonegap, REST.

    thanks sebelumnya mas brow. terus nulis dan sharing source code…

  12. laili Reply

    kalo yg keluar cuma header dan footer doang itu kenapa ya mas bro??
    sy coba di localhost utk database, hasilnya gak muncul
    di hosting gratisan juga gak muncul,
    ip-nya udah sy sesuaikan dgn localhost dan ip hosting juga.
    Sy uji cobanya langsung pake device.
    Terima kasih

  13. diki dewanto Reply

    thank you bro.. this is what I need! I just try and then connect! great!!

  14. Januar Fonti Reply

    Masih ditunggu tutorial “CRUD data JSON dengan Phonegap” nya bang hhehe, searching digoogle masih gak ada kayaknya 😀

  15. awanda Reply

    mas ditunggu contoh yang pake method post and get nya yaa 🙂
    any way tutorialnya keren (y)

  16. Hendra Gunawan Reply

    bro. itu program setelah gw run diandroid aplication eclipse ketika data nya ditambah atau dihapus dalam database kemudian gw run lagi file dieclipsedata yang muncul gk sesuai dengan didatabase. apanya ya yg gk ngerefresh?

  17. Hendra Gunawan Reply

    contoh nya record kriminal gw hapus trs gw jalanin file android nya masih ada. seharusnya kn gk muncul. mungkin bisa kasih penjelasan bro. gw coba restart aplikasi eclipse dan dreamweaver tetep begitu

  18. Made Reply

    Om Swastyastu bli, saya mau tanya…
    bagaimana cara kita kalau mau bikin web servicenya dari website online yang sudah ada?
    mohon bantuannya bli..
    suksme
    Om Santi Santi Santi Om