Post on 11-Jan-2016
description
Web Engineering 2010
Pertemuan ke-09
Teknologi Aplikasi Web II(JavaScript, AJAX)
Husnihusni@if.trunojoyo.ac.id
Husni.trunojyo.ac.id
Komputasi.trunoojoyo.ac.id
Outline
• Pengantar• JavaScript• AJAX• Rangkuman
JAVASCPRIPT
Bagaimana menambahkan beberapa logika bisnis ke dalam halaman web
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…)
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)
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, sumnum1 = 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') var newitem = document.createElement('li') var newtext = 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: 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
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 Curriedfunction CurriedAdd(x) { return function(y){ return x+y} };g = CurriedAdd(2);g(3)
• Jumlah Argumen variabelfunction 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)
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 functionvar 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
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 src dari 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
– Function bersama dengan lingkungan (variabel global)
• Exceptions• Object features
– Dynamic lookup, encapsulation, subtyping, inheritance
• Concurrency
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
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 }
JAVASCRIPTUNTUK MEMODIFIKASI HTML
Kadang kita belum melihatnya: manipulasi halaman web
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; 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<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") { return false; }}</script>
Obyek DOM
Fungsi JavaScript
Properti dari Obyek
ASYNCHRONOUS JAVASCRIPT AND XML (AJAX)
Memperkenalkan paradigma “push” dalam aplikasi web
Sebelum AJAX?
• Halaman-halaman statis memberikan ilusi mengenai interaktifitas melalui submisi form standard.
• Submisi form mengakibatkan 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.
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
Model Tradisional
Sumber: http://www.openajax.org/member/wiki/Technical_Overview_Whitepaper
Sumber: http://www.adaptivepath.com/ideas/essays/archives/000385.php
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
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.
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 Model dimanipulasi
menggunakan JavaScript untuk menampilkan dan berinteraksi secara dinamis dengan informasi yang disajikan
– Obyek XMLHttpRequest untuk 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 responseText atau responseXML– Lakukan sesuai dengan hasil
• Misal: Gunakan innerHTML untuk 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:1. Bangun dan konfigurasikan suatu obyek
XMLHttpRequest2. Jalankan request3. Proses respon
Membangun XMLHttpRequest
Mozilla:
Microsoft Explorer:
var request = new XMLHttpRequest();
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
• Respon sebagai 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")
<html>
< head>
< title>Jokes</title>
< script type="text/javascript>"
...2 slides ahead...
/< script>
/< head>
Contoh
<body onload="init(); setJoke()">
<h1>Select a Joke:</h1>
<p><select onchange="setJoke(value)">
<option value="1" selected="selected">Joke 1</option>
<option value="2">Joke 2</option>
<option value="3">Joke 3</option>
</select></p>
<div id="jokediv"></div>
</body>
</html>
Contoh
Contoh
<script type="text/javascript">
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 = "<i>Cannot load joke...</i>";}
}
</script>Bagaimana jika kita belum mendapatkan
respon pada tahap ini?
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.
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)
Status XMLHttpRequest
• XMLHttpRequest melalui beberapa status:
• Dalam konfigurasi request, anda dapat mendefinisikan suatu fungsi untuk dipanggil pada saat status berubah:
0 not initialized 1 loading 2 loaded
3 interactive 4 complete
request.onreadystatechange = functionName
Status XMLHttpRequest
• Gunakan request.readyState untuk mendapatkan status terkini dari request
• Gunakan request.abort() untuk menghentikan request
var request;function setJoke(value) { request = new XMLHttpRequest(); request.open("GET","joke"+value+".txt",true); request.onreadystatechange = updateJokeDiv; request.send(null);}
Contoh Asinkron
Contoh
function updateJokeDiv() { if(request.readyState<4) { jokeDiv.innerHTML = "<i>Loading...</i>"; return;
} if(request.status==200) { jokeDiv.innerHTML = request.responseText; } else { jokeDiv.innerHTML = "<i>Cannot load joke!</i>";
}}
Integrasi AJAX & XML Via DOM
• Contoh berikut memperlihatkan bagaimana data XML dapat diparsedan ditambahkan ke dalam content dari halamn web.
XML+AJAX: Contoh
<html>
<head><title>Country List</title>
<script type="text/javascript">
…
</script>
</head>
<body onload="init();loadCountries()">
<h1>Select a Continent:</h1>
XML+AJAX: Contoh
<p> <select id="continenetList” onchange="loadCountries()">
<option value="asia">Asia</option> <option value="africa">Africa</option> <option value="europe">Europe</option> </select> </p> <p><select size="10" id="countryList"></select></p>
</body></html>
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); }
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);
} }
}
}
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
Rangkuman
• JavaScript untuk logika sisi client
• Ajax mengaktifkan komunikasi asinkron antara browser dan server
Bibliography
• Bacaan Utama– JavaScript reference
• http://www.w3schools.com/jsref/default.asp
– W3Schools Ajax Tutorialhttp://www.w3schools.com/Ajax/Default.Asp
Tool Validasi
• JavaScript Debugger (for Mozilla)– https://addons.mozilla.org/en-US/firefox/addon/
216
Pertanyaan?