Techno Hunter: 2013

MAKALAH TEKNOLOGI INFORMASI DAN KOMUNIKASI

“JQUERY UNTUK PEGEMBANGAN WEB”

Di susun oleh :

Nama : Arif Maulana Malik

NIM : 1102412084

Dosen Pengampu : Bpk. Septia Lutfi

KURIKULUM DAN TEKNOLOGI PENDIDIKAN

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

2013

KATA PENGANTAR

Puji dan syukur saya panjatkan kehadirat Tuhan Yang Maha Esa yang telah memberikan rahmat dan karunia-Nya kepada penulis. Sehingga penulis dapat menyelesaikan makalah Mata Kuliah “Teknologi Informasi dan Komunikasi” ini dengan judul “ JQUERY UNTUK PENGEMBANGAN WEB” dengan semaksimal mungkin. Makalah ini saya susun dalam rangka untuk memenuhi tugas mata kuliah yang diberikan oleh bapak Septia Lutfi sebagai dosen Mata Kuliah “Teknologi Informasi dan Komunikasi”.

Walaupun sebenarnya Saya menyadari bahwa dalam menyusun makalah ini masih jauh dari sempurna, untuk itu saya sebagai penulis sangat mengharapkan kritik dan saran yang sifatnya membangun guna sempurnanya makalah ini.

Selain itu tidak lupa penulis mengucapkan terima kasih kepada semua pihak yang telah membantu penulis baik materi maupun dukungannya dalam penulisan makalah ini.

Akhir kata penulis mengucapkan terimakasih semoga makalah ini dapat bermanfaat bagi pembaca umumnya dan bagi penulis khususnya.

Semarang , 12 Desember 2013

Arif Maulana Malik

BAB I

PENDAHULUAN

A. LATAR BELAKANG

Pada saat ini perkembangan zaman sudah semakin maju. Hal ini disebabkan oleh perkembangan teknologi yang selalu mengalami kemajuan pesat. Hal ini pulalah yang menyebabkan masyarakat saling bersaing satu sama lain dalam kemajuan teknologi tersebut. Banyak orang ber-persepsi bila tidak mengikuti perkembangan teknologi maka dianggap sebagai orang jadul atau ketinggalan zaman. Persepsi tersebut tidaklah salah. Karena dengan kemajuan teknologi, masyarakat akan selalu up2date untuk mengetahui kejadian-kejadian yang sedang terjadi dimanapun. Dan salah satu contoh dari kemajuan teknologi yang pesat tersebut adalah munculnya JQuery yang sangat membantu para web developer membangun suatu website.

Sebenarnya apa itu JQuery ? JQuery merupakan framework javascript yang saat ini paling populer di kalangan web developer, fungsinya adalah mempermudah dan mempercepaat proses pembangunan aplikasi web dengan menggunakan code javascript. Dengan jQuery, kita tidak perlu lagi menulis code javascript dengan panjang-panjang untuk membuat sebuah proses yang sederhana. Selain itu dengan jquery kita bisa menggunakan banyak plugins yang tersedia guna mempercantik halaman web kita.

Dan Sampai saat ini sudah tercatat ada jutaan website yang telah menggunakan JQuery. Diantaranya adalah Mozilla, Netflix, Digg, Technorati, bahkan website-website terkemuka didunia seperti Google, microsoft, Intel, Nokia, Oracle, IBM, DELL, BBC, NBC, ESPN, EASport, Twitter, Facebook, Amazon, Time, Youtube, Apple, WordPress,dll.

Jadi seperti apa peran penting JQuery bagi web developer dalam membangun website dan perkembangannya dalam teknologi website akan dibahas dalam makalah ini.

B. RUMUSAN MASALAH

Dari latar belakang yang telah dijelaskan, penulis dapat merumuskan masalah sebagai berikut:

1. Bagaimanakah sejarah jQuery ?

2. Apa yang dimaksud dengan jQuery ?

3. Apakah fungsi-fungsi yang dimiliki jQuery ?

4. Apa keunggulan dan kekurangan jQuery ?

5. Bagaimanakah perbandingan jQuery dengan web programming lain?

6. Bagaimanakah dasar kerja jQuery ?

7. Bagaimanakah teknik mengoptimalkan jQuery ?

C. TUJUAN

1. Untuk mengetahui sejarah jQuery,

2. Untuk mengetahui pengertian jQuery,

