PHP-Datenfilterung und -validierung. Häufige Fehler. Wertebereichsfilter "VON" und "BIS"

Endlich habe ich die Zeit gefunden und möchte Ihnen mein neues Skript vorstellen, mit dem Sie Daten in HTML-Tabellen filtern können.

Das Skript unterstützt die folgenden Filtertypen:

• Textfeld
• Dropdown-Liste
• Radio Knöpfe
• Kontrollkästchen

Das Skript ist klein und recht einfach zu verbinden, und es lässt sich auch gut mit dem Tabellensortierer-Skript kombinieren. Sie können es zusammen mit Verbindungs- und Konfigurationsbeispielen in meinem Repository herunterladen: bitbucket.org

Demo-Tabellenfilter:

Symbole	Text	Zahlen	Zahlen	Text
EIN B C		--- 1 2 3	- 1 2 3
B	Wassermelone	2	3	Fan
B	Schütze	1	2	Arba
C	Fan	3	1	Schütze
C	Schütze	2	1	Fantomas
B	Schütze	1	2	Wassermelone
C	Fan	3	3	Schütze
EIN	Wassermelone	2	2	Wassermelone
EIN	Fan	1	1	Weichensteller
C	Fan	3	3	Wassermelone
B	Fan	2	3	Fantik
C	Schütze	1	1	Wassermelone
C	Fan	3	2	Pfeil

Konzeptionell besteht das Skript aus zwei Teilen: Filterobjekten filterTable.Filter und eigentlich von der Funktion filterTabelle(...), die diese Filterobjekte an die HTML-Tabelle bindet.

Das Filterobjekt hat folgenden Konstruktor:

/** * Filterobjekt. * @paramHTMLInputElement | HTMLSelect HTMLElementRef | - Link oder Array von Links * zu HTML-Elementen, die als Filter dienen. * @param Funktionsrückruf - Rückruffunktion. Wird aufgerufen, wenn das Skript * den Inhalt einer Zelle validiert. Die Funktion wird für jede Zeile der Tabelle aufgerufen, für * jede Zelle der Spalte, der der Filter zugeordnet ist. * 3 Parameter werden an die Funktion übergeben: callback(value, filter, i) wobei: * String value - der Wert der Tabellenzelle, die zum Zeitpunkt des Aufrufs der Funktion überprüft wurde * HTMLElementsfilter - ein Array von HTML-Elementen, die zugewiesen wurden durch Filter für die markierte Spalte. * Nummer i ist der Index des Filterelements im Filter-Array, das * der Validator für den aktuellen Aufruf ist. Diese. filter[i] innerhalb der * Callback-Funktion enthält das Element, mit dem der Benutzer * interagiert hat, das den Validierungsprozess ausgelöst hat. * @param String eventName - der Name des an den Filter angehängten Ereignisses, das * die Validierung auslöst (onkeyup | onclick | onblur | onchange usw.) * @constructor */ filterTable.Filter = function (HTMLElementRef, callback, eventName) Erstes Argument: HTMLElement HTMLElementRef

Zweites Argument: Funktionsrückruf

Funktion: Rückruf (Wert, Filter, i) wo:
Zeichenfolgenwert- der Wert der Tabellenzelle, die zum Zeitpunkt des Aufrufs der Funktion überprüft wird
HTMLElements-Filter- ein Array von HTML-Elementen, die von Filtern für die aktivierte Spalte zugewiesen wurden.
Nummer i- der Index des Filterelements im Filterarray, das der Validator für den aktuellen Aufruf ist. Diese. filter[i] innerhalb der Callback-Funktion enthält das Element, mit dem der Benutzer interagiert hat, wodurch der Validierungsprozess ausgelöst wurde. Die Funktion sollte true oder false zurückgeben, je nachdem, ob der eingehende Wert value gefiltert wird, wenn der Wert festgelegt wird Filter s[i] nach deiner Vorstellung, oder nicht.

Drittes Argument: Zeichenfolge eventName

Der Name des an den Filter angehängten Ereignisses, das die Validierung auslöst (onkeyup | onclick | onblur | onchange usw.) onchange - Standardwert

Die Funktion selbst Filtertabelle hat folgende Signatur:

tables * @param Objektfilter - Filterkonfigurationsobjekt: ( N: FILTER[, N: FILTER] ) * * Wobei: * NUM eine natürliche Zahl ist - die Nummer der Tabellenspalte *, die vom Filter bedient wird. Diese Zahl kann Werte von 0 bis * Anzahl der Tabellenspalten - 1 annehmen. Zahlen können außerhalb der Reihenfolge angegeben werden. * * FILTER ist ein Verweis auf ein HTML-Element, das ein HTML-Formularelement ist * und ein Wertattribut hat (einschließlich select), oder * ein Objekt vom Typ tableKit.Filter */ filterTable(HTMLTBodyRef, aFilters)

