[홈페이지 제작] 게시판 만들기 7 - 게시글 수정 페이지 만들기

Feb 08, 2024

Contents

1. View 만들기

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

updateForm.mustache


{{> 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" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter title" name="title" value="제목1">
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" name="content">내용1</textarea>
                </div>
                <button type="submit" class="btn btn-primary form-control">수정완료</button>
            </form>
        </div>
    </div>
</div>

{{> /layout/footer}}

/board/1/updateForm 을 접속하면 수정 페이지가 만들어진다. 현재는 제목과 내용을 임의로 만들었지만 실제 수정은 DB에서 원 글의 데이터를 가져와야 한다.

💡

<textarea> 내에는 mustache 문법을 사용할 수 없다.

2. 컨트롤러 만들기

💡

게시글의 DB를 조회하기 위해 URL 에 id 를 변수로 입력받아야 한다.


@GetMapping("/board/{id}/updateForm")
    public String updateForm(@PathVariable int id){

        return "board/updateForm";
    }

수정 전 인증 체크와 권한 체크가 필요하다.


       //인증 체크. 로그인이 되어있는지 확인
       User sessionUser = (User) session.getAttribute("sessionUser");
        if(sessionUser==null){
            return "redirect:/loginForm";
        }


				//DB 조회
				Board board = boardRepository.findByIdCheck(id);
        // 권한 체크
        if(board.getUserId()!=sessionUser.getId()){
            request.setAttribute("status",403);
            request.setAttribute("msg","게시글을 수정할 권한이 없습니다.");
            return "error/40x";
        }

boardRepository 를 통해 DB를 조회한다. 따로 메서드를 만들지 않고 , 게시글 삭제 때 만들었던 findByIdCheck 를 활용한다.

board/BoardRepository


public Board findByIdCheck(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;
    }

로그인을 하지 않고 /board/1/updateForm 을 접속하면 로그인 페이지로 리다이렉션 된다.


@GetMapping("/board/{id}/updateForm")
    public String updateForm(@PathVariable int id,HttpServletRequest request){
        //인증 체크
        User sessionUser = (User) session.getAttribute("sessionUser");
        if(sessionUser==null){
            return "redirect:/loginForm";
        }
        //DB 조회
        Board board = boardRepository.findByIdCheck(id);
        // 권한 체크
        if(board.getUserId()!=sessionUser.getId()){
            request.setAttribute("status",403);
            request.setAttribute("msg","게시글을 수정할 권한이 없습니다.");
            return "error/40x";
        }

        //가방에 담기
        request.setAttribute("board",board);

        return "board/updateForm";
    }

마지막으로 리퀘스트 객체에 데이터를 담아 View 로 전달한다.

3. View 수정

updateForm.mustache


{{> /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" enctype="application/x-www-form-urlencoded">
                <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}}

페이지 번호는 {{board.id}} , 제목은 {{board.title}} , 내용은 {{board.content}} 를 사용해 동적으로 페이지를 출력한다.

detail.mustache


{{#owner}}
        <!-- 수정삭제버튼 -->
        <div class="d-flex justify-content-end">
            <a href="/board/{{board.id}}/updateForm" class="btn btn-warning me-1">수정</a>
            <form action="/board/{{board.id}}/delete" method="post">
                <button class="btn btn-danger">삭제</button>
            </form>
        </div>
    {{/owner}}

버튼도 동작될 수 있도록 수정한다. <form> 태그를 사용해도 되지만, get 요청은 <a> 태그를 사용해 하이퍼링크로 전달할 수도 있다.