Organizátor šatníka: 13 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:58

Či už ide o nakupovanie oblečenia alebo vždy požiadanie o požičanie akejkoľvek položky, sú chvíle, kedy si želáte nahliadnuť do svojho šatníka odkiaľkoľvek, aby ste zistili, či máte niečo podobné. Organizátor šatníkov to robí A VIAC!

Toto je jednotné kontaktné miesto a rozsiahle na mnoho ďalších účelov. My Wardrobe Organizer je kombináciou Tabuliek Google ako databázy SQL, Skriptov Google na spracovanie údajov a Google WebApp pre online portál k týmto údajom. Koncový užívateľ môže vidieť všetky položky, filtrovať niečo konkrétne, označiť položky ako vypožičané, spravovať svoje prádlo a zabrániť matke, aby vám každý rok kupovala na Vianoce rovnakú košeľu*.

(*Bez záruky. Matky si kúpia, čo chcú, či to potrebujete alebo nie)

Pri rýchlom pohľade na dizajn webových stránok na obrázku vyššie je možné rozpoznať známe rozloženie. Organizér šatníka je nastavený ako každý bežný web s oblečením. Toto rozhranie, rozbité oddeleniami hore a filtre na boku, prináša bežnému používateľovi oboznámenie sa s funkčnosťou. A jeho používanie je jednoduché.

Krok 1: Nastavenie vlastnej kópie

Začnime vytvorením vlastnej kópie tohto projektu.

disk Google

Kliknutím na vyššie uvedený odkaz sa dostanete k mojej aktuálnej verzii tejto aplikácie.

V tomto priečinku uvidíte 3 položky: Formulár Google, Tabuľka Google a Priečinok.

Kliknite pravým tlačidlom myši na Tabuľku Google a kliknite na položku Vytvoriť kópiu.

Nastavte umiestnenie tejto kópie na svoj vlastný Disk.

Po skopírovaní tohto dokumentu sa formulár Google automaticky vygeneruje do rovnakého priečinka, ako ste presunuli Tabuľku Google.

Ak chcete vytvoriť priečinok (je to potrebné na zhromažďovanie údajov o odoslaných obrázkoch položiek), kliknite na skopírovaný formulár Google a zobrazí sa výzva na obnovenie umiestnenia priečinka na odosielanie.

Teraz máte kópiu tohto dokumentu, na ktorej budete musieť sami pracovať!

Krok 2: Prehľad formulára Google

Teraz, keď máte vlastnú verziu tejto aplikácie, poďme sa pozrieť okolo seba.

Váš formulár Google je nastavený tak, aby prijímal mnoho rôznych typov položiek. Tričká, nohavice, šaty a topánky však majú rôzne obmedzenia veľkosti. Preto bude vyplnená iná časť tohto formulára na základe oddelenia, v ktorom evidujete svoju položku. V mojej šablóne (Mužské články) som vytvoril 5 rôznych veľkostných kategórií. (Pre články o ženách kliknite sem, existuje mnoho ďalších).

V každej sekcii určovania veľkosti som stanovil jedinečný názov pre každý parameter, ktorý budem zbierať. Nechceme mať v databáze viac stĺpcov s názvom „Veľkosť“alebo by sme nevedeli určiť, na ktorý typ oblečenia sa táto veľkosť vzťahuje.

Na konci každej sekcie je používateľ presmerovaný na poslednú časť tohto formulára: Poloha. Osobne som sa rozhodol pridať položku Miesto na určenie položiek v čistiarni, v práčovni, na ich mieste alebo v tých veciach, v ktorých som nechal priateľa požičať. Vďaka tomu môžem byť organizovaný a nikdy mať pocit, že mi niekde chýba kúsok oblečenia.

Ako som už spomenul na začiatku, tento projekt je možné rozšíriť na milión rôznych spôsobov. Môžete ho použiť na inventár, presnejší organizačný nástroj alebo na prísne požičiavanie oblečenia. Polia a sekcie, ktoré môžete pridať, sú nekonečné, takže sa neobmedzujte iba na to, čo je v mojej forme. (Články o ženách kliknite sem)

Pred odoslaním niekoľkých vlastných položiek prejdeme k ďalšiemu kroku, ktorý zaistí správne odoslanie.

Krok 3: Skripty Google: (Server Code.gs) Najprv sa pozrite na údaje a kód

Po kliknutí na dokument Tabuliek Google sa zobrazí veľa stĺpcov s údajmi (a niekoľko riadkov, ktoré zostanú na ukážku). Pri odosielaní formulárov sú niektoré sekcie vynechané, čo je zrejmé z chýbajúcich údajov v niektorých stĺpcoch. Aby však bolo možné lepšie sledovať úpravy týchto položiek, boli pridané ďalšie stĺpce, ako napríklad ID, Predvolené umiestnenie, Kto a Aktualizované.

Pri odoslaní formulára bolo vytvorené pole ID, ktoré umožňuje jedinečný identifikátor pri prechádzaní touto databázou. Na vytvorenie tohto poľa sa pozrieme na Script Editor kliknutím na Tools> Script Editor.

Pri otvorenom editore skriptov si v bočnom paneli tohto nového okna všimnete 8 dokumentov. Tieto dokumenty pomáhajú ovládať proces back-end, klientske displeje a funkcie front-end. Skočíme do každého (ak sa držíte), ale práve teraz kliknite na Kód servera.

V súbore Server Code.gs existuje mnoho funkcií:

onSubmit (e), onOpen (), doGet (), include (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Táto funkcia bude nakonfigurovaná ako prvá funkcia, ktorá sa spustí pri odoslaní formulára Google. Do tejto funkcie môžete umiestniť ďalšie funkcie, aby sa umožnilo mnoho rôznych procesov.

onOpen (e) - Táto funkcia sa volá pri otvorení Tabuliek Google. Vyplní novú možnosť ponuky, ktorá umožní rýchly prístup k odkazom a zobrazeniam aplikácie.

doGet ()- Táto funkcia sa volá pri volaní adresy Web App. Keď používateľ prejde na zverejnenú webovú aplikáciu, tento kód tejto stránke povie, čo sa má zobraziť. V tomto prípade ide o dokument Application.html.

zahrnúť (názov súboru) - Táto funkcia sa používa vo vnútri stránok HTML na čítanie iného dokumentu a vkladanie jeho obsahu do správneho formátu HTML na inej stránke. Používame ho pre naše súbory CSS.html a JS.html.

openApplication () a openLaundryApp () - tieto funkcie obsahujú kód, ktorý sa spustí, keď používateľ klikne na tlačidlá ponuky pridané na panel s nástrojmi Tabuľky Google.

changeValueOnSubmit (e) a setIDOnSubmit (e)- Toto sú funkcie, o ktoré sa teraz budeme zaujímať. Zodpovedajú za aktualizáciu určitých polí s predvolenými hodnotami pri prvom odoslaní formulára.

Krok 4: Povolenie programu OnFormSubmit

Tieto dve funkcie, changeValueOnSubmit (e) a setIDOnSubmit (e), je potrebné prepojiť s akciou používateľa pri odosielaní formulára. Na to musíme povoliť spúšťač.

Spúšť aktivujeme kliknutím na Upraviť> Spúšťače aktuálneho projektu. Tým sa otvorí Centrum pre vývojárov Google.

V pravom dolnom rohu ovládacieho panela spúšťača je tlačidlo Pridať spúšťač. Kliknite tu.

Teraz nastavíme funkciu, ktorá sa má spustiť pri odoslaní formulára. V našom prípade mám viac funkcií (changeValueOnSubmit (e) a setIDOnSubmit (e)), ktoré som vložil do funkcie onSubmit (), takže musím nastaviť iba 1 spúšťač. Preto vyberieme onSubmit () a nastavíme tento spúšťač na spustenie pri odoslaní formulára.

Teraz máme pracovný formulár, ktorý naplní Tabuľku Google s jedinečnými identifikátormi a nastaví predvolené hodnoty.

Teraz môžete nahrávať svoje vlastné položky pomocou formulára Google. (Pokračovanie nie je potrebné, pretože v programe už existujú demo hodnoty). Teraz sa ponoríme do používateľského rozhrania.

Krok 5: Nastavenie používateľského rozhrania

VITAJTE! Konečne sme sa dostali k časti, pre ktorú ste prišli, k používateľskému rozhraniu !!!!

Na prvý pohľad tu nič nie je. Zatiaľ sme nevolali. Aby som stránku načítal rýchlejšie, rozhodol som sa, že prvú stránku nebudem zaťažovať VŠETKÝMI vašimi položkami a umožní vám kliknúť rýchlejšie na to, čo chcete vidieť. Pretože je to tak, v hlavnom poli obsahu nie sú žiadne položky a na bočnom paneli nie sú žiadne filtre. Klikneme na Všetko, aby sme zistili, čo je v našej databáze.

Teraz sme načítali každú položku v našej databáze do hlavného poľa obsahu. Uvidíte obrázky, identifikačné čísla, farbu, veľkosti a polohy. Pole polohy je možné aktualizovať práve tu! Ak sa rozhodnete požičať položku, môžete si vybrať túto možnosť, môžete ju uložiť do skrine, komody alebo práčovne.

A na našom bočnom paneli máme všetky možné polia pre každú položku oblečenia v našom novom dopyte. Predstavte si, že by ste na tomto bočnom paneli mali 20 rôznych možností veľkosti, nebolo by to veľmi efektívne, a tak zúžime naše vyhľadávanie kliknutím na Príslušenstvo.

Teraz, keď sme nahrali Príslušenstvo, sa pozrite na bočný panel. Upravil sa iba na 3 polia, pretože to sú parametre, ktoré sa vzťahujú na každú položku v tomto dopyte. Urobím triedenie podľa farby. Kliknutím na farbu sa zobrazí rozbaľovacie pole. Tu môžem buď zadať požadovanú farbu a potom ju vybrať, alebo ak sa mi hneď zobrazí moja možnosť, jednoducho na ňu kliknem. Na túto ukážku som vybral červenú. Kliknite na Použiť filter v spodnej časti tohto bočného panela a obnoví sa hlavný obsah, ktorý vám ukáže položky, ktoré majú ako parameter farby nastavenú červenú farbu.

Predtým som spomenul, že táto databáza mi pomáha spravovať moje položky požičané a v práčovni. Aby to bolo trochu jednoduchšie, namiesto manuálneho klikania na každé rozbaľovacie miesto na tejto hlavnej stránke som vytvoril režim prania. Vráťte sa na stránku Tabuľka Google a v časti Zobrazenie aplikácie sa zobrazí Režim prania. Táto možnosť vyvolá menší modál, ktorý zobrazuje iba položky s umiestnením práčovne. Teraz môžem všetky tieto položky označiť ako predvolené, čím sa vrátia na miesta, kde sú bežne uložené.

Krok 7: Projekt je dokončený

GRATULUJEM

Pre tých z vás, ktorí chcú mať funkčnú databázu na správu svojich položiek, vítajte svojho online organizátora. Pre tie zvedavé mysle, ktorých zaujíma kód za touto aplikáciou. Drž sa, keď to rozoberám.

*Testované položky môžete slobodne odstrániť, Akonáhle do databázy zadáte aspoň jednu z vlastných položiek. (Ak sa budete držať bokom, vysvetlím to neskôr).

Krok 8: Krok 1: Back-end kód (Server Code.gs)

Predtým sme otvorili súbor Server Code.gs a rýchlo som sa zoznámil s každou z funkcií, pretože ich účelom bolo obslúžiť všetky položky, ktoré ste práve nastavili, ale teraz ich rozdelíme na niektoré funkcie a pomôcky, tzv. aby bol tento kód úspešný.

1) Prechádzanie tabuľkou:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Odpovede na formulár 1"); rozsah varov = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = rozsah.getLastRow ();

