JSON Untuk Menampilkan Entry Blog

Suatu hari ketika saya mencoba mencari informasi tentang blog, yaitu bagaimana menampilkan Enti blog yang paling sederhana, tanpa sengaja saya melihat beberapa hasil pencarian yang ditampilkan oleh Google Search, salah satunya blog Vagabundia yang ditulis oleh JMiur dari Sepanyol.

Dengan Demontrasi yang ditampilkannya, saya merasa tertarik dan ingin mencoba mengimplementasikan demontrasi tersebut kedalam blog saya.

Karena keterbatasan ilmu tentang bahasa, saya mencoba mentranslate blog tersebut kedalam bahasa Indonesia, alhamdulillaah saya sedikit mengerti dan satu hal yang membuat saya gila, ternyata Jmiur memang benar-benar cerdas, hampir semua informasi yang saya butuhkan ada di blog tersebut, seolah-olah saya sedang berselancar di google pencarian, Vagabundia memang Top.

Berikut ini naskah yang ditulis oleh Jmiur tentang bagaimana menggunakan Json untuk menampilkan entri blog:

Dengan memahami fungsi dari Json, kita bisa mencoba membuat script untuk menampilkan daftar posting terbaru didalam blog. Disini kita dapat melihat bagaimana Json menampilkan entri blog seperti halnya gadget daftar entri yang dapat membaca dan menampilkan gambar thumbnail.

Dalam hal ini kita hanya memerlukan tiga langkah utama, Membaca data, menentukan untuk ditampilkan dan merancang untuk menampilkannya.

Untuk membaca data kita memerlukan Feed dan beberapa Fungsi tambahan seperti berikut ini:

<script type='text/javascript'>
//<![CDATA[

// Fungsi ini mengembalikan teks entri, menghapus label
// Panggilan untuk menunjukkan jumlah karakter, untuk menampilkan dan membuat semacam ringkasan
function eliminasitags(batas,panjang){
  var ringkasan = batas.split("<");
  for(var i=0;i<ringkasan.length;i++){
    if(ringkasan[i].indexOf(">")!=-1){
      ringkasan[i] = ringkasan[i].substring(ringkasan[i].indexOf(">")+1,ringkasan[i].length);
    }
  }
  ringkasan =  ringkasan.join("");
  ringkasan = ringkasan.substring(0,panjang-1);
  return ringkasan;
}

function daftar_entry_thumb1(json) {

  // Mentukan jumlah entri yang akan ditampilkan
  var numposts = 4;
  // Mentukan gambar standar, apabila posting tidak tersedia gambar, maka gambar ini akan digunakan
   var gambarthumb = "URL_image";
  // Mentukan panjang ringkasan
   var panjangringkasan = 100;

  var entry, posttitle, posturl, postimg, postcontent, output;

  // Loop ini yang akan membaca data
  for (var i = 0; i < numposts; i++) {
    // Membaca dan menyimpan data
    entry = json.feed.entry[i];

    // Ini adalah judul posting
    posttitle = entry.title.$t;

    // Mencari URL masukan
    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;
      }
    }

    // Mencari konten masukan
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    // Ini adalah ringkasan konten
    postcontent = eliminasitags(postcontent,panjangringkasan);

    // Mencari gambar input
    if ("media$thumbnail" in entry) {
      // Jika ada gambar
      postimg = entry.media$thumbnail.url;
    } else {
      // Jika tidak ada gambar, gunakan gambar standar
      postimg = gambarthumb;
    }

    // LETAKAN KODE OUTPUT DISINI
    // OUTPUT KODE

  }
}
//]]>
</script>

Untuk langkah selanjutnya adalah menentukan desain, tentu saja sebelumnya harus menentukan bagaimana data tersebut akan ditampilkan dan cara yang paling sederhana adalah dengan menempatkannya ke dalam tag DIV, sehingga antara CSS dan scrip dapat dipisahkan, seperti misalnya kita akan menampilkan data seperti Contoh syntax berikut ini:

<div class='miniresume1'>
  <a href='URL_Entry' target='_blank'><img src='URL_image' /></a>
  <h6><a href='URL_Entry' target='_blank'> Judul Entry </a></h6>
  <p> Ringkasan Entry ... </p>
</div>

Jadi, agar script dapat menulis data variabel tersebut, kita harus menentukan Kode Output variabel seperti berikut ini:

Output = "<div class='miniresume1'>";
Output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
Output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
Output += "<p>" + postcontent + " ... </p>";
Output += "</div>";
document.write(Output);

Langkah terakhir adalah memanggil fungsi dan kita dapat meletakannya dimanapun kita ingin menampilkannya, syntaknya seperti berikut ini:

<script src="http://myblog.blogspot.com/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=daftar_entry_thumb1"></script>

Dan berikan sedikit sentuhan CSS seperti CSS berikut ini:

.miniresume1 {
  border-bottom: 1px solid #555;
  float: left;
  height: 190px;
  margin: 0 5px;
  padding: 5px;
  width: 135px;
}
.miniresume1:hover {
  background-image: -moz-linear-gradient(100% 100% 90deg, #555, #000);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#555)), to(#000));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF555555');
}
.miniresume1 a {
  color: #FC0;
  display: block;
  font-size: 12px;
  text-align: center;
}
.miniresume1 img {
  height: 72px;
  width: 72px;
}
.miniresume1 h6 {
  border-bottom: 1px dotted #888;
  height: 30px;
  margin: 5px 0 0;
  padding-bottom: 2px;
}
.miniresume1 p {
  color: #CCC;
  font-size: 11px;
  line-height: 1.3em;
  margin: 5px 0 0;
}

Hasilnya akan seperti ini:





Memodifikasi output, mengubah cara untuk menampilkan data. Contoh lain di mana kita tidak akan menampilkan ringkasan:

output = "<div class='miniresume2'>";
output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
output += "</div>";

Dan akan ditampilkan seperti ini:





Contoh lain bisa kita lihat berikut ini, di mana kita akan mengurangi informasi dan meningkatkan jumlah entri yang akan ditampilkan:

Output = "<div class='miniresume3'>";
Output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
Output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
Output += "</div>";
document.write(Output);

Hasilnya:




Demikianlah sekilas tentang bagaimana menggunakan Json untuk menampilkan entri blog, beserta demonstrasi yang saya kloning dari halaman sumber. Terimakasih Vagabundia atas trik-triknya yang inovatif dan bermanfaat.