Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan

Transkripsi

1

2 Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau Pasal 49 Ayat (1) dan Ayat (2) dipidana dengan pidana penjara masing-masing paling singkat 1 (satu) bulan dan/atau denda paling sedikit Rp ,00 (satu juta rupiah), atau pidana penjara paling lama 7 (tujuh) tahun dan/atau denda paling banyak Rp ,00 (lima miliar rupiah). 2. Barangsiapa dengan sengaja menyiarkan, memamerkan, mengedarkan, atau menjual kepada umum suatu ciptaan atau barang hasil pelanggaran hak cipta atau hak terkait sebagai dimaksud Ayat (1) dipidana dengan pidana penjara paling lama 5 (lima) tahun dan/atau denda paling banyak Rp ,00 (lima ratus juta rupiah).

3 Bikin Website Super Keren dengan PHP & jquery LUKMANUL HAKIM

4 Bikin Website Super Keren dengan PHP dan jquery Oleh: Lukmanul Hakim Copyright Lokomedia, 2010 Hak Cipta dilindungi oleh Undang-Undang Diterbitkan pertama kali oleh : Penerbit Lokomedia Jl. Jambon, Perum. Pesona Alam Hijau 2 Blok. B4, Kricak Yogyakarta redaksi@bukulokomedia.com website : ISBN : Cetakan Pertama : Mei 2010 Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

5 Kata Pengantar jquery merupakan library JavaScript terhandal saat ini. Faktanya, banyak perusahaan besar tingkat dunia menggunakan jquery dalam teknologi website mereka. Bahkan website-website lokal pun juga tidak mau ketinggalan. jquery berhasil menyederhanakan fungsi-fungsi JavaScript dan Ajax yang rumit, sehingga hanya dengan beberapa baris kode, kita bisa membuat website dengan tingkat interaktivitas yang tinggi (responsif), bahkan membuat animasi yang canggih tanpa memerlukan instalasi plugin flash pada browser. Sebenarnya penggunaan jquery sangatlah mudah, karena tanpa harus dibekali penguasaan pemrograman JavaScript sekalipun, karena semuanya sudah dibungkus dalam bentuk library dan plugin. Intinya, kita hanya perlu tahu cara menerapkannya dalam website kita. Dalam buku ini, selain membahas dasar-dasar jquery, secara praktis penulis juga membahas beberapa koleksi jquery yang sering digunakan dalam website, seperti accordion, datepicker, tabs, expose, overlay, tooltip, scrollable, flashembed, news ticker, kotak dialog, menu dropdown superfish, animasi slideshow headline berita, galeri foto carousel, validasi interaktif, grafik 3D, efek dan animasi. Tidak hanya itu, pada akhir bab juga akan disajikan cara menggabungkan beberapa teknik jquery sekaligus yang semuanya langsung diterapkan dalam sebuah proyek website lengkap yang sesuai judulnya super keren. Akhir kata, penulis menyadari dalam buku ini tentu masih jauh dari sempurna. Oleh karena itu, pertanyaan, kritik, dan saran dapat dialamatkan ke Yogyakarta, Mei 2010 Lukmanul Hakim v

6 vi

7 Daftar Isi BAB 1. Kenalan Dulu Sama jquery Apa itu jquery? Mengapa Memilih jquery? Apa Kemampuan yang Dimiliki jquery? Bagaimana Menggunakan jquery? Bagaimana Cara Kerja jquery? Apa yang Perlu Dipersiapkan?...13 BAB 2. Trik Dasar Memahami jquery Filosofi Pemrograman jquery Memahami Selectors Selectors tag Selectors id Selectors class Memahami Events Events click( ) Events dblclick( ) Memahami Effects Efek Fade( ) Efek Slide( ) Efek Animate( )...33 BAB 3. Berkreasi dengan Plugin jquery UI: Ciptakan Efek yang Canggih...38 vii

8 Instalasi jquery UI Prinsip Menggunakan jquery UI Percantik Tanggal dengan Datepicker Datepicker Standar Datepicker Format Bahasa Indonesia Mengubah Format Penanggalan Datepicker Menampilkan Pilihan Bulan dan Tahun Memilih Tanggal Menggunakan Tombol Mengganti Themes Datepicker Animasi Datepicker Alunan Keindahan Menu Accordion Accordion Standar Efek Hover Accordion Menentukan Bagian Accordion yang Aktif Animasi Accordion Menentukan Lebar dan Tinggi Accordion Bukan Kotak Dialog Biasa Kotak Dialog Standar Drag dan Resize Kotak Dialog Membuka Kotak Dialog Melalui Tombol Modal Kotak Dialog Menentukan Posisi Kotak Dialog Animasi Kotak Dialog Menampilkan Accordion dalam Kotak Dialog Efek-Efek Spesial Efek Bounce (Memantul) Efek Explode (Ledakan)...83 viii

