Spring Boot으로 웹 출시까지 #6. thymleaf에서 form 전송하기

지난 시간에 게시판 내용을 불러오는 화면을 작성함.쓰기를 만들어볼 것임.

 

화면이 list.html 이다.

복사해서 form.html로 이름 변경.

form으로 바꿀 것이다.

 

해당 부분 주석 제거

 

총 건수 부분도 제거

boostrap에 폼 태그가 있음.

textarea 검색

이 줄을 가져올 것임.

 

<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

https://getbootstrap.com/docs/5.3/forms/form-control/

 

붙여넣음

 

이어서 input 상자도 필요함.

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

라벨 및 id 수정

place holder 삭제

버튼을 가져옴

 

통째로 가져옴

확인으로 변경

취소

확인 - submit으로 번경

버튼이었는데 앵커택으로 변경

클래스로 버튼 스타일을 줬기 때문에 앵커 테그를 사용해도 부스트랩으로 자연스럽게 버튼 모양으로 표시됨.

form으로 이동하도록 함.

하단에 링크가 표시가 됨

취소를 엥커 타입변경함

폼태그를 이용해서 내용을 전송해볼 것임.

스프링 가이드를 보면서 할 것임.

valiading Form은 값이 잘못됐는지 체크

Handling Form Submission 폼을 어떻게 전송하면 되는지

해당 가이드는 thymeleaf를 이용한 가이드.

GetMapping 과 PostMapping이 있다.

Greeting 모델을 전달해주고 있음.

 

Board 클래스 전달을 할 것임.

같은 주소이지만, 메소드에 따라 처리 방식이 달라짐.

@ModelAttribute 어노테이션 사용하면 클래스를 받아올 수 있음.

Greeting 클래스를 가지고 데이터베이스에 저장을 해주면 됨.

action은 정적인 파일에서만 동작을 한다.

실제로 기동이 됐을 때에는 th:action이 동작.

/greeting으로 전송을 하겠다.

컨트롤러에서 지정해줬던 greeting 키를 사용할 수 있음.

input이 id를 나타낸다.

content도 마찬가지.

최종적으로 해당 주소로 전달하게 됨.

동일하게 작성해볼 것임.

 

board를 받는 컨트롤러 작성

 

jpa이기 때문에 특정한 조건은 규칙에 맞게 메소드를 정의해라.

기본적인 기능만 사용해도 되기 때문에 추가하지는 않을 것이다.

 

많이 사용되는 기능은

save - 저장

findAll - 전체조회

delete - 삭제

count - 세기

 

Board로 가면 클래스로 갈 수 있다.

id 키 값에 따라서 있으면 업데이트가 되고,

없으면 insert가 될 것임.

완료 후 어느 페이지로 갈 지 지정을 해줄것임.

저장이 되면 list로 보내주면 좋을 것이다.

화면으로 이동은 하긴 하겠지만, model의 키 값이 있어야 한다.

redirect를 주게되면 다시 한번 조회가 될 것이다.

https://spring.io/guides/gs/handling-form-submission/

해당 폼태그를 작성해볼 것이다.

board/form으로 포스트 요청을 해야되고,

get 매핑에서 전달받은 board를 사용함.

타입을 text로 변경

field부분을 title과 content로 변경

th:field에는 어떤 속성을 사용할 지를 적는 것이다.

title 속성

content 속성

 

 

ctrl+f9를 눌러 확인

게시판에 쓰기를 누름

보는 것 처럼 글이 작성됨.

조회가 가능하다.

타이틀을 눌렀을 때 글 수정할 수 있도록 하겠다.

 

title 부분에 <a href> 추가

 

적용되면서 앵커 테그가 사라질 것임

따라서 text를 안에 넣고 경로를 지정함.

파라미터로 글 번호를 전달해줄 것임.

파라미터 전달 문법을 찾아서 복사.

이 경로를 board에 맞게 수정

여기에서 파라미터 하나를 전달 받아야 함.

파라미터가 필수가 아니므로 required = false

필요한 경우에만 id 전달.

 

id가 null인 경우는 새 Board 클래스를 타입리프에 넘겨주면 됨.

