PS #5: dodawanie produktów do sklepu

rejestracja użytkowników

W dzisiejszym wpisie przedstawię implementację kolejnej funkcji dostępnej z poziomu administratora – dodawanie produktów oraz ich edycję oraz wyświetlanie listy wszystkich produktów na stronie głównej naszego sklepu.

Sidebar fragments

Być może zwróciłeś uwagę, że na większości podstron naszej aplikacji boczny panel jest pusty. Wraz z rozwojem serwisu będą pojawiać się nowe funkcje do których dostęp będzie właśnie z poziomu tego panelu. Jak można się spodziewać, wygląda panelu będzie generowany dynamicznie i uzależniony od takich czynników jak rola zalogowanego użytkownika lub strona na której użytkownik aktualnie przebywa.

Aby umożliwić takie funkcjonowanie panelu będziemy generować go z poszczególnych fragmentów odpowiednich  elementów aplikacji. Fragmenty te będą się znajdować w folderze resources/templates/fragments/sidebar.

Przy okazji zwróćmy uwagę na 9. linijkę w pliku products-admin.html:

<li th:classappend="${#httpServletRequest.getRequestURI().startsWith('/product/add') ? 'active':''}">

Korzystając z thymeleaf’a dodajemy klasę ‚active’ do znacznika li w przypadku, gdy użytkownik znajduje się na stronie …/product/add, natomiast bootstrap generuje nowy wygląd dla klasy ‚active’.

Dodawanie i edycja produktu

Na stronie …/products/add, do której dostęp ma administrator, znajduje się pusty formularz z pliku resources/templates/create-product.html. Proces dodawania nowego produktu odbywa się analogicznie do rejestracji użytkownika, którą omawiałem we wcześniejszym artykule. Warto jednak zauważyć, że ten sam plik (create-product.html) wykorzystywany jest do edycji istniejących produktów, do której prowadzi link …/product/{id}/edit. W klasie ProductController wysyłany jest atrybut product z produktem o danym w adresie URL id. To pozwala nam w polach formularzu na ustawienie odpowiednik wartości th:value=”…”. Aby wykorzystać tę samą stronę do dodawania produktów w klasie ProductController przesyłamy atrybut product z pustym obiektem Product. Aby rozróżnić, czy plik create-product.html jest wykorzystywany do tworzenia produktu czy do edycji wystarczy sprawdzić czy pole id przesłanego atrybutu product jest puste – null (dla dodawania nowego produktu) czy nie (dla edycji produktu).

Wyświetlanie na stronie głównej

Naszym celem będzie wyświetlenie wszystkich dodanych produktów do bazy danych na stronie głównej naszej aplikacji. Najpierw w klasie SecurityConfig udostępnijmy główną stronę dla wszystkich użytkowników. Następnie w klasie MainController prześlijmy atrybut productList zawierający listę wszystkich produktów, a w pliku resources/templates/main.html wykorzystamy instrukcję th:each do iteracji po każdym elemencie z przesłanej listy. Dodatkowo przy nazwie produktu dodamy przycisk dostępny tylko dla administratora przekierowujący do formularzu edycji wybranego produktu.

Co dalej?

W najbliższym czasie dokończymy dodawanie produktów – będziemy wysyłać na serwer pliki zdjęć produktów, a następnie wyświetlać odpowiednie zdjęcie przy danym produkcie.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *