Thursday, March 23, 2017

PHP - Membuat Data XML Menjadi Tabel HTML

PHP - Membuat Data XML Menjadi Tabel HTML

XML merupakan singkatan dari eXtensible Markup Language, XML merupakan bahasa markup untuk membuat dokumen markup untuk keperluan pertukaran data antar sistem. Tujuan dari penggunaan XML agar data yang dipertukarkan tidak ambigu, karena data-data didalamnya sudah berada dalam tag-tag dan atribut tertentu untuk menegaskan jenis informasi yang dibawa.

Pada kesempatan ini, saya akan menjelaskan tentang cara membaca dan mengubah data dalam bentuk xml menjadi data dalam bentuk tabel html. Pada pembahasan ini, kita akan memanfaatkan data yang berasal dari data.go.id. Kali ini saya memilih data Cuaca Kota-Kota di Dunia.

Dibawah ini adalah sebagian dari xml yang saya dapatkan dari data cuaca tadi:

<Cuaca>
    <Tanggal>05 March 2016</Tanggal>
    <Isi>
        <Row>
            <Kota>Denpasar</Kota>
            <Cuaca>Hujan Ringan</Cuaca>
            <SuhuMin>25</SuhuMin>
            <SuhuMax>32</SuhuMax>
        </Row>
        <Row>
            <Kota>Jakarta</Kota>
            <Cuaca>Hujan Ringan</Cuaca>
            <SuhuMin>24</SuhuMin>
            <SuhuMax>32</SuhuMax>
        </Row>
    </Isi>
</Cuaca>
Simpan isi xml di atas dalam file sumber.xml. Selanjutnya coba untuk menampilkan data tanggal didalam tag Tanggal, buat dokumen php baru, dan isikan kode berikut ini:
<?php

$alamat = "sumber.xml";
$loader = simplexml_load_file($alamat);

//menampilkan tanggal
foreach($loader -> Tanggal as $tgl){
    echo $tgl;
}

?>
Selanjutnya, untuk menampilkan data misalkan kota, jika dilihat xml sebelumnya, data kota ternyata tidak hanya satu, tetapi 2(sesuai xml yang saya tampilkan), dan bahkan lebih banyak jika melihat dari dokumen asli-nya. untuk itu, Anda perlu menentukan kota mana yang ingin ditampilkan. Caranya yaitu, hitung dulu jumlah data saat ini, dengan kode seperti di bawah ini:
//mengambil seluruh data didalam tag "Isi"
foreach($loader -> Isi as $isi){
    //menghitung jumlah data di dalam tag Isi
    //yang sudah berada di variabel "isi"
    echo "jumlah data : " .count($isi);
}

Kodingan di atas secara spesifik bertujuan untuk menghitung jumlah elemen child elemen tepat dibawah elemen Isi, hal ini berarti yang dihitung adalah jumlah tag Row.

Berikut ini kode untuk menayangkan nama kota:
//menayangkan nama kota
foreach($loader -> Isi as $isi){
    echo $isi -> Row -> Kota;
}

Secara default, dengan kodingan di atas yang akan ditampilkan adalah data kota pertama, karena tidak ditentukan di indeks mana kota yang dimaksud, maka sistem akan melakukan prosedur default yaitu menayangkan data kota pada indeks Row ke "0". Hasil akan berbeda jika anda menentukan indeks Row misalkan ke 1, seperti di bawah ini:
//menayangkan nama kota
foreach($loader -> Isi as $isi){
    echo $isi -> Row[1] -> Kota;
}
Selanjutnya untuk menayangkan semua data, gunakan for untuk melakukan perulangan agar dapat menampilkan seluruh data. dan kode keseluhannya adalah seperti di bawah ini:
<?php
$alamat = "sumber.xml";
$loader = simplexml_load_file($alamat);
?>
<html>
    <head>
        <title>Data Cuaca Kota-Kota di Dunia</title>
    </head>
    <body>
        <header>
            Data Cuaca Pada Tanggal :
            <?php
            foreach($loader -> Tanggal as $tgl){
                echo $tgl;
            }
            ?>
        </header>
        <table>
            <tr>
                <th rowspan="2">Kota</th>
                <th rowspan="2">Cuaca</th>
                <th colspan="2">Suhu</th>
            </tr>
            <tr>
                <th>Min</th>
                <th>Max</th>
            </tr>
            <?php
            //mengambil seluruh data didalam tag "Isi"
            foreach($loader -> Isi as $isi){
                //menghitung jumlah data di dalam tag Isi
                //yang sudah berada di variabel "isi"
                echo "jumlah data : " .count($isi);
                
                //menayangkan seluruh isi dari tag Isi
                //berupa nama kota, cuaca, suhu min dan max
                for($i = 0; $i < count($isi); $i++){
                    echo "<tr>";
                    //menampilkan nama kota pada Row indeks ke "i"
                    echo    "<td>".$isi-> Row[$i] -> Kota."</td>";
                    //menampilkan kondisi cuaca pada Row indeks ke "i"
                    echo    "<td>".$isi-> Row[$i] -> Cuaca."</td>";
                    //menampilkan suhu min pada Row indeks ke "i"
                    echo    "<td>".$isi-> Row[$i] -> SuhuMin."</td>";
                    //menampilkan nama kota pada Row indeks ke "i"
                    echo    "<td>".$isi-> Row[$i] -> SuhuMax."</td>";
                    echo "</tr>";
                }
            }
            ?>
        </table>
    </body>
</html>

Anda bisa mengganti sumber data xml yang digunakan dengan mengganti sumber.xml menjadi sumber dari xml online yaitu http://data.bmkg.go.id/cuaca_dunia_1.xml

Demikian tutorial saya kali ini, semoga bermanfaat.

0 on: "PHP - Membuat Data XML Menjadi Tabel HTML"