ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 나프 - 게시판 만들기(2)
    Web/Spring 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 태그 

Designed by Tistory.