ساخت اسلایدر رنج قیمت jquery در php

اسلایدر رنج قیمت یا همان price range slider یکی از کاربردی ترین قابلیت ها برای اضافه کردن فیلتر برای لیست داده ها است . اسلایدر رنج قیمت jquery بیشتر در فروشگاه های اینترنتی برای جستجو و محدود کردن محصولات فروشگاه استفاده می شود .

اسلایدر رنج قیمت به کاربران سایت اجازه می دهد که بدون اینکه قیمت را دستی وارد کنند با کشیدن دو المنت اسلایدی دامنه عددی قیمت و محدوده بازه خود را انتخاب کنند . اگر در حال ساخت یک فروشگاه اینترنتی هستید حتما توصیه می کنم این قابلیت را به قسمت جستجوی پیشرفته پروژه اضافه کنید تا کار شما حرفه ای و جالب تر شود .

در این آموزش قصد داریم به شما نحوه ساخت اسلایدر رنج قیمت jquery در php را نشان بدیم . این فیلتر قیمت یکی از واجبات برای قسمت لیست محصولات است و اسلایدر رنج قیمت jquery بهترین انتخاب است . در اینجا به شما نشان می دهیم , به چه سادگی یک اسلایدر رنج قیمت را به لیست محصولات با استفاده از جی کوئری در php اضافه و محصولات را با اسلایدر رنج قیمت jQuery به صورت ajax با php,mysql پیاده سازی کنید .

ساخت جداول دیتابیس

برای ذخیره داده های محصولات فروشگاه نیاز داریم که یک table (جدول) در دیتابیس ایجاد کنیم . کد SQL زیر یک جدول products با چند فیلد ضروری را دیتابیس MySQL می سازد.

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;

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)

این فایل برای اتصال و انتخاب دیتابیس mySQL استفاده شده است . اطلاعات احراز هویت دیتابیس را در متغییر های $dbHost , $dbUsername , $dbPassword و $dbName مشخص کنید.

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName     = "NetParadis";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

<?php

// Database configuration

$dbHost = "localhost";

$dbUsername = "root";

$dbPassword = "";

$dbName = "NetParadis";

// Create database connection

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection

if ($db->connect_error) {

die("Connection failed: " . $db->connect_error);

}

فایل اصلی جی کوئری (jQuery) برای ساخت اسلایدر رنج قیمت حرفه ای و پیاده سازی قابلیت اجکس (Ajax) استفاده شده است . بنابراین اول از همه باید کتابخانه jQuery را فراخوانی کنیم .

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

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

برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود

ساخت اسلایدر رنج قیمت jQuery

jRange یک پلاگین بسیار سبک بر پایه جی کوئری است که به شما کمک می کند فیلد input را به اسلایدر رنج (محدوده ای که انتخاب بازه و دامنه عددی را فقط با کشیدن دو المنت اسلایدی برای ما فراهم می کند) تبدیل کنید. بنابراین , از پلاگین jRange جی کوئری برای ساخت محدوده قیمت استفاده میکنید . برای همین ابتدا کتابخانه js و css پلاگین را فراخوانی میکنیم . برای دانلود پلاگین jRange کلیک کنید . (فایل های مربوطه را در پایان همین مقاله به همراه سورس کامل پروژه ساخت اسلایدر رنج قیمت jQuery قرار دادیم .)

<link rel="stylesheet" href="jquery.range.css">
<script src="jquery.range.js"></script>

1 2	<link rel="stylesheet" href="jquery.range.css"> <script src="jquery.range.js"></script>

حالا , کد جی کوئری زیر را بعد از فیلد input رنج قیمت اضافه می کنیم , این کد فیلد input با کلاس price_range را با یک اسلایدر رنج قیمت جایگزین می کند.

<script>
$('.price_range').jRange({
    from: 0,
    to: 500,
    step: 50,
    format: '%s USD',
    width: 300,
    showLabels: true,
    isRange : true
});
</script>

$('.price_range').jRange({

from: 0,

to: 500,

step: 50,

format: '%s USD',

width: 300,

showLabels: true,

isRange : true

});

</script>

jRange گزینه های زیادی را برای پیکربندی اسلایدر رنج قیمت بر اساس نیاز شما را ارایه میدهد . همه آپشن های در دسترس را از اینجا می توانید پیدا کنید.

لیست محصولا با اسلایدر رنج قیمت

در کد php زیر , همه محصولات از دیتابیس fetch شده و در فایل index.php لیست می شوند . همچنین , اسلایدر رنج قیمت jquery ی که ساختیم در بالای لیست برای فیلتر محصولات بر اساس قیمت نمایش داده خواهد شد.

<div class="container">
    <div class="filter-panel">
        <p><input type="hidden" class="price_range" value="0,500" /></p>
        <input type="button" onclick="filterProducts()" value="FILTER" />
    </div>
    <div id="productContainer">
        <?php
        //Include database configuration file
        include('dbConfig.php');
        
        //get product rows
        $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>

</div>

<?php

//Include database configuration file

include('dbConfig.php');

//get product rows

$query = $db->query("SELECT * FROM products ORDER BY created DESC");

if($query->num_rows > 0){

while($row = $query->fetch_assoc()){

<h4>Price: <?php echo $row["price"]; ?></h4>

</div>

<?php }

}else{

echo 'Product(s) not found';

} ?>

</div>

فیلتر محصولات با محدوده قیمت

کد جاواسکریپت :

تابع filterProducts() مقدار محدوده قیمت را با ajax به فایل getProducts.php ارسال می کند و محصولات را بر اساس بازه قیمتی که تعیین کردیم در زیر تگ div با id , productContainer نمایش می دهد.

<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>

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>

تابع filterProducts() با کلیک بر روی دکمه FILTER اجرا می شود .

فایل getProducts.php :

فایل getProducts.php در زمان اجرای تابع filterProducts() فراخوانی میشود . در این فایل , محصولات بر اساس رنج قیمتی که تعیین کردیم fetch می شود . داده های فیلتر شده توسط متد success اجکس برگشت داده میشود .

<?php
if(isset($_POST['price_range'])){
    
    //Include database configuration file
    include('dbConfig.php');
    
    //set conditions for filter by price range
    $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 ";
    }
    
    //get product rows
    $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>
    <?php }
    }else{
        echo 'Product(s) not found';
    }
}
?>

<?php

if(isset($_POST['price_range'])){

//Include database configuration file

include('dbConfig.php');

//set conditions for filter by price range

$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 ";

}

//get product rows

$query = $db->query("SELECT * FROM products $whereSQL $orderSQL");

if($query->num_rows > 0){

while($row = $query->fetch_assoc()){

<h4>Price: <?php echo $row["price"]; ?></h4>

</div>

<?php }

}else{

echo 'Product(s) not found';

}

جمع بندی

با استفاده از آموزش ساخت اسلایدر رنج قیمت jquery در php و سورس کدی که قرار دادیم , به راحتی می توانید اسلایدر رنج قیمت را برای فیلتر محصولات در پروژه هایی که می نویسید پیاده سازی کنید . اگر قصد دارید که طرح و رنگ های range slider را تغییر بدید , به راحتی میتوانید فایل jquery.range.css را ویرایش کنید . همه فایل های استفاده شده از لینک زیر قابل دانلود می باشد .