[홈페이지 제작] 익명 페이지 3 - 익명 글 수정 페이지 만들기

Feb 14, 2024

Contents

1. View 2. 컨트롤러 3. 레파지토리 4. 화면에 출력하기

현재 익명글은 본인인증이나 비밀번호를 받지 않기 때문에 수정 시 작성자를 포함한 모든 데이터를 수정할 수 있도록 한다.

1. View

먼저 수정 버튼 활성화를 한다.

resources/index.mustache


<form action="/board/1/updateForm" method="post">
    <button class="btn btn-warning">수정</button>
 </form>

수정 버튼을 <form> 태그 내부로 넣는다. post 요청을 통해 입력은 데이터를 updateForm 페이지로 이동할 수 있도록 한다.


{{> layout/header}}

<div class="container p-5">
    <div class="card">
        <div class="card-header"><b>익명 글수정 화면입니다</b></div>
        <div class="card-body">
            <form action="/board/1/update" method="post">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter author" name="author">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter title" name="title">
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" name="content"></textarea>
                </div>
                <button type="submit" class="btn btn-primary form-control">글수정완료</button>
            </form>
        </div>
    </div>
</div>

{{> layout/footer}}

게시글 수정 페이지는 게시글 작성 페이지와 동일하다.

2. 컨트롤러


@PostMapping("/board/{id}/updateForm")
    public String updateForm(@PathVariable int id,HttpServletRequest request) {

        Board board = boardRepository.find(id);

        return "board/updateForm";
    }

업데이트 페이지는 작성 페이지와 다르게 기존 글이 존재한다. 그래서 작성 페이지에서 DB에서 기존의 데이터를 가져와 출력될 수 있도록 한다.

3. 레파지토리


public Board find(int id){
        Query query = em.createNativeQuery("select * from board_tb where id = ?",Board.class);
        query.setParameter(1,id);
        Board board = (Board) query.getSingleResult();
        return board;
    }

게시글 번호를 가지고 테이블을 찾는다.

4. 화면에 출력하기


@PostMapping("/board/{id}/updateForm")
    public String updateForm(@PathVariable int id,HttpServletRequest request) {

        Board board = boardRepository.find(id);
        request.setAttribute("board",board);

        return "board/updateForm";
    }

DB에서 전달받은 데이터를 리퀘스트 객체에 담아 View에 전달한다.


{{> layout/header}}

<div class="container p-5">
    <div class="card">
        <div class="card-header"><b>익명 글수정 화면입니다</b></div>
        <div class="card-body">
            <form action="/board/{{board.id}}/update" method="post">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter author" name="author" value="{{board.author}}">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter title" name="title" value="{{board.title}}">
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" name="content">{{board.content}}</textarea>
                </div>
                <button type="submit" class="btn btn-primary form-control">글수정완료</button>
            </form>
        </div>
    </div>
</div>

{{> layout/footer}}

value="{{board.author}} 값으로 전달받은 데이터를 출력한다.