Iso Web Id Tutorial Komputer
Related Articles
Membuat plugin pada Framework jQuery sangat mudah, mengapa saya bilang begitu? dengan kemudahan fungsi – fungsi yang diberikan jQuery akan sangat membantu kita dalam menyederhanakan pengcodean dala hal ini Javascript. Bisa saja kalian menggunakan Framework javascript lain seperi Mootools, Dojo dll, karena saya lebih familiar dengan jQuery kali ini kita akan membuat plugin sederhana menggunakan jQuery.
Plugin yang akan kita buat hanya berkutat pada penghapusan baris – baris (row) dalam satu tabel dengan memanfaatkan Checkbox untuk mencentang data yang akan dihapus. Data baris yang telah dihapus otomatis akan diremove dari daftar tabel.
kita coba untuk membuatnya sekarang:
1. Buat dahulu 1 file HTML seperti dibawah
<html>
<head>
<style>
table{border:1px solid #DDD;padding:0;margin:0;}
table td,table th{border: 1px solid #DDD;}
</style>
<title>Jquery Plugin</title>
<script type=”text/javascript” src=”jquery.min.js”></script> // jangan lupa file jquerynya
</head>
<body>
<form action=”” method=”post”>
<table name=”tb_post”>
<thead>
<tr>
<th><input type=”checkbox” name=”checkall” id=”checkall” /></th>
<th>Nama</th>
<th>Alamat</th>
<th>kelamin</th>
</tr>
</thead>
<tbody>
<tr id=”row1″>
<td><input type=”checkbox” name=”delete[]” value=”1″ /></td>
<td>Rudy adi</td>
<td>Semolowaru Elok 8EF, surabaya</td>
<td>Laki – laki</td>
</tr>
<tr id=”row2″>
<td><input type=”checkbox” name=”delete[]” value=”2″ /></td>
<td>Lulu dian irawati</td>
<td>Pegangsaan timur, jakarta</td>
<td>Perempuan</td>
</tr>
<tr id=”row3″>
<td><input type=”checkbox” name=”delete[]” value=”3″ /></td>
<td>Indro warkop</td>
<td>kertajaya indah 88C</td>
<td>Laki – laki</td>
</tr>
</tbody>
</table>
<input type=”button” id=”button” value=”Delete” /> <br />
Centang untuk Menghapus data.
</form>
</body>
</html>
Kalian dapat mengakses dari browser akan tampil seperti gambar berikut.
2. Buat plugin jQuery beri nama myplugin.js
/*
* http://www.iso.web.id
* plugin sederhana dengan jquery
*/
(function($){
$.fn.checkAll = function(){ // Fungsi untuk Check/uncheck All checkbox
$(this).on(‘click’,function(){
var status=this.checked;
$(“:checkbox”).each(function(){
this.checked = status;
});
});
}
$.fn.getData = function(callback){ // fungsi untuk menghapus data
$(this).on(“click”, function(){ // ketika klik tombol hapus
var tanya = confirm(“Yakin akan menghapus data ini?”); // konfirmasi penghapusan, bila klik tombol OK akan dilanjutkan penghapusan
if(tanya){
var arr = new Array(); // buat array javascript untuk menampung data yang akan dihapus
$(‘:checkbox:checked’).each(function(k){ // lakukan looping sebanyak checkbox yang tervcentang
arr[k] = $(this).val(); //masukkan value pada array
});
if(arr.length != 0){
callback(arr); // fungsi callback (pengembalian fungsi)
}else{
alert(“pilih data telebih dahulu”); //bila tidak ada data yang dicentang alert akan ditampilkan
}
}
return false;
})
}
})(jQuery);
sedikit saya jelaskan, inti dari plugin jQuery ada pada fungsi
(function{
— Source code plugin
})(jQuery);
Fungsi $.fn.getData = function(callback){ kalian lihat terdapat $.fn.getData, maksud dari $.fn disini adalah parameter fungsi bisa diakses pada jQuery menjadi $(“params ID”).getData();
callback menandakan fungsi akan dikembalikan contoh $(“#delete”).getData(function(){source code});
setelah penjelasan diatas kalian paham kalian coba untuk mengimplementasikan pada HTML code yang sudah kalian buat diatas.
Tambahkan pemanggilan fungsi javascript plugin yang sudah kita buat (myplugin.js) pada Tag head (<head>)
<script type=”text/javascript” src=”myplugin.js”></script>
tambahkan juga kode untuk memanggil fungsi – fungsi pada plugin kita
<script type=”text/javascript”>
$(function(){
$(“#checkall”).checkAll(); // fungsi untuk check/uncheck All checkbox
$(“#button”).getData(function(data){ //fungsi mengambil nilai(value) dari checkbox
for(i=0;i<data.length;i++){ // data yang diterima dari callback ulang sebanyak array yang dikirim
if(data[i]==0) continue; // bila data == 0 lanjutkan peruangan
$(“tr#row”+data[i]).remove(); // hapus baris data tabel
}
});
});
</script>
kalian lihat code berikut $(“tr#row”+data[i]).remove(); terdapat tr#row+data[i] kita kembali lihat file HTML yang sudah kita buat setiap bari (tr) terdapat id yang berbeda – beda itu untuk menandakan baris nomor berapa yang akan dihapus (<tr id=”row1″> dst).
Sekarang kalian dapat mencoba melakukan penghapusan data, kalian dapat melihat perbedaanya, bisa juga kalian tambahkan AJAX agar penghapusan tidak melakukan refresh perhalaman melainkan hanya diseputaran table saja (Akan dibahas pada artikel selanjutnya).
Semoga bermanfaat
