1. 기능별 URI 정의
| 작업 | URI | HTTP 메서드 | 설명 |
| 읽기 | /board/read?bno=번호 | GET | 지정된 번호의 게시물을 보여준다. |
| 삭제 | /board/remove | POST | 게시물을 삭제한다. |
| 쓰기 | /board/write | GET | 게시물을 작성하기 위한 화면을 보여준다. |
| /board/write | POST | 작성한 게시물을 저장한다. | |
| 수정 | /board/modify?bno=번호 | GET | 게시물을 수정하기 위해 읽어온다. |
| /board/modify | POST | 수정된 게시물을 저장한다. |
* URI (아래 두개를 통칭한다. URL과 거의 같은 의미. URL의 일부만 적을 땐 그냥 URI라고 한다.)
URL - 리소스 경로(full경로)
URN - 어떤 리소스에 유일한 이름을 붙임
2. 게시물 읽기 기능의 구현
- boardList 게시물 목록에서 제목을 클릭하면 제목에 걸려있는 링크에 따라서 요청이 간다.
게시물 번호가 자동으로 따라가고, 해당 게시물 번호를 가지고 읽기 요청.
BoardController의 read 메서드가 게시물 번호를 받아서 boardService.read를 호출한다.
그러면 DB가 게시물 하나를 읽어오고 boardDto에 담아서 주면 read 메서드가 board.jsp한테 DB에서 읽어온
boardDto를 전달한다. 그러면 ${boardDto.title}, ${boardDto.content}를 읽어서 화면에 보여주면 된다.
<실습>
- BoardController에 read 메서드 생성
- board.jsp파일 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fastcampus</title>
<link rel="stylesheet" href="<c:url value='/css/menu.css'/>">
</head>
<body>
<div id="menu">
<ul>
<li id="logo">fastcampus</li>
<li><a href="<c:url value='/'/>">Home</a></li>
<li><a href="<c:url value='/board/list'/>">Board</a></li>
<li><a href="<c:url value='/login/login'/>">login</a></li>
<li><a href="<c:url value='/register/add'/>">Sign in</a></li>
<li><a href=""><i class="fas fa-search small"></i></a></li>
</ul>
</div>
<div style="text-align:center">
<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>
</div>
</div>
</body>
</html>
이렇게 설정한 다음 서버를 실행한다.
URL창에 http://localhost/ch4/board/read?bno=253값을 줘서 입력하면 다음과 같은 화면을 볼 수 있다.
지금 게시물 읽기 기능을 구현했다.
게시판 읽기에서 목록 버튼을 누르면 BoardController로 GET요청이 가고, list() 메서드가 호출된다.
그러면 BoardService를 통해서 getPage를 호출해서 한 페이지를 가져오고, 가져온 페이지를 list에 담겨서 반환한다.
BoardService가 그걸 boardList에 보여주는 기능을 구현해보자.
- boarList.jsp로 가서 title에 link를 걸어보자.
<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>
BoardController에서 다음 코드를 추가해준다.
read 메서드 호출 됐을 때 보여주는 jsp 파일에서 값을 목록쪽에 링크를 걸어준다.
jQury가 간단하니까 이걸 사용해본다.
jQury 홈페이지에서 소스 보기를 통해
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
다음 코드를 복사한다.
board.jsp에 붙여넣어준다. 이것만 있으면 jqury를 사용할 수 있다. 우클릭해서 jqury 라이브러리를 다운로드 한다.
board.jsp에 다음 코드를 작성해준 후 서버를 재실행한다.
/board/list를 보여줄 때 해당 페이지와 페이지 사이즈를 보여준다.
title에 링크가 걸려 게시물을 클릭하면, 게시물 읽기로 이동하는 것을 확인할 수 있다.
여기서 목록을 눌러도 이전 페이지 목록으로 이동한다.
3. 게시물 삭제 기능의 구현
- 게시판 읽기에서 삭제 버튼을 누르면, BoardController의 remove로 삭제할 게시물의 번호를 POST로 넘겨주고,
그러면 Controller는 boardService의 remove를 호출하는데 이 때 writer를 호출하고, 작성자도 일치해아한다.
로그인 한 사람의 id를 넘겨줘서 writer로 검사해서 작성자가 맞다면, 삭제가 성공된다.
삭제가 성공한다면 redirect:/board/list로 이동한다.여기서도 page, pageSize가 들어가야한다.
그래야 처음 왔던 페이지로 돌아갈 수 있다.
list가 Controller의 list 메서드를 호출해서 DB에 페이지 요청 후 List<BoardDto>를 가져와서 보여준다.
- BoardController에 remove() 메서드 생성
m.addAttribute("page", page);
m.addAttribute("pageSize", pageSize);이렇게 model에 담아주면, redirect:/board/list?page와 pageSize값이 자동으로 뒤에 붙는다.
- board.jsp에서 삭제 버튼을 눌렀을 때 동작하는 기능 추가
POST로 처리. id가 form인 요소에 대한 참조를 얻어서 form 변수에 저장.
게시물이 잘 삭제되고, 삭제가 수행되면 게시물 목록으로 이동하는 것을 확인할 수 있다.
삭제 버튼을 누르면 삭제를 수행할 지 물어보는 기능과 삭제가 완료되면 해당 메세지를 알리는 기능을 추가하자.
GET방식이라서 model에 있는게 parameter로 전달된다.
이렇게 수정한 후 서버를 실행하여 테스트해본다.
216번 게시물이 삭제되었고, 삭제 시 알림이 뜨는 것을 확인할 수 있다.
- 에러 처리 수행, 메세지가 한 번만 뜨게 하도록 RedirectAttributes 사용
Model이 아니라 RedirectAttributes에 저장해서 addFlashAttribute를 사용해서 메세지를 한 번만 사용할 수 있게한다.
readonly를 지우고, 없는 번호로 bno를 수정한 후 삭제를 누르면 다음과 같은 메세지가 뜨면서 게시물을 삭제하지 않는다.
그리고 해당 메세지는 리로드해도 한 번만 메세지가 출력된다.
'Spring' 카테고리의 다른 글
| ch4 07. 게시판 검색 기능 추가하기(1) (0) | 2023.03.21 |
|---|---|
| ch4 06. 게시판 읽기, 쓰기, 삭제, 수정 기능 구현(2) (0) | 2023.03.21 |
| ch4 04. 게시판 목록 만들기와 페이징 - TDD (2) (0) | 2023.03.17 |
| ch4 03. 게시판 목록 만들기와 페이징 - TDD (1) (0) | 2023.03.17 |
| ch04 02. Mybatis로 DAO 작성하기 (0) | 2023.03.16 |
