Step:1
File -> String Starter Project -> Project name Random_Quote_Generator ->Type Maven -> Packaging Jar-> Next
Step:2
Add dependencies:-
- Spring Web
- Spring Dev Tools
- Thymeleaf then finish.
- If unfortunately you not add missed some dependencies that time your project pom.xml (Right click)-spring -> ADD startes -> next -> you can add missed dependencies -> Next -> select pom.xml -> finish,
Step:3
create class Reg_Controller,create method,display,@GetMapping is used in a controller to handle HTTP GET requests.Model is an interface used in controller classes to store and pass objects (like List, String, .. etc)(data) to (Thymeleaf template)HTML view pages."
Now we add multiple list of object (countries, gender, hobbies) into Model using object(model.addAttribute) and returned "home_page".List.of is create a immutable/constant list(fixed -you can not add/remove elements later ,if you throw any error you can modify later)
package com.example.demo;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class Reg_Controller {
@GetMapping("home")
public String display(Model model)
{
model.addAttribute("Contreies",List.of("India","Pakistan","Srilanka"));
model.addAttribute("Gender",List.of("Male","Female","Others"));
model.addAttribute("Hobbies",List.of("Playing","Singing","Dancing"));
return "home_page";
}
}
step:4
- Now create home_page.html under the /src/main/resource/template/home_page.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Registration</title>
<style>
body {
background-color: #e6f0ff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form-container {
background-color: white;
padding: 30px;
border-radius: 12px;
border: 2px solid skyblue;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
width: 420px;
}
h2 {
text-align: center;
color: #2c3e50;
}
label {
display: block;
margin-top: 15px;
font-weight: bold;
text-align: left;
}
input[type="text"],
input[type="email"],
input[type="date"],
select {
width: 100%;
padding: 10px;
border-radius: 6px;
border: 1px solid #ccc;
margin-top: 5px;
}
.radio-group,
.checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
button {
margin-top: 20px;
width: 100%;
padding: 12px;
background-color: skyblue;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
button:hover {
background-color: #5aa3e4;
}
</style>
</head>
<body>
<div class="form-container">
<form action="/register" method="post">
<h2>Registration Form</h2>
<label>Name:</label>
<input type="text" name="username" required>
<label>Email:</label>
<input type="email" name="email" required>
<label>Gender:</label>
<div class="radio-group">
<th:block th:each="gender : ${Genders}">
<label>
<input type="radio" name="gender" th:value="${gender}">
<span th:text="${gender}"></span>
</label>
</th:block>
</div>
<label>Country:</label>
<select name="country">
<option value="">-- Select --</option>
<option th:each="country : ${Contreies}" th:value="${country}" th:text="${country}"></option>
</select>
<label>Hobbies:</label>
<div class="checkbox-group">
<th:block th:each="hobby : ${Hobbies}">
<label>
<input type="checkbox" name="hobbies" th:value="${hobby}">
<span th:text="${hobby}"></span>
</label>
</th:block>
</div>
<label>Date of Birth:</label>
<input type="date" name="dob" required>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
Step:5
- Now past the url In browser http://localhost:8080/home , fill the contents the register form ,you error came , because you wrote this html file ,you get the value from server using @GetMapping("/home") ,but when register press button it trigger action to find post, you controller class not available @PostMapping and other related method so we will create @PostMapping and and other related method. by simple @GetMapping("/home"). to get the vale from server , @PostMapping("/register") Post mapping post value to server .
@PostMapping("/register")
public String get_details()
{
return "registered";
}
create registerd.html in src/main/resource/template.
inside of html just type now only:
Registration Successful.
Step:6
http://localhost:8080/home ,fill the Form , you see
Registration Successful.
step:7
- @RequestParam is used to get values from and HTML form(frontend)home_page.html in to your Spring Boot controller(backedn), then now that values move to another HTML form(frontend) is registerd.html
How it works Like:
1.you fill the form in web pages.
2.when press register that data came controller method get_details(....) using POST(@PostMapping("/register"))
3.Spring uses @RequesParm to grab values form the HTML input fields by their name attributes from html file, and store them in to java variable(parameter in your method)
html
name attribute:-
<input type="text" name="username">
@PostMapping("/register")
public String get_details(
@RequestParam String username,
@RequestParam String gender,
@RequestParam List<String> hobbies, Model model)
{
model.addAttribute("uname", username);
model.addAttribute("gen", gender);
model.addAttribute("hobbies", hobbies);
return "registered";
}
registered.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Success</title>
<style>
body {
background-color: #d9f2ff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.success-box {
background-color: white;
border: 2px solid #7ac9f9;
border-radius: 12px;
padding: 30px;
width: 450px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
h1 {
color: #2b7bb9;
text-align: center;
margin-bottom: 20px;
}
h2 {
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
ul {
list-style-type: circle;
padding-left: 20px;
text-align: left;
}
</style>
</head>
<body>
<div class="success-box">
<h1> Registration Successful!</h1>
<h2>Name: <span th:text="${uname}"></span></h2>
<h2>Email: <span th:text="${email}"></span></h2>
<h2>Gender: <span th:text="${gen}"></span></h2>
<h2>Date of Birth: <span th:text="${dob}"></span></h2>
<h2>Hobbies:</h2>
<ul>
<li th:each="h : ${hobbies}" th:text="${h}"></li>
</ul>
</div>
</body>
</html>
class Reg_Controller
package com.example.demo;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class Reg_Controller {
@GetMapping("/home")
public String display(Model model)
{
model.addAttribute("Contreies",List.of("India","Pakistan","Srilanka"));
model.addAttribute("Genders",List.of("Male","Female","Others"));
model.addAttribute("Hobbies",List.of("Playing","Singing","Dancing"));
return "home_page";
}
@PostMapping("/register")
public String get_details(
@RequestParam String username,
@RequestParam String email,
@RequestParam String gender,
@RequestParam String dob,
@RequestParam List<String> hobbies, Model model)
{
model.addAttribute("uname", username);
model.addAttribute("email", email);
model.addAttribute("gen", gender);
model.addAttribute("dob", dob);
model.addAttribute("hobbies", hobbies);
return "registered";
}
}
Top comments (0)