Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode...
Transcript of 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode...
![Page 1: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/1.jpg)
AJAXPemrograman Web
Rajif Agung Yunmar, S.Kom
![Page 2: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/2.jpg)
Synchronous
● Metode request HTTP yang sering digunakan dengan
cara ini adalah metode POST dan GET.
● Pada saat client mengirimkan request terhadap server,
client akan menunggu sampai proses yang diminta
selesai dikerjakan, kemudian server akan
mengembalikan hasil proses tersebut kepada client.
![Page 3: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/3.jpg)
Synchronous
client web browser client web browser
web server
menunggu
waktu
req
ue
st
resp
on
![Page 4: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/4.jpg)
AJAX
● Singkatan dari Asynchronous JavaScript And XML.
● Bukanlah bahasa pemrograman, melainkan suatu teknik yang digunakan untuk membuat aplikasi website menjadi lebih interaktif.
![Page 5: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/5.jpg)
Asynchronous
● Sebagian besar interaksi dan pertukaran data dilakukan dibelakang layar.
● Halaman web tidak harus selalu dimuat ulang secara keseluruhan setiap kali pengguna melakukan perubahan.
● Meningkatkan interaktifitas, kecepatan dan usability.
![Page 6: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/6.jpg)
Asynchronous
client web browser
web server
![Page 7: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/7.jpg)
AJAX Component
● XMLHttpRequest Object.● DOM (Document Object Model).● XML.● JSON dapat menjadi pilihan alternatif sebagai
dokumen transfer, mengingat JSON adalah bagian dari JavaScript, sehingga pengolahannya akan lebih mudah.
![Page 8: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/8.jpg)
XMLHttpRequest
● Sebuah object JavaScript yang digunakan untuk menangani request browser kepada web server tanpa perlu melakukan reload (background request) terhadap halaman web.
![Page 9: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/9.jpg)
XMLHttpRequest
● Sebagian besar web browser mendefinisikan XMLHttpRequest sebagai JavaScript object.
● Internet Explorer mendefinisikan object ini sebagai ActiveX Control.
![Page 10: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/10.jpg)
Creating XMLHttpRequest Object
● General Browser xmlhttp = new XMLHttpRequest();
● Internet Explorer 7 Above xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
● Internet Explorer 6 Below xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
![Page 11: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/11.jpg)
XMLHttpRequest Examplefunction createXMLHttpObject(){ var xmlhttp = false;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){ xmlhttp = new XMLHttpRequest(); } if(!xmlhttp){ alert("Terjadi kesalahan saat pembuatan XMLHttpRequest object!"); } else { alert("XMLHttpRequest berhasil dibuat."); } return xmlhttp;}
![Page 12: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/12.jpg)
XMLHttpRequest Example<html> <head> <title>Pembuatan Object XMLHttpRequest</title> <script language="JavaScript" src="09.latihan_01.js"></script> <head> <body onload="createXMLHttpObject();"> Halaman ini memanggil fungsi createXMLHttpObject() yang berguna untuk membuat object XMLHttpRequest. </body></html>
![Page 13: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/13.jpg)
XMLHttpRequest Method Me tode Deskripsi
open() Melakukan komunikasi dengan serversend() Mengirimkan requestabort() Membatalkan request
![Page 14: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/14.jpg)
readyState - XMLHttpRequest Property
● Digunakan untuk mengetahui status perubahan dari request yang dikirimkan ke web server.
● Properti ini diubah melalui event onreadystatechange.
![Page 15: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/15.jpg)
readyState – XMLHttpRequest Property
Status Deskripsi
0 Uninitialized. Belum diinisialisasi. Koneksi belum terbentuk.
1 Loading . Metode open() berhasil dijalankan.
2 Loaded . Koneksi terbentuk dan response header telah diterima.
3 Interactive . Respon dari server dalam bentuk data sedang didownload.
4 Completed . Data selesai didownload.
![Page 16: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/16.jpg)
Status – XMLHttpRequest PropertyKode Deskripsi
200 OK . Dokumen atau file ditemukan dan dapat diakses.
304 Not Modified . Mengindikasikan bahwa salinan dokumen yang terdapat pada cache web browser sama persis (tidak ada yang berubah) dengan dokumen yang ada di web server.
401 Unauthorized . Dibutuhkan authorisasi khusus untuk mengakses dokumen.
403 Forbidden . User tidak memiliki hak untuk mengakses dokumen yang diminta.
404 Not Found . Dokumen atau file yang dimaksud tidak ditemukan.
500 Internal Service Error . Terdapat kesalah teknis didalam server.
503 Service Unavailable . Jenis layanan yang diinginkan tidak dikenali. Juga seringkali digunakan untuk memberitahu bahwa server dalam tahap maintenance atau overloaded service.
![Page 17: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/17.jpg)
statusText – XMLHttpRequest Property
● Sama halnya seperti properti status, properti statusText digunakan untuk menyatakan response status dari server.
● Status yang diberikan dalam bentuk keterangan.
● Misalnya: respon 404 akan disampaikan dalam bentuk "Not Found", 403 dalam bentuk "Forbidden" dan seterusnya.
![Page 18: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/18.jpg)
responseText – XMLHttpRequest Property
● Properti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format plaint text (teks murni).
![Page 19: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/19.jpg)
responseXML – XMLHttpRequest Property
● Properti ini berisi data yang merupakan hasil
komunikasi / respon request dari server dalam
format XML.
![Page 20: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/20.jpg)
onreadystatechange - XMLHttpRequest Event
● Digunakan 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.
![Page 21: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/21.jpg)
onreadystatechange - XMLHttpRequest Event● Ketika 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 properti readyState menjadi 3.
● Ketika data yang diinginkan telah berhasil didownload dengan lengkap, event onreadystatechange akan mengubah nilai dari properti readyState menjadi 4.
![Page 22: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/22.jpg)
Object innerHTML
● Object 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>
![Page 23: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/23.jpg)
Object innerHTML
● Untuk dapat mengambil atau mengubah data secara on the fly (tanpa melakukan reload) pada sebuah element HTML, diperlukan sebuah pengenal yang melekat pada element tersebut. Pengenal ini dapat didefinisikan melalui atribut ID.
![Page 24: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/24.jpg)
Object innerHTML Example<html> <head> <title>Object innerHTML</title> <script language="JavaScript"> function ubahInnerHTML(){ document.getElementById("divContent").innerHTML = "Sesuatu"; } </script> <head> <body> <div id="divContent"> innerHTML adalah sebuah turunan dari object document. </div> <a href="#" onClick="ubahInnerHTML();">Ubah content element DIV</a> </body></html>
![Page 25: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/25.jpg)
XMLHttpRequest Implementation
● Lihat contoh pada Modul Praktikum AJAX halaman 9-10.
![Page 26: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/26.jpg)
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 dan atribut.
![Page 27: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/27.jpg)
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.
![Page 28: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/28.jpg)
DOM
● DOM adalah singkatan dari Data Object Model.● Merupakan cara pandang JavaScript didalam
melihat struktur data dari dokumen markup yang terdiri dari tag, ID dan atribut.
![Page 29: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/29.jpg)
DOM<html> <head> <title>Website title</title> <head> <body> <div>Data didalam body</div> </body></html>
head body
title div
Website title Data didalam body
html
![Page 30: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/30.jpg)
DOM Function
Fungsi Keterangan
getElementsByTagName Membaca data berdasarkan nama element
getElementById Membaca data berdasarkan ID element
getAttribute Membaca data berdasarkan atribut element
![Page 31: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/31.jpg)
DOM Object
Object KeteranganfirstChild Membaca node array pertama dari data element yang
dibaca
last Child Membaca node array terakhir dari data element yang dibaca
![Page 32: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/32.jpg)
DOM Property
Property Keterangan
data Membaca content da ri element yang dimaksud
innerHTML Membaca atau menulis data dari element HTML yang dimaksud. Object ini berbeda dengan object data sebelumnya, karena properti innerHTML tidak hanya berupa content saja tapi juga berisi element-element XML lainnya
![Page 33: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/33.jpg)
Dynamic Data Operation
● Lihat contoh pada Modul Praktikum AJAX halaman 16-21.
![Page 34: 09.AJAX - Teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada](https://reader031.fdokumen.com/reader031/viewer/2022022807/5ce054e388c993a0058da735/html5/thumbnails/34.jpg)
Any Question?