Workbook 3.1
Using the Spring Initializr, create a new project with the following dependencies:
spring-boot-starter-web
spring-boot-devtools
spring-boot-starter-thymeleaf
spring-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
static
folder, create afonts
folder and place the font file inside. - Place the stylesheet under your
static
folder.
Task 3
Under the templates
folder:
- Create a
sign-up.html
file. - 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.html
file. - 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
type
text
andplaceholder
First Name
. - input of
type
text
andplaceholder
Last Name
. - input of
type
text
andplaceholder
Username
. - input of
type
text
andplaceholder
Email
. - paragraph with
style="font-weight: bold"
formatting that displaysDate of Birth
. - input of
type
date
. - produce two line breaks using
<br><br>
. - input of
type
submit
andvalue
Submit
.
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.