Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Cara Membuat Plugin Jquery Sendiri – Panduan Dasar Lengkap

Jquery Plugin

Beberapa waktu lalu, saya merilis salah satu plugin jquery buatan saya sendiri, yaitu MyGalleryBox. Ini adalah plugin jquery pertama yang saya buat. Walaupun masih sangat sederhana, tapi ini adalah awal yang baik untuk kedepannya. Setidaknya, saya sudah paham konsepnya.

Nah, pada kesempatan kali ini saya akan berbagi mengenai bagaimana caranya membuat plugin jquery sendiri, berdasarkan pengetahuan dan pengalaman saya yang juga saya dapat dari orang lain. Walaupun saya juga masih newbie dalam pembuatan plugin, namun untuk berbagi tidak harus jadi “mastah” dulu :).

Jquery Plugin

Syarat-syarat

Sebelum anda membaca lebih lanjut dan membuat plugin jquery, ada beberapa hal yang seharusnya sudah anda lakukan.

1. Anda sudah mengenal apa itu Jquery, mengetahui cara pakainya dan pernah/sering menggunakannya.

2. Anda sudah menguasai dasar-dasar javascript.

3. Anda sudah menguasai banyak fungsi yang ada pada Jquery seperti penambahan objek, pengulangan, pengambilan data, dan sebagainya.

Pengenalan Dasar

Dalam penggunaan jquery yang tentunya sudah sering anda terapkan dalam projek web, anda pasti sering menulis kode dengan pola seperti ini : $(“selector“).fungsiJquery(nilai/fungsi); . Misalnya, untuk menambahkan teks pada markup HTML dengan class “teks1”, anda menulis kode seperti ini $(“.teks1”).text(“Ini teks 1”);.

Pada dasarnya, membuat plugin adalah membuat fungsi baru seperti fungsi .text(“nilai”) diatas pada file yang berbeda. Bedanya lagi, fungsi plugin biasanya lebih kompleks, dengan perbagai option pada penggunaannya.

Pembuatan plugin jquery juga menerapkan konsep Object Oriented Programming (OOP). Jadi, bagi anda yang sudah familiar dengan metode ini, membuat plugin akan lebih mudah. Jika belu, silahkan klik link-nya atau cari bacaan lain yang lebih lengkap.

Mengapa Membuat Plugin ?

Nah, mengapa kita harus membuat plugin? padahal sudah banyak sekali plugin-plugin di internet yang tinggal kita download. Alasan kita harus membuat plugin adalah karena :

1. Walaupun ada banyak plugin diluar sana, tetapi plugin yang benar-benar sesuai dengan kebutuhan kita sangat sulit dicari. Alih-alih bingung mencari, kenapa tidak membuatnya sendiri? lebih puas!.

2. Sampai kapan kita akan terus disuapi oleh hasil karya orang lain? Mau sampai kapan kita tidak bisa mandiri?

3. Ketika ada bug atau bentrok pada plugin orang yang kita pakai, kita akan sulit untuk memperbaikinya karena kita tidak tahu bagaimana struktur kodenya.

Dan sebagainya..

Memulai

Pada praktek ini, kita akan membuat plugin jquery sederhana yang berfungsi untuk mewarnai teks pada markup tertentu. Sebut saja, nama pluginnya “Colorize”. Konsep pada praktek ini sebenarnya saya ambil dari website resmi jquery, bisa anda lihat di sini : How to create Jquery Plugin.

Karena disitu berbahasa inggris, yang tidak semua orang indonesia lancar dan tutorialnya ditulis secara ringkas & seadanya, jadi saya terjemahkan dan tulis ulang dengan harapan lebih mudah dimengerti.

Sebelum kita mulai lebih lanjut, tentunya pastikan anda sudah membuat file baru dengan format .js pada projek web anda, dan panggil di file HTML untuk penggunaannya.

Pertama-tama, anda harus mengetahui bahwa pembuatan “fungsi baru” atau plugin pada JQuery memiliki struktur kode yang kurang lebih seperti di bawah ini.

(function ($) {

$.fn.namaplugin = function(parameter) {
//kodenya disini
}

function namafungsi(parameter) {
//kodenya disini
}

}( jQuery ));

