나프 - 게시판 만들기 (3)

Web/Spring

나프 - 게시판 만들기 (3)

now0204 2023. 8. 3. 12:32

1. 등록 및 조회 구현

List.jsp 타이플에 a태그 걸어서 상세보기 페이지로 넘어가도록 함

<td><a href="<c:url value='/get.do?bno=${vo.idx}'/>">${vo.title}</a></td>

@RequestMapping("/get.do")
	public String get(@RequestParam("bno") int bno, Model model) {
		BoardVO board=service.get(bno);
		model.addAttribute("board", board);
		return "get";//get.jsp
	}

- 처리 컨트롤러, 넘어온 번호를 통해 DB에서 해당 번호에 게시글 찾아서 BoardVO에 담아서 리턴

- model에 이를 담은 다음 get.jsp로 forward

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Board Read</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Board Read Page</div>
    <div class="panel-body">Panel Content
     
     <div class="form-group">
    <label>BNO</label>
    <input type="text" class="form-control" id="idx" name="idx" value="${board.idx}" readonly="readonly">
  </div>
    
    <div class="form-group">
    <label>Title</label>
    <input type="text" class="form-control" id="title" name="title" value="${board.title}" readonly="readonly">
  </div>
  <div class="form-group">
    <label>Text area</label>
   <textarea class="form-control" rows=3 name="contents"readonly="readonly" >${board.contents}</textarea>
  </div>
  <div class="form-group">
    <label>Writer</label>
    <input type="text" class="form-control" id="writer" name="writer" value="${board.writer}" readonly="readonly">
  </div>
    
    <button class="btn btn-default">Modify</button>
    <button class="btn btn-info">List</button>
    </div>
     <div class="panel-footer">Panel Content</div>
  </div>
</div>

</body>
</html>

- get.jsp는 위와 같다.

2. 수정페이지 구현

- get.jsp에 modify나 List버튼을 누르면, 수정페이지 혹은 List페이지로 넘어가도록 버튼을 설정

$(document).ready(()=>{
	$("#list").click(()=>{
		location.href="<c:url value='/list.do'/>";
	});
	
	$("#modify").click(()=>{
		const idx = $("#idx").val();
		location.href="<c:url value='/modify.do'/>?bno="+idx;
	})
});

- 이때 게시물의 번호를 가져가야한다. -> 특정 글에 대한 수정이므로, 수정페이지는 특정 게시글 기반으로 페이지를 꾸려야하기 때문

@RequestMapping(value="/modify.do",method=RequestMethod.GET) //get.jsp에 modify버튼
	public String modifyGET(@RequestParam("bno") int bno, Model model){
		BoardVO board=service.get(bno);
		model.addAttribute("board", board);
		return "modify";

- modify.do를 get 혹은 post방식으로 나누어 처리하도록 하자

- get방식으로 넘어온 요청은 get.jsp에 modify버튼이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(()=>{
	$("#list").click(()=>{
		
		location.href="<c:url value='/list.do'/>"
	})
	
	
});

</script>

</head>
<body>
 
<div class="container">
<h2>Board Modify Page</h2>
  <div class="panel panel-default">

    <div class="panel-heading">Board Modify Page</div>
    <div class="panel-body">
  
   <form action="<c:url value='modify.do'/>" method="post">
  
  <div class="form-group">
    <label>Bno</label>
    <input type="text" class="form-control" id="idx" name="idx" value="${board.idx}" readonly="readonly">
  </div>
  
  
  <div class="form-group">
    <label>Title</label>
    <input type="text" class="form-control" id="title" name="title" value="${board.title}">
  </div>
  <div class="form-group">
    <label>Text area</label>
   <textarea class="form-control" rows=3 name="contents" >${board.contents}</textarea>
  </div>
  <div class="form-group">
    <label>Writer</label>
    <input type="text" class="form-control" id="writer" name="writer" value="${board.writer}" readonly="readonly">
  </div>
  <button type="submit" class="btn btn-default">Modify</button>
  <button id="remove" type="button" class="btn btn-default">Remove</button>
  <button id="list" type="button" class="btn btn-info">List</button>
</form>
    </div>
    <div class="panel-footer"></div>
  </div>
</div>

</body>
</html>

-modify.jsp -> 몇가지 readonly 속성만 제외하면, register와 유사

3. 수정 및 삭제 구현

- modify.jsp에서 버튼을 통해 수정 혹은 삭제 요청이 발생할 때 이를 처리할 컨트롤러 구성

@RequestMapping(value="/modify.do",method=RequestMethod.POST)
	public String modifyPOST(BoardVO board){
		service.modify(board);
		return "redirect:/list.do";
	}
	
	
	@RequestMapping("/remove.do")
	public String remove(@RequestParam("bno") int bno) {
		service.remove(bno);
		return "redirect:/list.do";
	}

$("#remove").click(()=>{
		
		location.href="<c:url value='/remove.do'/>?bno=${board.idx}";
	});

- modify.jsp에 삭제만 추가, modify는 form에 submit을 통해 post방식으로 전달된다.

4. 조회수 업데이트

4.1 xml 및 인터페이스에 메서드 추가

<update id="countUpdate" parameterType = "Integer">
     update tb_board set count=count+1 where idx=#{idx}
</update>

public void countUpdate(int bno);

- 상세보기 클릭시 조회수가 올라가도록 처리할 것이다.

- service에 get이 호출 될 때마다 mapper에 countUpdate메서드가 실행되도록 하자

- 상세보기 클릭시 해당 게시물의 번호가 넘어온다. 이를 받아서 해당 게시물 번호의 조회수를 업데이트 하자

4.2 service메서드 기존 get에 mode추가

@Override
	public BoardVO get(int bno, String mode) {
		if(mode.equals("get"))
		mapper.countUpdate(bno);
		return mapper.read(bno);
	}

- List.jsp에서 상세보기를 클릭시, 혹은 modify버튼을 클릭 시 두가지 경우에 service메서드에 get이 호출 된다.

- 이때 조회수는 controller에 get메서드에 의해서만 조회수가 올라가고 modify메서드에는 반응하면 안된다.

- 따라서 get에 mode 매개변수를 추가하여, 서비스의 get이 호출 될 때, 컨트롤러에 get메서드인지 modify메서드인지에 따라 조회수를 올릴 것인지 말 것인지를 결정하도록 하자

@RequestMapping("/get.do")
	public String get(@RequestParam("bno") int bno, Model model) {
		BoardVO board=service.get(bno,"get");
		model.addAttribute("board", board);
		return "get";//get.jsp
	}
    
    @RequestMapping(value="/modify.do",method=RequestMethod.GET)
	public String modifyGET(@RequestParam("bno") int bno, Model model){
		BoardVO board=service.get(bno,"modify");
		model.addAttribute("board", board);
		return "modify";
	}