The simplest way to set up your first project for Spring web app

Hi!

Have you ever felt frustrated when trying to configure your first Spring project? You want to start developing web apps with Spring MVC but managing all Maven depencies is slowing you down? Not to mention that you’ll soon need a server to get your app running..

I have also spent some long hours, struggling to set up my Spring project workspace along with Tomcat server. And then, during the traing I have attended, I have learnt about SpringBoot and Spring Initializr that makes the whole process easier.

Below you’ll find step by step guide showing how to create your first SpringBoot project using Spring Initializr.

  1. Go to https://start.spring.io/1. Go to Spring Initializr
  2. Choose Maven or Gradle Project
  3. Choose language
  4. Type your application name
  5. Search for needed dependencies (or click on Switch to the full version to see all the details)
  6. When you’re ready, click on generate project2. Generate your projectAs you can see I’ve chosen Web dependency as we want to start a web app. According to Spring Initializr choosing Web dependency gives us “Full-stack web development with Tomcat and Spring MVC”
  7. Now unpack zip folder in your workspace
  8. Import project to your workspace in Eclipse (File -> Import, then choose Existing Maven project)3. Import Existing Maven Project
  9. Browse directory for your project4. Browse for your project
  10. Check Add project to working set and click on Finish5. Finish importing
  11. Wait till workspace is built… and your project is now ready!6. Imported project is ready to useAlong with POM file:7. Pom is generated

I hope Spring Initializr will also save some of your time in future 🙂

 

Advertisements

Daj się poznać 2017 – podsumowanie konkursu / Get Noticed 2017 – contest summary

For English please scroll down

Cześć!

11 tygodni temu wystartowałam z realizacją własnego projektu programistycznego oraz założyłam bloga na konkurs “Daj się poznać 2017”. Jako, że maj powoli dobiega końca przyszedł czas na małe podsumowanie moich zmagań.

Projekt CarDealer

Pozwolę sobie krótko przypomnieć, dlaczego zdecydowałam się na taki, a nie inny projekt. Otóż moim głównym celem było zrealizowanie prostej, ale kompletnej aplikacji webowej łączącej się bazą danych i sterowalnej z poziomu przeglądarki internetowej. Nie liczył się oryginalny pomysł ani rozbudowana funkcjonalność – liczyło się praktyczne wykorzystanie we własnym projekcie technologii, w których chcę się rozwijać (więcej o założeniach projektu znajdziesz w CarDealer #1). Z przyjemnością mogę powiedzieć, że w ramach czasu konkursowego udało mi się ten cel zrealizować 🙂

Etapy realizacji projektu

  1.  Założenie tabeli cars w bazie danych i implementacja klasy Car (CarDealer#2)
  2. Połączenie się z bazą danych przy użyciu JDBC (CarDealer#3)
  3. Import danych z pliku CSV do kolekcji obiektów (CarDealer#4)  i ich zapis do bazy danych (CarDealer #5) – na razie niedostępne z poziomu przeglądarki
  4. Rozszerzenie tabeli i klasy o nowe atrybuty samochodów (CarDealer #6)
  5. Dodanie kontrolerów i widoków (CarDealer #7)
  6. Uruchomienie aplikacji webowej – konfiguracja Spring MVC i JDBC Template  (CarDealer #8CarDealer #9)
  7. Udostępnienie metod CRUD z poziomu przeglądarki (CarDealer #10)
  8. Logowanie dla użytkowników admin i dealer, czyli Spring Security (CarDealer #11)
  9. Ulepszanie wyglądu aplikacji (CarDealer #12CarDealer #13)
  10. Dodanie walidacji formularzy (CarDealer #14)

Pełny kod znajdziecie na moim GitHubie.

Technologie i narzędzia użyte projekcie

Baza danych: PostgreSQL

IDE:  Eclipse Luna

Serwer: Tomcat 8.0

Backend: Java, Maven, Spring (MVC, JDBC, Security)

Frontend: HTML, CSS, Bootstrap

Repozytorium: GIT, GitHub

Podsumowanie projektu

Jako że moje wcześniejsze doświadczenia z programowaniem opierały się głównie na działaniach w części serwerowej, cieszę się, że w ramach konkursu zrealizowałam kompletną aplikację we wzorcu MVC wykorzystując framework Spring. Praca nad projektem pozwoliła mi postawić pierwsze kroki w konfiguracji XML dla Spring MVC i Spring Security. Jestem też zadowolona, że udało mi się wzbogacić proste widoki HTML dodatkowo o szablon CSS i framework Bootstrap. Moim minimalnym wymaganiem była możliwość manipulowania danymi z bazy danych z poziomu przeglądarki – ale cieszy mnie, że główny widok aplikacji nie przypomina już tabelki z Excela 😉

Szkoda, że nie udało mi się w czasie konkursowym udostępnić funkcji importu z pliku CSV w widoku aplikacji – nadrobię to w kolejnych tygodniach łącznie z funkcją eksportu do pliku. Przydałby się też moduł rejestracji nowych użytkowników – w tej wersji aplikacji możemy się zalogować tylko jako dealer lub admin. Nie powstał, wspominany w celach projektu, moduł do wyszukiwania samochodów wedle zadanych kryteriów – to również wrzucam na listę do zrealizowania w kolejnych etapach.

Blog

W czasie konkursu na blogu powstały (łącznie z tym) 23 wpisy. Każdy wpis opublikowany został w dwóch wersjach językowych: polskiej i angielskiej. Poniżej lista postów niezwiązanych z projektem:

Wpisy na tematy IT:

Wpisy skierowane dla osób rozpoczynających swoją przygodę z Javą i Eclipsem:

Największą frajdę sprawiło mi tworzenie postów / mini-artykułów o tematyce IT, mimo że wymagało to poświęcenia pewnej ilości czasu na zapoznanie się z danym tematem. Mam nadzieję, że poruszane tematy choć odrobinę Was zaciekawiły 🙂

Co dalej?

Chcę nadal rozwijać aplikację CarDealer. Po 11 tygodniach konkursu mam przygotowaną bazę do dalszej pracy. Chcę teraz skoncentrować się na części serwerowej – przez ostatnie tygodnie dostosowywania widoków nauczyłam się sporo nowych rzeczy, ale jednak oddaliłam się trochę od Javy. Mam nadzieję, że teraz, gdy mam gotową bazę, będzie mi łatwiej dalej regularnie pracować nad aplikacją 🙂

Jeśli chodzi o bloga, to definitywnie nie znika on z sieci wraz z zakończeniem konkursu. Zapiski programistki będą czekać na Twoje odwiedziny z nowym postem publikowanym raz na tydzień! 🙂

***

Hi!

11 weeks ago I have started implementation of my own programming project and this blog for the “Get Noticed 2017” contest. May is nearly over, so i’s time for some summary of my work.

The CarDealer project

Let me remind you why I have decided for this type of project. My main goal has been to implement a simple, but complete web application connected to data base and manipulated from web browser level. The idea or complex functionality was less important. What counted more for me, was practical use of technologies (in which I want to develop) in my own project. More about project aims you’ll find in CarDealer #1. I have now the pleasure to say: I have managed to achieve my goal in the contest’s time 🙂

Project’s steps

  1.  Creating cars table in data base and Car class implementation (CarDealer#2)
  2. Connecting to DB using JDBC (CarDealer#3)
  3. Import data from CSV file to objects collection (CarDealer#4)  and saving them in DB (CarDealer #5) – not available from browser level yet
  4. Extending table and class with new car attributes (CarDealer #6)
  5. Adding controllers and views (CarDealer #7)
  6. Launching web application – configurating Spring MVC and JDBC Template  (CarDealer #8CarDealer #9)
  7. CRUD methods avaliable from browser (CarDealer #10)
  8. Login module for users:admin and dealer with Spring Security (CarDealer #11)
  9. Enhancing app view (CarDealer #12CarDealer #13)
  10. Form validation (CarDealer #14)

You will find the whole code on my GitHub.

Technologies and tools used in project

DB: PostgreSQL

IDE:  Eclipse Luna

Server: Tomcat 8.0

Backend: Java, Maven, Spring (MVC, JDBC, Security)

Frontend: HTML, CSS, Bootstrap

Repository: GIT, GitHub

Project’s summary

As my previous experience with programming were based mainly on the server-side, I am glad that during contest I have implemented the complete web app in MVC using Spring framework. Working on project has let me take the first steps in XML configuration for Spring MVC and Spring Security. I am also glad, that I have managed to enhance simple HTML views with some CSS and Bootstrap framework. My mininal requirement was to enable manipulating data from DB from the browser level – but I am thrilled that main app view no longer looks like Excel table 😉

It’s a pity that in the contest time I haven’t managed to add option for importing data from CSV file to the app view – I am going to make it up in the following weeks, as well as implementing the option for exporting data to CSV file. It would be nice to have a module for registering new users – in this app version you can only sign in as a dealer or an admin. There is no, though mentioned in project’s aims, module for searching for cars with given criteria – this also goes for my todo-list.

Blog

In the contest’s time I have published 23 posts (including this one). Every post was published in two languages: polish and english. Below you can see list of posts, that didn’t concern CarDealer project:

Posts about IT:

Posts with tips for beginners in Java and Eclipse:

Creating posts / mini-articles concerning IT was the biggest fun for me, although it required some time spent on research of given subject. I hope, you have found them a little bit interesting 🙂

What’s next?

I want to develop further my CarDealer application. After 11 weeks of contest I have got the prepared base for further work. I want to focus on the server-side now – during previous weeks while adjusting views I have learnt a lot of new stuff, but I have left Java behind. I hope, now, when the base is ready, it will be easier for me to work regularly on the app 🙂

If it comes for the blog, it would definately not disappear from the web when the contest is over. The Programmer’s notes (Zapiski programistki) would wait for your visit with fresh post published once a week! 🙂

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.

walidacja required
Pole “make” jako obowiązkowe / Field “make” set as required
edit select
Wybierz rodzaj paliwa / Select type of fuel
walidacja engine
Pojemność silnika tylko w formacie 0.0 / Engine only in 0.0 format
walidacja kilometer
Przebieg w kilometrach tylko 6 cyfr / Kilometer range only on 6 digits

Continue reading “CarDealer #14 – walidacja formularzy / form validation”

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.

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

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.

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

 

CarList_after
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.

Continue reading “CarDealer #11 – Spring Security”