Parsing Data XML dari Database MYQL dengan PHP, HTML dan CSS

Kabar Nusantara - Halo Sahabat Kabar Nusantara kami akan membagi tutorial bagaimana Parsing Data XML dari Database MYQL dengan PHP, HTML dan CSS. Mengapa ini diperlukan karna dalam penyajian informasi. informasi yang di hasilkan harus bersifat user friendly atau mudah di pahami dan mudah di mengerti. kali ini akan kita parsing dalam format tabel. berikut langkah - langkahnya.

Langkah 1

Pastikan anda telah memiliki Database dengan nama data_xml

Jika Belum ikututi langkah langkahnya pada Tutorial Sebelumnya

Membuat Data XML dari Database Mysql

Langkah 2

Membuat Sourcode Berikut :

<!DOCTYPE html>
<html>
<head>
<title>Data Pasien</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
<h3>Data Pasien</h3>
<?php
// untuk meload data xml (pasien.xml) dengan cara SimpleXML 
$data = new SimpleXMLElement('http://localhost/lat2/buat_xml.php', null, true);
 
// menampilkan data ke XML ke dalam tabel HTML
echo "
<table>
<tr>
<th>Nama</th>
<th>Kota</th>
<th>Kecamatan</th>
<th>Umur</th>
</tr>
 
";
 
// melakukan looping penampilan data pasien
foreach($data as $id)
{
        echo "
<tr>
<td width='200'>{$id->nama}</td>
<td width='200'>{$id->kota}</td>
<td width='200'>{$id->kecamatan}</td>
<td width='130'>{$id->umur}</td>
</tr>
 
";
}
echo '</table>';
?>
<br>
</br>
<button onclick="window.print()">Cetak Data Pasien</button>
 
</body>
</html>

Simpan Dengan Nama : pasien.php

Langkah 3

Membuat Sourcode Berikut :

h1{
  font-family: sans-serif;
}

table {
  font-family: Arial, Helvetica, sans-serif;
  color: #666;
  text-shadow: 1px 1px 0px #fff;
  background: #eaebec;
  border: #ccc 1px solid;
}

table th {
  padding: 15px 35px;
  border-left:1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background: #ededed;
}

table th:first-child{  
  border-left:none;  
}

table tr {
  text-align: center;
  padding-left: 20px;
}

table td:first-child {
  text-align: left;
  padding-left: 20px;
  border-left: 0;
}

table td {
  padding: 15px 35px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  background: #fafafa;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
  background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}

table tr:last-child td {
  border-bottom: 0;
}

table tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

table tr:last-child td:last-child {
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

table tr:hover td {
  background: #f2f2f2;
  background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
  background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}

Simpan Dengan Nama : style.css

NB : Simpan ketiga file di atas dalam satu folder : C:\xampp\htdocs\lat2
Jalankan Program : http://localhost/lat2/pasien.php

Hasil Tampilan Program :