ajax framework - staff.uniku.ac.id filetim dosen pemrograman web 1 2011-2012. teknik informatika...

AJAX Framework

Pemrograman Web 1Genap 2011 - 2012

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Framework

Apa itu Framework (Software Framework) ?

Kumpulan pustaka-pustaka (library) perangkat lunak yang script-nya dapat

digunakan kembali (reusable) yang terbungkus menjadi sebuah API.

API (Application Programming Interface), sebuah perangkat lunak yang

menyediakan layanan untuk interaksi antar perangkat lunak.


Ajax Framework

Apa itu Ajax Framework?

Adalah sebuah framework yang dapat membantu untuk mengembangkan

aplikasi web yang menggunakan Ajax

Kumpulan teknologi yang digunakan untuk membuat halaman web dinamis.

Tujuan dari Ajax framework, adalah untuk menyediakan script-script Ajax (Ajax

Engine), serta menghubungkan antara server dengan client.


Ajax FrameworkJenis-jenis framework Direct Ajax Framework

Framework ini relatif kecil, membutuhkan keahlian HTML, CSS, dan Ajax. Biasa digunakan di website online shopping.

Indirect Ajax Framework Framework ini menggunakan “bahasa tingkat tinggi” sebagai pengganti script Ajax atau

JavaScript. Biasanya berupa library, modul, class, yang mengurus komunikasi (client – server),

termasuk manipulasi DOM dan penanganan event.

Ajax Component Framework Menyediakan komponen-komponen siap pakai, seperti tabel, button, form. Cocok

digunakan untuk membangun aplikasi berbasis web.

Server-driven Ajax Framework Menyediakan pembangunan aplikasi server-side berbasis komponen dengan dukungan

Ajax.


Ajax FrameworkBeberapa Framework Ajax Prototype

Framework JavaScript yang menyediakan fungsi-fungsi Ajax dan beberapa utiliti.

jQuery Framework JavaScript yang menyediakan framework AJax dan beberapa utiliti.

Ext Library pengembangan dari Prototype, jQuery dan YUI.

Script.aculo.us Digunakan bersamaan dengan Prototype, fitur utamanya untuk animasi dan

pengembangan interface

MooTools Framework JavaScript modular dan sederhana yang paling banyak diketahui orang,

digunakan untuk efek visual dan transisi


Ajax FrameworkBeberapa Framework Ajax Yahoo! UI Library

Kumpulan utiliti dan kontrol, untuk membangun aplikasi berbasis web yang interaktif menggunakan teknik DOM, DHTML dan Ajax.

Dojo Toolkit Kumpulan fungsi-fungsi DHTML open source

Backbase Framework Ajax skala besar (enterprise) untuk membuat aplikasi berbasis web skala

besar.


jQuery jQuery adalah Library JavaScript kecil dan cepat, yang menyederhanakan pembuatan transisi

dokumen HTML, event handling, animasi, dan interaksi Ajax untuk membuat web dengan cepat.

Fitur-fitur jQuery

Seleksi dan manipulas elemen HTML

Manipulasi CSS

Menangani event HTML

Efek dan animasi JavaScript

Ajax

Website resmi : http://jquery.com/

Untuk menggunakannya, cukup dengan menyisipkan file jquery.js pada halaman web. File jquery.js dapat di-download pada websiter resmi jQuery.

http://jquery.com/�


jQuery - Sintax

Sintaks dasar : $(selector).action()

$ mendifisikan jQuery

(selector) perintah untuk mencari elemen HTML yang ditentukan.

action(), aksi jQuery yang akan diterapkan pada elemen HTML.

Contoh

$(this).hide() – Menyembunyikan elemen

$(“p”).hide(“slow”) – Menyembunyikan semua tag <p> dengan efek transisi “slow”.

$(“p.test”).hide() – Menyembunyikan tag <p> dengan class=“test”

$(“#test”).hide() – Menyembunyikan elemen dengan id=“test”


jQuery - Contoh Contoh menampilkan dan menyembunyikan suatu elemen dengan efek transisi.

Sisipkan file jquery.js pada <head>

<body>


jQuery – Ajax Request

jQuery menyediakan fungsi-fungsi untuk mengembangkan web berteknologi Ajax.

Dengan jQuery Ajax, kita dapat melakukan request file TXT, HTML, XML atau JSON (JavaScript Object Notation, alternatif dari XML) dari server menggunakan HTTP GET atau HTTP POST.

Write Less, Do More Contoh beberapa fungsi untuk melakukan Ajax Request :

$(selector).load(url, data, callback)

$.get(url, data, callback, type) data : data yang akan dikirimkan ke server

callback : fungsi yang akan dieksusi ketika data sudah diterima.

type : tipe data yang akan diterima dari server (HTML, xml, script, text)


jQuery – Ajax Request Contoh

<head>

<body>


Prototype

Prototype bertujuan untuk membantu memudahkan pengembangan aplikasi

berbasis web dinamis.

Website resmi : http://www.prototypejs.org/

Untuk menggunakannya, cukup dengan menyisipkan file prototype.js pada

halaman web.

http://www.prototypejs.org/�


Prototype - Sintax Sintaks dasar : $(selector)

Sintaks JavaScript standar

Dengan sintaks Prototype

Form Helper : $F(selector) Sintaks untuk mengambil value suatu elemen di form dengan ID=“kota”.

elemen = document.getElementById(“elementID”);

elemen = $(“elementID”);

kota = $F(“kota”);


Prototype - Sintax Contoh

<head>

<body>


MooTools MooTools (My Object-Oriented Tools)

Komponen-komponen Mootools: Core : Kumpulan fungsi inti yang dibutuhkan oleh komponen lain.

More : Perluasan dari Core, berisi kumpulan add-on

Class : Library utama untuk instansiasi object Class.

Native : Berisi fungsi yang menyederhanakan coding JavaScript.

Element : Kumpulan fungsi untuk interaksi dengan elemen HTML.

Fx : Kumpulan fungsi untuk membuat animasi.

Request : Kumpulan fungsi untuk HTTP Request

Window : Menyediakan layanan agar fungsi-fungsi MooTools dapat berjalan di semua web browser. (cross-browser)

Website resmi : http://mootools.net/


MooTools - Fx Contoh animasi suatu elemen HTML

Lihat contoh element.html


MooTools - Request MooTools Request, digunakan untuk melakukan request ke server. Contoh

Jika link Get HTML di-klik, makan akan menampilkan isi suatu halaman.


MooTools - Request Contoh

<head>


MooTools - Request Contoh

<body>


Lightbox

Dikembangkan oleh Lokesh Dhakar.

Lightbox adalah aplikasi JavaScript yang digunakan untuk menampilkan gambar

menggunakan window dialog.

Merupakan pengembangan dari framework Prototype dan Script.aculo.us

Fungsi utama Lightbox, adalah untuk menampilkan gambar dengan ukuran besar

tanpa berpindah halaman.

Website : http://www.lokeshdhakar.com/projects/lightbox2/


Lightbox Cara penggunaan Lightbox

1. Sisipkan 3 file JavaScript utama pada header.

2. Sisipkan file CSS pada header.

3. Aktifkan lightbox pada suatu tag, dengan memberi atribut rel=“lightbox” Jika ingin mengelompokkan gambar, gunakanan rel=“lightbox[nama]”

TERIMA KASIH

ajax framework - staff.uniku.ac.id filetim dosen pemrograman web 1 2011-2012. teknik informatika...

Documents