PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

Pada kesempatan ini kita akan  membahas cara menampilkan data mysql ke tabel HTML dengan PHP dan form HTML.

Pada tutorial sebelumnya kita telah membahas bagaimana cara menangkap data yang dikirim oleh form HTML, sekarang  kita akan menggunakan data tersebut untuk mengambil data mysql kemudian menampilkannya ke dalam tabel HTML.

Untuk hasil jadinya, sobat dapat langsung klik tombol demo berikut ini.

Untuk versi offline, telah kami sediakan file php, css, javascript, sql serta petunjuk penggunaannya. Untuk mendownloadnya, silakan klik tombol salah satu social media berikut  ini:

I. Form HTML

Untuk lebih memahami  cara mengelola elemen input pada form dengan PHP, kali ini kita akan menggunakan beberapa elemen input, yaitu elemen input, select, dan checkbox.

Bentuk form yang akan kita gunakan tampak seperti gambar berikut:

Code HTML dan PHP yang kita gunakan:

<form action="" method="post">
	<div class="row">
		<label>Nama Barang</label>
		<div class="col-wrap">
			<input type="text" name="nama_barang" placeholder="Semua..." value="<?=@$_POST['nama_barang'] ?: ''?>"/>
			<p class="desc">Kosongkan isian untuk menampilkan semua data</p>
		</div>
	</div>
	<div class="row">
		<label>Urutkan</label>
		<div class="col-wrap">
			<select name="order_by">
				<?php $options = array('total' => 'Total Bayar', 'tgl_trx' => 'Tanggal Transaksi');
				foreach ($options as $key => $val) {
					$selected = @$_POST['order_by'] == $key ? ' selected="selected"' : '';
					echo '<option value="' . $key . '"' . $selected . '>' . $val . '</option>';
				}?>
			</select>
			<select name="sort">
				<option value="DESC" <?= @$_POST['sort'] == 'DESC' ? 'selected="selected"' : ''?>>DESC</option>
				<option value="ASC" <?= @$_POST['sort'] == 'ASC' ? 'selected="selected"' : ''?>>ASC</option>
			</select>
		</div>
	</div>
	<div class="row">
		<label>Periode</label>
		<div class="col-wrap">
			<select name="bln_awal">
				<?php 
				foreach ($month_options as $key => $val) {
					$selected = @$_POST['bln_awal'] == $key ? ' selected="selected"' : '';
					echo '<option value="' . $key . '"' . $selected . '>' . $val . '</option>';
				}?>
			</select> s.d. 
			<select name="bln_akhir">
				<?php 
				$selected = '';
				foreach ($month_options as $key => $val) {
					if (isset($_POST['submit'])) {
						$selected = @$_POST['bln_akhir'] == $key ? ' selected="selected"' : '';
					} else {
						$selected = $key == date('n') ? ' selected="selected"' : '';
					}
					echo '<option value="' . $key . '"' . $selected . '>' . $val . '</option>';
				}?>
				?>
			</select>
		</div>
	</div>
	<div class="row">
		<label>Tahun</label>
		<div class="col-wrap options">
			<?php 
			foreach ($year_options as $key => $val) {
				if (isset($_POST['submit'])) {
					$checked = isset($_POST[$key]) ? ' checked="checked"' : '';
				} else {
					$checked = $key == 2017 ? ' checked="checked"' : '';
				}
				
				echo '<label class="checkbox">
						<input type="checkbox" name="' . $val . '"' . $checked . '>' . $val . 
					'</label>';
			}
			?>
		</div>
	</div>
	<div class="row">
		<input class="offset button" type="submit" name="submit" value="Submit"/>
	</div>
</form>

Pada kode diatas, untuk membuat elemen select, kita banyak menggunakan array dan loop.

Ketika  elemen select memiliki cukup banyak opsi (  <option ... >  ), penggunaan array dan loop akan mempermudah kita menambah atau mengurangi opsi  yang ada. Selain itu juga mempermudah kita untuk memberi nilai default pada opsi.

Nilai Default

Isian pada form otomatis akan terisi nilai tertentu baik ketika form ditampilkan pertama kali, maupun ketika form disubmit:

