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

Posted on

Dari awal panduan PHP MySQL di Source Code Program, kita hanya fokus kedalam kode PHP yang digunakan bagi menampilkan tabel MySQL. Pada panduan kali ini, saya mencoba mengkombinasikan HTML dengan CSS bagi 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 pada format tabel. Dengan mengkombinasikan PHP, MySQL, HTML dan CSS, kita dapat menampilkan data tabel MySQL dengan desain yang beragam. Pada panduan PHP MySQL ini, saya akan mencoba menampilkan tabel mahasiswa_ilkom dengan tampilan ahir seperti gambar berikut:

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

Kode diatas terasa panjang, terutama karena pada panduan PHP MySQL sebelum ini saya tak menggunakan HTML dan CSS.

Kode PHP yang saya gunakan dari kode program diatas sama persis dengan yang terdapat di pada tutorial PHP MySQL tentang mysql_fetch_array. Akan tetapi kali ini hasilnya diletakkan di pada tabel HTML.

Koneksi PHP dengan MySQL dan pun manfaat mysql_query() saya letakkan sebelum kode HTML. Hal ini umum digunakan bagi memisahkan PHP dengan HTML.

Kode CSS bagi tabel saya letakkan di bagian <head>. Kode CSS digunakan bagi mengubah border tabel, warna backgroud, padding, dan ukuran font. Yang lumayan menarik yaitu selector tr:nth-child(even). Selector CSS3 ini digunakan bagi memperoleh efek “zebra” didalam tabel, atau dikenal dengan “stripped table”. Fitur ini digunakan agar setiap baris tabel dapat dibaca dengan gampang karena mempunyai warna yang berbeda.

Di pada perulangan mysql_fetch_array(), hasil dari tiap iterasi ditempatkan di pada tag <td>, sehingga seketika menyatu dengan sel tabel.

Kamu dapat berkreasi dengan mengubah-ubah kode HTML atau CSS diatas bagi memperoleh hasil yang sesuai.

Duniailkom telah merancang panduan komplit mengenai Tabel HTML, dan CSS Dasar. Sekiranya sahabat kurang memahami mengenai kode HTML dan CSS yang digunakan di panduan kali ini, jangan ragu bagi mempelajarinya.


Panduan kali ini mengakhiri sesi panduan mengenai mysql extension di Source Code Program. Pada panduan PHP MySQL berikutnya, kita akan mulai membahas mengenai mysqli extension. Mari kita lihat mengenai perbedaan mysql dan mysqli extension dalam PHP.


Sumber https://www.duniailkom.com/