How to create a Lion King bank application with Spring and Thymeleaf (Coding Bootcamp series)

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 structureSpring 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 customersNow, 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 customersNow 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 customerGreat, now we have our list of customers and we can raise their balances..But a bank needs new customers, right?. More details

Leave a Reply