Tutorial PHP MySQL Part 11: Cara Penyajian Data MySQL dalam bentuk tabel HTML dengan CSS

Dari awal tutorial PHP MySQL di duniailkom, 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:

Cara Penyajian Data MySQL dalam bentuk tabel HTML dengan CSS

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.

Duniailkom 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.

Tutorial kali ini mengakhiri sesi tutorial mengenai mysql extension di duniailkom. Dalam tutorial PHP MySQL berikutnya, kita akan mulai membahas tentang mysqli extension. Mari kita lihat mengenai perbedaan mysql dan mysqli extension dalam PHP.

36 Comments

  1. Anonymous
    16 Aug 15
    • Andre
      16 Aug 15
  2. Fajar
    28 Sep 15
    • Andre
      28 Sep 15
  3. taufiq
    16 Oct 15
    • Andre
      27 Nov 15
  4. Jose Siahaan
    25 Nov 15
    • Andre
      27 Nov 15
  5. Arif
    30 May 16
    • Andre
      30 May 16
  6. rakhmat
    23 Jul 16
    • Andre
      24 Jul 16
  7. Andre
    05 Aug 16
    • Andre
      06 Aug 16
  8. Eko Band Rythm
    15 Aug 16
    • Andre
      16 Aug 16
    • Phaton
      07 Nov 16
  9. hermawan
    18 Aug 16
  10. indra herdiansyah
    31 Aug 16
    • Andre
      01 Sep 16
  11. Dessy Rahmawati
    04 Nov 16
    • Andre
      05 Nov 16
  12. piil
    01 May 17
  13. piil
    01 May 17
    • Andre
      02 May 17
      • piil
        03 May 17
        • Andre
          04 May 17
  14. piil
    04 May 17
    • Andre
      05 May 17
  15. piil
    06 May 17
  16. CavaLera
    23 Sep 17
    • Andre
      24 Sep 17
  17. izmhyyy
    21 Oct 18
  18. Galih Pratama
    06 Aug 19
    • Andre
      06 Aug 19

Add Comment