Web Engineering 2010 Pertemuan ke-09 Teknologi Aplikasi Web II (JavaScript, AJAX) Husni Husni.trunojyo.ac.id Komputasi.trunoojoyo.ac.id.

Presentasi berjudul: "Web Engineering 2010 Pertemuan ke-09 Teknologi Aplikasi Web II (JavaScript, AJAX) Husni Husni.trunojyo.ac.id Komputasi.trunoojoyo.ac.id."— Transcript presentasi:

1 Web Engineering 2010 Pertemuan ke-09 Teknologi Aplikasi Web II (JavaScript, AJAX) Husni husni@if.trunojoyo.ac.id Husni.trunojyo.ac.id Komputasi.trunoojoyo.ac.id

2 Outline •Pengantar •JavaScript •AJAX •Rangkuman 2

3 JAVASCPRIPT Bagaimana menambahkan beberapa logika bisnis ke dalam halaman web 3

4 Bahasa Scripting? • Bahasa yang digunakan untuk menulis program yang menghitung input untuk prosesor bahasa yang lain. – Satu bahasa dilekatkan dalam bahasa lain • Embedded JavaScript memperhitungkan input HTML untuk browser • Shell script memperhitungkan perintah yang dieksekusi oleh shell • Karakteristik umum dari bahasa scripting – Pemrosesan string – karena perintah sering berwujud string – Struktur program sederhana, mendefinisikan hal-hal “on the fly” – Mengutamakan fleksibilitas di atas efisiensi dan keamanan • Kurangnya keamanan itu baik? (Contoh: JavaScript digunakan untuk aplikasi web…) 4

5 Sejarah JavaScript • Dikembangkan oleh Brendan Eich di Netscape – Bahasa scripting untuk Navigator 2 • Kemudian distandardkan untuk kompatibilitas browser – ECMAScript Edisi 3 (JavaScript 1.5) • Terkait dengan Java (hanya nama) – Nama merupakan bagian dari ide penjualan :-) • Tersedia berbabagi implementasi – Implementasi SpiderMonkey C (dari Mozilla) – Implementasi Rhino Java (juga dari Mozilla) 5

6 Pemanfaatan JavaScript • Validasi form HTML • Afek khusus pada halaman web • Sistem navigasi • Kalkulasi matematika sederhana • Manipulasi Content dinamis • Aplikasi Contoh – Dashboard widgets pada Mac OS X, Google Maps, Philips universal remotes, Writely word processor, dan banyak lagi… 6

7 Contoh 1: Penambahan 2 Bilangan … var num1, num2, sum num1 = prompt("Enter first number") num2 = prompt("Enter second number") sum = parseInt(num1) + parseInt(num2) alert("Sum = " + sum) … 7