Es sieht ziemlich verwirrend aus, aber schauen wir uns ein Beispiel an. Zuerst brauchen wir html - den Rahmen der Tabelle. Beachten Sie, dass Filter nur HTML-Formularelemente sind, die übrigens eindeutige ID-Attribute haben, anhand derer wir sie für die Übergabe an den Konstruktor filterTable.Filter auswählen

Symbole	Text	Zahlen	Zahlen	Text
EIN B C		--- 1 2 3	- 1 2 3
B	Wassermelone	2	3	Fan
B	Schütze	1	2	Arba
C	Fan	3	1	Schütze
C	Schütze	2	1	Fantomas
B	Schütze	1	2	Wassermelone
C	Fan	3	3	Schütze
EIN	Wassermelone	2	2	Wassermelone
EIN	Fan	1	1	Weichensteller
C	Fan	3	3	Wassermelone
B	Fan	2	3	Fantik
C	Schütze	1	1	Wassermelone
C	Fan	3	2	Pfeil

Es ist erwähnenswert, dass solche Filtertypen wie ein Textfeld oder eine Dropdown-Liste "nativ" für das Skript sind und Sie nicht einmal auf Aufrufe zurückgreifen müssen, um sie zu implementieren filterTable.Filter- Übergeben Sie einfach einen Link zum HTML-Element selbst.

Wir haben also einen Rahmen. Es hat Filter. Es bleibt, alles zusammenzubinden. Aber fangen wir mit dem einfachsten an Anschlussmöglichkeit, und wir werden nur die Filter für die 2. und 3. Spalte analysieren, da sie ein Textfeld und eine Dropdown-Liste mit Werten verwenden, die das Filterskript "nativ" versteht, ohne dass es erstellt werden muss filterTable.Filter Die Elemente 0, 3, 4 habe ich bewusst auskommentiert und ihre Umsetzung vorerst mit "..." bezeichnet, um schwache Nerven nicht vorschnell zu verschrecken :)

Beachten Sie, dass das zweite Argument der Funktion filterTabelle(..., (...) ) ist ein Filterkonfigurationsobjekt, dessen Eigenschaften mit numerischen Namen beginnen von 0 bis NUM_COLUMNS_TABLE-1 Der Wert jeder dieser Eigenschaften sollte ein Filter sein:

tables */ document.getElementById("target"), /* Konfigurationsobjekt filtern: */ ( /* Filter für Checkboxen der ersten Spalte: 0: ..., */ /* Filter für Textfeld der zweiten Spalte - nur genaue Übereinstimmung : */ 1: document.getElementById("text"), /* Filter für die dritte Spalte der Dropdown-Liste: */ 2: document.getElementById("digits"), /* Filter für die vierte Spalte des Optionsfelds: 3: ... , /* Filter für fünfte Spalte Schrittweise Worteingabe: 4: ... */ ));

Wenn jemand alle Funktionen benötigt, wie in der Demo gezeigt, z. B. Filter mit Optionsfeldern oder Filter mit Kontrollkästchen, dann wird die Verbindung etwas komplizierter, da es sich tatsächlich um Filter handelt, die aus einer Reihe von HTML-Elementen bestehen. und Sie müssen während der Validierung die Werte des gesamten Satzes eines solchen Filters überprüfen. Hier kommen Callback-Funktionen ins Spiel. Unten in der Auflistung habe ich versucht, diesen Punkt ausführlich zu kommentieren.

Beachten Sie auch hier, dass es für ein Textfeld und eine Dropdown-Liste ausreicht, einfach einen Verweis auf das html-Element zu übergeben. Und achten Sie auch auf den Anschluss des letzten Filters. Sie fragen sich vielleicht warum – schließlich ist der Filter in der letzten Spalte ein Textfeld! Ja, ist es, aber wenn Sie sorgfältig mit dem Demo-Beispiel gearbeitet haben, haben Sie bemerkt, dass der erste Filter – das Testfeld – erst funktioniert, nachdem Sie den Wert vollständig eingegeben und die Schaltfläche „Enter“ gedrückt oder irgendwo anders auf der Seite geklickt haben , d.h. Der Filter wird durch das Standardereignis "onchange" ausgelöst! Aber das Filter-Textfeld der letzten Spalte - funktioniert sofort, sobald Sie irgendein Zeichen eingeben. Um dieses Verhalten umzusetzen, musste ich einen Filter nach allen Regeln mit erstellen filterTable.Filter Außerdem musste eine Callback-Funktion gesetzt werden und außerdem musste der Name des „onkeyup“-Events übergeben werden, durch das der Filtervorgang ausgelöst wird. So. Ich hoffe ich habe dich nicht komplett verwirrt.

