Halo teman – teman semuanya perkenalkan saya Asrul Puadi salah satu kontributor dari SistemIT.com. Kali ini saya akan membagikan tutorial PHP mengenai cara menampilkan data dari database MYSQL menggunakan Multi-Select Dropdown.
Yuk ikuti dan pelajari kode program yang saya bagikan.
Introduce
Filters dalam bahasa indonesia bisa kita artikan sebagai saring atau penyaringan. Dalam dunia pemrograman khususnya berkaitan dengan penampilan data, filter digunakan untuk menampilkan data berdasarkan kriteria tertentu. Filter pencarian dengan bidang kombo memungkinkan multi-pilihan atau banyak pilihan. Jadi kita dapat membuat sebuah pencarian untuk menyaring data yang banyak melalui option pilihan yang dilakukan oleh user atau pengguna.
Dalam contoh kasus yang saya share ini, saya mencoba menampilkan data nama orang berdasarkan kota yang dipilih user menggunakan pilihan menu dropdown.
Skrip Database
Teman – teman harus membuat sebuah database beserta tabel datanya. Skrip kode pembuatan tabel untuk penyimpanan data bisa teman – teman lihat dan ikuti kode programnya.
create table "tb_user"(
id int(8) not null,
nama varchar(100) not null,
jk varchar(50) not null,
kota varchar(100) not null
);
insert into "tb_user" ("id","nama","jk","kota") values
("1","Andi","Laki-laki","Bandung"),
("2","Andini","Perempuan","Bandung"),
("3","Anton","Laki-laki","Pekanbaru"),
("4","Zamrun","Laki-laki","Jakarta"),
("5","Putri","Perempuan","Jakarta"),
("6","Toni","Laki-laki","Pekanbaru"),
("7","Mamat","Laki-laki","Aceh"),
("8","Citra","Perempuan","Bali"),
("9","Topan","Laki-laki","Jakarta"),
("10","Lestari","Perempuan","Pekanbaru"),
Kode Html Filter Pencarian dengan Multi Select Dropdown
Disini saya akan membuat sebuah form HTML dengan multi select dropdown. Di select dropdown ini saya membuat sebuah list nama kota yang diambil dari database tabel tb_user. List nama kota yang tertampil inilah yang akan kita gunakan dalam menampilkan data yang dipilih berdasarkan nama kota. Teman – teman bisa mengikuti kode program berikut ini :
<?php
include 'DBController.php';
$db_handle = new DBController();
$countryResult = $db_handle->runQuery("SELECT DISTINCT Country FROM tbl_user ORDER BY Country ASC");
?>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Multiselect Dropdown Filter</title>
</head>
<body>
<h2>Multiselect Dropdown Filter</h2>
<form method="POST" name="search" action="index.php">
<div id="demo-grid">
<div class="search-box">
<select id="Place" name="country[]" multiple="multiple">
<option value="0" selected="selected">Select Country</option>
<?php
if (! empty($countryResult)) {
foreach ($countryResult as $key => $value) {
echo '<option value="' . $countryResult[$key]['Country'] . '">' . $countryResult[$key]['Country'] .
'</option>';
}
}
?>
</select><br> <br>
<button id="Filter">Search</button>
</div>
</body>
</html>
Skrip Kode Query MySQL Menampilakn Data Filter
Skrip kode ini bertujuan untuk menampilkan data sesuai dari nama kota yang dipilih melalui filter dropdown sebelumnya. Data tersebut ditampilkan berupa array data berdasarkan kota yang dipilih. Berikut kode programnya :
<?php
if (! empty($_POST['country'])) {
?>
<table cellpadding="10" cellspacing="1">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Gender</strong></th>
<th><strong>Country</strong></th>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT * from tbl_user";
$i = 0;
$selectedOptionCount = count($_POST['country']);
$selectedOption = "";
while ($i < $selectedOptionCount) {
$selectedOption = $selectedOption . "'" . $_POST['country'][$i] . "'";
if ($i < $selectedOptionCount - 1) {
$selectedOption = $selectedOption . ", ";
}
$i ++;
}
$query = $query . " WHERE country in (" . $selectedOption . ")";
$result = $db_handle->runQuery($query);
}
if (! empty($result)) {
foreach ($result as $key => $value) {
?>
<tr>
<td><div class="col" id="user_data_1"><?php echo $result[$key]['Name']; ?></div></td>
<td><div class="col" id="user_data_2"><?php echo $result[$key]['Gender']; ?> </div></td>
<td><div class="col" id="user_data_3"><?php echo $result[$key]['Country']; ?> </div></td>
</tr>
<?php
}
?>
</tbody>
</table>
<?php
}
?>
Beberapa kode yang saya tampilkan diatas bisa teman – teman pelajari untuk full skrip kode akan saya sertakan link download full skripnya. Untuk teman – teman yang mengikuti kode program yang saya bagikan ini, saya berharap teman – teman tidak meg-copy paste secara mentah – mentah. Teman – teman harus membiasakan untuk menulis ulang skrip kode yang didapat untuk memahami alur kerja programnya.
Download full kodenya disini
Download
