JQuery Multiple Select Combobox Untuk Tampilan Combobox Yang Lebih Baik

JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!
"et
JQuery Multiple-Select Combobox:
Untuk Tampilan Combobox yang Lebih Baik
Tutorial ini #ituli$ oleh Achma Solichin
#an $u#ah #ipublika$ikan #i http:%%achmatim!net pa#a tanggal &' Juli ()&*
Combobox atau Selecbox merupakan $alah $atu komponen penting #ari +orm
inputan! Melalui ,eni$ inputan ini- normalnya pengguna #apat memilih $atu pilihan
yang #itampilkan #alam bentuk #rop-#o.n! "amun #engan menambahkan atribut
multiple- maka pengguna ,uga #apat memilih lebih #ari $atu pilihan $ekaligu$! /a#a
,eni$ combobox #engan pilihan tunggal memang pengguna rata-rata cukup nyaman
#engan bentuk #a$arnya- namun pa#a bentuk ,amak 0multiple-$elect combobox1-
pengguna $eringkali ti#ak terlalu nyaman karena #alam memilih beberapa pilihan
$ekaligu$ haru$ menekan tombol Ctrl! Se#angkan ti#ak $emua pengguna
memahami hal ter$ebut!
2alam tutorial ini- #ibaha$ mengenai bagaimana meman+aatkan /lugin JQuery
Multiple-Select untuk membuat penampilan combobox men,a#i lebih nyaman #an
lebih mu#ah #ari $i$i pengguna! /lugin J3uery Multiple-Select yang akan kita
gunakan mengharu$kan penggunaan library JQuery 4er$i &!5!) ke ata$! /lugin ini
memiliki beberapa +itur unggulan 0$eperti #ikutip #ari $itu$ re$minya
&
1 $ebagai
berikut:
Secara #e+ault akan menampilkan pilihan combobox #alam bentuk checkbox!
Men#ukung pilihan group 0optgroup1!
& http:%%.en6hixin!net!cn%p%multiple-$elect%7multiple-$elect
8alaman & #ari 9
JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!"et
2apat menampilkan beberapa item $ekaligu$ #alam $ebuah bari$!
Ter#apat pilihan :Select all;
Ter#apat pilihan placehol#er!
/lugin ini ,uga #apat #i,alankan #i berbagai bro.$er mo#ern- $eperti <= 5>- Chrome
?>- @ire+ox &)>- Sa+ari *> #an Apera &)!B>!
!o"nloa Library JQuery an #lugin JQuery Multiple-Select
Sebelum mencoba contoh-contoh program #alam tutorial ini- kita haru$
men#o.nloa# library JQuery #an plugin Multiple-Select #i link berikut ini:
$% 2o.nloa# 4er$i terakhir JQuery #i laman http:%%co#e!,3uery!com
&% 2o.nloa# /lugin JQuery Multiple-Select #i halaman
http:%%.en6hixin!net!cn%p%multiple-$elect atau
http:%%plugin$!,3uery!com%multiple!$elect%
Contoh Seerhana #enggunaan #lugin Multiple-Select
Seperti halnya plugin JQuery yang lainnya- plugin multiple-$elect mengharu$kan
pemanggilan library utama JQuery! Sementara itu untuk membuat obyek multiple
$elect- gunakan perintah 8TML bia$a- yaitu #engan tag C$electD #an CoptionD!
Jangan lupa untuk menambahkan atribut <2 pa#a tag C$electD $ebagai i#entita$ #an
$elector #i J3uery!
/erhatikan contoh $e#erhana program #emo 7& berikut ini:
emo$%php: Contoh Seerhana #enggunaan #lugin Multiple-Select
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>JQuery Multiple Select</title>
<script src="libs/jquery.min.js"></script>
<script src="libs/jquery.multiple.select.js"></script>
<link rel="stylesheet" href="libs/multiple-select.css"/>
<script>
$(document).ready(function(){
$('#demo1').multipleSelect();
});
</script>
</head>
<body>
<h1>JQuery Multiple Select Demo</h1>
<h2>Demo #1 : Contoh Sederhana</h2>
<form action="" method="post">
<h3>Multiple Combobox tanpa Plugin</h3>
<select id="demo1a" name="demo1a[]" multiple="multiple"
8alaman ( #ari 9
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
style="width:200px">
<option value="JKT">DKI Jakarta</option>
<option value="BTN">Banten</option>
<option value="JABAR">Jawa Barat</option>
<option value="JATENG">Jawa Tengah</option>
<option value="JATIM">Jawa Timur</option>
<option value="DIY">DI Yogyakarta</option>
</select>
<h3>Multiple Combobox dengan Plugin JQuery
Multiple-Select</h3>
<select id="demo1" name="demo1[]" multiple="multiple"
</select>
</form>
</body>
</html>
/en,ela$an /rogram 2emo & #i ata$:
Bari$ E : Menyertakan library JQuery! Se$uaikan #engan loka$i library JQuery
yang n#a gunakan! n#a ,uga #apat mengganti loka$i library
#engan C2" #ari J3uery yang beralamat #i
http:%%co#e!,3uery!com%,3uery!,$
Bari$ ' : Menyertakan plugin JQuery Multiple-Select
Bari$ B : Menyertakan +ile CSS plugin JQuery Multiple-Select! @ile CSS ini
ber+ung$i untuk mengatur tampilan #ari combobox!
Bari$ ?-&) : Memanggil +ung$i multipleSelect() tanpa op$i tambahan untuk
mengakti+kan plugin J3uery Multiple-Select pa#a obyek #engan <2
#demo1!
Bari$ &?-(' : /erintah 8TML untuk membentuk combobox multi-$elect! /erintah
ini akan menampilkan combobox #imana kita #apat memilih lebih
#ari $atu pilihan #engan menekan tombol Ctrl $aat memilih! <ngat-
untuk men,a#ikan $uatu combobox men,a#i multi-$elect- cukup
menambahkan atribut multiple=multiple pa#a tag C$electD!
Tanpa atribut ini- combobox akan #itampilkan $eperti combobox
pa#a umumnya 0hanya bi$a #ipilih & pilihan1
Bari$ (5-*E : Sama $eperti bari$ &?-('- menampilkan combobox multi-$elect!
Combobox yang ke#ua ini yang akan #itampilkan #engan plugin
J3uery Multiple-Select! Ban#ingkan ha$ilnya #engan combobox
pertama!
8alaman * #ari 9
2an berikut ini tampilan #ari program #emo 7& #i ata$!
Multiple-Select engan #laceholer an 'ilter (#encarian)
Fita ,uga bi$a menambahkan beberapa op$i 0pilihan1 pa#a plugin ,3uery
multiple-$elect! Contohnya a#alah penambahan /lacehol#er #an +ilter 0pencarian1!
/lacehol#er merupakan keterangan yang muncul pa#a $uatu +orm inputan #an
akan hilang otomati$ $aat cur$or bera#a pa#a +orm inputan ter$ebut! Sementara
+itur pencarian $angat membantu pengguna untuk menemukan pilihan yang
#iinginkan- terutama #alam $ebuah combobox #engan ,umlah pilihan yang cukup
banyak!
/erhatikan contoh #emo 7( berikut ini!
emo&%php: Contoh Multiple-Select engan #laceholer an 'ilter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<script>
$('#demo2').multipleSelect({
placeholder: "Pilih Propinsi",
filter:true
});
});
</script>
</head>
8alaman E #ari 9
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body>
<h2>Demo #2 : Combobox dengan Placeholder dan Filter</h2>
<h3>Multiple Combobox tanpa Plugin</h3>
<select id="demo2a" name="demo2a[]" multiple="multiple"
</select>
<h3>Multiple Combobox dengan Plugin JQuery
Multiple-Select</h3>
</select>
</form>
</body>
</html>
/rogram #i ata$ pa#a #a$arnya $ama $eperti program $ebelumnya 0#emo &1!
/erbe#aannya a#alah a#anya penambahan op$i pa#a $aat pemanggilan +ung$i
multipleSelect01 $eperti terlihat pa#a bari$ ?-&*! #a ( op$i yang #itambahkan yaitu
op$i :placehol#er; yang beri$i tek$ yang #itampilkan pa#a +orm- #an op$i :+ilter;
yang ,ika #ii$i #engan :true; maka akan ter#apat penambahan +orm untuk
pencarian #ata pa#a combobox! /erhatikan tampilan program berikut ini!
8alaman ' #ari 9
Multiple-Select engan #ilihan yang !iambil ari MySQL
/a#a contoh $ebelumnya- op$i pa#a combobox #iatur lang$ung #i 8TML! /a#a
contoh berikut ini- kita akan coba mengi$i combobox #engan op$i yang #iambil #ari
#ataba$e MySQL! gar ti#ak terlalu rumit- kita akan menggunakan tabel :propin$i;
yang ter#iri #ari ( +iel# yaitu ko#e #an nama propin$i! Struktur tabel propin$i
$elengkapnya $ebagai berikut:
*+ *AMA ',-L! T,#- #A*JA*.
& ko#e 4archar (
( nama 4archar E)
Gunakan /8/My#min atau MySQL Client ke$ukaan n#a untuk mengimport
$truktur tabel propin$i be$erta i$inya #alam bentuk %/0l yang #apat #i#o.nloa# #i
bagian akhir tutorial ini!
Setelah tabel propin$i be$erta i$i #atanya telah $iap- $elan,utnya cobalah contoh
program emo1%php berikut ini!
emo1%php: Multi-Select engan #ilihan !iambil ari MySQL
1
2
3
4
5
<?php
#koneksi
$conn = mysqli_connect("localhost", "root", "qwerty", "demo");
#akhir-koneksi
8alaman B #ari 9
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#ambil data propinsi
$query = "SELECT kode, nama FROM propinsi ORDER BY nama";
$sql = mysqli_query($conn, $query);
$arrpropinsi = array();
while ($row = mysqli_fetch_assoc($sql)) {
$arrpropinsi [ $row['kode'] ] = $row['nama'];
}
?>
<html>
<head>
<script>
$('#demo3').multipleSelect({
placeholder: "Pilih Propinsi",
filter:true
});
});
</script>
</head>
<body>
<h2>Demo #3 : Combobox dengan Placeholder dan Filter</h2>
<?php
foreach($arrpropinsi as $kode=>$nama) {
echo "<option value='$nama'>$nama</option>";
}
?>
</select>
<input type="submit" name="Pilih" value="Pilih"/>
</form>
<?php
if(isset($_POST['Pilih'])) {
echo "Propinsi yang Anda pilih: <br/>";
echo implode(", ", $_POST['demo3']);
}
?>
</body>
</html>
/a#a contoh program yang ketiga #iata$- ter#apat beberapa penambahan co#e ,ika
#iban#ingkan #engan program $ebelumnya! /ilihan pa#a combobox ti#ak lagi
#ituli$kan #i #alam program $ecara lang$ung 08TML1- tetapi #iambil #ari tabel
8alaman 5 #ari 9
propin$i yang bera#a #i #ataba$e MySQL! Berikut ini pen,ela$an $ingkat #ari
program #i ata$!
Bari$ * : /ertama program akan melakukan konek$i ke #ataba$e MySQL!
2i$ini kita menggunakan +ung$i mysqli_connect() yang memiliki
E 0empat1 parameter- yaitu ho$tname- u$ername- pa$$.or# #an
nama #ataba$e yang #igunakan!
Bari$ B-&( : Mengambil #ata propin$i #i tabel propin$i #an mema$ukkannya ke
#alam 4ariabel array $arrpropinsi! /erintah 3uery yang
#igunakan a#alah ,eni$ perintah S=L=CT #an untuk men,alankan
perintah 3uery ter$ebut #igunakan +ung$i mysqli_query()!
Sementara itu- +ung$i mysqli_fetch_array() pa#a bari$ &)
#igunakan untuk menangkap ha$il perintah 3uery #an
mema$ukkannya ke #alam array!
Bari$ (&-(B : Memanggil +ung$i multipleSelect() #engan op$i placehol#er
#an +ilter- untuk mengakti+kan plugin J3uery Multiple-Select pa#a
obyek #engan <2 #demo3!
Bari$ *'-*9 : Menampilkan $eluruh i$i array $arrpropinsi ke #alam op$i
combobox! Untuk menampilkannya menggunakan bentuk
perulangan khu$u$ foreach!
Bari$ E*-E? : Saat tombol #ilih #itekan- /8/ akan menangkap pilihan combobox
yang #ipilih #an menampilkannya #i layar!
Berikut ini tampilan ha$il program emo1%php #i ata$!
2e/impulan
/lugin JQuery Multiple-Select merupakan $alah $atu plugin yang cukup han#al
untuk :mempercantik; tampilan combobox $ehingga lebih nyaman #ari $i$i
pengguna! Beberapa kelebihan yang #ita.arkan oleh plugin ini antara lain
kemu#ahan #alam implementa$inya- $erta #ukungan berbagai op$i % pilihan $eperti
placehol#er #an pencarian 0+ilter1!
8alaman ? #ari 9
!o"nloa
Tutorial ini ,uga telah #ipublika$ikan #i $itu$ chmatim!"et:
http:%%achmatim!net%()&*%)5%&'%,3uery-multiple-$elect-combobox-untuk-tampil
an-combobox-yang-lebih-baik%
2o.nloa# $ource-co#e lengkap #i http:%%achmatim!net%#o.nloa#%'(%
Semoga tutorial ini berman+aat untuk kita $emua #an berbagilah hal baik ke
$ebanyak-banyaknya orang maka kebahagiaan akan menghampiri n#a! Satu Farya
untuk <n#one$iaH
3e4eren/i Terkait
J3uery Multiple-Select http:%%plugin$!,3uery!com%multiple!$elect%
Ariginal J3uery Multiple-Select http:%%.en6hixin!net!cn%p%multiple-$elect%
Tentang #enuli/
Achma Solichin% #alah Lulu$an Teknik <n+ormatika- @akulta$
Teknologi <n+orma$i - Uni4er$ita$ Bu#i Luhur- Jakarta 0S&- ())'1 #an
Magi$ter Teknologi <n+orma$i- Uni4er$ita$ <n#one$ia 0S(- ()&)1! Saat
ini $e#ang menempuh program 2oktoral #alam bi#ang <lmu
Fomputer #i Uni4er$ita$ Ga#,ah Ma#a- Jog,akarta! Fegiatan
$ehari-hari a#alah $ebagai 2o$en #i Uni4er$ita$ Bu#i Luhur
0http:%%...!bu#iluhur!ac!i#1! Fegiatan lain akti+ $ebagai programmer-
.eb #e4eloper- $y$tem analy$t- kon$ultan #an memberikan pelatihan
#i berbagai bi#ang komputer $erta membuat tutorial-tutorial prakti$ #i bi#ang
komputer! /enuli$ memiliki $itu$ utama #i http:%%achmatim!net yang beri$i berbagai
tutorial prakti$ #i bi#ang komputer $erta menye#iakan buku grati$ komputer!
/enuli$ #apat #ihubungi melalui email #i achma#!$olichinIbu#iluhur!ac!i# #an
achmatimIgmail!com- JM achmatim- @acebook achmatim #an T.itter Iachmatim!
Li/en/i !okumen
Seluruh i$i #alam #okumen ini #apat #igunakan- #imo#i+ika$i #an
#i$ebarlua$kan $ecara beba$ untuk tu,uan pen#i#ikan-
pembela,aran #an bukan komer$ial 0non pro+it1- #engan $yarat ti#ak
menghilangkan- menghapu$ atau mengubah atribut penuli$ #okumen ini #an
pernyataan #alam li$en$i #okumen yang #i$ertakan #i $etiap #okumen! Ti#ak
#iperbolehkan mengkomer$ialkan tutorial ini kecuali men#apatkan i,in terlebih
#ahulu #ari penuli$!
8alaman 9 #ari 9

JQuery Multiple Select Combobox Untuk Tampilan Combobox Yang Lebih Baik

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JQuery Multiple Select Combobox Untuk Tampilan Combobox Yang Lebih Baik

Uploaded by

Copyright:

Available Formats

JQuery Multiple-Select Combobox: Untuk Tampilan Combobox yang Lebih Baik | chmatim!

You might also like