JQuery Framework Dan Aplikasi Website

Membahas penggunaan dan implementasi core jQuery sebagai Engine untuk Interface Web, AJAX handling method dan Interactive Media Web Apps. Untuk Web Designer, Web Developer dan Blogger: Beginner, Intermediate dan Adnvance BONUS CD berisi Source Code dan E-Book

KATA PENGANTAR

Banyak para Web Designer pemula saat ini yang mengalami kesulitan dalam proses pembuatan Design Interface sebuah Website yang terintegrasi dengan system agar lebih user friendly juga dinamis.

Selain pengunaan CSS (Cascade Styling Sheet) yang smart, unik, compatible juga penggunaan bahasa pemograman web sepertinya belum sepenuhnya cukup untuk mendapatkan pencapaian yang maksimal dari konsep protoype design Web yang benar benar Eye Catching, Usable dan Interaktif.

Saya menemukan beberapa referensi dari para Web master baik dari segi konsep, metode dan eksekusi. Ada yang menyebutkan bahwa efisiensi dan memaksimal kan Alogaritma dari Syntax bahasa pemograman adalah metode paling mendasar yang sangat penting, ada juga yang mengatakan penggunaan atau kombinasi bahasa pemrograman external seperti Javascript, Flash atau CSS itu lebih compatible ketimbang hanya menggunakan satu bahasa pemograman mengingat zaman sekarang banyak sekali jenis software browser dan Operating System dari berbagai developer.

Tapi menurut saya kedua argumentasi di atas sangat penting apalagi jika kita kombinasikan, jika di coba kemungkinan otak kita akan bekerja lebih keras lagi untuk melakukan eksperimen, tapi inilah dunia Web, dunia digital dari perkembangan teknologi yang sangat kompleks yang menuntut kita untuk semakin up to date dan inovatif.

Dalam buku ini saya akan mencoba memberikan gambaran dan penjelasan tentang keunggulan jQuery Framework sebagai solusi pengembangan Design Interface sebuah Web agar lebih Interaktif, User Friendly & Eye Catching.

Buku ini berisi beberapa pemahaman jQuery dari tingkat beginner yang sederhana hingga Advance untuk para Web Developer dan Web Designer Profesional, selain itu buku ini juga di sertakan CD yang berisi source code beberapa contoh aplikasi web menggunakan jQuery dari para Web master, source code bersifat Open Source dan berlisensi GNU dan GPL, anda bebas me-distribusikan nya dengan catatan tidak boleh di komersial kan.

Jika energi partikel Atom bisa berubah menjadi Bit, bisa dibayangkan Dunia ini akan menjadi semakin datar dan sempit

(Napoleon Bonaparte)

Salam Hangat Ofan Sofandani

A. SEKILAS TENTANG JQUERY 1. Apa itu jQuery?

jQuery yang beralamatkan di www.jquery.com baru di rilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. jQuery sebenarnya bukanlah hal yang baru karena berisi fungsi-fungsi yang ditulis dengan JavaScript, dan JavaScript itu sendiri telah diperkenalkan oleh Netscape sejak tahun 1995.

2. Apa Kegunaan jQuery? jQuery adalah jenis JavaScript Framework yang memiliki fungsi-fungsi Ajax, DOM (Document Object Model), Event, serta berbagai efek yang siap dipergunakan oleh Web Developer dan Web Designer.

3. Mengapa Memilih jQuery? Banyak sekali jenis JavaScript libs Framework yang metode nya hampir mirip dengan jQuery, misalnya www.script.aculo.us, www.mootools.com dan www.django.com. Kelebihan jQuery adalah fitur-fitur nya yang modern, siap pakai, mudah untuk di gunakan atau di modifikasi dan yang terpenting adalah ukuran file nya yang relatif kecil untuk sebuah library yang powerfull (hanya 60Kb), walaupun idenya sederhana, yaitu membuat sebuah library JavaScript, ternyata jQuery mampu menarik perusahaan-perusahaan besar yang mem-bundling jQuery kedalam produknya. Seperti Nokia yang akan mengintegrasikan jQuery kedalam platform web Run-Time, atau Microsoft yang mengadopsi jQuery kedalam Visual Studio, jQuery juga kini banyak di gunakan oleh Developer App Web ternama seperti CMS Wordpress, CMS Drupal, Google, Technorati, Digg, Mozilla.org, NBC, Dell dan masih banyak lagi.

4. Bagaimana Cara Kerja dan Penerapan jQuery? Menggunakan jQuery sangatlah mudah, anda hanya perlu men-download file jQuery pada www.jquery.com, versi terakhir (tahun 2010) adalah versi 1.4.2 Anda tinggal menyisipkannya pada kode program (HTML/PHP/ASP) sebagai berikut:

Path js/jquery-1.4.2.min.js menunjukkan lokasi file jQuery karena jQuery merupakan library JavaScript, maka Web Developer dan Web Designer hanya perlu memperdalam pengetahuan JavaScript nya, tidak ada bahasa pemrograman yang baru, tetapi banyak hal baru yang dapat diciptakan pada Website oleh jQuery.

