Membuat Plugin jquery (Part 2)

(1)

(2)

Membuat Plugin jQuery (Part 2)

Oleh: muhamad iqbal

ini adalah bagian kedua dari seri membuat plugin jQuery, hal yang dibahas

mengenai pembuatan plugin yang dapat dipakai untuk aplikasi

sesungguhnya dan juga memperkenalkan sebuah plugin yang akan menjadi

studi kasus pertama dalam seri tutorial ini.

Plugin Yang Sebenarnya

Pada bagian sebelumnya kita sudah membahas tentang seluk beluk plugin dan juga membahas sebuah contoh plugin yang sangat sederhana. Contoh yang dibahas sebelumnya merupakan ilustrasi minimal sebuah plugin, akan tetapi sebenarnya kita belum membahas hal – hal lain yang mesti kita tambahkan agar plugin kita menjadi plugin yang sebenarnya. Apa saja yang perlu kita tambahkan? Yang pertama adalah “rantai”.

Merantaikan Plugin

Merantaikan (chaining) sebuah fungsi merupakan salah satu fitur jQuery, kita bisa dengan mudah untuk melakukan beberapa aksi secara berantai pada satu atau beberapa elemen html (elemen yang dipilih selektor) tanpa perlu kembali memanggil ulang selektor dan bahkan hanya dilakukan dengan hanya satu baris kode. Coba tambahkan baris berikut kedalam script pada file html yang sudah kita buat pada bagian sebelumnya.

//tag <p>, dengan font biru, class=”paragrafBiru”, dan ditambahkan plugin $("p").css("color","blue").addClass("paragrafBiru").pluginKu();

Kode diatas membuat semua tag <p> pada halaman web tulisannya berwarna biru, kemudian ditambahkan kelas “paragrafBiru” dan terakhir ditambahkan plugin. Sekarang kita ubah sedikit kode diatas sehingga menjadi

//tag <p>, dengan font biru, class=”paragrafBiru”, dan ditambahkan plugin $("p").css("color","blue").addClass("paragrafBiru").pluginKu();

(3)

tidak bukan karena pluginKu() tidak berantai, dan ketika fungsi .css() dipanggil terjadi kesalahan pada program. Salah satu tujuan kita saat menggunakan plugin adalah agar bisa digunakan selayaknya fungsi lain pada jQuery, dan agar tujuan itu tercapai tenyata tidaklah sulit, cukup dengan menambah satu baris kode pada plugin kita yaitu

return this;

dan baris tersebut ditambahkan pada kode plugin sehingga menjadi

