Membuat Filter Harga Menggunakan AJAXJQuery Dan PHP

Membuat Filter Harga Menggunakan AJAXJQuery Dan PHP

Filter adalah suatu proses memilih data untuk ditampilkan di suatu halaman. Pada artikel kali ini saya akan membahas tentang cara Membuat Filter Harga Menggunakan AJAXJQuery Dan PHP. Dimana teman-teman sering studi kasus ini di beberapa marketplace. Untuk melakukan filter harga produk saya akan menggunakan range slider html.

Sebelum Membuat Filter Harga Menggunakan AJAXJQuery Dan PHP teman-teman siapkan data produk di database yang nanti akan kita tampilkan. Jika sudah maka kita akan membuat struktur htmlnya seperti pada script di bawah ini.

<?php

$minimum_range = 42000;

$maximum_range = 150000;

?>

 

<html> 

    <head> 

        <title>Membuat Filter Harga Menggunakan AJAXJQuery Dan PHP</title> 

                                <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

                                <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

                               

    </head> 

    <body> 

        <div class="container">

                                                <h3 align="center">Membuat Filter Harga Menggunakan AJAXJQuery Dan PHP</h3>

                                                <div class="row">

                                                                <div class="col-md-2">

                                                                                <input type="text" name="minimum_range" id="minimum_range" class="form-control" value="<?php echo $minimum_range; ?>" />

                                                                </div>

                                                                <div class="col-md-8" style="padding-top:12px">

                                                                                <div id="price_range"></div>

                                                                </div>

                                                                <div class="col-md-2">

                                                                                <input type="text" name="maximum_range" id="maximum_range" class="form-control" value="<?php echo $maximum_range; ?>" />

                                                                </div>

                                                </div>

                                                <div id="load_product"></div>

                                                <br />

                                </div>

    </body> 

</html> 

Jika sudah maka kita akan membuat beberapa fungsi untuk dapat menampilkan data yang akan kita filter seperti script di bawah ini.

<script> 

$(document).ready(function(){ 

   

                $( "#price_range" ).slider({

                                range: true,

                                min: 42000,

                                max: 200000,

                                values: [ <?php echo $minimum_range; ?>, <?php echo $maximum_range; ?> ],

                                slide:function(event, ui){

                                                $("#minimum_range").val(ui.values[0]);

                                                $("#maximum_range").val(ui.values[1]);

                                                load_product(ui.values[0], ui.values[1]);

                                }

                });

                load_product(<?php echo $minimum_range; ?>, <?php echo $maximum_range; ?>);

               

                function load_product(minimum_range, maximum_range){

                                $.ajax({

                                                url:"fetch.php",

                                                method:"POST",

                                                data:{minimum_range:minimum_range, maximum_range:maximum_range},

                                                success:function(data)

                                                {

                                                                $('#load_product').fadeIn('slow').html(data);

                                                }

                                });

                }

               

}); 

</script>

Dan langkah terakhir teman-teman buat file baru dengan nama fetch.php dimana didalamnya adalah perintah php untuk melakukan perintah atau request ke database untuk menampilkan data.

<?php

$connect = new PDO("mysql:host=localhost;dbname=test", "dumet", "school");

$query = "SELECT * FROM produk WHERE harga_jual BETWEEN '".$_POST["minimum_range"]."' AND '".$_POST["maximum_range"]."' ORDER BY harga_jual ASC";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

$total_row = $statement->rowCount();

 

$output = '<h4 align="center">Total Produk - '.$total_row.'</h4>

                                                <div class="row">';

if($total_row > 0){

                foreach($result as $row){

                                $output .= '

                                <div class="col-md-2">

                                                <div >

                                                                <img src="images/'.$row["gambar"].'" class="img-responsive img-thumnai img-circle" />

                                                                <h4 align="center">'.$row["nama_produk"].'</h4>

                                                                <h3 align="center" class="text-danger">'.$row["harga_jual"].'</h3>

                                                                <br />

                                                </div>

                                </div>

                                ';

                }

}else{

                $output .= '

                                <h3 align="center">No Product Found</h3>

                ';

}

$output .= '</div>';

echo $output;

?>

Jika di tampilkan di halaman browser maka akan seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Filter Harga Menggunakan AJAXJQuery Dan PHP. Semoga bermanfaat dan selamat mencoba