Spring Boot Bootcamp – Workbooks and Challenges
)}

Workbook 3.1

Using the Spring Initializr, create a new project with the following dependencies:

  1. spring-boot-starter-web
  2. spring-boot-devtools
  3. spring-boot-starter-thymeleaf
  4. 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.

Screen Shot 2022-08-15 at 8.56.19 PM.png

  • Under your static folder, create a fonts folder and place the font file inside.
  • Place the stylesheet under your static folder.

Screen Shot 2022-08-15 at 8.56.58 PM.png

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.

Screen Shot 2022-05-21 at 4.35.00 PM.png

Task 6

Under the header, add a form with:

  • method="post"
  • input of type text and placeholder First Name.
  • input of type text and placeholder Last Name.
  • input of type text and placeholder Username.
  • input of type text and placeholder Email.
  • paragraph with style="font-weight: bold" formatting that displays Date of Birth.
  • input of type date.
  • produce two line breaks using <br><br>.
  • input of type submit and value 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

Screen Shot 2022-05-21 at 4.48.58 PM.png

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.

Screen Shot 2022-05-21 at 7.03.09 PM.png

Good Luck!

Feedback Summary
5.0
3 students
5

100%
4

0%
3

0%
2

0%
1

0%
Written Reviews
There are no written reviews yet.