폼 데이터란

• 폼 데이터(form data): HTML 요소인 <from> 태그에 실려 전송되는 데이터
• DTO(Data Transfer Object): <from> 태그에 실어 보낸 데이터를 받는 객체
• DTO로 받은 데이터는 최종적으로 데이터베이스(DB, Database)에 저장됨

폼 데이터를 DTO로 받기

1. 입력 폼 만들기

{{>layouts/header}} // 헤더 레이아웃 적용

<form action=""> // 입력 폼 작성
    <input type="text">
    <textarea></textarea>
    <button type="submit">Submit</button>
</form>

{{>layouts/footer}} // 푸터 레이아웃 적용

2. 컨트롤러 만들기

package com.example.firstproject.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller // 컨트롤러 선언
public class ArticleController {
    @GetMapping("/articles/new") // URL 요청 접수
    public String newArticleForm() { // 메소드 생성 및 반환값 작성
        return "articles/new";
    }
}

{{>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}}

3. 폼 데이터 전송하기

• <form> 태그에 action, method 속성 추가

• action: “어디에 보낼 것인가?”

  • URL 연결 주소를 적어 action="/articles/create"로 설정
  • localhost:8080/articles/create 페이지로 폼 데이터를 보낸다는 의미

• method: get, post 설정

  <form class="container" action="/articles/create" method="post">
  

4. 폼 데이터 받기

• Articlecontroller 수정

(중략)
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class ArticleController {
    @GetMapping("/articles/new")
    public String newArticleForm() {
        return "articles/new";
    }

    @PostMapping("/articles/create") // URL 요청 접수
    public String createArticle() { // 메소드 생성 및 반환값 작성
        return "";
    }
}

5. DTO 만들기

1. DTO 패키지 생성