• Tento kód je základom pre prechádzanie hárkom Google. Nazývam list skôr menom než číslom, aby aj keď sú listy odstránené alebo usporiadané podľa funkcie, mohol fungovať správne.
• V tomto kóde zbieram iba rozsah pre všetky údaje v tabuľke.

2) Priradenie ID:

var LastID = range.getCell (rowNum-1, 1); var CellValue = Number (LastID.getValue ()); var ColA = 1; var max = 15; var min = 5; CellValue = CellValue + Math.round ((Math.random ()* (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

• Predtým som požiadal, aby boli demo hodnoty v tabuľke ponechané, kým používateľ pre seba neodošle aspoň jednu hodnotu. Dôvodom je, že generátor Auto ID sa spolieha na vyplnenie poslednej hodnoty v databáze.
• Načítavam posledný 2. až posledný riadok, pretože posledný riadok je naša nová hodnota a 1. stĺpec pre hodnotu ID.
• Potom náhodne vygenerujem číslo medzi 5 a 15 a pripočítam ho k poslednej hodnote. *
• Nakoniec umiestnim túto hodnotu do stĺpca ID v poslednom riadku.
• Ďalej voláme funkciu changeValueOnSubmit (e).

* Vybral som si 5–15, aby bolo v budúcnosti možné označovanie a integrácia domovskej stránky Google, takže čísla nebudú dostatočne blízke, aby spôsobili zmätok na vešiakoch alebo značkách oblečenia alebo čiarových kódoch.

3) Zmena hodnoty adresy URL:

var DataChange = e.namedValues ["Item Item"]; var DefaultLocation = e.namedValues ["Kde máš uložený tento kus oblečenia?"]; var ColD = ColumnID _ ("Obrázok položky") +1; var ColLoc = ColumnID _ ("Predvolené umiestnenie")+1; DataChange = DataChange.toString (). replace ("open?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Pri odosielaní fotografie prostredníctvom formulára Google je adresa URL vložená do Tabuliek Google odkazom na skutočný dokument. V našom prípade, keď vytvárame stránku HTML, chceme, aby bol odkaz iba obrázkom.
• Zmenou „otvoreného?“časť adresy URL na „uc? export = zobraziť &“namiesto toho sme vytvorili odkaz na obrázok.
• Túto novú hodnotu opäť umiestnime do umiestnenia aktuálneho odkazu na obrázok položky.
• Rovnako nastavujem položky „Predvolené umiestnenie“a „Aktuálne umiestnenie“položky na rovnakú vec v databáze. Pomôže to pri pokuse o používanie môjho režimu prania.

• Ponoríme sa do toho na ďalšej stránke, ale toto je náš prvý pohľad na funkciu ColumnID_ (), ktorú som vytvoril.

  Táto funkcia používa názvy stĺpcov na preklad do celého čísla stĺpca, čo je užitočné pri volaní rozsahu, ktoré namiesto názvu vyžadujú číslo stĺpca

4) SpreadsheetApp.getUI ()

• Na druhom obrázku môžete vidieť použitie SpreadsheetApp.getUI (), ktoré slúžilo na vytvorenie doplnku Ponuky panela s nástrojmi k Tabuľke Google.
• Funkcia.getUI () tiež pomáha vytvoriť modálne vyskakovacie okno, ktoré sa používa v režime prania a ako rýchly odkaz na webové rozhranie.

5) Služba HTML

• V tomto kóde sú použité dva typy služieb HTML: Template a HTMLOutput
• Šablóna umožňuje vloženie kódu do kódu HTML, takže informácie prichádzajúce zo servera je možné vyplniť pri volaní stránky.
• Výstup HTML zobrazuje jednoduché stránky HTML.
• Máme tiež metódu includes (), ktorá nám umožňuje vytvárať viac súborov HTML a kombinovať ich do jedného šablónového súboru HTML tak, že obsah súboru vrátime vo formáte HTML, nie ako reťazec.

Priložil som dokument nastavený ako Dokumentácia k skriptom aplikácie Google, aby som sa bližšie zoznámil s vysvetlením zdrojového kódu a funkcií v službe Google Apps.

Krok 9: Krok 2: Back-end kód, časť 2 (Server Calls.gs)

Teraz sme zadali Server Calls.gs. Tieto funkcie sa používajú predovšetkým v HTML JavaScripte, takže boli oddelené od kódu, ktorý sa používa predovšetkým v koncovom serveri, ktorý sa nachádza v Server Code.gs.

Obrázok 1) Globálne premenné:

Obrázok 2) načítanie položiek:

Obrázok 3) fetchItemsQry

Obrázok 4) položky filtra

Obrázok 5) fetchFiltersWithQry

Obrázok 6) ColumnID a CacheCalls

S každým z nich je toho veľa, o čom sa dá hovoriť. A aby som kód rozložil a vysvetlil, čo sa deje, potreboval som trochu viac priestoru na písanie. V prílohe je dokument pre rozdelenie kódu ServerCalls.gs

Tento dokument je nastavený ako dokumentácia k skriptom aplikácie Google a dokonca vytvára odkazy na podobné objekty.

Krok 10: Krok 3: HTML kód (Application.html)

V dialógovom okne Instructable je HTML kód veľmi nešťastný. Postupujte preto podľa vyššie uvedených obrázkov.

1) V hlavičke stránky Application.html vytvoríme nadpis a zavoláme našu stránku CSS.html, ktorá sa má načítať.

*Keďže ide o šablónovú stránku HTML, môžeme do tohto dokumentu pridať ďalší kód bez preplnenia aktuálnej obrazovky pomocou vyššie uvedenej metódy include (pageName) nachádzajúcej sa v Server Code.gs

Na tomto obrázku sa nachádza aj hlavné pole záhlavia. Tu môžete zmeniť hlavičku a zadať „Šatník [svojho mena]“alebo čokoľvek iné, ako by ste chceli túto stránku rozpoznať.