• Input nama barang. Ketika form dibuka maka isian nama barang akan kosong, ketika disubmit, maka akan memiliki nilai sesuai yang diinput user, kode yang kita gunakan:

  value="<?=@$_POST['nama_barang'] ?: ''?>"

  Pada contoh diatas, kita menggunakan ternary operator: @$_POST['nama_barang'] ?: '', ternary tersebut merupakan kependekan dari:

  @$_POST['nama_barang'] ? $_POST['nama_barang'] : ''

  Kita tambahkan tanda @ didepan $_POST untuk menghindari pesan warning yang muncul saat pertama kali form ditampilkan karena variabel $_POST belum terdefinisi.

• Pilihan Periode. Ketika form ditampilkan,  maka pilihan bulan awal akan otomatis terpilih Januari, sedangkan untuk bulan akhir, akan terpilih bulan sekarang, misal: karena saat ini bulan April, maka periode yang terpilih adalah Januari s.d April.

  Jika form disubmit, maka periode akan otomatis terpilih sesuai dengan yang dipilih user

  foreach ($month_options as $key => $val) {
  	if (isset($_POST['submit'])) {
  		$selected = @$_POST['bln_akhir'] == $key ? ' selected="selected"' : '';
  	} else {
  		$selected = $key == date('n') ? ' selected="selected"' : '';
  	}
  	echo '<option value="' . $key . '"' . $selected . '>' . $val . '</option>';
  }

• Untuk pilihan tahun, ketika form pertama kali ditampilkan, yang terpilih adalah tahun 2017, sedangkan jika disubmit, maka akan tercentang  tahun yang dipilih.

  if (isset($_POST['submit'])) {
  	$checked = isset($_POST[$key]) ? ' checked="checked"' : '';
  } else {
  	$checked = $key == 2017 ? ' checked="checked"' : '';
  }

Untuk opsi urutkan, cara kerjanya sama seperti elemen select pada bulan awal

II. Data Tabel MySQL

Pada tutorial kali ini, kita akan menampilkan tabel hasil penggabungan 2 (dua) tabel mysql yaitu tabel penjualan dan tabel barang, keduanya memiliki struktur dan hubungan sebagai berikut:

Pada gambar diatas, tabel penjualan memiliki kolom id_barang yang merupakan foreign key dari kolom id_pelanggan yang ada pada tabel pelanggan.

Contoh isi tabel penjualan:

+--------------+--------------+-----------+------------+----------+--------------+--------+--------+
| id_transaksi | id_pelanggan | id_barang | tgl_trx    | jml_item | harga_satuan | diskon | total  |
+--------------+--------------+-----------+------------+----------+--------------+--------+--------+
|            1 |            4 | 302       | 2017-01-05 |        1 |        80000 |   0.00 |  80000 |
|            2 |            7 | 301       | 2017-03-03 |        3 |        35000 |   0.05 |  99750 |
|            3 |            2 | 303       | 2017-03-10 |        5 |        80000 |   0.10 | 360000 |
|            4 |            8 | 104       | 2017-02-03 |        2 |       250000 |   0.05 | 475000 |
|            5 |            6 | 303       | 2017-01-11 |        4 |        80000 |   0.10 | 288000 |
+--------------+--------------+-----------+------------+----------+--------------+--------+--------+

Contoh isi tabel barang:

+----+-----------+-------------+-------------+---------+------+
| id | id_barang | id_kategori | nama_barang | harga   | stok |
+----+-----------+-------------+-------------+---------+------+
|  1 | 101       |           1 | RAM         |  230000 |    4 |
|  2 | 102       |           1 | Mainboard   | 1250000 |    7 |
|  3 | 103       |           1 | Pocessor    | 1150000 |    6 |
|  4 | 301       |           3 | Mousepad    |   35000 |    3 |
|  5 | 302       |           3 | Keyboard    |   80000 |    5 |
+----+-----------+-------------+-------------+---------+------+

III.  Script PHP Untuk Pesan Error dan Warning

Selanjutnya kita buat script PHP  untuk menguji data yang disubmit oleh user dan menampilkan  hasil query ke bentuk tabel HTML.

