“Sejarah, Pengenalan dan Implementasi JQuery”

Makalah ini disusun untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi

Oleh :

Nama : Hendyeka Angga Putra

NIM : 1102412103

Prodi : Kurikulum dan Teknlogi Pendidikan

Makul : Teknologi Informasi dan Komunikasi

Rombel : 01

KURIKULUM DAN TEKNOLOGI PENDIDIKANFAKULTAS ILMU PENDIDIKAN

2013

1

KATA PENGANTAR

          Puji syukur penulis kepada Allah SWT, karena atas taufik dan hidayah-Nya, penulis dapat menyelesaikan makalah yang berjudul “Implementasi JQuery” tepat pada waktunya. Penulisan makalah ini disusun untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi.

          Namun demikian penulis menyadari bahwa penulisan makalah ini masih jauh dari kesempurnaan. Ini semua disebabkan karena keterbatasan dan kemampuan penulis dalam hal mencari data yanag akan dijadikan sebagai sumber pengembangannya. Maka dari itu, penulis sangat mengharapkan kritik dan saran dari semua pihak yang bersifat membangun demi kesempurnaan penulisan makalah ini agar menjadi hasil yang baik untuk ke depannya.

          Selain itu tidak lupa penulis mengucapkan terima kasih kepada semua pihak yang telah membantu penulis baik materi maupun spiritualnya dalam penulisan makalah ini.          Akhir kata penulis mengucapkan semoga makalah ini dapat bermanfaat bagi pembaca umumnya dan bagi penulis khususnya. Semoga perkembangan Teknologi Informasi dan Komunikasi di Indonesia mampu bersaing dengan negara yang sudah maju.

                                                          

DAFTAR ISI

2

Kata Pengantar.....................................................................................2Daftar Isi...........................................................................................3

BAB IPendahuluan

A. Latar Belakang...................................................................................4B. Rumusan Masalah..............................................................................5C. Tujuan Penulisan................................................................................5

BAB IIPembahasan

A. Sejarah dan Pengenalan jQuery...........................................................7

B. Implementasi jQuery...........................................................................8

C. Manfaat jQuery Dalam Perkembangan Aplikasi Website..................10

D. Contoh Sederhana JQuery………………………………………..…...12

E. Cara Menggunakan JQuery………………………………………....…16

F. Belajar jQuery mudah…………………………………………......…..22

G. Cara Penggunaan Jquery Mobile………………………………...……30

H. Syntax dalam JQUERY…………………………………………..……32

Bab III  PenutupA.     Kesimpulan.......................................................................................31

Daftar Pustaka

3

BAB I

PENDAHULUAN

A. Latar Belakang

Untuk mengoptimisasi dan meringkas penulisan library JavaScript, jQuery merupakan

jawaban yang tepat dalam hal tersebut. jQuery merupakan sebuah framework dan cara baru

dalam menuliskan kode JavaScript. Dengan menggunakan jQuery, kita dapat mempercepat

perpindahan dokumen HTML, penanganan event(event-handling), dan pembuatan animasi

didalam web untuk memperindah website yang kita buat.

Agar pengguna(user) dapat berinteraksi dengan website dan dapat mengatur tampilan

pada penggunaan jQuery, diperlukan sebuah penanganan event dengan menambahkan perintah-

perintah seperti click() untuk menangani event saat terjadi click, focus(), hover(), mouseout(),

mouseleave(), dan lain-lainnya.

Perkembangan dunia informasi dan teknologi sangat cepat pada dasawarsa terakhir sejak dimulainya era millennium. Perkembangan itu salah satunya ditandai dengan keberadaan aplikasi java yang menyediakan berbagai layanan. Bentuk layanan yang dihadirkan aplikasi java sejatinya sangat berguna dan membantu bagi kehidupan manusia. Mulai dari akses data, informasi aktual, iklan, komunikasi, game dan sebagainya.

Selain keuntungan tersebut, keistimewaan lain aplikasi java adalah kemudahan akses atau pengoperasiannya yang dapat dilakukan siapapun mulai dari anak-anak sampai orang dewasa. Maka tidak mengherankan jika aplikasi java telah menjadi konsumsi publik sebagaian besar masyarakat Indonesia. Keberadaan aplikasi java telah menghadirkan nuansa tersendiri di tengah masyarakat karena selalu mengikuti kemajuan teknologi. Peningkatan fasilitas demi menambah kepuasan pelanggan menjadi sisi yang paling ditonjolkan. Hal ini tentu saja semakin memantapkan posisinya sebagai bagian kebutuhan masyarakat. Ia telah menjadi bagian hidup masyarakat masa kini.

Salah satu aplikasi yang ditawarkan oleh java yang sekarang digemari adalah opera mini, Game hp dan aplikasi lainnya yang difungsikan sebagai media komunikasi dunia maya dan hiburan. Jutaan penggunanya dari berbagai penjuru dunia. Hal ini menjadikan aplikasi java sebagai alat komunikasi modern tanpa batas karena mengabaikan jarak, waktu, dan

4

tempat.Sehingga aplikasi java sering di gunakan untuk kehidupan sehari dan orang tergantung dengan adannya aplikasi java.

Aplikasi java merupakan aplikasi jaman modern yang banyak orang mengenal dengan adanya game dan aplikasi. Tapi banyak orang yang tidak mengenal java sehingga banyak orang yang mengalami kesulitan saat aplikasi tersebut mengalami problem. Kendala yang sering muncul kepada seseorang yang tidak tau aplikasi java adalah bekerja komunikasi,hiburan,informasi semakin lama di selesaikan dan terhalang dengan peralatan yang ada,padahal era milenium ini suatu pekerjaan di harapakan bisa diselesaikan dengan cepat akurat,tepat serta mudah dalam penggunaanya.

Dari uraian latar belakang yang telah disampikan maka penulis memberi sejumlah masalah pada makalah sebagai berikut :

1. Pengenalan java

2. Manfaat menggunakan aplikasi java

3. Tidak membahas pembuatan aplikasi java

B. Rumusan Masalah

Dengan masalah-masalah yang disampaikan maka dapat disimpulkan:

a. Bagaimana orang mengenal java?b. Apa keuntungan mengenal java?c. Mengapa orang mengenal java?d. Bagaimana sejarah java?e. Apa saja karakteristik java?

C. Tujuan Penulisan

Bagian awal ini akan mengajak Anda untuk mengenal lebih dekat Java. Lebih khusus lagi, kita akan mengeksplorasi komponen-komponen fundamental yang perlu sekali diketahui dan dipahami dengan baik. Diharapkan uraian ini nantinya dapat membantu memudahkan Anda ketika ingin mempelajari Java.

Tujuan dengan mengenal aplikasi java di harapakan seseorang akan mendapatkan hal berikut ini:

1. Mengetahui sejarah pembuatan java.(bagaimana)

5

2. Membuat orang tertarik pada java.(apa)

3. Mengetahui kekurangan dan kelebihan java.(apa)

4. Mempermudah komunikasi antara sesama seberapapun jaraknya.(mengapa)

5. Mendapatkan hiburan dan melatih kepekaan dalam memainkan permainan yang menghibur. (mengapa)

6. Mempermudah mendapatkan informasi yang ingin kita cari.(mengapa)

7. Mempercepat menyelesaikan tugas atau pekerjaan.(mengapa)

6

BAB II

PEMBAHASAN

A.Sejarah dan Pengenalan jQuery

Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery telah mencuri

perhatian para developer web. Buktinya, pada tahun-tahun berikutnya jQuery telah banyak

digunakan oleh website - website terkemuka di dunia seperti Google, Microsoft, intel , Nokia,

Oracle , IBM, DELL, BBC, NBC, ESPN, EAPN, EA Sport, Twitter, Facebook, Amazon,

Techorati, Youtobe Apple, Wordpress, Mozila, Netflix , Digg, Time, dan masih banyak lagi.

Bahkan website lokalpun tidak mau ketinggalan, Lihat saja Detik, Studio 21 (21cineplex.com).

Indosiar, Vivanews, Kompas, termasuk IlmuGrafis tentunya dan lain-lain.

Akan tetapi, jQuery sebenarnya bukanlah hal yang baru jika melihar “jeroan”-nya, karena

berisi fungsi-fungsi yang ditulis dengan JavaScript, dan JavaScript itu sendiri telah

diperkenalkan oleh Netscape sejak tahun 1995.

Tetapi, tentu jQuery menawarkan fitur-fitur modern yang siap pakai, walaupun idenya

sederhana, yaitu membuat sebuah library JavaScript, ternyata jQuery mampu menarik

perusahaan-perusahaan besar yang mem-bundling jQuery kedalam produknya. Nokia akan

