TiiL Tutorials
@TinhocTiiL

Bài 8: Springboot- Thymeleaf- Tạo form thêm mới thành viên

Hướng dẫn xây dựng form trong Thymeleaf  trên view và xử lý submit form trong Controller

1. Xậy dựng lớp SinhVien (là dạng DTO: Data Transfer Object, dành cho việc trao đổi View-Controller

Tham khảo các bài https://tinhoc123.edu.vn/lap-trinh/phat-trien-webapp-voi-java/springboot-truyen-danh-sach-doi-tuong-sang-view-va-trinh-bay/1060/

2. Xây dựng Controller

 

@Controller
public class SinhVienController {
	@GetMapping("/themMoiSV")
	public String showForm(Model model) {
                SinhVien sinhvienNull = new SinhVien();
                model.addAttribute("svDTO", sinhvienNull);
                return "themSinhVien_form";  //view: themSinhVien_form.html
          }
	@PostMapping("/themMoiSV")
	public String submitForm(@ModelAttribute("svDTO") SinhVien sv) {
	    return "themSinhVien_OK"; // view: themSinhVien_OK.html
	}
}

3. Xây dựng các View

themSinhVien_form.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Thêm mới SV</title>
</head>
<body>
<div align="center">
    <h1>Thêm mới sinh viên</h1>
    <form action="#" th:action="@{/themMoiSV}" method="post" th:object="${svDTO}">
        <label>Mã số SV:</label>
        <input type="text" th:field="*{maSoSV}" /><br/>
 
        <label>Họ và Tên:</label>
        <input type="text" th:field="*{hoVaTen}" /><br/>
         <button type="submit">Thực hiện thêm</button>    
    </form>
</div>
</body>
</html>

themSinhVien_OK.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Thêm mới Sinh viên thành công</title>
<style type="text/css">
    span {
        display: inline-block;
        width: 200px;
        text-align: left;
    }
</style>
</head>
<body>
<div align="center">
    <h2>Thêm Sinh viên Thành công!</h2>
    <span>Mã Số SV:</span><span th:text="${svDTO.maSoSV}"></span><br/>
    <span>Họ Và Tên:</span><span th:text="${svDTO.hoVaTen}"></span><br/>
</div>
</body>
</html>

Full mã nguồn: https://github.com/maicuongtho/SOT383-Web2CLC/tree/main/FormSubmit_Thymeleaf

Avatar
https://khoacntt.ntu.edu.vn/giang-vien/mai-cuong-tho

một GV Đại học. TiiL đã phụ trách một số môn học như: Lập trình Java, Phát triển web với Java, Lập trình thiết bị di động, Lập trình hệ thống nhúng và IoT.

Comments are closed.