B. IMPLEMENTASI SEDERHANA JQUERY Di sini kita akan membahas bagaimana cara kerja jQuery jika digunakan dalam Web dan

bagaimana contoh syntax sederhana untuk mengeksekusi nya.

Ada beberapa langkah yang harus dilakukan agar effect dari jQuery berjalan sempurna di Web anda, meskipun ada banyak metode tapi di sini saya hanya akan membahas yang paling umum, ringkas dan well formating text. Pada halaman SEKILAS TENTANG JQUERY (poin ke 4) saya sudah menuliskan sekilas bagaimana cara menyisipkan file engine atau library dari jQuery Framework ke dalam halaman Web.

Nah, di bawah ini salah satu contoh code utama untuk menambahkan fungsi berupa effect, dan events, code ini harus di tuliskan di setiap anda membuat fungsi baru tapi dengan catatan code harus di tulis ulang keseluruhan jika akan di sisipkan di halaman yang dinamis dengan fungsi yang dinamis atau code utama hanya satu kali penulisan jika penggunaan fungsi nya statis:

C. MEMANFAATKAN EFFECT DAN FUNGSI DARI JQUERY Pada sesi ini saya akan membahas beberapa contoh pembuatan Interface Web dan Aplikasi

Web dari effect dan fungsi jQuery.

Diantaranya, membuat effect accordion untuk tab, membuat slider untuk slide show content atau foto, membuat AJAX call function sederhana dan membuat drag & drop mouse effect untuk Interactive Content. Saya asumsikan Anda yang ingin memperdalam teknik atau metode jQuery ini minimal sudah faham fungsi dasar dari HTML, CSS dan javaScript.

Tapi sebelum kita meranjak ke pembahasan berikutnya, saya akan menyajikan beberapa referensi Cheat Sheet dari Syntax jQuery untuk pedoman dasar nya.

1. Cheat Sheet untuk menangani fungsi Selectors, (lebih spesifik dari deklarasi Tag).

Tabel. C. 1 Pada fungsi selectors ini, jQuery akan berperan sebagai engine untuk me-deklarasi antara nama ID atau Class yang di pilih dari tag/elemen HTML dengan javascript function. Pendeklarasian ini akan dibuat lebih spesifik dengan menentukan fungsi pilihan dari setiap jenis elemen tag HTML. Misal tag dengan selector disable elemen.

Full Source Cheat Sheet terdapat dalam CD

2. Cheat Sheet untuk menangani fungsi Event Mouse dan Load.

Tabel. C. 2 Fungsi dari Events sendiri adalah bagaimana cara jQuery menangani respon dari actifitas user baik itu interaksi langsung dengan mouse atau interaksi berkesinambungan di side server pada halaman web. Events ini akan mengarahkan effect dari library jQuery sesuai jenis atau behaviour activities.


3. Cheat Sheet untuk menangani fungsi Manipulasi tag.

Tabel. C. 3 Fungsi Manipulating ini memilki literatur atau alur kerja berbeda dengan yang lain, fungsi manipulating bersifat dummy. Fungsi Manipulating biasanya digunakan untuk menjembatani antara respon dari server dengan bentuk atau effect yang akan di tampilkan di halaman setelah menentukan style dari core UI dengan menentukan tag atau deklarasi elemen sebelumnya. Fungsi yang di sediakan di Library terhitung variatif, karena di sini kita bisa memilih jenis alur kerja nya sesuai dengan nama dari jenis Manipulasi nya.

4. Cheat Sheet untuk menangani fungsi Effect UI.

Tabel. C. 4 Core UI adalah fungsi Library yang tak kalah pentingnya dengan fungsi lain, fungsi ini adalah termasuk dari salah satu yang sering di gunakan dalam interface. Dengan core UI kita bisa berkreasi menggunakan jQuery untuk effect slider, Drag & Drop, Play & Stop, Hide & Show, Fade out & Fade in atau effect paling kompleks yaitu effect animate.


5. Cheat Sheet untuk menangani fungsi CSS dan Atrributes Tag.

Tabel. C. 5 Pada jQuery di tanamkan juga fungsi Styling Sheet seperti layaknya CSS. Sedangkan metode penambahan nya adalah get content dari atrribute HTML.


6. Cheat Sheet untuk menangani fungsi AJAX.

Tabel. C. 6 Dengan adanya resource dari beberapa Web Programer yang membahas akan efisiensi performa Web maka lahirlah AJAX, berikut dengan perkembangan itu jQuery pun termasuk salah satu developer library framework yang terintegrasi dengan metode AJAX. jQuery menyisipkan fungsi AJAX kedalam library nya, dengan adanya fitur AJAX maka jQuery semakin powerfull. Bukan hanya itu, jQuery memilki metode sendiri dalam penerapan AJAX yang membuat metode nya pun semakin mudah di aplikasikan.


7. Cheat Sheet untuk menangani fungsi Document Ready, Javascript Extend.

