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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
--
-- 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.php
|
setelah itu kita buat layout dulu, maka buka
index.php dan tambahkan code di bawah ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<?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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
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/onphpid, 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 dan Subscribe
Channel ONPHPID Tutorial. Selamat Belajar…
