bahasa pemrograman berbasis web

Chapter 4: Belajar bahasa pemrograman berbasis web – JQuery

Dalam pekerjaan coding atau membangun aplikasi web dinamis menggunakan javascript biasanya akan ditemui proses dan perintah yang mesti dilakukan berulang-ulang. Hal ini tentu saja melelahkan dan perlu disederhanakan.

Sebagai salah satu bahasa pemrograman berbasis web penggunaan Javascript di dunia sangat luas. Maka tidak mengherankan apabila banyak developer yang mulai mengembangkan pustaka-pustaka Javascript demi penyederhanaan sehingga produktivitas pengembangan aplikasi web dinamis menjadi lebih baik.

jQuery

Ada banyak pustaka Javascript di dunia, dan yang paling populer di dunia saat ini adalah jQuery. Hampir semua aplikasi web di dunia saat ini menggunakan jQuery sebagai pustaka Javascript. Pustaka jQuery mempunyai kelebihan yakni ukuran kecil, kecepatan bagus, pemasangan tidak ribet dan ada banyak sekali fitur yang tersedia. Sebagai pustaka Javascript, jQuery adalah salah satu bahasa pemrograman web berbasis client side.

Pada dasarnya alasan dikembangkannya jQuery adalah untuk memenuhi kebutuhan:

  • Menemukan konten di dalam HTML
  • Mengubah konten di dalam dokumen HTML
  • Membuat animasi menggunakan CSS
  • Menangkap event-event halaman web
  • Berkomunikasi dengan remote server
jQuery adalah bahasa pemrograman berbasis web
Photo by Greg Rakozy on Unsplash

Cara menggunakan jQuery

Agar dapat menggunakan jQuery, hal pertama yang kita lakukan adalah memuat fungsi-fungsi pustakanya. jQuery tidak lebih dari sebuah standar pustaka Javscript eksternal yang berisi berbagai macam fungsi yang siap kita gunakan. Pustaka ini sifatnya gratis, bebas digunakan di mana saja dan kapan saja dia dibutuhkan.

Kita dapat memperoleh jQuery di website resminya https://jquery.com/ . Di sana tersedia lengkap berbagai pilihan mulai dari versi yang ingin kita gunakan sampai Dokumentasi yang komprehensif.

Ada beberapa pilihan untuk menggunakan jQuery:

1. Download file pustaka ke komputer lokal/server

Terkadang kita ingin agar file pustaka ini selalu tersedia tanpa mesti bergantung pada koneksi internet. Untuk itu kita bisa mengunduh file pustaka dan menyimpan di komputer lokal ataupun server. Sehingga ketika koneksi internet tidak tersedia, program yang kita bangun tidak terganggu akibat ketidak-tersediaan file jQuery.

Alamat download file jQuery di https://jquery.com/download. Di sana sudah ada petunjuk yang lengkap mengenai pilihan download. Ada beberapa pilhan download :

  • Uncompressed : Pustaka full jQuery yang belum terkompres
  • Minified : full jQUery yang terkompres
  • Slim : Sebagian besar fitur jQuery dengan pengecualian dukungan animasi dan Ajax dalam bentuk belum terkompres
  • Slim minified : Sebagian besar fitur jQuery kecuali animasi dan Ajax dalam bentuk terkompres

Saya sangat menganjurkan untuk menggunkaan versi Minified, sehingga kita bisa mendapatkan fitur penuh sekaligus ukuran yang kecil karena terkompres. Ini sangat berpengaruh terhadap waktu yang dibutuhkan untuk me-load halaman web. Semakin kecil ukuran file-file statis seperti jQuery, gambar, file CSS maka semakin cepat pula waktu loading halaman web.

Setelah file pustaka jQuery diunduh, maka pada HTML ia perlu dipanggil menggunakan tag <script></script> sebagaimana halnya memanggil file eksternal Javascript.

<script src="jquery-3.5.1.min.js"></script>

Dalam contoh di atas kita memanggil jQuery versi 3.5.1 karena pada saat artikel ini ditulis, versi terbaru jQuery adalah versi 3.5.1. Sesuaikan dengan versi yang anda gunakan.

2. Menggunakan Content Delivery Network (CDN)