Tabel. C. 7 Fungsi dari User Agent adalah untuk mendapatkan properties dari visitor dengan memanfaatkan sistem cockies dan model Browser, dan JavaScript, Extend dan Document Ready adalah eksekusi external library atau fungsi tambahan js.


8. Cheat Sheet untuk menangani fungsi Travesing.

Tabel. C. 8 Jika dilihat pada fungsi Travesing itu hampir sama metode dasarnya dengan fungsi Selectors, karena jika kita perhatikan satu persatu syntax nya adalah pengembangan dari deklarasi untuk tag HTML. Namun untuk Travesing lebih spesifik dan detail cara kerjanya. Akan tetapi fungsi travesing tidak bisa berdiri sendiri seperti halnya fungsi selector, Travesing membutuhkan definisi awal dari Selectors untuk meng-aktif kan nya. Sama halnya dengan fungsi lain seperti get attribute, core UI, AJAX dan manipulating.


Beberapa Cheat Sheet yang saya tampilkan di atas adalah kumpulan syntax basic untuk

mengaktifkan library pada core jQuery. Tentu saja syntax basic ini adalah penting untuk setiap kali kita melakukan pembuatan

sebuah aplikasi dan effect Interface dari jQuery. Diharapkan dengan adanya Cheat Sheet ini kita lebih mudah untuk menggunakan,

modifikasi dan explorasi library jQuery. Tidak perlu menghafalkan nya, karena yang terpenting adalah bagaimana memahami

setiap fungsi syntax dari library jQuery nya.

C. 1. MEMBUAT MENU ACCORDION Apa itu effect accordion? Sederhana nya effect accordion adalah sebuah metode slider

(slideDown() ; atau slideUp();) dari fungsi library jQuery, yang secara global adalah untuk memberikan effect rolling pada sebuah tag table, div, p atau tag HTML lainnya.

Effect Accordion umum di gunakan pada Interface Web untuk bagian sidebar yang isi atau content nya bertumpuk, alasan nya adalah untuk meminimalis atau menyederhanakan daftar elemen yang ada pada bagian sidebar.

Untuk bahan latihan ini saya sarankan mengunakan Editor Teks khusus untuk Coding, misalnya Adobe Dreamwaver, PsPad atau PHP editor. Jika menggunakan Mac OS anda tidak perlu menginstall Software 3rd party di atas karena Mac sudah menyediakan Console khusus untuk editor code/syntax bahasa pemrograman web. Berikut ini adalah Screen Cast dari Effect Accordion:

Gambar C. 1. a

Apa yang harus di lakukan? 1. Pertama buat sebuah project baru di local disk Komputer atau Laptop, beri nama folder

jquery.accordion. Lalu siapkan engine jQuery minimal versi 1.3.2, anda bisa dapatkan di dalam CD bonus atau langsung download di www.jquery.com.

2. Siapkan code HTML nya, silahkan simak code di bawah:

Kuningan Isi Content. Jakarta Jakarta Pusat Isi Content. Jakarta Barat Isi Content. Jakarta Timur Isi Content. Jogjakarta Borobudur Isi Content. Marioboro Isi Content. Bali

Silahkan simpan dengan nama index.html dan ekstensi file HTML (.html)

3. Berikutnya buat code jQuery nya:

(function(jQuery){ jQuery.fn.extend({ accordion: function() { return this.each(function() { var $ul = $(this); if($ul.data('accordiated')) return false; $.each($ul.find('ul, li>div'), function(){ $(this).data('accordiated', true); $(this).hide(); }); $.each($ul.find('a'), function(){ $(this).click(function(e){ activate(this); return void(0); }); }); var active = (location.hash)? $(this).find('a[href=' + location.hash + ']')[0]:''; if(active){ activate(active, 'toggle'); $(active).parents().show(); } function activate(el,effect){ $(el).parent('li').toggleClass('active') .siblings().removeClass('active') .children('ul, div').slideUp('fast'); $(el).siblings('ul, div')[(effect || 'slideToggle')] ((!effect)?'fast':null); } }); } }); })(jQuery);

Setelah selesai silahkan simpan dengan nama jquery.accordion.js Simpan dengan ekstensi file javaScript (.js)

4. Lalu buat code CSS untuk style:

