6. 폼데이터 주고받기

입력폼을 만들고, 입력폼에서 입력된 값을 컨트롤러에서 확인하자.

 

view 페이지 만들기

templates > articles 라는 폴더에 > new.mustache 라는 파일을 생성한다.

new.mustache 코드

{{>layouts/header}}

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

{{>layouts/footer}}

새로운 컨트롤러를 추가

기존의 controller 폴더에 ArticleController 라는 자바 파일을 생성한다.

new.mustache 의 폼을 보여주기 위해서 컨트롤러 파일에 코드를 추가한다.

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") //url 맵핑
    public String newArticleForm() {
        return "articles/new"; //new.mustache 파일의 경로를 삽입
    }
}

http://localhost:8080/articles/new 해당 url로 접근

위의 form의 디자인을 고쳐서 반영하자

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">Sumbit</button>
</form>

{{>layouts/footer}}

반영후 접속 하면, 아래와 같이 변해있다.

폼 데이터 전송

폼태그 데이터를 보낼때 두가지 정보가 필요하다.

어디로 보낼지, 어떻게 보낼지 이다.

아래와 같이 폼태그에 바로 적용해 줄 수 있다.

new.mustache 파일에서 action과 method 내용을 추가한다.

<form class="container" action="/articles/create" method="post">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title">
    </div>

폼데이터 받기

위의 정보를 받을수 있도록 컨트롤러에 매소드를 추가해 주어야 한다.

아래와 같이 ArticleController에 새로운 매소드를 추가해 주었다.

해당 메소드는 new.mustache 파일에서 post로 보낸 form 태그의 데이터를 post 방식으로 받는다.

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") //url 맵핑
    public String newArticleForm() {
        return "articles/new"; //new.mustache 파일의 경로를 삽입
    }

    @PostMapping("/articles/create") //form에서 던진 action 주소이다.
    public String createArticle() {
        return "";
    }
}

DTO 작성하기

controller 폴더가 있는 기본 패키지 폴더에 dto 라는 폴더를 추가해준다.

생성된 dto 폴더에서 ArticleForm 이라는 자바 클래스 파일을 생성한다.

이 ArticleForm이라는 자바 클래스가 form 데이터를 받아올 그릇이 된다고 보면 된다.

2개의 데이터를 form태그에서 던졌기 때문에 2개의 필드가 존재해야 한다.

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 + '\'' +
                '}';
    }
}

폼태그에서 데이터를 ArticleController로 데이터를 던질때 파라미터로 dto 값을 넣어줘야 한다.

아래와 같이 파라미터 값으로 넘겨주면 된다.

실제로 값이 넘겨지는지 form 값을 입력하여 확인하기

확인을 위해 system.out.println() 으로 넘겨지는 변수값을 확인한다.

    @PostMapping("/articles/create") //form에서 던진 action 주소이다.
    public String createArticle(ArticleForm form) {
        System.out.println(form.toString());
        return "";
    }

데이터 확인

form에 데이터를 넣고 제출을 하면 커맨드 창에 null,null 값이 출력이 된다.

폼에서 변수명을 지정해 주지 않았기 때문이다.

 

변수명 지정하기

form 태그 코드로 이동한다.

아래 그림처럼 해당 필드에 dto와 같은 이름을 맵핑 시켜줘야 한다.

그래야 이 2개의 값이 dto로 연결이 되어 전달이 된다.

form에 값을 넣고 콘솔창 확인하기

값이 정확히 전달된것을 볼 수 있다.