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

Web/Spring

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

now0204 2023. 8. 2. 22:07

1. 게시판 서비스 계층 구현하기

> Service 인터페이스 생성 (책임 정의)

	public interface BoardService {
		public List<BoardVO> getList();//게시물 가져오기
		public void register(BoardVO board); // 게시물 등록
		public BoardVO get(int bno); //게시물 상세보기
		public int remove (int bno); // 게시물 삭제
		public int modify (BoardVO board);
	
	}

 @Service
public class BoardServiceimpl implements BoardService{
	@Autowired
	private BoardMapper mapper;

- 서비스 구현체는 mapper를 주입 받아 메서드 구현하면 된다.

- 구현체도 @Service 어노테이션을 통해 스프링 컨테이너에 등록해야함

- Controller가 Service와 메시지를 주고받기 때문

- root-context나 servlet-context 어느쪽을 통해 등록해도 상관은 없다.

<context:component-scan base-package="kr.inflearn.service" />

2. 웹 계층 구현(1) - 리스트 보기

2.1 list 메서드 추가

6.	@Controller
7.	public class BoardController {
8.	
9.	@Autowired 
10.	private BoardService service;
11.		
12.	@RequestMapping("/list.do")
13.	public String list(Model model) {
14.		List<BoardVO> list = service.getList();
15.		model.addAttribute("list", list);
16.		return "boardList";
17.	}

2.2 boardList.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!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>메인화면</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Spring WEB MVC 게시판 만들기</div>
    <div class="panel-body">
 <div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>게시물 번호</th>
        <th>제목</th>
        <th>조회수</th>
        <th>등록자</th>
        <th>등록일</th>
        
      </tr>
    </thead>
    <tbody>
    <c:forEach var="vo" items="${list}">
      <tr>
        <td>${vo.idx}</td>
        <td>${vo.title}</td>
        <td>${vo.count}</td>
        <td>${vo.writer}</td>
        <td><fmt:formatDate pattern="yyyy-MM-dd" value="${vo.indate}"/></td>
      </tr>
      </c:forEach>
    </tbody>
  </table>
  </div>
   
    </div>
    <div class="panel-footer">인프런 화이팅</div>
  </div>
</div>

</body>
</html>

3. 등록 UI 만들기 (register.jsp)

3.1 boardList.jsp에 등록버튼 및 script 추가

$(document).ready(function(){
	$("#regBtn").click(()=>{  
		location.href="<c:url value='/register.do'/>";
	});
});

<div class="panel-heading">Spring WEB MVC 게시판 만들기
    <button id="regBtn" type="button" class="btn btn-xs pull-right btn-primary">게시물 쓰기</button>
    </div>

3.2 컨트롤러 요청 방식에 따라 같은 요청을 다른 메서드가 처리하도록 만들기

     @RequestMapping(value="/register.do",method=RequestMethod.GET)
	//@GetMapping
	public String registerGET() {
		return "register"; //게시물 등록 화면 보여주기 (boardList에서)
	}
	@RequestMapping(value="/register.do",method=RequestMethod.POST)
	//@PostMapping
	public String registerPOST(BoardVO board) {
    	service.register(board);
		return "redirect:/list.do"; //게시물 등록 (register.jsp에서)
	}

3.3 register.jsp

<%@ 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 Register</h2>
  <div class="panel panel-default">

    <div class="panel-heading">Board Register</div>
    <div class="panel-body">
  
   <form action="<c:url value='register.do'/>" method="post">
  <div class="form-group">
    <label>Title</label>
    <input type="text" class="form-control" id="title" name="title">
  </div>
  <div class="form-group">
    <label>Text area</label>
   <textarea class="form-control" rows=3 name="contents" ></textarea>
  </div>
  <div class="form-group">
    <label>Writer</label>
    <input type="text" class="form-control" id="writer" name="writer">
  </div>
  <button type="submit" class="btn btn-default">등록</button>
  <button type="reset" class="btn btn-default">취소</button>
</form>
    </div>
    <div class="panel-footer"></div>
  </div>
</div>

</body>
</html>

- 게시글은 textarea 태그