11-Apr-2023
.
Admin
Hi guys,
Today i will explained how to Creating Price Range Slider Using JQuery In PHP With MySQL. This example is so easy to use in php. This example to i am use to the jquery range slider and get to the price renge regarding to get all product records.
So let's start to the example.
Database Format
First to create a database table
CREATE TABLE `products` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`price` float(6,2) NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
dbconfig.php
<?php
$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName = "login";
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Price Range Slider Using JQuery In PHP With MySQL Example</title>
<style type="text/css">
.container{
padding: 20px;
}
.filter-panel{
width: 100%;
}
.filter-panel p{
margin-right:30px ;
float: left;
}
#productContainer {
float: left;
width: 100% ;
}
.list-item{
float: left;
width: 15%;
height: 80px;
padding: 10px;
border: 2px solid #333;
margin: 10px 10px 10px 0px;
}
.list-item h2{
margin: 0px;
}
</style>
<link rel="stylesheet" href="jquery.range.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="jquery.range.js"></script>
</head>
<body>
<h1>Creating Price Range Slider Using JQuery In PHP With MySQL Example</h1>
<div class="container">
<div class="filter-panel">
<p><input type="hidden" class="price_range" value="0" /></p>
<input type="button" onclick="filterProducts()" value="FILTER" />
</div>
<div id="productContainer">
<?php
include('dbConfig.php');
$query = $db->query("SELECT * FROM products ORDER BY created DESC");
if($query->num_rows > 0)
{
while($row = $query->fetch_assoc()){
?>
<div class="list-item">
<h2><?php echo $row["name"]; ?></h2>
<h4>Price: <?php echo $row["price"]; ?></h4>
</div>
<?php }
}else{
echo 'Product(s) not found';
}
?>
</div>
</div>
<script>
$('.price_range').jRange({
from: 0,
to: 500,
step: 1,
format: '%s',
width: 300,
showLabels: true,
isRange : true
});
</script>
<script>
function filterProducts() {
var price_range = $('.price_range').val();
$.ajax({
type: 'POST',
url: 'getProducts.php',
data:'price_range='+price_range,
beforeSend: function () {
$('.container').css("opacity", ".5");
},
success: function (html) {
$('#productContainer').html(html);
$('.container').css("opacity", "");
}
});
}
</script>
</body>
</html>
getProducts.php
<?php
if(isset($_POST['price_range']))
{
include('dbConfig.php');
$whereSQL = $orderSQL = '';
$priceRange = $_POST['price_range'];
if(!empty($priceRange)){
$priceRangeArr = explode(',', $priceRange);
$whereSQL = "WHERE price BETWEEN '".$priceRangeArr[0]."' AND '".$priceRangeArr[1]."'";
$orderSQL = " ORDER BY price ASC ";
}else{
$orderSQL = " ORDER BY created DESC ";
}
$query = $db->query("SELECT * FROM products $whereSQL $orderSQL");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
?>
<div class="list-item">
<h2><?php echo $row["name"]; ?></h2>
<h4>Price: <?php echo $row["price"]; ?></h4>
</div>
}else{
echo 'Product(s) not found';
}
}
?>
Now you can check your own.
I hope it can help you...
Output :
#PHP 8
#PHP