+function($){

$.fn.pluginKu = function(){

this.text("ini dihasilkan oleh plugin");

return this; //satu baris ini yg menjaga mata rantai tidak terputus };

}(jQuery);

Jika ada yang merasa penjelasan yang diberikan terlalu panjang hanya untuk menjelaskan 2 kata yaitu return this, ingatlah bahwa dalam mengembangkan perangkat lunak kesalahan paling kecil sekalipun mampu mengakibatkan bencana nasional.

Menyediakan Pilihan

Hal berikutnya yang mesti dilakukan untuk membuat plugin yang sebenarnya adalah dengan menyediakan pilihan atau opsi. Maksudnya adalah plugin yang kita buat seharusnya dapat dipergunakan secara fleksibel dengan cara memberikan opsi pada pengguna untuk melakukan kostumisasi terhadap hasil kerja (output) dari plugin. Sebagai ilustrasi kita kembali ke contoh kita yaitu pluginKu(), yang outputnya selalu teks berisi “ini dihasilkan oleh plugin”. Teks tersebut merupakan teks default yang dihasilkan plugin, dan tentu saja teks default tidak selalu dibutuhkan, misalkan kita ingin menggantikan teks tersebut dengan “ini bukan teks default”.

Sekarang kita lihat dulu dari sisi pengguna, selama ini kita memanggil plugin dengan sintaks

$(/*selektor */).pluginKu();

dengan menyediakan opsi maka kita juga bisa memanggil plugin dengan cara

(4)

jadi untuk merubah output plugin, kita mengirim variabel opsi saat pemanggilan. variabel opsi sendiri merupakan sebuah objek javascript yang berisi pasangan kunci dan nilai (key-value pair, untuk lebih lanjut silahkan pelajari tentang objek di javascript). Objek yang kita maksud memiliki struktur seperti ini

var opsi = { teks : "ini bukan teks default" } $(/*selektor */).pluginKu( opsi );

//atau dengan alternatif lain tanpa variabel opsi

$(/*selektor */).pluginKu({ teks : "ini bukan teks default" });

//cara kedua lebih sering dipakai orang – orang, cek saja di internet

pertama tama yang perlu diketahui adalah key-value pair pada contoh diatas yaitu satu pasangan dengan key adalah teks dan value berupa string "ini bukan teks default", dalam javascript sebuah objek dapat dituliskan sebagai kumpulan key-value pair yang dipisahkan tanda koma didalam sebuah kurung kurawal ( { key : value, key : value } ). Walaupun kode diatas belum dapat berjalan, tapi kita sudah dapat menetapkan beberapa hal (dari sisi pengguna) yaitu objek digunakan hanya jika kita ingin melakukan kostumisasi, untuk mengatur teks, maka kita menggunakan teks dan mengisikan nilai berupa string yang kita kehendaki.

Setelah kita mengetahui bagaimana plugin kita nantinya akan dipergunakan, selanjutnya kita akan kembali membongkar mesin dalam plugin kita. Kita akan membuat objek default yang akan dipakai didalam plugin kita dan kemudian akan diuji apakah pengguna mempergunakan opsi atau tidak, langsung saja sehingga plugin kita menjadi

+function($){

$.fn.pluginKu = function( opsi ){

//setting default plugin, berisi teks default

var defSetting = { teks : "ini dihasilkan oleh plugin" } //$.extend() digunakan untuk menggabungkan objek

var setting = $.extend(defSetting, opsi); //setting, objek yang digunakan sebagai output

this.text(setting.teks); //setting.teks, menampilkan teks return this;

(5)

}(jQuery);

defSetting merupakan objek default yang kita bicarakan sebelumnya, kemudian hal yang

selanjutnya dilakukan adalah memanggil fungsi .extend() untuk menggabungkan objek, bagi mereka yang ingin informasi lengkapnya, silahkan cari referensi fungsi jQuery.extend() di website referensi jQuery. Pertanyaanya adalah, untuk apa menggabungkan objek? jawabannya adalah untuk mengetahui apakah pengguna merubah setting atau tidak. extend() menerima parameter berupa objek, dan pada contoh diatas kita menggunakan dua objek yaitu defSetting dan opsi, danyang kemudian terjadi adalah objek pertama ditambah oleh objek kedua. Sebagai ilustrasi misalkan kita mempunyai 2 objek “sop buah”

sop1 = { apel:”manis”, jeruk:”asem”, pepaya:”lumayan” } sop2 = { nanas:”lezat”, semangkat:”nikmat”, pepaya:”enak” }

dengan kedua objek diatas, bagaimana jika kita melakukan operasi

$.extend(sop1, sop2)

maka hasilnya akan menjadi

{

apel: "manis", jeruk: "asem", pepaya: "enak", nanas: "lezat", semangkat: "nikmat"

}

dan bila melakukan operasi

$.extend(sop2, sop1)

maka hasilnya akan menjadi

{

nanas: "lezat", semangkat: "nikmat", pepaya: "lumayan", apel: "manis", jeruk: "asem"

}

coba perhatikan pada nilai pepaya, pepaya terdapat pada kedua objek dengan nilai berbeda dan pada operasi extend() nilai dari objek pertama akan ditimpa oleh objek kedua jika memiliki nama yang sama. Itulah sebabnya mengapa pada operasi pertama pepaya memiliki nilai “enak” sedangkan pada operasi kedua pepaya memiliki nilai “lumayan”.

(6)

Jika kita kembali kepada contoh plugin, maka kita sudah mengetahui bahwa jika teks diganti oleh objek opsi maka setelah memanggil extend() teks default akan ditimpa nilainya oleh teks pada opsi sehingga bisa diubah sesuai keinginan pengguna. Dan sekarang plugin kita sudah mampu untuk menyediakan pilihan bagi penggunanya, silahkan salin kode diatas dan coba jalankan. Cukup sampai disini kita menggunakan contoh plugin (yang tidak berguna) itu, karena kita akan menggantikannya dengan yang lebih berguna.

Studi Kasus

tab plugin

Misalkan kita mempunyai sebuah halaman web seperti ini

misalkan halaman tersebut adalah sebuah artikel yang terdiri dari 3 bagian dan masing2 memiliki link diatasnya untuk navigasi langsung ke bagian tersebut (dengan hash / # pada link), untuk memperindah tampilan dan memudahkan navigasi, kita dapat membuat layoutnya menjadi

(7)

berbentuk tab seperti ini

bagaimana membuat halaman tersebut menjadi tab? solusinya dapat ditebak, yaitu dengan plugin. misalkan kita anggap plugin tersebut sudah selesai, dan sekarang kita menggunakan sudut pandang pengguna. Pertama kita harus mengikuti requirement atau kebutuhan untuk mempergunakan plugin tersebut pada file html kita. requirement yang dimaksud adalah format markup agar plugin kita nanti dapat berjalan sesuai dengan tujuan pembuatnya juga tujuan kita sebagai pengguna, dan format yang dimaksud adalah

membuat sebuah blok <div></div> yang akan menjadi tempat atau container plugin kita, misalkan kita membuat sebuah <div> yang lebarnya 50% layar dan memiliki ID “tab-container”

disini berisi markup untuk tab kita -->

</div>

kemudian di dalam container tersebut barulah kita menuliskan isi tab kita, tab kita terdiri dari

header atau bagian kepala untuk navigasi dan content yang menjadi wadah untuk isi masing

-masing tab. header merupakan sebuah list (<ul>) yang berisi link ke -masing - -masing isi tab, untuk contoh diatas maka markup yang ditulis adalah

(8)

<a href="#tab1">judul tab pertama</a> </li>

<a href="#tab2">judul tab kedua</a> </li>

<a href="#tab3">judul tab ketiga</a> </li>

</ul>

itu adalah markup header yang kita perlukan, jadi formatnya adalah didalam container kita perlu membuat sebuah list <ul> dengan kelas “tab” dengan didalamnya terdapat list <li> dengan kelas “tab-header” dan didalamnya terdapat link yang menunjuk ke ID content yang akan kita buat nanti. Ingat bahwa setiap nama kelas wajib seperti itu karena merupakan requirement dari plugin.

Sekarang kita lanjutkan kembali untuk konten

<div class="tab-content" id="tab1"> <h3>ini isi dari tab pertama</h3> </div>

<div class="tab-content" id="tab2"> <h3>ini isi dari tab kedua</h3> </div>

<div class="tab-content" id="tab3"> <h3>ini isi dari tab ketiga</h3> </div>

(9)

harus tepat seperti pada contoh, sedangkan untuk id boleh sesuai keinginan asalkan sama seperti alamat link pada bagian header. Setelah selesai membuat markup diatas sekarang adalah bagian pentingnya, yaitu menggunakan plugin

//pastikan jquery dan plugin sudah di include $(function(){

$("#tab-container").simpelTab(); });

</script>

sangat mudah, cukup dengan hanya satu baris kode pemanggilan plugin dan kemudian seakan sulap halaman web kita berubah rasa dan penampilannya menjadi lebih mutakhir. Sekarang kita sudah mengetahui cara mempergunakan plugin tersebut, sekarang kita akan membahas plugin itu sendiri. Karena plugin kita perlu nama, dan plugin kita merupakan plugin yang sederhana, maka izinkan saya untuk memperkenalkan “simpelTab”. Tapi sabar dulu, karena itu akan disajikan pada part selanjutnya, oke sampai jumpa.

Tentang Penulis

muhamad iqbal

Mahasiswa di bidang studi computer science. sementara ini masih menjelajahi secara umum seputar pengembangan web, aplikasi android, dan embedded system.