Membuat aplikasi daftar pekerjaan menggunakan jQuery.

Tampilan

<input type="text" id="task">

<button id="tambah">
Tambah
</button>

<ul id="list"></ul>

Script

$("#tambah").click(function(){

let task=$("#task").val();

$("#list").append(
"<li>"+task+"</li>"
);

$("#task").val("");

});

Pengembangan Lanjutan

Tambahkan fitur:

• Hapus data
• Edit data
• Simpan Local Storage
• Hitung jumlah tugas

PROYEK AKHIR MODUL

Sistem Manajemen Data Siswa

Buat aplikasi menggunakan jQuery yang memiliki fitur:

Input

• NIS
• Nama
• Kelas
• Jurusan

Fitur

1. Tambah Data
2. Edit Data
3. Hapus Data
4. Cari Data
5. Validasi Form
6. Animasi Tabel
7. Penyimpanan Local Storage

AJAX memungkinkan website mengambil data tanpa me-refresh halaman.

Contoh AJAX

$.ajax({

url:"data.php",
method:"GET",

success:function(data){

$("#hasil").html(data);

}

});

Praktik

data.php

<?php

echo "Halo AJAX";

?>

script.js

$("#load").click(function(){

$.ajax({

url:"data.php",

success:function(data){

$("#hasil").html(data);

}

});

});

TUGAS BAB 9

Buat tombol:

“Ambil Data”

Ketika diklik mengambil data dari file PHP menggunakan AJAX.

$("#nama").val();

Contoh

<input type="text" id="nama">

<button id="simpan">Simpan</button>

$("#simpan").click(function(){

var nama=$("#nama").val();

alert(nama);

});

Validasi Form

if(nama=="")
{
alert("Nama wajib diisi");
}

Praktik

Membuat form biodata sederhana.

• Nama
• Alamat
• No HP

Ketika tombol simpan ditekan tampilkan data ke layar.

$("#box").hide();

Show

$("#box").show();

Toggle

$("#box").toggle();

Fade In

$("#box").fadeIn();

Fade Out

$("#box").fadeOut();

Slide Down

$("#box").slideDown();

Slide Up

$("#box").slideUp();

Animate

$("#box").animate({

left:"300px"

});

Praktik

<div id="box"></div>

<button id="gerak">Gerakkan</button>

$("#gerak").click(function(){

$("#box").animate({
width:"300px",
height:"300px"
});

});

TUGAS BAB 7

Buat animasi:

• Kotak bergerak
• Membesar
• Mengecil
• Berubah transparansi

$("#judul").html("Selamat Datang");

Mengubah Teks

$("#judul").text("Belajar jQuery");

Menambah Elemen

$("body").append("<p>Paragraf Baru</p>");

Menghapus Elemen

$("#judul").remove();

Praktik

<button id="tambah">Tambah</button>

<div id="hasil"></div>

$("#tambah").click(function(){

$("#hasil").append("<p>Data Baru</p>");

});

LATIHAN BAB 6

Buat aplikasi daftar tugas sederhana:

• Tombol Tambah
• Tombol Hapus
• Area daftar tugas

Contoh:

• Klik
• Hover
• Double click
• Ketik keyboard

5.1 Event Click

$("#btn").click(function(){

alert("Tombol diklik");

});

5.2 Double Click

$("#btn").dblclick(function(){

alert("Double Click");

});

5.3 Mouse Hover

$("#judul").mouseenter(function(){

$(this).css("color","red");

});

Praktik

<button id="btn">Klik Saya</button>

$("#btn").click(function(){

$("body").css("background","lightblue");

});

TUGAS BAB 5

Buat aplikasi sederhana:

• Tombol Merah
• Tombol Hijau
• Tombol Biru

Saat tombol diklik maka background berubah sesuai warna tombol.

4.1 Selector ID

HTML

<h1 id="judul">Belajar</h1>

jQuery

$("#judul").hide();

4.2 Selector Class

HTML

<p class="isi">Paragraf</p>

jQuery

