PHP FORUM: JQuery

Setelah belajar PHP tentu butuh tampilan yang interaktif, dan bagus. Untuk itu dibutuhkan interaksi dengan javascript. Untuk apa? Agar aplikasi kita lebih halus dan lebih profesional. Karena jika cuman mengandalkan PHP maka kita akan kesulitan memunculkan alert, dialog yang bagus, grafik yang menawan dan lain sebagainya. Javascript sangat berguna untuk mengatur dalam pemrograman disisi client. Misalnya untuk menghitung 4+3 tidak usah data tersebut dikirim ke server dulu lalu hasilnya dibalikin ke Client. Dalam client sendiri sudah bisa menghitungnya secara langsung, yaitu dengan menggunakan javascript. Nah sekarang sudah ada function-function javascript yang tinggal pakai dan mempunyai hasil yang hebat, yaitu Jquery.

Berikut pengertian Jquery menurut Wikipedia jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL. Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka [1]. Microsoft awalnya mengadopsinya dalam Visual Studio [2] untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.

Jquery sekarang sudah sangat popular, jika tidak menguasainya tentu programmer web php akan ketinggalan kereta perubahan zaman. Jquery menyediakan fungsi menampilkan gambar slide, menu accordion, tabulasi cantik, grafik yang menawan dan lain sebagainya. Pokoknya cakep deh.

Untuk mempelajari Jquery bisa langsung kunjungi situsnya yaitu http://jquery.com atau browsing di mbah google. Literaturnya cukup banyak dan banyak forum yang membahasnya salah satu nya adalah koder.web.id, berikut petikan Jquery dari situs tersebut

JQuery adalah sebuah framework/library JavaScript yang dapat membantu kita mempermudah dan mempercepat pengolahan DOM pada halaman web.
Dengan jQuery kita dapat membuat web lebih menarik dan interaktif dengan mudah. jQuery sudah mengautomasi pekerjaan-pekerjaan yang umum dan mempersimple code yang kompleks. Library ini sangat kecil dan mempunyai banyak pluggin yang dapat mempermudah kita.
Adapun fitur-fitur yang ditawarkan oleh jQuery adalah

Mempermudah akses dan manipulasi ke bagian page tertentu. jQuery menawarkan sebuah selector yang robust dan efesien untuk mengambil bagian tertentu pada dokumen yang selanjutnya bisa dimanipulasi.
Mempermudah perubahan tampilan dokumen. jQuery dapat mengubah tampilan CSS dengan mudah.
Merespon interaksi user dengan webpage. jQuery mempunyai cara yang sangat-sangat elegan untuk memasukkan sebuah even ke dalam salah satu bagian dari webpage.
Menambah animasi. Kita dapat memberi animasi pada webpage kita dengan jQuery
Mempermudah AJAX.

Baiklah mari kita mulai dengan installasi jQuery. pada tutorial ini akan dibagi menjadi lima bagian yaitu instalasi, manipulasi, event, animasi dan ajax. pada artikel ini akan di bahas mengenai instalasi dan manipulasi.

Instalasi jQuery

Pertama-tama download dulu jQuery dari websitenya http://jquery.com/. Ada dua pilihan download. Production dan development, perbedaannya adalah production digunakan di realsite sedangkan development untuk masa developmen. Versi production sudah di kompresi sehingga kode nya sudah tidak bisa dibaca lagi dan ukurannya jauh lebih kecil. Versi developmen berguna jika kita mau mendebug jQuery.

Setelah mendownload maka load-lah jquery melalui tag script (perhatikan baris ke-6). sesuaikan attribut srcnya dengan path jquery anda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>

jQuery Selector

Selector adalah fungsi utama pada jQuery. semua fungsi lainnya di jQuery dapat diakses melalui selector. Penggunaan paling dasarnya adalah mempassingkan sebuah ekspressi (biasanya ekspressi css) yang kemudian selanjutnya jQuery akan mencari elemen yang cocok. pada intinya ini adalah fungsi untuk memilih elemen-elemen pad halaman web.

fungsi selector adalah $(‘ekspressi’). untuk penggunaan $() yang aman sebaiknya dilakukan setelah semua page DOM selesai terbaca semua. jadi webpagenya sudah lengkap baru script di eksekusi. kita dapat melakukannya dengan pada fungsi $(document).ready().

Adapun parameter yang bisa digunakan pada jquery adalah Id element, class element dan element itu sendiri. Selector juga bisa mengenali hirarki sebagai parameter inputnya dan bisa memfilternya langsung dari ekspressi.

