Hallo sobat Dumenity berjumpa lagi pada tutorial kursuswebprogramming, di panduan kali ini kita akan belajar mengenai PHP Price Range Search menggunakan jQuery Slider. JQuery UI slider digunakan bagi memilih rentang min-max bagi menjalankan operasi dengan jangkauan seperti pencarian, validasi, dan lainnya. Rentang min-max ditetapkan dengan menggunakan dua tuas seret penggeser UI jQuery. Setelah mengatur min dan rentang max area yang dipilih antara dua pegangan seret disorot.
Saya telah menggunakan slider rentang jQuery ini bagi memilih rentang harga produk. Merujuk pada rentang harga yang dipilih, saya memfilter data produk dari database. Sambil menyeret pegangan min-max, rentang minimum dan maksimum ditampilkan secara dinamis dengan menggunakan kotak menej yang sesuai. Pengguna pun dapat seketika memasukkan input jangkauan mereka menggunakan kotak input min-max ini.
Rentang Slider Input HTML
Kode HTML ini berisi kontainer target bagi diganti selaku penggeser rentang. Dengan referensi faktor ini, penggeser UI jQuery dipanggil bagi menampilkan rentang slider dengan rentang min-maks default. Sambil menyeret penangan jangkauan, nilai min-max diperbarui secara dinamis di kotak input.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<link rel=“stylesheet”
href=“https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css” />
<script src=“https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=“https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<div class=“form-price-range-filter”>
<form method=“post” action=“”>
<div>
<input type=“” id=“min” name=“min_price”
value=“<?php echo $min; ?>“>
<div id=“slider-range”></div>
<input type=“” id=“max” name=“max_price”
value=“<?php echo $max; ?>“>
</div>
<div>
<input type=“submit” name=“submit_range”
value=“Filter Product” class=“btn-submit”>
</div>
</form>
</div>
|
Kode PHP bagi Memfilter Data Produk Merujuk pada Rentang Harga
Kode PHP ini menerima minimum dan data input kisaran harga maksimum yang diposting lewat form HTML. Dengan menggunakan rentang ini, kueri dibangun bagi memfilter data produk dari database. Array yang diraih iterated dan data produk ditampilkan pada format tabel.
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
|
<?php
$conn = mysqli_connect(“localhost”, “root”, “test”, “phpsamples”);
$result = mysqli_query($conn, “select * from tbl_product where price BETWEEN ‘$min’ AND ‘$max'”);
$count = mysqli_num_rows($result);
if ($count > 0) {
?>
<hr>
<div class=“container”>
<table class=“tutorial-table” cellspacing=“1px” width=“100%”>
<tr>
<th>Product name</th>
<th>Code</th>
<th class=“text-right”>Price (in $)</th>
</tr>
<?php
while ($row = mysqli_fetch_array($result)) {
?>
<tr>
<td><img class=“product-thumb” src=“<?php echo $row[‘image’]; ?>“ /><?php echo $row[‘name’]; ?></td>
<td><?php echo $row[‘code’]; ?></td>
<td class=‘text-right’><?php echo $row[‘price’]; ?></td>
</tr>
<?php
} // end while
} else {
?>
<div class=“no-result”>No Results</div>
<?php
}
sumber :kursuswebprogramming.com/blog/
(Visited 4 times, 1 visits today)
|
