2010 Knowledge Sharing Program jquery Basic Andy Saputra Sekolah Tinggi Teknik Surabaya 12/18/2010
2 Daftar Isi Intro jquery Pre-requisite Selector DOM Manipulation Event Handler Effect/Animation AJAX
3 Intro jquery jquery adalah library javascript yang menyediakan berbagai fasilitas yang dulunya harus dibuat manual oleh user, namun sekarang cukup dipanggil/dijalankan dengan mudah. Misalkan, animasi Fade In, Fade Out, Slide In, Slide Show, dll. Keunggulan lain jquery terletak pada fasilitas selectornya, yaitu fasilitas jquery untuk memilih objek DOM untuk diproses selanjutnya. Website resmi developer jquery: http://jquery.com Cara penggunaan: - Download file jquery terbaru dari http://docs.jquery.com/downloading_jquery - Import file jquery.js yang sudah didownload ke halaman web yang ingin menggunakan jquery. <script src="jquery.js" type="text/javascript"> - Notasi penggunaan jquery yang lazim digunakan adalah dengan menambahkan tanda $. - Letak penulisan coding jquery sebaiknya berada di dalam $(document).ready(), untuk memastikan semua script jquery dijalankan setelah semua objek DOM selesai diload untuk halaman web tersebut, $(document).ready(function(){ // coding jquery }); - Contoh jquery sederhana: $(document).ready(function(){ $("a").click(function(event){ alert("thanks for visiting!"); }); });
4 Pre-Requisites Untuk mempermudah penggunaan dan aplikasi jquery, maka diharapkan pengguna sudah memiliki basic: - HTML dan pengetahuan tentang DOM (Document Object Modelling) - CSS (Cascading Style Sheet) - Sedikit pengetahuan tentang Javascript dasar. HTML dan DOM HTML merupakan suatu bahasa yang digunakan untuk membuat halaman web. Bahasa ini menggunakan tag-tag khusus untuk menandai elemen-elemen yang terdapat dalam web. <html> <head> <title>halaman Websiteku</title> </head> <body> <div id= Div1 > <a href=www.google.com> Link ke Google </a> </div> <p> Halaman yang menyediakan link ke Google </p> </body> DOM (Document Object Modeling) adalah suatu cara untuk memodelkan objekobjek dalam halaman web (dianggap sebagai suatu dokumen). Hal ini dilakukan untuk mempermudah manipulasi dan pengaksesan elemen-elemen dari halaman tersebut.
5 Contoh ilustrasi DOM berdasarkan contoh HTML di atas HTML Head Body Title Div id= Div1 p CSS (Cascading Style Sheet) CSS merupakan kumpulan style yang bertujuan untuk mengatur penampilan dari objek/elemen suatu halaman web. Contoh #div1{ background-color: red; text-align: center; margin-left: 20px; }
6 Selector Selector merupakan salah satu keunggulan utama dari jquery, di mana fungsi utamanya adalah memilih objek DOM yang diinginkan oleh user untuk dimanipulasi dengan mudah. Syntax dasar selector: $( #divcontent ).click(function(). Bagian yang dihighlight adalah selector yang akan memilih objek DOM (dalam kasus di atas, yang di-select adalah objek/element dengan id= divcontent ). Beberapa jenis selector: 1. Element: untuk memilih element dengan tag tertentu. Syntax: $( E ). $( a ) akan menyelect semua elemen tag <a> di halaman web. 2. ID: untuk memilih element dengan ID tertentu. Syntax: $( #id ). $( #content ) akan menyelect semua elemen dengan id= content tanpa melihat tag elementnya. 3. Class: untuk memilih element dengan class tertentu. Syntax: $(.class ). $(.myclass ) akan menyelect semua elemen dengan class= myclass tanpa melihat tag elementnya. 4. Descendant: untuk memilih element F yang merupakan bagian/descendant dari element E. Descendant adalah semua elemen yang menjadi bagian dari elemen lainnya. Syntax : $( E F )
7 Contoh : <div id= container > <p> <span> <img src= a.jpg /> </span> </p> </div> <img src..> merupakan descendant dari <span>, <p>, dan <div>. Kode $( #container p ) dapat digunakan untuk memilih elemen <p> yang merupakan descendant dari elemen dengan id= container. 5. Child: untuk memilih elemen F yang merupakan child dari elemen E. Syntax: $( E>F ) $( li > ul ) digunakan untuk memilih semua elemen tag <ul> yang merupakan children dari elemen tag <li>. 6. Multiple Element: untuk memilih beberapa elemen sekaligus, dipisahkan dengan koma. Syntax: $( E, F, G ) $( div, p, a ): digunakan untuk memilih semua elemen dengan tag <div>, <p>, dan <a>. 7. Semua Element: untuk memilih semua elemen, menggunakan tanda *. Syntax: $( * ) $( * ): digunakan untuk memilih semua elemen dalam dokumen/halaman HTML. $( p>* ): digunakan untuk memilih semua elemen yang merupakan child dari tag <p>. Selector-selector lainnya 1. :odd dan :even : digunakan untuk memilih elemen yang memiliki index genap maupun ganjil. Syntax: :odd dan :even $( tr:odd ) digunakan untuk memilih elemen <tr> yang nilai indexnya ganjil.
8 Contoh pemakaian praktis dari selector ini adalah untuk membuat alternating row suatu table, di mana warna dari baris ganjil dan genap suatu table berbeda. 2. Elemen ke-n : digunakan untuk memilih elemen sesuai dengan index yang diinginkan Syntax: :eq(n) atau :nth(n) $( li:eq(2) ) digunakan untuk memilih elemen <li> ke-3 (karena index elemen ke-1 dihitung sebagai index ke-0). 3. Elemen pertama/terakhir: hampir sama dengan elemen ke-n, namun dapat dipanggil dengan notasi khusus. Syntax: :first atau :last $( li:last ) digunakan untuk memilih elemen <li> yang terakhir. 4. Elemen yang terlihat atau hidden: untuk memilih semua elemen berdasarkan visibilitynya, yaitu yang terlihat ataupun yang hidden. Syntax: :visible atau :hidden $( li:visible ) digunakan untuk memilih semua elemen <li> yang bersifat visible. $( input:hidden ) digunakan untuk memilih semua elemen <input> yang hidden.
9 Method manipulasi objek DOM - Mendapatkan, mengganti, dan menghapus atribut suatu element Selector.attr(atribut) : digunakan untuk mendapatkan value dari suatu atribut dari element yang ditunjuk selector. Selector.attr(atribut, new_value) : digunakan untuk mengubah value dari suatu atribut dari element yang ditunjuk selector, sesuai dengan nilai yang dimasukkan pada parameter new_value. Selector.removeAttr(atribut) : digunakan untuk menghapus suatu atribut dari element tertentu. - Mendapatkan dan mengganti nilai Style/CSS dari suatu element Selector.css(property) : digunakan untuk memperoleh nilai dari properti CSS suatu element yang ditunjuk selector. Selector.css(property, new_value) : digunakan untuk mengubah nilai dari properti CSS suatu elemen yang ditunjuk selector, sesuai dengan nilai new_value. - Menambahkan dan mengurangi class yang dimiliki oleh suatu element. Selector.addClass(class) : digunakan untuk menambahkan class baru ke dalam elemen yang ditunjuk selector. Selector.removeClass(class) : digunakan untuk menghapus nama class yang tidak diinginkan dari elemen yang ditunjuk selector. Selector.toggleClass(class) : digunakan untuk men-toggle class, di mana sifatnya adalah akan menambahkan class jika elemen yang ditunjuk selector belum memiliki class ini, dan akan menghapus class jika class tersebut sudah dimiliki oleh elemen yang ditunjuk selector. - Mendapatkan dan mengubah isi HTML dari suatu element. Selector.html() : digunakan untuk mendapatkan isi HTML dari suatu element. Selector.html(html) : digunakan untuk mengubah isi HTML dari suatu element yang ditunjuk selector.
10 - Mendapatkan dan mengubah isi text dari suatu element. Yang dimaksud dengan teks adalah semua tulisan yang diapit dalam tag HTML. Misalkan elemennya adalah <a> New Link </a>, maka yang dimaksud teks adalah New Link Selector.text() :Digunakan untuk mendapatkan isi teks dari setiap elemen yang sesuai dengan selector yang digunakan, termasuk descendant-nya. Selector.text(text) : Digunakan untuk mengganti isi teks dari setiap element. Sebagai catatan, method di atas akan mengganti karakter < dan > dengan < dan > sehingga penggunaannya harus diperhatikan - Mendapatkan dan mengubah nilai dari element form. Selector.val() : Digunakan untuk mendapatkan value dari suatu element, terutama untuk element form. Selector.val(value) : Digunakan untuk mengganti value dari suatu element, terutama untuk element form. - Beberapa method ini digunakan untuk menambahkan elemen baru ke dalam elemen lainnya. Yang berbeda adalah peletakkan elemen baru tersebut. Prepend dan Append termasuk dalam Inside Insertion, yaitu elemen baru akan ditambahkan di dalam elemen tersebut. Selector.prepend(content) dan Selector.prepend(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jquery) dan diletakkan di bagian paling atas dari element yang ditunjuk selector. $( #diva ).prepend( <div id= 1 ></div> ), maka sebuah div baru akan ditambahkan pada bagian paling atas dari diva. $( #diva ).prepend($( #divb )), maka div lain dengan id=divb akan ditambahkan pada bagian paling atas dari diva. Selector.append(content) dan Selector.append(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jquery) dan diletakkan di bagian paling terakhir/bawah dari element yang ditunjuk selector.
11 $( #diva ).append( <div id= 1 ></div> ), maka sebuah div baru akan ditambahkan pada bagian paling bawah dari diva. $( #diva ).append($( #divb )), maka div lain dengan id=divb akan ditambahkan pada bagian paling bawah dari diva. Before dan After termasuk dalam Outside Insertion, yaitu elemen baru akan ditambahkan di dalam elemen tersebut. Selector.before(content) dan Selector.before(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jquery) dan diletakkan sebelum/di atas element yang ditunjuk selector. $( #diva ).before( <div id= 1 ></div> ), maka sebuah div baru akan ditambahkan sebelum/di atas diva. $( #diva ).before($( #divb )), maka div lain dengan id=divb akan ditambahkan sebelum/di atas diva. Selector.after(content) dan Selector.after(object) : Digunakan untuk menambahkan elemen (baik berupa teks HTML yang ditulis dalam content ataupun objek lain dalam web yang dipilih dengan selector jquery) dan diletakkan sesudah/di bawah element yang ditunjuk selector. $( #diva ).after( <div id= 1 ></div> ), maka sebuah div baru akan ditambahkan sesudah/di bawah diva. $( #diva ).after($( #divb )), maka div lain dengan id=divb akan ditambahkan sesudah/di bawah diva. - Menghapus elemen DOM. Selector.remove() : digunakan untuk menghapus semua elemen yang ditunjuk oleh selector.
12 Event Handler Sama halnya dengan Javascript, jquery juga dilengkapi dengan event handler. Event handler adalah event yang akan dipanggil (ditrigger) jika terjadi event-event tertentu. Contohnya, event onclick adalah event ketika kita melakukan penekanan mouse click. Jika kita memasangkan fungsi A sebagai handler pada event onclick, maka setiap kali terjadi penekanan mouse click, fungsi A akan dipanggil dan dijalankan. Method yang berkaitan dengan event handler pada jquery adalah: -.bind(event_type, handler) : digunakan untuk memasangkan suatu fungsi handler terhadap event tertentu. misalkan kita memiliki fungsi bernama showmessage(), dan kita ingin setiap terjadi penekanan mouse click pada div dengan ID = mydiv, fungsi showmessage akan dipanggil, maka kita lakukan binding seperti demikian. $( #mydiv ).bind( click,showmessage); Jika kita tidak ingin memanggil fungsi lain, maka kita dapat langsung membuat anonymous function sebagai handler. $( #mydiv ).bind( click, function(){ alert( Hello World ); }); jquery juga menyediakan short-cut untuk mempersingkat penulisan event handler, yaitu dengan langsung mengetikkan nama eventnya. Misalkan, untuk event mouse click, kita hanya perlu mengetikkan: $( #mydiv ).click(showmessage); Perintah di atas sama persis dengan perintah $( #mydiv ).bind( click,showmessage); -.unbind() : digunakan untuk menghapus suatu handler dari event tertentu. Yang dihapus adalah event handlernya, bukan fungsi yang dipanggil oleh event tersebut.
13 untuk menghapus event handler click dari suatu element, kita dapat memberikan perintah Selector.unbind( click ); -> untuk event handler dengan anonymous function Selector.unbind( click, showmessage); -> untuk event handler dengan function showmessage() -.one() : merupakan method yang khusus, karena akan memasangkan fungsi handler dengan event tertentu, namun hanya dapat dipanggil sekali saja. Setelah terjadi event, maka event handler akan dihapus/di-unbind. Selector.one( click, onemessage); -> dengan perintah ini, maka pada click pertama yang terjadi pada element sesuai selector, function onemessage() akan dipanggil. Namun, setelah selesai, maka function akan di-unbind sehingga click-click berikutnya tidak akan memanggil function onemessage(). -.trigger() : digunakan untuk memicu event handler tertentu secara manual. Kita memasangkan handler function validate() pada saat submit form $( #myform ).submit(validate); Namun, jika kita ingin menjalankan submit tersebut bukan hanya dari tombol submit, namun dari penekanan tombol lainnya, maka harus menggunakan trigger seperti berikut. $( #elemenlain ).click(function){ $( #myform ).trigger( submit ); }); Dengan perintah di atas, maka event handler dari myform akan dijalankan meskipun form tidak benar-benar mengalami event submit.
14 Effect/Animation jquery menyediakan beberapa fungsi bawaan siap pakai yang berhubungan dengan efek-efek animasi, seperti slide in, slide out, fade in, dll. Method-method yang dapat digunakan - Selector.show([speed][,callback]) : digunakan untuk menampilkan elemen sesuai selector, dari yang semula hidden/invisible menjadi visible. Parameter speed dapat diisi dengan kecepatan animasi dalam milisecond (misalkan diisi 100,200 dsb). Namun, jquery juga menyediakan 3 jenis speed, yaitu fast (200 ms), normal (400 ms), dan slow (600ms). Jika parameter speed ini tidak diisi, maka kecepatan normal yang digunakan. Callback function adalah fungsi yang akan dijalankan setelah suatu method (dalam hal ini adalah.show() ) selesai dijalankan. - Selector.hidden([speed][,callback]): digunakan untuk menampilkan elemen sesuai selector, dari yang semula visible menjadi hidden/invisible. - Selector.toggle([speed][,callback]) : digunakan untuk men-toggle status visible/hidden dari elemen sesuai selector. Jika elemen visible, maka akan menjadi hidden. Sebaliknya, jika elemen hidden, maka akan dimunculkan/visible. - Selector.slideDown([speed][,callback]) : digunakan untuk menampilkan animasi slidedown (dari elemen yang tertutup menjadi terbuka dengan animasi slide down) pada elemen yang ditunjuk selector. - Selector.slideUp([speed][,callback]) : digunakan untuk menampilkan animasi slideup (dari elemen yang terbuka menjadi tertutup dengan animasi slide up) pada elemen yang ditunjuk selector. - Selector.slideToggle([speed][,callback]) : digunakan untuk men-toggle slideup dan slidedown. - Selector.fadeIn([speed][,callback]) : digunakan untuk menampilkan animasi fade in pada elemen yang ditunjuk selector.
15 - Selector.fadeOut([speed][,callback]) : digunakan untuk menampilkan animasi fade out pada elemen yang ditunjuk selector. - Selector.fadeTo(speed,opacity[,callback]) : digunakan untuk menampilkan animasi fade sesuai dengan opacity dan speed yang diinginkan user. Opacity yang dimasukkan bernilai antara 0 1.
16 AJAX Berikut merupakan method-method yang digunakan untuk menangani AJAX via jquery. - Selector.load(url [,data][,success]) : digunakan untuk me-load data yang diterima dari server dan meletakkan hasil HTML yang diperoleh pada elemen yang ditunjuk oleh selector. Parameter url diisi dengan alamat yang dikirimi request. Parameter data dapat diisi dengan data-data yang akan disertakan dengan request. Parameter success dapat diisi dengan function yang akan dijalankan jika request berhasil dijalankan. Request yang dijalankan secara default akan dikirimkan dengan metode GET, namun apabila terdapat data yang juga dikirimkan, maka request akan dikirimkan dengan metode POST. o Siapkan dua halaman html, index.html dan content.html. o Content.html diisi dengan teks sembarang di dalam tag <body> o Kita akan meload halaman content.html dari index.html dengan cara $( #div1 ).load( content.html ); Isi content.html akan diload ke dalam isi div1. - $.get(url [,data][,success]): digunakan untuk melakukan request AJAX dengan metode GET terhadap url yang dituju. Contoh, kita akan melakukan sebuah request sederhana seperti demikian $.get("test.php", {username : us, password: ps}, function(data){ alert("data Loaded: " + data); $("#result").html(data); });
17 Dari perintah di atas, kita melakukan AJAX request terhadap test.php dan mengirimkan dua data dengan nama variabel username dan password. Nama variable ini nantinya akan diakses dari PHP dengan $_GET[ username ] dan $_GET[ password ]. *perhatikan bahwa nama variable yang ditulis dalam jquery akan digunakan untuk mengakses isi variable itu dalam PHP* Pada function callback, kita dapat menangkap parameter pertama yang berisi response dari server yang diperoleh. Dalam kasus di atas, hasil kembalian dari server ditampung dalam variable bernama data dan akan ditampilkan dalam div dengan id result. Isi file PHP yang berhubungan dengan contoh ini. <?php $username = $_GET['username']; $password = $_GET['password']; echo "Username : ". $username. " <BR>"; echo "Password : ". $password;?> - $.post(url [,data][,success]): digunakan untuk melakukan request AJAX dengan metode POST terhadap url yang dituju. Cara penggunaan sama persis dengan $.get(), hanya perlu mengganti kata get dengan post.