2) Hneď pod hlavičkou je náš horný navigačný panel.

Tento navigačný panel obsahuje všetky typy článkov, ktoré sú uvedené v hárku článku v našich Tabuľkách Google.

Na načítanie radu týchto položiek sa volá vložená funkcia. Potom sa spustí cyklus, ktorý zahrnie každú z týchto možností ako tlačidlo ponuky, doplnený kódom akcie, takže keď používateľ klikne na tlačidlo ponuky, príslušné položky sa zobrazia v oblasti tela.

3) Hlavné telo.

Táto časť má 4 časti. Obsahuje textový výstup, filter na bočnom paneli, obrázky hlavného textu a JS.

Textový výstup umožňuje používateľovi namiesto odkazu na zvolenú možnosť ponuky zobraziť rýchle zobrazenie textu na to, na aký typ položiek sa práve pozerá.

Filter bočného panela obsahuje množstvo filtrov dostupných pre typ položky, ktorú si užívateľ vybral. Tieto filtre odrážajú všetky možnosti dostupné pre túto kategóriu a tiež počet položiek, ktoré spadajú pod hodnotu danej kategórie. Tento bočný panel je naplnený kódom JavaScript (o ktorom bude reč ďalej).

Hlavné telo je v súčasnosti prázdne, ale rovnako ako filtre bude naplnené políčkami s podrobnosťami o ID položky, farbe, veľkosti a umiestnení položky s obrázkom, akonáhle používateľ vyberie kategóriu a kód JavaScript vyplní túto oblasť.

Nakoniec obsahuje (JS), poďme sa na to pozrieť v nasledujúcom kroku.

Krok 11: Krok 4: Kód JavaScript (JS.html)

Ak ste si mysleli, že kód servera je náročná časť, načítajte ho poriadne.

Tu kombinujeme naše HTML a SeverCode s interakciami používateľov. Všetky položky, na ktoré sa kliká, musia byť spracované tu, aby sa získali správne údaje a vrátili sa v čitateľnom formáte. Pozrime sa teda na naše prvé hovory:

Skript volá: Na tento projekt používam 3 rôzne knižnice; jquery, bootstrap a špeciálny doplnok na výber bootstrapu. Tieto knižnice umožňujú formátovanie objektov a jednoduchšie volanie prvkov v kóde HTML.

Nasleduje môj ďalší dôležitý riadok JavaScriptu:

$ (dokument).keypress (funkcia (udalosť) {if (event.which == '13') {event.preventDefault (); }});

Tu deaktivujem klávesu Enter, aby nespúšťala žiadne z formulárov. V tomto prípade má Webová aplikácia Google priradenú iba jednu adresu stránky. Stlačením klávesu Enter sa na adresu HTML pridajú údaje a pokúsi sa používateľa presmerovať. Ak to zakážete, umožníte kódu JavaScript vykonávať všetku prácu.

funkcia removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

funkcia updateDBlocation (id, hodnota) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, hodnota); }

Tu sú dve funkcie, ktoré volajú do súboru Server Code.gs. Čiara:

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters ();

má mnoho pracovných častí, ale kostra je odvodená z „google.script.run“, ktorý na stránke HTML uvádza, že na serveri je nasledujúca funkcia.

• Posledný bit tohto kódu je funkcia, ktorá sa má spustiť. V tomto prípade ServerRemoveFilter ()
• Po pridaní príkazu withSuccessHandler () stránka HTML teraz vie, čo má robiť s vrátenými údajmi, a tým je spustenie funkcie s zátvorkami.
• To isté platí pre príkaz withFailureHandler ()

Teraz, keď sme rozdelili volanie kódu servera, pozrime sa rýchlo na to, čo sa stane, keď tieto volania na server budú úspešné a neúspešné.