id가 값이 있을 경우에는 board를 넘겨줄 것이다.

Key값을 찾을 수 있는 메소드를 jpa가 자동으로 지원을 해준다.

Optional은 자바가 지원해주는 문법인데, 찾는 id 값이 없을 수 있다.

 잘못된 값을 받았을 때에는 null반환.

링크가 생김.

에러가 나고 있다.

href에 th가 빠졌다.

 

클릭하면 기존의 제목과 내용이 나옴.

 

썼는데 글이 수정이 안되고 새로 작성이 됨.

 

save에 key 값을 전달하지 않았기 때문에, db에 새로운 아이디가 따졌음.

14id를 수정하고 싶으면 14를 같이 지정해주면 됨.

 

사용자에게 노출할 필요가 없으니 hidden

수정하면 글이 수정됨.

Handling Form Submission 을 해봤음.

Validaing Form Input을 해볼것임.

잘못된 값을 입력할 수도 있고, 고의적으로 해킹을 시도하기 위해 잘못된 데이터를 전송할 수 있음.

서버에서는 클라이언트에서 보낸 데이터를 믿지 말고, 제대로 전송했는지 체크하는 것이 필수적이다.

 

이름 최소값, 최대값.

2자리부터 30자리 사이.

NULL이면 안된다.

Javax를 임포트해야함

<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-validation -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
    <version>3.2.0</version>
</dependency>

@ModelAttribute 부분을 @Valid로 수정.

Binding Result를 입력하면 스프링부트가 알아서 가져온다.

에러가 있으면 form 화면으로 돌아온다.

에러가 났을 때, 폼 태그 안에서 fields.hasErrors 에러가 name으로 된 것이 있는지 확인.

있으면 validation 문법을 이용을 해서 값을 표시 해줄 것임.

부트스트랩을 사용하므로 부트스트랩에 맞게 사용해볼 것임.

이를 복사해서 그대로 사용해볼 것임.

https://getbootstrap.com/docs/4.5/components/forms/#validation

 

City 부분이 에러가 난 것임.

invalid-feedback 부분이 정의되어있음.

input 태그에 같이 form-control is-invalid를 추가해줘야 함.

제목 밑에 추가해줌.

에러가 난 부분.

title 필드가 에러가 있다면 is-invalid 스트링 반환.

에러는 확인

한글자를 쓰면 에러메시지가 나옴.

 

정상적으로 수정됨.

Validator 클래스를 만들어서 자바 코드로 체크를 해볼 것임.

어노테이션 만으로 처리하면 편리하긴 하지만, 자유도의 제약이 있음.

validator 패키지에 BoardValidator를 생성

 

PersonValidator에서 implements을 임플리멘츠하고 있음.

어떤 클래스를 벨리데이션 할건지 지정함.

 

validate 메소드가 값이 유효한지 확인.

ValidationUtils는 쉽게 체크할 수 있는 유틸 클래스

유효하지 않을 때에는 3번째 파라미터.

메시지 맵에 해당 값을 전달하고 있음.

메시지 같은 경우는 다국어 설정을 할 때, kvalue값으로 나열할 수 있음.

키만 전달하면 알아서 언어가 바뀌게 설정이 되어 있으면 전달하면 됨.

아직 다국어 설정을 하지 않았음.

 

두번째는 보통 하는 방법.

우리는 Board 클래스임.

원하는 클래스로 형변환 한 다음에 나이가 0살보다 낮은지 110살보다 높은지

어떤 필드에 메시지를 전달해줄 것임.

Springframework 를 임포트할 것임.

 

Board로 형변환

컨텐츠가 비어있는지 확인.

 

메시지 키 값이 없으면 3번째 파라미터에 내용을 입력하세요.

BoardController에 BoardValidator 선언

스프링 기동될 때에 인스턴스가 담기게 됨.

Component라고 명시를 해야 디펜던시 인젝션 사용 가능.

 

알트 좌측 화살표

벨리데이션이 나옴.

 

메시지 디폴트 값이 있음.

메시지 수기 입력

 

 

https://youtu.be/nx5UuyS8foI