Belajar jQuery untuk pemula | Bisa dibilang jQuery saat ini adalah library javascript yang paling populer, hampir sebagian besar website menggunakan jQuery, jadi sangat penting bagi seorang developer untuk memahami jQuery.

Belajar jQuery gampang-gampang susah, akan lebih mudah apabila Anda telah paham Javascript sebelumnya.

jquery

Jquery (Image: wpchandra.com)

Banyak pemula yang bertanya bagaimana cara untuk memulai belajar jQuery, nah pada tulisan kali ini Jurnalweb.com akan memberikan beberapa solusi yang bisa diikuti oleh pemula yang ingin belajar jQuery.

Apa itu jQuery?

jQuery adalah script pemrograman yang berjalan di web browser. Secara teknis jQuery adalah sebuah library JavaScript, dan ini cukup mudah untuk digunakan.

Beberapa hal yang menarik tentang jQuery:

  1. Membuat kode menjadi lebih singkat
  2. Kita bisa melakukan tugas-tugas yang kompleks seperti memanipulasi struktur HTML dari halaman web (biasa disebut DOM) hanya dengan beberapa baris kode saja.
  3. Penanganan Event jauh lebih mudah dibandingkan dengan menulis kode JavaScript murni.
  4. Pemanggilan AJAX juga sangat sederhana.

Langkah awal belajar Jquery

Sebagai pemula, Anda mungkin ingin mulai melompat masuk dan mencoba hal-hal baru seperti melakukan ujicoba fungsionalitas dan kinerjanya. Dari perspektif pemula, berikut ini adalah beberapa langkah yang bisa Anda ikuti untuk bisa mengenal jQuery dengan lebih baik.

Langkah 1 – Tambahkan referensi jQuery

Ketika bekerja dengan jQuery, hal pertama yang harus dilakuan adalah dengan menambahkan referensi. Referensi ini biasaya ditaruh di bagian head (atas) dari kode website, referensi yang digunakan adalah sebagai berikut.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Pada baris diatas, kita merujuk pada jQuery yang berada di library yang berada di hosting Google. Apabila Anda bekerja pada tempat yang tidak terdapat koneksi internet maka koneksi dengan referensi diatas tidak akan bekerja. Untuk itu Anda juga bisa mendownload script jQuery tersebut ke komputer lokal Anda, silahkan download langusung dari website resmi https://jquery.com/download/

Apabila Anda sudah mendownload jQuery pada komputer lokal Anda maka untuk memanggilnya taruh script berikut ini pada bagian head di kode HTML website Anda.

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

Langkah 2 – Penanganan Event jQuery

Event seperti klik pada tombol, ketika tombol ditekan, ketika tombol tidak lagi ditekan, ketika mouse berada diatas sebuah elemen, ketika fokus, ketika field checkbox dipilih dan lain sebagainya, semua bisa di program dengan mudah berkat jQuery.

Sebagai contoh, berikut ini kita akan mencoba untuk membuat program yang melakukan aksi ketika sebuah tombol di klik.

<button id="myButton">Klik Disini</button>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#myButton").click(function (e) {
            alert("Anda barus saja klik sebuah tombol");
        });
    });
</script>

Lihat DEMO

Pada script diatas, kita menaruh event klik tombol didalam $(document).ready(function(){}).

Ini karena untuk memberitahukan jQuery agar berjalan setelah seluruh halaman selesai dimuat. Semua kode jQuery harus ditaruh didalamnya.

alert

Contoh pesan alert muncul ketika tombol di klik

Mari kita lihat contoh yang lainnya, kita akan mencoba menampilkan sebuah pesan alert ketika tombol “Y” ditekan ketika kita berada pada halaman website.

$(document).keyup(function (event) {
    if(event.which==89)
    {
        alert("Letter 'Y' is pressed");
    }
});

* Sebagai catatan angka 89 pada kode diatas adalah key event untuk tombol huruf “Y” di keyboard.

Langkah 3 – Manipulasi DOM dengan jQuery

Kita bisa melakukan banyak perubahan dalam DOM dengan sangat mudah menggunakan jQuery. Apabila Anda pernah mencoba melakukan hal ini dengan JavaScript sebelumnya, maka kemungkinan besar Anda akan tahu bahwa itu sangat sulit untuk dilakukan dan membutuhkan kode yang cukup panjang. Dengan jQuery ini bisa dilakukan dengan sangat mudah.