body { font: 0.8em Arial, sans-serif; } .pageContent { width: 400px; } .accordion { list-style-type: none; padding: 0; margin: 0 0 30px; border: 1px solid #17a; border-top: none; border-left: none; } .accordion ul { padding: 0; margin: 0; float: left; display: block; width: 100%; } .accordion li { background: #3cf; cursor: pointer; list-style-type: none; padding: 0; margin: 0; float: left; display: block; width: 100%; } .accordion li.active>a { background: url('close.gif') no-repeat center right; } .accordion li div { padding: 20px; background: #aef; display: block; clear: both; float: left; width: 360px; } .accordion a { text-decoration: none; border-bottom: 1px solid #4df; font: bold 1.1em/2em Arial, sans-serif; color: #222; padding: 0 10px; display: block; cursor: pointer; background: url('open.gif') no-repeat center right; } /*-- Level 2 --*/ .accordion li ul li { background: #7FD2FF; font-size: 0.9em; }

Silahkan simpan dengan nama style.css dan ekstensi file CSS (.css)

Penjelasan dari beberapa baris code jQuery di atas: Jika kita perhatikan Effect Accordion ini memanfaatkan fungsi dari Travesing , Core UI dan

CSS Atrribute. a. Fungsi Travesing pada accordion adalah untuk memilih juga menentukan tag dan deklarasi

yang terdapat pada tag induk. Lihat code:

// contoh fungsi travesing 1 pada accordion $.each($ul.find('a')

baris ini untuk identifikasi tag a

// contoh fungsi travesing 2 pada accordion $(el).parent('li')

baris ini untuk identifikasi tag li dengan tag induk ul fungsi parent adalah untuk mengambil deklarasi induk

dengan tag yang bertingkat (ex:ul>li>ul>li).

// contoh fungsi travesing 3 pada accordion .children('ul, div')

baris ini untuk identifikasi tag ul dan div dengan tag

child li dari ul dan span dari div fungsi children adalah untuk mengambil deklarasi child

b. Fungsi Core UI pada accordion adalah untuk memberikan effect slider pada tag yang sebelumnya di identifikasi oleh fungsi Travesing. Lihat code:

// contoh fungsi core UI 2 pada accordion function activate(el,effect){ $(el).parent('li').toggleClass('active') .siblings().removeClass('active') .children('ul, div') .slideUp('fast')

baris ini untuk memberi effect slider tag li

c. Fungsi CSS Atrribute pada accordion adalah untuk.... Lihat code:

// contoh fungsi css atrribute 1 pada accordion .toggleClass('active')

baris ini untuk mengatur switch class pada tag a

Semua tag pada HTML yang di identifikasikan oleh Travesing rata-rata mengunakan command seperti pada CSS. Contohnya penggunaan tanda > pada li>div di jquery.acordion dan .accordion li.active>a di style.css accordion Lihat code:

C. 2. MEMBUAT SLIDE SHOW DENGAN JQUERY Slide Show jQuery ini sebetulnya pengembangan effect slide dari fungsi Core UI seperti

yang di gunakan pada Menu Accordion. Yang membedakan effect slide nya adalah Slide Show ini bergerak dengan horizontal bukan vertical seperti pada Menu Accordion, karena perbedaan ini Slide Show lebih cocok mengunakan fungsi .animate();. Slide Show (atau content slider) biasa nya di gunakan untuk Screen Cast Portfolio, Summary Post, New Content, Design/Photos, atau Populer Content.

Banyak jenis dan model dari metode Slide Show, dari mulai tingkat termudah sampai advance. Di pembahasan ini kita akan membahasa Slide Show dengan metode sederhana. Yang penting anda memahami konsep dan alur kerja dari metode fungsi Core UI animate();

Tapi jangan kecewa dulu, saya juga sudah persiapkan beberapa sample source code Slide Show dari tingkat termudah sampai advance di CD Bonus. Berikut ini adalah Screen Cast dari Slide Show (content slider):

Gambar C. 2. a

Seperti biasa, ada beberapa tahap yang anda harus persiapkan. Diantaranya:

1. Buat sebuah Project baru lagi dengan membuat Folder baru di local disk anda, 2. Lalu siapkan file minimal jquery-1.2.0.js atau jQuery versi 1.2, file atau source core

jQuery nya bisa anda dapatkan di web resminya yaitu www.jquery.com atau jika anda tidak sempat di dalam CD bonus juga di sertakan mulai dari jQuery versi 1.1.0, 1.2.0, 1.3.0, 1.3.2 sampai 1.4.2 ( cari folder > jQuery_Engine > ... ) .

3. Siapkan juga gambar atau foto berukuran minimal 500 x 350 pixel, saya sarankan siapkan 5 buah foto atau gambar untuk sample content nya. Atau jika anda tidak sempat dalam CD Bonus sudah di sediakan, ( cari folder > jQuery_Effect_Function > jquery.content-slider > images > ... ).

4. Buat code HTML terlebih dahulu untuk pondasinya: 4. A. Buat code HTML head nya untuk mendefinisikan file jQuery, Engine Slider dan CSS nya

Content Slider

4. B. Buat code HTML body nya untuk membangun kerangka content nya:

//Start struktur tag Judul 1 Disni Silahkan Ubah Isi kontent 1 di sini. //End struktur tag //Start struktur tag Judul 2 Disni Silahkan Ubah Isi kontent 2 di sini. //End struktur tag //Start struktur tag Judul 3 Disni Silahkan Ubah Isi kontent 3 di sini. //End struktur tag

//Ulangi struktur tag untuk membuat lebih banyak slide

4. C. Buat code HTML body lanjutan nya untuk membangun tag navigasi nya:

Sebelumnya | 1 2 3 // Ulangi struktur tag untuk membuat lebih banyak navigasi ... ... | Selanjutnya

5. Buat code CSS untuk style Sheet slider nya:

#contentSlidersSlide{ background:#FFF; font-family: Georgia; } #myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF;border:1px solid #006699; } #myController span.contentSlidersSelected { background:#43A0D5;margin-right:0px;border:1px solid #006699; } .slide-wrapper { padding: 5px; } .slide-thumbnail { width:300px; float:left; } .slide-thumbnail img {max-width:300px; } .slide-details { width:290px; float:right; margin-left:10px;} .slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; } .slide-details .description { margin-top:10px; } .contentSlidersControl, .contentSlidersPrev, .contentSlidersNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; } .contentSlidersControl:hover, .contentSlidersPrev:hover, .contentSlidersNext:hover { background: #43A0D5; }

6. Buat code dari fungsi library jQuery untuk engine slider nya, Bagian 1: Pada bagian 1 kita akan menuliskan Variable javaScript terlebih dahulu untuk me-identifikasi kan penamaan fungsi dan beberapa nilai (array) untuk perbandingan angka yang di butuhkan dalam menampilkan effect slider nya.

*Keterangan: Source Code Slider Content adalah salah satu sample free Open Source berlisensi MIT, Saya sengaja mengambil sample ini karena selain mudah di fahami juga Surce Code memilki lisensi bebas di sadur atau di distribusikan..

/* Copyright (c) 2008 Kean Loong Tan * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * jFlow */ (function($) { //Menambahkan fungsi global dari Library jQuery $.fn.contentSliders = function(options) { // Menentukan Variable terlebih dahulu var opts = $.extend({}, $.fn.contentSliders.defaults, options); var randNum=Math.floor(Math.random()*11); var csC=opts.controller; //untuk definisi box navigasi nya var csS=opts.slideWrapper; //untuk definisi box slide nya var csSel=opts.selectedWrapper; //untuk definisi box slide yang terpilih/aktif var cur = 0; //untuk nilai perbandingan var maxi = $(csC).length;

Berlanjut ke halaman berikutnya...

Fungsi library jQuery untuk engine slide, Bagian 2 Pada bagian 2 kita akan mulai memasukan command dengan referensi fungsi dari Cheat Sheet, Untuk membuat effect slide menjadi compatible, mulai dari bagian ini proses deklarasi tag, manipulasi dan fungsi travesing akan banyak di gunakan.

// identifikasi fungsi untuk effect sliding var slide = function (dur, i) { $(opts.slides).children().css({overflow:"hidden"}); $(opts.slides + " iframe").hide().addClass("temp_hide"); $(opts.slides).animate({ marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")}, opts.duration*(dur), opts.easing, function(){ $(opts.slides).children().css({overflow:"auto"}); $(".temp_hide").show(); } ); } $(this).find(csC).each(function(i){ $(this).click(function(){ if ($(opts.slides).is(":not(:animated)")) { $(csC).removeClass(csSel); $(this).addClass(csSel); var dur = Math.abs(cur-i); slide(dur,i); cur = i; } }); }); $(opts.slides).before('').appendTo(csS); $(opts.slides).find("div").each(function(){ $(this).before('') .appendTo($(this).prev()); });


Fungsi library jQuery untuk engine slide, Bagian 3

// Memberikan inisial pada navigasi $(csC).eq(cur).addClass(csSel); var resize = function (x){ $(csS).css({ position:"relative", width: opts.width, height: opts.height, overflow: "hidden" }); // opts.slides or #mySlides container $(opts.slides).css({ position:"relative", width: $(csS).width()*$(csC).length +"px", height: $(csS).height()+"px", overflow: "hidden" }); // contentSlidersSlideContainer $(opts.slides).children().css({ position:"relative", width: $(csS).width()+"px", height: $(csS).height()+"px", "float":"left", overflow:"auto" }); $(opts.slides).css({ marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px") }); } // sets initial size resize(); // resets size $(window).resize(function(){ resize(); });


Fungsi library jQuery untuk engine slide, Bagian 4

$(opts.prev).click(function(){ if ($(opts.slides).is(":not(:animated)")) { var dur = 1; if (cur > 0) cur--; else { cur = maxi -1; dur = cur; } $(csC).removeClass(csSel); slide(dur,cur); $(csC).eq(cur).addClass(csSel); } }); $(opts.next).click(function(){ if ($(opts.slides).is(":not(:animated)")) { var dur = 1; if (cur < maxi - 1) cur++; else { cur = 0; dur = maxi -1; } $(csC).removeClass(csSel); slide(dur, cur); $(csC).eq(cur).addClass(csSel); } }); }; $.fn.contentSliders.defaults = { controller: ".contentSlidersControl", slideWrapper : "#contentSlidersSlide", selectedWrapper: "contentSlidersSelected", easing: "swing", duration: 400, width: "100%", prev: ".contentSlidersPrev", next: ".contentSlidersNext" }; })(jQuery);

