Vypracovali: Filip Škrabák, Patrik Prizbul, Samuel Krempaský
Vytvorte webovú aplikáciu - eshop, ktorá komplexne rieši nižšie definované prípady použitia vo vami zvolenej doméne (napr. elektro, oblečenie, obuv, nábytok). Presný rozsah a konkretizáciu prípadov použitia si dohodnete s vašim vyučujúcim.****
Téma projektu: Obchod s oblečením
https://dbdiagram.io/d/641ccebd296d97641d8a5e31
V pôvodnom návrhu sme mali tabuľku “Variant”, ktorá reprezentovala jednotlivé produkty v databáze. Pre jednoduchosť sme túto tabuľku vypustili. Ešte sme pridali tabuľku “card_products”, kde sa nachádza tovar v košíku. Inak zostal návrh nezmenený.
Pri editácii konta sa overuje zadaná adresa, tak aby sa nachádzala v databáze. Pokiaľ sa nenachádza, vráti to užívateľovi chybu. Avšak v prípade košíka, uvažovali sme s prípadom, kedy užívateľ zadá adresu, ktorá nie je v zozname. Nakoľko by sme neradi prišli o takéhoto zákazníka, web mu túto adresu akceptuje a dovolí vytvoriť objednávku. Vďaka dátovému modelu, kde ku každej objednávke ukladáme aj adresu objednávky ako text, môžeme uložiť akúkoľvek adresu, aj ak sa nenachádza v DB. Aby sme však minimalizovali chybovosť, pridali sme suggestions. Pri písaní sa na pozadí po každej zmene odošle cez fetch API request na /checkout/street alebo /checkout/postcode a server vráti 10 suggestions z DB. Tie sa zobrazia užívateľovi a po kliknutí na jedno z nich sa tieto dáta vyplnia vo formulári.
Potom už ostáva na administrátorovi eshopu, aby raz za čas overil všetky adresy ktoré sa nenachádzajú v DB, či naozaj existujú a nie sú v DB, a ak naozaj existujú, môže ich do tejto DB pridať.
Admin účet je riešený ako rola v databáze. 0 pre obyčajného používateľa a 1 pre admina. Pre oprávnenia sme vytvorili UserPolicy kde sa nachádza funkcia admin(User) . Tá vráti rolu používateľa, teda pre admina je to 1 ako true . Všetky endpoints sú verifikované pomocou Auth\Middleware\Authorize::class ktorý je implementovaný v laraveli a volá sa middleware('can:admin, App\Models\User') . Vložený User model sa automaticky spáruje s UserPolicy pomocou dodržiavania konvencií názvov. V prípade ak je potrebná verifikácia v blade.php súbore, používame @can() direktívu, napríklad pri zobrazovaní admin dashboard možnosti v profile menu.
Administratíva bola vytváraná tak, aby sme čo najviac eliminovali chybovosť ľudského faktoru. Preto všetky tlačidlá sú rôznych farieb, podľa toho akú funkciu vykonávajú. Takisto každé tlačidlo obsahuje ikonku ktorá napovedá o aký prípad použitia ide a čo robí. Admin menu je tiež viditeľne oddelené od používateľského menu.
Po kliknutí na tlačidlá +/- v košíku je volaná funkcia increasePcs() / decreasePcs(), ktoré načítajú aktuálny stav, zmenia ho podľa požiadavky a odošlú do funkcie updateCart(). Tá odošle požiadavku metódou PUT na endpoint /cart/${productId}.
Ak je response OK, volá funkciu updateContent() ktorá si cez fetch API načíta aktualizovaný obsah elementu <main> a ten na stránke aktualizuje.
Podobne pre tlačidlo X (odobratie produktu z košíka) je volaná funkcia removeCartItem(), ktorá volá endpoint /cart/${id}?size=${size} a ak je response OK, volá funkciu updateContent() .
Na prihlásenie sme použili vlastné riešenie, namiesto Laravel Breeze. Implementovať ho nie je zložité, avšak treba myslieť na tokeny. Pri prihlásení treba použiť regenerate() . Pri odhlásení je potrebné token invalidovať a znova vygenerovať. Pri registrácií používame na zahashovanie hesla funkciu bcrypt .
Vyhľadávanie medzi produktmi je realizované priamo v ProductsController v index metóde.
if($searchReq) {
$products = Product::query()->whereFullText(['name', 'description'], $searchReq);
}Teda v prípade, že je prítomný GET parameter “search”, tak sa vyfiltrujú produkty pomocou full-text searchu v databáze. Hľadá sa v názvoch produktov a ich popise (description).
Po stlačení “Add to Cart” je formulár s počtom ks a vybranou veľkosťou odoslaný na /cart/{{$product->id}} . Tento request je spracovaný v CartProductController. Ten implementuje všetky metódy CRUD. Rozlišuje medzi prihláseným užívateľom a neprihláseným. Pre prihláseného vytvára nový objekt modelu CartProduct (resp. pripočítava k už existujúcemu) a ukladá do DB, pre neprihláseného vytvára tento objekt no ukladá ho od SessionStorage.
V prípade, že mal užívateľ niečo v košíku ako neprihlásený a potom sa prihlási, je volaná pri logine funkica saveCart() v UserController, ktorá prečíta Session Storage a produkty odtiaľ vloží do DB pre prihláseného užívateľa a následne vymaže Session Storage. Funkcia je volaná aj pri registrácii.
Stránkovanie máme riešené cez pagination balík ktorý je dostupný v Laraveli. Teda v controlleroch len použijeme paginate() a vo views máme jednoduchý kód:
{{ $products->withQueryString()->links() }}withQueryString() zabezpečí, že pri prepínaní stránok sa zachovajú GET parametre, inak by sme naše filtre stratili.
Filtrovanie sme riešili pomocou GET parametrov a select formulárov na stránke produktov. V dvoch foreach cykloch prechádzam filtre, ktoré sa nachádzajú v GET parametroch a filtre z databázy. Pokiaľ sa nezhodujú, tak stránka vyhodí chybu. Filtrovanie máme teda spravené dynamicky, do databázy je možné pridať nové atribúty a ich hodnoty (attribute values). 4 základné filtre sú hardcode-nuté do stránky a to sú pohlavie, kategória, veľkosť, farba. Taktiež je možné filtrovať na základe ceny od-do.
Zoraďovať je možné od najnovšieho, najstaršieho, najnižšej ceny alebo najvyššej ceny.
Editácia konta pozostáva s dvoch častí. Prvá je zmena osobných údajov ako email, meno alebo adresa. Po kliknutí tlačidla na uloženie údajov sa zavolá funkcia editDetails() v UserController . Všetky údaje sú korektne validované pomocou validate() a všetky majú možnosť byť nullable . Je to preto aby si používateľ mohol vybrať ktoré údaje chce uložiť a ktoré nie. Pomocou array_filter sú potom null hodnoty vyfiltrované. Pri poštovom čísle a ulice sa overí či zadaná hodnota už existuje v databáze, aby používatelia vkladali len reálne hodnoty, nie náhodné slová.
Pri zmene hesla sa len overí či zadané hesla sú rovnaké, vytvorí sa z neho hash a uloží sa do databázy. Toto rieši funkcia editPassword().
Jednoduchá tabuľka ukazujúca všetky produkty ktoré sa nachádzajú v databáze. Admin má niekoľko možností ktoré môže vykonať. Veľké zelené tlačidlo nás prenesie na /dashboard/products/create , kde môže admin vytvoriť úplne nový produkt. Modré tlačidlo View prenesie admina na /product/{product:slug} , normálne zobrazenie produktu na stránke, ktoré sa ukazuje aj bežnému používateľovi. Žlté tlačidlo prenesie admina na /dashboard/products/{product:slug}/edit , kde môže editovať konkrétny produkt, pridať obrázky alebo zmeniť údaje. Posledné červené tlačidlo je na vymazanie produktu, ktoré zavolá DELETE metódu na /dashboard/products/{product:slug} . Tá sa postará o kompletné vymazanie produktu, aj s obrázkami, z databázy.
V admin panely - users, je pri každom používateľovi tlačidlo na zmenu roli. Pri obyčajnom účte toto tlačidlo zmení účet s administratívnymi právami a opačne. Tieto tlačidlá sú samozrejme odlíšiteľné od seba pomocou farby a ikonky. To zavolá funkciu changeRole() v UserController , ktorá inverzne rolu pre konkrétneho používateľa a uloží túto zmenu v databáze. V panely, pri zázname práve prihláseného admina, toto, a ani tlačidlo na odstránenie používateľa nie je.
