Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

bright jazz music

[bootBoard] N:1(다대일) 연관관계: 10-4 화면처리: 게시물 수정/삭제 처리 본문

Framework/Spring

[bootBoard] N:1(다대일) 연관관계: 10-4 화면처리: 게시물 수정/삭제 처리

bright jazz music 2022. 10. 9. 22:47

게시물 수정은 /board/modify 경로를 통해 접근하는 페이지에서 이루어진다.

게시물 조회 페이지에서 수정을 누르고 수정 후 저장 또는 삭제를 수행한다.

 

 

1. BoardController 코드 수정

//BoardController.java
package com.example.bootboard.controller;

import com.example.bootboard.dto.BoardDTO;
import com.example.bootboard.dto.PageRequestDTO;
import com.example.bootboard.service.BoardService;
import lombok.Getter;
import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j2;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@Controller
@RequestMapping("/board/")
@Log4j2
@RequiredArgsConstructor
public class BoardController {
    private final BoardService boardService;

    //목록
    @GetMapping("/list")
    public void list(PageRequestDTO pageRequestDTO, Model model){
        log.info("list............." + pageRequestDTO);
        model.addAttribute("result", boardService.getList(pageRequestDTO));
    }

    //등록(get)
    @GetMapping("/register")
    public void register(){
        log.info("register get...");
    }
    //등록(post)
    @PostMapping("/register")
    public String registerPost(BoardDTO dto, RedirectAttributes redirectAttributes){

        log.info("dto..." + dto);
    //새로 추가된 엔티티의 번호
        Long bno = boardService.register(dto);

        log.info("BNO: " + bno);

        redirectAttributes.addFlashAttribute("msg", bno);

        return "redirect:/board/list";
    }

    //조회 + 접근 가능 경로에 /modify (get)를 추가하였다.
    @GetMapping({"/read", "/modify"})
    public void read(@ModelAttribute("requestDTO") PageRequestDTO pageRequestDTO,
                     Long bno, Model model) {

        log.info("bno: " + bno);
        BoardDTO boardDTO = boardService.get(bno);

        log.info(boardDTO);
        model.addAttribute("dto", boardDTO);
    }

    //삭제
    @PostMapping("/remove")
    public String remove(long bno, RedirectAttributes redirectAttributes) {

        log.info("bno: " + bno);

        boardService.removeWithReplies(bno);
        redirectAttributes.addFlashAttribute("msg", bno);
        //삭제 뒤 목록 페이지롱 이동
        return "redirect:/board/list";
    }

    //수정(post)
    @PostMapping("/modify")
    public String modify(BoardDTO dto
            , @ModelAttribute("requestDTO") PageRequestDTO requestDTO
            , RedirectAttributes redirectAttributes) {

        log.info("post modify.................");
        log.info("dto: " + dto);
        
        boardService.modify(dto);
        //모델에 추가
        redirectAttributes.addAttribute("page", requestDTO.getPage());
        redirectAttributes.addAttribute("type", requestDTO.getType());
        redirectAttributes.addAttribute("keyword", requestDTO.getKeyword());

        redirectAttributes.addAttribute("bno", dto.getBno());
        //수정 뒤 조회 페이지로 이동
        return "redirect:/board/read";
    }

}

 

2. 수정 페이지 생성 modify.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">

    <th:block th:fragment="content">

        <h1 class="mt-4">Board Modify Page</h1>

        <form action="/board/modify" method="post">

            <!--페이지 번호  -->
            <input type="hidden" name="page" th:value="${requestDTO.page}">
            <input type="hidden" name="type" th:value="${requestDTO.type}" >
            <input type="hidden" name="keyword" th:value="${requestDTO.keyword}" >


            <div class="form-group">
                <label >Bno</label>
                <input type="text" class="form-control" name="bno" th:value="${dto.bno}" readonly >
            </div>

            <div class="form-group">
                <label>Title</label>
                <input type="text" class="form-control" name="title" th:value="${dto.title}" >
            </div>
            <div class="form-group">
                <label >Content</label>
                <textarea class="form-control" rows="5" name="content">[[${dto.content}]]</textarea>
            </div>
            <div class="form-group">
                <label >Writer</label>
                <input type="text" class="form-control" name="writer" th:value="${dto.writerEmail}" readonly>
            </div>
            <div class="form-group">
                <label >RegDate</label>
                <input type="text" class="form-control" th:value="${#temporals.format(dto.regDate, 'yyyy/MM/dd HH:mm:ss')}" readonly>
            </div>
            <div class="form-group">
                <label >ModDate</label>
                <input type="text" class="form-control" th:value="${#temporals.format(dto.modDate, 'yyyy/MM/dd HH:mm:ss')}" readonly>
            </div>

        </form>

        <button type="button" class="btn btn-primary modifyBtn">Modify</button>

        <button type="button" class="btn btn-info listBtn">List</button>

        <button type="button" class="btn btn-danger removeBtn">Remove</button>

        <script th:inline="javascript">

            var actionForm = $("form"); //form 태그 객체

            $(".removeBtn").click(function(){

                actionForm
                    .attr("action", "/board/remove")
                    .attr("method","post");

                actionForm.submit();

            });

            $(".modifyBtn").click(function() {

                if(!confirm("수정하시겠습니까?")){
                    return ;
                }

                actionForm
                    .attr("action", "/board/modify")
                    .attr("method","post")
                    .submit();
            });

            $(".listBtn").click(function() {

                //var pageInfo = $("input[name='page']");
                var page = $("input[name='page']");
                var type = $("input[name='type']");
                var keyword = $("input[name='keyword']");

                actionForm.empty(); //form 태그의 모든 내용을 지우고

                actionForm.append(page);
                actionForm.append(type);
                actionForm.append(keyword);


                actionForm
                    .attr("action", "/board/list")
                    .attr("method","get");

                actionForm.submit();

            })

        </script>


    </th:block>

</th:block>

 

 

 

3. 수정 테스트

 

값을 수정하고 Modify 버튼 클릭

모달 창에서 확인 버튼 클릭

 

수정 전

 

수정 후

 

 

 

 

4. 삭제 테스트

 

BNO를 눌러 조회 페이지 -> modify -> Remove 버튼 클릭

Remove 버튼 클릭

 

 

삭제 후

 

107번 글이 사라졌음을 확인 가능

 

 

 

5. 수정/삭제 프로세스의 흐름

 

목록 => 조회 => 수정

 

  • => 값을 입력하고 Modify버튼 클릭 => 조회

또는

  • => 수정 페이지에서 Remove버튼 클릭 => 목록

'Framework > Spring' 카테고리의 다른 글

[bootBoard] N:1(다대일) 연관관계: 11-2. 검색처리: JQPL을 사용한 검색 / leftJoin(), on()  (0) 2022.10.11
[bootBoard] N:1(다대일) 연관관계: 11-1. 검색처리: JQPL을 사용한 검색  (0) 2022.10.09
[bootBoard] N:1(다대일) 연관관계: 10-3 화면처리: 게시물 조회 처리  (0) 2022.10.09
[bootBoard] N:1(다대일) 연관관계: 10-2 화면처리: 게시물 등록 처리  (0) 2022.10.09
[bootBoard] N:1(다대일) 연관관계: 10-1 화면처리: 목록, 페이징  (0) 2022.10.08
'Framework/Spring' Related Articles more
Comments