FilterTable(/* Verweis auf Element tables */ document.getElementById("target"), /* Konfigurationsobjekt filtern: */ ( /* Filter für die erste Checkbox-Spalte: */ 0: new filterTable.Filter([ /* Elemente filtern */ document.getElementById( "charA"), document.getElementById("charB"), document.getElementById("charC") ], /* Validierungs-Callback */ Funktion (Wert, Filter, i) ( /* Wenn das Kontrollkästchen deaktiviert ist, gilt sein Wert nicht an der Validierung teilnehmen, also müssen wir true zurückgeben */ if (false === filter[i].checked) return true; /* Außerdem müssen wir beim Überprüfen gleichzeitig die Werte aller Elemente des Satzes überprüfen, sofern das Kontrollkästchen aktiviert ist */ returnfilter.geprüft && filter.wert === wert || filter.geprüft && filter.wert === wert || filter.geprüft && filter.wert === wert; )), / * Filter für Textfeld der zweiten Spalte – nur genaue Übereinstimmung: */ 1: document.getElementById("text"), /* Filter für Dropdown-Liste der dritten Spalte: */ 2: document.getElementById("digits"), /* Filter for i der vierten Spalte des Optionsfelds: */ 3: new filterTable.Filter(, /* Callback der Validierungsfunktion */ function (value, filter, i) ( /* In Filters - wir haben ein Optionsfeld "Nicht ausgewählt". , wenn der gesetzte Filter nicht an der Validierung teilnimmt und wir true zurückgeben müssen */ if (true === filters.checked) return true; /* Wenn ein Optionsfeld aktiviert ist und der Inhalt der aktivierten Zelle übereinstimmt, dann true zurückgeben */ filter.geprüft && filter.wert === Wert || zurückgeben Filter.geprüft && Filter.Wert === Wert || filter.geprüft && filter.wert === Wert; )), /* Fünfter Spaltenfilter Schrittweise Worteingabe: */ 4: new filterTable.Filter(document.getElementById("regexp"), /* Validierungsrückruf */ function (value,filters, i) ( return value.indexOf( filter[i].value) === 0; ), /* Wir rufen die Validierung für das onkeyup-Ereignis des Filters auf */ "onkeyup") ));

Das ist alles, ich warte auf Ihr Feedback und Ihre Vorschläge und hoffe, dass Sie meine Arbeit nützlich finden. Nun, endlich gebe ich eine vollständige Auflistung des Skripts.

/** * Filter an die Tabelle binden. * @param HTMLTableSectionElement HTMLTBodyRef - Elementreferenz tables * @param Objektfilter - Filterkonfigurationsobjekt: ( N: FILTER[, N: FILTER] ) * * Wobei: * NUM eine natürliche Zahl ist - die Nummer der Tabellenspalte *, die vom Filter bedient wird. Diese Zahl kann Werte von 0 bis * Anzahl der Tabellenspalten - 1 annehmen. Zahlen können außerhalb der Reihenfolge angegeben werden. * * FILTER ist eine Referenz auf ein HTML-Element, das ein * HTML-Formularelement ist und ein Wertattribut (einschließlich select) hat, oder * ein Objekt des Typs tableKit.Filter */ var filterTable = function (HTMLTBodyRef, aFilters) ( var rows = HTMLTBodyRef.getElementsByTagName("TR"), filter = (), n, walkThrough = function (rows) ( var tr, i, f; for (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; } } };

Wertebereichsfilter "VON" und "BIS"

Auf Wunsch der Arbeiter zeige ich, wie Sie einen Filter implementieren können, mit dem Sie die Wertebereiche der Zahlen "von" und "bis" auswählen können. Schreiben Sie in die Überschrift der Spalte, die diesen Filter benötigt, den Code, der aus zwei Dropdown-Listen besteht. Dementsprechend: der erste ist der Wert "von", und der zweite ist der Wert "bis":

... ... ...

AUS --- 1 2 3 VOR --- 1 2 3

Und im Skriptaufruf schreiben wir der Kürze halber einen Filter (für die dritte Spalte) vor, ich habe die Auflistung gekürzt und nur die Definition des Filters "von" und "bis" übrig gelassen:

FilterTable(/* Verweis auf Element tables */ document.getElementById("target"), /* Konfigurationsobjekt filtern: */ ( /* Filter für Checkboxen der ersten Spalte: */ 0: ... , /* Filter für Textfeld der zweiten Spalte - nur genaue Übereinstimmung : */ 1: ... , /* FILTER Wertebereich FROM und TO */ 2: new filterTable.Filter([ document.getElementById("digits-from"), document.getElementById("digits-to") ], Funktion (Wert, Filter, i) ( var accept = true; value = parseInt(value,10) if (filters.value) ( ​​​​accept = (value >= parseInt(filters.value,10)); ) if (accept && filter.value) ( ​​​​accept = (value<= parseInt(filters.value,10)); } return accept; }), /* Фильтр для четвертого столбца радио кнопки: */ 3: ... , /* Фильтр для пятого столбца Постепенный ввод слова: */ 4: ... });

Beispiele für Tabellenfilter ohne Berücksichtigung der Groß-/Kleinschreibung

Filter Groß-/Kleinschreibung egal für eine genaue Übereinstimmung (Sie können die Standardversion damit ersetzen)

Neu filterTable.Filter(document.getElementById("text"), Funktion (Wert, Filter, i) ( var empty_filter = Filter[i].value == "", match_value = value.toLowerCase() == Filter[i] .value.toLowerCase(); return empty_filter || match_value; ))

Filter Groß-/Kleinschreibung egal für die schrittweise Worteingabe

Neu filterTable.Filter(document.getElementById("regexp"), /* Rückruf der Validierungsfunktion */ Funktion (Wert, Filter, i) ( var c_value = value.toLowerCase(), f_value = Filter[i].value. toLowerCase( ); return c_value.indexOf(f_value) === 0; ), /* Wir rufen die Validierung für das onkeyup-Ereignis des Filters auf */ "onkeyup")

Im Prinzip kann die Groß-/Kleinschreibung in das Filterskript selbst eingebaut werden, aber im Moment habe ich keine Zeit, dieses Skript in Zukunft unter Berücksichtigung aller Ihrer Wünsche neu zu schreiben, dann machen wir dieses Feature dort. Wie heißt es so schön: Stay tuned ;)

Ein gut gestalteter Filter ist ein leistungsstarkes Tool, das Benutzer nutzen können. Tatsächlich ist dies eine wichtige Funktion, wenn Ihre Website (Online-Shop) viele Waren in verschiedenen Kategorien anbietet.

QUELLEN

Für den E-Commerce ist dies eine Möglichkeit, die Konversionsraten zu verbessern, indem die Zeit verkürzt wird, die ein Benutzer benötigt, um das zu finden, wonach er sucht.

Das Erstellen solcher Funktionen ist nie einfach: Filter sind stark vom Inhalt der Website abhängig; Auch die Filterleiste sollte nicht ablenken, das Hauptaugenmerk sollte auf den Inhalten/Produkten liegen. Deshalb haben wir versucht, Ihnen das Leben ein wenig zu erleichtern, indem wir eine hochgradig anpassbare und einfach zu integrierende CSS-Filterleiste für Sie erstellt haben.

Es nutzt CSS-Übergänge, CSS-Transformationen und jQuery für reibungslose Übergänge bei Bedarf.

Strukturerstellung

Die HTML-Struktur ist etwas komplexer als üblich. Zunächst einmal gibt es zwei Hauptinhaltsblöcke: den Header und die Hauptelemente, der zweite wird verwendet, um sowohl die gallery.cd-gallery als auch die filter.cd-filter zu umschließen. Darüber hinaus haben wir eine verschachtelte Navigation (innerhalb von 2 Divs verschachtelt, da der Dropdown-Effekt auf Mobilgeräten sichtbar ist) und einen Filter trigger.cd-filter-trigger .

Sie können auch viele Klassennamen (z. B. in Galerielistenelementen) und Datenfilter bemerken: Sie werden zum Filtern von Inhalten verwendet, nicht zum Stylen.

Notiz. Der Zweck des Elements .cd-gallery> li.gap besteht darin, in Verbindung mit text zu arbeiten: justify; Auf .cd-gallery angewendete Eigenschaft zum Erstellen des Galerierasters. Sie müssen so viele Elemente in .gap erstellen, wie die maximale Anzahl von Elementen in einer Reihe -1 ist.

Inhaltsfilter

• 
  Alle
  


• Alle


• Farbe 1


• Farbe 2

• 


• 

keine Ergebnisse gefunden

Blocktitel

nah dran

Filter

Hinzufügen eines Stils

Ein Großteil von CSS dreht sich um das Gestalten von Formularelementen und anderen grundlegenden Dekorationen. Es ist interessant, wie wir einige Klassen - in Kombination mit jQuery - definiert und verwendet haben, um das Verhalten einiger Elemente basierend auf bestimmten Ereignissen zu ändern.

Beispiel: Auf allen Geräten ist die Filterleiste fixiert, wenn sie den oberen Rand des Darstellungsbereichs erreicht. Um diesen Effekt zu erzielen, haben wir die .is-fixed-Klasse verwendet, die auf das Hauptelement (.cd-main-content) angewendet wird, sodass wir auf einige seiner untergeordneten Elemente abzielen können. Insbesondere: .cd-tab-filter-wrapper befindet sich in statischer Position, während .cd-filter und .cd-filter-trigger in absoluter Position sind (relativ zu .cd-main-content). Wenn wir die Klasse .is-fixed auf .cd-main-content anwenden, ändern wir die Position all dieser Elemente auf Fixed.

cd-tab-filter-wrapper ( Hintergrundfarbe: #ffffff; z-Index: 1; ) .cd-Filter ( Position: absolut; oben: 0; links: 0; Breite: 280px; Höhe: 100%; Hintergrund: #ffffff; z-index: 2; transform: translateX(-100%); Übergang: transform 0,3 s, box-shadow 0,3 s; ) .cd-filter-trigger ( position: absolute; top: 0; left: 0; Höhe: 50px; Breite: 60px; Z-Index: 3; ).cd-main-content.is-fixed .cd-tab-filter-wrapper ( position: fixed; top: 0; left: 0; width: 100% ; ) .cd-main-content.is-fixed .cd-filter ( position: fixed; height: 100vh; overflow: hidden; ) .cd-main-content.is-fixed .cd-filter-trigger ( position: fixed ; )

Erwähnenswert ist auch die Klasse .filter-is-visible. Es wird auf mehrere Elemente angewendet, wenn der Benutzer das Filterfeld startet. Auf allen Geräten wird es verwendet, um den translateX-Wert des .cd-Filter-Elements zu ändern (von -100 % auf 0). Auf größeren Geräten (>1170px) zielen wir auch auf die .cd-Galerie und den .cd-Tab-Filter ab und reduzieren ihre Breite: Auf diese Weise überlappt das Panel nicht den Inhalt und den Benutzer Zusatzfunktionen Platz zum Anwenden von Filtern und Anzeigen von Änderungen gleichzeitig, ohne das Bedienfeld schließen zu müssen.

Handhabung des Events

Zur Implementierung der Content-Filter-Funktionalität haben wir das MixItUp jQuery-Plugin integriert. Um das Plug-in im Galerie-Container zu initialisieren, verwenden wir die Funktion mixItUp() und deklarieren eine buttonFilter-Variable, die alle benutzerdefinierten Elemente enthält Funktionalität Filter. Außerdem verwenden wir jQuery, um die Filterleiste zu öffnen/schließen und zu reparieren (zusammen mit der Navigation mit Registerkarten), sodass sie beim Scrollen durch die Galerie weiterhin angezeigt wird.

Wir haben gelernt, wie man Daten auf dem Client sammelt und an den Server sendet. Und auf dem Server haben sie einen Stub an der Stelle geschrieben, an der die nach den eingegebenen Parametern gefilterten Waren zurückgegeben werden sollen. Jetzt werden wir den Stub los und schreiben ein paar Methoden und Abfragen, die die notwendigen Produkte aus der Datenbank ziehen und sie an den Client zurückgeben. Der Unterricht ist ziemlich kurz. Einstieg

Was machen wir?

Wir müssen nur 3 Schritte ausführen:

• 1. Daten vom Client abrufen und gemäß den Anforderungen des Servers verarbeiten. Legen Sie beispielsweise die Standardparameter fest
• 2. Schreiben Sie tatsächlich den Code selbst zum Extrahieren von Waren aus der Datenbank. Bereiten Sie zunächst die SQL-Abfrage vor
• 3. Senden Sie die empfangenen Daten an den Client zurück

Empfangen von Daten vom Client

Sie fragen sich vielleicht: Warum ist es notwendig, dies hervorzuheben? einfache Bedienung separat, ob wir alle Daten einfach aus dem $_GET-Array herausziehen können?

Erstens, um die Standardwerte festzulegen. Sie können sich nicht darauf verlassen, dass der Kunde sich darum kümmert.

Zweitens befinden sich nicht alle Daten in brauchbarer Form in $_GET. Beispielsweise ist es für uns bequemer, die Sortierung vom Client als einzelnen Parameter in Form einer field_direction zu übergeben, beispielsweise price_asc. In der SQL-Abfrage sind dies jedoch separate Entitäten, daher müssen sie vorverarbeitet werden.

Ähnlich verhält es sich mit Marken. Auf dem Client senden wir sie als Array von Marken, und PHP empfängt sie ebenfalls als Array. Die SQL-Abfrage benötigt jedoch eine Zeichenfolge - eine durch Kommas getrennte Liste von Marken. Daher müssen Marken auch weiterverarbeitet werden.

Schreiben wir also die Funktion getOptions(), die die Daten aus $_GET zieht und sie in ein für uns bequemes Formular umwandelt. Ich habe bereits fast alle Einführungen gemeldet, also schauen wir uns sofort den fertigen Code an.

// Daten aus der _GET-Array-Funktion abrufen getOptions() ( // Kategorie und Preise $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; // Marken $brands = (isset($_GET["brands"])) ?implode($_GET["brands"], ",") : null; // Sort $sort = (isset( $ _GET["sortieren"])) ?$_GET["sortieren"] : "price_asc"; $sort = explode("_", $sort); $sortBy = $sort; $sortDir = $sort; return array( "brands" => $brands, "category_id" => $categoryId, "min_price" => $minPrice, "max_price" => $maxPrice, "sort_by" => $sortBy, "sort_dir" => $sortDir); )

Hier sehen wir, dass wir zuerst die Kategorie-ID erhalten. Wenn die Kategorie nicht bestanden wird, betrachten wir category_id = 0. Der Mindestpreis beträgt 0, der Höchstpreis 1 Million. Wenn Ihr Online-Shop Plutonium verkauft (Öl an die Chinesen, Ameisen stückweise), können Sie die gewünschte Zeile immer mit Nullen ergänzen oder im schlimmsten Fall in Euro bezahlen.

Sortieren geht anders. Separat ziehen wir das Sortierfeld und den Parameter heraus: asc oder desc.

Beachten Sie, dass wir in allen Fällen daran denken, den Standardwert if zu ersetzen gewünschten Parameter kam nicht vom Auftraggeber. Und jetzt, wenn alle Daten konvertiert sind, müssen sie nur noch von der Funktion in einem assoziativen Array über return array(...) zurückgegeben werden.

Vorbereiten einer SQL-Abfrage und Extrahieren von Daten aus der Datenbank

Alle Daten sind in der von uns benötigten Form vorbereitet, jetzt schreiben wir eine Abfrage und führen sie aus. Dies wird durch die Funktion getGoods($options, $conn) erledigt. Als Parameter nimmt sie $options – die von der vorherigen Funktion vorbereiteten Daten – und $conn – das Datenbankverbindungsobjekt, das wir in der vorherigen Lektion erstellt haben. Unsere Aufgabe ist es, eine SQL-Abfrage zu schreiben. Im Allgemeinen sieht es so aus:

Wählen Sie g.id als good_id, g.good als good, b.brand als Marke, g.price als Preis, g.rating als Bewertung, g.photo als Foto von Waren als g, brands als b, wobei g.category_id = selected_category und g.brand_id in (comma_separated_brand_list) und g.brand_id = b.id und (g.price zwischen min_price und max_price) sortieren nach sort_field sort_direction

Wir rufen die erforderlichen Felder ab, indem wir eine Reihe von Where-Bedingungen anwenden und die gewünschte Sortierung angeben. Es gibt keine Fragen zu Preisen und Sortierung, wir ersetzen einfach die notwendigen Werte an den entsprechenden Stellen der Anfrage. Aber Sie müssen mit der Kategorie und den Marken vorsichtiger sein, und hier ist der Grund.

Jedes Produkt, das wir haben, hat immer eine Kategorie. In unserer Datenbank gibt es kein Konzept einer Null-Kategorie – wir haben es zu unserer eigenen Bequemlichkeit gemacht, um zu verstehen, dass der Benutzer keine Kategorie im Browser ausgewählt hat (oder alle ausgewählt hat – für uns ist es dasselbe). Und in diesem Fall sollten wir die Zeile nicht in die Abfrage aufnehmen
g.category_id = selected_category und
Dasselbe gilt für Marken, wenn sie nicht ausgewählt sind, überspringen wir die entsprechende Zeile. So sieht es im Code aus.

// Waren abrufen Funktion getGoods($options, $conn) ( // Erforderliche Parameter $minPrice = $options["min_price"]; $maxPrice = $options["max_price"]; $sortBy = $options["sort_by"] ; $sortDir = $options["sort_dir"]; // Optionale Optionen $categoryId = $options["category_id"]; $categoryWhere = ($categoryId !== 0) ? " g.category_id = $categoryId und " : " "; $brands = $options["brands"]; $brandsWhere = ($brands !== null) ? " g.brand_id in ($brands) and " : ""; $query = " select g.id as good_id , g.good als gut, b.brand als Marke, g.price als Preis, g.rating als Bewertung, g.photo als Foto von Ware als g, brands als b wobei $categoryWhere $brandsWhere g.brand_id = b.id and (g.price between $minPrice and $maxPrice) order by $sortBy $sortDir "; $data = $conn->query($query); return $data->fetch_all(MYSQLI_ASSOC); )

Zuerst extrahieren wir die Preis- und Sortiervariablen aus dem $options-Array – sie werden einfach ohne Änderung in die Abfrage eingefügt. Und für die Kategorien und Marken bilden wir die Strings $categoryWhere und $brandsWhere nach dem Prinzip: die notwendige Bedingung für den where-Abschnitt, wenn Daten vorhanden sind, und ein leerer String, wenn keine Daten vorhanden sind. Somit haben wir eine ziemlich vernünftige SQL-Abfrage, die alle unsere Wünsche berücksichtigt. Die letzten beiden Zeilen führen diese Abfrage aus und geben ein Array von Objekten mit den erforderlichen Feldern aus der Funktion zurück. Es bleibt, alles auf einem Haufen zu sammeln und die erhaltene Ware an den bereits wartenden Client / Browser zurückzusenden.

Wir senden Waren an den Kunden zurück

Dies ist der einfachste Teil des Tutorials. Schauen wir uns den Stub an, der in der vorherigen Lektion geschrieben wurde.

// Mit der Datenbank verbinden $conn = connectDB(); // Rückgabe einer erfolgreichen Antwort an den Client echo json_encode(array("code" => "success", "data" => $_GET));

Lassen Sie uns diesen Code durch ersetzen

// Mit der Datenbank verbinden $conn = connectDB(); // Daten vom Client abrufen $options = getOptions(); // Ware holen $goods = getGoods($options, $conn); // Rückgabe einer erfolgreichen Antwort an den Client echo json_encode(array("code" => "success", "options" => $options, "goods" => $goods));

Wir haben ein paar Zeilen hinzugefügt: Mit der Funktion getOptions haben wir die Daten in die Variable $options abgerufen. Wir haben es sofort verwendet, um Waren zu bekommen, getGoods, die Ergebnisse wurden in $goods gespeichert. Und erweiterte die Reaktion auf den Kunden. Der Parameter data wurde in options umbenannt und lieferte nicht den Inhalt von $_GET, sondern bereits konvertierte Werte. Und im Warenparameter haben wir eine Reihe von erhaltenen Waren zurückgegeben.

Diese Lektion ist vorbei. Während wir diese Daten nicht auf dem Client verwenden können, rendern Sie sie im Browser - wir werden uns in der nächsten Lektion damit befassen. Aber wir können immer die Konsole öffnen, Knöpfe und Häkchen drücken und sicherstellen, dass der Server uns die richtigen Waren zurückgibt.

Überprüfung der Arbeitsergebnisse

Wählen wir die Kategorie Smartphones und markieren die Marken Apple und Samsung. In der Antwort sehen wir, dass der Server 3 Produkte zurückgegeben hat, sortiert nach Preis aufsteigend

Jetzt legen wir den Mindestpreis auf 20.000 fest und ändern die Sortierung auf Preis absteigend
Wie Sie sehen können, gibt es jetzt nur noch 2 Produkte - ein Samsung wurde aufgrund eines unangemessenen Preises für Filter von 17.000 verworfen. Und die Ware ist im Gegenteil schon sortiert. Wenn Sie alles richtig gemacht haben, sehen Sie genau das gleiche Bild.

Sie können weiterhin mit der Konsole spielen und sicherstellen, dass die Daten korrekt zurückgegeben werden. Am Ende ist es am wichtigsten, dass die Filter richtig funktionieren und die richtige Produktliste zurückgegeben wird. Das Streuen der empfangenen Daten auf der Seite unter Berücksichtigung des bereits fertigen Layouts ist äußerlich das Interessanteste, aber aus der Sicht der Entwicklung ist es ganz einfach. Aber ich werde nicht vorgreifen - die Details sind in der nächsten Lektion.

Aber HTML unterstützt auch Filter. Bewirbt sich verschiedene Filter zum Text können Sie erreichen interessante Effekte. Aber Seien Sie vorsichtig, nicht alle Browser zeigen die gleichen Effekte, die Filter geben sollten, einige Browser ignorieren Filter völlig. Testen Sie also Ihre Webseiten in verschiedene Browser. Alle Filter funktionieren ordnungsgemäß mit Internet Explorer. Schauen wir uns also an, wie Filter funktionieren.

Zum Beispiel möchten wir den Satz hervorheben: "Schönen Tag!!!"Versuchen wir, diesen Satz zu verzerren :-) indem wir verschiedene Filter darauf anwenden.