Cara lain yang bisa digunakan untuk menjalankan jQuery adalah dengan menggunakan metode CDN (Content Delivery Network). Cara ini memiliki kelebihan yakni membantu menghemat waktu dan kinerja server. Ketika pengunjung website melakukan permintaan jquery, server tidak perlu melayani langsung melainkan memberikan referensi host CDN. Maka file jQuery dilayani oleh host CDN tersebut, sehingga beban server menjadi berkurang yang berdampak pada performa server menjadi lebih baik.

jquery adalah bahasa pemrograman web berbasis client side
jquery adalah bahasa pemrograman web berbasis client side

Baca juga: COVID 19 NEWS DAN REVOLUSI INDUSTRI 4.0

Cara menggunakan di dalam kode seperti berikut ini:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source. Read more at srihash.org

Pada halaman CDN, ada keterangan seperti di atas. Atribut integritas dan crossorigin digunakan untuk pengecekan Subresource Integrity (SRI). Ini memungkinkan browser untuk memastikan bahwa sumber daya yang dihosting di server pihak ketiga belum dirusak. Penggunaan SRI direkomendasikan sebagai praktik terbaik, setiap kali pustaka dimuat dari sumber pihak ketiga. Baca selengkapnya di srihash.org

Selain CDN yang disediakan oleh jQuery sendiri, kita juga bisa menggunakan CDN dari provider atau penyedia layanan CDN lain seperti :

Cara Menggunakan fungsi-fungsi jQuery

Setelah dimuat di dalam dokumen, kita sudah bisa menggunakan jQuery. Cara penggunaannya di dalam dokumen biasanya seperti berikut:

<script>
 jQuery(kode);
</script>

atau:

<script>
 $(kode);
</script>

Menemukan elemen-elemen

Baca juga: Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (part 4)

Pada artikel chapter sebelumnya tentang Javascript, kita telah mengenal beberapa method elemen seperti fungsi getElementById(), getElementByClassName() atau getElementByTagName() untuk menemukan elemen di dalam halaman. Nah, dengan jQuery, penggunaan fungsi-fungsi di atas diringkas menjadi lebih sederhana.

Misalnya, untuk menemukan elemen h2, kita bisa menulis seperti berikut:

$("h2");

Untuk menemukan elemen dengan id tertentu, misalnya id=”catatan”

