Aplikasi XML

Bab ini menunjukkan penggunaan aplikasi HTML yang menggunakan XML, HTTP, DOM serta JavaScript.

Dokumen XML yang digunakan

Dalam bab ini, kita akan menggunakan dokumen XML yang bernama "music_list.xml" berisi XML.

Menampilkan data XML di dalam tabel HTML

Pemrosesan ini melooping setiap elemen <TRACK> lalu menampilkan nilai elemen <ARTIST> dan <TITLE> di dalam tabel HTML:

Contoh

<html>
<body>
<table id="demo"></table>
<script>
function loadXMLDoc() {
   var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange =  function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
     }
  };
  xmlhttp.open("GET", "music_list.xml", true);
   xmlhttp.send();
}
function myFunction(xml) {
  var i;
   var xmlDoc = xml.responseXML;
  var table="<tr><th>Artis</th><th>Track</th></tr>";
   var x = xmlDoc.getElementsByTagName("TRACK");
  for (i = 0; i <x.length;  i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue  +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue  +
    "</td></tr>";
  }
   document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>

Coba Sendiri

Untuk informasi lebih lanjut tentang penggunaan JavaScript dan XML DOM, silakan kunjungi Ringkasan DOM。

Tampilkan pertama lagu dalam elemen div HTML

Pada contoh ini, digunakan fungsi untuk menampilkan lagu pertama dalam elemen HTML dengan id="displayMUSIC":

Contoh

displayMUSIC(0);
function displayMUSIC(i) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this, i);
    }
  };
  xmlhttp.open("GET", "music_list.xml", true);
  xmlhttp.send();
}
function myFunction(xml, i) {
  var xmlDoc = xml.responseXML; 
  x = xmlDoc.getElementsByTagName("TRACK");
  document.getElementById("showMUSIC").innerHTML =
  "<ul>" + 
  "<li> Lagu: " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
  "<li Artis: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li Album: " +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li Negara: " +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Perusahaan: " +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Tahun: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

Coba Sendiri

Bergerak antar lagu

Untuk berpindah antara lagu dalam hal ini, tambahkan fungsi next() dan previous():

Contoh

function next() {
  // Tampilkan lagu berikutnya, kecuali sudah mencapai lagu terakhir
   if (i < x.length-1) {
    i++;
    displayMUSIC(i);
  }
}
function previous() {
  // Tampilkan lagu sebelumnya, kecuali sudah mencapai lagu pertama
   if (i > 0) {
  i--;
  displayMUSIC(i);
  }
}

Coba Sendiri

Tampilkan informasi album saat mengeklik lagu

Pada contoh ini, ini menunjukkan bagaimana informasi album ditampilkan saat pengguna mengklik lagu:

Contoh

function displayMUSIC(i) {
  document.getElementById("showMUSIC").innerHTML =
  "<ul>" + 
  "<li> Lagu: " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
  "<li Artis: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li Album: " +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li Negara: " +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Perusahaan: " +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Tahun: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

Coba Sendiri