CarDealer #14 – walidacja formularzy / form validation

For English please scroll down and click Continue reading

Cześć!

W tym tygodniu dalsze prace przy widokach aplikacji.

Dla formularzy dodawania i edycji auta dla części pól wejściowych zmieniłam sposób wprowadzania danych. Teraz dla pól: rok, typ paliwa, skrzynia biegów i kolor, zamiast wpisywać dowolną wartość, użytkownik wybiera jedną z dostępnych opcji z listy.

Dodałam też podstawową walidację formularzy, aby uniknąć błędów przy zapisie do bazy danych, czyli m.in. ograniczyłam pole przebiegu w kilometrach do 6 cyfr.

Ponadto ustawiłam pola “marka” i “model” auta jako obowiązkowe. Nie można dokonać zapisu auta, gdy te dwa pola są puste.

Dzięki zastosowaniu frameworka Bootstrap komunikaty ostrzeżeń wyświetlają się automatycznie, kiedy ktoś wpisze wartość w niedozwolonym formacie. Ja tylko dodałam odpowiednie warunki w kodzie. Na przykład dla przebiegu auta określiłam, że dozwolone są jedynie liczby z przedziału [0,  999999]:

<input type="number" class="form-control" 
name="kilometer" min="0" max="999999">

Poniżej przykładowe screeny z aplikacji, a pełny kod jak zawsze na moim githubie.

Pole “make” jako obowiązkowe / Field “make” set as required

Wybierz rodzaj paliwa / Select type of fuel

Pojemność silnika tylko w formacie 0.0 / Engine only in 0.0 format

Przebieg w kilometrach tylko 6 cyfr / Kilometer range only on 6 digits

IoT – czy naprawdę wszystko potrzebuje internetu? / IoT- does it all really need internet?

Jednym z trendów, który zyskuje coraz większą popularność jest IoT – Internet of Things, czy używając polskiego odpowiednika – Internet Rzeczy. Dziś chcę się skoncentrować na jego marketingowej odsłonie, czyli na masowym dodawaniu modułów WiFi czy Bluetooth do wszelkiego rodzaju urządzeń AGD i RTV. Do naprawdę wszelkiego rodzaju urządzeń – Smart TV to przy tym pestka.

***

One of trends of growing popularity is IoT – Internet of Things. Today, I would like to focus on its marketing angle – mass equipping to any  types of devices with Wi-Fi or Bluetooth modules. Literally, any types of devices. Comparing to them – Smart TV is piece of cake.

CarDealer #13 – optymalizacja wyglądu aplikacji / enhancing the app’s view

Tydzień upłynął mi na ulepszaniu wyglądu aplikacji. Oto jak teraz wygląda CarDealer 🙂

The last few days I have spent adjusting views of my application  Here is how CarDealer looks now 🙂

This slideshow requires JavaScript.

CarDealer #12 – Pierwsze kroki z Bootstrap / First steps with Bootstrap

Co słychać w projekcie? W tym tygodniu zajęłam się trochę wyglądem aplikacji. Zdecydowałam się na użycie frameworku Bootstrap, aby uatrakcyjnić wygląd moich widoków JSP. Do tej pory były one zdefiniowane przy użyciu HTMLa i tagów JSTL. Wczoraj udało mi się skonfigurować mój pierwszy widok przy użyciu Bootstrapa.

What’s new in the project? This week I’ve taken care of the app’s appearance a bit. I’ve decided to use Bootstrap framework for enhancing my JSP views. They were defined using HTML and JSTL tags so far. Yesterday, I have managed to configure my first view using Bootstrap.

Widok listy samochodów przed Bootstrap / Car List view before Bootstrap

 

I po kilku zmianach / And after a few changes

Oczywiście jest to dopiero początek – zamierzam jeszcze popracować zarówno nad widokiem listy samochodów widocznym powyżej jak i nad pozostałymi widoki aplikacji 😉 Chcę uzyskać w miarę spójny wygląd wszystkich tabel i formularzy wykorzystując szablony i komponenty oferowane przez Bootstrap.

Obviously, that’s only a start – I am going to work some more on the car list view shown above as well as on the rest of the views 😉 I would like to have similar appearance of all tables and forms using templates and components offered by Bootstrap.

CarDealer #11 – Spring Security

Dziś zaprezentuję efekt wprowadzenia do mojego projektu elementów Spring Security. Co konkretnie zmieniłam w CarDealer?

• Aplikacja jest dostępna tylko dla zalogowanych użytkowników (po uruchomieniu następuje przekierowanie do strony logowania)
• Możliwość zalogowania się ma użytkownik “dealer” i “admin” (każda inna próba logowania zostaje odrzucona)
• Użytkownik “dealer” może przeglądać listę samochodów oraz może dodawać nowe samochody do systemu
• Użytkownik “admin” ma uprawnienia do wszystkich funkcji, czyli może przeglądać listę samochodów, dodawać nowe oraz ponadto edytować i usuwać samochody z systemu

Poniżej screeny aplikacji dla przypadku logowania się jako użytkownik dealer i próby usunięcia samochodu.

***

Today I would like to show you the result of adding some Spring Security elements to my project. What have I changed in CarDealer?

• App is now available only for logged users (you are redirected to login page after launching the app)
• You can log only as user  “dealer” and “admin” (any other attempt will be rejected)
• User “dealer” can view list of cars and can add new cars to the system
• User “admin” has rights to all functions, so he can view list of cars, add new ones and what is more, edit and delete a car

Below you’ll find screenshots for the following use case: login to system as dealer user and attempting to delete a car.