Implementasi jQuery

1.       Pengertian  jQuery

jQuery adalah suatu library (framework) javascript yang menekankan bagaimana interaksi antara javascript dengan HTML. jQuery pertama kali dikembangkan pada tahun 2005 oleh John Resig dan dirilis pada 14 Januari 2006 dan kemudian berkembang pesat dan populer digunakan di berbagai website sampai dengan sekarang. Pada kenyataan seiring dengan perkembangannya jQuery tidak hanya menjadi framework untuk javascript tetapi juga memiliki kelebihan dan kehandalan yang lain, sehingga banyak digunakan oleh para developer web. Slogan yang digunakan oleh jQuery adalah “Write less do more” atau sedikit menulis tetapi bisa menghasilkan banyak.

jQuery merupakan library yang bersifat open source, alias gratis dengan lisesnsi GNU General Public License dan MIT License. Ukuran jQuery sangat ringan sekali, hanya terdiri dari satu file dan berukuran kurang lebih 20 KB saja. jQuery terus berkembang dan memunculkan versi-versi yang baru yang bisa diunduh secara gratis di situs resmi jQuery yaitu http://jQuery.com. Bagi yang menginginkan fungsi lebih, jQuery juga menyediakan tambahan-tambahan plugin untuk menambah beberapa fungsionalitas. Karena keunggulannya jQuery berkembang tidak hanya untuk framework javascript saja namun juga sudah berkembang untuk tujuan-tujuan lain seperti misalnya 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.

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

Ø  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

Screenshot :

Ø  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

Screenshot :

Ø   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

Screenshot :

Ø   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

Screenshot :

Ø  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

Screenshot :

Ø  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

Screenshot :

Dan masih banyak yang lainnya yang bisa dikunjungi di http://www.jqueryplugins.com

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