mengintegrasikan jQuery kedalam platform web Run-Time, sedangkan Microsoft mengadopsi

jQuery kedalam Visual Studio.

Menggunakan jQuery sangatlah mudah, yang anda perlukan adalah men-download file

jQuery pada http://jquery.com, versi terakhir sampai saat ini adalah versi 1.3.2 dengan nama file

jQuery-1.3.2.min.js. Ukurannya juga cukup kecil untuk sbuah library yang powerfull, hanya

sekitar 60 kilobyte, dan hanya inilah yang diperlukan. File JavaScript ini memiliki fungsi-fungsi

Ajax, DOM (Document Object Model), Event, serta berbagai efek yang siap dipergunakan oleh

web developer.

Untuk mempermudah pemakaian, kita dapat mengubah file jquery-1.3.2.min.js menjadi

jquery.js saja, dan menyisipkannya pada kode program (HTML/PHP/ASP dan seterusnya)

sebagai berikut :

7

Path lib/jQuery.js menunjukkan lokasi file jQuery.js. karena jQuery merupakan library

JavaScript, maka web developer terutama hanya perlu memperdalam pengetahuan

JavaScriptnya, bahkan jQuery juga dapat dimanfaatkan oleh web desainer yang mendalami CSS

(Cascading Style Sheets), tidak ada bahasa pemrograman yang baru, tetapi banyak hal baru yang

dapat diciptakan pada website.

Bagi web developer yang baru akan menggunakan jQuery, akan lebih mudah memahami

prinsip dasarnya dengan terlebih dahulu melihat contoh kasus dengan menggunakan HTML/CSS

yang static, dengan demikian tidak perlu dipusingkan dengan server side scripting seperti PHP

dan seterusnya, juga tidak perlu melakukan operasi database. Setelah memahami bagaimana

jQuery bekerja, maka dengan mudah akan dapat mengimplementasikannya kedalam website

yang dinamis.

Cek di tab Menu Utama website ilmugrafis.com sebelah atas, disitu jika di klik bagian

panah kecil maka akan ada drop down menu, dan juga smooth "back to top" yang ada di sebelah

kanan bawah juga pakai jQuery. tenang saja, Nanti akan saya bagikan cara / trik pembuatannya

di tutorial berikutnya.

Dan sampai saat ini sudah tercatat ada jutaan website yang telah menggunakan jQuery.

Untuk lebih lengkapnya, silahkan lihat di http://docs.jquery.com/Sites_Using_jQuery. Jadi jika

kita yang ngaku-ngaku sebagai seorang developer web namun belum mengenal jQuery maka kita

termasuk orang yang ketinggalan dan rugi, mari kita jelajahi dunia jQuery yang penuh dengan

keindahan.

B.Implementasi jQuery

Kemudahan atau kenapa orang banyak menggunakan framework javascript ini adalah

karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin adalah semacam

fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau

memudahkan dalam pembangunan sebuah website.

Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web

developer dalam membuat atau membangun sebuah website, diantaranya:

8

Drop-Down-Menu

Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada sub menu

lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga mendukung

multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu menu dropdown ini

juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan ketika lama

waktu mouse over atau mouse out.

       Web Sitenya: http://javascript-array.com

Tool-Tips

Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk

menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol atau

elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya informasi yang

disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika mouse didekatkan,

maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah desainnya yang cantik,

seperti fasilitas tombol close, background shadow, dll.

Web Sitenya: http://www.mopstudio.jp

Autocomplete-Search

Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita

memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara otomatis hasil

pencarian akan muncul seusai dengan yang kita masukan secara real time. Plugin ini mirip

seperti pencarian pada website facebook, sehingga sangat menarik untuk dicoba.

Web Sitenya: http://loopj.com

Validasi-Form

Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti pengecekan

