회원가입, 로그인, 게시판 백엔드 실습( 게시판 디테일 )

게시판 리스트에서 게시글의 제목을 클릭하면 디테일로 이동할 수 있게 만들었다.

 : 디테일로 이동하면 하나의 게시글에 대한 상세 정보를 볼 수 있고, 이를 수정 / 삭제할 수 있는 기능을 넣을 것이다.

 

1. Controller

@Controller
public class BoardController {
	
	@Autowired
	BoardService bs;
    
    // 게시글 Detail
	@RequestMapping(value = "/board/detail", method = RequestMethod.GET)
	public String detail (BoardVO board, Model model) {
		model.addAttribute("detail", bs.detail(board));
		return "board/detail";
	}
    
    // 게시글 수정
	@RequestMapping(value = "/board/modify", method = RequestMethod.POST)
	public String modify(BoardVO board, RedirectAttributes rttr) {
		bs.modify(board);
		System.out.println(board);
		rttr.addAttribute("board_no", board.getBoard_no());
		return "redirect:/board/detail";
	}
	
	// 게시글 삭제
	@RequestMapping(value = "/board/remove", method = RequestMethod.POST)
	public String remove(BoardVO board) {
		bs.remove(board);
		return "redirect:/board/list";
	}
}

 - 게시글을 수정한 후, RedirectAttributes 를 이용해서, board_no= 파라메터로 이동할 수 있게 만들었다.

그래서 수정 후 결과물을 바로 확인할 수 있다.

 

2. Service , ServiceImpl

public interface BoardService {
	//글 내용 상세 보기
	public BoardVO detail(BoardVO board);
	
	// 글 수정 설계
	public void modify(BoardVO board);
	
	// 글 삭제 설계
	public void remove(BoardVO board);
}

@Service
public class BoardServiceImpl implements BoardService{
	@Autowired
	BoardMapper bm;
	
    // 글 디테일 보기
	@Transactional
	public BoardVO detail(BoardVO board) {
		// 상세 페이지 조회 시 조회수 +1 함수를 넣어주자.
		bm.cntup(board);
		return bm.detail(board);
	}
	
	// BoardService에서 설계된 modify 추상 메서드 구현
	public void modify(BoardVO board) {
		bm.modify(board);
	}
	
	// BoardService에서 설계되어진 remove 추상 메서드 구현
	public void remove(BoardVO board) {
		bm.remove(board);
	}
	
}

 - @Transactional : 해당 어노테이션이 붙어있는 함수는 작업을 수행하던 중 하나라도 에러가 발생하면

작업하기 전으로 롤백한다. ( 자동으로 증가하는 increse 카운터도 롤백된다. )

 

3. Mapper , Mapper.Impl

public interface BoardMapper {
	// 글의 상세 내용 조회
	public BoardVO detail(BoardVO board);
	// 글의 제목을 클릭한 후 상세내용 조회
	public void cntup(BoardVO board);
	
	// 글의 내용 수정하는 DB 설계 작업
	public void modify(BoardVO board);
	
	// 글을 삭제하는 DB 설계작업
	public void remove(BoardVO board);
}

<select id="detail" resultType="hjm.portfolio.model.BoardVO">
  		select * from port_board
  		where board_no = #{board_no}
  	</select>
  	<update id="cntup">
  		update port_board
  		set counts = counts + 1
  		where board_no = #{board_no}
  	</update>
  	
  	<update id="modify">
  		update port_board
  		set title=#{title}, contents=#{contents}
  		where board_no=#{board_no}
  	</update>
  	
  	<delete id="remove">
  		delete from port_board
  		where board_no=#{board_no}
  	</delete>

 

4. jsp

<form method="post">
	<div class="container-fluid px-4">
		<h1 class="mt-4"><span class="tohidden">${detail.title}</span><input id="titleinput" type="hidden" name="title" value="${detail.title}"></h1>
			<div class="card mb-4">
			<div>
			<div>
				<p style="margin-bottom:2px">${detail.id}<input type="hidden" name="id" value="${detail.id}"></p>
				<span>${detail.updated_time}<input type="hidden" name="update_time" value="${detail.updated_time}"></span>
				<span>조회 ${detail.counts}<input type="hidden" name="counts" value="${detail.counts}"></span>
				<input type="hidden" name="board_no" value="${detail.board_no }">
			</div>
	                            	
			<div></div>
			</div>
			</div>
		<div class="card mb-4">
			<div class="card-header" style="height:5px">
			</div>
		<div class="card-body">
			<div class="tohidden">${detail.contents}</div>
			<textarea id="contentsinput" rows="30" cols="80" style="display:none" name="contents">${detail.contents}</textarea>
			</div>
		</div>
	</div>
		<c:set var="article_id" value="${detail.id}" />
		<c:if test="${article_id eq sessionScope.login}">
 			<input id="modifybtn" type="button" value="수정">
			<input id="removebtn" type="submit" value="삭제" formaction="/board/remove">
		</c:if>
		<input type="hidden" id="modifycomplete" value="수정 완료" formaction="/board/modify">
</form>

<script>
	const modifybtn = document.getElementById("modifybtn");
	const titleinput = document.getElementById("titleinput");
	const contentsinput = document.getElementById("contentsinput");
	const modifycomplete = document.getElementById("modifycomplete");      	
	const tohidden = document.querySelectorAll(".tohidden");
	const removebtn = document.getElementById("removebtn");
         	
	modifybtn.addEventListener("click", function() {
         		
	titleinput.setAttribute("type","text");
	contentsinput.style.display = "block";
	modifybtn.style.display = "none";
	modifycomplete.setAttribute("type", "submit");
	removebtn.setAttribute("type","hidden");
         		
	for (let i = 0; i < tohidden.length; i++){
		tohidden[i].style.display = "none";
	}
    
	});
</script>

 - c:set , c:if 태그를 이용해서 현재 session에 저장된 id와 현재 게시글의 작성자가 동일하다면,

게시글을 수정 / 삭제 할 수 있는 버튼이 나타나도록 코드를 작성했다.

 

 - 자바스크립트를 이용해서 수정 버튼을 클릭 할 시 게시글의 제목과 내용을 변경할 수 있도록 attribute를 변경하게 만들었다.