Cara membuat integrasi antara JSON, PHP dan Jquery

Posted by

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 ! 😀

<?php
//memberi pengalamatan khusus untuk json
header(Content-type: application/json);
//memanggil database
$host=localhost;
$user=nama user;
$password=password db;
$koneksi=mysql_connect($host,$user,$password) or die(Gagal Koneksi Bro !);
mysql_select_db(nama db);
//query data
$sql = SELECT id, namacewek AS namaceweknya FROM cewek ORDER BY id ;
$result = mysql_query($sql) or die (Query error: . mysql_error());
//fetch dalam bentuk array
$records = array();
while($row = mysql_fetch_assoc($result)) {
$records[] = $row;
}
//menuliskannya dalam bentuk json menggunakan fungsi json_encode
echo $_GET[jsoncallback] . ( . json_encode($records) . );;
?>
view rawparsing.php hosted with ❤ by GitHub

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 :

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-type content=text/html; charset=utf-8>
<title>List Cewek</title>
<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js></script>
<script type=text/javascript charset=utf-8>
$(document).ready(function(){
$.ajax({
url: http://namadomain-anda.com/parsing.php,
dataType: jsonp,
jsonp: jsoncallback,
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
$(#listcewek).append(<li>+item.namaceweknya+</li>);
});
$(#listcewek);
},
error: function(){
alert(Error terjadi);
}
});
});
</script>
</head>
<body>
<h3>Parsing JSON dengan Jquery</h3>
<div id=kontencewek>
<ul id=listcewek>
</ul>
</div>
</body>
</html>
view rawgistfile1.html hosted with ❤ by GitHub

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

Parsing JSON dengan Jquery
Angelina Mahmudah
Badriah Lavigne
Siti Multikultur
Gonjreng Fitriyah
view rawgistfile1.txt hosted with ❤ by GitHub

Sources : https://mkhuda.com/html5/integrasi-json-php-dan-jquery-untuk-aplikasi-mobile/

Leave a Reply

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