$(".isi").css("color","red");

4.3 Selector Tag

$("p").hide();

Praktik Lengkap

<h1 id="judul">Judul</h1>

<p class="isi">Paragraf 1</p>
<p class="isi">Paragraf 2</p>

<button id="btn">Klik</button>

$("#btn").click(function(){

$(".isi").css("color","blue");

});

LATIHAN BAB 4

Buat program yang:

Ketika tombol ditekan:

• Judul menjadi merah
• Semua paragraf menjadi hijau

Struktur dasar:

$(selector).action();

Contoh:

$("p").hide();

Artinya:

• Cari semua tag p
• Sembunyikan

3.2 Document Ready

Kode jQuery biasanya ditulis:

$(document).ready(function(){

});

Versi pendek:

$(function(){

});

Praktik 1

HTML

<h1 id="judul">Belajar jQuery</h1>

jQuery

$(function(){

$("#judul").css("color","blue");

});

Hasil:

Tulisan berubah menjadi warna biru.

Praktik 2

$(function(){

$("body").css("background","lightyellow");

});

TUGAS BAB 3

Buat halaman yang:

• Mengubah warna judul menjadi hijau.
• Mengubah warna latar belakang menjadi abu-abu.
• Mengubah ukuran font menjadi 40px.

Buat struktur berikut:

belajar-jquery/
│
├── index.html
├── css
│   └── style.css
└── js
    └── script.js

2.2 Menggunakan CDN

Masukkan kode berikut sebelum tag </body>.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2.3 Membuat File Pertama

index.html

<!DOCTYPE html>
<html>
<head>
<title>Belajar jQuery</title>
</head>
<body>

<h1>Halo jQuery</h1>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

</body>
</html>

Simpan lalu jalankan pada browser.

PRAKTIK BAB 2

Buat halaman dengan:

• Judul
• Paragraf
• Tombol

Pastikan jQuery sudah terhubung dengan benar.

Setelah mempelajari bab ini, peserta didik mampu:

• Menjelaskan pengertian jQuery.
• Menjelaskan fungsi jQuery.
• Memahami kelebihan jQuery dibanding JavaScript biasa.

1.1 Apa Itu jQuery?

jQuery adalah sebuah library JavaScript yang dibuat untuk mempermudah penulisan kode JavaScript.

Sebelum adanya jQuery, programmer harus menulis kode JavaScript yang panjang untuk melakukan tugas sederhana seperti:

• Mengubah warna teks
• Menyembunyikan elemen
• Menampilkan popup
• Mengirim data ke server

Dengan jQuery, pekerjaan tersebut menjadi jauh lebih singkat.

Contoh:

JavaScript Biasa

document.getElementById("judul").style.color="red";

jQuery

$("#judul").css("color","red");

Terlihat lebih sederhana dan mudah dibaca.

1.2 Kelebihan jQuery

1. Penulisan Kode Lebih Singkat

Kode menjadi lebih efisien.

2. Cross Browser

Dapat berjalan pada berbagai browser tanpa perlu banyak penyesuaian.

3. Banyak Plugin

Tersedia ribuan plugin siap pakai.

4. Mudah Dipelajari

Sangat cocok bagi pemula.

1.3 Kapan Menggunakan jQuery?

jQuery cocok digunakan untuk:

• Website profil
• Landing page
• Sistem informasi sekolah
• Aplikasi kasir
• Website UMKM

Namun untuk aplikasi besar saat ini biasanya menggunakan:

• React
• Vue.js
• Angular

Meskipun demikian, jQuery masih banyak digunakan pada proyek perusahaan dan website pemerintahan.

LATIHAN BAB 1

Jawablah pertanyaan berikut:

Mengapa jQuery disebut library JavaScript?

Apa yang dimaksud dengan jQuery?

Sebutkan 3 kelebihan jQuery!

Simulasi JQuery Bisa dipraktekkan menggunakan tools editor di bawah ini :

See the Pen project by deka wildan (@deka-wildan) on CodePen.