How to Create a Lion King Bank Application With Spring and Thymeleaf (Coding Bootcamp Series)

After completing the Foundation part of the course at Green Fox Academy, we started the Orientation phase two weeks ago. Now, each class will follow a more specific path. As I was in the Java class in the Foundation, the Orientation will be about learning Spring.

So, these past two weeks, we learnt about backend basics as we were introduced to Spring framework, first on its own and then in connection with Thyemleaf, a template engine. Consequentially, these weeks also allowed us to revisit HTML and CSS — a nightmare for many but a pleasure for me.

In order to explain the topics that we covered these weeks, I will take one of the exercises we completed, where the goal was to create the Bank of Simba, a Lion King based bank account application that would display information about the customers, allow to update the balance and add new accounts. The final result will look like this:

Step 1: setting up the structure

Spring uses the MVC architecture (Model-View-Controller), that allows to separate the different aspects of the application, like so:

Model: encapsulates the application data;

View: renders the model data and generates HTML output that the client’s browser can interpret;

Controller: responsible for processing user requests and build a model to pass to the view for rendering;

With this in mind, the first step to create our Bank of Simba application is to create a Controller, that will list the different endpoints of our application. For example:

The @GetMapping(“/accounts”) is our first endpoint (put very simply, what we have to write in our browser to get this View). And when we return “accounts”, we are displaying an HTML document with that name.

Step 2: displaying information about existing customers

Now, that HTML document is written using Thyemeleaf. We will create a table to display the information about our customers and we will fill it using the “for: each” loop, like so:

Notice that, to get to this point, where we reference “name”, “animalType” and so on, we obviously need to define that first. For that, we need to have a BankAccount class with the listed fields and then instantiate objects of that class and store them in a List.

And in order to make the connection between the HTML and our class, we need to add this in our Controller, using the Model, like so:

This means that when we reference “accounts” in our Thyemleaf document, we are referencing the “accounts” List of BankAccounts.

Step 3: raising balance on existing customers

Now that we have our list of customers, we want to be able to raise their balances. The exercise had the specification that, if the animal was a King, the balance should be raised by 100$ and, if not, by 10$.

By this point, we need some user input. Whose balance will we raise? Let’s ask the user with a Form, like so:

This form will send us to the “/raisebalance” end point and it will send an HTTP Post Request with the information provided by the user. Then, on the Controller, we check if the customer is a King, in order to know the amount to raise.

Notice the @RequestParam annotation here, that will… well, request a param(eter) from the user… with the name “q” — the same name we gave the input in our Form — without this, the connection between the two points is not made and the @RequestParam will return null. (I struggled with it for a while until I realised it was missing. Not fun…).

Step 4: add a new customer

Great, now we have our list of customers and we can raise their balances. But a bank needs new customers, right? Let’s create a way to add them!

As you might have noticed, we added a button to do that in our main page. This will direct the user to the “/accounts/add” endpoint, where we return a new HTML page. In this page, we have a Form with the required fields to create a new account (name, balance, and so on).

And for this page we create a new Controller, where we pass the @ModelAttribute annotation as an attribute. This is a Spring annotation that binds the method return value to a named model attribute and exposes it to a web view.

Ok, we got the information from the user about the new account. But we still need to pass on this information to our application and we will do that with a @PostRequest for the same endpoint, where we will return not the original HTML document like before but we will redirect (in order to keep the information the user just entered). Something like this:

And there it is, I added myself as a customer. I am not a King and my balance is quite low, but at least I am a “Good Guy”!

I hope this helped some of you. If you have questions about any of the steps, let me know and I will be happy to answer.

Next week, we will continue our learning journey with Persistence and Deployment. And then… some well-deserved Christmas holiday!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close