Challenge – Part 2
Goal: Implement form submission.
Task 1
Create a POJO Item
class. An Item
contains the following fields:
private String category; private String name; private Double price; private Double discount; private Date date;
Add an empty constructor, public getters, and public setters.
Task 2
Create an Item
object and bind it to the form.
Task 3
Bind every form element to a field in the object.
<form method="post" th:object="${item}"> <select class="select" th:field="*{category}"> <option style="color:blue" value="">Choose Category</option> <option th:each="category: ${categories}" th:text="${category}" th:value="${category}"> Placeholder </option> </select> <!-- etc... --> </form>
Task 4
Upon submission, your form must make a POST request on /submitItem
.
Task 5
Create a handler method that intercepts the POST request.
@PostMapping("/submitItem")
public String handleSubmit(Item item) {
}
Create an ArrayList
that can store Item
objects.
private List<Item> items = new ArrayList<Item>();
- From your handler method, add a new
Item
object to the datastore. redirect
the client to theinventory
view.
Task 6
Navigate to localhost:8080
, and try to submit the form:
The time format of your Date
field is different than the provided yyyy-MM-dd
String
from your form.
Your Date
field must follow the same DateTimeFormat
pattern.
@DateTimeFormat(pattern = "yyyy-MM-dd") private Date date;
Task 7
I encourage you to watch the solution provided on Udemy. It goes through the full thought process behind solving this bug.