e-mail, pengecekan password, username dan input lainnya secara real time (tidak menekan

tombol submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan

melakukan validasi terhadap inputan user.

Web Sitenya: http://www.willjessup.com

9

jQuery-Cycle-Plugin

Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini menggantikan

fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang

ada menjadi sebuah animasi seperti fade in, fade out, slide show, scroll dan banyak lagi efek

yang lainnya.

Web Sitenya: http://malsup.com

Teks-Berjalan

Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan kelihatan

menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah, mirip

fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan

lebih banyak variasi.

Web Sitenya: http://remysharp.com

C.Manfaat jQuery Dalam Perkembangan Aplikasi Website

jQuery banyak digunakan dalam perancangan aplikasi berbasis web terutama untuk

mempercantik tampilan dan juga membuat website menjadi lebih atraktif. Berikut akan

dijelaskan beberapa kegunaan dari jQuery :

1. Mengakses bagian halaman website dengan mudah

Javascript memberikan cara pengaksesan bagian tertentu dari halaman web dengan

menggunakan aturan Document Objekct Model (DOM) dan pengaksesan harus secara spesifik

menyesuaikan struktur aturan HTML. Dengan adanya framework ini pengaksesan dokumen

HTML menjadi lebih mudah dan tidak terlalu bergantung pada aturan struktur HTML.

2. Merespon interaksi user dalam halaman

Dengan adanya jQuery tampilan web tidak hanya menarik namun juga lebih atraktif. Interaksi

dengan user akan semakin meningkat. Sebagai contoh bila di javacript sudah ada event handling

seperti onChange atau onClick untuk menangani event saat terjadi perubahan atau click pada

objek-objek yang terbatas. Maka di jQuery jenis event handling yang diberikan lebih banyak

10

daripada yang diberikan oleh javascript dengan tambahan penanganan event handling menjadi

semakin mudah.

3. Menambahkan animasi ke halaman

Beberapa website sebenarnya juga sudah menggunakan animasi sebelum adanya jQuery, yaitu

dengan menggunakan flash, gambar bergerak (.gif) ataupun dengan video. Namun di sini jQuery

menawarkan fitur-fitur yang tidak kalah menarik dan yang menjadi kelebihan adalah animasi ini

akan mengurangi bandwidth atau bisa dikatakan animasi yang diberikan oleh jQuery ringan

untuk diakses. Contoh animasi yang bisa dibuat dengan jQuery adalah fading jika terdapat suatu

bagian dari halaman ditambahkan atau dihilangkan, dan juga image slider untuk membuat efek

foto yang bergerak.

4. Mengubah isi dari halaman

Jaman dulu (baca:sebelum JQuery lahir) 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.

5. Mengambil informasi di server tanpa harus merefresh halaman web

Konsep ini sebenarnya sudah ada di teknologi web berbasis AJAX. Namun pengimplementasian

AJAX ternyata sulit, dan jQuery memiliki banyak library khusus yang mempermudahnya sesuai

dengan semboyannya yaitu “Write less, do more”. Contoh dari penerapan pengambilan informasi

tanpa merefresh seluruh halaman adalah seperti saat kita menuliskan comment di facebook, atau

saat kita update status di facebook.

6. Mengubah 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

11

solusi untuk mengatasi hal tersebut. Dengan JQuery, “kesenjangan” yang terjadi antara browser

dalam urusan CSS akan tertutup dengan baik. 

7. Menyederhanakan penulisan Javascript biasa

Dengan menggunakna jQuery penulisan code Javascript yang terlalu banyak dapat dihindari.

Download JQuery, situs resmi JQuery dapat diakses di http://jquery.com/. Dan library JQuery

dapat didownload di alamat http://docs.jquery.com/Downloading_jQuery. Tersedia library

jQuery dalam 2 (dua) jenis yaitu minified dan uncompressed. Minified jika kita ingin

menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jika kita

berkeinginan turut serta mengembangkan code jQuery.

D. Contoh Sederhana JQuery

Penjelasan Program

Pertama, kita harus menyertakan (include) file library JQuery. Pastikan letak dari file library

sudah benar.

Perintah-perintah JQuery.

Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka

jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya

diletakkan di tag .

Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show ( $

(‘a.show’) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama

class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”. Paragraf yang akan

ditampilkan adalah paragraf baris ke-24 sampai 27.

Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama

class=jquery.

Isi dari halaman. Perhatikan nama class dari masing-masing object.

12

jQuery mempunyai lisensi dibawah GNU artinya jQuery merupakan aplikasi yang Open Source

dan bebas di publikasikan oleh siapapun. Ukurannya juga cukup kecil yaitu sebesar 56 KB

(compressed) sehingga menggunakan jQuery menjadi jauh lebih cepat dan mudah daripada

menggunakan framework yang lain atau menggunakan Javascript Konvensional.

Bagaimana Cara Membuatnya ?

Pertama anda harus menyertakan framework jQuery di file HTML anda silahkan download

framework jQuery di sini jQuery Latest.

Sementara anda menunggu file di download, Saya terangkan salah satu fungsi di jQuery untuk

mempermudah penggunaan ajax adalah fungsi load(), fungsi load sendiri memiliki tiga

parameter yaitu load(url, params, callback).

url (string), merupakan URL dari file html yang akan di load

params (object), merupakan pilihan optional yang digunakan untuk mengirim Data ke server

callback (function), merupakan pilihan optional tentang Fungsi yang akan dijalankan ketika data

berhasil di load

Untuk mengimplementasikan fungsi load tersebut, langsung saja praktek dan buat tag HTML

seperti dibawah:

<html>

<head>

<title>Fungsi Memuat JQuery</title>

</head>

<body>

<div>

<p><a href="fileyangdipanggil.php" class="link"> Klik Di sini </a

<p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>

13

</div>

<div id="HasilJQ"></div>

</body>

</html>

Apabila anda sudah mendownload framework sekarang mari kita hubungkan file jQuery dengan

file HTML.

<html>

<head>

<title>Fungsi Memuat JQuery</title>

<script type="text/javascript" src="NamaFileJquery.js">

</script>

<script type="text/javascript">

$(document).ready(function() {

$("a.link").click(function() {

var url = $(this).attr("href");

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

$('#HasilJQ').load(url, function (){

$('#loadingimg').fadeOut();

});

return false;

});

14

});

</script>

</head>

<body>

<div>

<p><a href="fileyangdipanggil.php" class="link"> Klik Disini </a

<p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>

</div>

<div id="HasilJQ"></div>

</body>

</html>

Cuku sript itu yang digunakan untuk memanggil halaman tanpa merefresh content, sangat simple

berkat jQuery. dibawah ini akan saya bahas satu persatu bagaimana cara kerja fungsi diatas

sebelum memulai membuat fungsi dalam jQuery maka kita harus terlebih dahulu membuat code

sebagai berikut :

$(document).ready(function() {

//tuliskan fungsi disini

$("a.link").click(function() {

var url = $(this).attr("href");

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

$('#HasilJQ').load(url, function (){

$('#loadingimg').fadeOut();

15

});

return false;

});

});

$(document).ready(function() berarti kita akan memulai script jQuery dan }); berarti mengakhiri

script jQuery, jQuery kemudian akan membaca element html dan attribut yang diberikan,

selanjutnya jQuery akan mengeksekusi setiap element dan atrribut bila kita memasukan element

dan atribut tersebut kedalam fungsi yang kita buat

("a.link").click(function(); berarti kita memerintahkan jQuery untuk mengeksekusi element a

dengan nama atribut class "link" (var url = $(this).attr("href"); berarti kita mendefinisikan

variable url dimana nilai variable didapatkan dari attribut a.link yaitu href ( )

$("#loadingimg").fadeIn(); berarti kita memerintahkan jQuery untuk mengeksekusi element

dengan nama attribut id "loadingimg" .fadeIn(); berarti memunculkan sedangkan .fadeOut();

sebaliknya.

('#HasilJQ').load(url); berarti kita memerintahkan jQuery untuk mengeksekusi element dengan

nama attribut id "HasilJQ" dimana div dengan id tersebut akan dimanipulasi untuk menampilkan

data URL yang telah kita definisikan variabelnya terlebih dahulu return false; akhiri setiap fungsi

dengan return false hal ini untuk mencegah data di refresh oleh browser pada saat element di

eksekusi.

E . Cara Menggunakan JQuery

Seperti pada tutorial sebelumnya yaitu Fungsi dari jQuery maka pada tutorial kali ini kita akan

membahasBagaimana cara menggunakan jQuery?  langkah – langkahnya adalah :

1. Ok pertama - tama adalah kita harus mendownload terlebih dahulu jQuery Library (inti dari

16

jQuery). Dimana download jQuery Library? mau tau aja atau mau tau banget? hehehe...

Downloadnya di www.jquery.com , silahkan klik Download jQuery. Saat penulisan tutorial ini

library jQuery telah sampai versi 1.9.1 

2. Pada halaman selanjutnya pilih versi jquery, ada versi Production dan versi Developer. Untuk

saat ini pilih versi Production jQuery karena versi Developer ditujukan kepada para master

pemrograman dan pengembang jquery.

Catatan :  

17

jQuery selalu merilis dua versi Library yaitu versi Production dan Development. Perbedaannya

adalah versi Production ukuran filenya lebih kecil karena telah 'dimampatkan' atau istilahnya di

Compress. Diperuntukkan bagi pengguna awam yang ingin langsung menggunakan jQuery.

Sedangkan versi Development isi filenya mudah dibaca karena belum di Compress dan ditujukan

unruk para Developer yang tertarik mempelajari - memanipulasi - bahkan mengembangkan

fungsi - fungsi yang dimiliki oleh jQuery. 

3. Akan muncul code dari library JQuery

gambar : jquery code library 

Klik CTRL + S di keyboard untuk menyimpan kode tersebut ke direktori website anda

18

gambar : save jquery lib pada direktori website 

4. Ok sekarang adalah kode untuk memanggil jQuery library supaya dapat terLOAD di website

yang anda buat. Buka dreamweaver dan masukkan kodenya. 

Scriptnya yang saya cetak tebal merah :

19

gambar : script pemanggil jQuery

5. Ok sekarang cara Penggunaannya, inti dari jQuery adalah :

A) Panggil / Load library jQuery (stabilo merah) 

B) buat script jquery di bagian head untuk mengontrol object berdasarkan elementnya (stabilo

biru) 

C) Buat Object beserta elemennya berupa id dan class di bagian body (stabilo abu - abu)

sebagai contoh saya akan membuat control sembunyikan dan tampilkan gambar :

20

gambar : inti dari jQuery 

6. ok sekarang kita lihat hasilnya KLIK DISINI

gambar : screenshot hasil 

21

F. Fitur-fitur jQuery

JQuery adalah sebuah framework/library JavaScript yang dapat membantu kita

mempermudah dan mempercepat pengolahan DOM pada halaman web.

Dengan jQuery kita dapat membuat web lebih menarik dan interaktif dengan mudah.

jQuery sudah mengautomasi pekerjaan-pekerjaan yang umum dan mempersimple code yang

kompleks. Library ini sangat kecil dan mempunyai banyak pluggin yang dapat mempermudah

kita.

Adapun fitur-fitur yang ditawarkan oleh jQuery adalah :

Mempermudah akses dan manipulasi ke bagian page tertentu. jQuery menawarkan

sebuah selector yang robust dan efesien untuk mengambil bagian tertentu pada dokumen yang

selanjutnya bisa dimanipulasi.

Mempermudah perubahan tampilan dokumen. jQuery dapat mengubah tampilan CSS

dengan mudah.

Merespon interaksi user dengan webpage. jQuery mempunyai cara yang sangat-sangat

elegan untuk memasukkan sebuah even ke dalam salah satu bagian dari webpage.

