فیلتر کردن و اعتبارسنجی داده های PHP. اشتباهات مکرر فیلتر محدوده مقدار "FROM" و "TO"

در نهایت، من زمان پیدا کردم و می خواهم اسکریپت جدید خود را که به شما امکان می دهد داده ها را در جداول html فیلتر کنید، به شما معرفی کنم.

این اسکریپت از انواع فیلترهای زیر پشتیبانی می کند:

• فیلد متنی
• لیست کشویی
• دکمه های رادیویی
• چک باکس ها

اسکریپت کوچک است و اتصال آن بسیار آسان است و همچنین به خوبی با اسکریپت جدول مرتب کننده ترکیب می شود، می توانید آن را به همراه نمونه های اتصال و پیکربندی در مخزن من دانلود کنید: bitbucket.org

فیلتر جدول نمایشی:

نمادها	متن	شماره	شماره	متن
آ ب سی		--- 1 2 3	- 1 2 3
ب	هندوانه	2	3	پنکه
ب	تیرانداز	1	2	اربا
سی	پنکه	3	1	تیرانداز
سی	تیرانداز	2	1	فانتوماس
ب	تیرانداز	1	2	هندوانه
سی	پنکه	3	3	تیرانداز
آ	هندوانه	2	2	هندوانه
آ	پنکه	1	1	تعویض کننده
سی	پنکه	3	3	هندوانه
ب	پنکه	2	3	فانتیک
سی	تیرانداز	1	1	هندوانه
سی	پنکه	3	2	فلش

از نظر مفهومی، اسکریپت از دو بخش تشکیل شده است: اشیاء فیلتر filterTable.Filterو در واقع از تابع جدول فیلتر (...)، که این اشیاء فیلتر را به جدول html متصل می کند.

شی فیلتر دارای سازنده زیر است:

/** * فیلتر شی. * @paramHTMLInputElement | HTML انتخاب HTMLElementRef | - پیوند، یا آرایه ای از پیوندها * به عناصر html که به عنوان فیلتر عمل می کنند. * @param تابع پاسخ به تماس - عملکرد پاسخ به تماس. زمانی فراخوانی می شود که اسکریپت * محتویات یک سلول را تأیید کند. تابع برای هر ردیف از جدول، برای * هر سلول از ستونی که فیلتر برای آن اختصاص داده شده است فراخوانی می شود. * 3 پارامتر به تابع ارسال می شود: callback(value, filters, i) که در آن: * مقدار رشته - مقدار سلول جدول در زمانی که تابع نامیده شد بررسی می شود * فیلترهای HTMLElements - آرایه ای از عناصر HTML اختصاص داده شده توسط فیلترهای ستون علامت زده شده * شماره i شاخص عنصر فیلتر در آرایه فیلترها است که * اعتبارسنجی تماس فعلی است. آن ها فیلترهای[i] در داخل تابع * دارای عنصری است که کاربر * با آن تعامل داشته است و فرآیند اعتبارسنجی را آغاز کرده است. * @param String eventName - نام رویداد متصل به فیلتر، که * اعتبارسنجی را راه‌اندازی می‌کند (onkeyup | onclick | onblur | onchange و غیره) * @constructor */ filterTable.Filter = تابع (HTMLElementRef، callback، eventName) آرگومان اول: HTMLElement HTMLElementRef

آرگومان دوم: تابع فراخوانی

عملکرد: پاسخ تماس (مقدار، فیلترها، i)جایی که:
مقدار رشته- مقدار سلول جدول در لحظه فراخوانی تابع بررسی می شود
فیلترهای HTMLElements- آرایه ای از عناصر HTML که توسط فیلترها برای ستون علامت گذاری شده اختصاص داده شده است.
شماره I- شاخص عنصر فیلتر در آرایه فیلترها که اعتباردهنده تماس فعلی است. آن ها فیلترهای [i] در داخل تابع پاسخ به تماس، حاوی عنصری است که کاربر با آن تعامل داشته است، در نتیجه فرآیند اعتبارسنجی راه‌اندازی شده است. تابع باید مقدار true یا false را بسته به این که آیا مقدار ورودی هنگام تنظیم مقدار فیلتر می شود، برگرداند فیلتر s[i] با توجه به ایده شما، یا نه.

آرگومان سوم: رشته رویدادName

نام رویداد پیوست شده به فیلتری که اعتبار سنجی (onkeyup | onclick | onblur | onchange و غیره) را فعال می کند onchange - مقدار پیش فرض

خود تابع جدول فیلتردارای امضای زیر است:

جداول * @param فیلترهای شی - شیء پیکربندی فیلتر: ( N: FILTER[, N: FILTER] ) * * جایی که: * NUM یک عدد طبیعی است - تعداد ستون جدول * ارائه شده توسط فیلتر. این عدد می تواند مقادیری از 0 تا * تعداد ستون های جدول - 1 داشته باشد. اعداد را می توان بدون ترتیب مشخص کرد. * * FILTER ارجاع به یک عنصر HTML است که یک عنصر فرم HTML است * و دارای یک ویژگی مقدار (شامل انتخاب) یا * یک شی از نوع tableKit.Filter */filterTable(HTMLTBodyRef، aFilters)

