Membuat Filter Price PHP Menggunakan jQuery Slider

0 4

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 tangkai tangkai dari slider jQuery UI. Setelah mengatur min dan rentang maks, area yang dipilih antara dua tangkai tarik disorot.

Saya telah menggunakan slider jQuery range ini untuk memilih rentang harga produk. Berdasarkan rentang harga yang dipilih, saya memfilter data produk dari database. Sambil menyeret pegangan min-max, minimum dan kisaran maksimum ditampilkan secara dinamis dengan menggunakan kotak edit yang sesuai. Pengguna juga bisa langsung memasukkan input range mereka menggunakan kotak input min-max ini.

Range Slider Input HTML

Kode HTML ini berisi wadah target untuk diganti sebagai slider jangkauan. Dengan referensi elemen ini, slider jQuery UI dipanggil untuk menampilkan slider rentang dengan rentang min-max default. Sementara menyeret penangan jarak, nilai min-max diperbarui secara dinamis pada kotak input.

<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 Penyaringan Data Produk Berdasarkan Kisaran Harga

Kode PHP ini menerima minimun dan input data kisaran harga maksimum yang diposkan melalui form HTML. Dengan menggunakan rentang ini, kueri dibuat untuk menyaring data produk dari database. Array yang dihasilkan iterasi dan data produk ditampilkan dalam bentuk tabel.

<?php

$conn = mysqli_connect("localhost", "root", "", "pricerange");

$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;

?>

Kisaran Harga PHP Output Slider

Screenshot ini menunjukkan slider kisaran harga dengan kisaran min-max default. Selain itu, juga menampilkan data produk yang disaring dari database.

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.