Pemrograman internet ABU SALAM, M.KOM.

Presentasi berjudul: "Pemrograman internet ABU SALAM, M.KOM."— Transcript presentasi:

1 Pemrograman internet ABU SALAM, M.KOM

2 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

3 REVIEW javascript Apa itu JavaScript? Syntax? Implementasi?

4 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

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

6 HTML DOM - Struktur

7 HTML DOM - Properti

8 HTML DOM - Fungsi

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

10 Cara Akses Elemen

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

12 DOM - Document Object

13 DOM – Document Object

14 DOM – Document Object

15 DOM – Document Object

16 DOM – Document Object

17 DOM – Document Object

18 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

19 DOM – Event Object

20 DOM – Event Object

21 DOM – HTML Element Object

22 DOM – HTML Element Object

23 DOM – HTML Element Object

24 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

25 DOM – Select Object

26 DOM – Select Object

27 DOM – Select Object

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

29 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

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

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

32 Synchronous

33 Asynchronous

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

35 HTTP Request

36 HTTP Request

37 HTTP Response

38 HTTP Request

39 HTTP Request

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

41 XML

42 XML

43 AJAX - XMLHttpRequest

44 AJAX – Kirim Request ke Server

45 AJAX – Respon dari Server

46 AJAX – onReadyStateChange Event

47 AJAX – onReadyStateChange Event

48 Contoh 1 – AJAX responseText

49 Contoh 1 – AJAX responseText

50

51

52

53 Contoh 2 – AJAX responseXML

54

55

56

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

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

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

60 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

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

62 jQuery

63 jQuery - Sintax

64 jQuery - Contoh

65 jQuery – Ajax Request

66 jQuery – Ajax Request

67 Prototype

68 Prototype - Sintax

69 Prototype - Sintax

70 MooTools

71 Lightbox

72

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