Spring

24. 게시글 구현 : 수정 화면으로 이동하기

Feb 08, 2024
24. 게시글 구현 : 수정 화면으로 이동하기

1. boardController에서 updateForm주소 만들기

  • 외부에서 보기 위해서 만들어야 함
  • 해당 게시글에 따라 다르기 때문에 {id} 변수로 만들기
package shop.mtcoding.blog.board;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import shop.mtcoding.blog.user.User;

import java.util.List;

@RequiredArgsConstructor
@Controller
public class BoardController {

    private final HttpSession session; // DI
    private final BoardRepository boardRepository; // DI

    @GetMapping("/board/{id}/updateForm") // 보드에 해당 페이지
    public String updateFormn(@PathVariable int id, HttpServletRequest request) {
        return "board/updateForm";
    }

    @PostMapping("/board/{id}/delete") // body데이터가 없어서 유효성 검사 안해도 됨
    public String delete(@PathVariable int id, HttpServletRequest request) {
        // 1. 인증 검사하기
        User sessionUser = (User) session.getAttribute("sessionUser");
        if(sessionUser == null) {
            return "redirect:/loginForm";
        }
        // 2. 권한 검사하기
        Board board = boardRepository.findById(id);
        if(board.getUserId() != sessionUser.getId()){
            request.setAttribute("status", 403);
            request.setAttribute("msg", "게시글을 삭제할 권한이 없습니다");
            return "error/40x"; // 리다이렉트 하면 데이터 사라지니까 하면 안됨
        }
        boardRepository.deleteById(id);

        return "redirect:/";
    }

    @PostMapping("/board/save")
    public String save(BoardRequest.SaveDTO requestDTO, HttpServletRequest request) {
        // 1. 인증 체크
        User sessionUser = (User) session.getAttribute("sessionUser");
        System.out.println("sessionUser:" + sessionUser);
        if (sessionUser == null) {
            return "redirect:/loginForm";
        }

        // 2. 바디 데이터 확인 및 유효성 검사
        System.out.println(requestDTO);

        if (requestDTO.getTitle().length() > 30) {
            request.setAttribute("status", 400);
            request.setAttribute("msg", "title의 길이가 30자를 초과해서는 안되요");
            return "error/40x"; // BadRequest
        }

        // 3. 모델 위임
        // insert into board_tb(title, content, user_id, created_at) values(?,?,?, now());
        boardRepository.save(requestDTO, sessionUser.getId());

        return "redirect:/";
    }

    // http://localhost:8080?page=0
    @GetMapping({"/", "/board"})
    public String index(HttpServletRequest request) {
        List<Board> boardList = boardRepository.findAll();
        request.setAttribute("boardList", boardList);
        return "index";
    }

    @GetMapping("/board/saveForm") // /board/saveForm Get요청이 옴
    public String saveForm() { // session 영역에 접근하기 위한
        // 1. session 영역에 sessionUser 키 값에 user 객체가 있는지 체크하기
        User sessionUser = (User) session.getAttribute("sessionUser");

        // 2. 값이 null이면 로그인 페이지로 리다이렉션
        if (sessionUser == null) {
            return "redirect:/loginForm";
        }
        // 3. null이 아니면 /board/saveForm으로 이동
        return "board/saveForm";
    }

    // 상세보기시 호출
    @GetMapping("/board/{id}") // 1이 프라이머리키 -> 뭐든 넣어도 실행시키려면 변수화시켜서 {}
    public String detail(@PathVariable int id, HttpServletRequest request) {
        System.out.println("id : " + id);
        // 1. 바로 모델 진입 -> 상세보기 데이터 가져오기
        // body 데이터가 없으면 유효성 검사할 필요 없음
        BoardResponse.DetailDTO reponseDTO = boardRepository.findByIdWithUser(id); //메서드 이름 변경

        // user 객체를 가져와서 session 값 받기 : object라 다운 캐스팅 해야함
        User sessionUser = (User) session.getAttribute("sessionUser");
        //System.out.println("sessionUser: " + sessionUser);

        // 2. 페이지 주인 여부 체크(board의 userId와 sessionId의 값 비교)
        boolean pageOwner = false;

        if (reponseDTO.getUserId() == sessionUser.getId()) {
            //System.out.println("getUserId:" + reponseDTO.getUserId());
            pageOwner = true;
        }

        request.setAttribute("board", reponseDTO);
        request.setAttribute("pageOwner", pageOwner); // 이 값을 mustache에게 줘야함!

        return "board/detail";
    }
}
 

