Membuat Plugin jQuery (Part 1) Oleh: muhamad iqbal

Ini adalah postingan pertama dari serial yang akan membahas tentang Membuat plugin jQuery. Pada bagian ini kita akan membahas tentang konsep dasar plugin. Konsep dibahas dari dasar dengan harapan pembaca tutorial ini memiliki pengetahuan dasar dalam menggunakan jQuery agar tutorial ini dapat dimengerti dengan mudah.

Konsep Dasar Plugin Pada jQuery Mengapa Membuat Plugin? Bagi para pengguna jQuery pada umumnya pasti sudah mengenal atau mungkin mempergunakan plugin yang dapat ditemukan dengan mudah di internet, cukup dengan mengetikkan “jQuery plugin” di google maka akan muncul berbagai plugin untuk berbagai keperluan, seperti plugin untuk menampilkan slide show pada halaman web, atau menambahkan fitur popup dan lain sebagainya. Dari sekian banyak Plugin yang tersedia di rimba internet, rata – rata bisa diadopsi dengan mudah kedalam halaman web yang sedang kita kembangkan dengan cara relatif mudah, cukup dengan melakukan beberapa konfigurasi dan penyesuaian yang bisa dirujuk pada halaman web masing – masing pembuat plugin.

Bagi mereka yang belum begitu mengenal mengenai kemudahan menggunakan plugin, konsepnya sebenarnya sederhana. Sebuah plugin merupakan program yang memiliki kegunaan tersendiri dan di ditambahkan kedalam jQuery sehingga nantinya menjadi sebuah fungsi (function) yang dapat dipergunakan seperti fungsi – fungsi yang sudah disediakan oleh jQuery, contohnya seperti $("#sebuahID").onClick( //aksi saat di klik ); Dimana onClick() merupakan fungsi untuk menambahkan aksi atau respon ketika sebuah elemen (pada contoh, dengan id = sebuahID) di klik. Dengan plugin, misalkan kita membuat sebuah plugin dengan nama pluginKu(), maka kita dapat dengan mudah menggunakan plugin yang kita buat dengan memanggilnya pada jQuery seperti $( /*selektor*/ ).pluginKu(); dan kemudian yang terjadi adalah fungsi pluginKu() akan melakukan tugasnya pada elemen html yang sesuai dengan selektor yang kita pilih.

Kembali ke pertanyaan semula, kenapa kita membuat plugin? Jawabannya mudah karena

1. Plugin yang tersedia tidak mampu memenuhi kebutuhan kita, atau mungkin sesuai akan tetapi fitur yang ditawarkan ternyata berlebihan dibanding dengan kebutuhan, sehingga dirasa terlalu banyak overhead dalam kode yang kita pakai, hal tersebut akan menjadi masalah terutama bagi mereka yang memiliki sifat perfeksionis dalam mengembangkan aplikasi (saya pribadi cenderung memilih menggunakan plugin walaupun terdapat fitur yang tidak perlu, untuk menghemat waktu ); 2. Jika suatu bagian kode yang kita tulis ternyata bisa dipakai berulang kali pada proyek yang sama ataupun pada proyek – proyek lain, maka akan mempermudah kita jika membuatnya menjadi plugin, menghemat waktu sesuai dengan jargon DRY (don’t repeat yourself) yang artinya jangan membuang – buang waktu untuk melakukan hal yang sama berulang ulang; 3. Terakhir tentu saja jika kita memahami tentang plugin, tentu kita mampu melakukan modifikasi atau membuat ulang plugin yang disediakan oleh orang lain sesuai kebutuhan kita. Hal tersebut menjadi keuntungan ganda karena selain nantinya kita dapat menghasilkan plugin yang dapat kita pakai, kita juga punya keuntungan karena tidak membuatnya dari nol dan sekaligus mengatasi masalah yang ditujukan oleh poin nomor 1.

Tentunya poin – poin yang disebutkan diatas belum lengkap, tapi semoga keuntungan yang ditawarkan membuat kalian cukup tergiur dan bertambah minatnya untuk membuat plugin sendiri dan membuat kalian terus membaca tulisan ini.

Mulai Membuat

Untuk memulai kita perlu membuat sebuah function dan menambahkannya kedalam jQuery. Cara menambahkannya adalah dengan memasukkan function tersebut kedalam $.fn atau jQuery.fn seperti $.fn.pluginKu = function(){ //kode untuk pluginKu }; Sekarang fungsi pluginKu() sudah bisa digunakan seperti pada contoh sebelumnya. Penjelasannya adalah karena tanda $ atau jQuery (sama saja, $ sering digunakan karena lebih singkat) merupakan objek jQuery yang selalu kita pakai, dan pada javascript setiap objek mempunyai prototype yang merupakan salah satu cara bagi suatu objek untuk “mewarisi” fungsi atau property dari objek lain. Jadi jQuery menggunakan .fn untuk menggantikan .prototype (dibuat alias, jadi lebih singkat) dan kita bisa menambahkan fungsi baru pada prototype dengan cara menambahkannya seperti pada contoh diatas, dan kemudian setelah ditambahkan bisa kita akses dari mana saja didalam kode kita. Untuk kalian yang belum familiar dengan konsep prototype bisa dipastikan sekarang mengalami sedikit kebingungan, sekarang lebih baik kita lewat saja, tetapi jika ingin mengetahui lebih lanjut, silahkan cari tahu soal prototype pada javascript.

Kemudian yang perlu diperhatikan adalah, didalam fungsi yang kita tulis kita harus berhati – hati

jangan sampai nama variabel yang kita pakai sudah dipakai diluar fungsi, karena variabel diluar fungsi akan menjadi variabel global yang nilainya bisa saja secara tidak sengaja berubah karena di dalam fungsi kita mempergunakan nama yang sama. Untuk mengatasi permasalahan tersebut, maka para programmer diluar sana menggunakan suatu metode bernama IIFE (immediately-invoking function expression) apakah IIFE itu? Singkatnya IIFE digunakan untuk membuat lingkup (scope) sehingga variabel diluar lingkup itu tidak dapat di akses dari dalam, begitupun sebaliknya. Bagi mereka yang pertama kali mengetahui tentang IIFE sudah tentu akan kebingungan, maka dari itu kita lanjutkan saja ke contoh berikutnya (dan sempatkan untuk membaca soal IIFE)

(function($){ $.fn.pluginKu = function(){ //kode untuk pluginKu }; }(jQuery));

Dari contoh diatas terlihat bahwa kode kita sebelumnya dibungkus (wrapped) oleh suatu blok fungsi yaitu (function($){ //kode sebelumnya }(jQuery)); yang artinya suatu fungsi dieksekusi secara langsung (bukan deklarasi), maka dari itu disebut dengan istilah immediately-invoking (dipanggil-segera) yang dilakukan dengan cara menambahkan kurung. Adapun alternatif sintaksnya yaitu dengan (function($){ //kode sebelumnya })(jQuery); walaupun penulisan kurungnya dirubah akan tetapi hasilnya sama saja. Saya juga menemukan sintaks lain yaitu dengan menambahkan operator seperti +, !, ~, - sebelum tulisan function (sebagai contoh, pengembang plugin bootsrap menggunakan tanda +). Jadi lengkapnya semua alternatif penulisan kita tampilkan (function($){ $.fn.pluginKu = function(){ //kode untuk pluginKu }; })(jQuery); //posisi kurung dirubah

+function($){ //menggunakan + daripada kurung, bisa diganti - ~ atau ! $.fn.pluginKu = function(){ //kode untuk pluginKu };

}(jQuery); Dari sini kita akan menggunakan sintaks IIFE dengan tanda + pada contoh – contoh berikutnya.

Sejauh ini kita belum menentukan apa yang akan dilakukan oleh pluginKu(),misalkan plugin kita ini tugasnya adalah untuk menampilkan tulisan “ini dihasilkan oleh plugin” (yang sebenarnya tidak berguna) maka kita dapat menuliskan kode dalam file html sebagai berikut

bukan dari plugin

jalankan <script src="jquery.js"> <script> //pastikan jquery sudah di include $(function(){ //$(function(){}) digunakan agar kode didalamnya //dijalankan setelah halaman selesai dimuat; +function($){ $.fn.pluginKu = function(){ //kode plugin kita, tugasnya untuk menambahkan teks this.text("ini dihasilkan oleh plugin"); }; }(jQuery);

$("h1").pluginKu();

//plugin dipanggil pada elemen h1

//plugin dipanggil pada elemen dengan kelas untuk-plugin $(".untuk-plugin").pluginKu(); //jika id jalankan di klik $("#jalankan").on("click", function(){ $("div").pluginKu(); //plugin dipanggil pada elemen div

}); });

Silahkan simpan contoh sebagai file html, pastikan dalam folder yang sama sudah terdapat file jQuery.js (atau sesuaikan nama dengan file jQuery yang kalian miliki). Coba jalankan pada web browser dan lihat apa yang terjadi. Terlihat bahwa plugin bisa digunakan dengan mudah, dan saya kira kode program cukup menjelaskan apa yang terjadi tanpa perlu dibahas lagi.

Sebelum mengakhiri bagian ini dan melanjutkan ke topik yang lebih menarik lagi mengenai konsep lebih lanjut dalam membuat plugin, ada beberapa tips dalam penyusunan file. Biasanya sebuah plugin ditulis pada file javascript tersendiri dan berada dalam satu folder dengan file javascript jQuery, biasanya file plugin dinamakan dengan nama “jquery.nama_plugin.js”. hal tersebut memanglah tidak mutlak namun tentunya lebih baik jika kita meniru tata cara programmer pada umumnya. Maka dari itu kita sekarang membuat file baru yaitu “jquery.pluginku.js” memasukkannya kedalam file html sesudah jQuery. Struktur folder baru folder |-contoh1.html |-js |-jquery.js |-jquery.pluginku.js file jquery.pluginku.js +function($){ $.fn.pluginKu = function(){ //kode plugin kita, tugasnya untuk menambahkan teks this.text("ini dihasilkan oleh plugin"); }; }(jQuery); Perubahan pada html <script src="js/jquery.js">

<script src="js/jquery.pluginku.js"> <script> $(function(){ $("h1").pluginKu(); //plugin dipanggil pada elemen h1 //plugin dipanggil pada elemen dengan kelas untuk-plugin $(".untuk-plugin").pluginKu(); //jika id jalankan di klik $("#jalankan").on("click", function(){ $("div").pluginKu(); //plugin dipanggil pada elemen div }); });

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