TUGAS
MATA KULIAH APLIKASI BERBASIS WEB
Tentang
“JQUERY”
Oleh:
SAMSUL LUTFI
15720251023
PROGRAM PASCASARJANA
UNIVERSITAS NEGERI YOGYAKARTA
2015
A. Pendahuluan
1. Latar Belakang
Kebutuhan akan web yang bersifat dinamis dewasa ini sudah menjadi suatu keharusan. Web tanpa banyak efek menarik didalam nya membuat web tersebut sedikit membosankan. Untuk efek-efek yang sederhana seperti menambah highlight pada teks yang di klik bisa di lakukan menggunakan skrip PHP dan CSS.
Untuk animasi dan efek tingkat lanjut, para web developer memilih menggunakan animasi flash melalui software Adobe Flash. Namun dalam membangun website penuh efek menggunakan animasi flash terkadang menjadi pekerjaan yang memakan banyak waktu. Untuk membuat sebuah gerakan saja, diperlukan beberapa layer. Di sisi performance, website yang ber-flatform animasi flash memerlukan waktu loading yang lebih lama. Hal ini akan terasa membosankan bagi sebagian pengunjung yang menginginkan kecepatan transfer data tanpa menyampingkan design website yang dinamis. Selain itu animasi Flash kurang diminati oleh Search Engine.
Dewasa ini kita mengenal Javascript dalam membangun aplikasi web. Dengan menggunakan Javascript, web developer bisa membangun website dinamis dan interaktif yang semakin menurunkan popularitas flash dalam pembuatan website interaktif. Kemampuan Javascript dalam pembuatan animasi, drag and drop, dan konsep User interface lainnya semakin menjadi tren di kalangan web designer terlebih dengan dikembangkannya Javascript Framework.
Konsep utama dari Javascript framework adalah meng-abstrakan semua kode yang ditulis dari mesin yang mengeksekusinya. Contoh Javascript framework diantaranya Dojo, Yahoo! User Interface, Prototype, JQuery, dan Mootools
2. Rumusan Masalah
a. Apakah yang dimaksud dengan JQuery ?
b. Apakah manfaat dari penggunaan JQuery ?
c. Apakah kelebihan serta kekurangan dari JQuery ?
3. Tujuan
a. Mengerti apa yang dimaksud dengan JQuery ?
b. Mengetahui manfaat dari penggunaan JQuery ?
c. Mengetahui kelebihan serta kekurangan dari JQuery ?
4. Manfaat
a. Bagi penyusun, makalah ini dapat dijadikan pembelajaran dalam menulis makalah baik dan menambah pengetahuan tentang materi yang ditulis.
b. Bagi pembaca, makalah ini dapat dijadikan bahan pembelajaran terhadap mata kuliah terkait.
B. Pembahasan
1. Pengertian JQUERY
Jquery merupakn library/framework dari Javascript yang dapat mempermudah pengolahan DOM pada halaman website. Jquery menekankan intraksi antara Javascript dan HTML.
Pada perkembangannya, Jquery tidak sekedar sebagai framework Javascript, namun memiliki kelebihan yang cukup banyak. Contoh kelebihannya adalah memudahkan akses ke bagian page / halaman tertentu dan mempersingkat kode Javascript biasa, sehingga lebih mudah dan menyingkat waktu, sesuai dengan slogan Jquery “ Write less do more”.
Keunggulan website menggunakan Jquery adalah sebagai berikut:
a. Mengakses halaman degan lebih mudah.
b. Member respon intraksi user dalam halaman website.
c. Menambah animasi pada halaman website.
d. Mengambil informasi dari server tanpa merefresh halaman (konsep ajax).
e. Menyederhanakan penulisan Javascript.
f. Memanipulasi CSS.
Untuk menutup pembahasan ini, saya akan berikan contoh sederhana penggunaan Jquery yang akan menyembunyikan dan menampilkan pesan tanpa me-refresh halaman website.
Untuk itu, buatlah sebuah halaman dengan Jquery1.html, lalu isikan kode berikut:
Skrip Jquery1.html
<!DOCTYPE html>
<html>
<head>
<script src=”jquery.js”></script>
<script>
$(document).ready (function ( ) {
$(“#hide”) . click (function ( ) {
$(“p”) . hide ( ) ;
)) ;
$(“#hide”) . click (function ( ) {
$(“p”) . show ( ) ;
)) ;
</script)
</head>
<body>
<p>jika Anda mengklik tombol “hide”, saya akan menghilang.</p>
< button id=”hide”>hide</button>
<button id=”show”>show</button>
</body>
</html>
Sebelumnya pastikan anda sudah mempunyai file library Jquery.js pada folder yang sama dengan file Jquery1.html. Apabila Anda belum punya dan Anda mempunyai koneksi internet, Anda bias menggantikannya dengan:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.3/jquery.min.js”>
Sekarang coba jalankan di browser, maka akan tampil teks informasi dengan dua buah tombol di bawahnya, apabila Anda klik tombol “Hide”, maka teks informasi akan menghilang (disembunyikan), untuk menampilakannya lagi klik tombol “show”. Lihatlah gambar di bawah ini:
2. Manfaat dari penggunaan JQuery
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 :
a. 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.
b. 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.
c. 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.
d. Mengubah isi dari halaman
Sebelum JQuery hadir, cukup sulit bagi kita yang ingin 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.
e. 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.
f. Mengubah bagian halaman tertentu
CSS (Cascading Style Sheet) menawarkan metode yang cukup hkital 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.
g. Menyederhanakan penulisan Javascript biasa.
Dengan menggunakna JQuery penulisan code Javascript yang terlalu banyak dapat dihindari.
3. Kelebihan serta Kekurangan dari JQuery
Kelebihan:
a. Kompatibel/cocok dengan semua browser yang popular, seperti Mozila, Internet Explorer, Safari, Chrome, Opera.
b. Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang telah ada. Termasuk mempercepat coding javascript dalam sebuah website. Dibandingkan kita harus mulai sebuah script javascript dari nol.
c. Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya, baca di situs http://JQuery.com hal ini mempermudah dalam pembelajaran JQuery.
d. Kompatibel dengan semua versi CSS (CSS 1 sampai dengan CSS 3), untuk fleksibilitas desain antar muka halaman website dan interaksinya.
e. Website yang dibangun dengan JQuery akan lebih interaktif dan menarik.
f. JQuery telah banyak digunakan oleh website-website terkemuka di dunia
g. Didukung oleh komunitas yang besar dan aktif, seperti forum,milis, blog, social engineering (twitter dan facebook), website, dan tutorial.
h. Disupport oleh plugin yang lengkap. Plugin merupakan kemampuan tambahan yang bisa disertakan pada JQuery.
i. Filenya hanya satu dan ukurannya relatif kecil yatu sekitar 20kb sehingga cepat diakses.
j. Open source atau Free (gratis) dengan lisensi dari GNU General Public Lisence dan MIT License.
k. JQuery lebih diminati oleh para developer web saat ini dibandingkan Javascript Libary lainnya
Kekurangan:
a. Meskipun diklaim JQuery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan JQuery, alias HTML murni.
b. 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 (sangat-sangat banyak) akan membebani server. Solusi: host JQuery pada situs lain, seperti Google yang menyediakan request JQuery dari servernya
C. Kesimpulan
JQuery memperoleh popularitas di kalangan pengembang web karena satu alasan, yaitu kemudahan dalam penggunaannya. Walaupun bagi pengembang web yang sudah berpengalaman, biasanya disertai alasan lain seperti dukungan multi browser, kecepatan, fungsi traversal element (query) yang komplit, progressive enhancement dan lain-lain.
JQuery dibuat oleh John Resig di tahun 2006 pada awalnya bertujuan untuk memudahkan pengembang web menggunakan javascript untuk berbagai web browser. JQuery menyederhanakan kode Javascript sesuai dengan slogannya ‘Write less, do more ‘ cukup tulis sedikit, tapi bisa melakukan banyak hal.
Berikut beberapa fungsi yang dimiliki JQuery:
a. Mengakses bagian halaman tertentu dengan mudah
b. Mengubah tampilan bagian halaman tertentu
c. Mengubah isi dari halaman
d. Menambah animasi tanpa harus flash
e. Load data tanpa merefresh seluruh halaman
f. Menyederhanakan penulisan Javascript biasa
Kita bisa membuat aplikasi web yang multi platform tanpa tergantung pada piranti keras tertentu dengan menggunakan JQuery. Aplikasi web kita bisa jalan di hampir semua piranti mobile yang populer saat ini dengan kode yang sama. Framework ini juga telah mendukung penggunaan layar sentuh, sehingga aplikasi kita bisa mengoptimalkan device yang ada.
Salah satu pemakaian JQuery adalah pada program chatting. JQuery banyak digunakan karena penggunaannya yang praktis dan akses data bisa cepat karena menggunakan model AJAX. Transfer datanya sendiri sangat kecil sehingga bisa sampai dengan cepat.
JQuery mampu merubah interaksi sebuah website menjadi lebih baik dan menarik, namun harus di bayar dengan beban load yang lebih lama dibandingkan dengan tidak menggunakan script JQuery.
DAFTAR PUSTAKA
Sony Gunawan, erdhi widyarto,Yulianto Tejo P. 2013. Aplikasi Chatting Menggunakan Jquery Pada Sistem Mobile.
Indra Warman, Atma Zahni. 2013. Rekayasa Web Untuk Pemesanan Handphone Berbasis Jquery Pada Permata Cel.
Solichin, Achmad. 2009. JQuery Untuk Orang Awam.http://achmatim.net/2009/01/20/jquery-untuk-orang-awam/
Soffa, Ahmad. 212. JQUERY, Kelebihan, Kekurangan dan Fakta Lainnya.http://ahmadsoffa.wordpress.com/2012/06/20/jquery-kelebihan-kekurangan-dan-fakta-lainnya/
Yonandri, Yonand. 20111. Pengenalan dan Cara Penggunaan JQuery. http://yonand.my-php.net/berita-128-pengenalan-dan-cara-penggunaan-jquery.html
Sulistiyo, Asmarina. 2013. Dasar-dasar Jquery. http://www.oprek.com/2013/01/dasar-dasar-jquery/
Tidak ada komentar:
Posting Komentar