function allGood (e) {console.log ("Success on server"); } funkcia onFailure (chyba) {$ ("#message-box"). html ("

V súčasnosti nie je možné načítať položky odevu. CHYBA: „ + chybová správa +“

");} funkcia FailDBUpdate (chyba) {$ ("#message-box "). html ("

Na úpravu umiestnenia nemáte prístup. CHYBA: „ + chybová správa +“

"); $ (". location-selects "). prop ('disabled', 'disabled');}

Vytvoril som veľmi jednoduchý protokol konzoly, aby znamenal úspech pri spustení funkcie určovania polohy, ktorú môžete vidieť ako allGood ().

Pri spracovaní chýb tieto dve funkcie vydajú chybové hlásenie, na ktoré sa používateľ môže pozrieť pomocou volania jQuery na objekt HTML s ID „boxu správ“.

Prejdime teraz k odvážnej práci

Krok 12: Krok 5: Akcie kódu JavaScript pri kliknutí na kód (JS.html)

Horný panel s ponukami ponúka možnosti pre každý typ článku. Funkcia, ktorú spúšťajú po kliknutí, je:

function filterType (article, id) {$ ("ul.navbar-nav li.active"). removeClass ("active"); $ ("#currentArticle"). html ("// HTML KÓD TU");

updateSideBar = true;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Články", článok); var newSelect = "#type-"+id; $ (newSelect).addClass ("active"); $ ("#myNavbar"). removeClass ("in"); }

V tomto kóde vidíme, že máme súbor google.script.run, ktorý volá server a získava informácie. Funkciou úspechu tohto hovoru je updateItems ().

OBRAZ 1 (s ťažkým kódom HTML v tejto funkcii je ťažké skopírovať striktne kód bez toho, aby sa v tomto poli zobrazoval neporiadok)

V kóde updateItems () sa deje veľa vecí. Opäť musíme prejsť objektom , ktorý nám bol vrátený, a pridať každú položku na našu hlavnú stránku tela.

HTML kód je pridaný ako pole, aby sa kód rozložil a uľahčilo sa čítanie a zistenie, kam sa vkladá itemData.

V slučke každej položky odstraňujem polia, ktoré nechcem, aby sa v popise zobrazovali, ako napríklad predvolená hodnota, časová pečiatka a adresa URL obrázku. Z popisu odstraňujem adresu URL obrázku, pretože sa namiesto toho pridáva ako href do značky. Akonáhle sú tieto informácie zostavené, sú odoslané do hlavného tela pomocou funkcie jQuery.append ().

Po pridaní všetkých položiek na stránku sa tento dotaz na položky znova odošle do kódu servera, aby sa zoradili a vrátili možnosti filtra, ako je znázornené na obrázku 2.

OBRAZ 2 (aktualizácia bočnej lišty)

Veľmi podobné funkcii updateItems () máme opäť polia kódu HTML a slučku pre všetky možnosti filtra. Jedinou viditeľnou zmenou je jQuery.selectpicker ('refresh'). Táto funkcia pochádza z knižnice skriptov, ktorú sme zahrnuli v poslednom kroku. Programátorovi to umožňuje napísať jednoduchý výber HTML a nechať knižnicu aktualizovať tak, aby obsahovala vyhľadávateľnú funkciu a kód CSS.

OBRAZ 3 (filtrovanie pomocou bočného panela)

Nakoniec máme funkciu updateFilter (formData). Používa sa pri odoslaní formulára z bočného panela. Začneme použitím funkcie jQuery.serializeArray (), ktorá načíta HTML kód prvku definovaného v našom prípade formuláru a vráti hodnoty v reťazci, ktorý sa má odoslať na server. A proces začíname od obrázku 1 úplne odznova.

Krok 13: Koniec …. Konečne

Tak tu to máte; úplné a podrobné vysvetlenie, ktoré vám pomôže vytvoriť si vlastný online šatník alebo využiť funkcie vytvorené v mojich skriptoch Google na rozšírenie vlastného projektu.

Bola to cesta kódujúca tento projekt (a dokumentujúca prostredníctvom tohto návodu), ale tento proces sa mi páčil a dúfam, že sa vám bude páčiť. Rád by som dostal spätnú väzbu od každého, kto robí úpravy, pretože Michael Jordan hovorí: „Strop je strecha“a súhlasím, že táto aplikácia nemá žiadne obmedzenia.