Menambah animasi. Kita dapat memberi animasi pada webpage kita dengan jQuery

Mempermudah AJAX.

Baiklah mari kita mulai dengan installasi jQuery. pada tutorial ini akan dibagi menjadi

lima bagian yaitu instalasi, manipulasi, event, animasi dan ajax. pada artikel ini akan di bahas

mengenai instalasi dan manipulasi.

Instalasi jQuery

Pertama-tama download dulu jQuery dari websitenya http://jquery.com/. Ada dua pilihan

download. Production dan development, perbedaannya adalah production digunakan di realsite

sedangkan development untuk masa developmen. Versi production sudah di kompresi sehingga

kode nya sudah tidak bisa dibaca lagi dan ukurannya jauh lebih kecil. Versi developmen berguna

jika kita mau mendebug jQuery. Setelah mendownload maka load-lah jquery melalui tag script

(perhatikan baris ke-6). sesuaikan attribut srcnya dengan path jquery anda.

22

1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery.js"></script>

jQuery Selector

Selector adalah fungsi utama pada jQuery. semua fungsi lainnya di jQuery dapat diakses

melalui selector. Penggunaan paling dasarnya adalah mempassingkan sebuah ekspressi (biasanya

ekspressi css) yang kemudian selanjutnya jQuery akan mencari elemen yang cocok. pada intinya

ini adalah fungsi untuk memilih elemen-elemen pad halaman web.

Fungsi selector 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.

Contoh

mengubah semua div yang mempunyai ini :

1

2

3

4

5

6

7

8

9

(silakan di utak-atik demonya)

<!-- Disini kita mengeload library Jquery --><script type="text/javascript" src="http://code.jquery.com/jquery-1.3.js"></script><script type="text/javascript">// <![CDATA[

$(document).ready(function(){

// memangil semua div yang berisi p lalu ubah bordernya

$("div > p").css("border", "1px solid gray");

});

