16 Kumpulan Tutorial jQuery

Berikut adalah daftar 16 tutorial-tutorial penggunaan library jQuery yang mampu saya rangkum beserta beberapa link ke sumber pembelajaran situs luar.
Ada begitu banyak library javascript, tetapi bagi saya, tidak ada library yang bisa menyelesaikan masalah yang lebih baik dibanding jQuery. Sehingga, mempelajari jQuery bagi para web developer merupakan sesuatu yang sangat penting.
Semoga artikel daftar tutorial jQuery ini bisa bermanfaat bagi teman-teman, baik itu bagi yang baru mengenal jQuery ataupun yang sudah expert, bisa dijadikan koleksi. hehe..
Selengkapnya tentang jQuery bisa dibaca di situs resminya atau di sini.
1. [Tutorial jQuery+PHP] Membuat Login Form dengan jQuery+PHP
[…]Ni ada tutorial jQuery + PHP, implementasinya pada Form Login user )[…]
2. Belajar JQuery: Animasi yoyo
[…]Kali ini saya akan memberikan sedikit tutorial jquery, dengan tema animasi dasar. Pada tutorial kali ini saya akan memberikan sebuah contoh yaitu[…]
3. Membuat dialog konfirmasi javascript sederhana menggunakan jQuery
[…]untuk menghindari user meng-klik link delete secara tidak sengaja, kita akan tampilkan dialog[…]
4. Bagaimana cara menggunakan jQuery
[...]memudahkan mentranfer HTML, animasi, ajax interface, event dan lain sebagainya. Untuk instalasi dan cara mengunakan ikuti langkah[…]
5. Belajar jquery
[…]jquery kita dapat menggunakan fungsi fungsi yang telah disediakan oleh Jquery[…]
6. Menggunakan Mootools dan JQuery bersamaan
[…]Navigasi favorit saya adalah pada bentuk horizontal dan menggunakan drop down untuk sub menu alias menu anakannya, kali ini si anakan ternyata harus ber anak lagi[…]
7. Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi
[…] jaraknya dan memunculkan opacitynya. Jika anda perhatikan pada menu nya, maka setiap menu sekarang ada tag yang berisi informasi mengenai menu tersebut.[…]
8. Vertical Menu with Jquery
[…]mengangkat javascript lagi nih, tapi dengan menggunakan jquery. Saya akan membuat sebuah simple menu dengan menggunakan jqeury[…]
9. Gunakan jQuery untuk Mendapatkan Client ID ASP.NET Server Control
[…]kemampuan jQuery dalam melakukan query DOM yang di-generate oleh ASP.NET Server Control.[…]
10. jQuery: DatePicker
[…]Control extender ini cukup handy untuk digunakan dalam ASP.NET page yang mengikuti model ASP.NET Ajax.[…]
11. create ajax request using jquery
[…] fungsi $.ajax bisa ditempatin di halaman bersangkutan maupun file .js tersendiri. Jangan lupa meng-include file jquery[…]
12. Membuat Icon External Link secara Otomatis dengan jQuery
[…] mendeteksi external link (link yang mengarah ke luar situs kita) dan secara otomatis menambahkan icon tertentu[…]
13. Parsing XML di JavaScript lebih simple dengan jQuery
[…] kasus parsing XML, maka saya harus mencari cara agar parsing XML terasa lebih mudah dan manusiawi[…]
14. Membuat Thumbnail Image Dengan PHP dan Image Slideshow Dengan Thickbox JQuery
[…] menggabungkan PHP GD untuk membuat thumbnail image dan plugins thickbox jquery untuk membuat slideshow ukuran gambar sebenarnya[…]
15. Membuat Fixed Header Gridview dengan jQuery
[…] gidview pada halaman web anda, lengkap dengan data source-nya. Dalam tulisan ini saya menggunakan database Northwind[…]
16. JQuery: Liquid Canvas
[…]membuat rounded layout memang agak rumit kerana melibatkan image di setiap penjuru. tetapi dengan menggunakan liquid canvas[…]
Berikut tambahan sumber-sumber dari luar yang sering menjadi patokan saya selama mendalami jQuery :
Getting Started with jQuery
jQuery Crash Course
Learning jQuery
15 Days of jQuery
jQuery Cheat Sheet
Moga +ilmunya n kalo ada tambahan, tambain aja…

Submit Form Dengan Ajax Menggunakan jQuery

Kalau sebelumnya saya sudah menulis tentang cara menampilkan halaman menggunakan Ajax (menggunakan fungsiload() pada jQuery), maka kali ini adalah contoh penggunaan Ajax untuk mengirimkan data dalam sebuah form dan memprosesnya. Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvensional adalah: kita tidak perlu meninggalkan form selama form dikirimkan/diproses.

Untuk contoh ini, saya menggunakan dua buah file, yang pertama adalah file ajaxform.html untuk menampilkan form nya, dan file proses.php untuk memproses data yang dikirimkan dan menampilkan hasilnya.

Script pada file ajaxform.html nya adalah sbb:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$(document).ready(function() { $().ajaxStart(function() { $('#loading').show(); $('#result').hide(); }).ajaxStop(function() { $('#loading').hide(); $('#result').fadeIn('slow'); }); $('#myForm').submit(function() { $.ajax({ type: 'POST', url: $(this).attr('action'), data: $(this).serialize(), success: function(data) { $('#result').html(data); } }) return false; }); })

Untuk mengimplementasikan Ajax, pada file form.html ini saya menggunakan fungsi ajax () pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan saya gunakan di antaranya sbb:

• type: jenis request yang dipakai, bisa ‘POST’ atau ‘GET’
• url: url yang akan digunakan untuk memproses data. karena pada form sudah terdapat nilai action (proses.php) maka saya tinggal mengambil nilai dari action tsb menggunakan $(this).attr('action')
• data: data yang dikirimkan, dalam format querystring. untuk menghasilkan querystring dari form, saya menggunakan fungsi serialize()
• success: fungsi yang akan dijalankan jika request berhasil, dengan sebuah argumen berupa data yang dikembalikan dari server, dalam hal ini adalah hasil output dari file proses.php (hasil output ini akan saya tampilkan ke dalam sebuah div dengan id="result" )

Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya adalah sbb:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

//validasi if (trim($_POST['nim']) == '') { $error[] = '- NIM harus diisi'; } if (trim($_POST['nama']) == '') { $error[] = '- Nama harus diisi'; } if (trim($_POST['tempat_lahir']) == '') { $error[] = '- Tempat Lahir harus diisi'; } //dan seterusnya if ($error) { echo 'Error: '.implode(' ', $error); } else { /* jika data mau dimasukkan ke database, maka perintah SQL INSERT bisa ditulis di sini */ echo 'Form berhasil disubmit. Berikut ini data anda:'; echo ' '; foreach ($_POST as $k => $v) { $data .= "$k : $v "; } echo $data; } die(); ?>

Setelah file proses.php ini berhasil dijalankan maka hasil outputnya akan ditampilkan pada element div yang berada pada file ajaxform.html

Untuk lebih jelasnya silakan lihat demo:
Demo Ajax Form

Dan anda bisa mendownload source code nya di sini: