HTML , XML dan Javascript

Modul: AJAX
 • HTML dan XML merupakan Bahasa tag <> dan
menggunakan tag untuk mengidentifikasi
elemen dan obyek
HTML vs • HTML untuk presentasi data
• XML untuk mendefinisikan data
XML dan • Javascript adalah Bahasa pemrograman di
Javascript tingkat klien, biasa dikombinasikan dengan
obyek dan elemen HTML ataupun XML, dapat
dipakai untuk menyambungkan HTML dengan
XML
Persiapan

Install Notepad++ (silahkan unduh dan install),

jika tidak bisa, gunakan Notepad untuk
mengetik html dan xml
Selalu gunakan firefox browser (karena browser
lainnya memiliki opsi keamanan yang agak
kompleks)
Membuat Data dengan
XML
• Buatlah data pelanggan (dari modul MS Excel) menjadi format
xml, gunakan tag:
• <pelanggan>
• <idpel>..</idpel>
• <namapel>..</namapel>
• <alamatpel>..</alamatpel>
• <kontakpel>..</kontakpel>
• <btskredit>..</btskkredit>
• <sykredit>..</sykredit>
• </pelanggan>
• Buka tag diatas dengan tag <daftarpelanggan> dan tutup dengan
tag </dafarpelanggan>. Simpan dengan nama pelanggan.xml dan
coba buka menggunakan web browser Firefox
Memanggil dan menampilkan data

• Buat table HTML; gunakan tag <table> untuk

table, <td> untuk kolom dan <tr> untuk baris;
misalnya:
• <table border=“1”>
• <tr><td>Kode Pelanggan</td><td>Nama
Pelanggan</td><td>Syarat Kredit</td></tr>
• <tr><td id=“td01”></td><td
id=“td02”></td><td id=“td03”></td></tr>
• </table>
• Simpan dengan nama tabelpelanggan.html
kemudian coba dibuka menggunakan web
browser Firefox
Memanggil dan menampilkan data

• Mengisi data table menggunakan javascript:

• Isi manual:
• Buat tombol perintah <button
onclick=“myFunction()">Isi
Data</button>
• Buat javascript myFunction():
• <script> function ngisi() { var x =
document.getElementById(“td01”); var y
= document.getElementById(“td02”); var
z = document.getElementById(“td03”);
x.innerHTML = “P001”; y.innerHTML =“PT
ABC”;z.innerHTML=“2/10,n/30”; }
</script>
Memanggil dan menampilkan data
• Mengisi data table menggunakan javascript:
• Isi dari data xml:
• Buat tombol perintah baru <button onclick="myFunction2()">Isi
data2</button> disebelah yang lama
• Buat javascript myFunction2() di dalam tag <script> sebelumnya,
letakkan dibawah:
• function myFunction2() {
• xmlhttp= new XMLHttpRequest();
• xmlhttp.open("GET","pelanggan.xml",false);
• xmlhttp.send();
• xmlDoc=xmlhttp.responseXML;
• document.getElementById("td01").innerHTML=xmlDoc.getElem
entsByTagName("idpel")[0].childNodes[0].nodeValue;
• document.getElementById("td02").innerHTML=xmlDoc.getElem
entsByTagName("namapel")[0].childNodes[0].nodeValue;
• document.getElementById("td03").innerHTML=xmlDoc.getElem
entsByTagName("sykredit")[0].childNodes[0].nodeValue;
• }
Memanggil dan menampilkan data
• Coba ganti [0] menjadi [1] atau [2] atau [3] atau
[4], simpan

• Reload file html nya dan pencet lagi tombol isi

data2
Membuat dan menampilkan data

• Buatlah file baru diisi dengan table baru dengan

tampilan seperti disamping, dimana isi dari td
kedua di baris pertama adalah:
• <select onchange="myFunction()">
• <option id="op0">_____</option>
• <option id="op1"></option>
• <option id="op2"></option>
• <option id="op3"></option>
• <option id="op4"></option>
• <option id="op5"></option>
• </select>
• Simpan dengan nama baru: tabelpelanggan2.html
Membuat dan menampilkan data
• Buat javascript untuk menampilkan data Kode Pelanggan pada elemen options di HTML
• <script>
• xmlhttp= new XMLHttpRequest();
• xmlhttp.open("GET","pelanggan.xml",false);
• xmlhttp.send();
• xmlDoc=xmlhttp.responseXML;
• document.getElementById("op1").innerHTML=xmlDoc.getElementsByTagName("idpel")[0].childNodes[0].nodeValue;
• document.getElementById("op2").innerHTML=xmlDoc.getElementsByTagName("idpel")[1].childNodes[0].nodeValue;
• document.getElementById("op3").innerHTML=xmlDoc.getElementsByTagName("idpel")[2].childNodes[0].nodeValue;
• document.getElementById("op4").innerHTML=xmlDoc.getElementsByTagName("idpel")[3].childNodes[0].nodeValue;
• document.getElementById("op5").innerHTML=xmlDoc.getElementsByTagName("idpel")[4].childNodes[0].nodeValue;
• </script>
 Menampilkan data
Buat javascript untuk menampilkan Nama Pelanggan dan Syarat Kredit:
Komprehensif: