How to Create a Price Range Slider Filter Using PHP and Ajax

Submitted by razormist on Saturday, May 1, 2021 - 14:52.

In this tutorial we will create a Price Range Slider Using Ajax. PHP is a server-side scripting language designed primarily for web development. Using Ajax, data could then be passed between the browser and the server, using the XMLHttpRequest API, without having to reload the web page. It is designed to simplify the traditional way of coding in javascript.

So let's now do the coding...

Before we get started:

First you have to download & install XAMPP or any local server that run PHP scripts. Here's the link for XAMPP server https://www.apachefriends.org/index.html.

And this is the link for the jquery that i used in this tutorial https://jquery.com/.

Lastly, this is the link for the bootstrap that i used for the layout design https://getbootstrap.com/.

Creating Database

Open your database web server then create a database name in it db_price. After that, click Import then locate the database file inside the folder of the application then click ok.

You can also create the product table progrmmatically. To do that, copy the code below paste it into provided Text Field in your PHPMyAdmin SQL Tab of your newly created database.

CREATE TABLE `product` (
  `product_id` int(11) NOT NULL,
  `product_name` varchar(50) NOT NULL,
  `product_price` int(20) NOT NULL,
  `product_image` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
ALTER TABLE `product`
  ADD PRIMARY KEY (`product_id`);
  
ALTER TABLE `product`
  MODIFY `product_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

Creating the database connection

Open your any kind of text editor(notepad++, etc..). Then just copy/paste the code below then name it conn.php.

<?php
        $conn = new mysqli("localhost", "root", "", "db_price");
        
        if(!$conn){
                die("Error: Can't connect to database!");
        }
?>

Creating The Interface

This is where we will create a simple form for our application. To create the forms simply copy and paste it into your text editor, then save it as index.php.

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
 
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">PHP - Price Range Slider Using Ajax</h3>
                <hr style="border-top:1px dotted #ccc;"/>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#form_modal"><span class="glyphicon glyphicon-plus"></span> Add Product</button>
                <hr style="border-top:5px solid #000;"/>
                <br /><br />
                
                <div id="product_list">
                        <?php
                                require 'conn.php';
                                
                                $query = $conn->query("SELECT * FROM `product` ORDER BY `product_price` DESC");
                                while($fetch = $query->fetch_array()){
                        ?>
                        <div class="pull-left" style="height:250px; width:200px;">
                                <center><img src="<?php echo $fetch['product_image']?>" height="150px" width="180px"/></center>
                                <center><h4><strong><?php echo $fetch['product_name']?></strong></h4></center>
                                <center><h4><?php echo $fetch['product_price']?></h4></center>
                        </div>
                        <?php
                                }
                        ?>
                </div>
                <br />
                <input type="range" min="5000" max="60000" step="1000" value="10000" id="price"/>
                <center><span id="price_range">Products Below Price 10000</span></center>
        </div>
        <div class="modal fade" id="form_modal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog" role="document">
                        <form action="save_query.php" method="POST" enctype="multipart/form-data">
                                <div class="modal-content">
                                        <div class="modal-body">
                                                <div class="col-md-2"></div>
                                                <div class="col-md-8">
                                                        <div class="form-group">
                                                                <label>Product Name</label>
                                                                <input class="form-control" type="text" name="product_name">
                                                        </div>
                                                        <div class="form-group">
                                                                <label>Product Price</label>
                                                                <input class="form-control" type="number" name="product_price">
                                                        </div>
                                                        <div class="form-group">
                                                                <label>Product Photo</label>
                                                                <input class="form-control" type="file" name="product_image">
                                                        </div>
                                                </div>
                                        </div>
                                        <div style="clear:both;"></div>
                                        <div class="modal-footer">
                                                <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
                                                <button name="save" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Save</button>
                                        </div>
                                </div>
                        </form>
                </div>
        </div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
</html>

Creating PHP Query

This code contains the PHP query of the application. This code is consists of two different functionalities. First, this code can send the data inputs to the database, and it will display the data to the HTML by ajax request To do that just copy and paste this block of codes inside the text editor, then save it as shown below.

save_query.php

<?php
        require_once 'conn.php';
        
        if(ISSET($_POST['save'])){
                if(!empty($_POST['product_name']) && !empty($_POST['product_price'])){
                        $product_name = $_POST['product_name'];
                        $product_price = $_POST['product_price'];
                        
                        $file = explode(".", $_FILES['product_image']['name']);
                        $ext = array("png", "gif", "jpg", "jpeg");
                        
                        if(in_array($file[1], $ext)){
                                $file_name = $file[0].'.'.$file[1];
                                $tmp_file = $_FILES['product_image']['tmp_name'];
                                if(!is_dir('./upload'))
                                        mkdir('./upload');
                                $location = "upload/".$file_name;
                                $new_location = addslashes($location);
                                
                                if(move_uploaded_file($tmp_file, $location)){
                                        $conn->query("INSERT INTO `product` VALUES('', '$product_name', '$product_price', '$new_location')");
                                        echo "<script>alert('Data Insert')</script>";
                                        echo "<script>window.location = 'index.php'</script>";
                                }
                                
                        }else{
                                echo "<script>alert('File not available')</script>";
                                echo "<script>window.location = 'index.php'</script>";
                        }
                                
                }else{
                        echo "<script>alert('Please complete the required field!')</script>";
                }
                
                
        }
?>

data.php

<?php
        require_once 'conn.php';
                
                $query = $conn->query("SELECT * FROM `product` WHERE `product_price` <= ".$_POST['price']." ORDER BY `product_price` DESC");
                $rows = $query->num_rows;
                if($rows > 0){
                        while($fetch = $query->fetch_array()){
?>
                                <div class="pull-left" style="height:250px; width:200px;">
                                        <center><img src="<?php echo $fetch['product_image']?>" height="150px" width="180px"/></center>
                                        <center><h4><strong><?php echo $fetch['product_name']?></strong></h4></center>
                                        <center><h4><?php echo $fetch['product_price']?></h4></center>
                                </div>
<?php
 
 
                        }
                
                }else{
                        echo "<center><h3>No Result Found!</h3></center>";
                }
?>

Creating Ajax Script

This is where the code that uses ajax request been used. This code will send an ajax request to database server, to fetch the data and display within it.To do this just copy and paste these block of codes inside the text editor, then save it as script.js inside the js folder.

$(document).ready(function(){
        $('#price').change(function(){
                var price = $(this).val();
                $("#price_range").text("Products Below Price " + price);
                
                $.ajax({
                        url: 'data.php',
                        type: 'POST',
                        data: {price: price},
                        success: function(data){
                                $("#product_list").html(data);
                        }
                });
                
        });
        
});

There you have it we successfully created Price Range Slider Using Ajax. I hope that this simple tutorial helps you to what you are looking for. For more updates and tutorials just kindly visit this site.

Enjoy Coding!!!

Add new comment

4050 views