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": "
foto-foto
", "published": "2014-03-17T03:53:36Z", "author": "
[email protected]<script type="text/javascript"> /* */ (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
<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$/, '
' ); // tambahkan gambar ke array thumbs.push(img); } // tampilkan gambar $('#feed').html(thumbs.join('')); }, dataType:'jsonp' }); 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.
