BAB I

33
BAB I PENDAHULUAN A. 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 Serarch Engine. Dewasa ini kita mengenal Javascript dalam memabangun 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 B. RUMUSAN MASALAH 1. Apa yang dimaksud dengan JQuery ? 2. Pengenalan sejarah JQuery 3. Apa manfaat dari penggunaan JQuery ? 4. Apa kelebihan serta kekurangan dari JQuery ? 5. Bagaimana implementasi JQuery saat ini ? JQuery Halaman 1

Transcript of BAB I

BAB IPENDAHULUAN

A.LATAR BELAKANGKebutuhan 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 Serarch Engine.Dewasa ini kita mengenal Javascript dalam memabangun 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 MootoolsB.RUMUSAN MASALAH1.Apa yang dimaksud dengan JQuery ?2. Pengenalan sejarah JQuery 3.Apa manfaat dari penggunaan JQuery ?4.Apa kelebihan serta kekurangan dari JQuery ?5.Bagaimana implementasi JQuery saat ini ?C.TUJUAN1.Mengerti apa yang dimaksud dengan JQuery ?2.Mengetahui manfaat dari penggunaan JQuery ?3.Mengetahui kelebihan serta kekurangan dari JQuery ?4.Megetahui implementasi JQuery saat ini ?

D.MANFAAT1.Bagi penyusun, makalah ini dapat dijadikan pembelajaran dalam menulis makalah baik dan menambah pengetahuan tentang materi yang ditulis2.Bagi pembaca, makalah ini dapat dijadikan bahan pembelajaran terhadap mata kuliah terkait.

BAB IILANDASAN TEORI

A.PENGENALAN JQUERYSekarang ini website stkitar dianggap kurang lagi menarik perhatian pengguna website, karena sekarang orang-orang lebih menyukai sesuatu yang menarik atau tidak monoton dan juga ringan. Maka oleh sebab itu dirancanglah sebuah website yang interaktif, menarik dan juga membuat para pengunjung lebih terkesan yaitu dengan menggunakan JQuery.JQuery adalah sebuah framework berbasiskan Javascript yang menekankan bagaimana interaksi antara Javascript dengan HTML. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client.JQuery pertama kali dirilis pada 14 Januari 2006 oleh John Resig di Barcamp, New York dan berlisensi gkita di bawah MIT dan Public License (GPL). JQuery memiliki slogan Write less, do more yang artinya keserdahanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.Saat ini JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin. Dipakai oleh lebih dari 55% dari 100.000 website yang paling sering dikunjungi. JQuery menjadi library Javascript yang paling popular sekarang. JQuery membuat yang rumit menjadi simple dengan function-function yang ada pada librarynya.Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan elemen Document Object Model (DOM) dan membuat aplikasi AJAX. AJAX adalah singkatan dari Asynchronous JavaScript dan XML, yang dibuat dari serangkaian teknologi dengan berbagai kemampuan : JavaScript, XML dan sebuah method komunikasi asinkron antara client dan server. 3 teknologi yang saling berinteraksi : JavaScript dengan menangkap isyarat, gerak serta aksi. Sebagaimana pada situasi yang mungkin terjadi, JavaScript menggunakan jalur komunikasi pada server (object JavaScript dengan nama XMLHttpRequest) untuk memanggil method yang tersimpan pada server dan menggunakan XML sebagai mekanisme pengirim data. Jika JavaScript akan menggunakan kemampuan bawaannya untuk memanipulasi struktur DOM halaman untuk menambahkan content yang didapat dari server. Perubahan yang terjadi pada struktur DOM kemudian dterjemahkan oleh browser pada client, sehingga meningkatkan efek interaktivitas pada user.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 bagus.JQuery merupakan library yang bersifat open source atau gratis. Ukuran JQuery sangat ringan, yaitu hanya dari satu file dan berukuran kurang lebih 20 KB saja. JQuery terus berkembang dan memunculkan versi-versi yang baru bisa diunduh secara gratis di situs resmi JQuery yaituhttp://JQuery.com. JQuery memiliki keunggulan pluginable yaitu bisa ditambahi berbagai plugin untuk menambah beberapa fungsionalitas bagi yang menginginkan fungsi lebih.JQuery berkembang tidak hanya untuk framework javascript saja, namun juga sudah berkembang untuk tujuan-tujuan lain seperti Microsoft dan Nokia yang telah mengumumkan akan mengemas JQuery di platform mereka. Awalnya Microsoft mengadopsi dalam Visual Studio untuk digunakan dalam ASP.NET AJX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.

B. SEJARAH JQUERYPetama kali dibuat oleh John Resig pada tahun 2005, JQuery sendiri pertama kali dirilis tanggal 14 Januari 2006. Dan versi terbaru dari JQuery udah sampe versi 1.3.2. Dia terinspirasi dari Behavior code. Saat itu, Dia ngerasa hasil dari Behavior Code tidak elegan dan masih jelek, maka dikembangkannya JQuery. Dimana dengan penulisan code JQuery jadi lebih simple, gampang dan tentunya dengan hasil yang memuaskan. jQuery adalah library JavaScript OpenSource yang menekankan pada interaksi antara JavaScript dan HTML.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.