*CATATAN : demo menggunakan layanan jsbin. anda bisa mengubah script html dan javascriptnya langsung, dengan mendouble click. pilih tab output untuk melihat hasilnya

contoh 1. mengubah semua div yang mempunyai p
demo : http://jsbin.com/ofaku

 (silakan di utak-atik demonya)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<base href="http://docs.jquery.com" /> 
<!-- Disini kita mengeload library Jquery --> 
<script src="http://code.jquery.com/jquery-1.3.js"></script> 
 
<script> 
$(document).ready(function(){ 
   // memangil semua div yang berisi p lalu ubah bordernya 
   $("div > p").css("border", "1px solid gray"); 
}); 
</script> 
</head> 
<body> 
<p>Ini adalah paragraf pertama</p>  
<div><p>Ini adalah paragraf kedua didalam div </p></div>  
 
<p>Ini adalah paragraf Ketiga</p> 
 
</body> 
</html>

contoh 2. Memasukkan tag html kedalam elemen
Demo : http://jsbin.com/ijopu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<base href="http://docs.jquery.com" /> 
<!-- Disini kita mengeload library Jquery --> 
<script src="http://code.jquery.com/jquery-1.3.js"></script> 
 
<script> 
$(document).ready(function(){ 
    //memasukkan html kedalam elemen
    $("<div><p>Saya adalah Paragraf Tabmahan</p></div>").appendTo("body") 
   // memangil semua div yang berisi p lalu ubah bordernya 
   $("div > p").css("border", "1px solid gray"); 
 
}); 
</script> 
</head> 
<body> 
<p>Ini adalah paragraf pertama</p>  
<div><p>Ini adalah paragraf kedua didalam div </p></div>  
 
<p>Ini adalah paragraf Ketiga</p> 
 
</body> 
</html>

Uji Coba
dari contoh diatas. coba kita buka halaman
lalu masukkan tambahkan kode ini satu persatu. lihat effect yang terjadi lalu pelajari fokuslah pada parameter yang ada pada fungsi $(PARAMETER) bukan fungsi diibelakangnya karena itu akan di jelaskan setelah ini.

//contoh selector menggunakan nama tag
$("div").css("border","3px solid red");
$("p").css("border","3px solid blue");
//contoh selector menggunakan nama object/element
$("#id_pertama").css("color","red");
//contoh selector menggunakan nama Kelas object
$(".merah").css("color","red");

*untuk dapat melihat perubahan script di coba satu-satu jangan langsung semua

jQuery Manipulation

Jquery Manipulation maksudnya penggunaan jquery untuk memanipulasi struktur dokumen. ada 7 kategori manipulasi yang disupport oleh jquery yaitu

Perubahan Content. Kita dapat merubah kontent dari sebuah object dengan dua fungsi yaitu html dan text. bedanya jika menggunakan text maka semua tag-tag html akan dituliskan sebagai mana mestinya. contoh (demo http://jsbin.com/ifoho) :
1 2 3 4

$("p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); });
Insert kedalam object. Setelah kita memilih sebuah object, kita dapat memasukkan tab html atau object kedalamnya. ada dua jenis insert yaitu append dan prepend. append menambahkan objek baru setelah value dari object tersebut, sedangkan prepend didepannya. contoh
1 2 3 4

$("p").append("<strong>Hello</strong>"); $("span").appendTo("#conto"); // Objek dengan ID conto akan dimasukkan kedalam span $("p").prepend("<b>Hello </b>"); $("span").prependTo("#conto");

Insert dikeluar object. Object yang akan ada tambahkan akan ada diluar masing-masing tag yang dipilih. contoh

$("p").before("<strong>Hello</strong>");
$("p").after("<strong>Hello</strong>");
$("span").insertAfter("#conto");
$("span").beforeAfter("#conto");

Insert kesekitar object.

Mereplace object. Kita dapat mengganti isi dari object dengan syntax ini. contoh

 $("button").click(function () {
      $(this).replaceWith("<div>" + $(this).text() + "</div>");
    });
 
</div>

Menghapus object. kita dapat menhapus object tertentu. contoh

 $("button").click(function () {
      $("p").empty();
    });
 
   $("button").click(function () {
      $("p").remove();
    });
</div>

Mengopi object. Mengopi object ke tempat lain . contoh
1 2

$("b").clone().prependTo("p"); </div>

PHP FORUM

Rabu, 29 Agustus 2012

JQuery

Instalasi jQuery

jQuery Selector

jQuery Manipulation

2 komentar: