[스프링부트 게시판 만들기] 글 상세 조회, 게시글 수정, 삭제 구현
my code archive
article thumbnail
반응형

🤍게시판 글 상세 조회 구현

글 조회 컨트롤러 코드 작성

@GetMapping("/board/view")  //localhost:8080/board/view?id=1
    public String boardView(Model model, Integer id){
        model.addAttribute("bootboard",boardService.boardView(id));
        return "boardview";
    }

 

글 조회 화면 boardview.html 작성

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>게시글 상세 페이지</title>
</head>
<body>
    <h1 th:text="${bootboard.title}">제목입니다.</h1>
    <p th:text="${bootboard.content}">내용입니다.</p>
    <!--
    th:href : a태그에 경로 걸 때 사용
    th:text : 태그에 문자열을 출력할 때 사용
    -->
</body>
</html>

 

글 조회 서비스 코드 작성

//특정 게시글 불러오기
    public Bootboard boardView(Integer id){
        return boardRepository.findById(id).get();
    }

 

글 목록에서 제목을 클릭했을 때 상세 조회 화면으로 넘어가도록 boardList.html 수정

 <td>
     <a th:text="${bootboard.title}" th:href="@{/board/view(id=${bootboard.id})}"></a>
 </td>

 

실행해 보면 글 제목에 <a> 태그가 적용되었다. 제목을 클릭하면

 

게시글 상세 페이지로 이동한다.

 


🤍게시판 글 삭제 구현

 

게시글 상세 페이지에 글 삭제 버튼 추가

<a th:href="@{/board/delete(id=${bootboard.id})}">글 삭제</a>

 

게시글 삭제 서비스 코드 작성

    //특정 게시글 삭제
    public void boardDelete(Integer id){
        boardRepository.deleteById(id);
    }

 

컨트롤러 코드 작성

    @GetMapping("/board/delete")
    public String boardDelete(Integer id){
        boardService.boardDelete(id);
        return "redirect:/board/list";
    }

 

삭제 버튼을 클릭하면

 

글이 삭제됨.


🤍게시판 글 수정 구현

먼저 게시판 글을 수정할 수 있는 화면을 만들어야 한다. 그리고 그 화면에는 DB에 저장된 글 제목, 내용이 담겨있어야 한다.

 

boardmodify.html 작성

  • 여기에서 중요한 점은 th:value이다.
  • 기존에는 쿼리스트링을 사용하여 글 상세 조회 시에도 board/boardview?id=1 이런 식으로 조회했는데 이번에는 @PathVariable 어노테이션을 사용하여 좀더 깔끔하게 구현할 것이다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>게시물 작성폼</title>
</head>

<style>
    .layout{
        width: 500px;
        margin: 0 auto;
        margin-top: 40px;
    }

    .layout textarea{
        width: 100%;
        margin-top: 10px;
        min-height: 300px;
    }

    .layout input{
        width: 100%;
        box-sizing: border-box;
    }
</style>

<body>
  <div class="layout">
      <form th:action="@{/board/update/{id}(id=${bootboard.id})}" method="post">
          <input name="title" type="text" th:value="${bootboard.title}">
          <textarea name="content" th:text="${bootboard.content}"></textarea>
          <button type="submit">수정</button>
      </form>
  </div>
</body>
</html>

게시글 수정 컨트롤러 코드 작성

  • @PathVariable 사용
  • 기존 글을 가져옴 -> 수정한 내용을 덮어씌움 -> 수정 후 글 목록 화면으로 리다이렉트
    @PostMapping("/board/update/{id}")
    public String boardUpdate(@PathVariable("id") Integer id, Bootboard bootboard, MultipartFile file) throws Exception{
        //기존 글을 가져옴
        Bootboard boardTemp = boardService.boardView(id);
        boardTemp.setTitle(bootboard.getTitle());
        boardTemp.setContent(bootboard.getContent());

        //수정한 내용 덮어씌움
        boardService.write(boardTemp, file);

        return "redirect:/board/list";
    }

 

실행해 보면 수정 페이지에 디비에 저장된 글 제목, 내용이 담겨있다.

제목, 내용을 바꾸고 수정 버튼을 누르면

수정 완료!!


🤍글 작성 후 메시지 띄우기 구현

메시지 띄우기 위한 message.html 작성

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script th:inline="javascript">
    /*<![CDATA[*/

    var message = [[${message}]];
    alert(message);

    location.replace([[${searchUrl}]]);

    /*]]>*/
</script>
<body>

</body>
</html>

메시지를 화면단으로 전달하기 위한 컨트롤러 코드 수정

@PostMapping("/board/writepro")
    public String boardWritePro(Bootboard bootboard, Model model, MultipartFile file) throws Exception{
        boardService.write(bootboard, file);
        model.addAttribute("message","글 작성이 완료되었습니다.");
        model.addAttribute("searchUrl","/board/list");
        return "message";
    }

 

글 작성 후 버튼을 눌러보면

이렇게 메시지 창이 알맞게 잘 나온다.

에러가 계속 나서 글이 3개나 등록됐다..ㅎㅎㅎ오늘도 쉽지 않군...

반응형
profile

my code archive

@얼레벌레 개발자👩‍💻

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

반응형