کاملا گیج کننده به نظر می رسد، اما بیایید به یک مثال نگاه کنیم. ابتدا به html نیاز داریم - قاب جدول. توجه داشته باشید که فیلترها فقط عناصر فرم html هستند؛ به هر حال، آنها دارای ویژگی های id منحصر به فرد هستند که با استفاده از آنها آنها را برای ارسال به سازنده filterTable.Filter انتخاب می کنیم.

نمادها	متن	شماره	شماره	متن
آ ب سی		--- 1 2 3	- 1 2 3
ب	هندوانه	2	3	پنکه
ب	تیرانداز	1	2	اربا
سی	پنکه	3	1	تیرانداز
سی	تیرانداز	2	1	فانتوماس
ب	تیرانداز	1	2	هندوانه
سی	پنکه	3	3	تیرانداز
آ	هندوانه	2	2	هندوانه
آ	پنکه	1	1	تعویض کننده
سی	پنکه	3	3	هندوانه
ب	پنکه	2	3	فانتیک
سی	تیرانداز	1	1	هندوانه
سی	پنکه	3	2	فلش

شایان ذکر است که چنین فیلترهایی مانند یک فیلد متنی یا یک لیست کشویی برای اسکریپت "بومی" هستند و برای اجرای آنها حتی نیازی به فراخوانی ندارید. filterTable.Filter- فقط یک لینک به خود عنصر html ارسال کنید.

بنابراین، ما یک قاب داریم. فیلتر داره باقی مانده است که همه آن را با هم گره بزنیم. اما بیایید با ساده ترین شروع کنیم گزینه اتصال، و ما فقط فیلترها را برای ستون های 2 و 3 تجزیه و تحلیل خواهیم کرد، زیرا آنها از یک فیلد متنی و یک لیست کشویی از مقادیر استفاده می کنند که اسکریپت فیلتر بدون نیاز به ایجاد آن را به صورت "بومی" می فهمد. filterTable.Filterمن عمداً عناصر 0، 3، 4 را کامنت گذاشتم و فعلاً اجرای آنها را به عنوان "..." تعیین کردم تا زودتر دلواپسان را نترسانم :)

توجه داشته باشید که آرگومان دوم تابع فیلتر جدول (...، (...))یک شی پیکربندی فیلتر است که ویژگی های آن دارای نام های عددی هستند که شروع می شوند از 0 تا NUM_COLUMNS_TABLE-1مقدار هر یک از این ویژگی ها باید یک فیلتر باشد:

جداول */ document.getElementById("هدف")، /* شی پیکربندی فیلتر: */ ( /* فیلتر برای چک باکس های ستون اول: 0: ...، */ /* فیلتر برای قسمت متن ستون دوم - فقط مطابقت دقیق: */ 1: document.getElementById ("متن")، /* فیلتر برای ستون سوم لیست کشویی: */ 2: document.getElementById ("رقم")، /* فیلتر برای ستون چهارم دکمه رادیویی: 3: ... , /* فیلتر برای ستون پنجم ورودی تدریجی کلمه: 4: ... */ ));

اگر شخصی به تمام عملکردها، همانطور که در نسخه نمایشی نشان داده شده است، نیاز داشته باشد، به عنوان مثال، فیلترهایی با دکمه های رادیویی، یا فیلترهایی با چک باکس، آنگاه اتصال کمی پیچیده تر می شود زیرا در واقع، اینها فیلترهایی هستند که از مجموعه ای از عناصر html تشکیل شده اند. و باید در حین اعتبارسنجی مقادیر کل مجموعه چنین فیلتری را بررسی کنید. اینجاست که توابع برگشت به تماس وارد عمل می شوند. در زیر در فهرست، سعی کردم در مورد این نکته به تفصیل نظر بدهم.

باز هم توجه داشته باشید که برای یک فیلد متنی و یک لیست کشویی، کافی است به سادگی یک مرجع به عنصر html ارسال کنید. و همچنین به اتصال آخرین فیلتر دقت کنید. ممکن است بپرسید چرا - بالاخره در ستون آخر، فیلتر یک فیلد متنی است! بله، اینطور است، اما اگر به دقت با نمونه آزمایشی کار کرده باشید، متوجه شده اید که اولین فیلتر - فیلد تست فقط پس از وارد کردن مقدار کامل و فشار دادن دکمه "Enter" یا کلیک کردن در هر نقطه دیگری از صفحه کار می کند. ، یعنی فیلتر توسط رویداد پیش فرض "onchange" فعال می شود! اما قسمت فیلتر متن آخرین ستون - به محض وارد کردن هر کاراکتری فوراً کار می کند. برای پیاده سازی این رفتار، من مجبور شدم یک فیلتر طبق تمام قوانین با ایجاد کنم filterTable.Filterو همچنین لازم بود یک تابع callback تنظیم شود و علاوه بر این، لازم بود نام رویداد "onkeyup" ارسال شود تا فرآیند فیلترینگ توسط آن آغاز شود. مثل این. امیدوارم شما را کاملا گیج نکرده باشم.

