Power point J query dan penggunaannya sebagai validasi form
Click here to load reader
-
Upload
hutommo-bagus -
Category
Documents
-
view
200 -
download
0
Transcript of Power point J query dan penggunaannya sebagai validasi form
![Page 1: Power point J query dan penggunaannya sebagai validasi form](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/1.jpg)
Bagus Hutomo Nugrahanto
1102412118
Rombel 1
![Page 2: Power point J query dan penggunaannya sebagai validasi form](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/2.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/3.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/4.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/5.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/6.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/7.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/8.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/9.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/10.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/11.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/12.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/13.jpg)
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](https://reader038.fdokumen.com/reader038/viewer/2022100604/55978e551a28abb8368b4637/html5/thumbnails/14.jpg)
SEKIAN DAN TERIMA KASIH