글 수정 기능 추가

1. 글 수정기능 추가

---

• 현재 글을 수정할 수 있는 기능이 없다..
• 다음과 같이 수정 버튼을 클릭하면 글 수정 페이지로 이동하여 수정하도록 하자.

 

 

 

2. post.html

---

• HTML하단에 다음과 같이 추가해 주자.
• 버튼을 나란히 두고 싶어서 <div class="d-grid gap-2 d-md-block">을 사용함.
• 글을 삭제하는 form tag안에 수정 페이지로 이동하는 버튼을 추가했다.
• 수정 페이지로 이동은 GET방식으로 button의 type을 button으로 지정하면 submit button과 별도로 움직일 수 있음.

    <div class="d-grid gap-2 d-md-block">
        <form th:action="@{/posts/{postId}/delete(postId=${post.id})}" method="post">
            <button class="btn btn-primary" type="button"  th:onclick="|location.href='@{/posts/{postId}/edit(postId=${post.id})}'|">수정</button>
            <button class="btn btn-secondary float-end" type="submit" th:onclick="|location.href='@{/posts/{postId}/delete(postId=${post.id})}'|">삭제</button>
        </form>
    </div>

 

 

 

3. editform.html

---

• 기존 글 등록 form과 유사.
• th:field를 사용하면 model로 넘어온 파라미터의 값을 input 에 보여줌.
• 즉 기존에 작성된 내용을 input창에 보여준다.

        <form action="post.html" th:action="@{/posts/{postId}/edit(postId=${post.id})}" th:object="${post}" method="post">
            <div class="form-group">
                <label for="title" class="form-label"><h3>Title</h3></label>
                <input type="text" class="form-control" th:field="*{title}" name="title" id="title" placeholder="제목을 입력">
            </div>
            <br>
            <br>
            <div class="form-group">
                <label for="content"><h3>Content</h3></label>
                <!--/*@thymesVar id="content" type=""*/-->
                <textarea class="form-control" row="100" th:field="*{content}" name="content" id="content"></textarea>
            </div>
            <br>
            <button type="submit" class="btn btn-primary" >Submit</button>
        </form>

 

 

 

4. PostController

---

• Get 방식으로 /{postId}/edit 으로 접속하면, 해당 postId를 가지고  Post Entity를 찾는다.
• 해당 Entity를 Dto로 변환하여 Model에 담아 수정 view로 이동.
• view에서 수정된 data를 Post방식으로 /{postId}/edit으로 접속.
• 넘어온 PostId를 가지고 Post Entity를 찾아 제목과 본문 내용을 수정함.

    @GetMapping("/{postId}/edit")
    public String editForm(@PathVariable("postId") Long id, HttpServletRequest request, Model model){

        getLoginMemberAndAddToModel(request, model);

        PostDto postDto = postService.findPostById(id).postToDto();
        model.addAttribute("post", postDto);

        return "post/editform";
    }

    @PostMapping("/{postId}/edit")
    public String editPost(@PathVariable("postId") Long id, @ModelAttribute("post") PostDto postDto
                            ,HttpServletRequest request,Model model, RedirectAttributes redirectAttributes){

        getLoginMemberAndAddToModel(request, model);

        Post post = editPostUsingDto(id, postDto);

        model.addAttribute("post", post.postToDto());
        redirectAttributes.addAttribute("postID", postDto.getId());
        return "redirect:/posts/{postId}";
    }

    private Post editPostUsingDto(Long id, PostDto postDto) {
        Post post= postService.findPostById(id);
        post.changeTitle(postDto.getTitle());
        post.changeContent(postDto.getContent());
        postService.savePost(post);
        return post;
    }

 

 

5. 결과

---

• 수정버튼 추가

• 수정 화면으로 이동 시 기존에 작성된 내용 확인 가능

• 게시글 수정

• 수정됨!

 

 

 

6. 앞으로

---

• est용 data 서버시작할 때 DB에 올리기
• Listener
  
  • createdAt, updatedAt등
• 게시글에 작성자 표시
• view 정리
• 게시글 검색
  • 검색 옵션 추가 : 작성자, 제목 구분
• 영속성 전이 설정
  • 게시글 삭제
  • 회원 탈퇴
• 댓글 삭제 버튼
• 글 수정 기능 추가
• 대댓글
• 검증 & 예외처리
  • 회원 가입시 필수 정보 지정.
  • 데이터 타입 지정
• 인증처리
  • 로그인한 사용자만 글 & 댓글 작성 가능.
  • 본인이 작성한 글, 댓글만 삭제 가능
  • 관리자는 모든 권한
• 예외처리
• 페이징 처리
• 컬렉션 조회 최적화

 

7.GitHub: 211010 edit Post

---

GitHub - bsh6463/blog