Blogger Tune-Up rehat sebentar untuk mengutak-atik script, dalam bahasa sederhananya sedang kehilangan semangat dan ide baru (mode : malas). Mungkin diantara teman blogger ada yang sedang mengutak-atik script untuk membuat "Artikel Terkait Plus Gambar Mini[1]" yang ada rangkuman artikelnya? Atau ada yang sedang mengutak-atik script "jQuery Tipsy[2]" dengan keterangan yang diambil dari rangkuman artikel? Kalau ada mari kita berdiskusi untuk membuat script-nya. Kedua script itu Blogger Tune-Up rencanakan akan menggunakan JSON[3] sebagai bahasa pemrogramannya. Tapi apa sebenarnya JSON? Mari kita belajar bersama.
JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript[4], Standar ECMA-262 Edisi ke-3 - Desember 1999[5]. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dan lain-lain. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data.
JSON terbuat dari dua struktur:
JSON terbuat dari dua struktur:
- Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash (hash table), daftar berkunci (keyed list), atau associative array.
- Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence).
Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya, semua bahasa pemprograman moderen mendukung struktur data ini dalam bentuk yang sama maupun berlainan. Hal ini pantas disebut demikian karena format data mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini.
Demikian situs resmi JSON menjelaskan. Jika belum mengerti silahkan ubek-ubek internet untuk memahami apa dan bagaimana bahasa pemrograman JSON.
Dari sekian banyak bahasa pemrograman JSON, Blogger Tune-Up akan sedikit menampilkan script JSON yang paling banyak di gunakan. Tabel di bawah ini merupakan unsur yang paling penting dari struktur objek JSON untuk Blogger.
Demikian situs resmi JSON menjelaskan. Jika belum mengerti silahkan ubek-ubek internet untuk memahami apa dan bagaimana bahasa pemrograman JSON.
Dari sekian banyak bahasa pemrograman JSON, Blogger Tune-Up akan sedikit menampilkan script JSON yang paling banyak di gunakan. Tabel di bawah ini merupakan unsur yang paling penting dari struktur objek JSON untuk Blogger.
| Objek | Keterangan | Contoh Hasil |
|---|---|---|
| json | Objek JSON | - |
| json.feed | Feed | - |
| json.feed.title.$t | Nama Blog | Blogger Tune-Up |
| json.feed.updated.$t | Tanggal dan waktu terakhir update | 2007-03-18, 20:43 |
| json.feed.author[] | Susunan dari Nama Author Blog | - |
| json.feed.author[0].name.$t | Nama Pemilik Blog | Hendriono |
| json.feed.openSearch$totalResults | Jumlah Artikel pada Blog | 165 |
| json.feed.entry[] | Susunan entri Blog | - |
| json.feed.entry[i].title.$t | Judul dari i artikel | Mengenal JSON |
| json.feed.entry[i].category[] | Susunan dari label i artikel | - |
| json.feed.entry[i].category[j].term | j label dari i artikel | jQuery |
| json.feed.entry[i].published.$t | Tanggal dan waktu artikel i diterbitkan | 2007-03-18, 12:27 |
| json.feed.entry[i].updated.$t | Tanggal dan waktu artikel i diupdate | 2007-03-18, 12:35 |
| json.feed.entry[i].author[] | Susunan i nama author/penulis artikel | - |
| json.feed.entry[i].author[0].name.$t | Nama penulis i artikel | Hendriono |
| json.feed.entry[i].content.$t | Isi dari i artikel, sebagai HTML | Blogger Tune-Up rehat sebentar…. |
| json.feed.entry[i].summary.$t | Rangkuman dari i artikel | - |
| json.feed.entry[i].link[] | Susunan link dari i artikel | - |
Dibawah ini contoh script penggunaan JSON pada Blog.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Blogger Tune-Up | Contoh Penggunaan JSON</title>
<script style="text/javascript">
function showrecentposts(json) {
// sebuah pengulangan dimulai
// dalam pengulangan ini kita mengambil entri dari feed dan paseing
for (var i = 0; i < jumposts; i++) {
// mengambil entri i dari feed
var entry = json.feed.entry[i];
// mengambil judul artikel
var posttitle = entry.title.$t;
// mengambil alamat artikel
// memeriksa semua alamat untuk link dengan rel = alternate
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// mengambil tanggal terbit, pengambilan hanya 10 karakter pertama
var postdate = entry.published.$t.substring(0, 10);
// mengambil nama author
var postauthor = entry.author[0].name.$t;
// mengambil isi artikel
// Jika feed Blogger di set pada FULL, maka isi merupakan daftar utuh
// Jika feed Blogger di set pada SHORT, maka isi merupakan daftar penggalan/rangkuman
if ("content" in entry) {
var postcontent = entry.content.$t;
}
else if ("summary" in entry) {
var postcontent = entry.summary.$t;
}
else var postcontent = "";
// menonaktifkan semua tag HTML
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// mereduksikan isi artikel sesuai dengan setting jumlah karakter
if (postcontent.length > numchars) postcontent = postcontent.substring(0, numchars);
// menampilkan hasil
document.write('<br>');
document.write('Entry #' + i + '<br>');
document.write('Post title : ' + posttitle + '<br>');
document.write('Post url : ' + posturl + '<br>');
document.write('Post author : ' + postauthor + '<br>');
document.write('Postdate : ' + postdate + '<br>');
document.write('Postcontent : ' + postcontent + '...<br>');
document.write('<br>');
}
}
</script>
</head>
<body>
<h2>Artikel Terbaru Blogger Tune-Up</h2>
<script style="text/javascript">
var jumposts=5;
var numchars=200;
</script>
<script src="http://modification-blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showrecentposts"></script>
</body>
</html>
Catatan Kaki dan Link JSON:
[1] Artikel Terkait Plus Gambar Mini
[2] jQuery Tipsy
[3] Bahasa Pemprograman JavaScript
[4] Standar ECMA-262 Edisi ke-3 - Desember 1999
[5] Using JSON (JavaScript Object Notation) with Yahoo! Web Services
[6] Using JSON in the Google Data Protocol
