Bootstrap
Tutorial : Bootstrap + jQuery Select Picker

Guys … kali ini saya ingin sharing kembali tentang plugin-pluginnya jQuery yang jarang kepake tapi manfaatnya luar biasa. Ya … hari ini saya mau sharing tentang jQuery Select Picker yang tentunya dipadukan dengan Bootstrap biar cakep. Apa itu jQuery Select Picker ??? Mungkin gambar gif di bawah ini bisa sedikit mencerahkan. Cekidot !

jQuery Select Picker

Perhatikan bagian combo box dari contoh di atas, ada yang menarik disana. Ketika combo box di klik, maka jelas kita bisa langsung klik pilihan kita, namun yang berbeda di sini adalah kita juga dapat tulis pilihan kita, secara otomatis jQuery Select Picker akan mencarikan apa yang kita tulis tersebut secara langsung. Kalau di javascript itu ada event OnKeyUp atau OnKeyDown, nah kurang lebih event yang ada di jQuery Select Picker juga seperti itu. Kalau di MySQL itu ada Query SELECT * FROM table WHERE field ‘%parameter%’ nah kurang lebih fitur pencarian yang dilakukan oleh jQuery Select Picker itu juga seperti itu, pakai LIKE dengan % di depan dan di belakang, yang artinya huruf apapun atau kata apapun atau bahkan kalimat apapun yang cocok dengan parameter pencarian akan langsung ditampilkan.

Bagaimana Caranya ?

Caranya gampang. Pertama siapkan bahan-bahan yang dibutuhkan.

  1. Bootstrap. Versi terakhirnya saat ini adalah versi 3.3.7. Silahkan download di sini.
  2. jQuery. Namanya plugin jQuery maka kita harus download jQuery nya dulu. Untuk saat ini latest versionnya itu versi 3.1.0. Silahkan download di sini.
  3. jQuery Select Picker. Nah ini nih yang bakalan kita pake di sini. Banyak sekali versinya, tapi yang menurut saya mudah untuk digunakan ya versi ini. Silahkan download di sini.

Jika sudah di download, maka yang harus dilakukan adalah sebagai berikut. Perhatikan petunjuk-petunjuk berikut ini. Karena ini adalah petunjuk ke jalan yang benar (*LOH !!!)

PERTAMAsetelah Anda download bootstrap, maka Anda akan mendapatkan file bootstrap-3.3.7-dist.zip. Silahkan ekstrak file tersebut. Setelah Anda ekstrak, maka Anda akan dapati 3 folder ini.

bootstrap folder

Yang harus dilakukan adalah copy semua folder di atas dan letakkan ke dalam folder project Anda. Jika Anda menggunakan XAMPP, maka letakkan di xampp/htdocs/folderProjectAnda.

KEDUAsetelah Anda download jQuery sesuai dengan link di atas, maka Anda akan dapati sebuah file yang namanya adalah jquery-3.1.0.min.js. Nahhh … karena file tersebut adalah file js, maka letakkan file tersebut ke dalam folder js dalam ProjectAnda (xampp/htdocs/folderProjectAnda/js).

KETIGAnah ini nih yang penting. Jika Anda sudah download jQuery Select Picker, silahkan ekstrak. Setelah di ekstrak Anda akan dapati banyak folder seperti berikut ini.

jQuery Select Picker

Nah itu banyak sekali foldernya. Tidak perlu copy semua folder di atas ke dalam folder project Anda. Cukup buka folder dist. Maka Anda akan mendapati dua folder, yaitu css dan js. Nahhhh folder ini saja yang Anda copy dan paste-kan di dalam folder project Anda (bergabung dengan file-file yang sudah ada dalam folder css dan js dalam project Anda).

Jika petunjuk pertama sampai ketiga di atas sudah Anda lakukan, maka silahkan tambahkan satu file index.php yang akan kita gunakan sebagai main projectnya. Sehingga isi dari folder project Anda nantinya seperti ini.

Project JQuery Select Picker

Jika kita sudah sampai di sini, maka kita tinggal bermain di index.php nya saja. Silahkan ikuti kode berikut ini untuk file index.php nya.

Jika sudah selesai, maka save file index.php tersebut. Lalu silahkan jalankan. Dan voila !!! jQuery Select Picker berhasil Anda gunakan. Silahkan implementasikan ke project Anda. Semoga tulisan ini bermanfaat. File project nya dapat Anda download di sini : Klik Disini.

Related Post

Leave a comment

Your email address will not be published. Required fields are marked *