DEV Community

Neelakandan R
Neelakandan R

Posted on

background color change and product display using Spring boot

1) File --> New --> Spring Starter Project
2) Name --> Calculator
3) Select Maven as Type
4) Click Next
5) Add Dependencies: DevTools, Web, Thymeleaf
6) Click Next, Finish
7) Go to src/main/java --> Create a package called com.example.demo.controller
8) Now, right click the newly created package.

package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; @Controller public class color_controller { @GetMapping("/") public String change_color(@RequestParam(defaultValue = "blue") String colors, Model model) { model.addAttribute("selectedColor", colors); return "color"; } } 
Enter fullscreen mode Exit fullscreen mode
<!DOCTYPE html> <html xmlns:th="http://www.thymelear.org"> <head> <title> Color Picker </title> </head> <body th:style="'background-color' +${selectedcolor}"> <form action="/" method="get"> <input type="color" th:value='${selectedColor}' name="colors"> <input type="submit" value="Change Color"> </form> </body> </html> 
Enter fullscreen mode Exit fullscreen mode

Output:

Image description

1) Output: File --> New --> Spring Starter Project
2) Name --> Calculator
3) Select Maven as Type
4) Click Next
5) Add Dependencies: DevTools, Web, Thymeleaf
6) Click Next, Finish
7) Go to src/main/java --> Create a package called com.example.demo.controller
8) Now, right click the newly created package.

Model-pojo class

package com.example.demo.model; public class Product { public Product(String name, String url, String description, int price) { super(); this.name = name; this.url = url; this.description = description; this.price = price; } private String name; private String url; private String description; private int price; @Override public String toString() { return "Product [name=" + name + ", url=" + url + ", description=" + description + ", price=" + price + "]"; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } } 
Enter fullscreen mode Exit fullscreen mode

controller

package com.example.demo.controller; import java.util.ArrayList; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import com.example.demo.model.Product; @Controller public class Product_Controller { @GetMapping("/products") public String display_Products(Model model) { Product p1 = new Product("Dell", "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.juKuZePKbn6Ou1gCYbTzywHaFM%26pid%3DApi&f=1&ipt=38fa87998ad11fc26c2fc7c1f04270371fbc446b9a92a6b17779c91667dcf302&ipo=images", "Good Laptop", 22000); Product p2 = new Product("Lenovo", "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.juKuZePKbn6Ou1gCYbTzywHaFM%26pid%3DApi&f=1&ipt=38fa87998ad11fc26c2fc7c1f04270371fbc446b9a92a6b17779c91667dcf302&ipo=images", "Good Laptop", 22000); Product p3 = new Product("HP", "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.juKuZePKbn6Ou1gCYbTzywHaFM%26pid%3DApi&f=1&ipt=38fa87998ad11fc26c2fc7c1f04270371fbc446b9a92a6b17779c91667dcf302&ipo=images", "Good Laptop", 22000); Product p4 = new Product("Asus", "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.juKuZePKbn6Ou1gCYbTzywHaFM%26pid%3DApi&f=1&ipt=38fa87998ad11fc26c2fc7c1f04270371fbc446b9a92a6b17779c91667dcf302&ipo=images", "Good Laptop", 22000); List<Product> pList =new ArrayList<Product>(); pList.add(p1); pList.add(p2); pList.add(p3); pList.add(p4); model.addAttribute("products",pList); return "product_page"; } } 
Enter fullscreen mode Exit fullscreen mode

View

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title> Product Page</title> <style> div{ display:inline-block; } </style> </head> <body> <div th:each="product:${products}"> <img th:src="${product.url}"></img> <p th:text="${product.name}"></p> <p th:text="${product.description}"></p> <p th:text="${product.price}"></p> </div> </body> </html> 
Enter fullscreen mode Exit fullscreen mode

Output:

Image description

Top comments (0)