// ]]></script>

Ini adalah paragraf pertama

23

Ini adalah paragraf kedua didalam div

Ini adalah paragraf Ketiga

Contoh

2. Memasukkan tag html kedalam elemen

Demo : http://jsbin.com/ijopu

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!-- Disini kita mengeload library Jquery --><script type="text/javascript" src="http://code.jquery.com/jquery-1.3.js"></script><script type="text/javascript">// <![CDATA[

$(document).ready(function(){

//memasukkan html kedalam elemen

$("

<div>

Saya adalah Paragraf Tabmahan

</div>

").appendTo("body")

// memangil semua div yang berisi p lalu ubah bordernya

$("div > p").css("border", "1px solid gray");

});

// ]]></script>

Ini adalah paragraf pertama

Ini adalah paragraf kedua didalam div

Ini adalah paragraf Ketiga

Uji Coba

Dari contoh diatas..coba kita buka halaman, lalu masukkan tambahkan kode ini satu persatu. lihat effect yang terjadi lalu pelajari fokuslah pada parameter yang ada pada fungsi $(PARAMETER) bukan fungsi

24

diibelakangnya karena itu akan di jelaskan setelah ini.

1

2

3

4

5

6

7

//contoh selector menggunakan nama tag

$("div").css("border","3px solid red");

$("p").css("border","3px solid blue");

//contoh selector menggunakan nama object/element

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

//contoh selector menggunakan nama Kelas object

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

*untuk dapat melihat perubahan script di coba satu-satu jangan langsung semua

jQuery Manipulation

Jquery Manipulation maksudnya penggunaan jquery untuk memanipulasi struktur dokumen. ada 7 kategori manipulasi yang disupport oleh jquery yaitu

Perubahan Content. Kita dapat merubah kontent dari sebuah object dengan dua fungsi yaitu html dan text. bedanya jika menggunakan text maka semua tag-tag html akan dituliskan sebagai mana mestinya. contoh (demo http://jsbin.com/ifoho) :

1

2

3

4

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

var htmlStr = $(this).html();

$(this).text(htmlStr);

});

Insert kedalam object. Setelah kita memilih sebuah object, kita dapat memasukkan tab html atau object kedalamnya. ada dua jenis insert yaitu append dan prepend. append menambahkan objek baru setelah value dari object tersebut, sedangkan prepend didepannya. contoh

1 $("p").append("<strong>Hello</strong>");

25

2

3

4

$("span").appendTo("#conto"); // Objek dengan ID conto akan dimasukkan kedalam span

$("p").prepend("<b>Hello </b>");

$("span").prependTo("#conto");

Insert dikeluar object. Object yang akan ada tambahkan akan ada diluar masing-masing tag yang dipilih. contoh

1

2

3

4

$("p").before("<strong>Hello</strong>");

$("p").after("<strong>Hello</strong>");

$("span").insertAfter("#conto");

$("span").beforeAfter("#conto");

Insert kesekitar object.

Mereplace object. Kita dapat mengganti isi dari object dengan syntax ini. contoh

1

2

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

$(this).replaceWith("

” + $(this).text() + “

1

2

");

});

Menghapus object. kita dapat menhapus object tertentu. contoh

1

2

3

4

5

6

7

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

$("p").empty();

});

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

$("p").remove();

});

26

Mengopi object. Mengopi object ke tempat lain . contoh

1 $("b").clone().prependTo("p");

http://koder.web.id/belajar-jquery-mudah/

Apa yang dapat dilakukan dengan jQuery??

Mungkin anda sudah sering mendengar nama jquery disebut sebut dalam teknologi web

sekarang. Begitu tenarnya nama tersebut sehingga hampir semua pengembang web

menggunakannya. Berikut ini hal-hal yang dapat dilakukan jquery dan beberapa contoh web

dengan jquery.

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.

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 mudah

(bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak

terlalu bergantung pada struktur HTML.

Jaman dulu (baca:sebelum JQuery lahir) 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.

Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang

memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan

27

dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman

yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-

handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event

handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery

melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.

Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya.

Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam

berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya.

Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri

menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah

bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika

terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.

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.

Semboyan JQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan

dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi

daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.

Sekarang sudah tau kan mengapa jQuery begitu memasyarakat dikalangan pengembang web.

Jika ingin melihat contoh-contoh website yang dibuat dengan jquery bisa dilihat berikut ini :

28

www.vitalitycity.com

www.sacredjune.com

www.markboultondesign.com

29

www.duchyoriginals.com

www.imagemechanics.com

G. Cara Penggunaan Jquery Mobile

Untuk mengenal jquery, silahkan langsung menuju kediamannya JqueryMobile

Kalo udah jelas tentang asal-usulnya, langsung saja kita mulai dengan cara menyisipkan

JqueryMobile ke halaman html.

Yang Pertama, kita gunakan metode self hosted (bisa digunakan secara offline)

cara ini biasanya digunakan oleh web developers, designer, atau juga newbie yg sedang belajar.

Cara ini tidak perlu koneksi internet, dengan syarat punya web server seperti xmpp dll.

30

Caranya:

1. Download source filenya Disini

2. Pilih versi sesuai kebutuhan, *download yg berekstensi .zip*

3. Extract semua file di folder web server kita, misal (/jqm/*file*)

4. Gunakan kode dibawah ini pada halaman html:

//ini Engine JqueryMobile

<script src="jqm/jquery.mobile-1.3.1.js"></script>

<script src="jqm/jquery.mobile-1.3.1.min.js"></script>

//Ini CSS Default JqueryMobile v1.3.1

<link rel="stylesheet" href="jqm/jquery.mobile-1.3.1.min.css" />

Sisipkan diantara <head>**letakan disini**</head>

Cara Kedua, kita gunakan metode import menggunakan jasa CDN.

Ini lebih praktis, namun harus online.

Caranya:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

http://share.mobcyber.net/cara-penggunaan-jquery-mobile.html

Sisipkan diantara <head>**letakan disini**</head>

31

H. Syntax dalam JQUERY

Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi

terhadap elemen yang dipilih.

Sintaks :

$(selector).action()

• Tanda dollar, untuk mendefinisikan jQuery

• (selector), untuk menunjukkan elemen yang dipilih atau dituju

• action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.

Contoh :

$(this).hide()

– menyembunyikan elemen saat ini

$("p").hide()

– menyembunyikan semua paragraf atau konten dari tag <p>

$(".test").hide()

– menyembunyikan elemen yang mempunya class=”test”

$("#test").show()

– menampilkan elemen yang mempunyai id=”test”

Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca atau

memanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai

menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan

kode ready event untuk dokumen.

$(document).ready(function(){

32

//kode anda di sini

});

Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah di load semuanya.

Atau dengan kode javascript biasanya seperti ini :

window.onload = function(){ //kode anda di sini }

Sekarang mari kita lihat pada contoh

$(".tombol1").click(Kode $(“.tombol1″) adalah jQuery selektor. Di mana kita memilih elemen

yang mempunyai class=”tombol1” untuk kita lakukan sesuatu. $ sendiri adalah alias untuk

jQuery class. Oleh karena $() untuk membuat objek jQuery. Kemudian kita tambahkan fungsi

click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam

hal ini adalah elemen yang mempunya class=’tombol1’). Dan kemudian melaksanakan fungsi

yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan

class=”tombol1” diklik maka lakukan fungsi $(“p”).hide(1000);

function(){

$("p").hide(1000);

});

33

BAB III

PENUTUP

Kesimpulan

Event pada jQuery berfungsi untuk memperindah halaman web pada event-event tertentu

dan melakukan interaksi antara user dengan halaman web. Dalam makalah ini, event yang kami

bahas yaitu tentang pointer yang berfungsi apabila object tersebut mendapat event tertentu,

semisal click(), hover(), dan lain-lainnya.

34

DAFTAR PUSTAKA

http://www.ilmugrafis.com/web-jquery.php?page=tentang-fungsi-jquery-dan-sejarahnya

http://ikutseo.blogspot.com/2010/05/sejarah-jquery.html

http://www.jqueryplugins.com

http://mrbawell.blogspot.com/2010/11/implementasi-jquery.html

http://www.satriamultimedia.com/artikel_belajar_dan_mengenal_jquery.html

http://www.w3function.com/blog/index.php?p=det&idn=32 diakses hari Sabtu, 2 Maret 2013,

06:41 WIB.

http://nickizoner.blogspot.com/2013/03/pengantar-dan-penggunaan-jquery-pada.html

http://www.ilmugrafis.com/web-jquery.php?page=cara-menggunakan-jquery

http://www.zainalhakim.web.id/posting/apa-yang-dapat-dilakukan-jquery.html

35