Tutorial Json (Javascript Object Notation)

18 views

Perkembangan aplikasi ketika ini menuntut adanya komunikasi antar aplikasi dengan user dan sebaliknya. Yang menjadi duduk kasus utama yaitu bagaimana standar pengiriman datanya? JSON bekerjsama bukanlah hal yang gres dan sulit, hanya sebuah standar yang disepakati dunia internasional untuk pengiriman data. Kabar baiknya JSON juga sanggup diterapkan di aneka macam bahasa pemrograman. Ingin tau lebih lanjut, ayo simak tutorialnya.

 

Pada tutorial kali ini akan aku bahas 

1. Apa itu JSON

2. Bagaimana Penulisan JSON

3. Apa manfaat dan bagaimana penerapan JSON

 

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

a. Terdiri dari key-value pairs, referensi : nama => David, usia => 19
b. Ordered list, referensi : 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 goresan pena diatas? itulah yang dinamakan JSON. Mewakili sebuah blog post yang mempunyai title, author. dll dan juga mempunyai 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 sanggup berupa key-value pair lagi

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

Keren kan?

Kapan kita memakai JSON

JSON sering kita gunakan dalam pengiriman data, misal ketika kita merequest gambar dari flickr dengan memakai 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 melaksanakan request AJAX tersebut kita akan mendapat akibat 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 kemudian 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 itemfor(var i=0, l=feed.items.length; i < l && i < 16; ++i) {// tampilkan gambar satu-persatuvar img = feed.items[i].media.m.replace(/^(.*?)_m\.jpg$/, '<a href="$1.jpg"><img src="$1_s.jpg" alt="" /></a>');// tambahkan gambar ke arraythumbs.push(img);}// tampilkan gambar $('#feed').html(thumbs.join(''));},dataType:'jsonp'});
</script>

untuk melihat demonya sanggup klik link dibawah

Kesimpulannya, dengan memakai JSON kita sanggup melaksanakan proses pengiriman dan penerimaan data dengan fleksibel, dan gak ada ruginya mencar ilmu JSON. Sekarang hampir semua pengiriman data memakai JSON menyerupai facebook, twitter, google, dll API nya sudah memakai JSON. Dan jikalau kita harus menciptakan aplikasi yang sanggup diakses oleh apa saja dimana saja, menyerupai aplikasi chatting www.zohib.com (bukan promosi lho ya) yang sanggup kita terusan dari Android, IOs, blackberry, dll. Komunikasi datanya tentu memakai JSON, yang “lebih” fleksibel dari XML, lain kali akan aku jelaskan bagaimana membangun situs yang memberi layanan dan memakai JSON untuk pengiriman datanya, dan mungkin memakai bahasa PHP, tunggu saja

satu pesan terakir dari aku “Jangan pernah berhenti belajar! Manfaatkanlah internet sebaik-baiknya”

Author: 
    author
    No related post!