Setelah semua file (HTML, CSS dan jQuery) selesai di buat silahkan simpan ke dalam format masing masing jenis code pemrograman. Dalam jQuery Slider Content ini terdapat fungsi configurasi custom untuk mengatur sebagian fungsi, seperti misalnya Controler pada Navigasi, Speed transisi pada range Duration, size Height dan Width untuk keseluruhan kotak box slider nya. Untuk detail nya bisa anda lihat pada baris code yang ada pada tag pada saat anda membuat file html, lihat dan cari code di file html projek yang anda buat:

C. 3. MEMBUAT SWITCH CONTENT DENGAN AJAX JQUERY Pada pembahasan ketiga ini kita akan membuat sebuah sistem Switching Content (Tab)

menggunakan fungsi AJAX pada jQuery. Kali ini kita akan mencoba menggunakan AJAX dengan PHP, karena AJAX pada jQuery dalam pembahasan ini membutuhkan interaksi dengan server yang tidak hanya memanfaatkan fungsi effect.

Penting untuk di perhatikan, sebelum mulai membuat saya sarankan bagi anda yang belum memiliki system apache, Php My Admin dan My SQL silahkan untuk menginstal nya terlebih dahulu, anda bisa menggunakan Php Triad dan Aplikasi Apache (Full Version) atau sebagai solusi nya anda bisa menggunakan Freeware XAMPP lite.

Apa itu XAMPP lite? Bagi anda yang belum tau XAMPP lite adalah Software yang me-Bundle aplikasi pendukung PHP server, Apache dan MySQL menggunakan sistem Localhost (pada Local Disk) di komputer atau Laptop anda. Dengan XAMPP anda tidak perlu pusing dan buang buang waktu untuk melakukan Configurasi yang lumayan rumit untuk bisa memanfaatkan Local Disk anda menjadi Virtual Server.

Untuk mendapatkan software (free) ini anda bisa langsung mengunjungi www.xampp.com atau anda bisa dapatkan file software nya di CD Bonus, saya sudah sertakan untuk OS Windows dan Mac OS. Adapun untuk cara penggunaan saya tidak akan membahas nya di sini tetapi saya sudah menyisipkan E-Book panduan cepat menggunakan XAMPP untuk Web versi localhost, anda bisa temukan dalam satu folder dengan file Freeware XAMPP nya.

Langsung pada pembahasan. 1. Metode yang di gunakan adalah AJAX load content (PHP data):

Dengan memanfaatkan fungsi $.get (element.data(string)); pada fungsi AJAX jQuery (lihat Cheat Sheet). Berikut adalah screen cast nya:

Gambar C. 3. a

2. Langkah berikutnya adalah siapkan file core jquery: untuk di load di halaman Web nanti sebagai core Library javascript nya,

3. Buat dan siapkan gambar slicing untuk style pada warna setiap navigasi tabs nya: Anda bisa memanfaatkan software (berbayar) seperti Adobe Photoshop, Corel Draw atau jika tidak punya anda bisa menggunakan Microsoft Paint (jika Windows OS). Jika anda menggunakan Mac OS biasanya software grafis seperti Adobe Photoshop sudah termasuk dalam bundle system nya, anda juga bisa mengganti aplikasi grafis vector Corel Draw dengan Adobe Illustrator. Pada dasarnya aplikasi grafis untuk slicing tidak sepenuhnya fungsi dalam aplikasi itu di gunakan, kecuali anda memang benar benar ingin membuat Design Interface Web secara keseluruhan. lihat list gambar di bawah:

Untuk tab biru

kiri Untuk tab biru

tengah Untuk tab biru

kanan Untuk tab hijau kiri

Untuk tab hijau tengah

Untuk tab hijau kanan

Untuk tab orange kiri

Untuk tab orange tengah

Untuk tab orange kanan

Untuk tab merah kiri

Untuk tab merah tengah

Untuk tab merah kanan

Loader versi 1 Loader versi 2 Loader versi 3 Loader versi 4 Loader versi 5

Gambar untuk effect loader (interface pada saat loading data)

Gambar di atas harus anda buat dan siapkan untuk mendukung pembuatan style pada AJAX Tabs, gambar boleh di rubah sesuai selera anda, jika sudah selesai dibuat silahkan masukan ke dalam folder yang sudah di beri nama (nama foldernya: img). Namun jika anda tidak sempat membuatnya silahkan anda temukan di BONUS CD, saya sudah siapkan source nya di folder jQuery_Ajax > ajax.jquery.sweet.tabs > img > ...

4. Selanjutnya buat code HTML untuk index.html:

Sweet AJAX Tabs Sweet AJAX Tabs

Simpan dengan nama file index.html (format .html)

5. Selanjutnya buat code HTML untuk halaman AJAX nya: (page1.html, page2.html, page3.html, dan seterusnya...)

Tulis beberapa baris untuk isi/content di sini!

