Trik mengolah HTML on-the-fly menggunakan jQuery + JSON

Terkadang kita bingung bagaimana cara terbaik atau yang relevan untuk membuat atau mengolah html dengan menggunakan javascript, terdapat beberapa cara :

————————————————————————————————————————

1. Dengan membuat tag-tag html langsung

$(document).ready(function(){
var list = '';
for (var i=0; i<2; i++) {
list += '<li>'+i+'</li>';
}
});

('#list').html(list);

maka akan menghasilkan :

<ul id="list">
<li>0</li>
<li>1</li>
</ul>

Tetapi bagaimana jika kita bekerja dengan seorang web designer yang tugasnya membuat html + css dan web designer tersebut enggan menyentuh code javascript tersebut, misal code javascript nya sudah terlalu kompleks, juga terkadang kita takut jika ada yang menyentuh code javascript kita. Kemudian hal ini juga menyebabkan code javascript kita terlihat tidak bersih karena bercampur dengan tag-tag html dan bisa membingungkan.

————————————————————————————————————————

2. Dengan mengambil tag-tag html melalui AJAX

$(document).ready(function(){
$("#links").load("http://www.test.com/load/links.html");
});

HTML respon yang dihasilkan dari links.php sebagai berikut :

<li><a href="#">Main Page 1 </a></li><li><a href="#">Main Page 2</a></li><li><a href="#">Main Page 3</a></li>

Maka akan menghasilkan :

<ul id="links">
<li><a href="#">Main Page 1 </a></li>
<li><a href="#">Main Page 2</a></li>
<li><a href="#">Main Page 3</a></li>
</ul>

Hal ini memang terlihat lebih mudah, tetapi hal ini akan berdampak pada response time, karena tag-tag html yang kita load terlalu banyak karakternya padahal kita membutuhkan nama-nama link dan mungkin url nya, kemudian jika isi dari link-link tersebut tidak boleh kita hardcode, jadi harus berdasarkan referensi dari database / code php.

————————————————————————————————————————

3. Dengan menggunakan jQuery Template plugin

Dengan menggunakan hal ini memang lebih bagus dari pilihan yang tadi. Kita bisa menyimpan/membuat html yang akan dipakai didalam tag dengan kita tambahkan style=”display:none;” sehingga nanti tinggal diolah oleh si jQuery Template plugin, tetapi jika kita seseorang yang juga bekerja dengan menggunakan Smarty maka ini akan menjadi masalah karena akan terjadi tabrakan.

Bagaimana dengan melakukan load html dari server seperti no.2 diatas, kemudian kita load juga daftar nama-nama link dan url nya dari server, kemudian tinggal kita parse menggunakan jQuery Template plugin. Ini mengakibatkan kita harus melakukan 2 kali request. Tetapi penggunaan jQuery Template plugin ini tidak mudah dan lumayan kompleks.

————————————————————————————————————————

Cara yang terbaik adalah !!!!

1. Dengan mengolah html yang sudah siap pada

Dengan menyimpan/membuat html yang akan dipakai didalam tag dengan kita tambahkan style=”display:none;” :

<ul id="links">
<li class="sys_example" style="display:none;"></li>
</ul>

Kemudian kita olah :

$(document).ready(function(){
var container = $('#links');

/* kita cari tag <li> */
var obj = $('li.sys_example', container);
var item;

for (var i=0; i<2; i++) {

/* kita clone tag <li> tersebut */
item = obj.clone();

/* kita isi nomor kedalam <li> tersebut */
item.html(i);

/* kita buang class sys_example supaya tidak ter-clone lagi dan buat menjadi display:block supaya tidak tersembunyi */
item.removeClass('sys_example').css('display', 'block');

/* kemudian kita masukan kedalam <ul> dengan id links yang sudah ada di html */

item.appendTo(container );
}

delete item;
delete obj;
delete container;

});

————————————————————————————————————————

2. Dengan mengambil data dari server dan contoh html yang sudah siap pada

Dengan menyimpan/membuat html yang akan dipakai didalam tag dengan kita tambahkan style=”display:none;” :

<ul id="links">
<li class="sys_example" style="display:none;"><a href=""></a></li>
</ul>

Kemudian kita load daftar nama-nama link dan urlnya dari server dan langsung diolah terhadap html yang sudah kita siapkan barusan :

format JSON yang akan kita terima dari server adalah sebagai berikut :

[
{"url": "http://www.test.com/home.php", "nama": "Home"},
{"url": "http://www.test.com/about.php", "nama": "About"},
{"url": "http://www.test.com/contact.php", "nama": "Contact"}
]

Ingat ketika kita bangun format JSON tersebut di server jangan seperti diatas karena akan memperlambat response time, yaitu kita buang spasi atau enter dan buat menjadi 1 baris.

$(document).ready(function(){

/* disini kita melakukan request ke server untuk mengambil daftar link*/
$.getJSON("http://www.test.com/load/links.php",

function(json){

/* Cek apakah format json sudah benar, jika tidak masuk kedalam if, maka format masih salah */
if (json){
var item;
var obj;

/* kita ambil dulu si <ul> */
var container = $('#links');

for(item in json) {

/* kita cari tag <li> beserta isinya dan kita clone */
obj = $('li.sys_example', container).clone();

/* kita cari tag <a> dan isi atribut href dengan url, juga isi si <a> dengan nama link nya */
obj.find('a').attr('href', json[item].url).text(json[item].nama);

/* kita buang class sys_example supaya tidak ter-clone lagi dan buat menjadi display:block supaya tidak tersembunyi */
obj.removeClass('sys_example').css('display', 'block');

/* kemudian kita masukan kedalam <ul> dengan id links yang sudah ada di html */
obj.appendTo(container);
}

delete container;
delete obj;
delete item;
}

});
});

Pasti kita merasa “wah code javascript nya jadi tambah banyak dong !!!!”.

Tetapi dengan cara seperti diatas kita mempermudah pekerjaan designer. Designer dapat menambah atribut – atribut pada tag html nya dengan leluasa dan bisa melakukan test langsung terlebih dahulu terhadap tampilan dengan menghilangkan display:none, asal tidak menghilangkan nama class dan id yang sudah javascript pakai.

Hal ini hanya contoh kecil, mungkin terasa kurang maksimal penggunaanya, tetapi yang paling bermanfaat pada konsep ini adalah jika kita sedang membuat sesuatu yang lebih kompleks.

Terima Kasih, semoga bermanfaat.

“People Always Forget How Fast We Did A Job, But They Will Remember How well We Did It”

Category: Experience / Research