Materi Web Design 2 Prodi Teknik Informatika May 28, 2014

JQUERY UI
Pengenalan

JQuery UI merupakan plugin komponen user interface (hal-hal yang berhubungan dengan
antarmuka pengguna) berupa interaksi, widget bertur lengkap dan efek animasi yang berada di
bawah framework JQuery. Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery
(menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima
tema yang bermacam-macam sesuai dengan keperluan desain.

Peran JQuery UI lebih mendominasi ke dalam hal-hal yang berhubungan
dengan penciptaan aplikasi online dengan standar yang sangat baik:
Slider, button, dialog box, accordion, tooltip, tabs, date picker,
progressbar dan masih banyak lagi. Bahkan juga autocomplete seperti
dalam tur HTML5.

Semuanya begitu lengkap hingga sangat mudah sebenarnya ketika
seorang pengembang menemukan konsep aplikasi online, JQuery UI bisa
mengatasi beberapa masalah yang tersisa seperti tema, objek, variabel
dan termasuk dukungan peramban penuh (setidaknya selalu diusahakan
begitu sampai sekarang).
1 Agung Budi Prasetyo, SE.,MT

JQuery UI merupakan
plugin komponen user
interface
Materi Web Design 2 Prodi Teknik Informatika May 28, 2014
Implementasi

Untuk menggunakan jQueryUI maka kita harus mendownload plugin tersebut di alamat : http://
jqueryui.com pilih dan klik link yang sudah stable. Stable framework adalah framework yang
sudah stabil, teruji dan siap digunakan untuk membuat aplikasi. Pada download le yang
berbentuk ZIP le ada beberapa le diantaranya Source code, contoh aplikasi, dan dokumentasi
untuk jQuery UI.

Beberapa le didalamnya adalah sebagai berikut :
! Folder CSS yang berisi berbagai le CSS yang digunakan langsung sebagai referensi
jQueryUI.
! Folder JS yang berisi le library jQueryUI.
! Folder Development-Bundle yang berisi beberapa sub folder : Folder Demo [contoh
aplikasinya], Themes [CSS theme yang berasosiasi langsung dengan jQuery], dan folder
User Interface [UI].
! Index.html yang kalau kita jalankan maka kita bisa melihat tur-tur jQueryUI didalam
browser.
Implementasi jQueryUI untuk membuat Tab View Menu

Tab View Menu adalah menu yang memiliki beberapa tempat untuk menampatkan menu pada
sebuah kategori dalam satu tempat, tujuan dari Tab View Menu itu sendiri adalah untuk
menghemat tempat dalam menaruh daftar-daftar menu pada sebuah website. Jadi walaupun
kecil Tab View Menu ini sangat berguna sekali untuk menaruh menu-menu yang cukup banyak.
Halaman HTML menggunakan Tab View Menu sekarang sudah sangat populer diterapkan
dibeberapa website. Tab menu memungkinkan kita untuk memngelompokkan informasi w
2 Agung Budi Prasetyo, SE.,MT
Materi Web Design 2 Prodi Teknik Informatika May 28, 2014
ebsite kita berdasarkan topik yang kita tulis sehingga memudahkan pengunjung untuk memilih
topik yang disukai.
Untuk membuat Tab menggunakan jQuery UI ada beberapa langkah yang bisa kita ikuti :
! Membuat tag <div> global untuk membuat kerangkanya.
! Membuat elemen <ul> yang nanti akan didenisikan sebagai tab bar.
! Membuat elemen <li> sebagai kategorinya
! Membuat elemen <div> yang akan digunakan sebagai konten.

Kode untuk membuat tab adalah sebagai berikut :

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<div id=tabs>
<ul>
<li><a href=#tab1>Tab 1</a></li>
<li><a href=#tab2>Tab 2</a></li>
<li><a href=#tab3>Tab 3</a></li>
</ul>
<div id=tab1>Contents of first tab</div>
<div id=tab2>Contents of the second tab</div>
<div id=tab3>Contents of the third tab</div>
</div>

Jika kita menjalankan script diatas menggunakan browser maka tidal terjadi apa-apa dan hanya
menampilkan plain HTML saja. Untuk menampilkan tab yang sesuai dengan keinginan kita maka
perlu kita format lebih lanjut menggunakan jQuery UI dengan tabs() method. Tambahkan
formating css nya dan script js sebagai berikut :

<script>
$("#tabs").tabs ();
</script>

Tabs () method merupakan salah satu method jQuery UI yang digunakan dalam jQuery class
object. Elemen list <li> yang berada dalam tag HTML kemudian diasosiasikan menjadi selector
tab dan kemudian ditransformasikan oleh jQueryUI sebagai tab. Sehingga ketika dijalankan
dalam browser dan user melakukan klik pada tab maka jQuery UI akan otomatis mengatur
jalannya tab tersebut.


3 Agung Budi Prasetyo, SE.,MT
Materi Web Design 2 Prodi Teknik Informatika May 28, 2014

Formatting Datepicker

Datepicker merupakan salah satu solusi untuk memilih/input tanggal yang biasanya digunakan
dalam suatu form, misalnya form pengisian tanggal lahir. Solusi yang lain mungkin dapat dengan
menggunakan combo box yang menampilkan tanggal (1-31), semua bulan, dan range tahun.
Datepicker dapat dibuat dengan menggunakan Javascript. Akan tetapi saat ini sudah ada yang
lebih mudah, yaitu dengan menggunakan JQuery UI
Langkah-langkahnya adalah :
1. Buat sebuah folder DatePicker untuk menampung semua le yang akan digunakan untuk
membuat datepicker.
2. Lalu buat folder css dan js di dalam folder kalender. Kemudian copykan le jquery-1.4.4.js
dan folder ui dari folder development-bundle ke dalam folder js Anda.
3. Copykan juga le jquery.ui.all.css, jquery.ui.base.css, jquery.ui.datepicker.css, dan
jquery.ui.theme.css dari folder development-bundle\themes\ui-lightness serta le demos.css
dari folder development-bundle\demos ke dalam folder css Anda.
4. Dan yang terakhir copy folder images dari folder development-bundle\themes\ui-lightness ke
dalam folder css Anda.
5. Buat satu le index.html
Ketikkan baris kode berikut ini ke dalam le index.html tersebut :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Kalender</title>
<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css" />
<link rel="stylesheet" type="text/css" href="css/demos.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.ui.datepicker.css" />

<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="js/ui/i18n/jquery.ui.datepicker-id.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#tanggal").datepicker({
showOn: "both", buttonImage: "images/calendar.png", buttonImageOnly: true,
nextText: "", prevText: "", changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy"
});
});
</script>
</head>
<body>
<table border="0">
<tr>
<td><h3>Date : <input id="tanggal" type="text"></h3></td>
</tr>
4 Agung Budi Prasetyo, SE.,MT
Materi Web Design 2 Prodi Teknik Informatika May 28, 2014
</table>
</body>
</html>

Sekarang simpan dan jalankan di web browser. Akan tampil sebuah form dengan 1 eld untuk
input tanggal. Cara inputnya ada dua pilihan, bisa melalui klik pada eldnya atau pada tombol
yang bergambar kelender disampingnya. Ini merupakan efek dari property showOn: both pada
baris ke-17. Jika kita hanya ingin menggunakan tombol saja dalam peng-input-annya, kita
tinggal memodikasinya menjadi showOn: button.
Pada baris ke-17 juga terdapat property dateFormat: dd/mm/yy yang berfungsi untuk
mengatur tampilan tanggalnya setelah dipilih oleh user. Format yang dihasilkan untuk format
tersebut adalah 28/05/2014. Jika kita menginginkan format tampilan menjadi 28 Mei 2014, maka
kita tinggal memodikasinya menjadi dateFormat: dd MM yy.
Untuk gambar kalender pada tombolnya, berdasarkan baris kode ke-17, disini disimpan di folder
images dengan nama le calendar.png. Letakkan folder images di folder kalender.
5 Agung Budi Prasetyo, SE.,MT