Mari kita coba memanipulasi DOM sederhana utnuk mengujinya sendiri. Pada contoh ini, seseorang harus memilih ibukota Indonesia dari 8 buah pilihan yang disediakan. Opsi diberikan dalam tombol radio, ketika seseorang memilih pilihan yang salah, maka pesan “Salah” akan muncul. Ketika yang dipilih adalah pilihan yang tepat maka teks “Benar” akan ditampilkan.

Kita akan membuat program diatas dengan menggunakan Event Click pada tombol radio dan menambahkan “paragraph” yang berisi teks “Benar” atau “Salah” disamping radio button.

<div class="pertanyaan">
Apa nama ibukota Indonesia?
<ul style="list-style:none">
	<li><input type="radio" value="Bandung" name="rdo">Bandung</li>
	<li><input type="radio" value="Solo" name="rdo">Solo</li>
	<li><input type="radio" value="Bekasi" name="rdo">Bekasi</li>
	<li><input type="radio" value="Makassar" name="rdo">Makassar</li>
	<li><input type="radio" value="Jakarta" name="rdo">Jakarta</li>
	<li><input type="radio" value="Padang" name="rdo">Padang</li>
	<li><input type="radio" value="Medan" name="rdo">Medan</li>
	<li><input type="radio" value="Surabaya" name="rdo">Surabaya</li>
</ul>
</div>

<script type="text/javascript">
$(document).ready(function () {
	$("input[type='radio']").click(function (e) {
		if($(this).val()=="Jakarta")
			$(this).parent().append('<p style="margin:0;padding-left:10px;color:red;">Benar</p>');
		else
			$(this).parent().append('<p style="margin:0;padding-left:10px;color:red;">Salah</p>');
	});
});
</script>

Lihat DEMO

Sebagai catatan bahwa kode jQuery diatas, kita melakukan cek pada tombol radio ketika dia di klik dan kemudian mencari parent (elemen li). Pada perent tersebut kita menambahkan paragraph dengan teks sebagai informasi.

jquery dom

Tulisan benar muncul ketika memlih jakarta

Langkah 4 – jQuery AJAX

Ketika ingin melakukan update data pada sebuah elemen tertentu pada halaman website tanpa melakukan refresh seluruh halaman maka kita biasanya membutuhkan AJAX. Dengan jQuery, kita dapat dengan mudah membuat permintaan AJAX dan memanggil fungsi server-side, seperti memanggil fungsi PHP atau ASP dengan kode jQuery dan menampilkan nilai hasilnya pada halaman HTML.

Terkadang ktia mungkin memerlukan query pada database untuk pencatatan (seperti mencari rincian data pelanggan dari database berdasarkan namanya). Untuk kasus seperti itu kita bisa menggunaan jQuery untuk memanggil PHP / fungsi server-side lainnya yang nantinya akan mengembalikan rincian data pelanggan tersebut dan kemudian kita dapat menampilkan rincian tersebut kedalam sebuah div.

Yang perlu untuk dicatat adalah bahwa kita melakukan ini pada sebagian halaman saja (partial) dan bukan pada seluruh halaman atau tidak perlu melakukan refresh karena akan memakan banyak waktu dan resources.

<input type="text" id="nameInput"/><br/>
<div id="customerDetails"></div>
<input type="submit" id="submitButton" value="Submit"/>
<script type="text/javascript">
    $(document).ready(function () {
        $("#submitButton").click(function (e) {
            var result = ValidateAll();
            if (result == true) {
                $.ajax({
                    type: "POST",
                    url: "jquery-ajax.aspx/GetCustomer",
                    contentType: "application/json; charset=utf-8",
                    data: '{"name":"' + $("#nameInput").val() + '"}',
                    dataType: "json",
                    success: function (msg) {
                        if (msg.d) {
                            $("#customerDetails").html(msg.d);
                        }
                    },
                    error: function (req, status, error) {
                        alert("Error try again");
                    }
                });
            }
            return false;
        });
    });
</script>

Perhatikan bahwa dalam kode diatas kita memanggil fungsi “GetCustomer” dari halaman “jquery-ajax.php” dan melemparkan nama pelanggan sebagai sebuah parameter. Tugas dari fungsi tersebut adalah untuk memanggil detail data pelanggan dan mengembalikannya pada fungsi jQuery. Informasi yang didapat akan ditampilkan dengan fungsi jQuery didalam div customerDetails.

Kesimpulan

Kira-kira seperti itulah beberapa tahap awal dari jQuery yang perlu untuk Anda pelajari sebagai pemula. Apabila Anda sudah menguasai langkah diatas maka Anda kemungkinan akan mudah untuk menguasai langkah selanjutnya dalam mempelajari jQuery secara lebih mendalam.