2. 필요한 정보 확인하기

  • board 정보만 있는 것만 필요함
  • 기존의 게시글 내용을 DB에 조회해서 적혀있게 해야 함
notion image
  • 모델에 위임(id로 board 조회)하기

4. 인증 및 권한 체크하기

  • 권한 체크하기 위해서 권한 체크가 필요함
  • 게시글의 주인 ID와 로그인한 사람의 ID가 동일해야 함
  • 가방에 담아야 함
package shop.mtcoding.blog.board;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import shop.mtcoding.blog.user.User;

import java.util.List;

@RequiredArgsConstructor
@Controller
public class BoardController {

    // HttpSession 객체를 참조
    private final HttpSession session;
    private final BoardRepository boardRepository; // DI

    @GetMapping({"/", "/board"})
    public String index(HttpServletRequest request) {

        User sessionUser = (User) session.getAttribute("sessionUser");
        if (sessionUser == null) {
            System.out.println("로그인 안된 상태입니다");
        } else {
            System.out.println("로그인 된 상태입니다");
        }

        List<Board> boardList = boardRepository.findAll();
        request.setAttribute("boardList", boardList); // ("key", value)
        return "index";
    }

    @GetMapping("/board/saveForm")
    public String saveForm() { // session 영역에 접근하기 위한
        // 1. session 영역에 sessionUser 키 값에 user 객체가 있는지 체크하기
        User sessionUser = (User) session.getAttribute("sessionUser");
        // 2. 값이 null이면 로그인 페이지로 리다이렉션
        if (sessionUser == null) {
            return "redirect:/loginForm";
        }
        // 3. null이 아니면 /board/saveForm으로 이동
        return "board/saveForm";
    }

    @PostMapping("board/save") //save 주소 만들기
    public String save(BoardRequest.SaveDTO requestDTO, HttpServletRequest request) {
        // 1. 인증 체크
        User sessionUser = (User) session.getAttribute("sessionUser");
        System.out.println("sessionUser:" + sessionUser);
        if (sessionUser == null) {
            return "redirect:/loginForm";
        }

        // 2. 바디 데이터 확인 및 유효성 검사
        System.out.println(requestDTO);

        if (requestDTO.getTitle().length() > 30) {
            request.setAttribute("status", 400);
            request.setAttribute("msg", "title의 길이가 30자를 초과해서는 안되요");
            return "error/40x"; // BadRequest
        }

        // 3. 모델 위임
        // insert into board_tb(title, content, user_id, created_at) values(?,?,?, now());
        boardRepository.save(requestDTO, sessionUser.getId());

        return "redirect:/";
    }

    // select b.id, b.title, b.content, b.user_id, u.username from board_tb b inner join user_tb u on b.user_id = u.id where b.id = ?
    @GetMapping("/board/{id}") // 1이 프라이머리키 -> 뭐든 넣어도 실행시키려면 변수화시켜서 {}
    public String detail(@PathVariable int id, HttpServletRequest request) {
        System.out.println("id : " + id);
        // 1. 바로 모델 진입 -> 상세보기 데이터 가져오기
        // body 데이터가 없으면 유효성 검사할 필요 없음
        BoardResponse.DetailDTO reponseDTO = boardRepository.findByIdWithUser(id);

        // user 객체를 가져와서 session 값 받기 : object라 다운 캐스팅 해야함
        User sessionUser = (User) session.getAttribute("sessionUser");
        //System.out.println("sessionUser: " + sessionUser);

        // 2. 페이지 주인 여부 체크(board의 userId와 sessionId의 값 비교)
        boolean pageOwner = false;

        if (reponseDTO.getUserId() == sessionUser.getId()) {
            //System.out.println("getUserId:" + reponseDTO.getUserId());
            pageOwner = true;
        }

        request.setAttribute("board", reponseDTO);
        request.setAttribute("pageOwner", pageOwner); // 이 값을 mustache에게 줘야함!

        return "board/detail";
    }

