ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 26-09-2016

Menampilkan Data MySQL Ke Dalam Tabel HTML

Melanjutkan pembelajaran mengenai PHP dan MySQL, pada kesempatan ini kita akan membahas cara menampilkan data MySQL ke Dalam Tabel HTML Dengan PHP.

Ketika mengambil data dari tabel MySQL, umumnya kita akan menampilkannya dalam bentuk tabel, dengan menampilkan dalam bentuk tabel, data menjadi lebih menarik dan mudah untuk dibaca.

Hasil akhir tabel yang akan kita buat adalah sebagai berikut:

Menampilkan Data MySQL ke Dalam Tabel HTML Dengan PHP

Desain tabel perlu disesuaikan dengan tema website dan jenis data yang ingin ditampilkan. Jika sobat ingin mengetahui lebih lanjut tentang desain tabel HTML, sobat dapat mengikuti tutorial:

I. Fungsi PHP Yang Digunakan

Pada kesempatan sebelumnya telah kita bahas mengenai cara mengambil data pada database MySQL, intinya tidak disarankan lagi menggunakan fungsi mysql_xxx karena sudah dihapus pada PHP 7, melainkan gunakan mysqli_xxx atau PHP PDO.

Oleh karena itu, pada kesempatan ini, kita akan menggunakan fungsi mysqli baik untuk koneksi, query data, dan menampilkan data.

II. Sampel data

Pada tutorial kali ini, kita akan menggunakan contoh data penjualan yang berada pada tabel sales. Untuk membuatnya, login ke phpMyAdmin pilih database kemudian klik tab menu SQL yang berada di sebelah atas.

Selanjutnya, copy paste dan eksekusi kode berikut:

CREATE TABLE IF NOT EXISTS `sales` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(50) CHARACTER SET latin1 NOT NULL,
  `item` varchar(50) CHARACTER SET latin1 NOT NULL,
  `tanggal` date NOT NULL,
  `harga` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=8;

INSERT INTO `sales` (`id`, `nama`, `item`, `tanggal`, `harga`) VALUES
(1, 'Anton', 'Televisi', '2016-06-07', 2500000),
(2, 'Bryan', 'Mesin Cuci', '2016-07-10', 1500000),
(3, 'Cherly', 'Dispenser', '2016-08-11', 950000),
(4, 'Dean', 'Kulkas', '2016-09-15', 1750000),
(5, 'Esryl', 'Kipas Angin', '2016-10-11', 450000),
(6, 'Franky', 'Seterika', '2016-10-17', 0),
(7, 'Gerry', 'AC', '2016-11-17', 3250000);

atau sobat dapat mendownload dump sql nya pada tombol download bagian atas

III. Menampilkan Data MySQL Ke Dalam Tabel HTML

Setelah persiapan diatas selesai, sampailah kita pada inti pembahasan yaitu menampilkan data MySQL ke dalam tabel HTML.

Pertama tama, buat sebuah file php dan simpan pada direktori htdocs. Pada contoh kali ini saya memberi nama file tersebut menampilkan_data.php

Selanjutnya copy-paste dan jalankan script berikut:

<?php
$db_host = 'localhost'; // Nama Server
$db_user = 'root'; // User Server
$db_pass = ''; // Password Server
$db_name = 'tutorial3'; // Nama Database

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
	die ('Gagal terhubung dengan MySQL: ' . mysqli_connect_error());	
}

$sql = 'SELECT * 
		FROM sales';
		
$query = mysqli_query($conn, $sql);

