Parsing Data XML Dengan PHP HTML + CSS Tabel Jadi Elegan

Gambar Parsing XML dan HTML + CSS

Kabar Nusantara - Halo Sahabat Kabar Nusantara kami ini kami akan membagi tutorial bagaimana membuat Parsing data XML dengan PHP, HTML dan CSS yang membuat tampilan jadi lebih bagus dan eleganelegan. CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.

Berikut Cara Pembuatanya :

Langkah 1
Buat Sorcode XML Seperti Berikut :

<?xml version="1.0"?>
<pasien>
<id >
<rekam>001</rekam>
<nama>Diana Putri</nama>
<alamat>Jombang</alamat>
<kecamatan>Peterongan</kecamatan>
<telp>0321864465</telp>
</id>

<id >
<rekam>002</rekam>
<nama>Ayu Tiara</nama>
<alamat>Jombang</alamat>
<kecamatan>Ploso</kecamatan>
<telp>0321864465</telp>
</id>

<id >
<rekam>003</rekam>
<nama>Ayu Tiara</nama>
<alamat>Jombang</alamat>
<kecamatan>Ploso</kecamatan>
<telp>0321864465</telp>
</id>

<id >
<rekam>004</rekam>
<nama>Ayu Tiara</nama>
<alamat>Jombang</alamat>
<kecamatan>Ploso</kecamatan>
<telp>0321864465</telp>
</id>

</pasien>

Simpan dengan nama pasien.xml

Langkah 2
Buat Sorcode CSS Seperti 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

Langkah 3
Buat Sorcode HTML dan PHP Seperti 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 
$pasien = new SimpleXMLElement('http://localhost/lat1-css/pasien.xml', null, true);
 
// menampilkan data ke XML ke dalam tabel HTML
echo "
<table>
<tr>
<th>Nomer Rekam Medis</th>
<th>Nama</th>
<th>Alamat</th>
<th>Kecamatan</th>
<th>Telp</th>
</tr>
 
";
 
// melakukan looping penampilan data pasien
foreach($pasien as $id)
{
        echo "
<tr>
<td width='200'>{$id->rekam}</td>
<td width='200'>{$id->nama}</td>
<td width='200'>{$id->alamat}</td>
<td width='130'>{$id->kecamatan}</td>
<td width='80'>{$id->telp}</td>
</tr>
 
";
}
echo '</table>';
?>
<br>
</br>
<button onclick="window.print()">Cetak Data Pasien</button>
 
</body>
</html>

Simpan dengan nama pasien.php

NB : Ketiga file di atas di simpan dalam satu folder : C:\xampp\htdocs\lat1-css
Jalankan Program : http://localhost/lat1-css/pasien.php

Untuk Lebih Jelas Silahkan Melihat Video Berikut :