    @PostMapping("/board/{id}/delete") // body데이터가 없어서 유효성 검사 안해도 됨
    public String delete(@PathVariable int id, HttpServletRequest request) {
        // 1. 인증 검사하기
        User sessionUser = (User) session.getAttribute("sessionUser");
        if (sessionUser == null) {
            return "redirect:/loginForm";
        }
        // 2. 권한 검사하기
        Board board = boardRepository.findById(id);
        if (board.getUserId() != sessionUser.getId()) {
            request.setAttribute("status", 403);
            request.setAttribute("msg", "게시글을 삭제할 권한이 없습니다");
            return "error/40x"; // 리다이렉트 하면 데이터 사라지니까 하면 안됨
        }
        boardRepository.deleteById(id);

        return "redirect:/";
    }

    @GetMapping("/board/{id}/updateForm") // 보드에 해당 페이지
    public String updateFormn(@PathVariable int id, HttpServletRequest request) {

        // 인증 체크하기
        User sessionUser = (User) session.getAttribute("sessionUser");
        if (sessionUser == null) {
            return "redirect:/loginForm";
        }

        // 권한 체크하기
        Board board = boardRepository.findById(id);
        if (board.getUserId() != sessionUser.getId()) {
            request.setAttribute("status", 403);
            request.setAttribute("msg", "게시글을 수정할 권한이 없습니다");
            return "error/40x"; // 리다이렉트 하면 데이터 사라지니까 하면 안됨
        }
        // 가방에 담기
        request.setAttribute("board", board);

        return "board/updateForm";
    }
}
 

3. updateForm.mustache 화면 수정하기

{{> /layout/header}}

<div class="container p-5">

    <!-- 요청을 하면 localhost:8080/board/save POST로 요청됨
    title=사용자입력값&content=사용자값 -->
    <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}}

4. detail.mustache에서 수정 버튼에 액션 넣기

  • GET 요청이니까 그냥 하이퍼링크 넣어도 됨
FORM 태그 넣어도 해도 됨
{{> layout/header}}

<div class="container p-5">
    {{#pageOwner}}
        <!-- 수정삭제버튼 -->
        <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>
    {{/pageOwner}}

    <div class="d-flex justify-content-end">
        <b>작성자</b> :  {{board.username}}
    </div>

    <!-- 게시글내용 -->
    <div>
        <h2><b>{{board.title}}</b></h2>
        <hr/>
        <div class="m-4 p-2">
            {{board.content}}
        </div>
    </div>

    <!-- 댓글 -->
    <div class="card mt-3">
        <!-- 댓글등록 -->
        <div class="card-body">
            <form action="/reply/save" method="post">
                <textarea class="form-control" rows="2" name="content"></textarea>
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-outline-primary mt-1">댓글등록</button>
                </div>
            </form>
        </div>

        <!-- 댓글목록 -->
        <div class="card-footer">
            <b>댓글리스트</b>
        </div>
        <div class="list-group">
            <!-- 댓글아이템 -->
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <div class="px-1 me-1 bg-primary text-white rounded">cos</div>
                    <div>댓글 내용입니다</div>
                </div>
                <form action="/reply/1/delete" method="post">
                    <button class="btn">🗑</button>
                </form>
            </div>
            <!-- 댓글아이템 -->
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <div class="px-1 me-1 bg-primary text-white rounded">ssar</div>
                    <div>댓글 내용입니다</div>
                </div>
                <form action="/reply/1/delete" method="post">
                    <button class="btn">🗑</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{> layout/footer}}
notion image
notion image
Share article

More articles

See more posts

POSTMAN으로 Controllet 화면없이 테스트하기

February 8, 2024
POSTMAN으로 Controllet 화면없이 테스트하기

26. 게시글 구현 : 수정 완료하기

February 8, 2024
26. 게시글 구현 : 수정 완료하기

23. 게시글 구현 : 수정 화면 만들기

February 8, 2024
23. 게시글 구현 : 수정 화면 만들기

HTTP 버전

February 6, 2024
HTTP 버전

vosw1

RSS·Powered by Inblog