Maskenfilter.

Markiert den Text bzw. den Hintergrund, auf dem der Text geschrieben ist, als ob Sie den Text mit der Maus markiert hätten.

Filtersyntax: STYLE="filter:Maske(Color="Color")

Farbe - Hervorhebungsfarbe im Hexadezimalformat (z. B. #000FFF) oder Farbname in Englisch, z. B. Rot, Blau, Grün. Diese Farbdefinition wird in allen Filtern verwendet, wird also nicht weiter wiederholt.

Auflistung 19.1.

DropShadow-Filter.

Fügt dem Text einen Schatten hinzu.

Filtersyntax:
STYLE="filter:DropShadow(Color="Color", OffX="Offx", OffY="Offy", Positive="Positiv")"

Farbe - Schattenfarbe
OffX - Offset-Schatten in X
OffY - Schatten-Y-Offset
Positiv - Schatten links oder rechts (0 bzw. 1)

Auflistung 19.3.

So sieht es auf einer Webseite aus:

Flip-V-Filter.

Spiegelt Text vertikal.

Filtersyntax: STYLE="filter:FlipV"

Auflistung 19.5.

So sieht es auf einer Webseite aus:

Wellenfilter.

Macht Text wellig.

Filtersyntax:STYLE="filter: Wave(Freq="Freq", Add="Add", LightStrength="LightStrength", Phase="Phase", Strength="Strength")"

Freq - Anzahl der Wellen
Hinzufügen - Rahmen ein-/ausblenden (1 bzw. 0)
LightStrength - die Kraft der Wellen
Phase - Wellenwinkel
Stärke - Wellenintensität

Auflistung 19.7.

Schönen Tag!!!

So sieht es auf einer Webseite aus:

Unschärfefilter.

Verwischt Text in einer bestimmten Richtung.

Filtersyntax:
STYLE="filter:Blur(Add="Hinzufügen", Richtung="Richtung", Stärke="Stärke")"

Hinzufügen - mäßige oder starke Unschärfe (jeweils 1 oder 0)
Richtung - in welcher Richtung die Unschärfe auftreten wird (von 0 bis 315)
Stärke - Unschärfe-Offset

Wie benutzt man

Zuerst müssen Sie das Plugin-Archiv von der Entwicklerseite herunterladen und in ein Verzeichnis auf Ihrer Website entpacken. Zwei Versionen sind verfügbar - minimiert (Produktionsversion) und für Entwickler (Entwicklungsversion). In der Entwicklerversion wird der Text des Plugins in strukturierter Form mit Kommentaren dargestellt, was für das Verständnis des Funktionsprinzips praktisch ist (der Quellcode für die Lektion enthält die Version des Plugins für Entwickler mit übersetzten Kommentaren).

Dann zum Schnitt Auf der Seite, auf der Sie die Filterung verwenden möchten, müssen Sie den Plugin-Verbindungscode einfügen:

Muss ersetzt werden " /pfad_zum_plugin/” in den Pfad, in dem sich das Plugin befindet liveFilter, die Sie zuvor entpackt haben. Sie müssen auch ersetzen " element_for_filtering“ mit einem CSS-Selektor, der zum gewünschten Element passt.

Plugin-Parameter "Möglichkeit" steuert die Verwendung von Animationen beim Ausblenden und Anzeigen von Elementen während des Filterns. Folgende Werte stehen zur Verfügung: Basic- Elemente werden einfach ohne Animation deaktiviert / aktiviert, gleiten- gefilterte Elemente werden ein-/ausgeklappt, verblassen- Gefilterte Elemente werden nach und nach ein-/ausgeschaltet.

Zum Beispiel:

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

Der obige Code weist das LiveFilter-Plugin an, die ungeordnete Liste mit der ID „ filter_me” und Animation verwenden “ gleiten”.

Das Plugin kann für ungeordnete und geordnete Listen und Tabellen verwendet werden. Beim Aufruf des Plugins müssen Sie den gewünschten Selektor angeben.

Wichtig! Damit das Plugin funktioniert, müssen Sie der Klasse ein Texteingabefeld hinzufügen "Filter". Dieses Feld wird verwendet, um Filtertext einzugeben:

Beispiel einer Seite mit Filter:

• Artikelnummer 1.
• Artikelnummer 2.
• Artikelnummer 3.
• Artikelnummer 4.
• Artikelnummer 5.
• Artikelnummer 6.
• Artikelnummer 7.
• Artikelnummer 8.
• Artikelnummer 9.
• Artikelnummer 10.

Plugin-Code

(function($)( $.fn.liveFilter = function (aType) ( // Festlegen, was gefiltert werden soll. var filterTarget = $(this); var child; if ($(this).is("ul")) ( child = "li"; ) else if ($(this).is("ol")) ( child = "li"; ) else if ($(this).is("table")) ( child = " tbody tr"; ) // Variablen definieren var hide; var show; var filter; // Ereignis für Eingabeelement $("input.filter").keyup(function() ( // Filterwert holen filter = $(this) .val(); // Abrufen, was ausgeblendet und was angezeigt werden soll hide = $(filterTarget).find(child + ":not(:Contains("" + filter + ""))"); show = $(filterTarget ).find(child + ":Contains("" + filter + "")") // Elemente zum Ausblenden und Anzeigen animieren, wenn (aType == "basic") ( hide.hide() ; show.show() ; ) else if (aType == "slide") ( hide.slideUp(500); show.slideDown(500); ) else if (aType == "fade") ( hide.fadeOut(400 ); show. fadeIn( 400); ) )); // Benutzerdefinierter Ausdruck für Text ohne Berücksichtigung der Groß-/Kleinschreibung Funktionen enthält() jQuery.expr[":"].Contains = function(a,i,m)( return jQuery(a).text().toLowerCase().indexOf(m.toLowerCase())>=0; ); ) ))(jQuery);