# 폼(form) 데이터 주고 받기 ## 미션 사용자로부터 폼 데이터를 받고, 이를 컨트롤러에서 확인하시오.  ## 02:27 입력 폼 만들기 #### ../templates/articles/new.mustache ``` {{>layouts/header}} <form action=""> <input type="text"> <textarea></textarea> <button type="submit">제출</button> </form> {{>layouts/footer}} ``` #### ../controller/ArticleController ```` package com.example.firstproject.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class ArticleController { @GetMapping("/articles/new") public String newArticleForm() { return "articles/new"; } } ``` #### ../templates/articles/new.mustache ``` {{>layouts/header}} <form class="container"> <div class="mb-3"> <label class="form-label">제목</label> <input type="text" class="form-control"> </div> <div class="mb-3"> <label class="form-label">내용</label> <textarea class="form-control" rows="3"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> {{>layouts/footer}} ``` ## 07:11 폼 데이터 전송하기 #### ../templates/articles/new.mustache ``` {{>layouts/header}} <form class="container" action="/articles/create" method="post"> <div class="mb-3"> <label class="form-label">제목</label> <input type="text" class="form-control"> </div> <div class="mb-3"> <label class="form-label">내용</label> <textarea class="form-control" rows="3"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> {{>layouts/footer}} ``` ## 08:16 폼 데이터 받기 #### ../controller/ArticleController ``` package com.example.firstproject.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; @Controller public class ArticleController { @GetMapping("/articles/new") public String newArticleForm() { return "articles/new"; } @PostMapping("/articles/create") public String createArticle() { return ""; } } ``` #### ../dto/ArticleForm ``` package com.example.firstproject.dto; public class ArticleForm { private String title; private String content; public ArticleForm(String title, String content) { this.title = title; this.content = content; } @Override public String toString() { return "ArticleForm{" + "title='" + title + '\'' + ", content='" + content + '\'' + '}'; } } ``` ## 09:39 DTO로 데이터 받기 #### ../controller/ArticleController ``` package com.example.firstproject.controller; import com.example.firstproject.dto.ArticleForm; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; @Controller public class ArticleController { @GetMapping("/articles/new") public String newArticleForm() { return "articles/new"; } @PostMapping("/articles/create") public String createArticle(ArticleForm form) { System.out.println(form.toString()); return ""; } } ``` ## 13:13 입력값 이름 주기 #### ../templates/articles/new.mustache ``` {{>layouts/header}} <form class="container" action="/articles/create" method="post"> <div class="mb-3"> <label class="form-label">제목</label> <!-- 입력값: title --> <input type="text" class="form-control" name="title"> </div> <div class="mb-3"> <label class="form-label">내용</label> <!-- 입력값: content --> <textarea class="form-control" rows="3" name="content"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> {{>layouts/footer}} ``` ## 🔥 구글링 훈련하기 - HTTP GET POST 비교 - @PostMapping - DTO란 - @ModelAttribute