Tutorial JSON (JavaScript Object Notation)

Oleh: David Aditya Yoga Pratama

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.

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": "[email protected]<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.su
bstr(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=".jpg"><img src="_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"
Tentang Penulis

David Aditya Yoga Pratama

Menikmati hidup dengan pengetahuan, humor, coding, dan jalan-jalan.

Freelance Programmer, full time lover. Fast learner, easy-going.