Workbook 3.1
Using the Spring Initializr, create a new project with the following dependencies:
spring-boot-starter-webspring-boot-devtoolsspring-boot-starter-thymeleafspring-boot-starter-validation
Feel free to assign your own Group Id and Artifact Id.
Task 1
Create a Controller class with two methods:
@GetMapping("/")
public String getForm(Model model) {
return "sign-up";
}
@GetMapping("/result")
public String getResult() {
return "result";
}
Task 2
Inside spring-boot-bootcamp-resources > 3.field-validation > workbook-3.1 > starter, grab the font file and the stylesheet.
- Under your
staticfolder, create afontsfolder and place the font file inside. - Place the stylesheet under your
staticfolder.
Task 3
Under the templates folder:
- Create a
sign-up.htmlfile. - Title the document
Sign Up, and link the stylesheet.
<head>
<title>Sign Up</title>
<link rel="stylesheet" th:href="@{/form-stylesheet.css}">
</head>- Create a
result.htmlfile. - Title the document
Result, and give it one header that displays: Success.
<head>
<title>Result</title>
</head>
<body>
<h1>Success</h1>
</body>Task 4
Inside the sign-up page, create a div and link it to the CSS "container" class.
<div class="container"> </div>
Task 5
Inside the div container, add an <h2> header that displays Javagram. The CSS is already configured to use the billabong font.
Task 6
Under the header, add a form with:
method="post"- input of
typetextandplaceholderFirst Name. - input of
typetextandplaceholderLast Name. - input of
typetextandplaceholderUsername. - input of
typetextandplaceholderEmail. - paragraph with
style="font-weight: bold"formatting that displaysDate of Birth. - input of
typedate. - produce two line breaks using
<br><br>. - input of
typesubmitandvalueSubmit.
Input
<form method="post"> <input type="text" placeholder="First Name"> <input type="text" placeholder="Last Name"> <input type="text" placeholder="Username"> <input type="text" placeholder="Email"> <p style="font-weight: bold">Date of Birth</p> <input type="date"> <br><br> <input type="submit" value="Submit"> </form>
Output
Task 7
Create a POJO class for User objects with fields that match the form elements.
public class User {
private String firstName;
private String lastName;
private String userName;
private String email;
private Date dateOfBirth;
//Generate a complete constructor.
//Generate an empty constructor.
//Generate getters and setters.
}
Task 8
Bind the form to an empty User object.
<form method="post" th:object="${user}">
</form>
Each input must bind to a field from the object.
<form method="post" th:object="${user}" th:action="@{/submitItem}"> <input type="text" placeholder="First Name" th:field="*{firstName}"> <input type="text" placeholder="Last Name" th:field="*{lastName}"> <input type="text" placeholder="Username" th:field="*{userName}"> <input type="text" placeholder="Email" th:field="*{email}"> <p style="font-weight: bold">Date of Birth</p> <input type="date" th:field="*{dateOfBirth}"> <br><br> <input type="submit" value="Submit"> </form>
Task 9
Your form must submit POST requests on /submitItem.
Task 10
Create a handler method named handleSubmit() that receives the POST request and re-directs the client to the result view.
Task 11
Using the annotations table from the cheat sheet, ensure that:
- First and last names are not blank with at least two characters.
//Example: @NotBlank(message = "First name cannot be blank") @Size(min = 2, message = "First name is too short")
- Username is not blank and is at least 7 characters.
- Email is valid (see cheat sheet).
- The date is in the past (see cheat sheet).
If the user violates any of these constraints, return the sign-up page, and use the following template to display errors.
<p style="color:red" th:errors="*{field of selected object}"></p>
Test your application by submitting invalid data.