AJAX Framework. Pemrograman Web 1. Genap

Ukuran: px

Mulai penontonan dengan halaman:

Download "AJAX Framework. Pemrograman Web 1. Genap"

Herman Pranoto
6 tahun lalu
Tontonan:

1 AJAX Framework Pemrograman Web 1 Genap

2 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.

3 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.

4 Ajax Framework Jenis-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.

5 Ajax Framework Beberapa Framework Ajax Prototype Framework JavaScript yang menyediakan fungsi-fungsi Ajax dan beberapa utiliti. jquery Ext Framework JavaScript yang menyediakan framework AJax dan beberapa utiliti. 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

6 Ajax Framework Beberapa 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.

7 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 : Untuk menggunakannya, cukup dengan menyisipkan file jquery.js pada halaman web. File jquery.js dapat di-download pada websiter resmi jquery.

8 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

9 jquery - Contoh Contoh menampilkan dan menyembunyikan suatu elemen dengan efek transisi. Sisipkan file jquery.js pada <head> <body>

10 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)

11 jquery Ajax Request Contoh <head> <body>

12 Prototype Prototype bertujuan untuk membantu memudahkan pengembangan aplikasi berbasis web dinamis. Website resmi : Untuk menggunakannya, cukup dengan menyisipkan file prototype.js pada halaman web.

13 Prototype - Sintax Sintaks dasar : $(selector) Sintaks JavaScript standar elemen = document.getelementbyid( elementid ); Dengan sintaks Prototype elemen = $( elementid ); Form Helper : $F(selector) Sintaks untuk mengambil value suatu elemen di form dengan ID= kota. kota = $F( kota );

14 Prototype - Sintax Contoh <head> <body>

15 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 :

16 MooTools - Fx Contoh animasi suatu elemen HTML Lihat contoh element.html

17 MooTools - Request MooTools Request, digunakan untuk melakukan request ke server. Contoh Jika link Get HTML di-klik, makan akan menampilkan isi suatu halaman.

18 MooTools - Request Contoh <head>

19 MooTools - Request Contoh <body>

20 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 :

21 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]

22 TERIMA KASIH