Hallo teman-teman ONPHPID, pada kesempatan kali ini kita akan belajar Bagaimana Menampilkan Data dari database berdasarkan Dropdown select. Jadi nantinya kita dapat membuat layaknya fasilitas filter pada kebanyakan toko online, meskipun hanya sederhana tapi teman-teman dapat mengekplore lagi untuk digunakan pada aplikasi yang akan teman-teman buat. Jika ingin Belajar Laravel disini ya teman-teman.
Mari kita persiapakan, pertama buat database dengan nama change, lalu buat dua table. agar lebih cepat teman-teman dapat menggunakan tabel yang sudah lebih dulu saya buat berikut ini :
--
-- Table structure for table `merk`
--
CREATE TABLE `merk` (
`id` int(11) NOT NULL,
`nama_merk` varchar(225) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `merk`
--
INSERT INTO `merk` (`id`, `nama_merk`) VALUES
(1, 'Samsung'),
(2, 'Sony'),
(3, 'Asus'),
(4, 'Xiaomi'),
(5, 'Oppo');
-- --------------------------------------------------------
--
-- Table structure for table `product`
--
CREATE TABLE `product` (
`id` int(11) NOT NULL,
`nama_product` varchar(225) NOT NULL,
`merk_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `product`
--
INSERT INTO `product` (`id`, `nama_product`, `merk_id`) VALUES
(1, 'Samsung Galaxy A9', 1),
(2, 'Samsung Galaxy S7', 1),
(3, 'Samsung Galaxy S6 edge', 1),
(4, 'Xperia Z5 Premium', 2),
(5, 'Xperia M5 Dual', 2),
(6, 'Xperia C5 ultra', 2),
(7, 'Zenfone 2', 3),
(8, 'Zenfone 3', 3),
(9, 'Redmi 3 Pro', 4),
(10, 'Mi 5', 4),
(11, 'F1 s', 5);kemudian buat project baru dengan nama yang teman-teman inginkan, di sini ONPHPID membuat project dengan nama onphpid. Lalu buat 4 file masing-masing dengan nama app.js, index.php, ProductController.php, dan Config.php sehingga struktur direktorinya seperti di bawah ini :
onphpid/
-app.js
-Config.php
-index.php
-ProductController.phpsetelah itu kita buat layout dulu, maka buka index.php dan tambahkan code di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown change with AJAX</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://www.onphpid.com/">
ONPHPID Tutorial
</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-3">
<select class="form-control" id="getProduct">
<option value="show-all" selected="selected">Produk</option>
<!-- Menampilkan data dari tabel merk untuk dijadikan list dropdown -->
<?php
require_once 'Config.php';
$stmt = $db->prepare('SELECT * FROM merk');
$stmt->execute();
?>
<?php while($row = $stmt->fetch(PDO::FETCH_ASSOC)): ?>
<?php extract($row); ?>
<option value="<?php echo $id; ?>"><?php echo $nama_merk; ?></option>
<?php endwhile; ?>
</select>
</div>
</div>
</div>
</div>
</div>
<div id="show-product">
<!-- data akan di tampilkan di sini -->
</div>
</div>
</body>
</html>Note :
- File Bootstrap dan Jquery saya ambil dari CDN
kemudian kita buat koneksi ke database, buka file Config.php dan masukan code seperti di bawah ini :
<?php
$dbhost = 'localhost'; // host
$dbname = 'change'; // database
$dbuser = 'root'; // username
$dbpass = ''; // password
try{
$db = new PDO("mysql:host={$dbhost};dbname={$dbname}", $dbuser, $dbpass);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e){
die($e->getMessage());
}jika sudah mari kita buat script untuk memproses ketika ada event change pada dropdownnya. Buka file ProductController.php dan tambahkan code di bawah ini :
<?php
require_once('Config.php');
$action = $_REQUEST['action'];
if($action == "show-all"){
// jika selected produk get all product
$stmt=$db->prepare('SELECT * FROM product');
$stmt->execute();
}
else{
// else ambil data berdasarkan merk_id
$stmt=$db->prepare('SELECT * FROM product WHERE merk_id=:id');
$stmt->execute([
':id'=>$action
]);
}
?>
<div class="row">
<?php if($stmt->rowCount() > 0): ?>
<!-- Jika jumblah row lebih besar dari 0 artinya datanya ada, loop -->
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC)): ?>
<?php extract($row); ?>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTipL--hVFrGvdAYKcSIzLFrdTP1wnuWaPBcxLrQ7LsTMcA_X2J" alt="...">
<div class="caption">
<h3><?php echo $nama_product; ?></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p><a href="#" class="btn btn-primary" role="button">Buy</a> <a href="#" class="btn btn-default" role="button">Detail</a></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else: ?>
<!-- else, jika tidak maka tampilkan bahwa data kosong -->
<div class="col-sm-6 col-md-4">
<center>
<h1>
Product Habis
</h1>
</center>
</div>
<?php endif; ?>
</div>kemudian kita buat script ajaxnya di file app.js, silakan teman-teman tambahkan code di bawah ini :
jQuery(function()
{
// function untuk mengambil semua data
function getAll()
{
$.ajax({
url: 'ProductController.php',
data: 'action=show-all',
cache: false,
success: function(response){
// jika berhasil
$("#show-product").html(response);
}
});
}
getAll(); // load ketika document ready
// ketika ada event change
$("#getProduct").change(function()
{
var id = $(this).find(":selected").val();
var dataString = 'action='+ id;
$.ajax({
url: 'ProductController.php',
data: dataString,
cache: false,
success: function(response){
// jika berhasil
$("#show-product").html(response);
}
});
})
});Ok teman-teman selesai…
Mari kita cek di browser dengan URL localhost/www.onphpid.com, jika tidak ada kesalahan maka akan tampil seperti gambar di bawah ini :
Bagaimana teman-teman apakah berhasil? jika belum coba dibaca lagi dengan teliti mungkin ada yang terlewat.
Baca Juga : 4 website Flat UI Colors yang dapat menjadi referensi memilih warna untuk aplikasi kita
Sekian dulu Tutorial Menampilkan Data Berdasarkan Dropdown Select Pada PHP MySQL. Jika ada hal yang kurang jelas atau ingin ditanyakan dapat melalui komentar. JANGAN LUPA like FANSPAGE ONPHPID untuk update informasi dari ONPHPID Tutorial. Selamat Belajar…
ini pakai pdo, kalau ci bagaimana?
tidak jauh berbeda, kalo sudah bisa menampilkan data by id tentunya tinggal di aplikasikan menggunakan javascript
Tinggal sesuaikan dengan query di CI mbak
Bang, klo menu dropdownnya lebih dari satu bagaimana?. Misalnya ada 2 menu dropdown select contoh saya mau menampilkan data menurut tahun akan tetapi di filter lagi dengan bulan, bagaimana ya ?
Konsepnya sma
Ketika dipilih tahun filter berdasar tahun,tampilkan
Ketika di pilih bulan filter lg berdasar bulan yg tahunnya sama dengan yg udh di pilih td,tampilkan
pas select optionnya pilih “semua” kenapa datanya gak muncul ya bang?
saya make php native, tolong bantuannya dong bang
Coba ctrl+shift+i
Liat errornya mas
Jika setelah di select, datanya ga muncul. salahnya dimana ya bg?
mohon bantuannya dong