FilterTable(/* ارجاع به عنصر جداول */ document.getElementById("هدف")، /* شیء پیکربندی فیلتر: */ ( /* فیلتر برای اولین ستون چک باکس: */ 0: new filterTable.Filter([ /* عناصر فیلتر */ document.getElementById( "charA"), document.getElementById("charB"), document.getElementById("charC") ], /* بازخوانی اعتبارسنجی */ تابع (مقدار، فیلترها، i) (/* اگر چک باکس بدون علامت باشد، مقدار آن انجام می شود در اعتبارسنجی شرکت نکنیم، بنابراین باید true */ if (false === filters[i].checked) return true را برگردانیم؛ /* علاوه بر این، هنگام بررسی، باید مقادیر همه عناصر مجموعه را به طور همزمان بررسی کنیم، به شرطی که چک باکس علامت زده شود */ filters.checked && filters.value === value || filters.checked && filters.value === value || filters.checked && filters.value === value; ))، / * فیلتر برای قسمت متن ستون دوم - فقط مطابقت دقیق: */ 1: document.getElementById("متن")، /* فیلتر برای ستون سوم کشویی: */ 2: document.getElementById ("رقم")، /* فیلتر برای i از ستون چهارم دکمه رادیویی: */ 3: new filterTable.Filter(, /* تابع اعتبارسنجی فراخوانی */ تابع (مقدار، فیلترها، i) ( /* در فیلترها - یک دکمه رادیویی "انتخاب نشده" داریم ، اگر فیلتر set در اعتبار سنجی شرکت نمی کند و باید true */ if (true === filters.checked) را برگردانیم true; /* اگر برخی از دکمه های رادیویی علامت زده شده است و محتوای سلول علامت گذاری شده مطابقت دارد، آنگاه true */ return filters.checked && filters.value === مقدار || filters.checked && filters.value === مقدار || filters.checked && filters.value === value; ( filters[i].value) === 0; ), /* ما اعتبار سنجی روی رویداد onkeyup فیلتر را فراخوانی می کنیم */ "onkeyup") ));

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

/** * فیلترها را به جدول متصل کنید. * @param HTMLTableSectionElement HTMLTBodyRef - مرجع عنصر جداول * @param فیلترهای شی - شیء پیکربندی فیلتر: ( N: FILTER[, N: FILTER] ) * * جایی که: * NUM یک عدد طبیعی است - تعداد ستون جدول * ارائه شده توسط فیلتر. این عدد می تواند مقادیری از 0 تا * تعداد ستون های جدول - 1 داشته باشد. اعداد را می توان بدون ترتیب مشخص کرد. * * FILTER ارجاع به یک عنصر HTML است که یک عنصر فرم * HTML است و دارای یک ویژگی مقدار (شامل انتخاب) یا * یک شی از نوع tableKit.Filter */ var filterTable = تابع (HTMLTBodyRef, aFilters) ( ردیف‌های var = HTMLTBodyRef.getElementsByTagName("TR")، فیلترها = ()، n، walkThrough = تابع (ردیف ها) (var tr, i, f; برای (i = 0; i)< rows.length; i += 1) { tr = rows.item(i); for(f in filters) { if (filters.hasOwnProperty(f)) { if (false === filters[f].validate(tr.children[f].innerText)) { tr.style.display = "none"; break; } else { tr.style.display = ""; } } } } }; for(n in aFilters) { if (aFilters.hasOwnProperty(n)) { if (aFilters[n] instanceof filterTable.Filter) { filters[n] = aFilters[n]; } else { filters[n] = new filterTable.Filter(aFilters[n]); } filters[n]._setAction("onchange", function () {walkThrough(rows);}); } } } /** * Объект фильтр. * @param HTMLInputElement | HTMLSelect HTMLElementRef | - Ссылка, или массив ссылок * на html-элементы, служащие фильтрами. * @param Function callback - ф-ция обратного вызова. Вызывается когда скрипт * производит валидацию содержимого ячейки. Ф-ция вызывается для каждой строки таблицы, для * каждой ячейки столбца, для которого назначен фильтр. * Функции будут переданы 3 параметра: callback(value, filters, i) где: * String value - значение ячейки таблицы, проверяемой на момент вызова ф-ции * HTMLElements filters - массив HTML-элементов назначенных фильтрами для проверяемого столбца. * Number i - индекс элемента фильтра в массиве filters который является * валидатором для текущего вызова. Т.е. filters[i] внутри ф-ции * обратного вызова будет содержать элемент, с которым провзаимодействовал * пользователь, в результате чего был запущен процесс валидации. * @param String eventName - название события привязанного к фильтру, по которому будет * запускаться валидация (onkeyup | onclick | onblur | onchange и т.п.) * @constructor */ filterTable.Filter = function (HTMLElementRef, callback, eventName) { /* Если ф-цию вызвали не как конструктор фиксим этот момент: */ if (!(this instanceof arguments.callee)) { return new arguments.callee(HTMLElementRef, callback, eventName); } /* Выравниваем пришедший аргумент к массиву */ this.filters = {}.toString.call(HTMLElementRef) == "" ? HTMLElementRef: ; /** * Шаблонный метод вызывается для каждой строки таблицы, для соответствующей * ячейки. Номер ячейки задается в объекте-конфигурации фильтров ф-ции * filterTable (См. параметр 2 ф-ции tableFilter) * @param String cellValue - строковое значение ячейки * @returns {boolean} */ this.validate = function (cellValue) { for (var i = 0; i < this.filters.length; i += 1) { if (false === this.__validate(cellValue, this.filters[i], i)) { return false; } } } this.__validate = function (cellValue, filter, i) { /* Если фильтр был создан явно и явно указана функция валидации: */ if (typeof callback !== "undefined") { return callback(cellValue, this.filters, i); } /* Если в фильтр напихали пробелов, или другой непечатной фигни - удаляем: */ filter.value = filter.value.replace(/^\s+$/g, ""); /* "Фильтр содержит значение и оно совпало со значением ячейки" */ return !filter.value || filter.value == cellValue; } this._setAction = function (anEventName, callback) { for (var i = 0; i < this.filters.length; i += 1) { this.filters[i] = callback; } } };

