13. 수정폼 만들기

# 데이터를 수정할 수 있도록 수정 페이지를 만든다.

 

진행흐름

1. show.mustache인 데이터 상세 페이지에 수정하기 링크버튼을 만든다.

2. 컨트롤러가 해당 요청을 받아서 수정 페이지를 응답으로 보여준다.

3. 수정 페이지에서는 기존 데이터를 보여줘야 하기 때문에 DB에서 Repository를 통해 데이터를 가져온다.

4. Repository는 요청으로 던져진 id 값으로 Entity를 가져오고, Entity는 뷰에서 사용할 수 있도록 모델에 등록 되어야 한다.

5. 그리고 모델에 등록된 데이터를 뷰페이지에서 사용하면 된다.

 

링크 걸기

show.mustache 파일인, 데이터 상세 페이지에서 수정하기 링크를 만든다.

<a href="/articles/{{article.id}}/edit"></a>

class="btn btn-primary" 는 버튼의 그래픽을 부여한 코드이다.

위의 {{article.id}}는 모델에 있는 id 값을 가져올 수 있다.

아래와 같이 코드를 작성해 준다.

    {{#article}}
        <tr>
            <td>{{id}}</td>
            <td>{{title}}</td>
            <td>{{content}}</td>
        </tr>
    {{/article}}
    </tbody>
</table>

<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>
<a href="/articles">Go to Article List</a>

{{>layouts/footer}}

요청 받기

<a href="/articles/{{article.id}}/edit"></a> 해당 요청을 받을 컨트롤러가 필요하다.

ArticleController에서 신규로 메소드를 생성한다.

해당 컨트롤러에서 URL 맵핑을 받아야 하므로 GetMapping 값을 넣어 준다. URL 값으로는 show.mustache 파일의 href 파일의 url을 넣어준다. 중괄호가 2개는 java 파일에서 변수로 인식이 되지 않으므로, 중괄호를 1개 지워준다.

<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>

수정 페이지를 반환하는 값은 return "articles/edit"; 이다. edit.mustache 파일로 반환된다.

edit.mustache 페이지에서 보여주고 싶은것은 수정할 데이터 이다. 그러기 위해서는 수정할 데이터를 가져와야 한다.

Repository를 통해서 DB에 있는 데이터를 꺼내 온다.

Article articleEntity = articleRepository.findById(id).orElse(null);

위에 코드처럼 id값을 위에서 url값으로 요청 하기로 했으니, id값으로 검색해서 가져오면 되는데 만약에 없다면 null 값을 반환한다.

하지만 id라는 변수가 선언되어 있지 않으므로 id가 빨갛게 표시가 된다. id를 url의 id 값으로 가져와야 하므로 @PathVariable Long id 로 선언한다.

데이터를 가져왔으니, 뷰페이지에서 사용할 수 있도록 해야한다.

모델에 데이터를 등록해서 사용할 수 있도록 해준다.

모델을 사용하기 위해서는 아래 코드처럼 Model model 을 등록해 주어야 한다.

받아온 모델을 통해서 아래의 코드처럼 등록 해준다.

article 이라는 이름으로, 앞에서 가져온 articleEntity라는 값을 등록한다.

model.addAttribute("article", articleEntity);

이제 해당 뷰 페이지에서 article 이라는 이름으로 데이터를 사용할 수 있게 되었다.

여기서 주의할 점은 GetMapping해서 받아온 변수값과 PathVariable로 받아온 변수값은 일치 해야한다.

@GetMapping("/articles/{id}/edit")

public String edit(@PathVariable Long id, Model model) {

    @GetMapping("/articles/{id}/edit")
    public String edit(@PathVariable Long id, Model model) {

        // 수정할 데이터를 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);

        // 모델에 데이터를 등록하기
        model.addAttribute("article", articleEntity);

        // 뷰페이지 설정
        return "articles/edit";
    }

뷰페이지 작성

templates > articles > edit.mustache 파일을 생성해 준다.

등록 페이지와 비슷하므로, new.mustache html 코드를 복사하여 붙여준 후 수정을 한다.

폼을 수정할때 던져질 action값을 일단은 공백으로 설정한다.

Back, 뒤로가기 버튼의 주소가 articles/1...2...3 이런식으로 변하기 때문에 <a href="/articles/{{id}}">Back</a>와 같이 코드를 수정해 준다. 이렇게 등록을 하게 되면 해당 url로 요청이 보내지게 된다.

수정 할때 기존의 데이터를 보여주게 하기 위해서는 아래와 같이 속성값을 넣어주면 된다.

<input type="text" class="form-control" name="title" value="{{title}}">

<textarea class="form-control"rows="3" name="content">{{content}}</textarea>

원래는 {{article.title}}, {{article.content}}, {{article.id}} 라고 변수값을 넣어줘야 하지만 반복적인 작업 이므로 해당 페이지에 article을 사용할 범위에 아래와 같이 입력 해주면 반복적으로 article.을 입력하지 않고 값만 입력하여 처리 할 수 있다.

{{#article}}

.

.

.

{{/article}}

{{>layouts/header}}

{{#article}}
<form class="container" action="" method="post">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title" value="{{title}}">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control"rows="3" name="content">{{content}}</textarea>
    </div>
    <button type="submit" class="btn btn-primary">Sumbit</button>
    <a href="/articles/{{id}}">Back</a>
</form>
{{/article}}

{{>layouts/footer}}

현재까지 기능을 테스트