3. Untuk memahami fungsi-fungsi yang dimiliki jQuery,

4. Untuk mengetahui keunggulan dan kekurangan jQuery,

5. Untuk mengetahui perbandingan jQuery dengan web programming lain,

6. Untuk mengetahui dasar kerja jQuery dalam membangun suatu website,

7. Untuk memahami teknik pengoptimalan jQuery.

D. KEGUNAAN PENULISAN

1. Untuk mengenal lebih dekat dengan jQuery dalam perkembangan teknologi website ,

2. Untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi

E. METODOLOGI PENGUMPULAN DATA

Dalam penulisan makalah ini, metode pengumpulan data yang penulis gunakan adalah metode kepustakaan. Yaitu dimana penulis mencari referensi melalui internet yang berkaitan dengan pokok bahasan yang penulis kembangkan.

BAB II

ISI

A. SEJARAH 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 Pincuran.com tentunya dan lain-lain.

Jquery Pertama kali dikembangkan oleh Jhon Resig pertama kali pada tahun 2005, saat itu dia terinspirasi dari kode Behavior, ketika itu Jhon merasa kode kode behavior tidak elegan dan bahkan sangat jelek. maka dia mulai memikirkan cara membuat library yang handal dan ringan untuk javascript , maka lahirlah JQUERY pada 14 januari 2006, direlease lah versi pertama dari Jquery dan Sekarang JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin. Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi. JQuery menjadi Library Javascript yang paling popular Sekarang.

Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau website aplikasi menjadi keren.

Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.

B. APA ITU JQUERY?

JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client. Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau website aplikasi menjadi Powerfull.

JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript..

Siapapun yang memiliki sebuah halaman web secara manual kode mungkin akrab dengan HTML dan Javascript. Pengembang maju bahkan mungkin memiliki beberapa pengetahuan tentang ASP dan XML. Bahasa jQuery, bagaimanapun, mungkin asing bagi beberapa pengembang yang membangun halaman Web. Jadi, bahasa jQuery mungkin tidak dikenal secara luas, walau memang saat ini perkembangannya sudah cukup pesat.

JQuery adalah library JavaScript OpenSource yang menekankan pada interaksi antara JavaScript dan HTML. File jQuery adalah library Javascript dasarnya. Ini perubahan cara pengembang menulis Javascript karena menangani banyak fitur utama yang digunakan oleh pengembang Javascript. Coding untuk hal-hal seperti event handler dan animasi menjadi jauh lebih mudah melalui penggunaan jQuery karena memerlukan sedikit coding.

Perpustakaan JQuery dapat dimuat dengan cepat dan diimplementasikan langsung untuk script website yang dapat digunakan di waktu lain. Hal ini menjadi batu loncatan yang besar di bidang efisiensi pemrograman karena cukup mudah dipelajari. Sebagian besar proses belajar didasarkan pada tutorial yang menunjukkan bagaimana memanipulasi pengembangan HMTL, CSS, dan kode Ajax.

Ketika JQuery adalah menggunakan referensi skrip file jquery.js. Perpustakaan ini adalah open source, yang berarti bahwa hal itu dapat dimodifikasi oleh pengembang untuk memenuhi kebutuhan spesifik untuk situs Web tertentu. File ini berisi semua model objek dokumen (DOM), dan ini menyederhanakan fungsi untuk cross-browser dan lintas-bahasa kompatibilitas.

Waktu pengembangan yang lebih cepat juga merupakan salah satu hal yang dikaitkan dengan pengembangan halaman web jQuery. Ini adalah sisi klien Ajax kerangka yang mendukung semua teknologi sisi server pengembangan aplikasi web. Hal ini memungkinkan pengembang untuk menulis kode kurang untuk melakukan fungsi yang sama lebih cepat. Hal ini bahkan dapat lebih baik ketika digunakan untuk mengedit kode yang sudah ada.

Plugin untuk jQuery telah menjadi cukup menjadi di antara para pengembang karena banyak dari mereka menawarkan kesempatan untuk menambahkan dimensi yang berbeda untuk halaman web. Setelah sumber file jQuery telah dimuat, salah satu perintah yang paling berguna adalah fungsi dokumen yang register acara siap. Hal ini pada titik ini bahwa pengguna dapat mulai menambahkan acara.

Bahasa adalah salah satu hal yang dasar karena banyak peristiwa yang digunakan diberi nama dengan cara deskriptif yang bertepatan dengan perintah. Pengembang yang ingin menggunakan fungsi keluar memudar, misalnya, dapat menggunakan fadeOut jQuery () perintah untuk memulai dengan ini. Sama bekerja untuk menyembunyikan dan perintah menghidupkan yang digunakan oleh pengembang jQuery.

Ada banyak fungsi lainnya banyak digunakan untuk Cascading style sheet juga. Sintaks untuk CSS adalah sebagai berikut: css (). Ini memberi Anda berbagai pilihan karena memiliki tiga opsi sintaks yang berbeda yang dapat digunakan untuk melakukan fungsi yang berbeda. Ada css (nama) fungsi yang mengembalikan nilai properti CSS, ada juga css (nama, nilai) fungsi yang menetapkan properti dan nilai. Terakhir, ada CSS ({properti}) yang menetapkan beberapa properti dan nilai-nilai. Fungsi-fungsi ini ideal karena mereka mengijinkan pengguna untuk menambahkan tingkat tertentu dari kode untuk proyek-proyek mereka.

Ini adalah salah satu alat scripting terpanas untuk pengembangan web yang mengikuti pola dari komunitas kode open source. JQuery dipecah dalam istilah yang sangat sederhana dengan fungsi kata kunci sebagai identifier objek yang namanya $. Pengembang yang mampu mengikuti dan mengedit array tutorial seharusnya tidak memiliki masalah menggunakan kode berorientasi obyek. Ini jelas membuat pengembangan lebih mudah bagi mereka yang mengetahui JavaScript.

JQuery merupakan library open source dengan lisensi GNU General Public Licensedan 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.

Apa bedanya dengan situs-situs yang tidak menggunakan JQuery? banyak bedanya, misalnya browser seakan tidak merefresh sebuah page ketika kita men-submit sebuah data kedalam server mereka. Dan lebih hebatnya lagi JQuery mempunyai animasi tanpa menggunakan flash(.swf), jadi lebih cepeat diload didalam browser dan tanpa harus install plugins.

C. FUNGSI-FUNGSI JQUERY

Alasan banyak web developer menggunakan JQuery adalah karena fungsinya yang kompleks dalam pengembangan suatu laman website. Fungsi-fungsi JQUERY tersebut yaitu:

1. Mempermudah akses dan manipulasi elemen tertentu pada dokumen.

Biasanya diperlukan baris program yang cukup panjang untuk mengakses suatu elemen dokumen. Namun, jQuery dapat melakukannya hanya dalam beberapa baris program saja. Karena jQuery menpunyai Selector yang sangat efisien untuk mengakses suatu elemen tertentu pada dokumen yang selanjutnya bisa dimanipulasi sesuai dengan keinginan kita.

2. Mempermudah modifikasi/perubahan tampilan halaman web.

Biasanya untuk memodifikasi tampilan halaman web digunakan CSS. Permasalahannya, CSS sangat dipengaruhi oleh web browser yang digunakan sehingga Sering terjadi halaman web yang dibuat sudah rapi dan bagus tampilannyadi browser Mozilla, namun ketika ditampilkan di Opera menjadi berantakan. Namun, jQuery dapat menyesuaikan style CSS pada semua browser, sehingga permasalahann tersebut dapat dihindari.

3. Mempersingkat Ajax (Asynchronous Javascript and XML)

Kemampuan favorit dari Ajax adalah mampu mengambil informasi dari server tanpa melakukan refresh pada halaman web, artinya halaman web terlihat berganti secara otomatis. Apabila kita menuliskan kode Ajax secara manual, biasanya diperlukan baris yang cukup panjang, namun jQuery dapat mempersingkatnya menggunakan Ajax cell, perbandingan 25 baris kode Ajax dapat disingkat menjadi 5 baris kode aja kita menggunakan jQuery.

4. Memiliki API (Application Programming Interface)

Dengan API, jQuery dapat memanipulasi content pada suatu halaman web, seperti pengubahan teks, manipulasi gambar (resize,rotate,crop), penyusunan daftar (list), pengurutan list, paging, dan lain-lain.

5. Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.

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

6. Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan 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.

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

8. 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.

D. KEUNGGULAN DAN KEKURANGAN JQUERY

Walau memiliki banyak kelebihan, namun JQuery juga memiliki kelemahan. Namun kelemahan ini biasanya tertutupi dengan keahlian para pegiat yang aktif di dunia web desain karena mampu menyiasati dengan memaksimalkan JQuery dan meminimalisir kekurangannya. Berikut akan dibahas lebih lanjut mengenai kelebihan dan kekurangan yang dimiliki JQuery.

