게시판 만들고 새 글 작성하기:Create

폼 데이터란 HTML 요소인 <form> 태그에 실려 전송되는 데이터를 의미

1.  폼 데이터를 DTO로 받기
   1. 입력 폼 만들기
      1. resources아래에 있는 templates 디렉터리에 articles라는 디렉터리를 새로 만들고 그안에 new.mustache파일을 생성
      2. new.mustache 파일안에 <form></form>태그를 작성하고 게시판의 제목을 입력할 <input> 태그, 내용을 입력할 <textarea> 태그, 전송 버튼인 <button>태그를 추가하고 버튼의 속성을 type = "submit" 으로 설정
      3. 그 전에 만들었던 header , footer 코드를 추가 
   2. 컨트롤러 만들기
      1. 저번에 만들었던 src/main/java 아래에 있는 controller 패키지 안에 ArticleController 이란 새 클래스 생성
      2. public class ArticleController 이 위에 @Controller 을 입력해 컨트롤러임을 선언
      3. 페이지를 보여주기 위해서 newArticleForm() 메서드를 추가하고 반환값으로 뷰 페이지 이름 적음
         1. 하지만 이 앞에 articles 디렉터리를 만들고 new.mustache 페이지를 추가했으므로 파일 경로를 return "articles/new"; 입력
      4. URL 요청을 접수하기위해 @GetMapptin("/articles/new")을 입력
   3. new.mustache 파일에 부트스트랩 CSS 적용하기 

1-1번예시

1-2번 new.mustache 파일

                                

2-4 컨트롤러

3번 부트스트랩 적용한 new.mustache 파일

실행화면

 

1. 폼 데이터 전송하기
   1. <form> 태그에 2가지 정보를 추가하기
      1. 어디에 보낼지 선택하는거는 action 속성
         1. action="/articles/create" 로 설정 (localhost:8080/articles/create 페이지로 폼 데이터를 보낸다는 의미)
      2. 어떻게 보낼지는 method 속성
         1. 속성값으로는 get,post 2가지로 설정 가능 여기서는 method="post"방식으로 설정

1-1 form 태그안에 action 과 method 속성 설정

 

1. 폼 데이터 받기
   1. 컨트롤러를 통해서 사용자가 전송한 폼 데이터를 받기
      1. ArticleController 파일 열기
         1. 컨트롤러에 createArticle()메서드를 추가하고 형식을 맞추기 위해 return 값에는 빈 문자를 적기
         2. URL 요청을 받아오기 위해 @GetMapping 대신 @PostMapping을 사용 
            1. post 방식으로 데이터를 전송 했으므로 받을떄도 @PostMapping으로 받아야됨
         3. action="/articles/create" 으로 설정하였기 때문에 @PostMapping("/articles/create")  작성

컨트롤러에 새로운 메서드 추가

 

1. DTO 만들기
   1. DTO 를 작성하기위해 새로운 패키지 생성
      1. com.example.firstproject에서 dto 패키지를 새로 생성
      2. 그 안에 ArticleForm 로 새로운 클래스 생성
      3. 입력 폼에서는 제목과 내용을 전송할 예정이니 DTO 필드에 title , content 를 선언
      4. 생성자 추가 ArticleForm 안에서 Generate -> Constructor 을 선택후 전체 클릭후 OK버튼을 클릭하면 자동으로 생성자 추가
      5. 폼 데이터를 잘 받았는지 확인 하기위해 Generate ->  toString() 으로 toString()메서드 추

controller 과 같은 레벨에 dto 패키지 생성

ArticleForm 파일 내용

 

1. 폼 데이터를 DTO 에 담기
   1. 폼에서 전송한 데이터를 createArticle()메서드의 매개변수로 받기위해 form 객체를 매개변수로 선언
   2. 폼에서 전송한 데이터가 DTO에 잘 담겼는지 확인하기위해 System.out.println()문을 추가후 toString()메서드를 호출

컨트롤러에 createArticle 메서드 변경

 

1. 입력 폼과 DTO 필드 연결
   1. 입력 폼에서 전송한 데이터를 DTO로 받기위해 입력 폼에 필드명을 지정해야함 그래서 제목을 입력하는 <input>태그에는 name="title" 속성을 추가 내용을 입력하는 <textarea> 태그에 name="content" 속성 추가

name 속성 추가

데이터를 보내면 잘 보내온다.