makalah j query dan penggunaannya sebagai validasi form

JQuery untuk memvalidasi form

Makalah ini dibuat untuk memenuhi tugas mata kuliah Teknologi

Informasi dan Komunikasi

Oleh:

Nama : Bagus Hutomo Nugrahanto

NIM :1102412118

Prodi : Teknologi Pendidikan

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

2013

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

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.

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.

BAB IIPEMBAHASAN

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

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,

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

http://upyes.wordpress.com/2013/01/29/cascading-style-sheets-css/

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 event-handling 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

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

https://www.vitalitycity.com/

http://www.zainalhakim.web.id/uploads/image/contoh-web-jquery/contoh-jquery-1.jpg

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"

http://www.sacredjune.com/#bio

http://www.zainalhakim.web.id/uploads/image/contoh-web-jquery/contoh-jquery-2.jpg

$("#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.

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.

http://loopj.com/

http://www.mopstudio.jp/

http://javascript-array.com/

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="delJsMick.js"></script>

</head>

<body>

http://www.jqueryplugins.com/

http://malsup.com/

http://www.willjessup.com/

<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>

});</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;




</style>


</head>

<body>

<button id="start">Start</button>

<button id="stop">Stop</button>

<div></div>

<script>

$("#start").click(function () {


$("div").animate({left:'+=200'},5000);


$(this).addClass("newcolor");


});

$("div").animate({left:'-=200'},1500);


$(this).removeClass("newcolor");


});

$("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).

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 Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan.

$(selector).show(speed,callback)

Contoh :

Kode 13. Contoh show()

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">



$("p").show(1000,tampilkanAlert);

});

});

function tampilkanAlert(){

alert("Paragraf sekarang muncul");

}

</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 :


$("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

speed

Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible.

Defaultnya adalah 0.



• "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>





$("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:


$("p").slideDown();

});

5. jQuery slideUp() Effect

Menyembunyikan elemen secara efek sliding.

Sintaks :

$(selector).slideUp(speed,callback)


Contoh:


$("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)


Contoh:

Kode 15. Contoh slideToggle()

<html>

<head>




$("#contact").click(function(){

$("#contact-box").slideToggle("slow");

});

});

</script>

</head>

<body>

<p><span id="contact" style="cursor:hand;background-

color:#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.

Sintaks :

$(selector).fadeIn(speed,callback)


Contoh:


$("p"). fadeIn();

});

8. jQuery fadeOut() Effect

Menyembunyikan elemen yang dipilih, secara efek memudar.

Sintaks :

$(selector).fadeOut(speed,callback)


Contoh:

Kode 16. Contoh fadeOut()

<html>

<head>

<style>

#box

{

background-color:#96BC43;

border:solid 3px #333333;

height:160px;

margin-top:30px;

}

</style>



$(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 opacity bisa bernilai 0 sampai 1.

Contoh :


$("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

• 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.



• "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>



$(document).ready(function()

{


$("#box").animate({height:"300px"});

});


$("#box").animate({height:"100px"});

});

});

</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

stopAllOpsional. 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()

<html>

<head>




$("#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>

$(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 queue Name adalah nama antrian yang akan dihentikan.

Contoh :

$("#stop").click(function(){

$("#box").clearQueue();

});

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.

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="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>

http://rosihanari.net/jquery/jquery.validate.zip

http://rosihanari.net/jquery/jquery.zip

<tr><td>URL Anda</td><td>:</td><td><input name="url" class="required url" /></td></tr> <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="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>

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}.")}

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

shelyana.files.wordpress.com/2012/05/pengertian-jquery-html5-css3.pdf

adhiecenter.blogspot.com/2011/03/pengertian-jquery.html

jqueryvalidation.org

http://jquery.com

http://en.wikipedia.org/wiki/Jquery

http://didats.net/page/belajar-javascript-lebih-lanjut-dengan-jquery-1/

http://bagindokemas.com/2008/12/21/berkenalan-dengan-jquery/

http://www.satriamultimedia.com/artikel_belajar_dan_mengenal_jquery.html

www.w3function.com/blog/?p=det&idn=32

http://www.w3function.com/blog/?p=det&idn=32

http://www.satriamultimedia.com/artikel_belajar_dan_mengenal_jquery.html

http://bagindokemas.com/2008/12/21/berkenalan-dengan-jquery/

http://didats.net/page/belajar-javascript-lebih-lanjut-dengan-jquery-1/

http://en.wikipedia.org/wiki/Jquery

http://jquery.com/

makalah j query dan penggunaannya sebagai validasi form

Technology