> For the complete documentation index, see [llms.txt](https://heunnajo.gitbook.io/mvc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://heunnajo.gitbook.io/mvc/7.-mvc/undefined-5.md).

# 상품 등록 폼

구현할 내용

* 상품 목록 페이지에서 상품 등록을 클릭하면 /add로 이동
* 상품 등록 페이지에서 취소 버튼 클릭하면 상품리스트 페이지로 이동

![](https://4059345879-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MdtAbfiAnzkPUNovpHX%2F-MeEL4vkpMAAdaogFvil%2F-MeELIjoNXO0GRrCGZGj%2FScreen%20Shot%202021-07-10%20at%204.36.33%20PM.png?alt=media\&token=a50ce1a9-abc2-4a08-a35d-459fb0b5cc5e)

![만들 상품 등록 폼 /add 페이지](https://4059345879-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MdtAbfiAnzkPUNovpHX%2F-MeEL4vkpMAAdaogFvil%2F-MeELShOQW1jygVvsXEC%2FScreen%20Shot%202021-07-10%20at%204.36.40%20PM.png?alt=media\&token=e5572bec-6de9-4527-b200-b7ce8e945f04)

**⭐️동일한 url(.../add)에 대해서 단순 페이지 조회와 데이터(HTML Form) 전송 요청 2가지를 구현한다.**\
같은 url 요청에 대해 HTTP 메서드에 따라 다른 메서드를 실행한다.

1. GET 방식으로 상품 등록 폼 페이지 조회 : 단순 페이지 렌더링(템플릿 뷰 이름 반환)\
   addForm() 메서드 호출, 실행

2. POST 방식으로 상품 등록 데이터 전송 : 현재 페이지(.../add)에서 동일한 url로 데이터를 전송\
   save() 메서드 호출, 실행 //데이터가 왔으니 저장해야지

3. add 페이지(basic/addForm 템플릿) 구성

4. GET방식, 조회 - addForm()메서드 구현

```java
//같은 url에 대해 get 들어오면 그냥 페이지만 보여주는 addForm 메서드 호출
    @GetMapping("/add")
    public String addForm(){
        return "basic/addForm";
    }
```

❤️⭐️2. POST 방식, 데이터 저장 - save() 메서드(1차 구현)\
\=> add 페이지에서 데이터 폼을 작성하고 상품 등록 버튼을 누르면 동일한 url(../add)로 HTML Form 데이터가 **POST방식으로 전송**되도록 설정했기 때문에 1번과 동일한 url(../add)에 대해 POST방식으로 들어오는 요청을 처리한다!

```java
//같은 url에 대해 post 방식 들어오면 저장하는 save 메서드 호출
    @PostMapping("/add")
    public String save(){
        return "basic/addForm";
    }
```

HTML form 태그의 속성인 action은 전송할 링크를 적어주는데 현재 페이지 주소와 동일한 주소로 전송할 거라면 th:action 하고 값은 비워두면 된다.

그러면 템플릿이 실행될 때 th:action 값이 없으면 자동으로 현재 페이지 주소로 데이터를 POST 방식으로 전송한다.

취소\
취소시 상품 목록으로 이동한다.

```
th:onclick="|location.href='@{/basic/items}'|"
```