Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang PHP Price Range Search menggunakan jQuery Slider. JQuery UI slider digunakan untuk memilih rentang min-max untuk melakukan operasi berbasis 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 untuk memilih rentang harga produk. Berdasarkan 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 edit yang sesuai. Pengguna juga dapat langsung memasukkan input jangkauan mereka menggunakan kotak input min-max ini.
Rentang Slider Input HTML
Kode HTML ini berisi kontainer target untuk diganti sebagai penggeser rentang. Dengan referensi elemen ini, penggeser UI jQuery dipanggil untuk menampilkan rentang slider dengan rentang min-maks default. Sambil menyeret penangan jangkauan, nilai min-max diperbarui secara dinamis pada 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 untuk Memfilter Data Produk Berdasarkan Rentang Harga
Kode PHP ini menerima minimum dan data input kisaran harga maksimum yang diposting melalui form HTML. Dengan menggunakan rentang ini, kueri dibuat untuk memfilter data produk dari database. Array yang dihasilkan iterated dan data produk ditampilkan dalam bentuk 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 } mysqli_free_result($result); mysqli_close($conn); echo $output; ?> |
Output Slider Jarak Harga PHP
Screenshot ini menunjukkan slider kisaran harga dengan rentang min-maks default. Juga, ini menampilkan data produk yang difilter dari database.
Oke itulah tadi pembahasan saya tentang PHP Price Range Search menggunakan jQuery Slider, semoga bermanfaat.