A. Keunggulan

1. Write Less, Do More.

Dengan menggunakan jQuery tentu kita telah menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang ada. Juga mempercepat coding javascript dalam sebuah website. Dibandingkan bila kita harus mulai sebuah script javascript satu per satu dari nol. Dengan menggunakan jQuery berarti kita telah meringkasnya dan membiarkan jQuery mengolahnya.

2. Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya.

3. Halaman website/blog yang dibangun dengan jQuery akan lebih interaktif dan menarik, membuat para pengunjung lebih terkesan.

4. Kompatibel/cocok dengan semua browser yang popular, seperti Mozila, Internet Explorer, Safari, Chrome, Opera.

5. Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan pada jQuery.

6. Dokumentasi, tutorial dan contoh-contohnya lengkap, silahkan kunjungi website resminya di http://jquery/com

7. Filenya hanya satu dan ukurannya pun kecil, hanya sekitar 20 KB, sehingga cepat diakses

8. Open source/free (gratis) dengan lisensi dari GNU General Public Lisence dan MIT License.

B. Kekurangan :

1. Walaupun klaim bahwa loading menjadi semakin ringan, web/blog yang tidak menggunakan jQuery alias HTML murni tetap lebih ringan untuk diload terutama dimata CPU dan RAM.

2. Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jQuery. Pada level tertentu request yang sangat banyak melebihi standar akan membebani server tersebut.

E. PERBANDINGAN JQUERY DENGAN PESAING YANG LAIN

Walau JQuery saat ini lebih banyak digunakan oleh web developer, namun masih ada beberapa web developer yang menggunakan web programming lain seperti MySql dan lain sebagainya. Berikut sedikit ulasan mengenai perkembangan web programming selain JQuery, sekaligus sebagai perbandingannya.

1. PHP

PHP adalah akronim untuk Hypertext Preprocessor merupakan script bahasa komputer yang didesain untuk menghasilkan halaman web dinamis. Script tersebut dapat digunakan dalam interface command line tapi juga bisa digunakan pada applikasi grafis standalone.

PHP pertama kali di temukan oleh Rasmus Lerdorf pada tahun 1995 kemudian standart pengembangan PHP dilakukan oleh PHP Group. Lisensi yang digunakan pada PHP berkiblat pada Free Software nya Free Software Foundation.
PHP adalah script bahasa pemprograman yang paling banyak digunakan untuk pengembangan applikasi berbasis web karena script PHP dapat di masukan ke dalam HTML. Pada sebuah web server, kode PHP dapat menjadi sebuah masukan (input) untuk menghasilkan keluaran (output) berupa halaman web. Hal ini dapat dilakukan pada sebagian besar web server dan juga pada sebagian besar sistem operasi yang memiliki platform berbeda. PHP telah di install di lebih dari 20 millar websites dan lebih dari 1 milyar server. Silakan kunjungi web Rasmus Lerdorf’s penemu awal PHP.

2. MySQL

MySQL adalah sistem manajemen database SQL yang Open Source dan paling populer saat ini yang multithreaded, multi-user SQL database managemen sistem (DBMS). Ulf Micheal Widenius adalah penemu awal versi pertama MySQL kemudian pengembangan selanjutnya dilakukan oleh perusahaan MySQL AB. MySQL AB adalah sebuah perusahaan komersial yang didirikan oleh para pengembang MySQL. MySQL sudah digunakan lebih dari 11 millar instalasi saat ini.

Seorang administrator database MySQL biasanya menggunakan tools command line seperti perintah mysql atau msqladmin. Juga dapat mendownload tools GUI administration untuk MySQL seperti MySQL Administrator atau MySQL Query Browser. Kedua paket tersebut biasanya disebut dengan MySQL GUI Tools. Kita juga mengenal phpMyAdmin yakni software yang free merupakan interface berbasis web untuk inplementasi MySQL pada PHP.

3. AJAX

Ajax adalah singkatan dari asynchronous Javascript and XML juga merupakan kelompok yang terkait dengan teknik pengembangan web interaktif. Ajax bukanlah bahasa programming, Ajax adalah teknik lintas platform yang dapat digunakan pada sistem operasi yang berbeda, arsitektur komputer yang berbda dan sampai pada web browser yang berbeda berdasarkan pada standart opensource seperti JavaScript dan DOM. Jesse James Garrett adalah orang yang memberikan nama Ajax pada tulisannya yang berjudul Ajax : A New Approach to Web Applications yang dipublikasikan pada 18 Oktober 2005.