Agar pesan error berada diatas form, maka script PHP untuk menguji data yang disubmit kita letakkan diatas form. Script PHP yang kita gunakan:

$hasil_query      = false;
$error = $warning = array();
if (isset($_POST['submit'])) 
{
	// CEK APAKAH ADA TAHUN YANG DICETANG
	$form_error = '';
	$year_checked = false;
	foreach ($year_options as $year) {
		if (key_exists($year, $_POST)) {
			$year_checked = true;
			break;
		}
	}
	if (!$year_checked) {
		$error[] = 'Tahun harus dipilih';
	}
	
	// JIKA FORM ERROR
	if (!$error) {
		require_once('config.php');
		// KONEKSI
		$conn = @mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME); 
		if (!$conn) {
			$error[] = 'MySQL ERROR : ' . mysqli_connect_error($conn);
		} else {
			// WHERE
			// Nama Barang
			$where = trim($_POST['nama_barang']) ? 'nama_barang LIKE "%'.$_POST['nama_barang'].'%"' : '';
			
			// Tahun
			$periode = '( ';
			foreach ($year_options as $year) {
				if (key_exists($year, $_POST)) {
					$bln_awal = substr('0' . $_POST['bln_awal'], -2);
					$bln_akhir = substr('0' . $_POST['bln_akhir'], -2);
					$periode .= '( tgl_trx > "' . $year . '-' . $bln_awal . '-00"
								AND tgl_trx < "' . $year . '-' . $bln_akhir . '-99" ) OR';
				}
			}
			
			$where .= ' AND ' . rtrim($periode, ' OR') . ') ';
			$where = ltrim ($where, ' AND ');
			
			// QUERY
			$sql =  'SELECT * 
					FROM penjualan 
					LEFT JOIN barang USING(id_barang) 
					WHERE ' . $where . '
				ORDER BY ' . $_POST['order_by'] . ' ' . $_POST['sort'];
		
			$result = mysqli_query ($conn, $sql); 

			// RESULT
			if (!$result) {
				$error[] = mysqli_error($conn) . '<br/><strong>SQL Query</strong>: ' .  $sql;
			} else {
				$num_rows = mysqli_num_rows($result);
				if (!$num_rows) {
					$warning[] = 'Data tidak ditemukan';
				} else {
					$hasil_query = true;
				}
			}
		} // 
	}
}

Penjelasan:

• Dengan fungsi isset (isset($_POST['submit']) kita cek apakah form telah disubmit.
• Semua pesan error kita simpan pada variabel $error, sedangkan untuk warning kita simpan pada variabel $warning
• Selanjutnya, dengan loop foreach ($year_options as $year) {...}  kita cek apakah ada tahun yang dicentang, jika tidak ada, maka tambahkan pesan error ke dalam variabel $error  

  if (!$year_checked) {
  	$error[] = 'Tahun harus dipilih';
  }

• Jika form tidak error, kita sertakan file config.php. File ini berisi konfigurasi server  database. Selanjutnya dengan fungsi mysqli_connect() kita hubungkan PHP dengan MySQL. Jika koneksi gagal,  tambahkan pesan error

  $error[] = mysqli_error($conn) . '<br/><strong>SQL Query</strong>: ' .  $sql;

• Selanjutnya jalankan query, jika query gagal, tambahkan pesan error, jika berhasil, namun baris yang dihasilkan 0, tambahkan pesan warning ke variabel $warning

  $num_rows = mysqli_num_rows($result);
  if (!$num_rows) {
  	$warning[] = 'Data tidak ditemukan';
  } else {
  	$hasil_query = true;
  }

Jika terdapat pesan error dan warning, kita cetak pesan tersebut di atas form:

if ($error) {
	echo '<div class="danger">Error: ' . join($error, ', ') . '</div>';
}

if ($warning) {
	echo '<div class="warning">' . join($warning, ', ') . '</div>';
}

Selanjutnya kita buat script PHP untuk menampilkan data MySQL kedalam tabel HTML. Karena hasil query berada di bawah form, maka kita letakkan script dibagian bawah form.

IV.  Script PHP Untuk Menyusun Query SQL

Bagian utama dari keseluruhan script diatas adalah menyusun query SQL untuk menampilkan data. Karena isian bersifat dinamis, terutama bagian tahun, maka kita perlu menggunakan  beberapa ekspresi logika.

Script PHP untuk menyusun sql berada bersamaan dengan script validasi (bagian III), karena script tersebut sekaligus untuk menguji apakah data ditemukan.

1 Script PHP Untuk Menyusun Klausa WHERE

Pertama tama yang kita susun adalah kondisi pada  klausa WHERE karena pada bagian inilah sebagian besar inputan user akan diterapkan. Kondisi pada klausa WHERE kita simpan pada variabel $where

Script untuk menyusun klausa WHERE (sudah termasuk dalam script validasi (Bagian III)):

// WHERE
// Nama Barang
$where = trim($_POST['nama_barang']) ? 'nama_barang LIKE "%'.$_POST['nama_barang'].'%"' : '';

// Tahun
$periode = '( ';
foreach ($year_options as $year) {
	if (key_exists($year, $_POST)) {
		$bln_awal = substr('0' . $_POST['bln_awal'], -2);
		$bln_akhir = substr('0' . $_POST['bln_akhir'], -2);
		$periode .= '( tgl_trx > "' . $year . '-' . $bln_awal . '-00"
					AND tgl_trx < "' . $year . '-' . $bln_akhir . '-99" ) OR';
	}
}