8 Contoh 2: Browser Event function whichButton(event) { if (event.button==1) { alert(“Anda men-klik tombol mouse kiri!") } else { alert(“Anda men-klik tombol mouse kanan!") } … … Kejadian Mouse menyebabkan fungsi dipanggil. 8

9 Contoh 3: Manipulasi Halaman •Beberapa kemungkinan – createElement(elementName) – createTextNode(text) – appendChild(newChild) – removeChild(node) •Contoh: tambahkan item daftar baru var list = document.getElementById('t1') var newitem = document.createElement('li') var newtext = document.createTextNode(text) list.appendChild(newitem) newitem.appendChild(newtext) 9

10 Dasar Bahasa • JavaScript bersifat case sensitive – onClick, ONCLICK, … sama di HTML, tidak case-sensitive • Pernyataan diakhiri dengan enter atau titik koma – x = x+1; same as x = x+1 • Blok pernyataan diletakkan di dalam { …} • Variabel – Definisi menggunakan pernyataan var – Defnisi secara implisit dengan penggunaan pertamanya, harus diberikan suatu nilai • Definisi implisir mempunyai cakupan global, meski ditulis di dalam lingkup bersarang 10

11 Tipe Data Primitif • Boolean: true dan false • Bilangan: desimal 64-bit – Sama dengan double dan Double dalam Java – Tidak ada tipe integer – Nilai khsusu NaN (bukan bilangan) dan Infinity • String: dereratan nol atau lebih karakter Unicode – Tidak ada tipe karakter (hanya string dengan panjang 1) – String literal menggunakan karakter ' atau “ (harus cocok) • Obyek khusus: null dan undefined 11

12 Obyek • Obyek adalah koleksi dari properti bernama • Dapat dianggap sebagai array asosiatif atau hash table – Himpunan dari pasangan nama:nilai • objBob = {name: “Bob", grade: 'A', level: 3}; – Berperan mirip list (daftar) dalam Lisp / Scheme • Anggota baru dapat ditambahkan kapanpun • objBob.fullname = 'Robert'; • Dapat mempunyai metode • Dapat dirujuk oleh obyek lain 12

13 Fungsi • Fungsi adalah obyek dengan metode bernama “( )” – Properti dari suatu obyek dapat berupa fungsi (=method) • function max(x,y) { if (x>y) return x; else return y;}; • max.desc = “mengembalikan maksimum dari 2 argumen”; – Deklarasi lokal dapat muncul dalam tubuh fungsi • Pamanggilan dalam menyertakan sejumlah argumen – functionname.length : jumlah argumen dalam definisi – functionname.arguments.length : jumlah argumen saat pemanggilan – Tipe dasar dilewatkan dengan nilai, obyek dengan referensi • Fungsi “Anonymous” – (function (x,y) {return x+y}) (2,3); 13

14 Contoh Fungsi • Fungsi Curried function CurriedAdd(x) { return function(y){ return x+y} }; g = CurriedAdd(2); g(3) • Jumlah Argumen variabel function sumAll() { var total=0; for (var i=0; i< sumAll.arguments.length; i++) total+=sumAll.arguments[i]; return(total); } sumAll(3,5,3,5,3,2,6) 14

15 Fungsi Anonymous • Fungsi anonim sangat berguna untuk callbacks – setTimeout(function() { alert("done"); }, 10000) – Evaluasi dari alert("done") ditunda sampai function dipanggil • Menirukan blok dengan definisi dan pemanggilan function var u = { a:1, b:2 } var v = { a:3, b:4 } (function (x,y) { var tempA = x.a; var tempB =x.b; // local variables x.a=y.a; x.b=y.b; y.a=tempA; y.b-tempB }) (u,v) // Works because objs are passed by ref 15

16 Fitur Obyek Dasar • Gunakan fungsi untuk membangun obyek – function car(make, model, year) { this.make = make; this.model = model; this.year = year; } • Obyek punya prototipe, dapat diubah – var c = new car(“Ford”,”Taurus”,1988); – car.prototype.print = function () { return this.year + “ “ + this.make + “ “ + this.model;} – c.print(); 16

17 JavaScript dalam Halaman Web • Dilekatkan dalam halaman HTML sebagai elemen element – JavaScript ditulis langsung di dalam elemen • alert("Hello World!") – File dilinkkan sebagai atribut src dari elemen • • Atribut Event handler • • Pseudo-URL yang dirujuk oleh link • Click me 17

18 Fitur dalam Kelas This • Manajemen Stack memory – Parameter, variabel lokal dalam rekaman aktifiasi • Garbage collection • Closures – Function bersama dengan lingkungan (variabel global) • Exceptions • Object features – Dynamic lookup, encapsulation, subtyping, inheritance • Concurrency 18

19 Evaluasi JavaScript • String evaluasi sebagai kode – Fungsi eval mengevaluasi suatu string kode Java, dalam lingkup kode dipanggil var code = "var a = 1"; eval(code); // a bernilai '1‘ var obj = new Object(); obj.eval(code); // obj.a bernilai 1 19

20 Fitur Tak-Biasa • Eval, fungsi pengecekan tipe run-time • Dukungan bagi pencocokan pola (reg. expression) • Dapat menambahkan metode ke obyek • Dapat menghapus metode dari obyek – myobj.a = 5; myobj.b = 12; delete myobj.a; • Iterasi terhadap metode dari suatu obyek – for (variabel dalam obyek) { pernyataan } 20

21 JAVASCRIPT UNTUK MEMODIFIKASI HTML Kadang kita belum melihatnya: manipulasi halaman web 21

22 Hello World document.write(“ Hello World! "); Pemanfaatan DOM 22

23 URL dari Dokumen URL dari dokumen ini adalah: document.write(document.URL); 23

24 Validasi Form HTML function validate() …(slide berikut) Nama (s.d 10 huruf): Usia(1 s.d 100): E-mail: 24

25 Validasi Form HTML function validate() { var at=document.getElementById("email").value.indexOf("@"); var age=document.getElementById("age").value; var fname=document.getElementById("fname").value; submitOK="true"; if (fname.length>10) { alert("The name must be less than 10 characters"); submitOK="false"; } if (isNaN(age)||age 100) { alert("The age must be a number between 1 and 100"); submitOK="false"; } if (at==-1) { alert("Not a valid e-mail!"); submitOK="false"; } if (submitOK=="false") { return false; } } Obyek DOM Fungsi JavaScript Properti dari Obyek 25

26 ASYNCHRONOUS JAVASCRIPT AND XML (AJAX) Memperkenalkan paradigma “push” dalam aplikasi web 26

27 Sebelum AJAX? • Halaman-halaman statis memberikan ilusi mengenai interaktifitas melalui submisi form standard. • Submisi form mengakibatkan pemuatan halaman penuh. 27

28 So, Masalahnya? • Banyak action hanya mengubah bagian kecil dari halaman tetapi halaman lengkap harus dimuat ulang (reload). • Respon server memuat content halaman lengkap, bukan hanya bagian yang akan diupdate. • Pemuatan halaman lengkap biasanya mengakibatkan beberapa tambahan request HTTp untuk gambar (image) images, style sheet, script, dan content lain yang mungkin ada dalam halaman. 28

29 AJAX - Asynchronous JavaScript and XML • Suatu antarmuka yang memungkinkan komunikasi HTTP tanpa merefresh halaman. • Halaman web dimuat ke dalam eksekusi suatu obyek dalam script (misal: JavaScript) dan diintegrasikan dengan content halaman • Jadi, halaman web dapat berkomunikasi dengan server tanpa merefresh halaman keseluruhan. 29

30 Mengapa Menggunakan AJAX • Meningkatkan pengalaman pengguna – Menaikkan usability, speed, interactivity – Memungkinkannya update bagian dari suatu halaman web tanpa memuat ulang halaman secara lengkap – Asynchronous— Tak Sinkron. Pengguna tak harus menunggu server memberikan respon. 30

31 Contoh Aplikasi AJAX • Google Maps – http://maps.google.com/ http://maps.google.com/ • Goolgle Suggest – http://www.google.com/webhp?complete=1&hl=en http://www.google.com/webhp?complete=1&hl=en • Gmail – http://gmail.com/ http://gmail.com/ • Yahoo Maps (baru) – http://maps.yahoo.com/ http://maps.yahoo.com/ • Banyak lagi.... 31

32 Contoh: Google Suggest • Memanfaatkan data dari popularitas pencarian untuk membantu perankingan. • Tidak mendapatkan saran pada history pencarian personal. 32

33 Mengapa Menggunakan AJAX? • Aplikasi AJAX dapat digunakan pada banyak dan berbeda: – Sistem operasi – Browser – Arsitektur komputer • Standard web yang digunakan AJAX (XHTML, CSS, JavaScript, XML) telah terdefinisi dengn baik dan didukung oleh semua browser utama. 33

34 Bagaimana AJAX Bekerja • JavaScript berkomunikasi secara langsung dengan server, menggunakan obyek XMLHttpRequest (atau ActiveXObject pada IE 5 & 6) • Data yang diretrieve dari server dapat dalam format bervariasi: file XML, HTML, atau text. 34

35 Request HTTP: Model Tradisional • JavaScript tradisional: – Buat form html • Gunakan GET atau POST untuk berkomunikasi dengan server – Pengguna men-click tombol “Submit” untuk mengirimkan dan menerima informasi – Pengguna MENUNGGU • Server merespon • Halaman baru dimuat bersama dengan hasilnya 35

36 Model Tradisional Sumber: http://www.openajax.org/member/wiki/Technical_Overview_Whitepaper 36

37 Sumber: http://www.adaptivepath.com/ideas/essays/archives/000385.php 37

38 Request HTTP: Cara AJAX • JavaScript berkomunikasi secara langsung dengan server, melalui obyek JavaScript XMLHttpRequest (atau ActiveXObject, IE 5 & 6) • Dengan XMLHttpRequest, halaman web dapat membuat suatu resquest ke atau mendapatkan respon dari web server tanpa pemuatan ulang • Pengguna dapat tetap pada halaman yang sama, tidak memberitahu bahwa halaman request script dan mengirim data ke server berada di latar belakang 38

39 XMLHttpRequest • API yang JavaScript dan bahasa scripting browser lain gunakan untuk mentransfer XML dan data lain antara client halaman web dan sisi server • Data yang dikembalikan dari pemanggilan XMLHttpRequest sering disediakan oleh database back-end. 39

40 Sejarah XMLHttpRequest • Microsoft Internet Explorer version 5 – Obyek ActiveX • Mozilla 1.0 menambahkannya sebagai obyek native dengan suatu API kompatibel. • Apple menambahkannya ke Safari pada version 1.2 40

41 Teknologi pada AJAX • Kombinasi dari: – XHTML (atau HTML) – Cascading Style Sheets (CSS) – Document Object Model dimanipulasi menggunakan JavaScript untuk menampilkan dan berinteraksi secara dinamis dengan informasi yang disajikan – Obyek XMLHttpRequest untuk bertukar data secara asinkron dengan server web 41

42 JavaScript • Mendefinisikan obyek untuk pengiriman request HTTP • Menginisiasi request: – Dapatkan obyek request – Tunjuk suatu fungsi response handler – Inisiasi request GET atau POST – Kirimkan data • Menangani respon – Tunggu readyState 4 dan status HTTP 200 – Ekstrak teks kembalian dengan responseText atau responseXML – Lakukan sesuai dengan hasil • Misal: Gunakan innerHTML untuk menyisipkan hasil ke dalam elemen yang ditunjuk 42

43 Sisi Server • Kita sudah mengurangi beban pada server? • Pendatang baru di AJAX kadang percaya bahwa AJAX, karena menyediakan user interface yang responsif, mengurangi trafik pada sisi server. • Nyatanya, aplikasi AJAX meminta trafil sisi server lebih besar karena setiap request AJAX melibatkan perjalanan ke server. – Karena request tersebut bersifat asinkron, AJAX membuat persepsi UI yang lebih responsif tadi, meskipun biasanya tidak mengurangi beban pada server. 43

44 So, Bagaimana Kerjanya? • JavaScript digunakan untuk: – Membuat dan mengontrol instance dari obyek XMLHttpRequest (XHR). – Menyediakan handler terhadap respon. – Memanipulasi DOM. • Obyek XMLHttpRequest: – Membolehkan skrip mengerjakan fungsionalitas client HTTP. – Mendukung operasi GET dan POST. 44

45 Menjalankan Request HTTP Biasanya diperlukan 3 langkah: 1.Bangun dan konfigurasikan suatu obyek XMLHttpRequest 2.Jalankan request 3.Proses respon 45

46 Membangun XMLHttpRequest Mozilla: Microsoft Explorer: var request = new XMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP"); 46

47 Konfigurasi XMLHttpRequest •Metode adalah GET, POST, dll. •URL harus berupa domain atau URL relatif, alasan keamanan request.open("method","URL",false) request.setRequestHeader("header","value") 47

48 Menjalankan Request request.send(content ) •content adalah yang terdapat dalam request POST •content dapat berupa "null" atau kosong 48

49 Membaca Respon request.responseText •Respon sebagai flat text request.responseXML •Respon sebagai suatu obyek dokumen (DOM) •Tersedia jika Content-Type respon bernilai text/XML request.statusrequest.statusText request.getAllResponseHeaders() request.getResponseHeader("header") 49

50 Jokes... 2 slides ahead... Contoh 50

51 Select a Joke: Joke 1 Joke 2 Joke 3 Contoh 51

52 Contoh var jDiv; function init() { jDiv = document.getElementById("jokediv");} function setJoke(value) { request = new XMLHttpRequest(); request.open("GET","joke"+value+".txt",false); request.send(null); if(request.status==200){jDiv.innerHTML=request.responseText;} else {jDiv.innerHTML = " Cannot load joke... ";} } Bagaimana jika kita belum mendapatkan respon pada tahap ini? 52

53 Contoh • Contoh di atas menggunakan “false" dalam parameter ke-3 dari open(). – Parameter ini menentukan apakah request akan dihandel secara asinkron. • True berarti bahwa script lanjut berjalan setelah metode send(), tanpa menunggu respon dari server. 53

54 Request Asinkron • Pembacaan halaman web membutuhkan waktu lama selama browser diblok • Solusi: Jalankan request secara asinkron • Yaitu, eksekusi berlanjut setelah send dipanggil tanpa menunggunya selesai • Saat request dilengkapkan, suatu fungsi yang telah didefinisi dipanggil request.open("method","URL",true) 54

55 Status XMLHttpRequest • XMLHttpRequest melalui beberapa status: • Dalam konfigurasi request, anda dapat mendefinisikan suatu fungsi untuk dipanggil pada saat status berubah: 0 0 not initialized 1 1 loading 2 2 loaded 3 3 interactive 4 4 complete request.onreadystatechange = functionName 55

56 Status XMLHttpRequest • Gunakan request.readyState untuk mendapatkan status terkini dari request • Gunakan request.abort() untuk menghentikan request 56

57 var request; function setJoke(value) { request = new XMLHttpRequest(); request.open("GET","joke"+value+".txt",true); request.onreadystatechange = updateJokeDiv; request.send(null); } Contoh Asinkron 57

58 Contoh function updateJokeDiv() { if(request.readyState<4) { jokeDiv.innerHTML = " Loading... "; return; } if(request.status==200) { jokeDiv.innerHTML = request.responseText; } else { jokeDiv.innerHTML = " Cannot load joke! "; } 58

59 Integrasi AJAX & XML Via DOM • Contoh berikut memperlihatkan bagaimana data XML dapat diparsedan ditambahkan ke dalam content dari halamn web. 59

60 XML+AJAX: Contoh Country List … Select a Continent: 60

61 XML+AJAX: Contoh Asia Africa Europe 61

62 XML+AJAX: Contoh function init() { continents = document.getElementById("continenetList"); countries = document.getElementById("countryList"); } function loadCountries() { var xmlURL = "countries-"+continents.value+".xml"; var request = new XMLHttpRequest(); request.onreadystatechange = updateCountries (); request.open("GET",xmlURL,true); request.send(null); } 62

63 XML+AJAX: Contoh function updateCountries() { if(request.readyState==4) { while(countries.length>0) { countries.remove(0); } if(request.status==200) { var names = request.responseXML.getElementsByTagName("name"); for(var i=0; i<names.length; ++i) { option = document.createElement("option"); option.text=option.value=names[i].firstChild.nodeValue; countries.appendChild(option); } 63

64 AJAX: Kekurangan Potensial • Fungsi "Back" dari browser bekerja tidak sesuai harapan • Mem-Bookmark status tertentu dari aplikasi • Navigasi mungkin sulit • Pengguna mungkin tidak memperhatikan kapan bagian kecil dri halaman berubah • Search engine tracking • Jika pengguna mendisable JavaScript • Banyak program web analytics mungkin tidak mentrack action Ajax karena dilakukannya pemuatan ulang (reload) halaman 64

65 Rangkuman • JavaScript untuk logika sisi client • Ajax mengaktifkan komunikasi asinkron antara browser dan server 65

66 Bibliography • Bacaan Utama – JavaScript reference • http://www.w3schools.com/jsref/default.asp http://www.w3schools.com/jsref/default.asp – W3Schools Ajax Tutorial http://www.w3schools.com/Ajax/Default.Asp 66

67 Tool Validasi • JavaScript Debugger (for Mozilla) – https://addons.mozilla.org/en- US/firefox/addon/216 67

68 Pertanyaan? 68