Dari awal tutorial PHP MySQL di sini kita hanya fokus kedalam kode PHP yang digunakan untuk menampilkan tabel MySQL. Dalam tutorial kali ini, saya mencoba mengkombinasikan HTML dengan CSS untuk menampilkan data hasil query MySQL ke dalam bentuk tabel.
- Menyajikan Data MySQL dengan Tabel HTML dan CSS -
Umumnya, hasil query MySQL yang kita ambil dari database akan ditampilkan ke dalam bentuk tabel. Dengan mengkombinasikan PHP, MySQL, HTML dan CSS, kita bisa menampilkan data tabel MySQL dengan desain yang beragam. Dalam tutorial PHP MySQL ini, saya akan mencoba menampilkan tabel mahasiswa_ilkom dengan tampilan akhir seperti gambar berikut:
Tampilan diatas di dapat dengan mengkombinasikan PHP, MySQL, HTML dan CSS. Dan berikut adalah kode program yang digunakan:
<?php
//buat koneksi dengan MySQL
$link=mysql_connect('localhost','root','');
//jika koneksi gagal, langsung keluar dari PHP
if (!$link)
{
die("Koneksi dengan MySQL gagal");
}
//gunakan database universitas
$result=mysql_query('USE universitas');
if (!$result)
{
die("Database mahasiswa gagal digunakan");
}
//tampilkan tabel mahasiswa_ilkom
$result=mysql_query('SELECT * FROM mahasiswa_ilkom');
?>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar PHP MySQL</title>
<style>
h3{
text-align:center; }
table {
border-collapse:collapse;
border-spacing:0;
font-family:Arial, sans-serif;
font-size:16px;
padding-left:300px;
margin:auto; }
table th {
font-weight:bold;
padding:10px;
color:#fff;
background-color:#2A72BA;
border-top:1px black solid;
border-bottom:1px black solid;}
table td {
padding:10px;
border-top:1px black solid;
border-bottom:1px black solid;
text-align:center; }
tr:nth-child(even) {
background-color: #DFEBF8; }
</style>
</head>
<body>
<h3>Penyajian Data MySQL dalam bentuk tabel HTML dengan CSS</h3>
<table>
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Umur</th>
<th>Tempat Lahir</th>
<th>IPK</th>
</tr>
<?php
while ($row=mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>".$row['nim']."</td>";
echo "<td>".$row['nama']."</td>";
echo "<td>".$row['umur']."</td>";
echo "<td>".$row['tempat_lahir']."</td>";
echo "<td>".$row['IPK']."</td>";
echo "</tr>";
}
?>
</table>
</body>
</html>
Kode diatas terasa panjang, terutama karena dalam tutorial PHP MySQL sebelum ini saya tidak menggunakan HTML dan CSS.
Kode PHP yang saya gunakan dari kode program diatas sama persis dengan yang ada di dalam tutorial PHP MySQL tentang mysql_fetch_array. Akan tetapi kali ini hasilnya diletakkan di dalam tabel HTML.
Koneksi PHP dengan MySQL dan juga fungsi mysql_query() saya letakkan sebelum kode HTML. Hal ini umum digunakan untuk memisahkan PHP dengan HTML.
Kode CSS untuk tabel saya letakkan di bagian <head>. Kode CSS digunakan untuk mengubah border tabel, warna backgroud, padding, dan ukuran font. Yang cukup menarik adalah selector tr:nth-child(even). Selector CSS3 ini digunakan untuk mendapatkan efek “zebra” didalam tabel, atau dikenal dengan “stripped table”. Fitur ini digunakan agar setiap baris tabel bisa dibaca dengan mudah karena memiliki warna yang berbeda.
Di dalam perulangan mysql_fetch_array(), hasil dari tiap iterasi ditempatkan di dalam tag <td>, sehingga langsung menyatu dengan sel tabel.
Anda bisa berkreasi dengan mengubah-ubah kode HTML atau CSS diatas untuk mendapatkan hasil yang sesuai.
Kita telah membuat tutorial lengkap mengenai Tabel HTML, dan CSS Dasar. Jika anda kurang memahami tentang kode HTML dan CSS yang digunakan pada tutorial kali ini, jangan ragu untuk mempelajarinya.