We will create a Recipe Organizer with Thymeleaf and Spring Boot in
this tutorial. This is a straightforward Spring MVC Web application. It will
assist us in organizing our favorite recipes.
POM.XML
First and foremost, we require a Spring Boot application. Here is the Spring
Boot application's pom.xml file:
Spring Boot version 2.7.9 was used in this example. The Spring
Framework version for this version of Spring Boot is 5.3.25. This
application contains the spring-boot-starter-data-jpa,
spring-boot-starter-web, spring-boot-starter-thymeleaf, and
mysql-connector-j dependencies.
application.properties
We have configured the data source and file upload settings here.
Entities
For this application, two entities are required: RecipeImage for recipe
images and Recipe for recipe details.
The RecipeImage entity's code snippets are as follows:
Using this entity, we will create a table in the database called
RECIPE_IMAGE to store the image name and path.
The Recipe entity's code snippets are now as follows:
This will create a table in the database called RECIPE_DETAILS. We
store recipe information in the database table.
Repositories
Create a repository package and include the
IRecipeRepository interface in it. Include this code snippet:
Service to List Recipes
Make a package called service. Create the RecipeService class in
this package and include the following code snippet:
We made this class a bean by annotating it with @Service and autowiring
IRecipeRepository with constructor injection. The
findAll() function will return all recipes in the database.
Controller to List Recipes
Create a package called controller, and then create the
RecipeController class:
This class has been annotated with the @Controller annotation to create
a Spring bean and autowired RecipeService using constructor injection.
We create a recipe list in getRecipeList() to obtain the image name and
URL. This image URL will be placed on the view page so it enables you to
preview the recipe image. Then, using the addObject() method, we insert
our recipe list object into the model with the attribute name recipes.
Because we specified recipe/recipelist as the view name in the
ModelAndView object, we must create recipelist.html in the
recipe directory.
Recipe List View Page
To list the recipes, we must now create a view page. To do so, create a
recipelist.html HTML page in the
/resources/templates/recipe directory:
This page was created with Bootstrap. In this case, we used the model
attribute (recipes) to pair the data to the HTML.
We add th:href="@/recipe/new" in an anchor tag on this page to create a
new recipe. As a result, we must implement a get method for /new in the
controller. The @ symbol is used here to refer to our application's
context path.
Controller to Create New Recipe
In the RecipeController class, create newRecipe() and map it to
/new with the @GetMapping annotation:
We created a ModelAndView object with the view name
recipe/newrecipe in the newRecipe() method. We passed a
Recipe object as an attribute to the ModelAndView object so that we
could bind it to the HTML form. For the view page, we must now create
newrecipe.html in the recipe directory.
New Recipe View Page
Create a newrecipe.html HTML page in the
/resources/templates/recipe directory:
Using th:field="*..." we bind the attribute properties to the required
HTML controls. This form data will be posted to /recipe/save and is
mentioned in th:action="@...".
Service to Save New Recipe
We'll write some logic in the service class to save the recipe details. So, in
the RecipeService class, add the saveRecipe() method:
In the saveRecipe() method, we first save the image in a local
directory before saving the recipe details in the database alongside the image
details.
Controller to Save New Recipe
Now, in the RestController class, add the save() method and map
it to /save using @PostMapping:
We simply use our service class's method to save the recipe details and
redirect the user to the recipe list page.
Service to Fetch Recipe Details
Now we'll write some logic to retrieve the details of a specific recipe in the
service class. In the RecipeService class, add the
findById() method:
Here, we retrieve the recipe details from the database using their
ID and then return them.
Controller to Fetch Recipe Details
In the RecipeController class, add the getRecipe() method and
map it to /view/id using the @GetMapping annotation:
In the getRecipe() method, we first use findById() to get the
recipe details, then we create the image URL and assign it to the recipe
details.
We need to create viewrecipe.html in the recipe directory
because we passed recipe/viewrecipe as our view name in the
ModelAndView object.
View Recipe Details Page
Now, in the /resources/templates/recipe directory, create an HTML page
called viewrecipe.html:
Using th:object="$recipe" we link the attribute object to the HTML
form.
Recipe List Page
New Recipe Page
View Recipe Page
You can download the source code from
here.
Happy coding!!! 😊
No comments:
Post a Comment