게시판 CRUD 기능 구현_읽기, 삭제

기능별 URI 정의

URL - 리소스 경로

URN - 리소스의 유일한 이름

위의 두개를 총칭하는 이름이 URI(Identifier 유일한 이름 명칭)

 

URL : 전체 경로일 경우

URL의 일부만 적을 경우 : URI

 

 

BoardController.java

@Controller
@RequestMapping("/board")
public class BoardController {
    @Autowired
    BoardService boardService;
    
    @GetMapping("/read")
    public String read(Integer bno,Model m){ //읽어온 것을 board.jsp(view)로 전달할 모델
        try {
            BoardDto boardDto = boardService.read(bno);
//            m.addAttribute("boardDto",boardDto);
            m.addAttribute(boardDto); //위 문장과 동일
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "board"; //boardService를 통해 얻어온 게시물 내용을 board.jsp로 전달된다.
    }

먼저 읽기 기능을 만들었다.

 

그 후 board.jsp를 만든다.

    <h2>게시물 읽기</h2>
    <form action="" id="form">
        <input type="text" name="bno" value="${boardDto.bno}" readonly="readonly">
        <input type="text" name="title" value="${boardDto.title}" readonly="readonly">
        <textarea name="content" id="" cols="30" rows="10" readonly="readonly">${boardDto.content}</textarea>
        <button type="button" id="writeBtn" class="btn">등록</button>
        <button type="button" id="modifyBtn" class="btn">수정</button>
        <button type="button" id="removeBtn" class="btn">삭제</button>
        <button type="button" id="listBtn" class="btn">목록</button>
    </form>

---

목록버튼을 눌렀을 때, boardList로 가는 기능을 만든다

 

boardList.jsp

<table border="1">
    <tr>
        <th>번호</th>
        <th>제목</th>
        <th>이름</th>
        <th>등록일</th>
        <th>조회수</th>
    </tr>
    <c:forEach var="boardDto" items="${list}">
        <tr>
            <td>${boardDto.bno}</td>
            <td><a href="<c:url value='/board/read?bno=${boardDto.bno}&page=${page}&pageSize=${pageSize}'/>">${boardDto.title}</a></td>
            <td>${boardDto.writer}</td>
            <td>${boardDto.reg_date}</td>
            <td>${boardDto.view_cnt}</td>
        </tr>
    </c:forEach>
</table>

 

테이블을 누르면 누른 게시물 읽기

BoardController.java

@GetMapping("/list")
public String list(Integer page, Integer pageSize, Model m, HttpServletRequest request) {
    if(!loginCheck(request))
        return "redirect:/login/login?toURL="+request.getRequestURL();  // 로그인을 안했으면 로그인 화면으로 이동

    if(page==null) page=1;
    if(pageSize==null) pageSize=10;

    try {

        int totalCnt = boardService.getCount();
        PageHandler pageHandler = new PageHandler(totalCnt,page,pageSize); //페이지 네비게이션 1

        Map map = new HashMap();
        map.put("offset", (page-1)*pageSize);
        map.put("pageSize", pageSize);

        List<BoardDto> list = boardService.getPage(map);
        m.addAttribute("list", list);
        m.addAttribute("ph",pageHandler);
        
        m.addAttribute("page",page); //페이지 읽기 - 아래줄까지 추가
        m.addAttribute("pageSize",pageSize);
        
    } catch (Exception e) {
        throw new RuntimeException(e);
    }

    return "boardList";
}

 

 

목록 버튼을 누르면 목록이 펼쳐지도록 하기

    @GetMapping("/read")
    public String read(Integer bno,Model m,Integer page,Integer pageSize){ //읽어온 것을 board.jsp(view)로 전달할 모델
        try {
            BoardDto boardDto = boardService.read(bno);
//            m.addAttribute("boardDto",boardDto);
            m.addAttribute(boardDto); //위 문장과 동일
            m.addAttribute("page",page);
            m.addAttribute("pageSize",pageSize);
            
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "board"; //boardService를 통해 얻어온 게시물 내용을 board.jsp로 전달된다.
    }

 

jquery를 사용하기 위해,

board.jsp에 

아래 코드 추가

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

<script>
    $(document).ready(function (){ 
        $('#listBtn').on("click",function (){
           location.href="<c:url value='/board/list'/>?page=&${page}&pageSize=${pageSize}"; 
        });
    });
</script>

---

삭제 기능 구현

 

boardController.java

    @PostMapping("/remove")
    public String remove(Integer bno, Integer page, Integer pageSize, Model m, HttpSession session){
        String writer = (String)session.getAttribute("id"); //writer는 세션으로부터 얻어온다
        try {
            boardService.remove(bno,writer);
        } catch (Exception e) {
            e.printStackTrace();
        }

        m.addAttribute("page",page);
        m.addAttribute("pageSize",pageSize); //모델에 넣으면 자동으로 redirect할때 뒤에 ?page=10&pageSize=10 이렇게 붙는다..

        return "redirect:/board/list";
    }

 

board.jsp로 가서, 삭제 버튼을 눌렀을 때 삭제가 이뤄지게 해준다

 

id가 form인 요소에 대한 참조를 얻어서 form에 넣는다

    $(document).ready(function (){
        $('#listBtn').on("click",function (){
           location.href="<c:url value='/board/list'/>?page=&${page}&pageSize=${pageSize}";
        });

        $('#removeBtn').on("click",function (){
            if(!confirm("정말로 삭제하시겠습니까?")) return;
            let form = $('#form');
            form.attr("action","<c:url value='/board/remove'/>?page=&${page}&pageSize=${pageSize}");
            form.attr("method","post");
            form.submit();
        });
    });

 

삭제가 잘 되었는지에 대한 메시지를 나오게 하려면

boardController.java로 가서

    @PostMapping("/remove")
    public String remove(Integer bno, Integer page, Integer pageSize, Model m, HttpSession session){
        String writer = (String)session.getAttribute("id"); //writer는 세션으로부터 얻어온다
        try {

            m.addAttribute("page",page);
            m.addAttribute("pageSize",pageSize); //모델에 넣으면 자동으로 redirect할때 뒤에 ?page=10&pageSize=10 이렇게 붙는다..

            int rowCnt=boardService.remove(bno,writer);

            if(rowCnt==1){
                m.addAttribute("msg","Delete_OK");
                return "redirect:/board/list";
            }
        } catch (Exception e) {
            e.printStackTrace();
        }


        return "redirect:/board/list";
    }

 

boardList.jsp로 가서

<script>
    let msg ="${param.msg}"
    if(msg=="Delete OK") alert("성공적으로 삭제되었습니다.")
</script>

 

 

예외가 생겼을 때를 대비하여

@PostMapping("/remove")
public String remove(Integer bno, Integer page, Integer pageSize, Model m, HttpSession session){
    String writer = (String)session.getAttribute("id"); //writer는 세션으로부터 얻어온다
    try {

        m.addAttribute("page",page);
        m.addAttribute("pageSize",pageSize); //모델에 넣으면 자동으로 redirect할때 뒤에 ?page=10&pageSize=10 이렇게 붙는다..

        int rowCnt=boardService.remove(bno,writer);

        if(rowCnt!=1)
            throw new Exception("board remove error");
        
        m.addAttribute("msg","Delete_OK");
          
        
    } catch (Exception e) {
        e.printStackTrace();
        m.addAttribute("msg","DEL_ERR");
    }


    return "redirect:/board/list";
}

 

boardList.jsp로 가서

<script>
    let msg ="${param.msg}"
    if(msg=="Delete_OK") alert("성공적으로 삭제되었습니다.")
    if(msg=="DEL_ERR") alert("삭제에 실패하였습니다.")
</script>

 

메세지를 삭제하는데 실패하게 한 후,

새로고침하면 "삭제에 실패하였습니다" 메세지가 계속 뜬다.

메세지가 한 번만 뜨게 하려면,

RedirectAttributes rattr

를 추가해서 모델이 아닌 RedirectAttributes에 저장하면 한 번만 메세지가 나온다.

세션에 한 번 저장했다가 지워버리는 것이기 때문에 부담이 없다.

@PostMapping("/remove")
public String remove(Integer bno, Integer page, Integer pageSize, Model m, HttpSession session, RedirectAttributes rattr){
    String writer = (String)session.getAttribute("id"); //writer는 세션으로부터 얻어온다
    try {

        m.addAttribute("page",page);
        m.addAttribute("pageSize",pageSize); //모델에 넣으면 자동으로 redirect할때 뒤에 ?page=10&pageSize=10 이렇게 붙는다

        int rowCnt=boardService.remove(bno,writer);

        if(rowCnt!=1)
            throw new Exception("board remove error");

        rattr.addFlashAttribute("msg","Delete_OK");


    } catch (Exception e) {
        e.printStackTrace();
        rattr.addFlashAttribute("msg","DEL_ERR");
    }


    return "redirect:/board/list";
}

 

param을 쓰면 안된다고 한다

<script>
    let msg ="${msg}"
    if(msg=="Delete_OK") alert("성공적으로 삭제되었습니다.")
    if(msg=="DEL_ERR") alert("삭제에 실패하였습니다.")
</script>

---