Power point J query dan penggunaannya sebagai validasi form

14

Click here to load reader

Transcript of Power point J query dan penggunaannya sebagai validasi form

Page 1: Power point J query dan penggunaannya sebagai validasi form

Bagus Hutomo Nugrahanto

1102412118

Rombel 1

Page 2: Power point J query dan penggunaannya sebagai validasi form

Apa itu Jquery?

JQuery adalah library Javascript yang

dibuat untuk memudahkan pembuatan

website dengan HTML yang berjalan di

sisi Client.

Page 3: Power point J query dan penggunaannya sebagai validasi form

Perkembangan JQuery

JQuery diluncurkan pada tanggal 26Januari 2006 di Barcamp NYC oleh JohnResig dan berlisensi ganda di bawah MITdan GPL.

Page 4: Power point J query dan penggunaannya sebagai validasi form

Fitur JQuery

Didalam Jquery terdapat berbagai macam fitur yang menunjang peran dan fungsi dari Jquery ini diantaranya:

Beberapa Fitur yang ada di JQuery :

Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis dan interaktif.

JQuery bisa memanipulasi Class pada CSS dan Support CSS 3

Event

AJAX

Efek-efek dan animasi

Ekstensi dan Plug-ins

Kompatibilitas dengan hampir semua Browser modern

Keperluan lain seperti : User Agent, Feature detection danlainnya

Page 5: Power point J query dan penggunaannya sebagai validasi form

Kemampuan dasar JQuery

Kemudahan mengakses elemen-elemenHTML

Memanipulasi elemen HTML

Memanipulasi CSS

Penanganan event HTML

Efek-efek javascript dan animasi

Modifikasi HTML DOM

AJAX

Menyederhanakan kode javascript lainnya

Page 6: Power point J query dan penggunaannya sebagai validasi form

Fungsi JQuery

Mengakses bagian halaman tertentu dengan mudah

Menambahkan animasi ke halaman

Mengambil informasi dari server tanpa me-refresh

seluruh halaman

Menyederhanakan penulisan Javascript biasa

Page 7: Power point J query dan penggunaannya sebagai validasi form

Kelebihan yang dimiliki JQuery

Menyederhanakan penggunaan javascript, karenakita cukup menggunakan fungsi dari library javascriptyang telah ada. Termasuk mempercepat coding javascript dalam sebuah website. Dibandingkan kitaharus mulai sebuah script javascript dari nol.

Fungsi-fungsi yang disediakan didokumentasikandengan baik beserta contoh penggunaannya, bacadi situs http://jquery.com hal ini mempermudahdalam pembelajaran jquery.

Support terhadap CSS1-3 selector, untuk fleksibilitasdesain antar muka halaman website daninteraksinya.

Website yang dibangun dengan jquery akan lebihinteraktif dan menarik.

Page 8: Power point J query dan penggunaannya sebagai validasi form

Kekurangan pada JQuery

Meskipun diklaim jquery memiliki beban kerjayang 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 harusmengalokasikan resource yang mereka milikiuntuk menangani request terhadap jquery. Padalevel 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.

Page 9: Power point J query dan penggunaannya sebagai validasi form

Persiapan membuat validasi

form

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

Page 10: Power point J query dan penggunaannya sebagai validasi form

Selanjutnya kita bikin contoh formnya<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> <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>

Page 11: Power point J query dan penggunaannya sebagai validasi form

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>

Page 12: Power point J query dan penggunaannya sebagai validasi form

Selanjutnya perhatikan id formnya,

dalam contoh di atas adalah ‘formku’.

Pastikan id formnya sama pada bagian

$("#formku").validate();

Page 13: Power point J query dan penggunaannya sebagai validasi form

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.

Page 14: Power point J query dan penggunaannya sebagai validasi form

SEKIAN DAN TERIMA KASIH