[ Spring Boot ] 게시판 CRUD 만들기 : 폼 데이터 (form data)

CRUD : 게시글을 생성 (Create) 조회 (Read) 수정 (Update) 삭제 (Delete) 하는 것.

 

📌 폼 데이터란?

• form data
• HTML 요소인 <form> 태그에 실려 전송되는 데이터
• <form> 태그에 실어 보낸 데이터는 서버의 컨트롤러가 객체 (DTO : Data Transfer Object) 에 담아 받는다.
• DTO로 받은 데이터는 최종적으로 데이터베이스에 저장된다.

 

1. 폼 데이터를 DTO로 받기

new.mustache

{{>layouts/header}}

<form action="">
    <input type="text">
    <textarea></textarea>
    <button type="submit">Submit</button>
</form>

{{>layouts/footer}}

 

2. 컨트롤러 만들기

ArticleController

package com.example.firstproject.controller;

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

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

 

3. 부트스트랩으로 폼 꾸미기

new.mustache

{{>layouts/header}}

<form action="" 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"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

{{>layouts/footer}}

 

4. 폼 데이터 전송 & 받기

폼 데이터를 전송할 때에는 2가지 정보가 필요하다.

1. 데이터를 어디로 보낼지 (action 속성)
2. 데이터를 어떻게 보낼지에 관한 정보 (method 속성)

• action : URL 연결 주소를 적어 action="/articles/create" 로 설정. localhost:8080/articles/create 페이지로 폼 데이터를 보낸다는 의미.
• method : 속성 값. get과 post, 2가지를 설정할 수 있다. 여기서는 method="post" 방식으로 설정한다.

new.mustache

{{>layouts/header}}

<form action="/articles/create" method="post" 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"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

{{>layouts/footer}}

ArticleController

@PostMapping("/articles/create") //뷰 페이지에서 폼 데이터를 post방식으로 전송 -> 컨트롤러에서 받을 때도 postmapping으로 받음.
    public String createArticle(){

        return "";
    }

 

5. DTO 만들기

컨트롤러에서 폼 데이터를 받을 때 DTO (Data Transfer Object)에 담아 받는다.

DTO를 작성하기 위해 새 패키지를 만든다.

ArticleForm 파일이 DTO가 된다.

 

ArticleForm DTO

package com.example.firstproject.dto;

public class AritcleForm {
    private String title; //제목을 받을 필드.
    private String content; //내용을 받을 필드.

    //전송받은 제목과 내용을 필드에 저장하는 생성자 추가.
    public AritcleForm(String title, String content) {
        this.title = title;
        this.content = content;
    }

    //데이터를 잘 받았는지 확인할 toString() 메서드 추가.
    @Override
    public String toString() {
        return "AritcleForm{" +
                "title='" + title + '\'' +
                ", content='" + content + '\'' +
                '}';
    }
}

입력 폼에서 제목과 내용을 전송할 예정이니 DTO에도 필드 2개가 필요하다.

 

6. 폼 데이터를 DTO에 담기

전송받은 폼 데이터를 DTO에 담아 보겠다.

 

ArticleController

    @PostMapping("/articles/create") //뷰 페이지에서 폼 데이터를 post방식으로 전송 -> 컨트롤러에서 받을 때도 postmapping으로 받음.
    public String createArticle(AritcleForm form){ //폼 데이터를 DTO로 받기
        System.out.println("DTO 받기"+form.toString()); //DTO에 폼 데이터가 잘 담겼는지 확인

        return "";
    }

 

7. 입력 폼과 DTO 필드 연결하기

입력 폼에서 전송한 데이터를 DTO로 받기 위해 필드 2개, title과 content를 선언했다.

이 필드에 값이 들어가려면 new.mustache 입력 폼에 필드명을 지정해 줘야 한다.

그래야 해당 입력 폼이 DTO의 필드와 연결된다.

 

new.mustache

{{>layouts/header}}

<form action="/articles/create" method="post" class="container">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

{{>layouts/footer}}

---

📌 과정 요약

1. 뷰 페이지를 만들고 <form> 태그의 action 속성으로 데이터를 어디로 보낼지, method 속성으로 데이터를 어떻게 보낼지 정의한다.
2. 컨트롤러를 만들고 PostMapping 방식으로 URL 주소를 연결한다.
3. 전송받은 데이터를 담아 둘 객체인 DTO를 만든다.
4. 컨트롤러에서 폼 데이터를 전송받아 DTO에 담는다.

---

- (도서) 코딩 자율학습 스프링 부트 3 자바 백엔드 개발 입문

https://www.yes24.com/Product/Goods/119952151

코딩 자율학습 스프링 부트 3 자바 백엔드 개발 입문 - 예스24