Makalah J query dan penggunaannya sebagai validasi form
Download as DOCX, PDF1 like2,988 views
![terkadang sangat sulit untuk di pahami. Misalnya fungsi javascript untuk membuat stripe (warna
selang-seling) pada baris suatu tabel adalah sebagai berikut:
function stripe (id) {
var even = false;
var evenColor = arguments [1] ? arguments [1] : "#fff";
var oddColor = arguments [2] ? arguments [2] : "#eee";
var table = document.getElementById (id);
if ( ! table) {return;}
var tbodies = table.getElementsByTagName ("tbody");
for (var h = 0; h < tbodies.lenght; h++) {
var trs = tbodies[h].getElementsByTagName("tr");
for (var i = 0; i < trs.lenght; i++) {
if ( ! hasClass(trs[i])) && ! trs[i] . style.backgroundColor) {
var tds = trs[i].getElementsByTagName("td");
for (var j = 0; j < tds.lenght; j++) {
var mytd = tds[j];
if ( ! hasClass(mytd) && ! mytd.style.backgroundColor) {
mytd.style.backgroundColor = even ?evenColor : oddColor;
}
}
}
}
}
}
2.2 Sejarah perkembangan Jquery
Jquery Pertama kali dikembangkan oleh Jhon Resig pertama kali pada tahun 2005, saat
itu dia terinspirasi dari kode Behavior, ketika itu Jhon merasa kode kode behavior tidak elegan
dan bahkan sangat jelek. maka dia mulai memikirkan cara membuat library yang handal dan
ringan untuk javascript , maka lahirlah JQUERY pada 14 januari 2006, direlease lah versi
pertama dari Jquery dan sampai sekarang masih terus dikembangkan dan disempurnakan.
Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery telah mencuri
perhatian para developer web. Buktinya, pada tahun-tahun berikutnya jQuery telah banyak
digunakan oleh website - website terkemuka di dunia seperti Google, Microsoft, intel , Nokia,](https://image.slidesharecdn.com/jquerydanpenggunaannyasebagaivalidasiform-131129221837-phpapp01/85/Makalah-J-query-dan-penggunaannya-sebagai-validasi-form-6-320.jpg)
![<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<script>$("#show").click(function () {
var n = jQuery.queue( $("div")[0], "fx" );
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();</script>
</body>
</html>
dan di tambahakan untuk mengatur kecepatan gerak anda berikut bentuk source codenya :
<!DOCTYPE html>
<html>
<head>](https://image.slidesharecdn.com/jquerydanpenggunaannyasebagaivalidasiform-131129221837-phpapp01/85/Makalah-J-query-dan-penggunaannya-sebagai-validasi-form-14-320.jpg)
![<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"delJsMick.js"></script>
</head>
<body>
Click here...
<div></div>
<script>
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},500);
jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();](https://image.slidesharecdn.com/jquerydanpenggunaannyasebagaivalidasiform-131129221837-phpapp01/85/Makalah-J-query-dan-penggunaannya-sebagai-validasi-form-15-320.jpg)
![});</script>
</body>
</html>
memberi fungsi kontrol mulai dan berhenti source codenya sebagai berikut
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"delJsMick.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");](https://image.slidesharecdn.com/jquerydanpenggunaannyasebagaivalidasiform-131129221837-phpapp01/85/Makalah-J-query-dan-penggunaannya-sebagai-validasi-form-16-320.jpg)
![jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},1500);
jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});
$("#stop").click(function () {
jQuery.queue( $("div")[0], "fx", [] );
$("div").stop();
});
</script>
</body>
</html>
2.8 Efek-efek yang dihasilkan JQuery
Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk
membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang.
Tapi dengan menggunakan jquery cukup menggunakan fungsi $(selector).fadeIn()
Berikut adalah efek-efek siap pakai yang disediakanoleh jquery.
1. jQuery show() Effect
Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang
tersembunyi melalui CSS adalah display:none(bukan visibility:hidden).](https://image.slidesharecdn.com/jquerydanpenggunaannyasebagaivalidasiform-131129221837-phpapp01/85/Makalah-J-query-dan-penggunaannya-sebagai-validasi-form-17-320.jpg)
![Tugas[1] 0317-[tryanita]-[1411511676]](https://cdn.slidesharecdn.com/ss_thumbnails/tugas1-0317-tryanita-1411511676-170220051050-thumbnail.jpg?width=560&fit=bounds)
![Tugas[1] 0317-[dewiapriliani]-[1412510602](https://cdn.slidesharecdn.com/ss_thumbnails/tugas1-0317-dewiapriliani-1412510602-170221120837-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (16)
Similar to Makalah J query dan penggunaannya sebagai validasi form (20)
Makalah J query dan penggunaannya sebagai validasi form
- 1. JQuery untuk memvalidasi form Makalah ini dibuat untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi Oleh: Nama NIM :Bagus Hutomo Nugrahanto :1102412118 Prodi : Teknologi Pendidikan FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013
- 2. Kata Pengantar Segala puji syukur saya penjatkan kehadirat Allah SWT yang telah memberikan rahmat, taufik, hidayah-Nya sehingga penulis dapat menyelesaikan penulisan tentang JQuery. Terselesaikannya penulisan makalah ini diharapkan akan memberi informasi lebih banyak tentang JQueryyang sekarang ini sangat diminati apabiladigubakan dan membuat para pengelola web cenderung memakai JQuery yang lebih efisien. Penulisan makalah ini diajukan guna memenuhi tugas mata kuliah TIK (Teknologi Informasi dan Komunikasi) dan berguna untuk memahami lebih jauh lagi tentang berbagai hal yang berhubungan dengan JQuery. Penyusunan makalah ini sudah pasti jauh dari sempurna, oleh karena itu kritik dan saran yang membangun sangat diharapkan agar membuat makalah ini menjadi lebih baik. Semarang, 24 November 2013 Penulis
- 3. BAB I PENDAHULUAN 1.1 Latar Belakang Pada era digital seperti sekarang ini kemampuan akan menjalankan sebuah program yang berkenaan dengan dunia internet sangatlah diperlukan dan merupakan kepentingan bagi setiap orang yang ingin mengikuti perkembangan lebih khususnya dalam hal mencari informasi di internet, terlebih bagi seorang programmer atau orang yang ahli dalam membuat program di dalam menjalankan aktivitasnya terutama yang berkenaan dengan bidang pekerjaannya dirasa sangat perlu mempelajari Jquery Sebagai mesin pembuat/pemroses dalam mengolah sebuah web, JQuery yang notabene merupakan salah satu jenis framework yang mempermudah para programmer web dalam membuat dinamik website yang mengedepankan respontime bagi penggunanya.Hal ini sangat menguntungkan dan mendukung bagi mereka para programmer yang ingin mengembangkan keterampilannya dalam mengolah dan menjalankan program web menjadi lebih terbantu. JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client.JQuery diluncurkan pada tanggal 26 Januari 2006 di Barcamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL. Sekarang JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin.Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi.JQuery menjadi Library Javascript yang paling popular Sekarang. Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi objek dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau website aplikasi menjadi lebih menarik.
- 4. 1.2 Rumusan Masalah Berdasarkan tema yang diangkat beberapa permasalahan yang akan dibahas dalam makalah ini antara lain adalah: 1. Apa itu JQuery? 2. Bagaimana sejarah perkembangan JQuery? 3. Apa saja fitur yang terdapat pada JQuery? 4. Kemampuan dasar apa saja yang ada pada JQuery? 5. Apa saja sintak yang terdapat dalam JQuery? 6. Bagaimana cara implementasi JQuery? 7. Apa saja contoh JQuery? 8. Apa saja efek-efek yang dapat dihasilkan JQuery? 9. Apa kelebihan dan kelemahan JQuery? 10. Bagaimana aplikasi/penggunaan JQuery untuk memvalidasi form? 1.3 Tujuan penulisan Adapun tujuan dan manfaat dari penyusunan makalah ini adalah Untuk mengetahui dan membagi informasi dan pengetahuan mengenai apa yang dimaksud, kelebihan, kelemahan, bagaimana menggunakan JQuery sebagai aplikasi untuk memvalidasi form serta kegunaan lainya secara lebih fokus dan mendalam.
- 5. BAB II PEMBAHASAN 2.1 Konsep utama JQuery JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client.JQuery diluncurkan pada tanggal 26 Januari 2006 di Barcamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL. Menurut Aloysius Sigit W. (2011:1) Jquery adalah library atau kumpulan kode javascript yang sudah siap pakai menjadikan JQuery sebagai salah satu Javascript framework terbaik saat ini. Sekarang JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin.Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi.JQuery menjadi Library Javascript yang paling popular Sekarang. Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau website aplikasi menjadi lebih berwarna dan menimbulkan daya tarik tersendiri bagi para pengguna. Sebagai contoh dari penggunaan dan pengembangan Jquery adalah Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka. JQuery adalah penekanan interaksi antara Javascript dan HTML.JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. JQuery memiliki slogan Write less, do more yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak Apabila kita ingin memahami lebih jauh mengenai Jquery,kita bisa terlebih dahulu mempelajari CSS, HTML, Javascript. Secara standar, apabila kita membuat kode javascript, maka diperlukan kode yang sangat panjang.Bahkan
- 6. terkadang sangat sulit untuk di pahami. Misalnya fungsi javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut: function stripe (id) { var even = false; var evenColor = arguments [1] ? arguments [1] : "#fff"; var oddColor = arguments [2] ? arguments [2] : "#eee"; var table = document.getElementById (id); if ( ! table) {return;} var tbodies = table.getElementsByTagName ("tbody"); for (var h = 0; h < tbodies.lenght; h++) { var trs = tbodies[h].getElementsByTagName("tr"); for (var i = 0; i < trs.lenght; i++) { if ( ! hasClass(trs[i])) && ! trs[i] . style.backgroundColor) { var tds = trs[i].getElementsByTagName("td"); for (var j = 0; j < tds.lenght; j++) { var mytd = tds[j]; if ( ! hasClass(mytd) && ! mytd.style.backgroundColor) { mytd.style.backgroundColor = even ?evenColor : oddColor; } } } } } } 2.2 Sejarah perkembangan Jquery Jquery Pertama kali dikembangkan oleh Jhon Resig pertama kali pada tahun 2005, saat itu dia terinspirasi dari kode Behavior, ketika itu Jhon merasa kode kode behavior tidak elegan dan bahkan sangat jelek. maka dia mulai memikirkan cara membuat library yang handal dan ringan untuk javascript , maka lahirlah JQUERY pada 14 januari 2006, direlease lah versi pertama dari Jquery dan sampai sekarang masih terus dikembangkan dan disempurnakan. Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery telah mencuri perhatian para developer web. Buktinya, pada tahun-tahun berikutnya jQuery telah banyak digunakan oleh website - website terkemuka di dunia seperti Google, Microsoft, intel , Nokia,
- 7. Oracle , IBM, DELL, BBC, NBC, ESPN, EAPN, EA Sport, Twitter, Facebook, Amazon, Techorati, Youtobe Apple, Wordpress, Mozila, Netflix , Digg, Time, dan masih banyak lagi. Bahkan website lokalpun tidak mau ketinggalan, Lihat saja Detik, Studio 21 (21cineplex.com). Indosiar, Vivanews, Kompas, termasuk Pincuran.com tentunya dan lain-lain. 2.3Fitur-fitur pada Jquery Didalam Jquery terdapat berbagai macam fitur yang menunjang peran dan fungsi dari Jquery ini diantaranya: Beberapa Fitur yang ada di JQuery : 1. Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis dan interaktif. 2. JQuery bisa memanipulasi Class pada CSS dan Support CSS 3 3. Event 4. AJAX 5. Efek-efek dan animasi 6. Ekstensi dan Plug-ins 7. Kompatibilitas dengan hampir semua Browser modern 8. Keperluan lain seperti : User Agent, Feature detection dan lainnya 2.4 Kemampuan dasar JQuery Didalam suatu program JQuery memiliki berbagai kemampuan dasar yang menjalankan seluruh intruksi aplikasi/pemrograman ini, diantaranya: 1. Kemudahan mengakses elemen-elemen HTML 2. Memanipulasi elemen HTML 3. Memanipulasi CSS 4. Penanganan event HTML 5. Efek-efek javascript dan animasi 6. Modifikasi HTML DOM 7. AJAX
- 8. 8. Menyederhanakan kode javascript lainnya Mengingat kebuthan akan pembuatan/pemrograman web pada masa sekarang menjadi kebutuhan yang tidak bisa dikesampingkan dan teknologi web yang semakin canggih, JQuery merupakan salah satu tools yang paling diminati dalam pengembangan markah berbasis web memiliki beberapa fungsi yakni: Mengubah tampilan halaman tertentu CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web.Namun terkadang CSS punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser.Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus.Sekali lagi JQuery menawarkan solusi untuk mengatasi hal tersebut. Dengan JQuery, kesenjangan yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik. Mengakses bagian halaman tertentu dengan mudah Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML. Mengubah isi dari halaman Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah. Merespond interaksi user dalam halaman Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau.Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri.Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa eventhandling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas.JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah. Menambahkan animasi ke halaman
- 9. Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya.Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing.JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan.Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan. Mengambil informasi dari server tanpa me-refresh seluruh halaman Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, saat ini banyak library khusus yang berusaha mempermudahnya.JQuery merupakan salah satunya. Menyederhanakan penulisan Javascript biasa Semboyan JQuery adalah Write less, do more atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery. Beberapa alamat website dibuat dengan menggunakan program JQuery diantaranya: Jika ingin melihat contoh-contoh website yang dibuat dengan jquery bisa dilihat berikut ini : 1. www.vitalitycity.com
- 10. 2. www.sacredjune.com Kebanyakan orang menyambut baik dengan hadirnya JQuery yang membantu mempermudah didalam pengoperasian, hasil tampilan yang menarik membuat para pengembang web memilih menggunakan JQuery. 2.5 Sintak JQuery Sintaks jQuery Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Sintaks : $(selector).action() Tanda dollar, untuk mendefinisikan jQuery (selector), untuk menunjukkan elemen yang dipilih atau dituju action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih. Contoh : $(this).hide() menyembunyikan elemen saat ini $("p").hide() menyembunyikan semua paragraf atau konten dari tag <p> $(".test").hide() menyembunyikan elemen yang mempunya class="test"
- 11. $("#test").show() menampilkan elemen yang mempunyai id="test" Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca atau memanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen. $(document).ready(function(){ //kode anda di sini }); Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan kode javascript biasanya seperti ini : window.onload = function(){ //kode anda di sini } Sekarang mari kita lihat pada contoh Kode 12. $(".tombol1").click(function(){ $("p").hide(1000); }); Kode $(".tombol1") adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=tombol1 untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $()untuk membuat objek jQuery. Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=tombol1). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=tombol1 diklik maka lakukan fungsi $("p").hide(1000); Fungsi hide() dan show() adalah fungsi built in dari jQuery, nanti akan kit a lihat lebih lanjut fungsi-fungsi built in dari jQuery. 2.6 Implementasi JQuery Kemudahan atau kenapa orang banyak menggunakan framework javascript ini adalah karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan.Plugin adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website.
- 12. Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, diantaranya: Drop-Down-Menu Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada sub menu lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu menu dropdown ini juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan ketika lama waktu mouse over atau mouse out. Web Sitenya: http://javascript-array.com Tool-Tips Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol atau elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya informasi yang disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika mouse didekatkan, maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close, background shadow, dll. Web Sitenya: http://www.mopstudio.jp Autocomplete-Search Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara otomatis hasil pencarian akan muncul seusai dengan yang kita masukan secara real time. Plugin ini mirip seperti pencarian pada website facebook, sehingga sangat menarik untuk dicoba. Web Sitenya: http://loopj.com Validasi-Form Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti pengecekan e-mail, pengecekan password, username dan input lainnya secara real time (tidak menekan tombol submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan melakukan validasi terhadap inputan user.
- 13. Web Sitenya: http://www.willjessup.com jQuery-Cycle-Plugin Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini menggantikan fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang ada menjadi sebuah animasi seperti fade in, fade out, slide show, scroll dan banyak lagi efek yang lainnya. Web Sitenya: http://malsup.com Teks-Berjalan Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan kelihatan menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah, mirip fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak variasi. Web Sitenya: http://remysharp.com. Dan masih banyak yang lainnya yang bisa dikunjungi di http://www.jqueryplugins.com 2.7 Contoh dari JQuery Untuk memberikan gambaran tentang JQuery berikut ini akan diperlihatkan contoh penulisan script menggunakan JQuery: <!DOCTYPE html> <html> <head> <style>div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } span { color:red; } </style> <script src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"delJsMick.js"></script> </head> <body>
- 14. <button id="show">Show Length of Queue</button> <span></span> <div></div> <script>$("#show").click(function () { var n = jQuery.queue( $("div")[0], "fx" ); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").slideToggle(1000); $("div").slideToggle("fast"); $("div").animate({left:'-=200'},1500); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } runIt();</script> </body> </html> dan di tambahakan untuk mengatur kecepatan gerak anda berikut bentuk source codenya : <!DOCTYPE html> <html> <head>
- 15. <style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> <script src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"delJsMick.js"></script> </head> <body> Click here... <div></div> <script> $(document.body).click(function () { $("div").show("slow"); $("div").animate({left:'+=200'},2000); jQuery.queue( $("div")[0], "fx", function () { $(this).addClass("newcolor"); jQuery.dequeue( this ); }); $("div").animate({left:'-=200'},500); jQuery.queue( $("div")[0], "fx", function () { $(this).removeClass("newcolor"); jQuery.dequeue( this ); }); $("div").slideUp();
- 16. });</script> </body> </html> memberi fungsi kontrol mulai dan berhenti source codenya sebagai berikut <!DOCTYPE html> <html> <head> <style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> <script src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"delJsMick.js"></script> </head> <body> <button id="start">Start</button> <button id="stop">Stop</button> <div></div> <script> $("#start").click(function () { $("div").show("slow"); $("div").animate({left:'+=200'},5000); jQuery.queue( $("div")[0], "fx", function () { $(this).addClass("newcolor");
- 17. jQuery.dequeue( this ); }); $("div").animate({left:'-=200'},1500); jQuery.queue( $("div")[0], "fx", function () { $(this).removeClass("newcolor"); jQuery.dequeue( this ); }); $("div").slideUp(); }); $("#stop").click(function () { jQuery.queue( $("div")[0], "fx", [] ); $("div").stop(); }); </script> </body> </html> 2.8 Efek-efek yang dihasilkan JQuery Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi dengan menggunakan jquery cukup menggunakan fungsi $(selector).fadeIn() Berikut adalah efek-efek siap pakai yang disediakanoleh jquery. 1. jQuery show() Effect Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang tersembunyi melalui CSS adalah display:none(bukan visibility:hidden).
- 18. Sintaks : Parameter Deskripsi speed Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa: milliseconds (contoh : 1500) "slow" "normal" "fast" callback dijalankan. Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai $(selector).show(speed,callback) Contoh : Kode 13. Contoh show() <html> <head> <script type="text/javascript" src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").show(1000,tampilkanAlert); }); }); function tampilkanAlert(){ alert("Paragraf sekarang muncul");
- 19. } </script> </head> <body> <p style=display:none>Ini adalah paragraph tersembunyi.</p> <button class="tombol1">Show</button> </body> </html> 2. jQuery hide() Effect Berfungsi untuk menyembunyikan elemen yang dipilih. Sintaks : $(selector).hide(speed,callback) Untuk parameter speed dan callback adalah sama dengan show() effect. Contoh : $(".tombol1").click(function(){ $("p").hide(); }); 3. jQuery toggle() Effect Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan yang tersembunyi, menyembunyikan yang tampak. Sintaks : $(selector).toggle(speed,callback,switch) Parameter Deskripsi
- 20. speed Opsional.Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa: milliseconds (contoh : 1500) "slow" "normal" "fast" callback Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan. Switch Opsional. Bernilai Boolean True, hanya untuk menampilkan semua elemen False, hanya menyembunyikan semua elemen Jika parameter ini diset, parameter speed dan callback parameters tidak bisa digunakan. Contoh : Kode 14. Contoh toggle() <html> <head> <script type="text/javascript" src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"jquery.js"></script> <script type="text/javascript">
- 21. $(document).ready(function(){ $(".tombol1").click(function(){ $("p").toggle(true); }); }); </script> </head> <body> <p>Ini adalah paragraf</p> <p style="display:none">Ini adalah paragraf lainnyayang belum muncul</p> <p>Jika bernilai true hanya berfungsi menampilkan, kalau false hanya menyembunyikan</p> <button class="tombol1">Tampilkan semua elemen</button> </body> </html> 4. jQuery slideDown() Effect Menampilkan elemen yang tersembunyi, secara efek sliding. Sintaks : $(selector).slideDown(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: $(".tombol1").click(function(){ $("p").slideDown(); }); 5. jQuery slideUp() Effect
- 22. Menyembunyikan elemen secara efek sliding. Sintaks : $(selector).slideUp(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: $(".tombol1").click(function(){ $("p").slideUp(); }); 6. jQuery slideToggle() Effect Gabungan antara slideDown() dan slideUp(). Menyembunyikan elemen jika dalam keadaan visible, menampilkan elemen jika dalam kedaan hidden. Sintaks : $(selector).slideToggle(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: Kode 15. Contoh slideToggle() <html> <head> <script type="text/javascript" src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#contact").click(function(){ $("#contact-box").slideToggle("slow"); }); });
- 23. </script> </head> <body> <p><span id="contact" style="cursor:hand;backgroundcolor:#ababab; padding:3 ;font-family:Verdana">Contact</span></p> <div id="contact-box" style="background:#98bf21;height:200px;width:300px;position:relative;disp lay:none;padding:10"> <form> Nama : <input type=text><p> Email : <input type=text><p> Komentar :<textarea rows=5></textarea><p> <input type=submit value=kirim> </div> <p> jQuery adalah javascript library, jQuery mempunyai semboyan "write less, do more". jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. <p>Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript. </body> </html> 7. jQuery fadeIn() Effect Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar.
- 24. Sintaks : $(selector).fadeIn(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: $(".tombol1").click(function(){ $("p").fadeIn(); }); 8. jQuery fadeOut() Effect Menyembunyikan elemen yang dipilih, secara efek memudar. Sintaks : $(selector).fadeOut(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: Kode 16. Contoh fadeOut() <html> <head> <style> #box { background-color:#96BC43; border:solid 3px #333333; height:160px; margin-top:30px; } </style>
- 25. <script type="text/javascript" src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"jquery.js"></script> <script type="text/javascript"> $(function(){ $('.fadeOut_box').click(function(){ $('#box').fadeOut("slow"); }); $('.fadeIn_box').click(function(){ $('#box').fadeIn("slow"); }); }); </script> <body> <a href="#" class="fadeOut_box">fadeOut()</a> <a href="#" class="fadeIn_box">fadeIn()</a> <div id="box"></div> </body> </html> 9. jQuery fadeTo() Effect Mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan. Sintaks : $(selector).fadeTo(speed,opacity,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Untuk parameter opacity bisa bernilai 0 sampai 1. Contoh : $(".tombol1").click(function(){
- 26. $("p").fadeTo(1000,0.6); }); 10. jQuery animate() Effect Mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya. Keadaan yang diubah ini berdasarkan CSS. Nilai properti CSS yang berubah secara berangsur-angsur, hal ini untuk menciptakan efek animasi. Nilai properti CSS yang bisa diubah adalah nilai bertipe angka, baik satuannya pixel atau persen %. Untuk tipe string tidak bisa dianimasikan. Sintaks : $(selector).animate(styles,speed,easing,callback) Parameter Deskripsi styles Wajib. Menentukan properti CSS dan nilainya yang akan di-animasi. Properti CSS yang bisa di-animasi : backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop
- 27. outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent speed Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa: milliseconds (contoh : 1500)
- 28. "slow" "normal" "fast" easing Opsional. Menentukan fungsi easing yang diset pada speed animasi. Built in fungsi easing adalah: swing linear callback Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan. Contoh : Kode 17. Contoh animate() <html> <head> <script type="text/javascript" src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".tombol1").click(function(){ $("#box").animate({height:"300px"}); }); $(".tombol2").click(function(){ $("#box").animate({height:"100px"}); }); });
- 29. </script> </head> <body> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> <button class="tombol1">Animasi</button> <button class="tombol2">Reset</button> </body> </html> 11. jQuery stop() Effect Menghentikan animasi yang sedang berjalan. Sintaks : $(selector).stop(stopAll,goToEnd) Parameter Deskripsi stopAll Opsional. Bernilai boolean, menentukan apakah menghentikan semua animasi, termasuk yang ngantri untuk dijalankan pada elemen yang dipilih atau tidak. goToEnd Opsional. Bernilai Boolean, menentukan apakah animasi yang sedang jalan dikompletkan atau tidak. Parameter ini hanya bisa digunakan jika parameter stopAll di-set. Contoh : Kode 18. Contoh stop()
- 30. <html> <head> <script type="text/javascript" src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); $("#stop").click(function(){ $("#box").stop(false,true); }); }); </script> </head> <body> <p><button id="start">Start Animasi</button><buttonid="stop">Stop Animasi</button></p> <div id="box" style="background:#ababab;height:100px;width:100px;position:relative"> </div> </body> </html>
- 31. $(selector).delay() Berguna untuk men-set delay untuk semua fungsi yangmasih ngantri untuk elemen yang dipilih. Sintaks : $(selector).delay() $(selector).dequeue() Menjalankan fungsi berikutnya yang lagi ngantri untuk elemen yang dipilih. Sintaks : $(selector).dequeue() $(selector).queue() Menampilkan fungsi yang ngantri untuk elemen terpilih. Sintaks : $(selector).queue() 12. jQuery clearQueue() Effect Menghentikan semua fungsi yang lagi ngantri dan belum dijalankan. Sintaks : $(selector).stop(queueName) Parameter queueName adalah nama antrian yang akan dihentikan. Contoh : $("#stop").click(function(){ $("#box").clearQueue(); });
- 32. 2.9 Kelebihan dan kekurangan JQuery 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 hanya satu dan ukurannya relatif kecil, sekitar 20kb Open source atau Free jQuery lebih diminati oleh para developer web saat ini KELEBIHAN : Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang telah ada.Termasuk mempercepat coding javascript dalam sebuah website.Dibandingkan kita harus mulai sebuah script javascript dari nol. Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam pembelajaran jquery. Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya. Website yang dibangun dengan jquery akan lebih interaktif dan menarik. KEKURANGAN : Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery, alias HTML murni. Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery. Pada level tertentu request yang sangat banyak (sangat-sangat banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.
- 33. 2.10 Penggunaan JQuery untuk memvalidasi form Didalam JQuery memiliki banyak plug-in di dalamnya yang mencakup beberapa fungsi yang dapat membantu user/pengguna dalam kaitanya dengan kebutuhan program-program tertentu diantarannya JQuery dapat digunakan sebagai pengolah data untuk validasi form. Dengan adanya plugin ini, seseorang yang melakukan input ke dalam sebuah form HTML akan mengetahui komponen mana dari form yang harus diisi karena akan muncul peringatan otomatis bahwa ada komponen yang belum diisi atau format isian yang salah misalnya email atau URL. Untuk membuat validasi form dengan JQuery, pertama yang harus Anda siapkan adalah script core jQuery nya sendiri, serta script plugin validasi formnya (jquery.validate.js). Untuk mendownload kedua script, silakan mengklik masing-masing link. Selanjutnya kita bikin contoh formnya seperti berikut ini: contoh.html <html> <head> <title>jQuery Validation</title> <script src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"jquery.js"></script> <script src="jquery.validate.js"></script> <script> $(document).ready(function(){ $("#formku").validate(); }); </script> <style type="text/css"> label.error { color: red; padding-left: .5em; } </style> </head> <body> <form id="formku"> <table border="0"> <tr><td>Nama Anda</td><td>:</td><td><input name="nama" class="required" minlength="3" /></td></tr> <tr><td>Email Anda</td><td>:</td><td><input name="email" class="required email" /></td></tr> <tr><td>Usia Anda</td><td>:</td><td><input name="usia" class="required number" /></td></tr> <tr><td>Tanggal Lahir Anda</td><td>:</td><td><input name="tgl" class="required date" /></td></tr> <tr><td>URL Anda</td><td>:</td><td><input name="url" class="required url" /></td></tr>
- 34. <tr><td>Alamat Anda</td><td>:</td><td><input name="alamat" /></td></tr> <tr valign="top"><td>Komentar Anda</td><td>:</td><td><textarea name="komentar" class="required" /></textarea></td></tr> </table> <p> <input class="submit" type="submit" value="Submit"/> </p> </form> </body> </html> Setelah form contoh seperti di atas dibuat, jangan lupa meletakkan script jquery.js dan jquery.validate.js nya di satu folder yang sama dengan form tersebut, atau di folder manapun terserah asal path nya disesuaikan pada bagian <script src=/slideshow/j-query-dan-penggunaannya-sebagai-validasi-form-28752968/28752968/"jquery.js"></script> <script src="jquery.validate.js"></script> Selanjutnya perhatikan id formnya, dalam contoh di atas adalah formku. Pastikan id formnya sama pada bagian $("#formku").validate(); Dalam contoh form di atas saya sengaja membuat beberapa jenis isian, mulai dari teks, tanggal URL, email dan angka. Berikut ini maksud beberapa properti yang ada dalam tiap komponen form. Properti class="required" artinya bahwa komponen tersebut harus diisi dengan format apapun. Properti class="required email" artinya komponen harus diisi dan harus menggunakan format email. Properti class="required number", komponen harus diisi menggunakan format angka. Properti class="required date", komponen harus diisi menggunakan format tanggal DD/YY/YYYY Properti class="required url", komponen harus diisi menggunakan format URL. Properti minlength="3", maksudnya minimal jumlah karakter yang harus diisi adalah 3 karakter. Kemudian dalam html di atas juga ada CSS seperti berikut: <style type="text/css"> label.error { color: red; padding-left: .5em; } </style>
- 35. CSS tersebut digunakan untuk mengatur tampilan peringatan yang muncul jika isian form tidak sesuai dengan format yang diharapkan. Berikut ini contoh tampilan form di atas setelah diberikan jQuery untuk validasi. . Untuk mengubah file yang eror bisa kita edit file jquery.validate.js nya, dan cari bagian ini: messages: { required: "Field ini perlu diisi.", remote: "Please fix this field.", email: "Isikan email yang valid.", url: "Isikan URL yang valid.", date: "Isikan tanggal yang valid.", dateISO: "Please enter a valid date (ISO).", number: "Isikan angka yang valid.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", maxlength: $.validator.format("Jumlah maksimal {0} karakter."), minlength: $.validator.format("Jumlah minimal {0} karakter."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.") }
- 36. BAB III PENUTUP 3.1 Kesimpulan Sebuah website layaknya yang memiliki berbagai fitur dengan susunan tata letak dengan berbagai menu-menu dari halaman-halaman website adalah hasil proses edit script menggunakan JQuery. Jquery Pertama kali dikembangkan oleh Jhon Resig pertama kali pada tahun 2005, saat itu dia terinspirasi dari kode Behavior, ketika itu Jhon merasa kode kode behavior tidak elegan dan bahkan sangat jelek. maka dia mulai memikirkan cara membuat library yang handal dan ringan untuk javascript , maka lahirlah JQUERY pada 14 januari 2006, direlease lah versi pertama dari Jquery dan sampai sekarang masih terus dikembangkan dan disempurnakan. Dengan berbagai kemudahan yang disediakan membuat JQuery merebut perhatian pengguna dikarenakan unjuk kerja dan kenudahan yang dimilikinya antara lain: 1. Kemudahan mengakses elemen-elemen HTML 2. Memanipulasi elemen HTML 3. Memanipulasi CSS 4. Penanganan event HTML 5. Efek-efek javascript dan animasi 6. Modifikasi HTML DOM 7. AJAX 8. Menyederhanakan kode javascript lainnya 3.2 Saran Muatan atau isi didalam makalah ini sangatlah masih jauh dari kata sempurna, pembuatan makalah ini hanyalah untuk mengetahui dasar-dasar dan mengidentifikasi bagaimana cara memvalidasi form, oleh karena itu masukan dari pembaca sangat diperlukan. DAFTAR PUSTAKA