Jagowebdev

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

DOWNLOAD

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.

Artikel lainnya:  Cara Baru Menampilkan Data Tabel Pada Database MySQL Dengan PHP

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

24 Feedback dari pembaca

  • bagaimana cara memisahkan string koneksi dari halaman utama tampilan dataset? bisakah php melempar parameter via file? karena bahaya jika orang klik kanan dan melihat form .html tersebut. mohon pencerahannya gan.

    Reply

    • Itu sudah aman mas, script php tidak akan terlihat dari sisi client, karena sudah di proses di server dan yang di kirim ke client hanya output nya saja.

      Itu koneksinya dijadikan satu untuk memudahkan saja mas, biasanya file config di buat file terpisah, tujuan nya untuk memudahkan saja, menghilangkan duplikasi, pengorganisasian kode

      Reply

  • Min mau nanya. Kalo saya mau manggil database dengan menggunakan kata kunci, tapi kata kuncinya berasal dari apa yang kita isi dari form. Gimana min?? Contoh : saya mau tau peralatan apa yang dibutuhkan untuk pekerjaan A (daftar peralatannya di database), jadi saya isi pekerjaan A itu di form, sehingga keluarlah daftar peralatan yang saya butuhkan. Makasih min

    Reply

    • Tinggal di panggil berdasarkan nama field yang disubmit mas, misal formnya:

      <form method="post" action="">
<input type="text" name="pekerjaan">
<input type="submit" value="submit">
</form>

      Pas disubmit, tinggal jalankan query dengan mengambil data pekerjaan yang disubmit:

      $sql = "SELECT * FROM tabel WHERE pekerjaan = '" . $_POST['pekerjaan'] . '"';
$query = mysqli_query ($conn, $sql);
      Reply

  • Siang mas, mas kok data saya tidak bisa nampil yah mas ?

    <input type="text" name="nama_bst" value="” readonly />

    Reply

  • Permisi mas, saya di sini ingin menampilkan data SQL ke HTML. Tapi data yang ditampilkan itu merupakan data terakhir yang ada di database tsb, gimana ya mas caranya untuk menampilkan data terakhir itu??

    Reply

  • Maaf mas, saya mau tanya tp beda topik. Untuk melakukan fungsi search id dari tabel relasi buat ditampilkan di textbox bgmn mas? Terima kasih

    Reply

  • Mas saya buat website. Terus nnti ada kolom pencariannya yang akan memasukkan sebuah kode tabel. Nanti pencariannya akan menampilkalkan tabel dengan kode tersebut. Menurut pendapat mas gimana?

    Reply

  • Misal saya punya tabel dagur di database guru
    |id_guru|namaguru|nip|keterangan|
    |1 |Paijo, S.T. | 19760089|aktif|
    |2 | Zeko Ali, S.P. | 19770088|aktif|

    Kemudian saya ingin hanya mengambil Paijo, S.T. untuk saya masukkan ke dalam sebuah tabel di php. Bagaimana caranya?

    Reply

  • Mas,, maaf bagaimana script php untuk menyimpan data ke tabel baru berdasarkan id tertentu. Misalnya tabel siswa ada nisn, nama, jurusan, dimana jurusan adalah foreign key di tabel siswa. Jadi pada saat buat script untuk tabel siswa, maka jurusan otomatis muncul dengan memilih kodejurusan,, trus mas script php untuk menyimpan data data jurusan tersebut ke tabel siswa(sebelumx sy pakai inner join) mohonjawabannya

    Reply

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Social

  1. Tutorial Grocery CRUD Lengkap
  2. Implementasi HMVC Pada Codeigniter 4
  3. Trik Coding Cepat dan Efisien Pada PHP
  4. PHP Admin Template Dashboard
  5. Prefix Tabel Pada Database, Perlukah?
  6. Same Origin Policy – Apa dan Bagaimana Mengatasinya?
  7. JSONP Dengan Javascript dan jQuery – Lintas Domain
  8. JSON Pada Javascript – Panduan Lengkap
  9. JSON Pada Dokumen HTML
  10. JSON Dari Database – PHP dan MySQL

Kategori