Teknologi Aplikasi Web I I (JavaScript, AJAX) Husni husni@if.trunojoyo.ac.id Husni.trunojyo.ac.id

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

Outline • Pengantar • JavaScript • AJAX • Rangkuman

Bagaimana menambahkan beberapa logika bisnis ke dalam halaman web JAvaSCPRIPT

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 scriptmemperhitungkan 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…)

Sejarah JavaScript • Dikembangkan oleh Brendan Eichdi Netscape • Bahasa scriptinguntuk Navigator 2 • Kemudian distandardkan untuk kompatibilitas browser • ECMAScriptEdisi 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)

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…

Contoh 1: Penambahan 2 Bilangan <html> … <p> … </p> <script> var num1, num2, sum num1 = prompt("Enter first number") num2 = prompt("Enter second number") sum = parseInt(num1) + parseInt(num2) alert("Sum = " + sum) </script> … </html>

Contoh 2: Browser Event <script type="text/JavaScript"> function whichButton(event) { if (event.button==1) { alert(“Anda men-klik tombol mouse kiri!") } else { alert(“Anda men-klik tombol mouse kanan!") } } </script> … <body onmousedown="whichButton(event)"> … </body> Kejadian Mouse menyebabkan fungsi dipanggil.

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

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

Tipe Data Primitif • Boolean: truedan 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: nulldan undefined

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

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

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 (vari=0; i< sumAll.arguments.length; i++) total+=sumAll.arguments[i]; return(total); } sumAll(3,5,3,5,3,2,6)

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) { vartempA = x.a; vartempB =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

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();

JavaScript dalam Halaman Web • Dilekatkan dalam halaman HTML sebagai elemen <script> element • JavaScript ditulis langsung di dalam elemen <script> • <script> alert("Hello World!") </script> • File dilinkkan sebagai atribut srcdari elemen <script> • <script type="text/JavaScript" src=“functions.js"></script> • Atribut Event handler • <a href="http://www.yahoo.com " onmouseover="alert('hi');"> • Pseudo-URL yang dirujuk oleh link • <a href=“JavaScript: alert(‘You clicked’);”>Click me</a>

Fitur dalam Kelas This • Manajemen Stack memory • Parameter, variabel lokal dalam rekaman aktifiasi • Garbage collection • Closures • Functionbersama dengan lingkungan (variabel global) • Exceptions • Object features • Dynamiclookup, encapsulation, subtyping, inheritance • Concurrency

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

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 }

Kadang kita belum melihatnya: manipulasi halaman web JavaScriptuntuk Memodifikasi HTML

Hello World <html> <body> <script type="text/javascript"> document.write(“<h1>Hello World!</h1>"); </script> </body> </html> Pemanfaatan DOM

URL dari Dokumen <html> <body> URL dari dokumen ini adalah: <script type="text/javascript"> document.write(document.URL); </script> </body> </html>

Validasi Form HTML <html> <head> <script type="text/javascript“>function validate()…(slide berikut) </script> </head> <body> <form action="tryjs_submitpage.htm" onsubmit="return validate()"> Nama (s.d 10 huruf): <input type="text" id="fname“ size="20"><br /> Usia(1 s.d 100): <input type="text" id="age" size="20"><br /> E-mail: <input type="text" id="email" size="20"><br /> <input type="submit" value="Submit"> </form> </body> </html>

Validasi Form HTML <script type="text/javascript"> function validate(){ var at=document.getElementById("email").value.indexOf("@"); var age=document.getElementById("age").value; varfname=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<1||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") {returnfalse; } } </script> Obyek DOM Fungsi JavaScript Properti dari Obyek

Memperkenalkan paradigma “push” dalam aplikasi web Asynchronous JavaScript And XML (AJAX)

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

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.

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.

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.

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

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

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.

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.

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

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

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

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

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 XMLHttpRequestsering disediakan oleh database back-end.

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

Teknologi pada AJAX • Kombinasi dari: • XHTML (atau HTML) • Cascading Style Sheets (CSS) • Document Object Modeldimanipulasi menggunakan JavaScriptuntukmenampilkan dan berinteraksi secara dinamis dengan informasi yang disajikan • Obyek XMLHttpRequestuntuk bertukar data secara asinkron dengan server web

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 responseTextatau responseXML • Lakukan sesuai dengan hasil • Misal: Gunakan innerHTMLuntuk menyisipkan hasil ke dalam elemen yang ditunjuk

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.

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.

Menjalankan Request HTTP Biasanya diperlukan 3 langkah: • Bangun dan konfigurasikan suatu obyek XMLHttpRequest • Jalankan request • Proses respon

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

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

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

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

Contoh <html> <head> <title>Jokes</title> <script type="text/javascript"> ... 2 slides ahead ... </script> </head>

Teknologi Aplikasi Web I I (JavaScript, AJAX) Husni husni@if.trunojoyo.ac.id Husni.trunojyo.ac.id