In this post we have cover topic like How to create Jquery Ajax Price Range Slider by using PHP with Mysql. This will helpful to user to filter data or items based on value generated when we have drag range slider instead of type of price in textbox. In current scenario this is most common features in E commerce website for display product or sell product online. Jquery UI Range slider is extremely helpful to append filter quality to our data or item list. JQuery UI Range slider mainly help to search item or data by range of price. Price range slider permit us to filter the list of data by drag price range alternatively of enter of the price physically.
In this blog, we have develop a price range slider by using jQuery UI and after this we will append filter feature to item list or data list with PHP and MySQL. The Price range filter is a mandatory functionality in items or products listing and this range slider is a ideal option for price filter. So, Here we will see how can we insert a simple price range slider to item list of products list by using jQuery UI with PHP and then after filter products by price range by using Ajax JQuery with PHP & Mysql.
First we have to make table in our database. For this we have use following code.
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_product`
--
CREATE TABLE `tbl_product` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`image` varchar(255) NOT NULL,
`price` double(10,2) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_product`
--
INSERT INTO `tbl_product` (`id`, `name`, `image`, `price`) VALUES
(1, 'Item 1', '1.jpg', 3500.00),
(2, 'Item 2', '2.jpg', 4600.00),
(3, 'Item 3', '3.jpg', 4000.00),
(4, 'Item 4', '4.jpg', 13000.00),
(5, 'Item 5', '5.jpg', 4000.00),
(6, 'Item 6', '6.jpg', 16000.00),
(7, 'Item 7', '7.jpg', 2700.00),
(8, 'Item 8', '8.jpg', 5000.00),
(9, 'Item 9', '9.jpg', 7000.00),
(10, 'Item 10', '10.jpg', 9000.00),
(11, 'Item 11', '11.jpg', 8000.00),
(12, 'Item 12', '12.jpg', 15000.00),
(13, 'Item 13', '13.jpg', 11000.00),
(14, 'Item 14', '14.jpg', 6000.00),
(15, 'Item 15', '15.jpg', 7200.00),
(16, 'Item 16', '16.jpg', 6600.00),
(17, 'Item 17', '17.jpg', 8000.00),
(18, 'Item 18', '18.jpg', 4500.00),
(19, 'Item 19', '19.jpg', 10500.00),
(20, 'Item 20', '20.jpg', 9200.00),
(21, 'Item 21', '21.jpg', 7400.00),
(22, 'Item 22', '22.jpg', 5600.00),
(23, 'Item 23', '23.jpg', 4000.00),
(24, 'Item 24', '24.jpg', 5000.00),
(25, 'Item 25', '25.jpg', 8900.00);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_product`
--
ALTER TABLE `tbl_product`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_product`
--
ALTER TABLE `tbl_product`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=26;
index.php
<?php
$minimum_range = 3000;
$maximum_range = 5000;
?>
<html>
<head>
<title>Make Price Range Slider using JQuery with PHP Ajax</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">
<br />
<br />
<br />
<h3 align="center">Make Price Range Slider using JQuery with PHP Ajax</a></h3><br />
<br />
<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>
<br />
<div id="load_product"></div>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
$( "#price_range" ).slider({
range: true,
min: 1000,
max: 20000,
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>
fetch.php
<?php
//fetch.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$query = "SELECT * FROM tbl_product WHERE price BETWEEN '".$_POST["minimum_range"]."' AND '".$_POST["maximum_range"]."' ORDER BY price ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = '
<h4 align="center">Total Item - '.$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["image"].'" class="img-responsive img-thumnai img-circle" />
<h4 align="center">'.$row["name"].'</h4>
<h3 align="center" class="text-danger">'.$row["price"].'</h3>
<br />
</div>
</div>
';
}
}
else
{
$output .= '
<h3 align="center">No Product Found</h3>
';
}
$output .= '
</div>
';
echo $output;
?>
Awesome, works great, thank you!
ReplyDeleteplz made everything in laravel framework
ReplyDeletethats what im looking for my project ive tried 4 ways and nothing ^^
Delete