if (!$query) {
	die ('SQL Error: ' . mysqli_error($conn));
}
?>
<html>
<head>
	<title>Menampilkan Data MySQL Ke Dalam Tabel HTML</title>
	<style type="text/css">
		body {
			font-size: 15px;
			color: #343d44;
			font-family: "segoe-ui", "open-sans", tahoma, arial;
			padding: 0;
			margin: 0;
		}
		table {
			margin: auto;
			font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
			font-size: 12px;
		}

		h1 {
			margin: 25px auto 0;
			text-align: center;
			text-transform: uppercase;
			font-size: 17px;
		}

		table td {
			transition: all .5s;
		}
		
		/* Table */
		.data-table {
			border-collapse: collapse;
			font-size: 14px;
			min-width: 537px;
		}

		.data-table th, 
		.data-table td {
			border: 1px solid #e1edff;
			padding: 7px 17px;
		}
		.data-table caption {
			margin: 7px;
		}

		/* Table Header */
		.data-table thead th {
			background-color: #508abb;
			color: #FFFFFF;
			border-color: #6ea1cc !important;
			text-transform: uppercase;
		}

		/* Table Body */
		.data-table tbody td {
			color: #353535;
		}
		.data-table tbody td:first-child,
		.data-table tbody td:nth-child(4),
		.data-table tbody td:last-child {
			text-align: right;
		}

		.data-table tbody tr:nth-child(odd) td {
			background-color: #f4fbff;
		}
		.data-table tbody tr:hover td {
			background-color: #ffffa2;
			border-color: #ffff0f;
		}

		/* Table Footer */
		.data-table tfoot th {
			background-color: #e5f5ff;
			text-align: right;
		}
		.data-table tfoot th:first-child {
			text-align: left;
		}
		.data-table tbody td:empty
		{
			background-color: #ffcccc;
		}
	</style>
