[Java/SpringBoot] html form submit & receive Value sample

 

1. [ Controller ]접속 URL 생성 & 접속 테스트

package com.yym.sample001.controller;

import com.yym.sample001.dto.ArticleForm;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ArticleController {

    //  컨텐츠 입력 페이지
    //  http://localhost:8080/articles/new 을 Get 방식으로 호출할 경우 - 호출될 메서드 정의
    @GetMapping("/articles/new")
    public String newArticleForm(){

        return "articles/new";
    }
}

 

2. [View]입력 페이지 작성 (  HTML Form )

{{>layouts/header}}

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

{{>layouts/footer}}

 

 

3 [ Controller ]전송 목적지 ( 전송값 수신 ) URL 생성

package com.yym.sample001.controller;

import com.yym.sample001.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 {

    //  컨텐츠 입력 페이지
    //  http://localhost:8080/articles/new 을 Get 방식으로 호출할 경우 - 호출될 메서드 정의
    @GetMapping("/articles/new")
    public String newArticleForm(){

        return "articles/new";
    }

    //  컨텐츠 입력 페이지의 내용 전송버튼 클릭시 입력 내용을 수신하기 위한 메서드
    //  http://localhost:8080/articles/create 을 Post 방식으로 호출할 경우 - 호출될 메서드 정의
    @PostMapping("/articles/create")
    public String createArticle(ArticleForm form){
        return "";
    }

}

 

4. DTO 클래스 생성

package com.yym.sample001.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 + '\'' +
                '}';
    }
}

 

 

5. [ Controller ] DTO 클래스를 파라미터로 설정하여 from 값 수신 확인

package com.yym.sample001.controller;

import com.yym.sample001.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 {

    //  컨텐츠 입력 페이지
    //  http://localhost:8080/articles/new 을 Get 방식으로 호출할 경우 - 호출될 메서드 정의
    @GetMapping("/articles/new")
    public String newArticleForm(){

        return "articles/new";
    }

    //  컨텐츠 입력 페이지의 내용 전송버튼 클릭시 입력 내용을 수신하기 위한 메서드
    //  http://localhost:8080/articles/create 을 Post 방식으로 호출할 경우 - 호출될 메서드 정의
    @PostMapping("/articles/create")
    public String createArticle(ArticleForm form){
        System.out.println( form.toString() );
        return "";
    }

}

 

---

@ 위 과정의 수행 결과 생성된 파일과 디렉토리 구조 예시

---