Pertama kita buat file saya.js, isi file ini yang akan berfungsi seperti objek global bagi Anda dengan isi seperti berikut :

(function(){
if (window.Saya) {var Saya = window.Saya;}

var Saya = window.Saya = function() {return new Saya.init();};

Saya.apply = function(o, c, defaults){
if(defaults){Saya.apply(o, defaults);}
if(o && c && typeof c == 'object'){for(var p in c){o[p] = c[p];}}
return o;
};

Saya.apply(Saya, {
version: '1.0.0',
init: function() {return this.version;}
});

Saya.ui = Saya.ui || {};
})();

Objek global ini akan memasang objet “Saya” pada objek window, sehingga kita tidak perlu melakukan inisialisasi lagi ketika akan menggunakan nya, contoh :

alert(Saya.init());

Akan memunculkan dialog alert dengan isi “1.0.0″.

Pada javascript diatas terdapat “Saya” bisa diganti sesuka Anda, mau jadi “Maneh” ato “Kehed” ato “Parah”, tapi nanti saja setelah Anda paham pemakaiannya. Juga terdapat Saya.ui = Saya.ui || {}; ini nanti kita bahas.

Kemudian buat file lagi dengan nama oop_saya.js, isi file ini akan berfungsi sebagai objek yang Anda pakai tergantung kebutuhan pada halaman dengan isi sebagai berikut :

Saya.ui.OOP_Saya = function() {
return {

method_saya: function() {
alert("Saya Tea !!!!");
},

method_anda: function() {
alert("Anda Saja !!!");
}

}
}();

Nah pada code diatas terdapat dua fungsi method_saya dan method_anda, maka ketika memakai tinggal melakukan include file javascript terlebih dahulu pada html :

<script src="saya.js" type="text/javascript"></script>
<script src="oop_saya.js" type="text/javascript"></script>

Kemudian tinggal pada link diatas kita rubah jadi seperti ini :

<a href="javascript:;" onclick="javascript:Saya.method_saya();">Saya</a>

<a href="javascript:;" onclick="javascript:Saya.method_anda();">Anda</a>

Nah kenapa harus ada Saya.ui. pada oop_saya.js, ini dimaksudkan bagi kita membedakan/mengelompokan mana javascript yang kita pakai untuk mengolah User Interface (UI) atau HTML, mana javascript yang akan kita pakai sebagai Utility atau fungsi – fungsi bantuan, karena mungkin jika kita membuat Utility akan dipakai di objek javascript untuk mengolah UI yang lainnya.

Bagaimana cara menambah supaya kita bisa membuat Saya.utility.

Pertama kita tambahkan :

Saya.utility = Saya.utility || {};

Setelah :

Saya.ui = Saya.ui || {};

Pada file saya.js

Kemudian kita buat file utility.math.js, dengan isi sebagai berikut :

Saya.utility.Math = function() {
return {

roundNumber: function (num, dec) {
var snum=num.toString()+"000000000000000001";
var sep=snum.indexOf(".");
var beg=snum.substring(0,snum.indexOf("."));
snum=snum.substring(eval(snum.indexOf(".")+1),snum.length);
var dig=snum.substring(0,eval(dec-1));
snum=snum.substring(eval(dec-1),dec);
snum=parseInt(snum);
gohigher=false;
if (snum>4) {gohigher=true;}
if (gohigher) {snum=parseInt(snum);snum++;}
snum=snum.toString();
num=beg+"."+dig+""+snum;
return num;
},

rand32: function (){return Math.floor(Math.random()*4294967295);},

}
}();

Bagaimana kita menggunakan Utility ini pada object_saya.js :

method_saya: function() {
alert(Saya.utility.Math.rand32());
},

Kemudian kita bisa membuat, contoh :

- Saya.utility.Uri

- Saya.utility.Text

Tapi harus hati – hati ketika membuat fungsi pada objek ini, harus dispisahkan dengan tanda koma (,), kecuali fungsi yang paling terakhir jangan memakai tanda koma (,), karena akan menyebabkan error.

Tinggal dikembangkan lagi sesuai kebutuhan.

Terima Kasih, semoga bermanfaat.

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

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

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”