.png)
Modul Kuliah Pemrograman Web I
I
2011
BAB I
PENGANTAR JQUERY
JQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan
oleh beberapa situs yang canggih nan terkenal seperti: Google, Facebook, Twitter, Youtube,
Nokia dan masih banyak lagi. Tidak hanya situs interlokal, lokal juga ada kok
yang telah
memakai jQuery, contohnya:VivaNews, Studio 21, Kompas dan lain
-
lain. Selengkapnya bisa
dilihat di
http://docs.jquery.com/Sites_Using_jQuery
.
Apa itu jQuery?
jQuery sendiri adalah Javascr
ipt Library atau kumpulan kode/fungsi Javascript siap pakai,
sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya
jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya
“
Write less, do
more
”
.
Mengapa memilih jQ
uery?
Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya,
antara lain:
Kompatibel dengan hampir seluruh browser
jQuery telah digunakan oleh website
-
website raksasa
Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)
Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di
http://jquery.com
Didukung oleh banyak komunitas
Disupport oleh plugin yang lengkap
Filenya han
ya satu dan ukurannya relatif kecil, sekitar 20kb
Open source atau Free
jQuery lebih diminati oleh para developer web saat ini
2
Modul Kuliah Pemrograman Web I
I
2011
Apa kemampuan yang dimiliki jQuery?
Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum:
-
Memperm
udah akses dan manipulasi elemen tertentu pada dokumen.
-
Mempermudah modifikasi/perubahan tampilan halaman web.
-
Mempersingkat Ajax (
Asynchronous Javacsript and XML
).
-
Memiliki API (
Application Programming Interface
).
-
Mampu merespon interaksi antara user deng
an halaman web dengan lebih cepat.
-
Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.
Bagaimana cara kerja jQuery?
Cara kerja jQuery dapat dijabarkan sebagai berikut, masih menggunakan contoh diatas
sebagai penjelasannya.
1.
jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah
ditampilkan semua di halaman web, fungsi yang digunakan adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan
semua
});
2.
Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen
berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery
menggunakan fungsi
Selector
.
$("#foto")
$(".sembunyi")
$(".tampil")
3
Modul Kuliah Pemrograman Web I
I
2011
3.
Setelah elemen dipilih,
tahap berikutnya adalah memberikan aksi/operasi terhadap
elemen yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan
memunculkan kembali gambar.
$(".sembunyi").click(function(){
$("#foto").hide("slow");
)};
Dengan memahami cara kerja
jQuery, semoga lebih mempermudah
untuk mempelajari
.
4
Modul Kuliah Pemrograman Web I
I
2011
BAB II
MEMAHAMI SELECTOR
Selector berfungsi untuk memilih/mengambil elemen
-
elemen tertentu yang ingin dilakukan
operasi terhadap elemen tersebut atau manipulas terhadap elemen
-
elemn tersebut.
Adapun
elemen
-
elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :
1.
Nama Tag
2.
Id
3.
Class
Untuk mengetahui bagaimana cara selector dalam memilih elemen
-
elemen tersebut, akan
disajika beberapa contoh sederhana pada bagian berikutnya.
Selector Tag
C
ara menggunakan selector tag adalah dengan
langsung menyebut nama tag elemennya.
Selector Id
Cara
menggunakan Selector id adalah dengan
menyertakan tanda kres (#) sebelum nama
elemennya.
Selector Class
Cara menggunakan Selector class ini adalah dengan men
yertakan tanda tit
ik (.) sebelum
nama elemennya.
Latihan
-
latihan berikut untuk menjelaskan teori diatas.
Latihan1
1.
<html>
2.
<head>
3.
<script type="text/javascript" src="jquery
-
1.4.3.js"></script>
4.
<script type="text/javascript">
5.
$("document").ready(function(){
6.
alert ("Selamat datang");
7.
});
8.
</script>
9.
</head>
10.
<body>
5
Modul Kuliah Pemrograman Web I
I
2011
11.
</body>
12.
</html>
Latihan2
1.
<html>
2.
<head>
3.
<Script language="javascript" src="jquery
-
1.4.3
.js" ></script>
4.
<Script language="javascript">
5.
$(document).ready(function(){
6.
$("input").click(function(){
7.
alert("hello jquery!");
8.
});
9.
});
10.
</script>
11.
</head>
12.
<body>
13.
<input t
ype="submit
" value="click me"/>
14.
</body>
15.
</html>
6
Modul Kuliah Pemrograman Web I
I
2011
Latihan3
1.
<html>
2.
<head>
3.
<script type="text/javascript" src="jquery
-
1.4.3.js">
4.
</script>
5.
<script type="text/javascript">
6.
$("document").ready(function(){
7.
$("#p1").css("color","red");
8.
});
9.
</script>
10.
<title>
latihan 3
</title>
11.
</head>
12.
<body>
13.
<p id="p1">
Ini isi paragraf 1 </p>
14.
<p id="p2">Ini isi paragraf 2 </p>
15.
</body>
16.
</html>
Latihan4
1.
<html>
2.
<head>
3.
<script type="text/javascript"
src="jquery
-
1.4.3.js"></script>
4.
<script type="text/javascript">
7
Modul Kuliah Pemrograman Web I
I
2011
5.
$("document").ready(function(){
6.
$("#judul").addClass("merahkuning");
7.
$(".sub1").addClass("kuninghitam");
8.
});
9.
</script>
10.
<style type="text/css">
11.
.merahkuning {
12.
color: red;
13.
font
-
weight: bold;
14.
ba
ckground
-
color:yellow;
15.
padding:3px;
16.
}
17.
18.
.kuninghitam {
19.
color:yellow;
20.
background
-
color:black;
21.
}
22.
</style>
23.
</head>
24.
<body>
25.
<h1>Judul Buku Kuliah Pemrograman Web </h1>
26.
<ol id="judul">
27.
<li class="sub1">Pemrograman PHP</li>
28.
<li>Database mysql</li>
29.
<li class="sub1"
>Mempercantik web dengan jquery</li>
30.
</ol>
31.
</body>
32.
</html>
8
Modul Kuliah Pemrograman Web I
I
2011
BAB III
EVENTS
Sebelumnya kita telah belajar
Selector yang mencari elemen
-
elemen apa saja yang akan
dilakukan operasi terhadapnya,
maka
Event memutuskan kapan dilakukan operasi
tersebut,
misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya
setelah diklik (
click)
atau setelah klik 2x (
dblclik),
setelah mouse berada diatas objek
(
hover),
dan sebagainya.
A.
Event Click()
Event click dijalankan setelah terjadi klik
pada suatu elemen yang telah ditentukan.
Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :
1.
<html>
2.
<head>
3.
<script type="text/javascript" src="jquery
-
1.4.3.js"></script>
4.
<script type="text/javascript">
5.
$("document").ready(function(){
6.
$('a').click(function(){
7.
alert("Selamat datang di website STMIK Cikarang")
8.
});
9.
});
10.
</script>
11.
</head>
12.
<body>
13.
<a href="www.stmik
-
cikarang.ac.id">Klik disini untuk
menuju halaman web STMIK Cikarang</a>
14.
</body>
15.
</html>
B.
Event dblclick()
Event dblclick akan dij
alankan setelah terjadi klik 2x pada suatu elemen yang telah
ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :
9
Modul Kuliah Pemrograman Web I
I
2011
1.
<html>
2.
<head>
3.
<script type="text/javascript" src="jquery
-
1.4.3.js"></script>
4.
<script type="text/javascript">
5.
$("documen
t").ready(function(){
6.
$("div").dblclick(function(){
7.
$(this).css({background:"red"});
8.
});
9.
});
10.
</script>
11.
<style type="text/css">
12.
div {
13.
background:yellow;
14.
width: 60px;
15.
height:60px;
16.
float:left;
17.
margin:10px;
18.
cursor:pointer;
19.
}
20.
21.
</style>
22.
<title>Latihan double
klik</title>
23.
</head>
24.
<body>
25.
<p>klik dua kali pada setiap kotak untuk mengubah
warnya</p>
26.
<div></div>
27.
<div></div>
28.
<div></div>
29.
<div></div>
30.
31.
</body>
32.
</html>
10
Modul Kuliah Pemrograman Web I
I
2011
C.
Event mouseover()
Event mouseover akan dijalankan ketika kursor mouse melewati elemen yang
ditentukan.
D.
Event mouseleave()
Event
mouseleave
akan dijalankan ketika kursor mouse
meninggalkan
elemen yang
ditentukan.
Untuk lebih jelasnya penggunaan event
mouseover
dan
mouseleave,
perhatikan skrip
berikut ini :
1.
<html>
2.
<head>
3.
<script type="text/java
script" src="jquery
-
1.4.3.js"></script>
4.
<script type="text/javascript">
5.
$("document").ready(function(){
6.
$("div").mouseover(function(){
7.
$(this).css({background:"red"});
8.
});
9.
10.
$("div").mouseleave(function(){
11.
$(this).css({background:"yellow"});
12.
});
13.
});
14.
<
/script>
15.
<style type="text/css">
16.
div {
17.
background:yellow;
18.
width: 60px;
19.
height:60px;
20.
float:left;
21.
margin:10px;
22.
cursor:pointer;
23.
}
24.
</style>
11
Modul Kuliah Pemrograman Web I
I
2011
25.
<title>Latihan double klik</title>
26.
</head>
27.
<body>
28.
<p>klik dua kali pada setiap kotak untuk mengubah
warnya</p>
29.
<div></di
v>
30.
<div></div>
31.
<div></div>
32.
<div></div>
33.
</body>
34.
</html>
12
Modul Kuliah Pemrograman Web I
I
2011
BAB IV
EFFECT
S
Effects
adalah sesuatu
mengenai menampilkan dan menyembunyikan suatu
elemen,menggerakan elemen, dan menganimasikan elemen tersebut.
A.
Efek Fade()
Efek fade digunakan untuk menghilangkan atau menampilkan elemen secara perlahan
-
lahan, biasanya digunakan untuk transisi/pergantian suatu objek dengan
objek yang
lain, sehingga transisinya terlihat lebih halus. Ada 3jenis
efek fade, yaitu
fadeln,fadeO
ut,
dan
fade
T
o
. Untuk lebih jelasnya, lihat contoh sederhana pada skrip
berikut;
1.
<html>
2.
<head>
3.
<script type="text/javascript" src="jquery
-
1.4.3.js"></script>
4.
<script type="text/javascript">
5.
$("document").ready(function(){
6.
$(".fa
deout").click(function(){
7.
$("#kotak").fadeOut("slow");
8.
});
9.
10.
$(".fadein").click(function(){
11.
$("#kotak").fadeIn("slow");
12.
});
13.
14.
$(".fadeto3").click(function(){
15.
$("#kotak").fadeTo("slow",0.3);
16.
});
17.
18.
});
19.
</script>
20.
21.
<style type="text/css">
22.
#kotak{
13
Modul Kuliah Pemrograman Web I
I
2011
23.
width:250px;
24.
height:180px;
25.
background:yellow;
26.
border:2px solid black;
27.
}
28.
</style>
29.
<title>Efek FadeIn, FadeOut dan FadeTo</title>
30.
</head>
31.
<body>
32.
<div id="kotak"></div><br/>
33.
<button class="fadeout">Fade Out</button>
34.
<button class="fadein">Fade In</button>
35.
<button class="f
adeto3">Fade To 0.3</button>
36.
</body>
37.
</html>
Sekarang coba jalankan skrip diatas, maka akan tampil sebuah kotak berwarna kuning
dan tiga buah tombol. Coba klik tombol
fade out,
maka kotak akan menghilang,
kemudian coba klik tombol
fade in
untuk menampilkan kotak kembali. Dan terakhir
coba klik tombol
fade to 0.3,
maka kotak akan terlihat pudar warnanya
Kita juga bisa mengatur waktu untuk efek fade dengan menggunakan fungsi
set time
Out,
misalny
a
dalam waktu3detik, maka elemen teksnyaakan menghilang dari
pandangan. Untuk lebi
h jelasnya, simak skrip berikut:
Sekarang coba jalankan
skrip diatas maka akan tampil sebuah kotak berwarna kuning
terang dengan teks berwarna hitam dan pada waktu 3detik ko
tak dan teks akan
menghilang secara perlahan
-
lahan.
18
Modul Kuliah Pemrograman Web I
I
2011
16.
<style type="text/css">
17.
#kotak {
18.
position:relative;
19.
width:100px;
20.
height:100px;
21.
background:red;
22.
}
23.
</style>
24.
</head>
25.
<body>
26.
<br/><
br/><br/><br/><br/>
27.
<button class="mulai">Jalankan</button>
28.
<br/><br/><br/><br/><br/><br/><br/>
29.
<div id="kotak"></div>
30.
</body>
31.
</html>
Sekarang coba jalankan skrip animasi.html, maka akan tampil sebuah kota berwarna
merah dengan tombol
Jalankan
diatasnya. Coba klik tombol
Jalankan,
maka kota
akan bergerak dari ke kanan, kemudian membesar dan bergerak atas lalu ke kanan,
lalu mengecil lagi ke ukuran semula dan terakhir bergerak ke bawah menuju posisi
semula sambil melakukan efek slide.
19
Modul Kuliah Pemrograman Web I
I
2011
BAB
V
BERKREASI DENGAN PLUGIN JQUERY UI
Logo jQuery
jQuery UI (user interface merupakan plugin yang paling populer di kalangan programmer
jQuery
.
Karena sampai
-
sampai dijadikan satu manual dengan manual jQuery di website
resminya. jQuery UI dibuat
oelh Paul Bakaus yang bekerja sama dengan stefan Petre untuk
menciptakan efek
-
efek yang canggih dan komponen librari pelengkap jQuery, diantaranya :
-
Accordion
-
Datepicker
-
Tabs
-
Dialog
-
Progressbar
-
Slider
-
Effect/animasi
-
Drag and Drop
-
Dan lain
-
lain
Selanjutnya,
bagian berikut akan membahas cara penggunaan beberapa komponen library
dari jQuery UI.
Instalasi jQuery UI
1.
Download jQuery UI di
http://jquery.com/
maka akan tampil halaman downloadnya,
klik aja langsung link
current (
stable),
maka file jQuery UI (jquery
-
ui
-
1.7.2.custom.rar) akan tersimpan di komputer anda.
20
Modul Kuliah Pemrograman Web I
I
2011
2.
Filenya masih berbentuk kompresi (jquery
-
ui
-
1.7.2.custom.rar), oleh karena itu
gunakan program winzip/winrar untuk mengekstraknya, nanti semua fule jquery
-
ui
akan ditemukan pada folder
jquery
-
ui
-
1.7.2.custom
3.
Untuk mencobanya, silahkan klik versi demonya yang ada di folder
jquery
-
ui
-
1.7.2.custom/development
-
bundle/demis,
nanti klik 2x file index.html pada folder
tersebut, maka akan tampil halaman demo dari jQue
ry UI, misalnya coba library
Tabs
pada bagian
widget,
maka demonya akan tampil dibagian tengah.
Silahkan dicoba beberapa demo library jQuery UI lainnya, seperti draggable,
accordion, progressbar, Dialog, Effect, dan lain
-
lain. Keren kan???
Sekarang pertany
aannya, bagaimana menerapkan library jQuery UI pada website
kita? Ikuti aja pembahasan berikutnya.
21
Modul Kuliah Pemrograman Web I
I
2011
BAB
VI
DATEPICKER
Datepicker berfungsi untuk
mengambil tanggl dari sistem kelender yang ada di komputer,
sehingga memudahkan kita dalam memilih tanggal,
karena ditampilkan secara keseluruhan
dan menarik. Oke langsung saja kita jelajahi fiturnya.
Datepicker.html
1.
<html>
2.
<head>
3.
<title>Menggunakan Datepicker</title>
4.
<link type="text/css"
href="develop/themes/base/jquery.ui.all.css"
rel="stylesheet"/>
5.
<script t
ype="text/javascript" src="develop/jquery
-
1.4.3.js"></script>
6.
<script type="text/javascript"
src="develop/ui/jquery.ui.core.js"></script>
7.
<script type="text/javascript"
src="develop/ui/jquery.ui.datepicker.js"></script>
8.
9.
<script type="text/javascript">
10.
$("
document").ready(function(){
11.
$("#tanggal").datepicker();
12.
13.
});
14.
</script>
15.
</head>
16.
<body>
17.
Masukkan tanggal :<input id="tanggal" type="text">
18.
</body>
19.
</html>
22
Modul Kuliah Pemrograman Web I
I
2011
Datepicker Format Bahasa Indonesia
Pada contoh kedua, kita akan mengubah format tanggal standar datepicker
(bulan/tanggal/tahun) menjadi format tanggal berbahasa indonesia
(tanggal/bulan/tahun).
Caranya cukup mudah, kita tinggal panggil library penanggalan bahasa indonesia yang sudah
dised
iakan oleh jquery UI, yaitu ui.datepicker
-
id.js yang terdapat pada folder jQueryUI.
Untuk lebih jelasnya, lihat skrip berikut (perhatikan teks yang ditebalkan):
Datepicker2.html
1.
<html>
2.
<head>
3.
<title>Menggunakan Datepicker</title>
4.
<link type="text/css"
hre
f="develop/themes/base/jquery.ui.all.css"
rel="stylesheet"/>
5.
<script type="text/javascript" src="develop/jquery
-
1.4.3.js"></script>
6.
<script type="text/javascript"
src="develop/ui/jquery.ui.core.js"></script>
7.
<script type="text/javascript"
src="develop/ui/j
query.ui.datepicker.js"></script>
8.
<script type="text/javascript"
src="develop/ui/i18n/jquery.ui.datepicker
-
id.js"></script>
9.
<script type="text/javascript">
10.
$("document").ready(function(){
23
Modul Kuliah Pemrograman Web I
I
2011
11.
$("#tanggal").datepicker();
12.
13.
});
14.
</script>
15.
</head>
16.
<body>
17.
Masukkan t
anggal :<input id="tanggal" type="text">
18.
</body>
</html>
Sekarang coba jalankan skrip
datepicker2.html
di browser, kemudian klik pada input text di
sebelah kanan teks
Masukkan tanggal,
maka akan tampil pilihan tanggal yang sudah
berbahasa indonesia
dan berformat indonesia (tanggal.bulan/tahun).
Mengubah
Format Penanggalan Datepicker
Pada contoh ketiga, kita masih akan mengubah format tanggal standar
dari datepicker
(mm/dd/yyy)
contohnya tanggal 7 Februari 2010 ditulis (02/07/2010 menjadi format
tanggal yang kita inginkan (lebih familiar), misalnya kita akan menampilkannya menjadi (07
Februari 2010)
Caranya, gunakan fungsi
dateformat
dari datepicker. Untuk lebih jelasnya, lihat skrip berikut
(perhatikan teks yang ditebalkan):
1.
<html>
2.
<head>
3.
<title
>Menggunakan Datepicker</title>
4.
<link type="text/css"
href="develop/themes/base/jquery.ui.all.css"
rel="stylesheet"/>
Created : Doni Efandy V2