pemrograman web pti15010 umumnyajs diletakkan di dalam tag , tetapi bisa juga diletakkan dalam tag ...
Post on 04-Apr-2018
223 Views
Preview:
TRANSCRIPT
Pemrograman WebAJAX
M AHARDEKA TRI A NANTA
DISUSUNOLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015
deka.kelas@gmail.com
1
PengantarAJAX = Asynchronous JavaScript And XML.
AJAX != programming language
AJAX adalah suatu teknik pertukaran data dengan server dan meng-update bagian dari halaman web tanpa melakukan reload keseluruhan halaman
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 2
JavascriptJavascript adalah sebuah bahasa pemrograman yang dapat memberikan fituranimasi, data dinamis, interaktivitas, dan efek visual pada dokumen HTML.
Javascript != Java
Javascript Netscape Inc.
Java SUN Microsystems (sekarang ORACLE)
Javascript dahulu dikenal sebaga ECMAScript
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 3
Contoh Aplikasi Javascript
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 4
Penggunaan JSJS diidentifikasi oleh browser dengan menggunakan tag <script>
Pada umumnya JS diletakkan di dalam tag <head> , tetapi bisa juga diletakkan dalam tag<body> html
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 5
File Javascript Eksternal
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 6
JS Grammar StructurePada dasarnya struktur bahasa JS serupa dengan baha perograman C atau C++ dengan sedikitperbedaan.
Statement Setiap statement diakhiri dengan tanda titik koma (semicolon) ;
Built-in Function perintah yang dapat digunakan untuk berinteraksi antara web browser, program JS, dan HTML. Contoh : alert() document.write() isNan()
Tipe-tipe data JS :var length = 16; // Numbervar lastName = "Johnson"; // Stringvar cars = ["Saab", "Volvo", "BMW"]; // Arrayvar x = {firstName:"John", lastName:"Doe"}; // Object
jawaban = true; // Boolean
if( jawaban == true ) alert( "Jawabannya benar!" );
else alert( "jawabannya salah!");
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 7
Penamaan Variabel (Unique Identifiers)The general rules for constructing names for variables (unique identifiers) are:◦ Names can contain letters, digits, underscores, and dollar signs.
◦ Names must begin with a letter
◦ Names can also begin with $ and _ (but we will not use it in this tutorial)
◦ Names are case sensitive (y and Y are different variables)
◦ Reserved words (like JavaScript keywords) cannot be used as names ex: alert, window, document, etc. [ read more in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords
http://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf ]
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 8
Penggabungan VariabelBeberapa variabel dengan tipe data yang berbeda dalam JS dapat digabungkan secara langsung
dengan menggunakan operator tambah +
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 9
Kontrol Logika
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 10
var nilai;
var hasil;
nilai = 82;
if (nilai>80) {
hasil = "Baik";
} else {
hasil = "Kurang";
}
// variabel hasil akan bernilai "Baik"
var skor;
skor = "A";
switch (skor){
case "A": alert("Istimewa");
break;
case "B+": alert("Sangat Memuaskan")
break;
case "B": alert("Memuaskan")
break;
case "C+": alert("Lebih dari cukup")
break;
case "C": alert("Cukup")
break;
case "D": alert("Kurang")
break;
default : alert("Nggak komentar deh...");
}
// pesan yang ditampilkan pada kotak dialog adalah "Istimewa!"
IF - ELSESWITCH - CASE
Perulangan
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 11
for looping do-while looping
while looping
Fungsi
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 12
DOM (Document Object Model)Merupakan cara pandang JavaScript didalam melihat struktur data daridokumen markup yang terdiri dari tag, ID dan atribut.
Sebuah dokumen HTML direpresentasikan oleh DOM dalam bentuk sebuahstruktur hirarkis pohon. Misalkan sebuah dokumen HTML sederhana sepertiberikut:
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 13
DOM (Document Object Model)
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 14
Selengkapnya (sumber) = http://bertzzie.com/knowledge/javascript/Document-Object-Model.html
DOM Function
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 15
DOM Object
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 16
DOM Property
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 17
Contoh Aplikasi AJAX
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 18
Asynchronous VS SynchronousSynchronous Metode request HTTP yang sering digunakan dengan cara iniadalah metode POST dan GET.
Pada saat client mengirimkan request terhadap server,client akan menunggusampai proses yang diminta selesai dikerjakan, kemudian server akanmengembalikan hasil proses tersebut kepada client.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 19
Source, Ajax.R. A. Yunmar, S.Kom
Asynchronous VS Synchronous
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 20
Asynchronous VS SynchronousAsynchronous Sebagian besar interaksi dan pertukaran data dilakukandibelakang layar.
Halaman web tidak harus selalu dimuat ulang secara keseluruhan setiap kali pengguna melakukan perubahan.
Meningkatkan interaktifitas, kecepatan dan usability.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 21
Source, Ajax.R. A. Yunmar, S.Kom
Asynchronous VS Synchronous
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 22
Web Model
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 23
AJAX Component XMLHttpRequest Object.
DOM (Document Object Model).
XML.
JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingatJSON adalah bagian dari JavaScript, sehingga pengolahannya akan lebih mudah.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 24
XMLHttpRequestSebuah object JavaScript yang digunakan untuk menangani request browser kepada web server tanpa perlu melakukan reload (background request) terhadap halaman web.
Sebagian besar web browser mendefinisikan XMLHttpRequest sebagaiJavaScript object.
Internet Explorer mendefinisikan object ini sebagai ActiveX Control.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 25
XMLHttpRequestGeneral Browser
◦ xmlhttp = new XMLHttpRequest();
Internet Explorer 7 Above
◦ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
Internet Explorer 6 Below
◦ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 26
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 27
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",'isi.txt',true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
<h1>we are trying AJAX </h1>
<p> aaaaaaa </p>
isi.txt
XMLHttpRequestXMLHttpRequest Method
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 28
readyState - XMLHttpRequest PropertyDigunakan untuk mengetahui status perubahan dari request yang dikirimkan ke web server.
Properti ini diubah melalui event onreadystatechange.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 29
Status – XMLHttpRequest Property
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 30
statusText – XMLHttpRequest PropertySama halnya seperti properti status, properti statusText digunakan untukmenyatakan response status dari server.
Status yang diberikan dalam bentuk keterangan.
Misalnya: respon 404 akan disampaikan dalam bentuk "Not Found", 403 dalambentuk "Forbidden" dan seterusnya.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 31
responseText – XMLHttpRequest PropertyProperti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format plaint text (teks murni).
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 32
responseXML – XMLHttpRequest PropertyProperti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format XML.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 33
onreadystatechange - XMLHttpRequestEventDigunakan untuk mengetahui status dari request yang telah dikirimkan.
Ketika terjadi perubahan pada status request, event ini akan dijalankan dan mengupdate nilai dari property readyState yang terdapat pada object XMLHttpRequest.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 34
onreadystatechange - XMLHttpRequestEventKetika metode open() berhasil dijalankan, nilai dari properti readyState akan diubah menjadi 1.
Ketika metode send() berhasil dijalankan dan response header telah diterima, nilai dari properti readyState akan diubah menjadi 2
Ketika browser mendapat perintah dari server untuk memulai memuat data yang diinginkan, event onreadystatechange akan mengubah nilai dari property readyState menjadi 3.
Ketika data yang diinginkan telah berhasil didownload dengan lengkap, event onreadystatechange akan mengubah nilai dari properti readyState menjadi 4.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 35
Object innerHTMLObject innerHTML merupakan turunan dari object document.
innerHTML berisi content dari element HTML, yaitu nilai / value yang terletak diatara tag pembuka dan tag penutup.
Contoh:
<div id="divContent">innerHTML disini</div>
<span id="element_2">innerHTML disini</span>
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 36
Object innerHTMLUntuk dapat mengambil atau mengubah data secara on the fly (tanpamelakukan reload) pada sebuah element HTML, diperlukan sebuah pengenalyang melekat pada element tersebut. Pengenal ini dapat didefinisikan melaluiatribut ID.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 37
XML•XML merupakan singkatan dari eXtensible Markup Language.
•Seperti halnya HTML, XML tersusun dari element-element.
•Element-element ini terdiri dari dari tag pembuka dan tag penutup serta mempunyai ID danatribut.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 38
HTML vs XML•HTML• Element penyusunnya sudah terstandarisasi.
•XML• Memungkinkan element-element XML dideklarasikan dengan lebih fleksibel. Dengan begitu,
setiap orang dapat menentukan element yang akan dibuat sesuai keinginannya.
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 39
HTML vs XML
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 40
ReferencesJavascript http://www.w3schools.com/js/default.asp
Document Object Model http://bertzzie.com/knowledge/javascript/Document-Object-Model.html
AJAX http://www.w3schools.com/ajax/default.asp
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 41
DISUSUN OLEH : TIM AJAR MATA KULIAH PEMROGRAMAN WEB 2014-2015 42
TERIMA KASIHSEMOGA BERMANFAAT
top related