9 3.2. jquery Tools: Hadirkan Efek yang Memukau Download jquery Tools Efisiensi Content dengan Tabs Tabs Standar Mempercantik Tampilan Tabs Membuat Accordion dengan Teknik Tabs Efek Kedipan Warna Accordion Tooltip yang Menawan Tooltip Standar Tooltip Form Tonjolkan dengan Expose Expose Standar Expose Form Bikin Lapisan dengan Overlay Overlay Standar Modal Kotak Dialog Ala Overlay Scrollable (Efek Menggulung) Scrollable Standar Scrollable Galeri Foto Flashembed (Menampilkan Animasi Flash) Mengkombinasikan Beberapa Efek Kombinasi Efek Scrollable dan Tabs Kombinasi Efek Scrollable, Overlay dan Tooltip Gudang Penyimpanan Plugin BAB 4. Kolaborasi Cantik PHP dan jquery Tabel Berkulit Zebra ix

10 Tabel Berkulit Zebra (Statis - jquery) Tabel Berkulit Zebra (Dinamis - PHP) Animasi SlideShow Headline Berita Animasi SlideShow Headline Berita (Statis - jquery) Animasi SlideShow Headline Berita (Dinamis - PHP) Menu Dropdown yang Sexy Menu Dropdown (Statis - jquery) Menu Dropdown (Dinamis - PHP) Menambahkan Sub Submenu pada Menu Dropdown Mengubah Tampilan Menu Dropdown Cara Gampang Membuat Grafik 3D Membuat Grafik 3D (Statis - jquery) Membuat Grafik 3D (Dinamis - PHP) Membuat Validasi Lebih Responsif BAB 5. Proyek Bikin Website Super Keren Persiapan Database (Import Database) Anatomi Layout Website (File Utama) Menu Dropdown Superfish Animasi SlideShow Headline Berita Pengelompokan Content dengan Teknik Tabs Percantik Pop-Up Window dengan FancyBox Sekilas Info (News Ticker) Catatan Akhir jquery x

11 BAB I Kenalan Dulu Sama jquery 1.1. Apa itu jquery? 1.2. Mengapa Memilih jquery? 1.3. Apa Kemampuan yang Dimiliki jquery? 1.4. Bagaimana Menggunakan jquery? 1.5. Bagaimana Cara Kerja jquery? 1.6. Apa yang Perlu Dipersiapkan?

12 Bab 1 Kenalan Dulu Sama jquery Semenjak dirilis pertama kali pada tahun 2006 oleh John Resig, jquery telah mencuri perhatian para developer web. Buktinya, pada tahun-tahun berikutnya jquery telah banyak digunakan oleh website-website terkemuka di dunia seperti Google, Microsoft, Intel, Nokia, Oracle, IBM, DELL, BBC, NBC, ESPN, EA Sport, Twitter, Facebook, Amazon, Time, Youtube, Apple, Wordpress, Mozilla, Netflix, Digg,Technorati, dan masih banyak lagi.. bahkan website lokal pun tidak mau ketinggalan, lihat saja Detik, Studio 21 (21cineplex.com), Indosiar, Vivanews, Kompas, dan lain-lain. Lihat gambar 1.1. Gambar 1.1 Contoh website terkemuka di dunia yang telah menggunakan jquery Dan sampai saat ini sudah tercatat ada jutaan website yang telah menggunakan jquery. Untuk lebih lengkapnya, silahkan lihat daftarnya di website jquery.com/sites_using_jquery. So, kalau kita yang ngaku-ngaku sebagai seorang developer web belum kenal ama jquery, waduh bisa dikatain kuper (kagak gaul).. capek deh, hari gini kagak kenal 12 Bikin Aplikasi Super Keren dengan PHP & jquery