Apa itu jquery ?

Jquery adalah kumpulan beberapa kode yang siap dipakai untuk mempermudah dan mempercepat dalam pembuatan kode Javascript. Yang awalnya menggunakan kode yang sangat panjang namun dengan mengggunakan jquery kita bisa langsung memanggil fungsi yang terdapat dalam Library tersebut. Jadi intinya jquery itu menyederhanakan kode Javascript sesuai dengan slogannya yaitu Write less, do more. Pengertian lain dari jquery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses loading halaman web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser cross browser.

jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang paling populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb.jQuery adalah library Javascript yang gratis dan open source. Oleh karena nya kita bisa menggunakan jQuery dengan bebas untuk keperluan pengembangan website kita. Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (user interface) semakin memudahkan kita mengembangkan website yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan jQuery.

Dengan semakin berkembangnya JQuery, semakin memudahkan pula untuk para web programmer membuat website yang cantik dan dinamis. Nah, kenapa JQuery banyak digunakan, salah satunya adalah JQuery mampu menampilkan animasi-animasi semisal slideshow, datepicker, autocomplete, dan masih banyak lagi tapi tanpa membuat suatu website itu terlihat berat atau memakan waktu lama untuk diload.

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 waktu dan waktu lagi. Ini adalah batu loncatan yang besar di bidang efisiensi pemrograman yang agak mudah dipelajari. Sebagian besar proses belajar didasarkan pada tutorial yang menunjukkan bagaimana memanipulasi pengembang 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 sederhana 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..

B.KEMAMPUAN JQUERY

1.Mengakses bagian halaman tertentu dengan mudahTanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman harus mengikuti aturan DOM, dan pengaksesannya 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 dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.2.Mengubah tampilan bagian halaman tertentuCascading Style Sheet (CSS) menawarkan metode yang cukup hkital dalam mengatur dan mempercantik halaman web. Namun terkadang CSS memiliki kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak diukung oleh semua browser. Maka cukup merupakan jika kita harus mendesign halamana web dengan beberapa CSS sekaligus. Namun dengan JQuery, kelemahan tersebut dapat diatasi.3.Mengubah isi dari halamanSebelum JQuery lahir, cukup sulit jika kita mengubah sebagian isi dari halaman. Mengubah disini adalah mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar atau list, menghapus baris table dan lain-lain. Dengan menggunakan JQuery, kita dapat melakukan hal;hal tersebut hanya dengan beberapa baris perintah.4.Merespond interaksi user dalam halamanWebsite yang baik tidak cukup hanya hanya dengan user interfnce dan tampilan yang menarik. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tamilannya sendiri. Interaktivitas sangat bergantung pada pemrograman yang dipakai dalam menangani event-handling. Javascript juga memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. Sedangkan JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.5.Menambah animasi tanpa harus menggunakan flashDalam suatu halaman web, animasi sering disertakan dalam untuk menambah daya tarik tampilannya. Hingga saat ini animasi masih digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing memiliki kelebihan dan kekurangannya masing-masing. JQuery sendiri menawarkan konsep animasi, meskipun dalam hal ini masih sederhana namun cukup bagus dan ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.6.Load data tanpa merefresh seluruh halamanMengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari AJAX. Pada penerapannya, cukup susah jika harus membangun website dengan konsep AJAX. Namun saat ini sudah banyak library khusus yang digunakan untuk mempermudahnya, dan JQuery merupakan salah satunya.7.Menyederhanakan penulisan Javascript biasaSemboyan 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.

Perbedaan Versi pada JQueryVersi baru biasanya terdapat penambahan fungsi baru dari fungsi JQuery yang sebelumnya. Tetapi pasti memiliki besar kapasitas yang lebih besar dari versi yang sebelumnya sehingga dengan versi yang baru dapat memperberat beban dan loading pada aplikasi website yang dibuat. Maka dari itu kita harus mempertimbangkan ketika kita memakai versi JQuery yang kita akan gunakan.Perbedaan JQuery.js (tanpa min) dengan JQuery.min.js(menggunkan min).Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan min menkitakan bahwa JQuery tersebut telah dikompres (compress) sehingga muatan atau bebanya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress JQuery dilakukan dengan menghilangkan beerapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan JQuery. Maka dari itu jika sekedar pengguna lebih baik menggunakan JQuery.min.js agar loading lebih cepat.

Struktur Penggunaan JQueryJQuery merupakan library yang berupa file javascript. JQuery dapat mempermudah kita dalam memanfaatkan dan menggunakan javascript. Sebelum dapat digunakan, JQuery harus diinclude-kan terlebih dahulu. Letak dari script includenya pun berada pada tag.