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

Slides:



Advertisements
Presentasi serupa
Pertemuan 8. 2  JavaScript dikembangkan pertama kali pada tahun 1995 di Netscape Communications dgn nama LiveScript.  Hasil kolaborasi antara Netscape.
Advertisements

Pemrograman Terstruktur
M.K. Pemrograman Web (AK )
Menunjukkan berbagai peralatan TIK melalui gambar
Database MySQL.
Tugas Praktikum 1 Dani Firdaus  1,12,23,34 Amanda  2,13,24,35 Dede  3,14,25,36 Gregorius  4,15,26,37 Mirza  5,16,27,38 M. Ari  6,17,28,39 Mughni.
Input/Output.
4/5/2017 PL/SQL SITI MUKAROMAH,S.Kom.
MATA KULIAH :DESAIN WEB
Document Object Model MATA KULIAH :DESAIN WEB Oleh : Denny Sagita R, S.Kom., M.Kom TAHUN AJARAN 2013/2014 SEMESTER GANJIL.
KONSEP PEMROGRAMAN WEB
Silahkan Salin Jawaban Anda DiKertas Sertakan : NIM. : Nama. : Kelas
JavaScript Pemrograman Web 1 Genap Tim Dosen Pemrograman Web Teknik Informatika UNPAS Pengenalan JavaScript Apa itu JavaScript?
Pengantar Common Gateway Interface (CGI) dan Perl
Nine: Pengantar HTML The Net Language. 2 Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: Memahami konstruksi dasar halaman web. Mengerti.
AUSTRALIA INDONESIA PARTNERSHIP FOR EMERGING INFECTIOUS DISEASES Bagan – Excel tingkat menengah Lokasi Tanggal Nama.
WEEK 6 Teknik Elektro – UIN SGD Bandung PERULANGAN - LOOPING.
WORKSHOP INTERNAL SIM BOK
Selamat Datang Dalam Kuliah Terbuka Ini
: : Sisa Waktu.
Konsep Pemrograman Web
Pemrograman Javascript
Fungsi Invers, Eksponensial, Logaritma, dan Trigonometri
Modul 1- Review Java.
FUNGSI MATEMATIKA DISKRIT K- 6 Universitas Indonesia
Pemrograman Terstruktur
KONTROL ALUR EKSEKUSI PROGRAM
Selamat Datang Dalam Kuliah Terbuka Ini
Situasi Saat Program Berjalan (Run-time Environment)
Web Teknologi 2Minggu …3… Page 1 MINGGU Ke Tiga Pemrograman Visual 2 Pokok Bahasan: Dasar-dasar Pengembangan Web ASP.NET Tujuan Instruksional Khusus:
Ajax Tutorial.
Pengembangan WEB Java Script Evangs Mailoa.
FUNGSI STRUKTUR DISKRIT K-8 Program Studi Teknik Komputer
Minggu 1…… Page 1 MINGGU Ke Satu Pemrograman Visual 2 Pokok Bahasan: Mengenal Web dengan ASP Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan.
PEMROGRAMAN BERBASIS WEB
Pengembangan Web Java Script Ramos Somya.
PERANCANGAN ANTARMUKA ATAU LAYAR.
Pohon (bagian ke 6) Matematika Diskrit.
Proses Oleh : Wahyu Andhyka Kusuma
JAVASCRIPT.
Javascript Javascript Javascript Javascript Javascript Javascript
PHP - AJAX.
Dasar-Dasar PHP.
PERTEMUAN KE 2 JAVA SERVER PAGES (JSP) BY : TITO SUGIHARTO
Praktikum Java Script.
Dasar-dasar Pemrograman PHP
JavaScript Pemrograman Web 1.
JavaScript Pemrograman Web 1.
Pemrograman Basis Data Berbasis Web
Pemrograman Web JavaScript
AJAX (Asynchronous Javascript And XML)
Lutfi Budi Ilmawan Univ. Muslim Indonesia
Pemrograman PHP Lanjut
AJAX Teguh S.
Pemrograman internet ABU SALAM, M.KOM.
Pengantar Common Gateway Interface (CGI) dan Perl
Pemrograman internet ABU SALAM, M.KOM.
Pemrograman internet ABU SALAM, M.KOM.
Basis Data Klien Server dan Basis data Internet Materi 7
Pengembangan Aplikasi Framework
PHP5 Internet Programming.
Pengembangan Aplikasi Framework
PEMROGRAMAN WEB Client Side XHTML, JAVASCRIPT.
Pemrograman Basis Data Berbasis Web
PHP.
Nama Kelompok : 1. Heri Kristanto 2. Fico Arditiasa Saputra
Pengantar Common Gateway Interface (CGI) dan Perl
PEMROGRAMAN WEB II.
Pemrograman Basis Data Berbasis Web
Pengantar Common Gateway Interface (CGI) dan Perl
Transcript presentasi:

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

Outline •Pengantar •JavaScript •AJAX •Rangkuman 2

JAVASCPRIPT Bagaimana menambahkan beberapa logika bisnis ke dalam halaman web 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Validasi Form HTML function validate() { var 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 !"); submitOK="false"; } if (submitOK=="false") { return false; } } Obyek DOM Fungsi JavaScript Properti dari Obyek 25

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

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

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

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

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

Contoh Aplikasi AJAX • Google Maps – • Goolgle Suggest – • Gmail – • Yahoo Maps (baru) – • Banyak lagi

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

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

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

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

Model Tradisional Sumber: 36

Sumber: 37

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

XML+AJAX: Contoh Asia Africa Europe 61

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

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

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

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

Bibliography • Bacaan Utama – JavaScript reference • – W3Schools Ajax Tutorial 66

Tool Validasi • JavaScript Debugger (for Mozilla) – US/firefox/addon/216 67

Pertanyaan? 68