فیلتر محدوده مقدار "FROM" و "TO"

به درخواست کارگران، من نشان می دهم که چگونه می توانید فیلتری را پیاده سازی کنید که به شما امکان می دهد محدوده مقادیر اعداد "از" و "به" را انتخاب کنید. در هدر ستونی که به این فیلتر نیاز دارد، کد را بنویسید که دو لیست کشویی است. بر این اساس: اولی مقدار "از" و دومی مقدار "به" است:

... ... ...

از جانب --- 1 2 3 قبل از --- 1 2 3

و در فراخوانی اسکریپت، یک فیلتر (برای ستون سوم) را برای اختصار تجویز می کنیم، من لیست را کوتاه کردم و فقط تعریف فیلتر "از" و "به" را باقی گذاشتم:

FilterTable(/* ارجاع به عنصر جداول */ document.getElementById("هدف")، /* شی پیکربندی فیلتر: */ ( /* فیلتر برای چک باکس های ستون اول: */ 0: ... , /* فیلتر فیلد متنی ستون دوم - فقط مطابقت دقیق: */ 1: ... , /* FILTER محدوده مقادیر FROM و TO */ 2: new filterTable.Filter([ document.getElementById("digits-from")، document.getElementById("digits-to") ]، تابع (مقدار، فیلترها، i) ( var accept = true؛ value = parseInt(value,10) if (filters.value) (accept = (value >= parseInt(filters.value,10))؛ ) if (accept && filters.value) (accept = (value<= parseInt(filters.value,10)); } return accept; }), /* Фильтр для четвертого столбца радио кнопки: */ 3: ... , /* Фильтр для пятого столбца Постепенный ввод слова: */ 4: ... });

نمونه های فیلتر جدول غیر حساس به حروف کوچک و بزرگ

فیلتر کنید مورد غیر حساسبرای تطابق دقیق (شما می توانید استاندارد را با آن جایگزین کنید)

filterTable.Filter جدید(document.getElementById("متن")، تابع (مقدار، فیلترها، i) (var vala_filter = filters[i].value == "»، match_value = value.toLowerCase() == فیلترها[i] .value.toLowerCase()؛ بازگردانی vala_filter || match_value; ))

فیلتر کنید مورد غیر حساسبرای ورود تدریجی کلمه

filterTable.Filter(document.getElementById("regexp")، /* تابع اعتبارسنجی */ تابع (مقدار، فیلترها، i) ( var c_value = value.toLowerCase()، f_value = filters[i].value. toLowerCase( )؛ بازگشت c_value.indexOf(f_value) === 0; ), /* ما اعتبار سنجی را در رویداد onkeyup فیلتر فراخوانی می کنیم */ "onkeyup")

در اصل، عدم حساسیت حروف کوچک و بزرگ را می توان در خود اسکریپت فیلتر ایجاد کرد، اما فعلاً وقت ندارم در آینده با در نظر گرفتن تمام خواسته های شما، این اسکریپت را بازنویسی کنم، سپس این ویژگی را در آنجا ایجاد می کنیم. همانطور که می گویند: در جریان باشید ;)

یک فیلتر خوب طراحی شده ابزار قدرتمندی است که کاربران می توانند از آن بهره ببرند. در واقع اگر سایت شما (فروشگاه اینترنتی) کالاهای زیادی در دسته بندی های مختلف توزیع شده باشد، این یک ویژگی مهم است.

منابع

برای تجارت الکترونیک، این روشی برای بهبود نرخ تبدیل با کاهش مدت زمانی است که کاربر برای یافتن آنچه به دنبالش است، نیاز دارد.

ایجاد چنین ویژگی هایی هرگز آسان نیست: فیلترها به شدت به محتوای وب سایت وابسته هستند. همچنین نوار فیلتر نباید حواس پرتی را ایجاد کند، تمرکز اصلی باید روی محتوا/محصولات باشد. بنابراین ما سعی کردیم با ساختن یک نوار فیلتر CSS بسیار قابل تنظیم و یکپارچه برای شما، زندگی شما را کمی آسانتر کنیم.

از CSS Transitions، CSS Transformations و jQuery برای انتقال روان در صورت نیاز بهره می برد.

ایجاد ساختار

ساختار HTML کمی پیچیده تر از حد معمول است. اول از همه، دو بلوک محتوای اصلی وجود دارد: هدر و عناصر اصلی، بلوک دوم برای بسته بندی هر دو gallery.cd-gallery و filter.cd-filter استفاده می شود. علاوه بر آن، ما پیمایش تودرتو (تودرتو در 2 div، به دلیل قابل مشاهده بودن افکت کشویی در دستگاه های تلفن همراه) و یک فیلتر trigger.cd-filter-trigger داریم.

همچنین ممکن است متوجه نام کلاس‌های زیادی (مثلاً در آیتم‌های فهرست گالری) و فیلترهای داده‌ها شوید: آنها برای فیلتر کردن محتوا استفاده می‌شوند، نه برای استایل‌سازی.

توجه داشته باشید. هدف عنصر .cd-gallery> li.gap این است که در ارتباط با متن کار کند: justify; برای ایجاد شبکه گالری، ویژگی به .cd-gallery اعمال می شود. شما باید به تعداد عناصر در .gap ایجاد کنید که حداکثر تعداد عناصر در یک ردیف -1 باشد.

فیلتر محتوا

• 
  همه
  


• همه


• رنگ 1


• رنگ 2

• 


• 

نتیجه ای پیدا نشد

عنوان بلوک

بستن

فیلترها

اضافه کردن یک سبک

بیشتر CSS در مورد استایل دادن به عناصر فرم و سایر تزئینات اساسی است. جالب است که چگونه برخی از کلاس ها را - در ترکیب با jQuery - برای تغییر رفتار برخی عناصر بر اساس رویدادهای خاص تعریف و استفاده کردیم.

به عنوان مثال: در همه دستگاه‌ها، نوار فیلتر هنگامی که به بالای پنجره دید می‌رسد ثابت می‌شود. برای دستیابی به این اثر، از کلاس .is-fixed اعمال شده بر روی عنصر اصلی (.cd-main-content) استفاده کردیم تا بتوانیم برخی از فرزندان آن را هدف قرار دهیم. به طور خاص: .cd-tab-filter-wrapper در موقعیت ثابت است، در حالی که .cd-filter و .cd-filter-trigger در موقعیت مطلق (نسبت به .cd-main-content) قرار دارند. وقتی کلاس .is-fixed را به .cd-main-content اعمال می کنیم، موقعیت همه این عناصر را به Fixed تغییر می دهیم.

cd-tab-filter-wrapper ( رنگ پس زمینه: #ffffff; z-index: 1; ) .cd-filter ( موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ عرض: 280 پیکسل؛ ارتفاع: 100٪؛ پس زمینه: #ffffff؛ z-index: 2؛ transform: translateX(-100%)؛ transition: transform 0.3s, box-shadow 0.3s; .cd-filter-trigger ( موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0. ارتفاع: 50 پیکسل؛ عرض: 60 پیکسل؛ شاخص z: 3؛ ).cd-main-content.is-fixed .cd-tab-filter-wrapper ( موقعیت: ثابت؛ بالا: 0؛ سمت چپ: 0؛ عرض: 100% . ;)

نکته دیگری که قابل ذکر است کلاس .filter-is-visible است. هنگامی که کاربر پانل فیلتر را راه اندازی می کند، روی چندین عنصر اعمال می شود. در همه دستگاه‌ها، برای تغییر مقدار translateX عنصر .cd-filter (از -100٪ به 0) استفاده می‌شود. در دستگاه‌های بزرگ‌تر (> 1170 پیکسل) همچنین cd-gallery و .cd-tab-filter را هدف قرار می‌دهیم و عرض آنها را کاهش می‌دهیم: به این ترتیب پانل روی محتوا همپوشانی ندارد و کاربر از آن استفاده می‌کند. ویژگی های اضافیفضایی برای اعمال فیلترها و مشاهده تغییرات همزمان، بدون نیاز به بستن پانل.

مدیریت رویداد

برای پیاده سازی عملکرد فیلتر محتوا، ما افزونه MixItUp jQuery را ادغام کرده ایم. برای مقداردهی اولیه افزونه در کانتینر گالری، از تابع mixItUp() استفاده می کنیم و یک متغیر buttonFilter را که شامل تمام موارد سفارشی است، اعلام می کنیم. عملکردفیلتر همچنین، ما از jQuery برای باز/بستن نوار فیلتر و رفع آن (همراه با پیمایش زبانه‌ها) استفاده می‌کنیم تا همچنان هنگام پیمایش در گالری ظاهر شود.

ما یاد گرفته ایم که چگونه داده ها را روی کلاینت جمع آوری کرده و به سرور ارسال کنیم. و در سرور در جایی که کالاهای فیلتر شده با پارامترهای وارد شده باید برگردانده شوند، یک خرد نوشتند. اکنون ما از شر خرد خلاص می شویم و چند روش و پرس و جو می نویسیم که محصولات لازم را از پایگاه داده بیرون آورده و به مشتری برمی گرداند. درس کاملاً کوتاه است. شروع شدن

چه کنیم؟

ما فقط باید 3 مرحله را انجام دهیم:

• 1. داده ها را از کلاینت دریافت کرده و بر اساس نیازهای سرور پردازش کنید. به عنوان مثال، پارامترهای پیش فرض را تنظیم کنید
• 2. در واقع خود کد استخراج کالا از پایگاه داده را بنویسید. ابتدا کوئری sql را آماده کنید
• 3. داده های دریافتی را به مشتری برگردانید

دریافت اطلاعات از مشتری

ممکن است بپرسید: چرا باید این را برجسته کرد عملیات سادهبه طور جداگانه، اگر بتوانیم به راحتی تمام داده ها را از آرایه $_GET خارج کنیم؟

ابتدا به منظور قرار دادن مقادیر پیش فرض. شما نمی توانید به مشتری برای مراقبت از آن تکیه کنید.

دوم، همه داده ها به صورت $_GET در فرم قابل استفاده نیستند. برای مثال، برای ما راحت‌تر است که مرتب‌سازی را از کلاینت به‌عنوان یک پارامتر واحد در قالب یک field_direction، به عنوان مثال، price_asc ارسال کنیم. اما در پرس و جوی sql، اینها موجودیت های جداگانه ای هستند، بنابراین باید از قبل پردازش شوند.

در مورد برندها نیز وضعیت مشابه است. روی کلاینت، آنها را به عنوان آرایه ای از برندها ارسال می کنیم و php نیز آنها را به عنوان یک آرایه دریافت می کند. اما پرس و جوی sql به یک رشته نیاز دارد - لیستی از مارک ها که با کاما از هم جدا شده اند. بنابراین، برندها نیز نیاز به پردازش بیشتری دارند.

بنابراین، اجازه دهید تابع getOptions() را بنویسیم، که داده ها را از $_GET می کشد و آن را به فرمی مناسب برای ما تبدیل می کند. من قبلاً تقریباً همه موارد مقدماتی را گزارش کرده ام ، بنابراین بلافاصله به کد تمام شده نگاه می کنیم.

// دریافت داده از تابع آرایه _GET getOptions() ( // دسته و قیمت $categoryId = (isset($_GET["category"])) ? (int)$_GET["category"] : 0; $minPrice = ( isset($_GET["min_price"])) ? (int)$_GET["min_price"] : 0; $maxPrice = (isset($_GET["max_price"])) ? (int)$_GET["max_price" " ] : 1000000; // برندها $brands = (isset($_GET["brands"])) ?implode($_GET["brands"]، ","): null؛ // مرتب سازی $sort = (isset( $ _GET["مرتب‌سازی"])) ?$_GET["مرتب‌سازی"] : "price_asc"؛ $sort = explode("_"، $sort)؛ $sortBy = $sort؛ $sortDir = $sort؛ آرایه برگشتی( "brands" => $brands، "category_id" => $categoryId، "min_price" => $minPrice، "max_price" => $maxPrice، "sort_by" => $sortBy، "sort_dir" => $sortDir)؛ )

در اینجا می بینیم که ابتدا شناسه دسته را دریافت می کنیم. در صورت عدم عبور از دسته، category_id = 0 را در نظر می گیریم. حداقل قیمت 0 و حداکثر قیمت 1 میلیون خواهد بود. اگر فروشگاه آنلاین شما پلوتونیوم (روغن به چینی ها، مورچه ها را تکه تکه) می فروشد، می توانید همیشه صفر را به خط مورد نظر اضافه کنید یا در بدترین حالت، پرداخت ها را به یورو انجام دهید.

مرتب سازی به روش دیگری انجام می شود. به طور جداگانه، فیلد مرتب سازی و پارامتر را بیرون می آوریم: asc یا desc.

توجه داشته باشید که در همه موارد ما به یاد داریم که مقدار پیش فرض if را جایگزین کنیم پارامتر مورد نظراز مشتری نیامده است و اکنون، وقتی همه داده ها تبدیل شدند، تنها چیزی که باقی می ماند این است که آن را از تابع در یک آرایه انجمنی از طریق آرایه بازگشتی (...) برگردانیم.

تهیه پرس و جو sql و استخراج داده ها از پایگاه داده

تمام داده ها به شکلی که ما نیاز داریم آماده شده است، حالا بیایید یک کوئری بنویسیم و آن را اجرا کنیم. این کار توسط تابع getGoods ($options, $conn) انجام خواهد شد. به عنوان پارامتر، گزینه‌های $ - داده‌های آماده‌شده توسط تابع قبلی، و $conn - شی اتصال پایگاه‌داده‌ای که در درس قبلی ایجاد کردیم را می‌گیرد. وظیفه ما نوشتن یک پرس و جو sql است. به طور کلی، به نظر می رسد این است:

g.id را به عنوان good_id، g.good به عنوان خوب، b.brand به عنوان مارک، g.price به عنوان قیمت، g.rating به عنوان رتبه، g.photo را به عنوان عکس از کالاها به عنوان g، مارک ها را به عنوان b که در آن g.category_id = Select_category انتخاب کنید. و g.brand_id در (list_brand_separated_comma_separated) و g.brand_id = b.id و (g.price بین min_price و max_price) به ترتیب مرتب سازی_فیلد_جهت مرتب سازی

با اعمال یک سری از شرایط Where و تعیین مرتب سازی مورد نظر، فیلدهای مورد نیاز را بازیابی می کنیم. هیچ سوالی در مورد قیمت و مرتب سازی وجود ندارد، ما فقط مقادیر لازم را در مکان های مناسب درخواست جایگزین می کنیم. اما باید در مورد دسته بندی و برندها دقت بیشتری داشته باشید و دلیل آن در اینجا آمده است.

هر محصولی که داریم همیشه یک دسته بندی دارد. هیچ مفهومی از دسته صفر در پایگاه داده ما وجود ندارد - ما این کار را برای راحتی خود انجام دادیم تا بفهمیم که کاربر هیچ دسته ای را در مرورگر انتخاب نکرده است (یا همه را انتخاب کرده است - برای ما یکسان است). و در این صورت نباید خط را در پرس و جو قرار دهیم
g.category_id = select_category و
در مورد مارک ها نیز همین طور است، اگر آنها انتخاب نشده باشند، از خط مربوطه می گذریم. در اینجا چیزی است که در کد به نظر می رسد.

// دریافت تابع کالا getGoods($options, $conn) ( // پارامترهای مورد نیاز $minPrice = $options["min_price"]؛ $maxPrice = $options["max_price"]؛ $sortBy = $options["sort_by"] ؛ $sortDir = $options["sort_dir"]؛ // گزینه های اختیاری $categoryId = $options["category_id"]؛ $categoryWhere = ($categoryId !== 0) ? " g.category_id = $categoryId و " : " "; $brands = $options["brands"]; $brandsWhere = ($brands !== null) ? " g.brand_id در ($brands) و " : ""؛ $query = " g.id را به عنوان good_id انتخاب کنید ، g.good به عنوان خوب، b.brand به عنوان نام تجاری، g.price به عنوان قیمت، g. رتبه بندی به عنوان رتبه، g.عکس به عنوان عکس از کالاها به عنوان g، مارک ها به عنوان b در جایی که $categoryWhere $brandsWhere g.brand_id = b.id و (g.price بین $minPrice و $maxPrice) سفارش توسط $sortBy $sortDir "؛ $data = $conn->query($query)؛ بازگشت $data->fetch_all(MYSQLI_ASSOC)؛ )

ابتدا، متغیرهای قیمت و مرتب‌سازی را از آرایه $options استخراج می‌کنیم - آنها به سادگی بدون تغییر در کوئری وارد می‌شوند. و برای دسته و برندها، رشته‌های $categoryWhere و $brandsWhere را طبق این اصل تشکیل می‌دهیم: شرط لازم برای بخش Where، در صورت وجود داده، و یک رشته خالی در صورت عدم وجود داده. بنابراین، ما یک پرسش sql نسبتاً منطقی دریافت کردیم که تمام خواسته‌های ما را در نظر می‌گیرد. دو خط آخر این کوئری را اجرا می کنند و آرایه ای از اشیاء را با فیلدهای مورد نیاز از تابع برمی گرداند. باقی مانده است که همه چیز را در یک انبوه جمع آوری کنید و کالاهای دریافت شده را به مشتری / مرورگر از قبل در انتظار ارسال کنید.

ما کالا را به مشتری برمی گردانیم

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

// اتصال به پایگاه داده $conn = connectDB(); // پاسخ موفقیت آمیز را به مشتری echo برگردانید json_encode(array("code" => "success", "data" => $_GET));

بیایید این کد را جایگزین کنیم

// اتصال به پایگاه داده $conn = connectDB(); // دریافت داده از مشتری $options = getOptions(); // دریافت کالا $goods = getGoods($options, $conn); // بازگرداندن یک پاسخ موفق به مشتری echo json_encode(array("code" => "success", "options" => $options, "goods" => $goods));

ما چند خط اضافه کردیم: با استفاده از تابع getOptions، داده ها را در متغیر $options بازیابی کردیم. ما بلافاصله از آن در دریافت کالاهای getGoods استفاده کردیم، نتایج در $goods ذخیره شد. و پاسخ به مشتری را گسترش داد. پارامتر داده به گزینه ها تغییر نام داد و نه محتوای $_GET، بلکه مقادیر تبدیل شده قبلی را برگرداند. و در پارامتر کالا، آرایه ای از کالاهای دریافتی را برگرداندیم.

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

بررسی نتایج کار

بیایید دسته گوشی های هوشمند را انتخاب کنیم و برندهای اپل و سامسونگ را علامت گذاری کنیم. در پاسخ، مشاهده خواهیم کرد که سرور 3 محصول را بر اساس صعودی قیمت مرتب کرده است

حالا حداقل قیمت را 20 هزار قرار می دهیم و مرتب سازی را به قیمت نزولی تغییر می دهیم
همانطور که می بینید، اکنون فقط 2 محصول وجود دارد - یک سامسونگ به دلیل قیمت نامناسب برای فیلترهای 17 هزار دور انداخته شد. و برعکس کالاها قبلا مرتب شده اند. اگر همه چیز را به درستی انجام داده باشید، دقیقاً همان تصویر را خواهید دید.

همچنان می توانید با کنسول بازی کنید و مطمئن شوید که داده ها به درستی برگردانده شده اند. در پایان، مهمترین چیز این است که فیلترها به درستی کار کنند و لیست صحیح محصولات را برگردانند. پراکندگی داده های دریافتی در صفحه، با در نظر گرفتن طرح بندی از قبل به پایان رسیده، از نظر ظاهری جالب ترین چیز است، اما از نظر توسعه بسیار ساده است. اما من جلوی خودم را نمی گیرم - جزئیات در درس بعدی است.

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

به عنوان مثال، می خواهیم این عبارت را برجسته کنیم: "روز خوب!!!بیایید سعی کنیم این عبارت :-) را با اعمال فیلترهای مختلف بر روی آن تحریف کنیم.

فیلتر ماسک.

متن یا بهتر است بگوییم پس زمینه ای که متن روی آن نوشته شده را انتخاب می کند، گویی متن را با ماوس انتخاب کرده اید.

نحو فیلتر: STYLE="filter:Mask(Color="Color")

رنگ - رنگ را در قالب هگزادسیمال (مثلا #000FFF) یا نام رنگ به انگلیسی، به عنوان مثال قرمز، آبی، سبز برجسته کنید. این تعریف رنگ در همه فیلترها استفاده می شود، بنابراین دیگر تکرار نخواهد شد.

لیست 19.1.

فیلتر DropShadow.

یک سایه به متن اضافه می کند.

نحو فیلتر:
STYLE="filter:DropShadow(Color="Color", OffX="Offx", OffY="Offy", Positive="Positive")"

رنگ - رنگ سایه
OffX - سایه افست در X
OffY - افست سایه Y
مثبت - سایه چپ یا راست (به ترتیب 0 یا 1)

لیست 19.3.

در اینجا به نظر می رسد در یک صفحه وب:

فیلتر Flip V.

متن را به صورت عمودی ورق می‌زند.

نحو فیلتر: STYLE="filter:FlipV"

لیست 19.5.

در اینجا به نظر می رسد در یک صفحه وب:

فیلتر موج.

متن را موج دار می کند.

نحو فیلتر:STYLE="filter: Wave(Freq="Freq", Add="Add", LightStrength="LightStrength", Phase="Phase", Strength="Strength")"

فرکانس - تعداد امواج
افزودن - نمایش/پنهان کردن حاشیه (به ترتیب 1 یا 0)
LightStrength - قدرت امواج
فاز - زاویه موج
قدرت - شدت موج

لیست 19.7.

روز خوب!!!

در اینجا به نظر می رسد در یک صفحه وب:

فیلتر تاری

متن را در جهت خاصی محو می کند.

نحو فیلتر:
STYLE="filter:Blur(Add="Add", Direction="Direction", Strength="Strength")"

افزودن - تاری متوسط ​​یا قوی (به ترتیب 1 یا 0)
جهت - تاری در کدام جهت رخ می دهد (از 0 تا 315)
قدرت - جبران تاری

نحوه استفاده

ابتدا باید آرشیو افزونه را از صفحه توسعه دهنده دانلود کنید و آن را در فهرستی در سایت خود باز کنید. دو نسخه موجود است - به حداقل رسیده (نسخه تولید) و برای توسعه دهندگان (نسخه توسعه). در نسخه توسعه دهنده، متن افزونه به صورت ساختار یافته با نظرات ارائه می شود که برای درک اصل عملکرد راحت است (کد منبع درس حاوی نسخه افزونه برای توسعه دهندگان با نظرات ترجمه شده است).

سپس به بخش در صفحه ای که قصد دارید از فیلترینگ استفاده کنید، باید کد اتصال افزونه را وارد کنید:

نیاز به تعویض " /path_to_plugin/” به مسیری که افزونه در آن قرار دارد فیلتر زنده، که قبلا آن را باز کردید. شما همچنین باید جایگزین کنید " عنصر_برای_فیلتر کردن” با یک انتخابگر CSS که با عنصر مورد نظر مطابقت دارد.

پارامتر پلاگین "گزینه"استفاده از انیمیشن را هنگام پنهان کردن و نمایش عناصر در هنگام فیلتر کردن کنترل می کند. مقادیر زیر در دسترس هستند: پایه ای- عناصر به سادگی بدون هیچ گونه انیمیشن غیرفعال / فعال می شوند، اسلاید- عناصر فیلتر شده جمع می شوند/بسط می یابند، محو شدن-موارد فیلتر شده به تدریج روشن/خاموش خواهند شد.

مثلا:

$(ul#filter_me").liveFilter("slide");

کد بالا به افزونه LiveFilter می گوید که لیست نامرتب را با شناسه فیلتر کند. filter_meو از انیمیشن استفاده کنید اسلاید”.

این افزونه را می توان برای لیست ها و جداول نامرتب و مرتب استفاده کرد. هنگام فراخوانی افزونه باید انتخابگر مورد نیاز را مشخص کنید.

مهم!برای اینکه افزونه کار کند، باید یک فیلد ورودی متن به کلاس اضافه کنید "فیلتر". این فیلد برای وارد کردن متن فیلتر استفاده می شود:

نمونه ای از صفحه ای که از فیلتر استفاده می کند:

• مورد شماره 1.
• مورد شماره 2.
• مورد شماره 3.
• مورد شماره 4.
• مورد شماره 5.
• مورد شماره 6.
• مورد شماره 7.
• مورد شماره 8.
• مورد شماره 9.
• مورد شماره 10.

کد افزونه

(function($)($.fn.liveFilter = تابع (aType) (// تعیین کنید چه چیزی فیلتر خواهد شد. var filterTarget = $(this); var child; if ($(this).is("ul")) ( child = "li"; ) else if ($(this).is("ol")) ( child = "li"; ) other if ($(this).is("جدول")) ( child = " tbody tr"; ) // تعریف متغیرهای var hide؛ var show؛ var filter؛ // رویداد برای عنصر ورودی $("input.filter").keyup(function() ( // دریافت فیلتر مقدار فیلتر = $(this) .val(); // دریافت کنید چه چیزی را پنهان کنید و چه چیزی را نشان دهید: hide = $(filterTarget) .find(child + ":Contains("" + filter + "")") // متحرک کردن موارد برای پنهان کردن و نشان دادن if (aType == "basic") ( hide.hide() ; show.show() ; ) else if (aType == "slide") (hide.slideUp(500); show.slideDown(500); ) other if (aType == "fade") (hide.fadeOut(400)؛ show. fadeIn( 400)؛ )))؛ // عبارت سفارشی برای متن غیر حساس توابع حاوی() jQuery.expr[":"].Contains = function(a,i,m)( return jQuery(a).text().toLowerCase().indexOf(m.toLowerCase())>=0; ) ) ))(jQuery);