Perkembangan aplikasi saat ini menuntut adanya komunikasi antar aplikasi dengan user dan sebaliknya. Yang menjadi masalah utama adalah bagaimana standar pengiriman datanya? JSON sebenarnya bukanlah hal yang baru dan sulit, hanya sebuah standar yang disepakati dunia internasional untuk pengiriman data. Kabar baiknya JSON juga dapat diterapkan di berbagai bahasa pemrograman. Ingin tau lebih lanjut, ayo simak tutorialnya.

Pada tutorial kali ini akan saya bahas 

1. Apa itu JSON

2. Bagaimana Penulisan JSON

3. Apa manfaat dan bagaimana penerapan JSON

JSON dapat kita bayangkan sebagai array, memiliki kriteria sebagai berikut:

a. Terdiri dari key-value pairs, contoh : nama => David, usia => 19
b. Ordered list, contoh : 12, 34, 124, 34

Lalu bagaimana dengan JSON sendiri? bagaimana cara penulisannya?

{
   title: "Tutorial JSON",
   author: "John Doe",
   date: "2014-07-03",
   content: "Lorem ipsum dolor sit amet.......",
   comment: [
           {
              nama: "anonym",
              tanggal: "2014-07-04", 
              komentar: "keren bro...."
           },
           {
              nama: "paijo",
              tanggal: "2014-07-04", 
              komentar: "wah gak pertamax :("
           }
   ]

}

Apakah maksud tulisan diatas? itulah yang dinamakan JSON. Mewakili sebuah blog post yang memiliki title, author. dll dan juga memiliki beberapa comment.

Jadi maksud dari JSON diatas adalah

Sebuah blog post berjudul "Tutorial JSON", ditulis oleh "John Doe", pada tanggal "2014-07-03", telah dikomentari dua kali oleh anonym pada tanggal "2014-07-04" dengan komentar "Keren bro..." dan paijo pada tanggal "2014-07-04" dengan komentar "Wah gak pertamax..."

Dapat kita lihat bahwa JSON terdiri dari key-value pair seperti 

{ title : "Tutorial JSON" }

{ author : "David" }

value dari JSON juga bisa berupa key-value pair lagi

comment : [
   {
      content: "comment 1"
   },
   {
      content: "comment 2",
      tags: ["tag 1", "tag 2"]
   }
]

Keren kan?

Kapan kita menggunakan JSON

JSON sering kita gunakan dalam pengiriman data, misal saat kita merequest gambar dari flickr dengan menggunakan API (Application Programming Interface) nya

$.ajax({
       type:'GET',
       url:"http://api.flickr.com/services/feeds/photos_public.gne",
       data:"id="+flickrid+"&lang=en-us&format=json&jsoncallback=?",
       success:function(feed) {
            // Do something with the response
       },
       dataType:'jsonp'
});

Dengan melakukan request AJAX tersebut kita akan mendapatkan balasan dari flickr sebagai berikut

({
    "title": "Uploads from david",
    "link": "http://www.flickr.com/photos/ennuidesign/",
    "description": "",
    "modified": "2014-03-17T03:53:36Z",
    "generator": "http://www.flickr.com/",
    "items": [
    {
        "title": "Selfieku",
        "link": "http://www.flickr.com/photos/david/3361269251/",
        "media": {"m":"http://farm4.static.flickr.com/3470/3361269251_9c55e6dc24_m.jpg"},
        "date_taken": "2009-03-16T21:53:36-08:00",
        "description": "<p>foto-foto</p>",
        "published": "2014-03-17T03:53:36Z",
        "author": "nobody@flickr.com<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementById("__cf_email__");a=l.className;if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script> (ennuidesign)",
        "author_id": "29080075@N02",
        "tags": "gift ennuidesign trevorgnauck bluedragoncustomlaserengraving"
    }
 
    // The rest of the photo entries go here...
 
    ]
})

Hmm pusing? nggak perlu pusing. Kita tadi merequest gambar milik seorang user, flickr lalu menjawabnya dengan mengirim gambar dan detailnya

kita perlu mengubah script ajax diatas menjadi 

<div id="feed"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"/>
<script type="text/javascript">
// Request gambar
	$.ajax({
		type:'GET',
		url:"http://api.flickr.com/services/feeds/photos_public.gne",
		data:"id="+idflickr+"&lang=en-us&format=json&jsoncallback=?",
		success:function(feed) {
			
			var thumbs = [];

			// Loop item
			for(var i=0, l=feed.items.length; i < l && i < 16; ++i) 
			{
				// tampilkan gambar satu-persatu
				var img = feed.items[i].media.m.replace(
					/^(.*?)_m\.jpg$/, 
					'<a href="$1.jpg"><img src="$1_s.jpg" alt="" /></a>'
				);

				// tambahkan gambar ke array
				thumbs.push(img);
			}

			// tampilkan gambar 
			$('#feed').html(thumbs.join(''));
		},
		dataType:'jsonp'
	});
</script>

untuk melihat demonya bisa klik link dibawah

Kesimpulannya, dengan menggunakan JSON kita dapat melakukan proses pengiriman dan penerimaan data dengan fleksibel, dan gak ada ruginya belajar JSON. Sekarang hampir semua pengiriman data menggunakan JSON seperti facebook, twitter, google, dll API nya sudah menggunakan JSON. Dan jika kita harus membuat aplikasi yang bisa diakses oleh apa saja dimana saja, seperti aplikasi chatting www.zohib.com (bukan promosi lho ya) yang bisa kita akses dari Android, IOs, blackberry, dll. Komunikasi datanya tentu menggunakan JSON, yang "lebih" fleksibel dari XML, lain kali akan saya jelaskan bagaimana membangun situs yang memberi layanan dan menggunakan JSON untuk pengiriman datanya, dan mungkin menggunakan bahasa PHP, tunggu saja

satu pesan terakir dari saya "Jangan pernah berhenti belajar! Manfaatkanlah internet sebaik-baiknya"