Membuat jQuery Plugin: Fancy String - Bagian 1
Ridwan Fajar 23 Januari 2016
Pengantar
Jika Anda seorang web developer, pasti Anda mengenal jQuery. Library untuk mempermudah web developer dalam melakukan manipulasi DOM dan menggunakan operasi Javascript tradisional yang cukup rumit menjadi lebih ringkas. Selain manipulasi DOM, terdapat juga beberapa efek - efek yang dapat menambah halaman web yang dikembangkan menjadi lebih menarik dan dinamis.jQuery sendiri menyediakan berbagai function yang bersifat umum. Tidak semua hal disediakan jQuery. Misal ketika Anda menginginkan function jQuery untuk melakukan resize gambar otomatis. Anda tidak akan mendapatkannya di distribusi jQuery standar. Anda harus mencari orang lain yang menyediakannya dalam bentuk jQuery plugin. Dan hanya dengan menyertakan script jQuery dan plugin tersebut di halaman web yang membutuhkannya, maka fitur resize gambar otomatis tersebut akan terpasang di halaman web tersebut.
jQuery plugin adalah salah satu fitur jQuery yang menyediakan ekstensibilitas dalam pengembangan jQuery. Seseorang dapat membuat plugin sesuai kebutuhannya dan dapat mendistribusikannya secara luas sesuai dengan standar yang telah ditetapkan oleh jQuery Foundation. Dengan membangun jQuery plugin, Anda telah turut serta dalam kontribusi untuk mengembangkan jQuery menjadi lebih baik.
Pendahuluan
Di tutorial kali ini kita akan membuat sebuah fitur bernama "fancy string" sebuah jQuery plugin yang dapat melakukan manipulasi bentuk string. Untuk tutorial ini akan kita batasi saja hingga fitur title() yaitu fitur yang dapat membuat setiap huruf awal sebuah kata menjadi huruf kapital. Fungsi title() ini terinspirasi dari built-in function title() yang dimiliki Python.Perangkat yang dibutuhkan
Anda dapat menggunakan text editor apapun yang dapat membantu Anda menulis kode HTML, CSS dan Javascript. Kemudian silahkan gunakan web browser seperti Chrome, Firefox, ataupun Safari. Untuk membuat jQuery plugin Anda harus menyertakan script jQuery standar di halaman web yang akan menggunakan jQuery plugin.[caption id="attachment_7205" align="aligncenter" width="219"]
struktur folder dan file yang akan dibentuk di tutorial ini[/caption]
Membuat halaman index
Di halaman index, kita hanya akan membuat sebuah paragraf yang belum diberikan operasi "Fancy String". Di dalam halaman index tersebut kita sertakan dua script yaitu jquery.min.js yang dapat Anda unduh dari website resmi jQuery, dan script jquery.fancy-string.js yang akan diisi oleh plugin yang akan kita buat. Tempatkan script yang dibutuhkan kedalam sebuah folder yang bernama asset kemudian buat lagi folder dengan nama js.--- kode index.html ---
<!DOCTYPE html>
<html>
<head>
<title>Membuat Plugin jQuery</title>
</head>
<body>
<div style="margin:0 auto; padding:50px">
<p class="fancy-string">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
</div>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.fancy-string.js"></script>
</body>
</html>
Membuat bagian utama Fancy String
Setelah membuat file index dan mendapatkan script jQuery standar, sekarang kita akan membuat bagian utama plugin "Fancy String". Kita akan mulai dengan membuat enkapsulasi untuk plugin terlebih dahulu.--- kode jquery.fancy-string.js 1 ---
(function($){
// kodenya nanti disini
})(jQuery);
Kemudian Anda dapat membuat function dengan nama apapun yang Anda butuhkan. Kali ini kita akan membuat sebuah function dengan nama fancy_string. Dengan memanggil $.fn Anda sudah menambahkan function bernama fancy_string ke dalam jQuery. Function fancy_string ini menerima satu parameter yaitu setting yang akan menerima input berupa objek Javascript.
--- kode jquery.fancy-string.js 2 ---
(function($){
$.fn.fancy_string = function(settings)
{
console.log('memanggil fancy string...');
// kode lanjutannya disini
};
})(jQuery);
Sekarang kita tambahkan kode untuk penyesuaian input yang diberikan developer kedalam option yang didefinisikan di dalam function fancy_string.
--- kode jquery.fancy-string.js 3 ---
(function($){
$.fn.fancy_string = function(settings)
{
console.log('memanggil fancy string...');
var opts = {
mode : "",
};
var opts = $.extend(opts, settings);
var raw_text = $(this).html();
var result_text = raw_text;
switch (opts.mode){
case "title":
raw_text = result_text = raw_text.toLowerCase();
result_text = title(raw_text);
break;
default:
result_text = raw_text;
break;
}
$(this).html(result_text);
};
})(jQuery);
Dan kita akan mengambil teks didalam elemen yang diminta. Elemen HTML yang akan diberikan operasi fancy_string akan digantikan oleh keyword this.
--- kode jquery.fancy-string.js 4 ---
(function($){
$.fn.fancy_string = function(settings)
{
console.log('memanggil fancy string...');
var opts = {
mode : "",
};
var opts = $.extend(opts, settings);
var raw_text = $(this).html(); // kode untuk mengambil isi html dari sebuah elemen
var result_text = raw_text;
switch (opts.mode){
case "title":
raw_text = result_text = raw_text.toLowerCase();
result_text = title(raw_text);
break;
default:
result_text = raw_text;
break;
}
$(this).html(result_text);
};
})(jQuery);
Lalu kita akan membuat pilihan berupa switch untuk menentukan operasi manakan yang akan dilakukan sesuai permintaan developer.
--- kode jquery.fancy-string.js 5 ---
(function($){
$.fn.fancy_string = function(settings)
{
console.log('memanggil fancy string...');
var opts = {
mode : "",
};
var opts = $.extend(opts, settings);
var raw_text = $(this).html();
var result_text = raw_text;
// switch untuk menentukan operasi string
switch (opts.mode){
case "title":
raw_text = result_text = raw_text.toLowerCase();
result_text = title(raw_text);
break;
default:
result_text = raw_text;
break;
}
$(this).html(result_text);
};
})(jQuery);
Terakhir kita akan mengganti teks dari elemen yang diberikan operasi fancy_string dengan teks yang baru
--- kode jquery.fancy-string.js 6 ---
(function($){
$.fn.fancy_string = function(settings)
{
console.log('memanggil fancy string...');
var opts = {
mode : "",
};
var opts = $.extend(opts, settings);
var raw_text = $(this).html();
var result_text = raw_text;
switch (opts.mode){
case "title":
raw_text = result_text = raw_text.toLowerCase();
result_text = title(raw_text);
break;
default:
result_text = raw_text;
break;
}
// menyimpan kembali hasil operasi string
$(this).html(result_text);
};
})(jQuery);
Membuat fitur mengubah string ke dalam bentuk title
Untuk melakukan operasi title, kita harus mengecilkan dahulu semua huruf, kemudian mengganti setiap huruf awal pada kata. Kita dapat melakukannya dengan pengulangan for ataupun forEach.--- kode jquery.fancy-string.js 7 ---
(function($){
$.fn.fancy_string = function(settings)
{
console.log('memanggil fancy string...');
var opts = {
mode : "",
};
var opts = $.extend(opts, settings);
var raw_text = $(this).html();
var result_text = raw_text;
switch (opts.mode){
case "title":
raw_text = result_text = raw_text.toLowerCase();
result_text = title(raw_text);
break;
default:
result_text = raw_text;
break;
}
$(this).html(result_text);
};
// function untuk mengubah string menjadi bentuk title
function title(raw_text)
{
var word_list = raw_text.trim().split(' ');
var temp_word_list = [];
word_list.forEach(function(word){
var temp_word = word.replace(word.charAt(0), word.charAt(0).toUpperCase());
temp_word_list.push(temp_word);
});
return temp_word_list.join(' ');
};
})(jQuery);
Menggunakan fitur title pada teks di halaman Index
Untuk menggunakan fitur title pada function fancy_string. Cukup dengan memilih elemen yang akan diubah teksnya. Kemudian lewatkan sebuah objek Javascript yang berisi key mode. Maka teks yang ada pada index.html akan menjadi seperti pada gambar dibawah ini:--- kode jquery.fancy-string.js 8 ---
<!DOCTYPE html>
<html>
<head>
<title>Membuat Plugin jQuery</title>
</head>
<body>
<div style="margin:0 auto; padding:50px">
<p class="fancy-string">
Codepolitan merupakan portal pemrograman Indonesia yang mewadahi para pehobi pemrograman dan ilmu komputer di Indonesia. Codepolitan menyajikan berbagai informasi seputar tutorial, catatan rilis, ulasan acara, perangkat lunak terbaru hingga kejutan di pekan tertentu.
</p>
</div>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.fancy-string.js"></script>
<script type="text/javascript">
$('p.fancy-string').fancy_string({'mode':'title'});
</script>
</body>
</html>
hasil penggunaan fancy string[/caption]
Penutup
Membuat jQuery plugin cukup mudah. Hal ini disediakan oleh jQuery sendiri untuk memberikan keleluasaan kepada web developer untuk membangun solusinya sendiri dan bila berkenan dapat membagikannya untuk dibangun bersama komunitas dan digunakan oleh orang lain.Source Code Lengkap
Referensi
- Learn jQuery
- jQuery API Documentation
- W3Schools - jQuery