Day12_#6_폼 데이터를 받아 Controller에서 확인

 

Mission
폼데이터를 받고 Controller에서 확인한다.

 

Day 10에서 만들었던 페이지를 게시판의 형태로 업그레이드 하려고 하는데,

게시판의 기본 형태인 CRUD를 알아야 한다.

- Create

- Read

- Update

- Delete

우리가 웹에 접속하면 일반적으로 하는 동작들이다.

 

그 중 Create, 작성 부분을 먼저 만들건데,

사용자가 페이지에 값을 입력하면

그걸 Controller에서 확인하는 것이다.

 

---

 

폼 데이터는 html 요소인 폼 태그에 담겨있는 데이터로

우리가 일반적으로 게시판에 글을 작성하는 것이 폼 태그이다.

 

게시판을 작성할 때 일반적인 양식인
작성자, 게시일, 게시판 등이 폼 태그이며

여기에 사용자가 입력하는 값이 폼 데이터로 서버에 전송되고,

이를 Controller에서 객체에 담아 받는다.

 

Controller에서 폼 데이터를 받을 때 객체에 담아서 받는다고 했는데

이 객체를 DTO라고 한다.

 

---

 

입력 폼은 View에 만들어야한다.

따라서 IntelliJ에서 View 페이지를 만들어준다.

 

templates 디렉토리에 articles라는 디렉토리를 생성하고

그 안에 new.mustache 라는 이름의 View Page를 만들어줬다.

 

텍스트 값을 입력받을 수 있도록 코드를 넣고

위아래로 Day10에서 했었던 header, footer 템플릿을 삽입했다.

 

---

 

이제 이 페이지를 보기 위한 Controller를 만들어줘야하는데,

기존에 만들어놨던 Controller 디렉토리에

ArticleController 이름의 Java Class를 추가해준다.

 

위 사진과 같이 순차적으로 진행하는데,

우선 컨트롤러를 선언해준다.

 

그리고 메소드를 작성해주는데, newArticleForm이란 메소드를 작성하고

articles 디렉토리 안에 있는 new 라는 View Page를 연결해준다.

 

마지막으로 @GetMapping 으로 주소를 등록해주면 된다.

 

서버 재실행 후에

localhost:8080/articles/new

다음 주소의 브라우저에 접속하면

 

쨔쟌👏

 

근데 안예뻐서 강의에서 알려준대로 GetBootstrap 코드를 참고하여

다시 작성했다.

{{>layouts/header}}

<form class="container">
    <div class="mb-3">
        <label class="form-label">Title</label>
        <input type="text" class="form-control">
    </div>
    <div class="mb-3">
        <label class="form-label">Contents</label>
        <textarea class="form-control"rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

{{>layouts/footer}}

 

그 결과물🫢

 

 

---

 

 

이제 데이터를 입력하면 출력될 수 있도록

전송할 위치와 방법을 설정해줘야된다.

 

new.mustache 파일에서

표시된 부분을 추가해준다.

 

action 속성으로 어디로 보낼 지를 설정하고

method 속성으로 어떻게 보낼 지를 설정한다.

 

---

 

이제 폼 데이터를 받을 수 있도록

Controller에 메소드를 추가해줘야한다.

    @PostMapping("/articles/create")
    public String createArticle() {
        return "";
    }

이전이랑 다르게 @PostMapping 으로 받는 것은

 

 

---

 

마지막으로 객체를 받는 DTO를 작성해줘야한다.

 

DTO는 기본 패키지에서 우클릭하고

dto 이름의 새로운 디렉토리를 생성해준다.

 

두 개의 데이터를 입력하도록 만들었으니

두 개의 필드를 만들어준다.

 

그리고 빈공간에 마우스를 대고 우클릭 → Generate → Constructor → 두 개 선택 → OK

하면 자동생성된다. 

마찬가지로 우클릭 → Generate → toString() → 두 개 선택 → OK

해서 자동생성.

 

---

 

Controller가 데이터를 받을 수 있도록 설정하는 단계이다.

 

브라우저에서 값을 입력하게 되면 PostMapping으로 전송되는데

이 데이터를 받아오려면 createArticle 메소드에 DTO를 넣어줘야한다.

 

이렇게 넣어주면 된다.

 

 

---

 

마지막으로.. 변수명을 지정해줘야된다.

DTO의 필드명과 동일한 이름을 넣어줘야된다.

 

진짜 끝..

 

---

 

 

이제 입력한 데이터가 잘 출력되는지 확인할 차례다.

 

서버를 재실행하고 브라우저에서 내맘대로 써봤다.

 

그럼 이렇게 서버에서 확인이 가능하다.

 

Content 부분은 와저러나 아직 모르겠는데

새벽 4시다. 일단 오늘은 잔다.