13 ama jquery, bisa teridap penyakit gapweb kita alias gagap web.. nggak lah yau. Oleh karena itu, mari kita jelajahi dunia jquery yang penuh dengan keindahan. 1.1 Apa itu jquery? jquery adalah Javascript Library kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Secara standar, apabila kita membuat kode Javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami, misalnya fungsi Javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut: function stripe(id) { var even = false; var evencolor = arguments[1]? arguments[1] : #fff ; var oddcolor = arguments[2]? arguments[2] : #eee ; var table = document.getelementbyid(id); if (! table) { return; } var tbodies = table.getelementsbytagname( tbody ); for (var h = 0; h < tbodies.length; h++) { var trs = tbodies[h].getelementsbytagname( tr ); for (var i = 0; i < trs.length; i++) { if (! hasclass(trs[i]) &&! trs[i].style.backgroundcolor) { var tds = trs[i].getelementsbytagname( td ); for (var j = 0; j < tds.length; j++) { var mytd = tds[j]; if (! hasclass(mytd) &&! mytd.style.backgroundcolor) { mytd.style.backgroundcolor = even? evencolor : oddcolor; } } } } } } Nah, disinilah peran jquery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat didalam Library tersebut, menariknya kita hanya memerlukan satu/dua baris untuk membuat warna selang-seling pada suatu tabel, yaitu: jquery( table tr:nth-child(odd) ).addclass( odd ); Kesimpulannya, jquery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya Write less, do more cukup tulis sedikit, tapi bisa melakukan banyak hal. Lihat gambar 1.2. Bab I. Kenalan Dulu Sama jquery 13

14 Catatan: Gambar 1.2 Logo jquery dan slogannya O iya, udah pada tau Javascript kan?? Javascript merupakan pemrograman web yang berjalan di sisi klien (browser), sehingga Javascript dapat membuat website lebih hidup (interaktif dan responsif). Beberapa contoh yang bisa dilakukan Javascript adalah pembuatan animasi, kotak dialog, mengubah bentuk kursor mouse, validasi form, dan lain-lain. Kemampuan istimewa lainnya, Javascript dapat membuat website dengan cita rasa desktop. 1.2 Mengapa Memilih jquery? Mengapa kita lebih memilih jquery dibandingkan Javascript Library pendahulunya seperti Prototype, Mootools, YUI (Yahoo User Interface), dan Dojo? Berikut beberapa alasan yang membuktikan jquery sangat powerful dan layak dijadikan pilihan, yaitu: jquery telah banyak digunakan oleh website-website terkemuka di dunia. Kompatibel/cocok dengan semua browser yang populer, seperti Mozilla, Internet Explorer, Safari, Chrome, dan Opera. Kompatibel dengan semua versi CSS (CSS 1 sampai dengan CSS 3). Dokumentasi, tutorial dan contoh-contohnya lengkap, silahkan kunjungi website resminya di Didukung oleh komunitas yang besar dan aktif, seperti forum, milis, blog, social engineering (twitter dan facebook), website, dan tutorial. Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan pada jquery. Filenya hanya satu dan ukurannya pun kecil, hanya sekitar 20 KB, 14 Bikin Aplikasi Super Keren dengan PHP & jquery

15 sehingga cepat aksesnya. Open source/free (gratis) dengan lisensi dari GNU General Public License dan MIT License. jquery lebih banyak digunakan oleh para developer web dibandingkan Javascript Library lainnya. Hasil surveinya dapat dilihat pada gambar 1.3. Gambar 1.3 Hasil survei Library Javascript yang paling banyak digunakan Dalam tren google pun, jquery paling mendominasi dibandingkan Javascript Library lainnya. Lihat gambar 1.4. Biasanya tren google berhubungan dengan tren skill pekerjaan, khususnya di bidang IT. Untuk mengetahui perkembangan tren google mengenai Javascript Library bisa dilihat di alamat: jo%2c+mootools&ctab=0&geo=all&date=ytd&sort=0 Bab I. Kenalan Dulu Sama jquery 15

16 Gambar 1.4 Tren Google terhadap Library Javascript menempatkan jquery [B] 1.3 Apa Kemampuan yang Dimiliki jquery? Dari beberapa uraian diatas, kita sudah melihat sebagian kemampuan jquery. Berikut ini akan dijabarkan lebih lengkap lagi mengenai kemampuan yang dimiliki oleh jquery, diantaranya: Mempermudah akses dan manipulasi elemen tertentu pada dokumen. Biasanya diperlukan baris program yang cukup panjang untuk mengakses suatu elemen dokumen. Namun, jquery dapat melakukannya hanya dalam beberapa baris program saja, karena jquery mempunyai Selector yang sangat efisien untuk mengakses suatu elemen tertentu pada dokumen yang selanjutnya bisa dimanipulasi sesuai dengan keinginan kita. Mempermudah modifikasi/perubahan tampilan halaman web. Biasanya untuk memodifikasi tampilan halaman web digunakan CSS. Permasalahannya, CSS sangat dipengaruhi oleh web browser yang digunakan, sehingga sering terjadi halaman web yang dibuat sudah rapi dan bagus tampilannya di browser Mozilla, namun ketika ditampilkan di Opera menjadi berantakan. Namun, jquery dapat menyesuaikan style CSS pada semua browser, sehingga permasalahan tersebut dapat dihindari. Mempersingkat Ajax (Asynchronous Javascript and XML). 16 Bikin Aplikasi Super Keren dengan PHP & jquery

17 Kemampuan favorit dari Ajax adalah mampu mengambil informasi dari server tanpa melakukan refresh pada halaman web, artinya halaman web terlihat berganti secara otomatis. Apabila kita menuliskan kode Ajax secara manual, biasanya diperlukan baris yang cukup panjang, namun jquery dapat mempersingkatnya menggunakan Ajax call, perbandingannya 25 baris kode Ajax dapat disingkat menjadi 5 baris kode saja dengan jquery. Memiliki API (Application Progamming Interface) Dengan API, jquery dapat memanipulasi content pada suatu halaman web, seperti pengubahan teks, manipulasi gambar (resize, rotate, crop), penyusunan daftar (list), pengurutan list, paging, dan lain-lain. Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat. Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah. Demikianlah beberapa kemampuan yang ditawarkan jquery, apakah Anda sudah tergoda untuk mempelajarinya?? Let s begin Bagaimana Menggunakan jquery? Sekarang saatnya menjalankan jquery, saya akan menjabarkan langkah-langkah detailnya sebagai berikut: 1. Download library jquery di silahkan pilih versi jquery yang diinginkan, misalnya Development, kemudian klik tombol Download, nanti nama file yang terdownload adalah jquery-1.4. js. Lihat gambar Simpan file jquery-1.4.js pada folder latihan Anda, misalnya di C:\latih. Kemudian buat dokumen baru yang isinya seperti berikut: <html> <head> </head> <body> </body> </html> Tips: Sebaiknya gunakan editor seperti Pspad atau Dreamweaver, karena ketika Anda membuat dokumen HTML yang baru, kode-kode diatas akan terbentuk secara otomatis, jadi tidak perlu mengetiknya secara manual. Bab I. Kenalan Dulu Sama jquery 17

18 Gambar 1.5 Mendownload jquery dari website resminya di 3. Selanjutnya panggil library jquery diantara tag <head> </head>, maka sekarang skripnya menjadi (perhatikan teks yang ditebalkan): <html> <head> <script type= text/javascript src= jquery-1.4.js > </script> </head> <body> </body> </html> 4. Sebagai contoh, kita akan membuat dua buah tombol yang akan mengontrol sebuah foto, contoh skripnya adalah (perhatikan teks yang ditebalkan): <html> <head> <script type= text/javascript src= jquery-1.4.js > </script> </head> <body> 18 Bikin Aplikasi Super Keren dengan PHP & jquery

19 <button class= sembunyi >Sembunyikan</button> <button class= tampil >Tampilkan</button> <p><img id= foto src= peluk.jpg /></p> </body> </html> 5. Selanjutnya, buat skrip jquery dan sesuaikan dengan id atau class yang telah kita definisikan pada langkah 4. Skripnya sebagai berikut (perhatikan teks yang ditebalkan): <html> <head> <script type= text/javascript src= jquery-1.4.js > </script> <script type= text/javascript > $(document).ready(function(){ $(.sembunyi ).click(function(){ $( #foto ).hide( slow ); }); $(.tampil ).click(function(){ $( #foto ).show( slow ); }); }); </script> </head> <body> <button class= sembunyi >Sembunyikan</button> <button class= tampil >Tampilkan</button> <p><img id= foto src= peluk.jpg /></p> </body> </html> Simpan filenya, misalnya dengan nama pertama.html. Untuk menjalankannya, Anda bisa langsung mengklik 2x pada nama filenya melalui Windows Explorer, maka hasilnya akan langsung tampil di browser. Untuk mencobanya, silahkan klik tombol Sembunyikan dan Tampilkan. Lihat gambar 1.6. O iya, mungkin Anda kurang paham dengan skrip-skrip jquery yang telah kita buat pada latihan pertama.html, tapi nggak usah khawatir, karena pada bab berikutnya akan dibahas mengenai dasar-dasar jquery. Bab I. Kenalan Dulu Sama jquery 19

20 Catatan: Gambar 1.6 Hasil skrip pertama.html jquery selalu merilis dua versi untuk librarynya, yaitu Production dan Development. Perbedaannya, ukuran file untuk versi Production lebih kecil dibandingkan Development. Karena, versi Production telah dimanpatkan, sehingga kodenya agak sulit dibaca. Sedangkan versi Development, isi filenya 20 Bikin Aplikasi Super Keren dengan PHP & jquery

21 lebih mudah dibaca, sehingga versi ini diperuntukkan bagi developer yang tertarik mempelajari/memanipulasi fungsi-fungsi yang dimiliki oleh jquery. Saat buku ini ditulis, versi terbaru dari jquery adalah jquery 1.4. Jadi, nama file untuk versi Production adalah jquery-1.4.min.js. Sedangkan nama file untuk versi Development adalah jquery-1.4.js. Kalau penulis boleh ringkas, sebenarnya hanya ada tiga langkah pokok dalam menggunakan jquery, yaitu: 1. Panggil/load library jquery. 2. Buat objek beserta elemennya berupa id atau class di bagian body. 3. Buat skrip jquery di bagian head untuk mengontrol objek berdasarkan elemennya. Untuk lebih jelasnya, secara visual dapat dilihat pada gambar Bagaimana Cara Kerja jquery? Cara kerja jquery dapat dijabarkan sebagai berikut (masih menggunakan contoh pertama.html pada sub-bab 1.4): 1. jquery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua di halaman web, fungsi yang digunakan adalah: $(document).ready(function(){ // baris kode jquery akan dijalankan // apabila semua elemen sudah ditampilkan semua } 2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jquery menggunakan fungsi Selector. Contoh skripnya: $( #foto ) $(.sembunyi ) $(.tampil ) 3. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya, operasi klik dan hide, dimana apabila tombol diklik, maka akan menyembunyikan elemen foto. $(.sembunyi ).click(function(){ $( #foto ).hide( slow ); }); Bab I. Kenalan Dulu Sama jquery 21

22 Dengan memahami cara kerja jquery, semoga lebih mempermudah Anda dalam mempelajari jquery. Gambar 1.7 Tiga langkah pokok dalam menggunakan jquery 22 Bikin Aplikasi Super Keren dengan PHP & jquery

23 1.6 Apa yang Perlu Dipersiapkan? Sebelum mempelajari jquery, sebaiknya Anda sudah mengenal (bukan menguasai lho, tapi kalau menguasai lebih baik sih) empat pengetahuan berikut: 1. Javascript, karena jquery merupakan library Javascript, jadi bahasa dasarnya pastilah mengacu kepada Javascript. 2. CSS, karena hampir secara keseluruhan nantinya jquery akan mengontrol/ memanipulasi DOM dari CSS. 3. PHP dan MySQL, karena dalam buku ini akan dibahas bagaimana cara mengkolaborasikan jquery dengan PHP dan MySQL. 4. Ajax, seperti halnya Javascript, jquery mampu menyederhanakan perintahperintah Ajax yang cukup njelimet dan puanjang. Dari ke empat pengetahuan tersebut, hal yang paling mendasar yang harus Anda ketahui adalah CSS, terutama mengenai DOM (Document Object Model). Kalau boleh penulis analogikan, DOM itu layaknya seperti variabel (identitas/ pengenal), pada contoh pertama.html (sub bab 1.4), elemen DOM didefinisikan menggunakan id dan class: <button class= sembunyi > <button class= tampil > <img id= foto src= peluk.jpg /> Pada contoh tersebut, ada dua class, yaitu tampil dan sembunyi serta terdapat satu id, yaitu foto. Jadi, nanti skrip jquery yang kita buat harus sesuai dengan class dan id yang telah kita definisikan pada bagian body, misalnya untuk menampilkan foto yang disembunyikan, klik tombol Tampilkan, maka skrip jquery yang dibuat harus sesuai dengan class tampil dan id foto, ilustrasinya dapat dilihat pada gambar 1.8. Disamping itu, jquery juga bisa langsung memanipulasi tag-tag XHTML dan membuat sebuah komunikasi antar data yang biasanya dilakukan oleh Ajax. Oke, penulis cukupkan dulu pengenalan mengenai jquery sampai disini, kita langsung masuk ke bab berikutnya mengenai dasar-dasar jquery disertai contoh kasusnya agar Anda lebih cepat menguasai jquery. Bab I. Kenalan Dulu Sama jquery 23

24 Gambar 1.8 Skrip disesuaikan dengan class yang didefinisikan di bagian body 24 Bikin Aplikasi Super Keren dengan PHP & jquery