Showing Products in Admin Product List Page
Start course
2h 34m

In this course, we will learn the concepts of microservice and spring framework with a focus on Spring Boot.

Learning Objectives

  • Understanding Spring Boot

Intended Audience

  • Beginner Java developers
  • Java developers interested in learning how to Build and Deploy RESTful Web Services
  • Java Developers who want to develop web applications using the Spring framework
  • Java Developers who want to develop web applications with microservices
  • Java Developers who wish to develop Spring Boot Microservices with Spring Cloud


  • Basic Java knowledge

Hello, dear friends. In this video, we will continue our project by showing products on the product list page. Let's begin. In the previous video, we have already defined our product list page but we only added a general list page. In our project, we have to show products for employee and admin on different pages. Add Thymeleaf libraries. Now, add layout for Admin. Now, change the content fragment. Done. We will add a table, but first I want to add a method in the controller to access this page. Let's go to the AdminController. In the previous video, we added a Save() method to product service. Now, we need another method to get all methods. Open ProductService. As you can see, we have a getAll() method. Let's go to the ProductService implementation. Now, in this, we have to override the getAllProducts() method.

In this method only, we will call the findAll() method of the productRepository. That'll be enough for us. Now, go back to the AdminController. Now, in the list method, we can getAllProducts, List <Product> products. Now, we will call the getAllProducts() method of productservice. Let's add this to the model with the addAttribute() method. Return admin product list. All right, that's enough. Let's add a table to our page. First open the AdminLTE template folder. Run Index page. Look in the menu, there's a DataTables item, select anyone. I like to use data tables but you can use anyone. Now, this DataTable with default features is good for us. Now, look URL we can find this page in the AdminLTE/pages/tables folder. The file name is data HTML. Open the tables folder. Now, open data with Notepad++. Now, we can add table to our page. I want to use an advanced table so let's search for DataTable with default features. As you can see, we will use this table. Only these classes are important for us, so I will only copy this part.

Now, paste it into the AdminProductList. First add a closed table tag. Define the ad tag to change the titles of columns. We need a tr tag. In tr tags, we will define our column titles with the tag. The first column will be Product Name, the second one is the Price, Stock. The last one is Process. In this column, we will define our updateProduct and deleteProduct operations. Now, we can define our table body with tbody. In the table, we need a loop. tr th each this will be our loop. product and products.

This products is our model that we sent from controller. Now, with td tags, we can set values, td th:text = "&{}", price, if you want, you can also add a dollar or a pound symbol. Stock. Now, the last columns are update and delete operations but we will do them in the following videos. For now, I will only add update and delete buttons with a tag. Update, delete, done. Now, this table is ready. The last part of this video is to adjust the menu action. Open AdminLayout. In the AdminProductList, we have to change the URL.

Okay, done. Let's try. Run the project. Login with admin. Now go to the List page. As you can see, we have two products. Let's add another one. Look, we have a new computer. Well, that's all I have for this video. In the following video, we will create an EmployeeProductList page. So, I will see you in the following video.


About the Author
Learning Paths

OAK Academy is made up of tech experts who have been in the sector for years and years and are deeply rooted in the tech world. They specialize in critical areas like cybersecurity, coding, IT, game development, app monetization, and mobile development.