$("#catatan);

atau misalnya class=”peringatan”

$(".peringatan");

Untuk lebih jelasnya kita coba buat sebuah contoh dengan file latihan_jquery1.html

<!DOCTYPE html>
<html>
<head>
<title>Latihan jQuery</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>Ini Judul Utama</h1>
<p>Ini adalah paragraf halaman utama</p>
<script>
  var data = $("p").text();
  alert(data);
</script>
</body>
</html>

Apabila dijalankan di browse, hasilnya seperti berikut ini:

Bahasa Pemrograman berbasis web - jQuery
Latihan jQuery 1

Penjelasan :

jQuery mencari elemen p, kemudian mengambil nilai di dalam elemen p tersebut dann menyimpan di dalam variabel bernama data. Variabel ini kemudian ditampilkan menggunakan fungsi alert().

Baca juga: Belajar bahasa pemrograman berbasis web – Javscript (part 3)

Menempatkan jQuery dalam elemen head

Cara kerja jQuery dalam halaman HTML adalah menunggu sampai semua DOM (Document Object Model) diload, baru ia dijalankan. Apabila jQuery duluan berjalan sementara sebagian elemen DOM belum diload, maka akan ada sebagian elemen yang tidak terbaca olehnya. Akibatnya akan terjadi kesalahan/error dan hasil yang diinginkan tidak tercapai.

Untuk itu ada satu cara agar jQuery (kita perintahkan!) agar menunggu sampai semua elemen DOM di-load dengan menambah sebuah fungsi:

jQuery(document).ready(function(){
  kode
}

Selengkapnya seperti berikut:

<script>
  jQuery(document).ready(function() {
    var data = $("p").text();
    alert(data);
  });
</script>

Mengubah data dengan jQuery

Setelah elemen ditemukan, maka pekerjaan berikut adalah melakukan manipulasi, perubahan, dan sebagainya terhadap elemen tersebut.

Menangani Teks

Kita membuat contoh dengan sebuah file UbahTeks.html

<!DOCTYPE html>
<html>
<head>
  <title>Mengganti teks dengan jQuery</title>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
    jQuery(document).ready(function() {
      $("button").click( function() {
        $("p").text("Hai...ini text baru yang diubah menggunakan jQuery!");
      });
    });
  </script>
</head>
<body>
  <h1>jQuery itu mengasyikan</h1>
  <p>Pemrograman Javascript menjadi mudah dengan adanya jQuery.</p>
  <button>Berubah!!!</button>
</body>
</html>

Pada contoh di atas kita menggunakan elemen button. Ketika menggunakan jQuery kita tidak perlu lagi menambahkan atribut onClick() pada elemen tersebut. Kita cukup memanggil button dan menambahkan fungsi click() pada elemen tersebut.

$("button").click( function() {

Baca juga: Belajar bahasa pemrograman berbasis web – Javscript (part 2)

Menangani HTML

Buat sebuah file bernama UbahHtml.html, isi dengan kode berikut ini :

<!DOCTYPE html>
<html>
<head>
  <title>Mengganti elemen html dengan jQuery</title>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
    jQuery(document).ready(function() {
      $("button").click( function() {
        $("p").html("<h1>Dengan cara ini, teks paragraf berubah menjadi Judul, Wow!</h1>");
      });
    });
  </script>
</head>
<body>
  <h1>jQuery itu mengasyikan</h1>
  <p>Pemrograman Javascript menjadi mudah dengan adanya jQuery.</p>
  <button>Berubah!!!</button>
</body>
</html>

Pada contoh di atas kita melakukan perubahan dengan memasukkan sebuah elemen HTML h1 dengan mengganti teks pada elemen paragraf.

Bahasa pemrograman berbasis web
Bahasa pemrograman berbasis web – mengganti teks dengan elemen html menggunakan jQuery

Menangani Atribut

Tidak hanya elemen html, kita juga bisa melakukan modifikasi terhadap atribut elemen. Kita melakukan itu menggunakan fungsi jQuery bernama .attr()

Sintaks-nya seperti berikut:

$(selector).attr("atribut", "nilai");

Contoh: Buat file bernama ubahAtribut.html, isi dengna kode berikut ini:

<!DOCTYPE html>
<html>
<head>
  <title>Mengganti atribut elemen dengan jQuery</title>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
    jQuery(document).ready(function() {
      $("button").click( function() {
        $("p").attr("style","background-color: blue");
      });
    });
  </script>
</head>
<body>
  <h1>jQuery itu mengasyikan</h1>
  <p style="background-color: #ff0">Pemrograman Javascript menjadi mudah dengan adanya jQuery.</p>
  <button>Berubah!!!</button>
</body>
</html>

Setelah dijalankan di browser, hasilnya seperti berikut:

Baca juga: Belajar bahasa pemrograman berbasis web – Javscript (part 1)

Menangani isi form

Salah satu kelebihan jQuery adalah menangani data formulir html. Fitur ini sangat bermanfaat pada saat melakukan validasi input yang dilakukan pengguna pada formulir.

jQuery menggunakan fungsi .val() untuk mengakses atribut value (nilai) pada elemen input formulir.

Contoh:

var username = $("input").val();

atau bisa digunakan untuk memberi clue kepada pengguna :

$("input").val("Masukkan Username");

Mengubah style dokumen

Selain mampu mengubah konten, jQuery juga mempunyai kemampuan untuk mengubah style halaman web secara dinamis.

Properti CSS

Pada artikel Chapter 2: Belajar bahasa pemrograman berbasis web – CSS kita telah berkenalan dengan CSS dan fungsinya dalam mengatur tampilan halaman web.

jQuery memiliki sebuah fitur bagus untuk menangani dan memanipulasi CSS(3) dengan dinamis. O ya, … mengapa CSS membutuhkan jQuery kalau fungsi-fungsi mengatur style dokumen bisa dihandle oleh CSS itu sendiri? Jawabannya: karena CSS sendiri bukan merupakan bahasa pemrograman, sehingga tidak memiliki kemampuan menangani perubahan style secara dinamis. Perubahan dinamis maksudnya ketika ada situasi tertentu yang membutuhkan proses logic untuk mengadaptasi beberapa kondisi jelas CSS tidak mampu menangani, maka satu-satunya yang bisa menangani itu adalah pemrograman client-side seperti Javascript(jQuery).

jQuery memiliki fungsi khusus untuk menangani CSS dengan fungsi .css(). Fungsi ini membuat kita mampu untuk mengambil nilai atau memasang nilai sebuah atau sekelompok properti dari elemen apa saja di halaman web

Bentuk penggunaannya seperti berikut ini:

$(selector).css(properti);

atau seperti ini:

$(selector).css(properti, nilai);

Sebagai contoh, untuk mengatur ukuran font, kita bisa mendeklarasikan sintaks jQuery seperti berikut:

var ukuranFont = $("div").css("font-size");

Ketika menggunakan Javascript, kita tidak bisa menggunakan simbol dash (-) untuk memanipulasi properti CSS, sedangkan jQuery memperbolehkan itu

Framelian dong

Untuk lebih jelasnya, mari kita buat latihan. Buatlah file dengan nama ubahCss.html, kemudian isi kode berikut ini:

<!DOCTYPE html>
<html>
<head>
  <title>Modifikasi Style CSS dengan jQuery</title>
  <script src="jquery-3.5.1.min.js"></script>
  <style>
    div {
      background-color:yellow;
    }
  </style>
  <script>
    jQuery(document).ready(function() {
      $("button").click(function() {
        $("p").css("background-color", "red");
        $("p").css("font-size", "50px");
      });
    });
  </script>
</head>
<body>
  <div id="container">
    <h1>Judul besar</h1>
    <p>Paragraf ini kupersembahkan hanya untukmu, sayang...</p>
    <button>Berubah!!!</button>
  </div>
</body>
</html>

Hasilnya kurang lebih seperti berikut ini:

Baca juga: Belajar bahasa pemrograman berbasis web – HTML Dasar

Menggunakan CSS Object

Ketimbang membuat style berulang-ulang atau berbaris-baris alangkah lebih bijaksana kalau menggunakan metode CSS Object seperti di bawah ini:

$(selector).css({"property1":"nilai1", "property2":"nilai2"...});

Contoh bentuk nyatanya seperti berikut:

$("p").css({"background-color":"red", "font-size":"50px"});

Menggunakan Class CSS

Menggunakan cara di atas sudah cukup untuk melakukan manipulasi style menggunakan jQuery. Namun cara tersebut dapat menimbulkan masalah baru. Ketika menyematkan style jQuery dengan cara di atas, dengan sendirinya style tersebut menjadi terpisah dari style-style pada CSS. Hal tersebut dapat membingungkan ketika kita mesti mengecek kembali style-style pada dokumen.

Untuk mengatasi masalah itu, jQuery telah menambahkan serangkaian fungsi lain yang berinteraksi dengan aturan kelas CSS. Dengan fungsi class jQuery, Anda dapat menambahkan, menghapus, atau bahkan beralih class ke elemen.

FungsiDeskripsi
.addClass(class)Menambahkan class tertentu ke sebuah elemen
.hasClass(class)Fungsi pengecekan, bernilai true apabila sebuah elemen mengandung class yang dimaksud
.removeClass(class)Menghapus class yang dimaksud dari elemen
.toggleClass(class)Dua kondisi pilihan dinamis, menambahkan atau menghapus class dimaksud dari elemen pada saat dipanggil
Class CSS jQuery

Sekarang yang perlu Anda lakukan adalah menempatkan kelompok properti style yang anda butuhkan ke dalam class dalam definisi style CSS Anda, lalu menambahkan, menghapus, atau bahkan membuat pilihan dinamis class untuk elemen tersebut. Fungsi .hasClass() memungkinkan Anda untuk memeriksa class apa itu saat ini ditetapkan ke elemen.

Untuk lebih jelasnya, mari kita buat contoh program, bernama jQueryClass.html

<!DOCTYPE html>
<html>
<head>
<title>Manipulasi elemen menggunakan class CSS jQuery</title>
</head>
<style>
  div {
    background-color:yellow;
  }
  .modifikasi {
    background-color:red;
    font-size:50px;
  }
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
  jQuery(document).ready(function() {
    $("button").click(function() {
      $("p").toggleClass("modifikasi");
    });
  });
</script>
<body>
  <div id="container">
    <button>Berubah!</button>
    <h1>Judul</h1>
    <p id="isi">Ini adalah teks-teks dalam paragraf</p>
  </div>
</body>
</html>

Hasilnya seperti pada gambar berikut ini:

Pemrograman berbasis web - Jquery
Manipulasi CSS class

Pada contoh program di atas, kita melakukan modifikasi pada halaman menggunakan cara modifikasi toggleClass bernama modifikasi. Coba klik tombol Ubah berulang-ulang, maka akan kelihatan perubahan yang dilakukan menggunakan jQuery.

Identitas class di dalam CSS didahului dengan simbol titik (.)

Identitas id dalam CSS ditandai dengan simbol #

Cheatsheet untuk pemula

Penggunaan jQuery untuk manipulasi class dalam contoh di atas adalah

$("p").toggleClass("modifikasi");

Mengubah Document Object Model (DOM)

Anda tidak hanya dapat menggunakan jQuery untuk memodifikasi konten dan style elemen yang ada di halaman Web Anda, Anda juga dapat menggunakannya untuk menambahkan atau menghapus seluruh elemen! Ada beberapa fungsi jQuery yang berbeda yang tersedia untuk memanipulasi node elemen yang terkandung dalam pohon DOM.

Menambah node

Anda dapat menggunakan jQuery untuk menambahkan node baru ke pohon DOM untuk menampilkan konten tambahan sesuai kebutuhan.

FungsiDeskripsi
after()Menambahkan sebuah node setelah node yang telah ada sebelumnya
.append()Menambahkan sebuah node pada AKHIR node yang sudah ada
.appendTo()Menambahkan sebuah node baru pada akhir node yang sudah ada sebelumnya
.before()Menambahkan sebuah node pada posisi sebelum node yang sudah ada
.insertAfter() Menambahkan sebuah node baru setelah node yag telah ada sebelumnya
.insertBefore()Menambahkan sebuah node baru sebelum node yag telah ada sebelumnya
.prepend()Menambahkan sebuah node di posisi depan dari node yag telah ada sebelumnya
.prependTo()Menambahkan sebuah node pada bagian awal node yag telah ada sebelumnya
Tabel fungsi node jQuery

Perhatikan perbedaan halus antara fungsi .after() dan .append(). Fungsi .append() menambahkan node baru ke akhir node yang ada, sehingga menjadi node anak dari node yang ada di fungsi DOM. Fungsi .after(), di sisi lain, menambahkan node saudara baru setelah node yang ada di fungsi DOM. Demikian juga untuk fungsi .before() dan .prepend().

Misalnya, Anda dapat menambahkan elemen p baru ke elemen p yang ada di program contoh Anda dengan menambahkan kode berikut:

$("p").after("<p>Ini adalah sebuah node baru</p>");

Sehingga ketika fungsi ini dijalankan, sebuah node baru akan muncul pada halaman.

Untuk lebih jelasnya mari kita bereksperimen dengan dokumen nyata. Buat sebuah file baru bernama addNode.html, masukkan kode berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Menambahkan node menggunakan jQuery</title>
</head>
<style>
  div {
    background-color:lightblue;
  }
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
  jQuery(document).ready(function() {
    $("button").click(function() {
      $("p").after("<p>Ini adalah node yang baru ditambahkan</p>");
    });
  });
</script>
<body>
  <div id="container">
    <button>Tambah Node!</button>
    <h1>Judul Besarnya di sini</h1>
    <p id="isi">Ini adalah teks-teks dalam paragraf</p>
  </div>
</body>
</html>

Kode program di atas akan menghasilkan output seperti berikut ketika dijalankan di browser:

Menghapus Node

Selain fungsi menambah node, jQuery juga memiliki fungsi menghapus node

FungsiDeskripsi
.empty()Menghapus semua node anak/turunan dari node yang bersangkutan
.remove()Menghapus node tertentu
Tabel fungsi node jQuery

Bahasa pemrograman berbasis web – bermain dengan animasi jQuery

Satu fitur paling menarik dari Javscript adalah kemampuan animasi. jQuery membawa kemapuan melakukan animasi dengan fungsi .animate()

$("p").animate({"font-size": "50px"});

Kita praktekkan dalam program berikut ini. Buat sebuah file bernama animasiJQuery.html. Masukkan kode berikut ini

<!DOCTYPE html>
<html>
<head>
<title>Animasi jQuery</title>
</head>
<style>
  div {
    background-color:white;
  }
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
  jQuery(document).ready(function() {
    $("button").click(function() {
      $("p").animate({"font-size": "50px"});
    });
  });
</script>
<body>
  <div id="container">
    <button>Animasikan!</button>
    <h1>Judul Besarnya di sini</h1>
    <p id="isi">Ini adalah teks-teks dalam paragraf</p>
  </div>
</body>
</html>

Penutup

Sampai di sini kita sudah mempelajari dasar-dasar penggunaan dan fungsi-fungsi jQuery. Pada artikel selanjutnya kita akan mempelajari tentang penanganan Event jQuery. Sampai jumpa!

Leave a Reply