4. JQuery

jQuery adalah sebuah library pada JavaScript yang mengatur interaksi antara JavaScript dan HTML. Di release pertama kali pada Januari 2006 di BarCamp Oleh John Resig. jQuery memiliki dua lisensi yakni dibawah Lisensi MIT dan Lisensi GNU Public License. jQuery adalah free Software dan Open Software. jQuery terdiri dari file JavaScript didalamnya terdapat DOM, Event, Effect dan Fungsi Ajax. jQuery terdiri dari fitur-fitur berikut :

1. DOM element selection

2. DOM transversal and modification (termasuk support pada CSS 1-3 dan basic XPath)

3. Events

4. CSS manipulasi

5. Effek dan animasi

6. Ajax

7. Extensibility

8. Utiliti seperti browser

9. JavaScript Plugins

5. Zend Framework

Zend Framework adalah open source, aplikasi web objek oriented yang di implementasikan pada PHP 5 dan berlisensi dari New BSD License. Zend Framework yang sering disebut dengan ZF dikembangkan dengan tujuan mempermudah pengembangan web.

ZF mulai dikenal ditahun 2005 bersamaan juga dengan munculnya beberapa framework baru seperti Ruby on Rails dan Spring Framework yang mulai populer dikalangan pengembang web. ZF dipublikasikan pertama kali pada Zend Conference.

Zend Framework memberikan komponen yang dibutuhkan dalam pengembangan web termasuk didalamnya adalah authentikasi dan authorisasi melalui access control list (ACL), konfigurasi applikasi, data caching, filtering/validasi data user, internationalization, fungsi interface ke AJAX, e-mail, Lucene format searc index dan queri, dan Google Data API.

6. Phyton

Python ditemukan pertama kali oleh Guido von Rossum pada tahun 1990 dimana nama tersebut terinspirasi dari pertunjukan sirkus. Selanjutnya Phyton dikembangkan secara sukarela oleh para volentir dan dapat diperoleh secara gratis dari Python Software Foundation. Versi terakhir Python yang di release pada september 2006 adalah versi 2.5.

Phyton memiliki banyak varian. Phyton yang terdapat pada Python Software Foundation ditulis dengan bahasa C. Belakangan ini python juga di tulis berbasis java yang disebut dengan Jython. Kemudian IronPython adalah Phyton dalam versi C# yang terdapat pada applikasi .Net dan mono platform.

F. DASAR KERJA JQUERY

Sebelum kita mencoba menggunakan JQuery, tentu saja kita harus mempunyai master softwarenya terlebih dahulu yang kemudian kita install. Kita dapat meng-unduh master software JQuery di situs resminya. 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.

Secara garis besar script jQuery seperti berikut ini :

01	<!DOCTYPE html>
02	<html lang="en">

03	<head>
04	<meta charset="utf-8">

05	<title>jQuery demo</title>
06	</head>

07	<body>
08	<a href="http://jquery.com/">jQuery</a>

09	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
10		<script>