$where .= ' AND ' . rtrim($periode, ' OR') . ') ';
$where = ltrim ($where, ' AND ');

Klausa WHERE ini terkait dengan input dari user, mari kita bahas satu per satu:

• Input Nama Barang. Jika bagian input nama barang kosong, maka kita ambil semua data sehingga variable $where kosong, jika tidak, maka kita tambahkan kondisi  nama_barang LIKE "%'.$_POST['nama_barang'].'%"'

  $where = trim($_POST['nama_barang']) ? 'nama_barang LIKE "%'.$_POST['nama_barang'].'%"' : '';

  Misal jika diisikan VGA, maka variabel $where menjadi $where = ‘nama_barang LIKE "%VGA%"'

• Input Urutkan. Untuk pilihan urutkan akan langsung digabungkan dengan query utama.
• Input Periode dan Tahun. Kedua pilihan ini merupakan satu kesatuan, karena sifatnya dinamis, maka dengan fungsi  key_exists($year, $_POST) kita cek apakah ada index tahun pada variabel $_POST, misal $_POST[2017], jika ya, maka kita simpan kondisi pada variabel $periode:

  $periode .= '( tgl_trx > "' . $year . '-' . $bln_awal . '-00"
  	    AND tgl_trx < "' . $year . '-' . $bln_akhir . '-99" ) OR';

  Jika semua tahun dicentang, maka variabel $periode akan berisi:

  ( 
  	(tgl_trx > "2017-01-00" AND tgl_trx < "2017-04-99" ) 
  	OR ( tgl_trx > "2016-01-00" AND tgl_trx < "2016-04-99" ) 
  	OR( tgl_trx > "2015-01-00" AND tgl_trx < "2015-04-99" )
  ) OR

  Selanjutnya, kita tambahkan kondisi diatas ke variabel $where,  namun sebelumnya kita perlu untuk menghilangkan klausa OR yang ada dipaling belakang, selain itu, untuk menggabungkan dengan kondisi pada input nama barang, kita tambahkan klausa AND  di awal kondisi:

  $where .= ' AND ' . rtrim($periode, ' OR') . ') ';

  Misal, jika input nama barang diisi VGA, maka variabel $where akan berisi:

  WHERE nama_barang LIKE "%VGA%" 
  	AND (	(tgl_trx > "2017-01-00" AND tgl_trx < "2017-04-99" ) 
  		OR( tgl_trx > "2016-01-00" AND tgl_trx < "2016-04-99" ) 
  		OR( tgl_trx > "2015-01-00" AND tgl_trx < "2015-04-99" )
  	)

  Selanjutnya, jika nama barang kosong, kita perlu menghilangkan klausa AND yang ada di depan kondisi, jika tidak, query akan error, karena klausa yang tersbentuk WHERE AND

  WHERE AND ((tgl_trx > "2017-01-00" AND tgl_trx < "2017-04-99" ) ...

  Untuk menghilangkan klausa AND, kita gunakan fungsi ltrim sebagai  berikut:

  $where = ltrim ($where, ' AND ');

  Jika tidak ada klausa AND didepan (input nama barang diisi), maka script diatas tidak berpengaruh apa-apa.

2 Script PHP Untuk Menyusun SQL

Setelah kita susun klausa WHERE, selanjutnya kita buat query utama mulai dari statemen SELECT, script PHP yang kita gunakan adalah sebagai berikut (sudah termasuk dalam script validasi (Bagian III)):

$sql = 'SELECT * 
	FROM penjualan 
	LEFT JOIN barang USING(id_barang) 
	WHERE ' . $where . '
	ORDER BY ' . $_POST['order_by'] . ' ' . $_POST['sort'];

Jika input nama barang diisi VGA dan semua tahun di centang, maka keseluruhan perintah SQL menjadi berikut:

$sql = 'SELECT * 
	FROM penjualan 
	LEFT JOIN barang USING(id_barang) 
	WHERE nama_barang LIKE "%VGA%" 
		AND ( 
			( tgl_trx > "2017-01-00" AND tgl_trx < "2017-04-99" ) 
			OR ( tgl_trx > "2016-01-00" AND tgl_trx < "2016-04-99" )
			OR ( tgl_trx > "2015-01-00" AND tgl_trx < "2015-04-99" )
		) 
	ORDER BY total DESC';

V.  Script PHP Untuk  Menampilkan Hasil Query ke Tabel HTML

Data hasil query kita tampilkan dibagian bawah form. Karena hasil query terpisah dari pesan error dan warning, kita gunakan variabel $hasil_query untuk menguji apakah  query berhasil dieksekusi dan data yang dihasilkan > 0.  

Nilai variabel $hasil_query ditentukan pada bagian validasi (Bagian III). Jika variabel tersebut bernilai true, kita tampilkan tabel hasil query. Script yang kita gunakan:

if (isset($_POST['submit'])) {
	
	if ($hasil_query) 
	{
		echo '<div class="success">Ditemukan <strong>' . $num_rows . '</strong> data</div>';
		$thead = '
			<tr>
				<th>No</th>
				<th>Nama Barang</th>
				<th>Tgl Transaksi</th>
				<th>Jumlah Item</th>
				<th>Harga Satuan</th>
				<th>Diskon</th>
				<th>Total</th>
			</tr>';
			
		echo '
		<div class="table-responsive">
		<table>
				<thead>' . $thead . '</thead>
				<tbody>';
		
		$no = 1;
		while($row = mysqli_fetch_array($result)) {
			echo '<tr>
				<td>' . $no . '</td> 
				<td>' . $row['nama_barang'] . '</td> 
				<td>' . $row['tgl_trx'] . '</td> 
				<td class="right">' . $row['jml_item'] . '</td> 
				<td class="right">' . number_format($row['harga_satuan'], 0, ',', '.') . '</td> 
				<td class="right">' . $row['diskon'] . '</td> 
				<td class="right">' . number_format($row['total'], 0, ',', '.') . '</td> 
			</tr>
			';
			$no++;
		}
		echo '<tfoot>' . $thead . '</tfoot></tbody>
		</table>
		</div>';
	}
}

Pada script diatas, kita gunakan fungsi  mysqli_fetch_array untuk mengambil setiap baris hasil query. Kita juga menggunakan fungsi number_format untuk memberi tanda pemisah pada ribuan, yang pada contoh kali ini kita gunakan tanda titik

<td class="right">' . number_format($row['harga_satuan'], 0, ',', '.') . '</td>

Demikian pembahasan mengenai cara menampilkan tabel MySQL kedalam tabel HTML menggunakan PHP dan Form HTML. Artikel terkait PHP dan form HTML:

• Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP
• Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP