Scribd Logo

Bahasa

Unggah

Selamat datang di Scribd!

Modul Web Prog 2

Diunggah oleh

Melisa Amelia
26 tayangan15 halaman

Judul Asli

Modul web prog 2

Hak Cipta

© © All Rights Reserved

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
26 tayangan15 halaman

Modul Web Prog 2

Diunggah oleh

Melisa Amelia

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
dari 15

JQUERY

7.1 Pengenalan JQuery


JQuery merupakan sebuah framework/library Javascript yang menekankan
bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada
tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai
framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup
banyak. Hal tersebut menyebabkan banyak developer web menggunakannya.
JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah
kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.
JQuery merupakan library open source dengan lisensi GNU General Public
License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping,
hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang
menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas
dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara
gratis di internet.

7.2 Fungsi JQuery


7.2.1 Mengakses bagian halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian
tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan
pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan
kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada
struktur dari HTML. JQuery menawarkan cara yang sangat mudah dalam mengakses
bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada
struktur HTML.

7.2.2 Mengubah tampilan bagian halaman tertentu.


CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam
mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan
yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua
browser. Cukup merepotkan jika kita harus mendesign halaman web dengan
beberapa CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk mengatasi hal
tersebut. Dengan JQuery, “kesenjangan” yang terjadi antara browser dalam urusan
CSS akan tertutup dengan baik.

7.2.3 Mengubah isi dari halaman.


Sebelum ada JQuery cukup sulit jika kita akan mengubah sebagian isi dari
halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau
gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya.
Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris
perintah.

7.2.4 Merespond interaksi user dalam halaman.


Website yang baik tidak cukup digambarkan dengan user‐interface dan
tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat
berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas
sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event‐
handling. Javascript sendiri memiliki beberapa event‐handling

7.2.5 Mengambil informasi dari server tanpa me‐refresh seluruh


halaman.
Mengambil informasi dari server tanpa refresh halaman merupakan salah satu
konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada
penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX,
saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan
salah satunya.

7.3 Cara Menggunakan JQuery


Website JQuery adalah http://jquery.com. Versi terbaru JQuery saat materi ini
ditulis adalah 3.4.1. Download jquery terbaru dari https://jquery.com/download. Pilih
yang compressed, production.
Simpan dengan nama jquery.min.js ke dalam folder js

Biasanya file jquery dipanggil di bagian <head>, tetapi ada juga yang
meletakkannya sebelum </body>. Pemanggilan dilakukan seperti pemanggilan
javascript biasa, yaitu :
<script src=‟lokasifile/jquery.min.js‟></script>

Untuk menjalankan script begitu halaman website ditampilkan secara keseluruhan


gunakan event bernama ready. Penulisan event ready sebagai berikut

7.4 Selector JQuery


Konsep dasar dari JQuery adalah untuk memilih beberapa element dan
melakukan sesuatu terhadapnya. Selector adalah fungsi utama pada jQuery. semua
fungsi lainnya di jQuery dapat diakses melalui selector.
Fungsi selector JQuery adalah $(„ekspressi‟). untuk penggunaan $() yang
aman sebaiknya dilakukan setelah semua page DOM selesai terbaca semua. jadi
webpagenya sudah lengkap baru script di eksekusi. kita dapat melakukannya
dengan pada fungsi $(document).ready().
Adapun parameter yang bisa digunakan pada jquery adalah Id element, class
element dan element itu sendiri. Selector juga bisa mengenali hirarki sebagai
parameter inputnya dan bisa memfilternya langsung dari ekspressi.
Selector Deskripsi
Tag HTML digunakan untuk menunjuk tag HTML. Misalnya $(„p‟) artinya
memilih semua paragraph dalam dokumen
Tag ID Digunakan untuk menunjuk tag yang memiliki atribut ID
tertentu. Misalnya $(„#menu‟) artinya memilih sebuah tag
HTML yang memiliki atribut ID=‟menu‟
tag CLASS Digunakan untuk menunjuk tag yang memiliki atribut CLASS
tertentu. Misalnya $(„.judul) artinya memilih sebuah tag HTML
yang memiliki atribut class=‟judul‟

Contoh Penggunaan
 $('#div1').css('background‐color','red')
memilih tag HTML yang memiliki atribut ID=‟div1‟ dan mengubah warna
backgroundnya menjadi merah
 $('.big').css('background‐color', 'yellow')
memilih tag HTML yang memiliki atribut class=‟big‟ dan mengubah warna
backgroundnya menjadi kuning
 $('#div3').css('background‐color','green')
memilih tag HTML yang memiliki atribut ID=‟div3‟ dan mengubah warna
background menjadi hijau
 $('p').css('background‐color','blue')
memilih tag <p> dan mengubah warna background menjadi biru
 $('div,p').css('color','orange')
memilih tag <div> atau <p> dan mengubah warna huruf menjadi orange
 $('a.strong').css('font‐size','20px')
memilih <a> yang memiliki atribut CLASS=‟strong‟ dan mengubah ukuran
huruf menjadi 20px
 $(„#data‟).show()
Memilih tag HTML yang memiliki atribut ID=‟data‟ dan memunculkannya di
layar
 $(„#data‟).hide()
Memilih tag HTML yang memiliki atribut ID=‟data‟ dan menghilangkannya dari
layar

7.5 JQuery Atribut


Beberapa komponen dasar HTML dapat dimanipulasi jika mereka dilengkapi
dengan property dan atribut. Sebagian atribut ini tersedia melalui javascript sebagai
DOM property. Beberapa atribut yang umum digunakan adalah className,
tagName, id, href, title, rel, src

Ini adalah contoh penggunasan atribut pada tag <img>


<img id="myImage" src="image.gif" alt="An image" class="someClass"
title="This is an image"/>

Pada contoh di atas tagName adalah img dan atributnya adalah id, src, alt,
class dan title. Jquery memberikan cara yang mudah untuk memanipulasi atribut
elemen dan memberi akses ke elemen sehingga kita dapat mengubah propertynya.

7.5.1 Mendapatkan nilai/value dari sebuah atribut


Untuk mendapatkan nilai dari sebuah atribut, kita dapat gunakan fungsi attr().

7.5.2 Mengubah value dari atribut


Gunakan fungsi attr(name,value) untuk mengubah value dari sebuah atribut.

7.5.3 Menghapus Atribut


Gunakan fungsi removeAttr(name) untuk menghilangkan atribut dari sebuah
element

7.5.4 Mendapatkan content HTML


Gunakan fungsi html() untuk mendapatkan content dari sebuah element.
Untuk mengubah content sebuah element, gunakan fungsi html(„content yang
baru‟)
7.5.5 Mendapatkan value element form
Gunakan fungsi val() untuk mendapatkan value dari sebuah element form.
Untuk mengubah value sebuah element form, gunakan fungsi val(„value yang
baru‟)

7.6 Plugin JQuery


Selain fungsi standar, jquery memiliki banyak plugin yang memiliki bermacam
fungsi. Cara menggunakan plugin ini cukup mudah. Anda hanya perlu memanggil
javascript plugin yang disediakan, kemudian memanggil fungsi yang tersedia di
plugin tersebut. Anda bisa menemukan berbagai plugin di
https://plugins.jquery.com/

7.6.1 chosen
Plugin chosen akan mengubah combobox dengan banyak option menjadi
lebih user-friendly. Option yang banyak ini akan diberikan filter berdasarkan huruf
yang diketik sehingga lebih mudah untuk mencari option yang banyak. Plugin ini
tersedia di https://plugins.jquery.com/chosen/ dan bisa didownload di website
resminya di https://github.com/harvesthq/chosen/releases
Pada gambar di bawah ini terlihat bagaimana perubahan pada combobox
yang menggunakan plugin chosen. Pada standard select Anda hanya perlu
memanggil fungsi chosen agar combobox (select) bisa memiliki textbox yang
berguna sebagai filter untuk mencari option (pilihan) yang Anda inginkan.
Pada bagian praktikum Anda akan mempelajari bagaimana cara
menggunakan plugin ini.

7.6.2 Datatables
Plugin datatables akan membuat sebuah table html memiliki banyak fitur
seperti pencarian, pengurutan data, dan paging. Ini sangat berguna jika Anda
akan menampilkan banyak data pada table html. Plugin ini memiliki website
resmi https://datatables.net/
Pada gambar di bawah ini terlihat sebuah table html yang menggunakan
plugin datatables. Untuk membuat tampilan seperti di bawah ini Anda hanya perlu
memanggil sebuah fungsi saja.

Pada bagian praktikum Anda akan mempelajari bagaimana cara


menggunakan plugin ini.

7.7 Praktikum
1. Ketiklah program berikut, kemudian jalankan file di browser

Program 7.1 jquery1.html


Pada program di atas, dibuat beberapa event untuk element HTML yang ada.
Event click akan dijalankan saat element diklik. Event dblclick akan dijalankan
saat elemeng di double klik.

Tampilan di layar

Klik tulisan “klik donk” dan “klik lagi donk” sehingga muncul alert javascript di
bawah ini
Double klik tulisan “jangan diklik” sehingga muncul alert javascript di bawah
ini

Klik tulisan “menghilang” sehingga tulisan “jangan diklik” dan “menghilang”


akan disembunyikan dari browser.

2. Ketiklah program berikut, kemudian jalankan file di browser

Program 7.2 jquery2.html


Pada program di atas, begitu halaman browser dibuka akan dijalankan fungsi
untuk mengubah property css masing-masing element yang disebutkan pada
selector.

Tampilan di browser sebagai berikut

Jika Anda hapus baris 6-15 tampilan di atas hanya background putih dan
huruf berwarna hitam saja.

3. Apa warna huruf dan warna background yang dihasilkan jika pada file di atas
ditambahkan baris berikut?
<a class=”big” id=”div1”>Test A</a>

4. Ketiklah program berikut, kemudian jalankan file di browser

Program 7.3 jquery3.html


Pada program di atas, dibuat beberapa tombol yang diberi event. Masing-
masing tombol diberikan fungsi berbeda. Btn1 digunakan untuk
menghilangkan atribut readonly dan mengubah atribut placeholder. Btn1
digunakan untuk menambahkan atribut readonly dan mengubah atribut
placeholder. Btn3 digunakan untuk mengambil isi textbox. Btn4 digunakan
untuk mengubah isi textbox.

Hasilnya di browser

5. Download plugin chosen di https://github.com/harvesthq/chosen/releases


pilih versi terbaru
Extract file zip hasil download dan beri nama folder chosen. Di dalam folder
chosen sudah tersedia jquery

Ketik program berikut dan simpan di luar folder chosen dengan nama
pilihnegara.html

Program 7.4 pilihnegara.html

Pada program di atas dibuat sebuah select dengan id negara. Di dalam select
memiliki beberapa option. Sebelum menjalankan plugin chosen, Anda harus
memanggil css chosen, jquery dan javascript chosen. Fungsi chosen dipanggil
pada baris ke-8
Hasil di browser

6. Download plugin datatables di https://datatables.net/download/. Pilih styling


“Data Tables”, select package “Jquery 3”.

Pada step 3, pilih tab “Download” dan klik tombol “Download files”
Extract file zip hasil download dan beri nama folder datatables. Ketik program
di bawah ini dan simpan di luar folder datatables dengan nama datamhs.html

Program 7.5 datamhs.html

Hasil di browser
Rangkuman
Sebagai framework javascript, jquery memberikan kemudahan dalam memanipulasi
element HTML pada browser. Selain itu jquery juga memiliki banyak plugin yang bisa
digunakan untuk membuat website menjadi lebih menarik

Latihan
1. Apa kelebihan jquery dibandingkan dengan framework javascript lainnya?
2. Carilah 5 plugin jquery lainnya dan pelajari fungsi serta cara
menggunakannya!
3. Apa kegunaan dari jqueryUI?

Anda mungkin juga menyukai