طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

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


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

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

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

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

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

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

فایل پیکربندی دیتابیس (dbConfig.php)

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

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

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

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

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

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

حتما بخوانید  ساخت کپچا در php (کد امنیتی)

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

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

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

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

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

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

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

حتما بخوانید  هایلایت نتایج جستجو در php

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

فایل getProducts.php :

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

جمع بندی

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

برای دانلود سورس کد ساخت اسلایدر رنج قیمت jquery در php از قسمت زیر اقدام کنید

هر سوالی داشتید ، از قسمت نظرات اقدام کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان های تحت وب, امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

avatar

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه