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:

Tampilan diatas di dapat dengan mengkombinasikan PHP, MySQL, HTML dan CSS. Dan berikut adalah kode program yang digunakan:

//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');
?>


   
   
   


   
Penyajian Data MySQL dalam bentuk tabel HTML dengan CSS


   
   
   
   
   

while ($row=mysql_fetch_array($result))
{
   echo "";
   echo "";
   echo "";
   echo "";
   echo "";
   echo "";   
   echo "";
}
?>
NIM
Nama
Umur
Tempat Lahir
IPK
".$row['nim']."
".$row['nama']."
".$row['umur']."
".$row['tempat_lahir']."
".$row['IPK']."
 

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

Sumber wk.com