Untuk file ajax, anda bisa mengisikan content apa saja, misalnya widget flash, chatbox, RSS agregate, gambar atau video. Format file AJAX yang anda buat bisa berupa HTML, PHP, ASP atau Cold Fusion, tapi tentunya dengan metode penulisan yang berbeda beda karena tiap jenis format lembar halaman web memilki system markup text yang variatif meskipun pada akhirnya browser akan me-encrypt nya ke dalam format HTML. Nama file untuk AJAX juga bebas anda berikan sesuai dengan model & isinya, tapi ingat jika anda membuat nama file untuk di load di AJAX anda harus me-integrasi kan nya dengan engine AJAX tabs nya (untuk penjelas akan di bahas di poin selanjutnya). Saya sarankan jangan buat Switch Tabs AJAX dengan jumlah content switch terlalu banyak, usahakan maksimal anda hanya membuat 5 6 tabs, karena selain mengacaukan design/style anda juga akan membuat user kebingungan dengan Interface Tabs AJAX yang anda buat.

6. Setelah itu buat CSS nya: CSS code untuk AJAX Tabs bagian 1

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ margin:0; padding:0; } body{ /* pengaturan umum untuk halaman */ color:#cccccc; font-size:0.825em; background-color: #1e2428; font-family:Arial, Helvetica, sans-serif; } .tabContainer{ /* style untuk elemen pada tag ul */ float:right; padding-right:13px; }

Lanjut ke halaman berikutnya...

Lanjutan CSS code untuk AJAX Tabs bagian 2

#contentHolder{ background-color:#EEEEEE; border:2px solid #FFFFFF; height:300px; margin:20px; color:#444444; padding:15px; } #tabContent{ background-color:#333; border:1px solid #444; margin-top:-15px; width:100%; } #tabContent, .tabContainer li a,#contentHolder{ -webkit-box-shadow:0 0 2px black; -moz-box-shadow:0 0 2px black; box-shadow:0 0 2px black; } .tabContainer li{ /* This will arrange the LI-s next to each other */ display:inline; } .tabContainer li a,.tabContainer li a:visited{ /* Memberikan style untuk posisi & ukuran font tabs */ float:left; font-size:18px; /* display:block bisa digunakan untuk alternatif tabs */ display:block; padding:7px 16px 1px; margin:4px 5px; height:29px; /* Giving positioning */ position:relative; /* CSS3 text-shadow */ text-shadow:1px 1px 1px #CCCCCC; } a:hover{ text-decoration:underline; }



a, a:visited { color:#0196e3; text-decoration:none; outline:none; } #overLine { /* The line above the active button. */ position:absolute; height:1px; background-color:white; width:90px; float:left; left:1px; top:-5px; overflow:hidden; } #main{ margin:0 auto; position:relative; width:700px; } ul .left{ /* The left span in the hyperlink */ height:37px; left:0; position:absolute; top:0; width:10px; } ul .right{ /* The right span in the hyperlink */ height:37px; right:0; position:absolute; top:0; width:10px; } /* Styling the colors individually: */ ul a.green { background:url(img/green_mid.png) repeat-x top center; color:#24570f; } ul a.green span.left { background:url(img/green_left.png) no-repeat left top; } ul a.green span.right{ background:url(img/green_right.png) no-repeat right top; }



ul a.blue { background:url(img/blue_mid.png) repeat-x top center; color:#03426e; } ul a.blue span.left { background:url(img/blue_left.png) no-repeat left top; } ul a.blue span.right { background:url(img/blue_right.png) no-repeat right top; } ul a.orange { background:url(img/orange_mid.png) repeat-x top center; color:#724104; } ul a.orange span.left { background:url(img/orange_left.png) no-repeat left top; } ul a.orange span.right { background:url(img/orange_right.png) no-repeat right top; } ul a.red { background:url(img/red_mid.png) repeat-x top center; color:#6f0100; } ul a.red span.left { background:url(img/red_left.png) no-repeat left top; } ul a.red span.right { background:url(img/red_right.png) no-repeat right top; } /* The hover states: */ ul a:hover { background-position:bottom center; text-decoration:none; } ul a:hover span.left { background-position:left bottom; } ul a:hover span.right { background-position:right bottom; }



.preloader{ display:block; margin:120px auto; } .clear{ /* Old-school clear fix hack to clear the floats: */ clear:both; height:1px; overflow:hidden; } h1,h2,p.tutInfo{ font-family:"Myriad Pro",Arial,Helvetica,sans-serif; } /* The styles below are only necessary for the styling of the demo page: */ h1{ background:#121b21; border-bottom:1px solid black; font-size:1.5em; font-weight:normal; margin-bottom:15px; padding:15px; text-align:center; } h2 { font-size:0.9em; font-weight:normal; padding-right:40px; position:relative; right:0; text-align:right; text-transform:uppercase; top:-48px; } p.tutInfo{ /* The tutorial info on the bottom of the page */ padding:10px 0; text-align:center; position:fixed; bottom:0px; background:#121b21; border-top:1px solid black; width:100%; }

Simpan file dalam format CSS lalu beri nama style.css

7. Terakhir buat engine Tabs AJAX nya dengan jQuery: Lanjutan jQuery code untuk AJAX Tabs bagian 1

$(document).ready(function(){ /* menentukan array dengan tab untuk halaman AJAX: */ var Tabs = { 'Tab one' : 'pages/page1.html', 'Tab two' : 'pages/page2.html', 'Tab three' : 'pages/page3.html', 'Tab four' : 'pages/page4.html' } /* Warna yang disiapkan untuk tiap tabs: */ var colors = ['blue','green','red','orange']; /* Warna untuk tabs yang sedang aktif: */ var topLineColor = { blue:'lightblue', green:'lightgreen', red:'red', orange:'orange' } /* Perulangan jumlah Tabs sesuai jumlah halaman: */ var z = 0; $.each(Tabs,function(i,j){ /* Membuat tanda warna untuk tabs sesuai array: */ var tmp = $(''+i+' '); /* Mengatur hyperlink setiap tabs: */ tmp.find('a').data('page',j); /* Menambahkan Tabs ke UL container: */ $('ul.tabContainer').append(tmp); }) /* Membuat cache tabs kedalam variable: */ var the_tabs = $('.tab'); the_tabs.click(function(e){ /* "this" poin untuk me-klik hyperlink: */ var element = $(this);

Lanjutan jQuery code untuk AJAX Tabs bagian 2

/* Jika tabs aktif, maka akan di return false & exit: */ if(element.find('#overLine').length) return false; /* Detecting the color of the tab (it was added to the class attribute in the loop above): */ var bg = element.attr('class').replace('tab ',''); /* Removing the line: */ $('#overLine').remove(); /* Membuat baris baru dengan parsing jQuery */ $('',{ id:'overLine', css:{ display:'none', width:element.outerWidth()-2, background:topLineColor[bg] || 'white' }}).appendTo(element).fadeIn('slow'); /* Mengecek apakah AJAX sudah membuat cached: */ if(!element.data('cache')){ /* Jika tidak ada cache, tampilkan gif preloader & lakukan AJAX request: */ $('#contentHolder').html(''); $.get(element.data('page'),function(msg){ $('#contentHolder').html(msg); /* Setelah halaman di terima, tambahkan ke cache untuk hyperlink nya: */ element.data('cache',msg); }); } else $('#contentHolder').html(element.data('cache')); e.preventDefault(); }) /* Memastikan click tab pertama agar area tidak kosong: */ the_tabs.eq(0).click(); });

8. Pembahasan code/engine jQuery pada Tabs AJAX:

TENTANG PENULIS:

1. Pengenalan sekilas tentang jQuery [beginner] 2. Cara menyisipkan jQuery ke halaman Web [beginner] 3. Pengenalan syntax jQuery (dengan Cheat Sheet) [beginner] 4. Membuat Menu Accordion dengan jQuery [beginner, intermediate] 5. Membuat Slide Show dengan jQuery [beginner, intermediate] 6. Membuat Switch Content dengan AJAX jQuery [beginner, intermediate] 7. Memanfaatkan jQuery UI untuk Drag & Drop [beginner, intermediate, advance] 8. Membuat Share/Bookmark (fungsi Drag & Drop) [beginner, intermediate, advance] 9. Menggabungkan fungsi jQuery dengan metode Modal Box [intermediate, advance] 10. Membuat Form Kontak dan Email dengan AJAX jQuery [intermediate, advance] 11. Membuat Aplikasi Chat dengan AJAX jQuery [advance] 12. Switch style halaman Web dengan jQuery UI [intermediate, advance] 13. Konsep dan prinsip Interface Web Design [beginner, intermediate, advance] 14. BONUS! Membuat Interface Web ala Facebook menggunakan jQuery [advance] 15. BONUS! Bedah code project Web Senirupa STSI Bandung [advance]

Ofan, itulah nama panggilan sehari hari dari penulis buku ini. Mulai menggemari dunia IT pada saat masih duduk di bangku SMA. Bahasa Pemrograman yang dia pelajari pertama kali adalah HTML dan Action Script 1.0 pada Macromedia Flash versi 8 dulu. Menulis dan membuat tutorial design, flash, photoshop & vector art di blog pribadinya ( http://anime7graphic.blogspot.com ) adalah aktifitas rutin di sela sela jam istirahat pada saat kuliahnya dulu, dari situlah awal mulanya tertarik pada dunia Website. 4 tahun belajar otodidak mendalami seluk beluk dunia Design & Website, akhirnya memutuskan untuk fokus di bidang Web Design & perancangan Interface Web. Keseharian nya sekarang adalah menjadi freelancer Web Designer, Graphic Designer & membuat project sistem Informasi berupa web & multimedia untuk Yayasan/Institusi. Silahkan kunjungi http://twitter.com/anime7graphic atau http://facebook.com/ofan.anime7graphic.

JQuery Framework Dan Aplikasi Website

Documents

Transcript of JQuery Framework Dan Aplikasi Website