Berikut source code:
1. Kita buat koneksi ke database mysql yang telah kita buat.
<?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 latihan
$result=mysql_query('USE latihan');
if (!$result)
{
die("Database latihan gagal digunakan");
}
//tampilkan tabel data
$result=mysql_query('SELECT * FROM data');
?>
- "latihan" merupakan database kita
- "data" merupakan tabel database
berikut tampilan dari database yang dibuat:
2. Selanjutnya buat program untuk menampilkan isi database ke dalam tabel
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Tabel 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>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>
Pada program diatas menggunakan kode CSS untuk mempercantik tampilan tabel. Kode CSS untuk tabel diletakkan di bagian <head>. Kode CSS digunakan untuk mengubah border tabel, warna backgroud, padding, dan ukuran font. Digunakan selector tr:nth-child(even) pada Selector CSS3 ini untuk mendapatkan efek “zebra” didalam tabel, atau dikenal dengan “stripped table”.
Di dalam perulangan mysql_fetch_array(), hasil dari tiap iterasi ditempatkan di dalam tag <td>.
Ubah sesuai dengan isi tabel daatbase yang anda buat.
thanks to http://www.duniailkom.com/
0 comments:
Post a Comment