✅ HTML Form
💡 HTML Form이란? 사용자가 정보를 입력, 선택할 때 사용하는 태그이다. 즉, 서버로 데이터를 전달 할 때 사용한다.
✅ HTML Form과 Controller 간의 요청, 응답
- send.html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Send</title>
</head>
<body>
<form action="/receive" method="post">
<label for="message">Message:
<input type="text" id="message" name="msg" />
</label>
<label for="email">E-mail:
<input type="text" id="email" name="email" />
</label>
<br><br>
<input type="submit">
</form>
</body>
</html>
- FormController 클래스 코드
@Controller
public class FormController {
@RequestMapping("/send")
public String getForm() {
return "send";
}
@RequestMapping("/receive")
public String receive(
@RequestParam("msg") String msg,
@RequestParam("email") String email
) {
System.out.println(msg);
System.out.println(email);
return "send";
}
}
Form과 Controller의 데이터 요청 응답 흐름
- Form 을 통해 msg와 email이라는 이름을 가진 text를 보내는 방법 (“/receive” url로 요청을 보낸다.)
- Form의 요청이 “/receive” url로 요청이 온다.
- @RequestParam과 요청 데이터 이름을 일치 시켜서 데이터를 받는다.
💡 특정 메소드에 대한 요청만 받도록 제한
@RequestMapping의 경우 클라이언트가 GET 방식으로 접근하던 POST방식으로 접근하던 모두 접근이 가능하다. 이럴 경우 명확하게 메소드의 역할이 구분되지 않는다는 단점이 있다.
따라서 아래의 방법에 따라 메소드의 역할을 명확히 구분하는 것이 좋다.
- 어노테이션 설정
@GetMapping(value = "/send") // GET 메소드만 받음.
public String getForm() {
return "send";
}
/send, /receive 만들기
- http 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Send</title>
</head>
<body>
<!--<http://localhost:8080/> 생략 가능 -->
<form action="/receive" method="post">
<label for="message">Message:
<input type="text" id="message" name="msg" />
</label>
<label for ="email">
<input type="text" id="email" name="email" />
</label>
<br><br>
<input type="submit">
</form>
</body>
</html>
- 컨트롤러 코드
package com.example.form;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
//컨트롤러
@Controller
public class FormController {
// send
@RequestMapping("/send")
public String getForm(){
return "send";
}
// receive
@RequestMapping("/receive")
public String receive(
@RequestParam("msg") //매개변수 파라미터
String msg,
@RequestParam("email")
String email
) {
System.out.println(msg);
System.out.println(email);
return "send";
}
}
@RequestParam
: form에 첨부된 input의 데이터 중 name =”message”인 데이터를 String message 매개변수에 할당해 달라는 어노테이션
✅ CRUD
💡 CRUD란 ? 일반적인 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능을 묶어서 말합니다.
기본적으로 어떤 웹 프레임워크를 접할 때, CRUD작업을 구현해보는 것을 목표로 접근하는 것이 좋습니다.
- Create : 생성 (insert)
- Read : 읽기 (selelct)
- Update : 갱신 (update)
- Delete : 삭제 (delete)
→ CRUD에 맞게 순서대로 만들어보자
1️⃣ CRUD - Create
- StudentDto 만들기
💡 Dto란? data transfer object의 약자 해당 객체가 통신을 통해 오가는 데이터를 나타내는 객체라는 걸 명시
- Create.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Student</title>
</head>
<body>
<h1>Create Student</h1>
<form action="/create">
<!-- 사용자가 제공할 데이터에 알맞은 input과 label을 만든다. -->
<label for="name-input">Name: <input id="name-input" name="name"></label>
<br>
<label for="email-input">Email: <input id="email-input" name="email"></label>
<br>
<!-- 데이터 제출 버튼 -->
<input type="submit">
</form>
</body>
</html>
- StudentController
package com.example.crud;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class StudentController {
//create-view getmapping
@GetMapping("/create-view")
public String createView() {
return "create";
}
}
- StudentDto → Constructor, getter&setter 생성
package com.example.crud.model;
public class StudentDto {
private Long id;
private String name;
private String email;
public StudentDto(){}
//constructor
public StudentDto(Long id, String name, String email) {
this.id = id;
this.name = name;
this.email = email;
}
//getter,setter
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
💡 Post 재요청 방지 redirect 사용
어떤 주소로 POST 요청을 보낸 후, 새로고침을 하면 동일한 요청을 다시 보내는 문제가 발생한다.
이때 redirect를 이용하면 기존 POST 요청을 정리하고 재요청을 방지할 수 있다.
return "redirect:/create-view"; //새로운 "create-view"로 redirect함
2️⃣ CRUD - Read All
1. StudentService 메소드 추가
@Service
public class StudentService {
private Long nextId = 1L;
private final List<StudentDto> studentList = new ArrayList<>();
public StudentDto createStudent(String name, String email) {
StudentDto newStudent = new StudentDto(nextId, name, email);
nextId++;
studentList.add(newStudent);
return newStudent;
}
public List<StudentDto> readStudentAll() {
return studentList;
}
}
2. home.html 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Students Home</title>
</head>
<body>
<h1>Student List</h1>
<div th:if="${studentList.isEmpty()}">
<p>No students here...</p>
</div>
<div th:unless="${studentList.isEmpty()}" th:each="student: ${studentList}">
<p>번호: [[${student.id}]]</p>
<p>이름: [[${student.name}]]</p>
<p>이메일: [[${student.email}]]</p>
</div>
<a th:href="@{/create-view}">Create</a>
</body>
</html>
3. StudentController 수정
@Controller
public class StudentController {
private final StudentService studentService;
public StudentController(StudentService studentService) {
this.studentService = studentService;
}
@GetMapping("/create-view")
public String createView() {
return "create";
}
@PostMapping("/create")
public String create(
@RequestParam("name") String name,
@RequestParam("email") String email) {
System.out.println(name);
System.out.println(email);
StudentDto newStudent = studentService.createStudent(name, email);
System.out.println(newStudent);
return "redirect:/create-view";
//제출한 뒤 /home으로 보내려면 다음과 같이 작성
//return "redirect:/home";
//
//return "home";으로 할 경우, 리다이렉트하는 게 아니라 "home"이라는 view를 보여줌.
//단, 이때 현재 코드는 view에 필요한 속성값을 넘겨주지 않기에, 에러가 발생하거나
//view가 제대로 표시되지 않을 수 있음.
//실제로 view의 studentList.isEmpty() 부분에서 null 에러가 발생함.
}
@GetMapping("/home")
public String home(Model model) {
model.addAttribute("studentList", studentService.readStudentAll());
return "home";
}
}
