Apa itu JSON ? Bagaimana menggunakannya dalam code-code kita ? Mungkin teman pernah mendengar istilah JSON ini saat membaca tutorial-tutorial mengenai implementasi dari AJAX. Ya memang saat ini JSON sangat diperlukan sekali guna implementasi AJAX. Saya sendiri pertama kali dengar istilah ini sekitar 2 tahun lalu saat dosen saya mengajarkan AJAX dengan PHP. Tapi gak mudeng 
…
Sekarang sudah mengerti dikit, jadi saya coba share agar nanti tidak lupa dan dapat digunakan untuk teman-teman yang sedang belajar JSON juga.
Sama seperti XML, JSON berfungsi untuk merepresentasikan data. Ingat hanya data saja focus utamanya. Yang tentunya antara XML dan JSON memiliki kelebihan dan kelemahannya serta cara merepresentasikan data juga berbeda sintaxnya. Teman bisa perjelas hal itu di artikel ini.
JSON sendiri singkatan dari JavaScript Object Notation. Ada hubungannya dengan Javascript ya..
Lalu bagaimana menggunakannya ? Berikut adalah contoh codenya.
<html>
<head>
<title>JSON testing - adiputra</title>
<script type='text/javascript'>
var JSON_adi = {nama:’adiputra’};
document.write (JSON_adi.nama);
</script>
</head>
<body>
</body>
</html>
JSON_adi adalah nama variable pada javascript yang menunjukan bahwa variable tersebut berbentuk Object JSON karena terdapat kurung kurawal *{} *. Di dalam kurung kurawal terdapat atribut * nama * dengan value * adiputra *. Ingat * nama * adalah atribut, sedangkan * adiputra * adalah value dari atribut * nama * dan keduanya dipisahkan dengan titik dua * : *. Lalu untuk memanggil valuenya kita dapat panggil dengan code
document.write (JSON_adi.nama);
Begitu kurang lebihnya, jadi variable JSON_adi merepresentasikan data dimana data tersebut memiliki atribut * nama * dengan value * adiputra *. Datanya kalau integer bagaimana ? lalu bisa data array tidak ?
Berikut contoh tambahan code lagi
<html>
<head>
<title>JSON testing - adiputra</title>
<script type='text/javascript'>
var JSON_adi = {
nama:'adiputra',
umur:21,
status_nikah:false,
hobi:['coding','main game','ngetik']
};
var nikah;
if(JSON_adi.status_nikah){
nikah = "sudah nikah";
}else{
nikah = "belum nikah";
}
document.write (JSON_adi.nama +" berumur "+JSON_adi.umur+" suka "+JSON_adi.hobi[0]+ " dan "+nikah);
</script>
</head>
<body>
</body>
</html>
Pada code diatas, kita dapat membuat data tipe integer, Boolean dan juga array. Cara pemanggilannya pun sederhana bukan…Didalam array kita juga dapat membuat data object lagi berikut contohnya :
<html>
<head>
<title>JSON testing - adiputra</title>
<script type='text/javascript'>
var JSON_adi = {
nama:'adiputra',
umur:21,
status_nikah:false,
hobi:['coding','main game','ngetik'],
teman:[
{nama:'anas', universitas:'UGM'},
{nama:'wahyu', universitas:'UNIKOM'},
{nama:'adesetio', universitas:'UGM'},
{nama:'nano', universitas:'UNIKOM'}
]
};
var nikah;
if(JSON_adi.status_nikah){
nikah = "sudah nikah";
}else{
nikah = "belum nikah";
}
document.write(JSON_adi.nama +" berumur "+JSON_adi.umur+" suka "+JSON_adi.hobi[0]+ " dan "+nikah+ "<br />");
document.write("List teman : <br />");
document.write("<ol>")
for(var i=0; i<JSON_adi.teman.length; i++){
document.write("<li>" + JSON_adi.teman[i].nama + " kuliah di " + JSON_adi.teman[i].universitas + "</li>");
}
document.write("</ol>")
</script>
</head>
<body>
</body>
</html>
Dari code diatas, moga teman mengerti ya. Silahkan komentar / kritik bila kurang mengerti.
Lalu bagaimana implementasi ke PHP-nya ? Berikut ini saya coba membuat code untuk menjelaskannya :
<?php
$array_adi = Array(
"nama" => "adiputra",
"nim" => "10107633",
"jurusan" => "TI",
"kelas" => "IF-13"
);
echo "Array dalam PHP : ";
print_r($array_adi);
echo "<br />";
echo "-------------------------------------------<br />";
echo "Array yang sudah convert ke JSON : ";
$json_adi = json_encode($array_adi);
print_r($json_adi);
echo "<br /><br />"
?>
<html>
<head>
<script language='javascript'>
function ubah_json(){
var text_json = document.getElementById("json_id").value;
var json_obj = eval('('+text_json+')');
alert(json_obj.nama+ " kelas " +json_obj.kelas+ " jurusan " +json_obj.jurusan+ " NIM "+json_obj.nim);
}
</script>
</head>
<body>
<form action="tes_json.php" method='POST'>
<input type='hidden' name='json_text' id='json_id' value='<?php echo $json_adi; ?>' />
<input type='submit' name='tbl' value="Convert ke Array lagi" />
<input type='button' name='button1' value='Ubah ke Object JSON' onclick='ubah_json()'/>
</form>
</body>
</html>
<?php
if($_POST[tbl]=="Convert ke Array lagi"){
// ubah bentuk string menjadi bentuk array
echo "<b>Sebelum Slash dihapus : </b>".$_POST[json_text]."<br /><br />";
$hilang_slash = stripslashes($_POST[json_text]);
echo "<b>Sesudah Slash dihapus : </b>".$hilang_slash."<br /><br />";
$array_back = json_decode($hilang_slash);
echo "<b>Hasil convert menjadi array kembali : </b>";
print_r($array_back);
}
?>
Awalnya saya membuat array seperti ini.
$array_adi = Array( "nama" => "adiputra", "nim" => "10107633", "jurusan" => "TI", "kelas" => "IF-13" );
Lalu setelah itu saya ubah menjadi bentuk sementara JSON sehingga nanti bisa dimanipulasi di javascript. Untuk mengubanya PHP tinggal menggunakan code json_encode(). Sebenarnya hasil dari json_encode() berbentuk string.
Disini, saya coba dahulu melakukan convert bentuk string yang baru saja di encode dengan code json_encode() menjadi sebuah array kembali dengan perinta json_decode().
Perintah stripslashes() berfungsi untuk menghapus tanda slash * / * karena bentuk dari array yang sudah diconvert menjadi String .
Hasilnya bisa dilihat pada gambar dibawah ini.
Lihat, kita telah berhasil mengubah kembali menjadi array bukan…
Sekarang kita ubah menjadi object dalam Javascript. Klik saja tombol Ubah ke Object JSON, lalu lihat alert yang muncul ? taadaaa….kita sudah membuatnya dalam bentuk object javascript
Kok bisa ? lihat codenya ya..Yang paling penting adalah code
var json_obj = eval('('+text_json+')');
dimana text_json didapat dari id element text input yang valuenya dari encode_json() pada coding PHP.
demonya bisa diliat di bawah ini : [ demo ]
Sampai sini, moga ada sedikit pemahaman mengenai apa itu JSON dan hubungannya dengan PHP. Nanti saya coba buat artikel bagaimana menggunakan json untuk aplikasi Ajax.
Mohon koreksi juga kalau ada yang salah ya…
Ping-balik: Dasar AJAX dengan jQuery,JSON dan PHP « Mari Terus Belajar Dan Berbagi
hoho, sy baru tahu function json_encode ternyata udah bawaan dari php 5 >= 5.2.0. sebelumnya bikin string json di php pake cara manual.
btw, slm kenal. thanks buat artikelnya..
sm2..
slm kenal jg mas Angga…
thanks udh mampir..;)
makasi mas, pokoke smua halaman yang bahas pemrograman tak save dulu smua, ntar tak pelajari 1 per 1
thak’s banget artikel di atas bener2 sangat membantu gw,… perbanyak lagi ya brow share ilmu2 yang canggih2
baguuus, tutornya sangat mudah dimengerti untuk pemula json. sangat membantu :bd. kalo ada tutor terbaru di update lg yaa
Ping-balik: Dasar Ajax JSON dengan Jquery dan PHP | Blog Adiputra
salam kenal brow….tutornya mantap-mantap ni….makasih uda mau berbagi.
waaa…ternyata JSON itu mirip bahasa VB ya, VBS, Javascript juga…..heheeeee
sama2 bro…amien kalu bgitu ada manfaat nya…
beuh,…. mantaps..
my totor is number one on the list google search..
when I search “Belajar Json”
like this friends
mas mau nanya kalau belajar json
kita mesti ngerti ajax dulu ya?? atau bisa langsung ke Json
mas kenapa ya pas saya tulis ulang dan copy file ini
JSON testing – adiputra
var JSON_adi = {nama:’adiputra’};
document.write (JSON_adi.nama);
kok gak muncul apa2 ya???? kirain akan muncul ‘adiputra’ kira2 knapa ya atau mungkin saya ada yang salah mohon bimbingan nya… heheh
@jangwahyu:
Json itu sama kaya array kang, cuma kalu gw nyebut itu array nya si JS. Jadi pelajari json sama aja kaya array biasa, handle nya di client.
Coba yg test itu ganti sama nama “SITI”, bisa gak ?
Cek pake firebug kang, keliatan error nya..
gw coba ulang jalan kok..
waduh pasdiganti dengan nama “Siti Sayang” jadi ketahuan salahnya yaitu cuman di kutip..
hahaha
kang json itu cuman samapai array 2 dimensi ya.. kalau tiga dimensi gimana kayanya pusing hahahaha
makasi akh tutorialnya…
@wahyu : kalu sampe 3 dimensi, kita belajar lagi sama Bu Tati ya..*jadi inget kata2 beliau..:D
Hello there, just became alert to your blog through Google, and found that it is really informative.
I am going to watch out for brussels. I’ll appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!
thanks banget ilmunya bro, emang beda spesifiknya apa ya ? penggunaan JSON sama PHP ? biasanya JSON dipake buat case project kayak gimana ya ?
@yahya : JSON format data mas, kalau PHP bahasa server. JSON biasa dipakai buat tukeran data dari server ke client dan sebaliknya. Sering banget dipakai buat proses ajax.