Membuat Plugin jquery (Part 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

, dengan font biru, class=”paragrafBiru”, dan ditambahkan plugin $("p").css("color","blue").addClass("paragrafBiru").pluginKu(); Kode diatas membuat semua tag

pada halaman web tulisannya berwarna biru, kemudian ditambahkan kelas “paragrafBiru” dan terakhir ditambahkan plugin. Sekarang kita ubah sedikit kode diatas sehingga menjadi //tag

, dengan font biru, class=”paragrafBiru”, dan ditambahkan plugin $("p").css("color","blue").addClass("paragrafBiru").pluginKu(); yang terjadi adalah warna teks tidak berubah menjadi biru, dan penyebabnya adalah tidak lain dan

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 $(/*selektor */).pluginKu( opsi );

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; };

}(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”.

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

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

yang akan menjadi tempat atau container plugin kita, misalkan kita membuat sebuah