pelatihan j query
DESCRIPTION
latihanTRANSCRIPT
[Computer and Communication] | JQuery 1
JQuery
Penggunaan dan Perkembangan
jQuery merupakan suatu framework (library) javascript yang menekankan interaksi antara
javascript dan HTML, atau bisa disebut juga sebagai cara baru dalam menuliskan kode
javascript. jQuery akan mempercepat dan meringkaskan library javascript sehingga dengan
menggunakan jQuery kita dapat mempercepat perpindahan dokumen HTML, penanganan
event (event handling), pembuatan animasi didalam web sehingga web kita tampak seperti
flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat. Jquery
memiliki slogan “write less, do more” yang kurang lebih maksudnya adalah kesederhanaan
dalam penulisan code, tapi dengan hasil yang lebih banyak.
jQuery mempunyai lisensi dibawah GNU General Public License dan MIT License artinya jQuery
merupakan aplikasi yang Open Source dan bebas di publikasikan oleh siapapun. Ukurannya juga
cukup kecil yaitu sebesar 56 KB (compressed) sehingga menggunakan jQuery menjadi jauh lebih
cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript
Konvensional.
Beberapa hal yang bisa dilakukan dengan JQuery.
1. Mengakses bagian halaman tertentu dengan mudah
2. Mengubah tampilan bagian halaman tertentu
3. Mengubah isi dari halaman
4. Merespon interaksi user dalam halaman dan menambahkan animasi ke halaman
5. Mengambil informasi dari server tanpa me-refresh seluruh halaman
6. Menyederhanakan penulisan Javascript biasa.
Mengenai perkembangan versi dari JQuery sendiri saat ini (November 2011) telah ada jQuery
versi 1.7 (Release Notes). Perkembangan versi jQuery:
1. JQuery versi 1.0 (1.0.1, 1.0.2, 1.0.3, 1.0.4)
2. JQuery versi 1.1 (1.1.1, 1.1.2, 1.1.3, 1.1.3.1, 1.1.4)
3. JQuery versi 1.2 (1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.4, 1.2.5, 1.2.6)
4. JQuery versi 1.3 (1.3.1, 1.3.2)
5. JQuery versi 1.4 (1.4.1, 1.4.2, 1.4.3, 1.4.4)
6. JQuery versi 1.5 (1.5.1, 1.5.2)
7. JQuery versi 1.6 (1.6.1, 1.6.2, 1.6.3, 1.6.4)
Sumber : http://www.jquery.com
[Computer and Communication] | JQuery 2
Perbedaan versi pada Jquery.
Versi baru biasanya terdapat penambahan fungsi baru dari fungsi jquery yang sebelumnya. Tetapi pasti memiliki besar kapasitas yang lebih besar dari versi yang sebelumnya sehingga dengan versi yang baru dapat memperberat beban dan loading pada aplikasi website yang dibuat. Maka dari itu kita harus mempertimbangkan ketika kita memakai versi jquery yang kita akan gunakan.
Perbedaan Jquery.js (tanpa min) dengan jquery.min.js(menggunkan min).
Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan “min” menandakan bahwa jquery tersebut telah dikompres (compress) sehingga muatan atau bebanya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan menghilangkan beerapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan jquery. Maka dari itu jika sekedar pengguna lebih baik menggunakan jquery.min.js agar loading lebih cepat.
Struktur penggunaan jquery
Jquery merupakan library yang berupa file javascript. Jquery dapat mempermudah kita dalam memanfaatkan dan menggunakan javascript. Sebelum dapat digunakan, jquery harus di include-kan terlebih dahulu. Letak dari script includenya pun berada pada tag <head></head>.
Salah satu keuntungan menggunakan jquery adalah kemudahan dalam mengakses DOM(Document Object Model). Untuk dapat mengakses DOM denga sempurna tentu semua DOM harus sudah siap untuk diakses. Untuk memastikan semua DOM telah siap diakses, Jquery menyediakan event.
Event ini hampir sama dengan onLoad yang dimiliki oleh native javascript. Bedanya fungsi di dalam $(document).ready() akan tertrigger saat semua DOM telah siap, sedangkan pada onLoad, semua elemen yang ada dalam halaman harus telah selesai terdownload terlebih dahulu, termasuk file gambar.
<head>
<script type=”text/javascipt" src=”jquery-1.4.4.min.js”>
</script>
</head>
$(document) .ready()
[Computer and Communication] | JQuery 3
salah satu contoh penggunaanya:
$(“p#content”).addClass(“highlight”) akan dijalankan saat semua DOM telah siap p#content
merupakan selector jquery yang sebenarnya sama dengan selector CSS. Script diatas akan
menambahkan class highlight kedalam blok p yang memiliki id content.
Penggunaan
Pada penggunaan jQuery ini tidak terlepas dengan javascript karena library atau framework
jquery ini ditulis menggunakan bahasa javascript. Sebenarnya ada beberapa cara teknik
penulisan. Tata cara penulisan yang biasa digunakan adalah seperti ini.
1. Pendefinisia jQuery sendiri, kode yang digunakan bisa berupa jQuery() atau $().
2. Selector, selector biasanya disisipkan pada pendefinisian diatas misalkan seperti ini
jQuery(‘#kotak’) . selector merupakan perintah yang digunakan untuk membuat
manipulasi pada selector HTML yang didefinisikan diatas. Selector yang umum
digunakan biasanya adalah tag HTML itu sendiri, nama ID, nama CLASS, dan atribut-
atribut yang ada pada HTML. Selector disini bisa kita sebut juga sebagai target. Target
dari manipulasi jQuery pada tampilan HTML.
3. Method, pada method disini diletakan setelah selector. Pada method ini merupakan
fungsi untuk memanipulasi selector yang menjadi target jQuery tersebut. Method disini
bisa berupa event, manipulasi data, memberikan effect tampilan atau mendapatkan
informasi dari suatu object. Kebanyakan didalam function method ini terdapat beberapa
macam properties atau function lagi untuk pemilihan dari karakter dari method
tersebut.
<style type=”text/css”>
.jalankan{
background-color: red;
}
</style>
<script type=”text/javascript”>
$(document).ready(function(){
$(“p#content”).addClass(“jalankan”);
});
</script>
<script type="text/javascript">
//Tempat script javascript
$(document).ready(function(){
$("p#content").addClass("highlight");
});
</script>
[Computer and Communication] | JQuery 4
Berikut merupakan contoh struktur penulisanya:
Pada script diatas bisa kita jelaskan bahwa jquery ini berfungsi untuk menampilkan selector
atau HTML yang memiliki ID “kotak” yang mana HTML yang memiliki ID kotak sebelumnya
adalah hide atau tidak tampil.
Membuat fuction JQuery.
Jquery adalah satu framewok javascript yang mendukung pluggin dengan sangat mudah. Sehingga banyak kita dapat dengan mudah men jumpai plugin-plugin yang berada diinternet. Contoh plugin yang terkenal adalah plugin yang dikembangan oleh jQuery UI. Sebenarnya kita juga bias mendevelop suatu plugin sendiri. Disini akan dijelaskan sedikit mengenai pembuatan plugin dan fungsi didalam jQuery.
Untuk penulisan jQuery secara sederhana adalah sebagai berikut
Jika kita menggunakan script diatas, kelemahanya adalah function jQuery tersebut dapat terjadi bentrok
dengan plugin jQuery yang lain. Karena didalam perintah function tersebut, harus dituliskan
menggunakan jQuery juga untuk pendefinisian jQuery-nya. Untuk masalah diatas dapat ditanggulangi
dengan menggunakan perintah berikut:
Dengan pemformatan penulisan function diatas, kita dapat menggunakan symbol dollar ‘$’ untuk
dapat meloloskan dari function jQuery lain. Untuk lebih jelasnya mengenai penggunaan function jQuery
yang sederhana bias menggunakan contoh berikut ini,
Kemudian kita dapat menjalankan perintahnya dengan cara berikut ini:
jQuery(‘#kotak’).show();
Pendefinisian
jquery
Selecto
r
Metho
d
jQuery.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
(function( $ ) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})( jQuery );
(function( $ ){
$.fn.maxHeight = function() {
var max = 0;
this.each(function() {
max = Math.max( max, $(this).height() );
});
return max;
};
})( jQuery );
[Computer and Communication] | JQuery 5
Hasil keluaran dari script diatas akan menujukan nilai tinggi dari tag HTML div melalui notifikasi
perintah alert. Dari fungsi yang kita buat, yang perlu kita soroti adalah fungsi this dan $(this). Untuk
fungsi this.each sendiri, memang harus ditulis this seperti itu bukan dengan $(this). Jika kita tuliskan
$(this) disitu maka javascript akan mengeluarkan perintah error atau tidak jalan. Karena jQuery sendiri
akan mendefinisikan perintah berikut sebagai $($(this)). Jadi kita tidak perlu menuliskan perintah
$(this).each akan tetapi this saja. Kemudian setelah this didalam fungsi each(). Kita akan menjumpai
dengan $(this). Kalo pada bagian ini, kita tuliskan secara default atau seperti biasa. Karena perintah
$(this) menerangkan target yang sedang diseleksi oleh fungsi each().
Selain itu, didalam penulisan function ini kita bisa membuat fungsi yang dapat kita berikan
options dan default dalam membuat framework fungsi buatan kita sendiri. Contoh scriptnya adalah
seperti ini.
Jika kita function tersebut dengan perintah berikut ini.
Maka isi kandungan informasi fungsi tooltip tersebut adalah.
Hal tersebut terjadi karena, funsi yang kita set adalah location left dan default yang ada adalah
background-color:blue dan location:top. Kedua nilai tersebut, default dan nilai function yang kita set kita
lakukan fungsi extends di jQuery maka, menampilkan isi darifungsi diatas. Dimana nilai default akan
tereplace dengan nilai yang kita set. jika yang kita set hanya sebagian argument dari fungsi tersebut,
maka nilai yang lainya akan terset secara default.
jQuery(document).ready(function(){
var tallest=$('div').maxHeight();
alert(tallest);
});
(function( $ ){
$.fn.tooltip = function( options ) {
//Create some defaults, extending them with any options that were provided
var settings = $.extend( {
'location' : 'top',
'background-color' : 'blue'
}, options);
return this.each(function() {
// Tooltip plugin code here
});
};
})( jQuery );
$('div').tooltip({
'location' : 'left'
});
{
'location' : 'left',
'background-color' : 'blue'
}
[Computer and Communication] | JQuery 6
Berikut merupakan contoh jadi dari program yang telah dibuat.
<html>
<head>
<title>Untitled Document</title>
<script src="jquery-1.4.js" type="text/javascript"></script>
<script>
(function( $ ){
$.fn.tooltip = function( options ) {
var settings = $.extend( {
'position': 'absolute',
'backg' : 'blue',
'data':'Nilai Default',
'top':'2px',
'right':'10px',
'width':'200px'
}, options);
$('.tip').show();
$('.tip').css({'position':settings.position,'background-
color':settings.backg,'top':settings.top,'right':settings.right,'width':se
ttings.width});
$('.tip').text(settings.data);
};
})( jQuery );
jQuery(document).ready(function(){
$('div').hover(
function(){
jQuery('.tip').tooltip({'top':'1px','right':'2px','backg':'red','wid
th':'100px'});
},function(){
jQuery('.tip').hide();
});
});
</script>
<style>
#tool{
width:260px;
position:relative;
}
#tool img{
height:40px;
width:260px;
height:200px;
}
</style>
</head>
[Computer and Communication] | JQuery 7
Apabila kursor kita gerakan pada gambar, maka akan muncul tooltip yang terblock warna merah tersebut.
Event yang ada pada javascript.
1. .keypress()
Merupakan Event pemicu untuk mengikat fungsi dari perintah tombol dari element yang
dipilih.
$( selector ).keypress() //memicu keypress untuk pemilihan item
$( selector ).keypress( function ) // Optional. Menjalankan fungsi yang
spesifik ketika ada pemicu berupa penekanan tombol keyboard.
Dari sekian tombol yang ada pada keyboard,akan memiliki devinisi kode yang berbeda-beda.
Devinisi kode dapat dilihat dalam table berikut:
<body>
<div id="tool">
<img src="Copy of DSC_0133.jpg" />
<span class="tip" style="display:none">INI ADALAH TOOLTIP
SEDERHANA</span>
</div>
</body>
</html>
[Computer and Communication] | JQuery 8
Key Code Backspace 8
Tab 9
Enter 13
Shift 16 Ctrl 17
Alt 18
Pause/Break 19
Caps Lock 20 Escape 27
Page Down 33
End 35
Home 36 Left Arrow 37
Up Arrow 38
Right Arrow 39
Down Arrow 40 Insert 45
Delete 46
0 48
1 49
2 50
3 51
4 52
5 53 6 54
7 55
8 56
9 57
A 65
B 66
C 67 D 68
E 69
F 70
G 71 H 72
I 73
J 74
K 75 L 76
M 77
N 78
Key Code O 79
P 80
Q 81
R 82 S 83
T 84
U 85
V 86 W 87
X 88
Y 89
Z 90 Left window key 91
Right window key 92
Select key 93
Numpad 0 96 Numpad 1 97
Numpad 2 98
Numpad 3 99
Numpad 4 100
Numpad 5 101
Numpad 6 102
Numpad 7 103
Numpad 8 104 Numpad 9 105
Multiply 106
Add 107
Substract 109
Decimal Point 110
Divide 111
F1 112 F2 113
F3 114
F4 115
F5 116 F6 117
F7 118
F8 119
F9 120 F10 121
F11 122
F12 123
Key Code
Num lock 144
Scroll lock 145 Semi-colon 186
Equal sign 187
Comma 188
Dash 189
Period 190
Forward slash 191
Grave accent 192
Open bracket 219 Back slash 120
Close braket 221
Sinle quote 222
[Computer and Communication] | JQuery 9
Contoh : Perintah ketika kita memberian fungsi ketika ada pemicu pada penekanan kode 27 = Esc.
2. Click()
Digunakan untuk memicu event pada element HTML saat user mengklik elemen yang mempunyai fungsi click() ini. Event click dikirim ke elemen saat pointer mouse diatas elemen dan tombol mouse ditekan lalu dilepaskan.
$(“p”).click() kode ini berarti bahwa JQuery mencari tag <p> HTML dan menunggu diklik oleh
user. $(this).hide() kode ini berarti bahwa isi dari paragraph dihide.
3. fadeIn()
Digunakan untuk menampilkan elemen dengan efek pudar.
$(‘selector’).fadeIn(‘durasi’,’callback’)
Keterangan:
Selector digunakan untuk memilih elemen yang akan dikenakan efek fadeIn.
‘durasi’ adalah waktu yang menunjukkan berapa lama efek fade ini akan berlangsung.
$(document).keypress(function(){
if(keyCode==27){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
}
});
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
[Computer and Communication] | JQuery 10
Contoh:
4. Css();
jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi. $(selector).css(name,value) $(selector).css({properties}) $(selector).css(name)
Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih
untuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties} Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.
<script>
$(document).ready(function(){
$(“p”).hide();
$(“.tekan”).click(function(){
$(“p”).fadeIn();
});
});
</script>
<script type=”text/javascript”>
$(document).ready(function(){
$("#tombol1").click(function(){
$(".p1").css("color","red");
$(".p2").css({"color":"white","backgroundcolor":"#
ff8954","font-family":"Arial","fontsize":"
20px","padding":"5px"});
});
$("#tombol2").click(function(){
var nilai = $(".p1").css("color");
alert(nilai);
});
});
<script>
[Computer and Communication] | JQuery 11
1. Foto popUp
Yang dibutuhkan:
File library jquery-1.4.4.min.js
File foto (terserah .jpg, .PNG)
Langkah Pembuatan:
1. Menampilkan image yang ada didalam folder kita ke dalam browser.
Index.html
<a href=”#”> menandakan bahwa, tidak ada peralihan kehalaman lain setelah
gambar tersebut di klik.
Kemudian simpan terserah.html, pada modul ini kita akan menamainya dengan
nama index.html. Kemudian file index.html kita buka dengan Browser, maka akan
tampil seperti gambar dibawah ini.
<html>
<title>Image popUp</title>
<head></head>
<body>
<div align=”center”>
<a href=”#”><img src=”images/sm.jpg”/></a>
<div>
</body>
<html>
[Computer and Communication] | JQuery 12
Tetapi setelah di klik pada gambar tersebut, tidak akan terjadi perubahan peralihan
halaman. Karena tidak memberikan tujuan pada <a href=”#”></a>.
2. Menampilkan overlay ketika image di klik.
Tambahkan script dibawah pada halaman Index.html.
Setelah itu kita menyisipkan script dibawah ini untuk menghubungkan file library JQuery
dengan file index.html. misalkan kita memakai jquery-1.4.4.min.js. Sisipkan diantara tag
<head> </head>.
<html>
<title>Image popUp</title>
<head></head>
<body>
<div align=”center”>
<div id=”eksekusi”>
<a href=”#”><img src=”images/sm.jpg”/></a>
</div>
<div id=”background”></div>
<div id=”large”></div>
</div>
</body>
<html>
<head>
<script type=”text/javascript” src=”jquery-
1.4.4.min.js”></script>
</head>
[Computer and Communication] | JQuery 13
Tambahkan script dibawah ini untuk mendiskripsikan script dari javascript, yang nantinya
kita memanggil fungsi dari library file JQuery. Tulis script ini setelah pemanggilan file
JQuerynya.
Maka setelah gambar tersebut di klik akan tampil seperti ini. Overlay masih dalam tampilan
sederhana, dan belum menyamarkan gambar yang berada di belakangnya.
<script type="text/javascript" language="javascript">
jQuery.fn.cnclab = function () {
$(this).css("position","absolute");
$(this).css("top", ( $(window).height() -
this.height() ) / 2+$(window).scrollTop() + "px");
$("#background").css("width", (
$(window).width() +$(window).scrollLeft() + "px"));
$("#background").css("height", (
$(window).height() +$(window).scrollTop() + "px"));
$(this).css("left", ( $(window).width() - this.width() ) /
2+$(window).scrollLeft() + "px");
return this; }
$(document).ready(function() {
$("#eksekusi img").click(function(e){
$("#background").css({"opacity" : "0.7"})
.fadeIn("slow");
$("#large").html("<img
src='"+$(this).attr("src")+"'/>")
.cnclab()
.fadeIn("slow");
return false;
});
});
</script>
[Computer and Communication] | JQuery 14
3. Menampilkan overlay dengan background gelap (agar gambar pada bagian belakang
disamarkan dengan cara penggelapan background) ketika image di klik.
Untuk menampilkan background gelap, kita harus mendiskripsikan CSS dari selector
#background dan mendiskripsikan selector #large.
Tambahkan script ini dibawah pendiskripsian script javascriptnya. Dan masih berada didalam
tag <head></head>.
[Computer and Communication] | JQuery 15
Setelah CSS selctor di deskripsikan, maka akan tampil seperti ini setelah di klik pada gambar
tersebut.
<style>
img {
border: none;
position: relative;
}
#large {
display: none;
position: absolute;
background: #FFFFFF;
padding: 5px;
color: #336699;
}
#background{
display: none;
position: absolute;
height: 100%;
top: 0;
left: 0;
background: #000000;
}
</style>
[Computer and Communication] | JQuery 16
4. Menerapkan script ketika kita klik di sekitar image saat #large akan kembali ke halaman
image awal. Tulis script dibawah ini pada tag <script></script> pada pendiskripsian
javascript.
5. Script ketika kita klik pada gambar pada saat #large akan kembali ke halaman image awal
dan kita dapat menggunakan tombol Esc untuk mengembalikanya.
6.
$("#background").click(function(){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
$(document).keypress(function(e){
if(e.keyCode==27){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
}
});
<html>
<head>
<script type="text/javascript" src="jquery-
1.4.4.min.js"></script>
<script type="text/javascript" language="javascript">
jQuery.fn.cnclab = function () {
$(this).css("position","absolute");
$(this).css("top", ( $(window).height() -
this.height() ) / 2+$(window).scrollTop() + "px");
$("#background").css("width", ( $(window).width()
+$(window).scrollLeft() + "px"));
$("#background").css("height", (
$(window).height() +$(window).scrollTop() + "px"));
$(this).css("left", ( $(window).width() - this.width()
) / 2+$(window).scrollLeft() + "px");
return this;
}
$(document).ready(function() {
$("#eksekusi img").click(function(){
$("#background").css({"opacity" : "0.7"})
.fadeIn("slow");
[Computer and Communication] | JQuery 17
Script keseluruhan.
Index.html
$(document).keypress(function(e){
if(e.keyCode==27){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
}
});
$("#background").click(function(){
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
});
</script>
<style>
img {
border: none;
position: relative;
}
#large {
display: none;
position: absolute;
background: #FFFFFF;
padding: 5px;
color: #336699;
}
$("#large").html("<img
src='"+$(this).attr("src")+"'/>")
.cnclab()
.fadeIn("slow");
return false;
});
[Computer and Communication] | JQuery 18
2. Form Validate
Yang dibutuhkan:
jquery-1.4.js ( Library )
jquery.validate.js
#background{
display: none;
position: absolute;
height: 100%;
top: 0;
left: 0;
background: #000000;
}
</style>
</head>
<body>
<div align="center">
<div id="eksekusi">
<a href="#"><img src="images/sm.jpg"/></a>
</div>
<div id="large"></div>
<div id="background"></div>
</div>
</body>
</html>
[Computer and Communication] | JQuery 19
Langkah Pembuatan:
1. Pertama, buatlah form ( form.html ):
2. Setelah itu kita menyisipkan script dibawah ini untuk menghubungkan file library JQuery
dengan file form.html. Hal ini agar kita dapat menggunakan Jquery tersebut. misalkan
kita memakai jquery-1.4.js. Sisipkan diantara tag <head> </head>.
3. Mengatur validasi
Masih pengetikan di <head></head>, ketik scipt di bawah ini.
4. Mengaktifkan validasi
Pengetikan di antara <script></script>, ketik script di bawah ini.
5. Mengecek ada tidaknya text di dalam suatu form
Pengetikan di antara $("#form1").validate, ketik scipt di bawah ini.
<html>
<head></head>
<body>
<form id= “form1”>
Username : <input type=text name=username> <br>
Nama : <input type=text name=nama > <br>
</form>
</body>
<html>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript"
src="jquery.validate.js"></script>
<script type="text/javascript">
Untuk tahap ke 4
</script>
$(document).ready(function(){
$("#form1").validate(
{
Untuk tahap 5
});
});
[Computer and Communication] | JQuery 20
6. Mengatur password
Buat form password dan ulang password. Letakkan scipt di bawah form Nama.
7. Memvalidasi panjang form password dan form ulang password yang harus sama dengan
password.
Tambahkan scipt di bawah ini di dalam rules, message.
Rules : //Aturan
{
nama: "required",
username: "required",
}
Message: //Pesan yang akan muncul
{
nama: { required: '. Nama harus di isi' },
username: { required: '. Username harus di isi' },
}
success: //Jika berhasil
{
function(label)
{ label.text('OK!').addClass('valid'); }
}
Password : <input name="password" id="password"
type="password"><br>
Ulang Password : <input name="cpassword" id="cpassword"
type="password"><br>
Rules : {
password: {
required: true,
minlength: 8 },
cpassword:{
required: true,
equalTo: "#password" },
}
message : {
password: {
required : '. Password harus di isi',
minlength: '. Password minimal 8 karakter'
},
cpassword: {
required: '. Ulangi Password harus di isi',
equalTo : '. Isinya harus sama dengan Password'
},
}
[Computer and Communication] | JQuery 21
8. Mengatur email dan telepon
Tambahkan form email dan telepon.
9. Mengatur validasinya.
Tambahkan scipt di bawah ini di dalam rules, message.
3. Slideshow
Slideshow merupakan suatu plugin aplikasi yang sering kita jumpai di web berita akhir-
akhir ini. Dengan menampilkan slideshow, user mungkin akan lebih tertarik untuk melihatnya
dari pada informasi tulisan berjalan saja. Karena dengan adanya slideshow suatu informasi
dapat dilihat lebih oleh user. Karena animasi yang dikemas dalam slideshow itu biasanya
disertai gambar yang menarik. Kegunaan slideshow selain untuk memberikan flash news pada
halaman web berita, juga digunakan untuk image gallery. Dengan adanya slideshow ini user
tidak harus menekan tombol next untuk melihat foto selanjutnya akan tetapi akan berubah
secara otomatis berdasarkan setingan waktu pada slideshow tersebut.
Email : <input name="email" id="email"
type="text"><br>
Telepon : <input name="telp" id="telp" type="text">
<br>
Rules : {
email: {
required: true,
email: true },
telp: {
required: true,
number: true },
}
mesage : {
email: {
required: '. Email harus di isi',
email : '. Email harus valid' },
telp: {
required: '. telepon harus di isi',
number : '. Hanya boleh di isi Angka' },
}
[Computer and Communication] | JQuery 22
Untuk membuat slideshow skill yang dibutuhkan adalah HTML,CSS,Javascript dan
Framework Jquery. Untuk HTML sendiri, temen-temen cukup harus paham membuat TAG
HTML yaitu DIV,IMG dan Anchor. Kemudian temen-temen harus mengerti juga masalah CSS.
Nah yang ini penting, karena CSS ini yang akan menentukan tampilan dari plugins yang akan
kita buat. Jika kita salah dalam mendesai css. Bisa saja plugins yang kita buat tidak sesuai
dengan yang kita harapkan. Karena css ini menurut penulis adalah komponen yang pembaca
harus benar-benar pahami.
Kemudian selanjutnya adalah javascrip, javascript disini temen-temen diharapkan cukup
mengerti cara penggunaan function, variable, pendefinisian suatu variabel dan event object
saja. Kemudian adalah framework Jquery. Framework jQuery ini memang utama dari pelatihan
ini, akan tetapi jquery yang kita gunakan disini tidak begitu rumit. Semoga saja bisa dicerna
dengan mudah dan dapat dipahami secara jelas.
1. pelathihan1
Pada pelathian yang pertama ini, kita akan belajar menggunakan function,variable dan
pendefinisian object.
Pelathian1.html
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script>
function coba(x,y){
var kata=(x!='')?x:'tidak ada kata-kata';
var selector=y;
jQuery(selector).text(kata);
}
</script></head>
<body>
<a id="tombol" href="javascript:;"
onclick="coba('TERKIRIM','#tombol')">KLIK</a>
</body>
</html>
[Computer and Communication] | JQuery 23
Pada script diatas maka akan tampil seperti berikut.
Sebelum diklick Sesudah diklick
Gambar diatas menujukan sebelum dan sesudah gambar tersbut diclick maka akan muncul
tulisan tersebut.
<a id="tombol" href="javascript:;" onclick="coba('TERKIRIM','#tombol')">KLIK</a>
Script yang membuat tampilan berubah saat diclick adalah element dari tulisan yang berwarna
merah. Script tersebut sering dituliskan atau dikatakan sebagai event. Dan untuk script yang
berwarna hijau memberikan definisi id untuk selector dari link tersebut. Sehingga tag HTML ini
lah yang nanti akan menjadi target. Kemudian saat kita click maka script diatas maka akan
mecari function javascript yang bernama coba dengan argument ‘terkirim’ dan ‘#tombol’.
Kemudian kedua argument tersebut akan menjalankan sesuai perintahnya yang berada pada
function coba. Dimana didalam function coba terdapat perintah berikut:
function coba(x,y){
var kata=(x!='')?x:'tidak ada kata-kata';
var selector=y;
jQuery(selector).text(kata);
}
[Computer and Communication] | JQuery 24
Yang mana argument x=’terkirim’ dan y=’#tombol’ , kemudian untuk membaca baris selanjutnya yaitu
var kata=(x!='')?x:'tidak ada kata-kata';
Maka var kata akan bernilai =x jika x!=’’ dan akan bernilai ‘tidak ada kata-kata’ jika tidak
memenuhi x!=’’. maka jika program itu dijalankan akan bernilai var kata=’terkirim’ karena
x=’terkirim’. Kemudian var selector=’#tombol’ . kemudian untuk line yang terakhir akan bernilai
seperti berikut jQuery(‘#tombol’).text(‘terkirim’); yang artinya adalah akan mengubah text pada
tag HTML yang memiliki id = tombol.
Note : var artinya adalaha pendifinisian suatu variable.
Saya kira belajar function dijavascript dan jQuery sudah cukup. Maka kita lanjutkan saja ke
program utamanya. Mari kita tulis script berikut
<style>
#kotak_foto{
position:relative;
width:400px;
margin:0 auto;
background-color:#F0F0F0;
border:1px solid #666666;
height:360px;
}
#foto{
margin:5px;
}
#foto img{
width:390px;
height:350px;
}
#tombol a{
float:left;
padding:5px;
width:15px;
text-align:center;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
margin-left:2px;
background-color:#FF0000;
color:#FFFFFF;
}
[Computer and Communication] | JQuery 25
#tombol{
position:absolute;
bottom:5px;
margin-right:2px;
right:5px;
}
</style>
<div id="kotak_foto">
<div id="foto">
<div id="gambar1"><img src="Copy of 26052011(002).jpg"/></div>
<div style="display:none" id="gambar2"><img src="Copy of
DSC_0051.JPG" /></div>
<div style="display:none" id="gambar3"><img src="Copy of
DSC_0133.JPG" /></div>
</div>
<div id="tombol">
<a id="pertama" href="javascript:;">1</a>
<a href=" javascript:;">2</a>
<a href="#">3</a>
</div>
</div>
Maka tampilanya akan seperti gambar berikut
[Computer and Communication] | JQuery 26
Maka jika kita bedah tampilan jadinya akan kita tunjukan dengan prototype yang digambarkan di bawah
Kemudian jika kita lanjutkan untuk penulisan program jQuery-nya maka yang pertama kita buat adalah
membuat trigger di html dan pada .ready jQuery-nya. Sehingga menjadi seperti ini.
<script src="jquery-1.4.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
mainkan('#pertama','#gambar1');
});
</script>
<div id="kotak_foto">
<div id="foto">
<div id="gambar1"><img src="Copy of 26052011(002).jpg"/></div>
<div style="display:none" id="gambar2"><img src="Copy of
DSC_0051.JPG" /></div>
<div style="display:none" id="gambar3"><img src="Copy of
DSC_0133.JPG" /></div>
</div>
<div id="tombol">
<a id="pertama" href="javascript:;" onclick=”mainkan(this,’#gambar1’)”>1</a>
<a href=" javascript:;" onclick=”mainkan(this,’#gambar2’)”>2</a>
<a href="javascript:;" onclick=”mainkan(this,’#gambar3’)”>3</a>
</div>
</div>
Jika sudah kita buat maka trigger sudah siap kita buat, maka sekarang adalah membuat fungsi
saat trigger itu berjalan.
GAMBAR IMAGE
position:relative;width:400px; margin:0 auto;background-color:#F0F0F0;border:1px solid #666666; height:360px;
#kotak_foto
#foto Margin:5px;
position:absolute; bottom:5px; margin-right:2px; right:5px;
#tombol
[Computer and Communication] | JQuery 27
Nama fungsi-nya sudah di buat yatu dengan nama mainkan(argument1,argument2). Kemudian
kita tambahkan saja fungsinya sehingga sintaxnya menjadi seperti ini.
<script>
var timer=null;
function mainkan(tombol,gambar){
jQuery('#tombol a').each(function(){
jQuery(this).css({'background-
color':'white','color':'black'});
});
jQuery('#foto div').hide();
jQuery(gambar).fadeIn('slow');
jQuery(tombol).css({'background-
color':'red','color':'white'});
if(timer!=null){clearTimeout(timer);}
timer=setTimeout(function(){
var
nextanchor=(jQuery(tombol).next('a').text()=='')?jQuery('a#pertama'):jQuery(t
ombol).next('a');
nextanchor.click();
},3000);
}
jQuery(document).ready(function(){
mainkan('#pertama','#gambar1');
});
</script>
[Computer and Communication] | JQuery 28
Sehingga tulisan script lengkapnya akan menjadi seperti ini.
<html>
<head>
<title>Untitled Document</title>
<script src="jquery-1.4.js" type="text/javascript"></script>
<script>
var timer=null;
function mainkan(tombol,gambar){
jQuery('#tombol a').each(function(){
jQuery(this).css({'background-
color':'white','color':'black'});
});
jQuery('#foto div').hide();
jQuery(gambar).fadeIn('slow');
jQuery(tombol).css({'background-color':'red','color':'white'});
if(timer!=null){clearTimeout(timer);}
timer=setTimeout(function(){
var
nextanchor=(jQuery(tombol).next('a').text()=='')?jQuery('a#pertama'):jQuery(t
ombol).next('a');
nextanchor.click();
},3000);
}
jQuery(document).ready(function(){
mainkan('#pertama','#gambar1');
});
</script>
<style>
#kotak_foto{
position:relative;
margin:20px auto;
border:1px solid #666666;
padding:5px;
width:400px;
}
#foto img{
width:400px;
}
#tombol{
bottom:20px;
right:25px;
position:absolute;
}
#tombol a{
border-radius:5px;
font-weight:bold;
text-decoration:none;
color:#000000;
[Computer and Communication] | JQuery 29
background-color:#FFFFFF;
padding:5px;
}
</style>
</head>
<body>
<div id="kotak_foto">
<div id="foto">
<div id="gambar1"><img src="Copy of 26052011(002).jpg" /></div>
<div style="display:none" id="gambar2"><img src="Copy of
DSC_0051.jpg" /></div>
<div style="display:none" id="gambar3"><img src="Copy of
DSC_0133.jpg" /></div>
</div>
<div id="tombol">
<a href="javascript:;" onclick="mainkan(this,'#gambar1')"
id="pertama">1</a>
<a href="javascript:;" onclick="mainkan(this,'#gambar2')">2</a>
<a href="javascript:;" onclick="mainkan(this,'#gambar3')">3</a>
</div>
</div>
</body>
</html>
Maka tampilan jadinya akan seperti ini.