</head>
<body>
	<h1>Tabel 1</h1>
	<table class="data-table">
		<caption class="title">Data Penjualan Divisi Elektronik</caption>
		<thead>
			<tr>
				<th>NO</th>
				<th>PEMBELI</th>
				<th>BARANG</th>
				<th>TANGGAL</th>
				<th>HARGA</th>
			</tr>
		</thead>
		<tbody>
		<?php
		$no 	= 1;
		$total 	= 0;
		$bulan	= array (1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember');
		while ($row = mysqli_fetch_array($query))
		{
			$tgl 	= explode('-', $row['tanggal']);
			$harga  = $row['harga'] == 0 ? '' : number_format($row['harga'], 0, ',', '.');
			echo '<tr>
					<td>'.$no.'</td>
					<td>'.$row['nama'].'</td>
					<td>'.$row['item'].'</td>
					<td>'.$tgl[2] . ' ' . $bulan[(int)$tgl[1]] . ' ' . $tgl[0] . '</td>
					<td>'.$harga.'</td>
				</tr>';
			$total += $row['harga'];
			$no++;
		}?>
		</tbody>
		<tfoot>
			<tr>
				<th colspan="4">TOTAL</th>
				<th><?=number_format($total, 0, ',', '.')?></th>
			</tr>
		</tfoot>
	</table>
</body>
</html>
SELESAI

Jika perlu penjelasan lebih lanjut, silakan ikuti penjelasan dibawah ini.

1 Script PHP

Pada contoh diatas, kita menempatkan script PHP disebelah atas agar terpisah dari kode HTML.

Selanjutnya, untuk mengambil data MySQL, kita menggunakan fungsi mysqli_fetch_array, yang akan menghasilkan associative array dan indexed array.

Sobat dapat menggunakan fungsi lain, yaitu: mysqli_fetch_row dan mysqli_fetch_assoc, perbedaan ketiganya dibahas mendalam diartikel: Cara Baru Menampilkan Data Tabel Pada Database MySQL Dengan PHP

Format Tanggal

Pada database, format tanggal adalah yyyy-dd-mm (format yang paling disarankan). Untuk mengubahnya menjadi format Indonesia, pertama,  kita definisikan nama bulan dalam bentuk array dengan index pertama 1 bukan 0 (1=>'Januari', 'Februari').

Selanjutnya, pada loop, dengan explode('-', $row['tanggal'])  kita pecah tanggal menjadi array, misal: 2016-10-17 menjadi: $tgl[0]=2016, $tgl[1]=10, dan $tgl[2]=17

Selanjutnya kita cetak ouput tanggal: $tgl[2].' '.$bulan[(int)$tgl[1]].' '.$tgl[0]. Pada script tersebut kita menjalankan statement (int)$tgl[1] untuk mengubah bulan menjadi integer, 01 menjadi 1, o2 menjadi 2, dst.., sehingga sesuai dengan index array.

Lebih lanjut tentang array dapat disimak pada artikel: Memahami Array Pada PHP

Statement / Fungsi Lain

Statement / Fungsi PHP lain yang kita gunakan:

  • Ternary operator untuk mendefinisikan variabel $harga. jika nilainya 0 kita ubah nilainya menjadi kosong. Hal ini untuk memudahkan memberi tanda (style css) pada kolom yang kosong.
  • Operator assignment += yang kita gunakan untuk menjumlahkan total. Pada contoh diatas:  $total += $row['harga'], yang artinya $total = $total + $row['harga'];
  • Fungsi number_format() yang kita gunakan untuk memformat angka menjadi ribuan.
  • Operator increment yaitu $no++ yang kita gunakan untuk membuat nomor urut.

Lebih lanjut tentang operator: Memahami Operator Pada PHP – Panduan Lengkap

2 Script HTML 5

Terkait tabel, pada HTML 5 tidak terdapat elemen baru, melainkan terdapat beberapa atribut penting yang sudah tidak didukung lagi seperti penggunaan align, valign, dan width.

Jika kita ingin menggunakan atribut tersebut, kita harus menggantinya dengan model inline-style, misal: <th style"width:80px">Harga</th>

Pada contoh diatas, kita menggunakan elemen <caption> untuk menulis judul dan mengelompokkan baris menjadi tiga bagian pada <thead>, <tbody>, dan <tfoot>

Agar kode HTML 5 valid sesuai yang distandarkan, maka kita harus memperhatikan penempatan elemen tersebut:

  • Elemen <caption> harus selalu diatas.
  • header <thead>. Elemen ini harus berada di paling atas setelah caption dan col atau colgroup (jika ada)
  • body <tbody>. Elemen ini harus berada di bawah <thead>
  • footer <tfoot>. Elemen ini harus berada di bawah <thead> tapi tidak harus berada di bawah <tbody>

Lebih lanjut tentang hal ini dapat dibaca pada tutorial: Membuat Tabel Dengan HTML 5 dan CSS 3

3 Script CSS

Pada contoh diatas, kita desain tabel menggunakan CSS 3 sehingga tampilannya menjadi lebih menarik, beberapa style yang kita terapkan adalah:

  • Membuat warna baris berselang seling (zebra-row) dengan menggunakan selector :nth-child(odd) dan :nth-child(even). Sesuai artinya, odd akan menyeleksi baris ganjil (1, 3, 5, dst) dan even akan menyeleksi baris genab (2, 4, 6, dst).
  • Membuat rata kanan untuk kolom nomor, tanggal, dan harga. Untuk nomor, kita menggunakan selector tbody td:first-child, tanggal tbody td:nth-child(4), dan harga tbody td:last-child
  • Jika data yang ditampilkan jumlahnya banyak, untuk keperluan analisa, kita perlu menandai kolom yang kosong, pada contoh diatas, kita memberinya dengan warna merah. Untuk menyeleksi elemen yang kosong kita bisa menggunakan selector empty, pada contoh diatast body td:empty
  • Ketika mouse berada diatas baris (:hover), kita buat warna baris menjadi kuning, selector yang kita gunakan adalah tbody tr:hover td

Lebih lanjut mengenai desain tabel dengan CSS 3 dapat dibaca pada artikel: Mendesain Tabel Dengan CSS 3

Demikian pembahasan mengenai cara menampilkan data MySQL ke dalam tabel HTML 5, semoga bermanfaat.

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP
  2. Menghitung Selisih Waktu Dengan PHP – Cara Termudah
  3. Memahami Fungsi Date Pada PHP
  4. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu
  5. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP
  6. Setting ODBC MySQL Untuk Gammu
  7. Cara Install dan Menggunakan Gammu di Windows
  8. Format Tanggal Indonesia Dengan PHP
  9. Cara Install MySQL Portable Zip File di Windows – Panduan Lengkap
  10. Memahami Statemen Return Pada PHP