– Kode berwarna biru berfungsi sebagai scope, yang fungsinya melindungi variabel yang ditulis didalamnya agar tidak bisa digunakan di luar kode tersebut. Jadi walaupun pada halaman web terdapat 2 variabel yang sama, itu tidak akan mempengaruhi satu sama lain. Jadi, semacam melokalisasi.

– Kode berwarna hijau adalah fungsi utama untuk plugin. Disini ditulis kode-kode inti, default-default untuk options, dan sebagainya. Dalam satu plugin, bisa saja terdapat beberapa fungsi utama, walaupun kurang bagus dan tidak dianjurkan.

– Kode berwarna merah adalah fungsi yang nantinya akan digunakan pada fungsi utama, baik dengan menggunakan parameter maupun tidak. Fungsi seperti ini bisa ditulis sebanyak mungkin sesuai kebutuhan.

Lalu, untuk penggunaannya dituliskan pada tag <script> seperti pada umumnya.

$(document).ready(function() {
$(“selector”).namaplugin();
});

atau, jika terdapat beberapa options, di tulis seperti ini :

$(document).ready(function() {
$(“selector”).namaplugin({
option1 : value1,
option2 : value2
});
});

Contoh Plugin – Colorize

Seperti yang saya katakan bahwa pada praktek ini, kita akan membuat plugin “Colorize”. Pada contoh ini saya akan menerapkan konsep-konsep dasar pada pembuatan plugin. Saya akan mewarnai setiap kode dan penjelasannya bisa anda lihat dibagian bawah.

(function ($) {

$.fn.colorize= function(options) {

this.addClass(“colorized”);

var settings = $.extend({
color: “green”,
bgcolor: “white”
}, options );

return this.each(function() {

$(this).css({
“color”:settings.color,
“background-color”:settings.bgcolor
});

$(this).click(function(){
note(settings.color);
});

});

}

function note(color) {
alert(“Warna teksnya adalah”+color);

}

}(jQuery));

Penjelasan Kode :

– Kode yang berwarna hijau berfungsi untuk menambahkan class pada selector yang dipilih. Jadi misalkan selectornya adalah tag <p>, maka ketika ditambahkan plugin ini, semua tag <p> akan mempunyai class “colorized”.

– Kode berwarna oren berfungsi untuk menambahkan options beserta defaultnya. Pada kode di atas, nama variable optionnya adalah “settings“, yang terdiri dari properti “color” dengan nilai default “green” dan “bgcolor” dengan nilai default “white“. Penamaan untuk nama variable options, properti dan nilai-nya terserah kita, karena itu sifatnya seperti variable yang akan digunakan selanjutnya.

– Fungsi each() Kode berwarna merah berfungsi untuk “melakukan sesuatu” pada setiap selector yang menggunakan plugin ini.  Umumnya, fungsi each() ini digunakan untuk menerima options baik yang dimasukkan oleh pengguna plugin maupun options default.

– Kode berwarna coklat berfungsi untuk menambahkan css pada tiap elemen yang menggunakan plugin ini. Seperti yang anda lihat, nilai untuk properti css yang ada diambil dari options yang telah di-set. Misalnya properti “color” yang mengambil nilai dari settings.color.

– Kode berwarna biru menyatakan bahwa jika elemen yang menggunakan plugin ini di klik, maka fungsi note() berjalan. Nah, pada pemakaiannya, fungsi note ini sendiri membutuhkan parameter. Pada kode di atas, parameter yang diambil adalah nilai dari settings.color.

– Terakhir, kode berwarna ungu berfungsi untuk menentukan “apa yang dilakukan fungsi note()” jika parameternya sudah diisi. Pada kode di atas, fungsi note akan menjalankan fungsi alert() saat parameternya terisi. Parameter fungsi note() ini akan terisi jika elemen yang menggunakan plugin di klik, seperti yang dijelaskan pada kode berwarna biru

Agar lebih memahami apa yang saya sampaikan disini, silahkan praktekkan sendiri kode plugin diatas. Sudah diuji saya sendiri.

Setelah membaca artikel ini, saya sangat menganjurkan anda untuk membaca posting ini juga : MyGalleryBox – Plugin jquery untuk galeri dan lightbox. Disitu anda bisa membedah kode-kode pada plugin itu. Insyaallah mudah dipahami.

Selamat belajar. Semoga bermanfaat.

~Muhammad Syakirurohman~

3 thoughts on “Cara Membuat Plugin Jquery Sendiri – Panduan Dasar Lengkap

Tinggalkan Balasan