Parsing JSON di Phonegap


Untuk membuat aplikasi android lewat Phonegap, kita menggunakan bahasa pemrograman web, contohnya untuk mem-parsing JSON ke dalam aplikasi android dengan menggunakan Ajax.

Pertama-tama kita buat dulu API nya, untuk membuatnya saya contohkan mengambil datanya dari database MySQL kemudian di konversi ke file JSON dengan menggunakan PHP.

Contoh Databasenya :

CREATE TABLE IF NOT EXISTS `data_buku` (
  `id_buku` int(11) NOT NULL AUTO_INCREMENT,
  `id_kategori` int(11) NOT NULL,
  `judul_buku` text NOT NULL,
  `penerbit` text NOT NULL,
  `tahun_terbit` text NOT NULL,
  PRIMARY KEY (`id_buku`),
  KEY `id_kategori` (`id_kategori`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

INSERT INTO `data_buku` (`id_buku`, `id_kategori`, `judul_buku`, `penerbit`, `tahun_terbit`) VALUES
(1, 1, 'Tilawah Cinta', 'Medhatama Restyan', '2012'),
(2, 1, 'Ikunenmo: Bertahun-Tahun Rasaku Bersamamu  ', 'GACA', '2013'),
(3, 1, 'Sesuatu Yang Tertunda: Rahasia Hati Menunggu U/ Diungkapkan  ', 'Bentang Pustaka', '2013'),
(4, 2, 'Love Faraway, So Close 01  ', 'M & C', '2014'),
(5, 2, 'Im Not A Maid 01  ', 'Elexmedia', '2012');


CREATE TABLE IF NOT EXISTS `kategori` (
  `id_kategori` int(11) NOT NULL AUTO_INCREMENT,
  `nama_kategori` text NOT NULL,
  PRIMARY KEY (`id_kategori`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `kategori` (`id_kategori`, `nama_kategori`) VALUES
(1, 'Novel'),
(2, 'Komik');

File API nya :

<?php 
mysql_connect("localhost","root","");
mysql_select_db("buku");

header("Content-Type: application/javascript");

if (!empty($_GET['callback'])){
	if (empty($_GET['kategori'])){
	    $queryKategori=mysql_query("select * from kategori");
	    $json = $_GET["callback"].'([';
	    while ($dataKategori=mysql_fetch_array($queryKategori)){
			$dataJSON = '{ "id":'.json_encode($dataKategori['id_kategori']).' ,"nama":'.json_encode($dataKategori['nama_kategori']).'}, ';
			$json .=$dataJSON;
		}
		$json .= '])';                   
		echo str_replace('}, ])', '} ])', $json );
	} else {
		$queryBuku=mysql_query("select * from data_buku where id_kategori='$_GET[kategori]'");
	    $json = $_GET["callback"].'([';
	    while ($dataBuku=mysql_fetch_array($queryBuku)){
			$dataJSON = '{ "id":'.json_encode($dataBuku['id_buku']).' ,"judul":'.json_encode($dataBuku['judul_buku']).',"penerbit":'.json_encode($dataBuku['penerbit']).',"tahun_terbit":'.json_encode($dataBuku['tahun_terbit']).'}, ';
			$json .=$dataJSON;
		}
		$json .= '])';                   
		echo str_replace('}, ])', '} ])', $json );
	}
}
?>

File index.html (Tampilan halaman pertama ketika aplikasi dibuka dan berisi kategori buku)

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Parsing JSON di Phonegap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src="cordova.js"></script>
	
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.4.0.min.js"></script>
	
	<link rel="stylesheet" href="css/default/jquery.mobile-1.4.0.min.css">
	<link rel="stylesheet" href="css/style.css">
	
	<script>
	document.addEventListener("deviceready", onDeviceReady, false);
	function onDeviceReady() {
	
		//parsing JSON
		$.mobile.loading("show");
		$.ajax({
				url: "http://localhost/api/api.php",
				dataType: "jsonp",
				success: function(parsed_json) {
					 $.each(parsed_json, function(i,item){
						$("#datalist").append('<li><a style="font-weight:lighter" data-ajax="false" href="buku.html?id='+item.id+'"><div style="white-space:normal">'+item.nama+'</div></a></li>');
					});
				   $.mobile.loading("hide");
				   $('ul').listview('refresh');
			   }, 
			   timeout: 30000,    
			   error:function(){ alert("Periksa Kembali Koneksi Internet Anda, Closing Application...");navigator.app.exitApp(); }   
		});
		
		//aksi ketika di pencet tombol kembali
		document.addEventListener("backbutton",tombolKembali, true);
		function tombolKembali(){
			console.log("Log Keluar");
			var r=confirm("Keluar Aplikasi");
			if (r==true) {
				navigator.app.exitApp();
			} 
		}
		
		
	}
	
  </script>
</head>
<body>
<div data-role="page">
	<div id="header">
		<div style='background-color:#fff;text-align:center' data-tap-toggle='false' data-position='fixed' data-theme='b' data-role='header'>
			<div style='padding:5px;text-align:center;background-color:#0468bf;color:fff;text-shadow:none;font-weight:lighter' id='judulbar'>Contoh Parsing JSON Pada Phonegap<br/>herupurwito.wordpress.com<br/>Kategori Buku</div>
		</div>
	</div>
	<div data-role="content">
		<ul id="datalist" data-role="listview"></ul>
	</div>
	
</div>
</body>
</html>

File buku.html (Untuk menampilkan data buku berdasarkan kategori)

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Parsing JSON di Phonegap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src="cordova.js"></script>
	
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.4.0.min.js"></script>
	
	<link rel="stylesheet" href="css/default/jquery.mobile-1.4.0.min.css">
	<link rel="stylesheet" href="css/style.css">
	
	<script>
	document.addEventListener("deviceready", onDeviceReady, false);
	function onDeviceReady() {
	
		//parsing JSON
		var idKategori = (document.URL).split("buku.html?id=");
		$.mobile.loading("show");
		$.ajax({
				url: "http://localhost/api/api.php?kategori="+idKategori[1],
				dataType: "jsonp",
				success: function(parsed_json) {
					 $.each(parsed_json, function(i,item){
						$("#datalist").append('<li><div style="white-space:normal">'+
												'Judul : <b>'+item.judul+'</b><br/>'+
												'Penerbit : '+item.penerbit+'<br/>'+
												'Tahun Terbit : '+item.tahun_terbit+'<br/>'+
												'</div></li>');
					});
				   $.mobile.loading("hide");
				   $('ul').listview('refresh');
			   }, 
			   timeout: 30000,    
			   error:function(){ alert("Periksa Kembali Koneksi Internet Anda, Closing Application...");navigator.app.exitApp(); }   
		});
		
		//aksi ketika di pencet tombol kembali
		document.addEventListener("backbutton",tombolKembali, true);
		function tombolKembali(){
			location.href='index.html';
		}
	}
	
  </script>
</head>
<body>
<div data-role="page">
	<div id="header">
		<div style='background-color:#fff;text-align:center' data-tap-toggle='false' data-position='fixed' data-theme='b' data-role='header'>
			<div style='padding:5px;text-align:center;background-color:#0468bf;color:fff;text-shadow:none;font-weight:lighter' id='judulbar'>Contoh Parsing JSON Pada Phonegap<br/>herupurwito.wordpress.com<br/>Kategori Buku</div>
		</div>
	</div>
	<div data-role="content">
		<ul id="datalist" data-role="listview"></ul>
	</div>
	
</div>
</body>
</html>

Screenshot Hasil :
Home
home

Daftar Buku berdasarkan Kategori
kategori_novel

Oh ya, kalau mau mencobanya, silahkan download script saya di sini, file berisi :
– project dari eclipse siap import
– script PHP untuk API-nya
– sql database
– screenshot
– contoh file .apk yang sudah jadi

Advertisements

13 thoughts on “Parsing JSON di Phonegap

  1. kalo boleh tahu itu file php disimpan di mana? server online ato offline?

  2. mas kalo bisa posting sample crudnya untuk parsing json.

  3. Makasih banget mas ilmunya… sangat2 memebantu bangett 🙂
    iya mas, ditunggu tutorial buat CRUD nya mas.

  4. kok nggak bisa tampil gan datanya..

  5. mas cara upload file excel ke mysql pake jquerymobile gmna yah? mhon pencerahan nya.. hehe

  6. mas kalo untuk mau parser data dalam bentuk image caranya gimana? url image ada di mysql.

    misalkan saja program di atas di tambah dengan cover bukunya juga ditampilkan dalam “detail_buku”.
    kira2 bisa ndak mas?

  7. mas,,,, file API nya taro dmna ya??

  8. yang crud ada ndak tutorialnya gan?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s