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.

Membuat Filter Harga Menggunakan AJAXJQuery Dan PHP

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

14 April 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat