Pemrograman internet ABU SALAM, M.KOM

REVIEW TUGSA AKHIR Tugas 1 : Progress Laporan Analisa Perancangan Sistem (CD, UML, Deskrpisi Fitur Sistem) Antarmuka Aplikasi (Umum, Member, Admin) -> Kondisional sesuai tema yang diambil. Laporan Analisa Perancangan Database (Laporan Analisa system posting di BLOG, antarmuka upload di hosting Paling lambat 1 hari sebelum UTS PEM. INET

REVIEW javascript Apa itu JavaScript? Syntax? Implementasi?

HTML DOM DOM, singkatan dari Document Object Model, adalah sebuah cross-platform dan sebuah bahasa independen untuk merepresentasikan dan berinteraksi dengan objek dalam HTML, XHTML, dan dokumen XML. HTML DOM adalah cara baku untuk mengakses dan memanipulasi dokumen HTML. Setiap dokumen HTML yang ditampilkan pada browser akan menjadi sebuah Document Object. Sebuah Document Object menyediakan akses ke semua elemen HTML di dalam halaman. Setiap elemen HTML dapat diakses dengan JavaScript atau bahasa pemrograman lain. Panduan lengkap mengenai HTML DOM dapat dilihat di http://www.w3schools.com/jsref/default.asp

HTML DOM - Struktur Dalam HTML DOM, semua yang berada di dokumen HTML adalah sebuah node (titik) Seluruh dokumen HTML disebut document node. Setiap elemen HTML disebut element node. Text di dalam elemen HTML disebut text node. Setiap atribut TAG HTML disebut atribute node. Komentar disebut comment node.

HTML DOM - Struktur

HTML DOM - Properti

HTML DOM - Fungsi

Cara Akses Elemen Mengakses suatu elemen (node) dapat dilakukan dengan 3 cara : Dengan menggunakan getElementById() Contoh : x = document.getElementById(“intro”); Dengan menggunakan getElementsByTagName() Contoh : x = document.getElementsByTagName(“input”); Mengakses seluruh elemen input dari dokumen HTML. Contoh : x = document.getElementById(“form”).getElementsByTagName(“input”); Mengakses seluruh elemen input dari elemen dengan ID form. y = x[0] Mengakses elemen input pertama.

Cara Akses Elemen

HTML DOM OBJECTS Setiap elemen HTML yang ditampilkan di browser akan menjadi sebuah objek yang dapat dimanipulasi. Ada banyak macam DOM Object, namun ada 3 objek utama yaitu : Document Object Setiap halaman yang ditampilkan di browser akan menjadi Document Object. Document object menyediakan akses ke semua elemen HTML Event Object Memberi informasi tentang event (aksi user) yang terjadi. Merepresentasikan kondisi elemen saat diberi event, misalkan saat suatu button di klik, atau keyboard ditekan. Event biasanya dikombinasikan dengan pemanggilan suatu fungsi. Element Object Dipergunakan untuk memanipulasi elemen HTML.

DOM - Document Object

DOM – Document Object

DOM – Document Object

DOM – Document Object

DOM – Document Object

DOM – Document Object

DOM – Event Object Event adalah aksi yang dapat terdeteksi oleh JavaScript. Dengan menggunakan Event, kita dapat membuat halaman web yang dinamis. Setiap elemen HTML dapat diberi event yang akan memicu suatu JavaScript. Misal event onClick, yang akan melakukan aksi jika suatu element di klik. Event dikombinasikan dengan fungsi, dan fungsi tidak akan tereksekusi jika Event yang ditentukan belum terjadi (pemanggilan fungsi). Macam-macam event onClick onLoad, onUnload onFocus, onBlur, onChange onSubmit onMouseOver, onMouseOut Untuk macam – macam event yang dapat terdeteksi JavaScript, silahkan kunjungi url ini http://www.w3schools.com/jsref/dom_obj_event.asp

DOM – Event Object

DOM – Event Object

DOM – HTML Element Object

DOM – HTML Element Object

DOM – HTML Element Object

HTML DOM Anchor Body Button Form Frameset Image Macam-macam objek HTML DOM, diantaranya : Anchor Body Button Form Frameset Image Input (text, password, button, checkbox, radio, hidden, submit) Select Option Table Style

DOM – Select Object

DOM – Select Object

DOM – Select Object

AJAX - Intro AJAX = Asynchornous JavaScript And XML Diperkanalkan oleh Jesse James Garret pada tahun 2005. AJAX bukan bahasa pemrograman baru, tapi teknik baru dalam penggunaan standar yang telah ada. AJAX berbasiskan pada JavaScript dan HTTP Request. Dengan AJAX, akses data ke server yang dikirim oleh client atau sebaliknya menjadi lebih cepat dibandingkan mekanisme biasa. Dengan AJAX tidak perlu melakukan proses loading seluruh halaman, hanya bagian tertentu saja yang diinginkan.

AJAX - Intro AJAX dapat diintegrasikan dengan server side scripting seperti PHP, ASP, JSP. Contoh beberapa web yang menerapkan teknologi AJAX : Google ( Google Suggest, Google Map, Gmail ) Yahoo Flickr.com Twitter Facebook Youtube

Keunggulan Penggunaan AJAX Aplikasi web menjadi lebih interaktif dibanding dengan web konvensional. Update data tidak perlu me-reload keseluruhan halaman, melainkan hanya yang dibutuhkan saja. Aplikasi web menjadi lebih cepat dibanding dengan web konvensional. Komunikasi data dengan server dilakukan di-background.

AJAX - Intro Kombinasi standar web yang digunakan pada teknologi AJAX : XMLHTTPRequest object Untuk pertukaran data secara asinkron dengan server. JavaScript / DOM Untuk interaksi atau menampilkan informasi ke halaman. CSS Untuk merubah style dari data. XML Sering digunakan sebagai format untuk transfer data antara server dengan client.

Synchronous

Asynchronous

Mekanisme AJAX Proses berawal dari web browser client. Client me-request sebuah halaman ke server (HTML, PHP, ASP) melalui JavaScript. Server akan memproses request tersebut. Server mengirimkan respon dalam bentuk XML atau HTML, kemudian dikirim kembali ke browser client untuk diolah oleh JavaScript. Hasil olahan JavaScript tersebut akan ditampilkan di browser tanpa harus me-reload halaman web.

HTTP Request

HTTP Request

HTTP Response

HTTP Request

HTTP Request

XML XML = eXtensible Markup Language. Didisain untuk transfer, simpan, dan membuat struktur data. Terdiri atas tag-tag yang ditentukan sendiri oleh pembuat. XML hanya text biasa, yang dapat dibuka oleh semua text editor. Biasanya digunakan untuk pertukaran data antar aplikasi, antar platform Web based – desktop based, atau sebaliknya. Antar web server. Antar aplikasi desktop based. Sangat disarankan oleh W3C Contoh penggunaan : RSS Feed.

XML

XML

AJAX - XMLHttpRequest

AJAX – Kirim Request ke Server

AJAX – Respon dari Server

AJAX – onReadyStateChange Event

AJAX – onReadyStateChange Event

Contoh 1 – AJAX responseText

Contoh 1 – AJAX responseText

Contoh 2 – AJAX responseXML

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

Beberapa 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

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.

jQuery

jQuery - Sintax

jQuery - Contoh

jQuery – Ajax Request

jQuery – Ajax Request

Prototype

Prototype - Sintax

Prototype - Sintax

MooTools

Lightbox

terimakasih Kerjakan Tugas UTS dengan sebaik-baiknya Selamat belajar….. 