Konsep Dasar JSON dan penggunaannya

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…

About these ads

25 thoughts on “Konsep Dasar JSON dan penggunaannya

  1. Ping-balik: Dasar AJAX dengan jQuery,JSON dan PHP « Mari Terus Belajar Dan Berbagi

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

  3. Ping-balik: Dasar Ajax JSON dengan Jquery dan PHP | Blog Adiputra

  4. salam kenal brow….tutornya mantap-mantap ni….makasih uda mau berbagi.

    waaa…ternyata JSON itu mirip bahasa VB ya, VBS, Javascript juga…..heheeeee

  5. beuh,…. mantaps..
    my totor is number one on the list google search..
    when I search “Belajar Json”
    like this friends

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

  7. @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 ? :D

    Cek pake firebug kang, keliatan error nya..
    gw coba ulang jalan kok..

  8. kang json itu cuman samapai array 2 dimensi ya.. kalau tiga dimensi gimana kayanya pusing hahahaha :D makasi akh tutorialnya…

  9. 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!

  10. maaf Ka,ini json jg kan ya…?.
    {
    “data”: [
    {
    “nama”: “aku1″
    },
    {
    “nama”: “aku2″
    },
    {
    “nama”: “aku3″
    },
    {
    “nama”: “aku3″
    },
    {
    “nama”: “aku4″
    }
    ]
    }

    Kl saya mw mengabungkan json di atas di javascript dengan sparator koma gmn perintahnya ya ka…?.jadinya sperti ini : aku1,aku2,aku3,aku4.saya liat di w3shool untuk menggabungkan array dalam javascript menggunakan perintah –> join.tp saya coba ko ga bs.

  11. pada contoh ke tiga diatas, mengapa harus menggunakan perulangan for seperti ini :

    for(var i=0; i<JSON_adi.teman.length; i++){
    document.write("” + JSON_adi.teman[i].nama + ” kuliah di ” + JSON_adi.teman[i].universitas + “”);
    }

    apakah tidak bisa kalau langsung saja seperti ini :

    document.write(“” + JSON_adi.teman.nama + ” kuliah di ” + JSON_adi.teman.universitas + “”);

    kalau bisa, tolong jelas kan arti coding tersebut, terimakasih…..

  12. misi gan,
    kan saya bikin fungsi buat manggil data dalam bentuk json,
    $data=$obj->getUserInfo(“okto”);

    trus pas di panggil hasilnya gini
    {“uid”:”okto”,”fullname”:”okto”,”lastname”:”Oktorialdi”,”firstname”:”Oktorialdi”,”ou”:null,”title”:”Kepala Pusat Data dan Informasi Perencanaan Pembangunan”,”kodesurat”:”P02.000.001″}

    kalo mau ngambil atribut “kodesurat” doang gimana?
    makasih dah bagi-bagi ilmu nya

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s