11	$(document).ready(function(){
12	$("a").click(function(event){

13	alert("Welcome to jQuery, ini adalah fungsi alert yang dijalankan ketika anda mengklik link jquery diatas <img src="http://kakaeriel.com/notes/wp-includes/images/smilies/1.gif" alt=":)" class="wp-smiley"> ");
14	});

15	});
16	</script>

17	</body>
18	</html>

Penjelasan singkat :

Baris 1-7 : ini merupakan tag pembuka script

Baris 8 : kita membuat sebuah link menggunakan tag html biasa

Baris 9 : kita memanggil library jQuery yang terdapat di CDN google. Kalau anda tidak memiliki akses internet saat belajar, anda bisa download terlebih dahulu jquery di situsnya, lalu mengganti seperti berikut :

1	<script src="jquery.min.js"></script>

Baris 11 : Membuat sebuah function, dimana function tersebut baru bisa di gunakan setelahdocument yang anda buka telah siap.

Baris 12-14 :$(“a”) mengartikan bahwa semua tag html <a> jika di .click() akan menjalankan semua perintah yang ada di dalam function setelah click().

Berikut sedikit tips dalam memaksimalkan penggunaan jQuery bagi para pengembang:

1. Gunakan versi terbaru dari jQuery.

Setiap versi baru jQuery memberikan optimasi dan perbaikan bug, sehingga cukup wajib bagi developer untuk selalu menggunakan versi terbaru. Anda pun bisa langsung mengambil jQuery secara langsung melalui server hosting CDN yang disediakan oleh Google.

2. Pastikan selector sesederhana mungkin.

Salah satu keunggulan jQuery adalah selector untuk elemen-elemen DOM html pada halaman. Anda bisa menggunakan berbagai variasi dengan style mirip selector CSS. Sayangnya bila pengunjung web Anda menggunakan beberapa versi browser tertentu, terdapat perbedaan signifikan tentang kecepatan aksesnya.

$('li[data-selected="true"] a'); // Menarik, tapi lambat

$('li.selected a'); // Lebih baik

$('#elem'); // Paling baik

Seperti yang dapat dilihat di atas, seleksi dengan menggunakan id adalah yang tercepat. Bila Anda ingin melakukan seleksi class, lebih baik diawali dengan tag terlebih dahulu, seperti $(“li.menu”). Cara lain untuk mengoptimasinya adalah dengan memasukkannya ke dalam sebuah variable, sehingga browser akan melakukan caching.

3. jQuery Objects as Arrays.

Hasil nilai kembali dari selector jQuery adalah jQuery object. Namun Anda juga bisa menggunakannya sebagai array javascript biasa. Bila Anda lebih mengutamakan performa, maka menggunakan “for” atau “while” akan lebih baik daripada menggunakan fungsi $.each().

// Selecting seluruh tombol navigasi:

var buttons = $('#navigation a.button');

// Loop keseluruhan tombol:

for(var i=0;i<buttons.length;i++){

// elemen DOM, bukan object jQuery

console.log(buttons[i]);

}

// Bahkan bisa dilakukan slice array:

var firstFour = buttons.slice(0,4);

4. Mencari elemen secara acak (random).

Membuat algoritma random bisa jadi cukup rumit. Anda bisa membuat sebuah plugin yang memberikan sebuah kemungkinan selector baru dengan pseudo selector “random”. Cara ini ditemukan oleh Waldek Mastykarz dan ditulis di blognya. Setelah plugin selesai, Anda bisa langsung men-define selector tersebut.

(function($){

var random = 0;

$.expr[':'].random = function(a, i, m, r) {

if (i == 0) {

random = Math.floor(Math.random() * r.length);

}

return i == random;

};

})(jQuery);

// Cara penggunaannya

$('li:random').addClass('glow');

5. Gunakan CSS Hooks.

Sejak versi 1.4.3, jQuery menawarkan API untuk melakukan CSS Hooks. Fitur ini dapat digunakan sedemikian rupa sehingga developer tidak perlu mendeklarasi CSS sesuai dengan spesifikasi browser yang mungkin digunakan pengunjung. jQuery akan secara otomatis mendeteksinya dan menggunakan property yang tepat, terutama untuk CSS3 yang memang belum stabil.

$.cssHooks['borderRadius'] = {

get: function(elem, computed, extra){

// Nilai yang dibaca bergantung browsernya

// -moz-border-radius, -webkit-border-radius or border-radius

set: function(elem, value){

// Atur property CSS3 yang sesuai

}

};

// Digunakan tanpa perlu mengetahui browser apa

$('#rect').css('borderRadius',5);

6. Menggunakan $.proxy().

Salah satu kelemahan dari menggunakan callback pada jQuery, ketika ada sebuah fungsi dari library yang dieksekusi, maka conteks “this” akan berubah elemennya. Sebagai contoh, bila Anda mempunyai kode html sebagai berikut.

<button>Close</button>

</div>

Setelah itu, Anda ingin mengeksekusi kode javascript berikut.

$('#panel').fadeIn(function(){

// "this" akan menunjuk ke #panel

$('#panel button').click(function(){

// "this" akan menunjuk ke button

$(this).fadeOut();

});

Anda akan menemukan masalah dengan kode javascript di atas, karena tombol akan menghilang, sedangkan panel-nya tidak. Cara ini dapat diatasi dengan menggunakan fungsi proxy() tersebut. Fungsi ini memerlukan 2 argumen, yaitu fungsi asli yang akan dieksekusi, serta context “this” yang ingin dieksekusi dalam fungsi tersebut.

$('#panel').fadeIn(function(){

// Using $.proxy untuk binding

$('#panel button').click($.proxy(function(){

// "this" menunjuk ke #panel

$(this).fadeOut();

},this));

});

7. Mengetahui ukuran dan berat dari halaman.

Anda dapat mengetahui berat dari sebuah halaman Anda dengan fungsi jQuery sederhana ini. Semakin kecil angkanya, maka semakin cepat halaman website Anda ditampilkan. Anda bisa melakukan optimasi dengan menghapus markup yang redundan dan elemen wrap yang kurang penting.

1	console.log( $('*').length );

8. Membuat kode sebagai plugin.

Bila Anda cukup sering menggunakan suatu fungsi yang sama untuk berbagai halaman, alangkah lebih baiknya bila Anda membuatnya sebagai plugin, agar lebih mudah digunakan dan dipindah-pindah. Dengan demikian, Anda dapat meningkatkan portabilitas kode, pengurangan dependensi, dan memudahkan organisir kode. Caranya cukup mudah, seperti kode berikut ini.

(function($){

$.fn.yourPluginName = function(){

// Your code goes here

return this;

};

})(jQuery);

9. Gunakan atribut HTML5.

Versi terbaru jQuery telah mendukung pengambilan data atribut HTML5. Cara ini cukup efektif untuk melakukan transfer data antara server dengan halaman tampilan. Sebagai contoh, bila Anda memiliki elemen HTML5 seperti berikut ini.

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"

data-options='{"name":"John"}'>

</div>

Dengan atribut elemen seperti di atas, Anda bisa mengaksesnya dengan menggunakan fungsi data() dari jQuery, seperti contoh berikut ini.

$("#d1").data("role"); // "page"

$("#d1").data("lastValue"); // 43

$("#d1").data("hidden"); // true;

$("#d1").data("options").name; // "John";

Dengan menerapkan 9 tips di atas, programmer javascript dapat memaksimalkan kinerja jQuery agar lebih baik. Masih banyak tips lainnya yang bisa ditemukan lewat eksperimen-eksperimen.

Dalam memahami JQuery, disarankan agar terlebih dahulu paham dan menguasai pengkodean HTML, CSS dan Javascript. Secara standar, apabila kita membuat kode javascript, maka diperlukan kode yang sangat panjang. Bahkan terkadang sangat sulit untuk di pahami. Misalnya, fungsi javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut :

Disinilah peran JQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam library tersebut, dan hal yang menarik disini adalah kita hanya membutuhkan satu baris untuk membuat warna selang-seling pada suatu tabel.

JQuery ( ' table tr:nth-child(odd) ' ) .addClass ( ' odd' );

G. TEKNIK PENGOPTIMALAN JQUERY

Jika Anda sudah familiar menggunakan jQuery, mungkin ada beberapa hal yang Anda lewatkan untuk membuat Code Anda diproses secara optimal oleh Client-Side, Apalagi jika Anda mulai menggunakan jQuery hanya mendownload dan membaca dokumentasi penggunaannya secara singkat. Tapi tahukah Anda jika ada beberapa teknik yang dapat digunakan untuk menggunakan jQuery secara maksimal sehingga berdampak pada performa Code baik dari segi kecepatan, struktur, dan hal yang menguntungkan lainnya.

Berikut ini adalah beberapa teknik yang dapat Anda gunakan untuk melakukan hal tersebut.

1. Load jQuery langsung dari Server Google atau jQuery.com

Mungkin sebagian dari Anda telah banyak membaca dari blog-blog atau sumber yang lain bahwa teknik ini adalah salah satu cara yang optimal untuk meng-improve jQuery tapi untuk me-refresh Anda, saya tetap akan menuliskannya disini.

Contoh pertama misalnya kita ingin me-Load jQuery v1.10.2 dari server google, mungkin biasanya kita menuliskannya dengan cara berikut :

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

Sebenarnya, Anda cukup menuliskan code yang lebih sederhana seperti berikut :

1	<script src="http://code.jquery.com/jquery-latest.js"></script>

2. Cara Memastikan Inisialisasi Gambar Selesai

Memastikan gambar terinisialisasi merupakan cara yang dapat Anda gunakan untuk meningkatkan interaktivitas kepada para pengguna. Untuk melakukan inisialisasi gambar dapat menggunakan .load() dan gunakan fungsiCallback untuk melakukan proses lanjut. Contoh dibawah ini, atribut "src" dari tag Gambar menjadi atribut selector untuk mendeteksi bahwa gambar telah selesai di load. Hal ini dapat Anda gunakan untuk menggunakan Captcha dengan teknik DOM.

$('#gambar').attr('src', 'gambar.jpg').load(function(){

alert('Gambar telah selesai di load.');

//Gunakan fungsi sesuai dengan yang Anda inginkan.

});

3. Vertical Alignment dengan jQuery

Jika Anda ingin meletakkan sebuah elemen di tengah-tengah, menggunakan jQuery akan terasa lebih mudah. Perhatikan contoh berikut ini :

$(document).ready(function(){

//Mengambil angka tinggi window & elemen

var tinggi_window = $(window).height();

var tinggi_elm = $('.vertical-center').height();

//Implementasi pada selector

$('.vertical-center').css({

'position' : 'relative',

'top' : tinggi_window/2 - tinggi_elm/2

});

4. Replace <div> dengan jQuery

Cara sederhana yang dapat Anda gunakan adalah dengan cara menggunakan metodereplaceWith.

1	$('#target-div').replaceWith('<div>Contoh pengganti div yang baru.</div>');

5. Manipulasi Text menggunakan Regular Expression dan jQuery

Anda dapat mengganti atau membuat text baru dengan menggunakan Regular Expression untuk mencari target yang ingin dirubah tersebut.

Misalnya kita ingin menghindari spammer mengindex Email kita pada document. Kita dapat menggunakan sebuah metode ini untuk merubah text atau karakter khusus untuk ditimpa menjadi email kita (hanya dapat dibaca selain bot / crawler). Contoh yang digunakan adalah kita menggunakan text "-:email:-" untuk diganti menjadi "email_anda@domain.com".

$(document).ready(function(){

var document_body = $('body');

document_body.html(document_body.html().replace(/-:email:-/gi, 'email_anda@domain.com'));

});

6. Membuat Link eksternal membuka window baru

Sebenarnya, untuk membuka link baru Anda dapat menggunakan atribut target pada HTML (target="_blank"), tetapi cara ini membuat script Anda tidak Valid menggunakan validasi XHTML 1.0 sehingga kita harus menemukan cara lain.

Jika Anda membutuhkan sebuah alternatif untuk membuka link di eksternal window, Anda dapat menggunakan jQuery untuk melakukan hal ini. Pada Validator XHTML 1.0, atribut ini dianggap tidak valid. Beberapa alternatif berikut ini dapat Anda gunakan.

Contoh dibawah ini dengan menambahkan attribute rel="external" pada link Anda sehingga jQuery dapat membuka link ke eksternal window dengan script seperti berikut :

$('a[rel="external"]').click(function(){

window.open( $(this).attr('href') );

return false;

});

//Atau dapat menggunakan bind

$('a[rel="external"]').bind("click", function(){

window.open( $(this).attr('href') );

return false;

});

Atau jika Anda ingin membuka link pada sebuah selector misalnya<div id="eksternal-link">, jadi Anda cukup menunjuk semua tag <a> yang ada didalam selector tersebut seperti contoh script berikut ini :

$('div#eksternal-link a').click(function(){

window.open( $(this).attr('href') );

return false;

});

//Menggunakan bind()

$('div#eksternal-link a').bind("click", function(){

window.open( $(this).attr('href') );

return false;

});

BAB III

PENUTUP

A. Kesimpulan

JQuery merupakan library JavaScript terhandal saat ini. Faktanya, banyak perusahaan besar tingkat dunia menggunakan JQuery dengan teknologi website mereka. Bahkan website-website lokal pun tidak mau ketinggalan.

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.

Web developer 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.

JQuery berhasil menyederhanakan fungsi-fungsi JavaScript dan Ajax yang rumit, sehingga hanya dengan beberapa baris kode, kita bisa membuat website dengan tingkat interaktivitas yang tinggi (responsif), bahkan membuat animasi yang canggih tanpa memerlukan instalisasi plugin flash pada browser.

Sebenarnya penggunaan jQuery sangatlah mudah, karena tanpa harus dibekali penguasaan pemograman JavaScript sekalipun, karena semuanya sudah dibungkus dalam bentuk library dan plugin, Intinya kita hanya perlu tahu cara menerapkan dalam website kita.