spring-mvc/board

Spring legacy 프로젝트 게시판 만들기(7) - 작성(INSERT)

crone 2021. 6. 21. 17:28
 

Spring legacy 프로젝트 게시판 만들기(6) - 검색

Spring legacy 프로젝트 게시판 만들기(5) - 게시판 페이징 view Spring legacy 프로젝트 게시판 만들기(5) - 게시판 페이징 Spring legacy 프로젝트 게시판 만들기(4) - 수정하기 Spring legacy 프로젝트 게시판..

cronex.tistory.com


이어서 페이징 위에 글쓰기 버튼을 만들어서 작성을 할 수 있도록 하겠습니다. table과 페이징 div 사이에 버튼을 만들겠습니다.

 

-board.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 추가 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이징 게시판</title>
<style type="text/css">
.table>tbody tr:hover {
	background: rgb(200, 200, 200);
	cursor: pointer;
}

.table tr {
	border-bottom: 1px solid #999;
}

.table {
	padding: 30px;
	margin: 0px auto;
	font-size: 20px;
	font-weight: normal;
}

.table thead {
	border-top: 2px solid #666;
}
</style>

</head>
<body>
	<jsp:include page="../common/sidebar.jsp" />
	<div class="content">
		<div style="padding-top : 100px;">
			<table class="table"
				style="border-collapse: collapse; width: 1200px; text-align: center;">
				<colgroup>
					<col width="15%">
					<col width="20%">
					<col width="40%">
					<col width="15%">
				</colgroup>
				<thead>
					<tr>
						<th>번호</th>
						<th>제목</th>
						<th>작성자</th>
						<th>작성일</th>
					<tr>
				</thead>
				<tbody class="board-tbody">
					<!-- forEach로 변경된 body부분 -->
					<c:forEach items="${requestScope.list}" var="board">
						<tr>
							<td>${board.board_id}</td>
							<td>${board.board_title}</td>
							<td>${board.board_writer}</td>
							<td>${board.board_date}</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			
			<!-- 글쓰기 버튼 -->
			<div style="text-align:right; padding-right :10%; margin-top : 20px;">
				<button id="write">글쓰기</button>
			</div>
			
			<!-- 페이징 -->
			<div style="text-align: center; margin-top: 30px;">
				<c:choose>
					<c:when test="${empty requestScope.searchValue}"> 				<!-- 1 -->
					
						<button id="startPage"><<</button>			  				<!-- 2 -->
						
						<c:if test="${requestScope.pageInfo.pageNo <= 1}">      	<!-- 3 -->
							<button disabled><</button>
						</c:if>
						
						<c:if test="${requestScope.pageInfo.pageNo > 1}">			<!-- 4 -->
							<button id="prevPage"><</button>
						</c:if>

						<c:forEach var="p" begin="${requestScope.pageInfo.startPage}" 
						end="${requestScope.pageInfo.endPage}" step="1">			<!-- 5 -->
						
							<c:if test="${requestScope.pageInfo.pageNo eq p}">		<!-- 6 -->
								<button disabled>
									<c:out value="${p}"></c:out>
								</button>
							</c:if>
							
							<c:if test="${requestScope.pageInfo.pageNo ne p}">		<!-- 7 -->
								<button class="paging-button">
									<c:out value="${p}"></c:out>
								</button>
							</c:if>

						</c:forEach>

						<c:if													
							test="${requestScope.pageInfo.pageNo >= requestScope.pageInfo.maxPage}"> <!-- 8 -->
							<button disabled>></button>
						</c:if>
						
						<c:if
							test="${requestScope.pageInfo.pageNo < requestScope.pageInfo.maxPage}">	  <!-- 9 -->
							<button id="nextPage">></button>
						</c:if>

						<button id="maxPage">>></button>											<!-- 10 -->

					</c:when>
					
					<c:otherwise>

					</c:otherwise>
				</c:choose>
			</div>
		</div>
	</div>
	<!-- detail 페이지 이동 js -->
	<script type="text/javascript">
	const PAGING_PATH = "${pageContext.servletContext.contextPath}/board";
	$(function(){
		
		/*list에서 게시물 클릭 시 해당 게시물 상세 페이지로 이동*/
		$(".board-tbody > tr").on("click", function(){
			let number = $(this).children().eq(0).text(); /*board number*/
			location.href = "${pageContext.servletContext.contextPath}/board/" + number;
		})
		
		$("#startPage").on("click", function(){
			
			location.href = PAGING_PATH + "?currentPage=1";
		})
		
		$("#prevPage").on("click", function(){
			
			location.href = PAGING_PATH + "?currentPage=${reqeustScope.pageInfo.pageNo - 1}";
		})													
		
		$("#nextPage").on("click", function(){
			
			location.href = PAGING_PATH + "?currentPage=${requestScope.pageInfo.pageNo + 1}";
		})
		
		$("#maxPage").on("click", function(){
			
			location.href = PAGING_PATH + "?currentPage=${requestScope.pageInfo.maxPage}";
		})
		
		$(".paging-button").on("click", function(){
			let pageNumber = $(this).text();
			location.href = PAGING_PATH +"?currentPage="+pageNumber;
		})
		
	})
</script>
</body>
</html>

 

브라우저에서 확인해 보면 아래와 같습니다.

 

board list

 

이제 글쓰기 버튼을 누르면 작성 페이지로 요청을 보내고 페이지를 이동 하도록 하겠습니다. board.jsp 에 function을 추가 하도록 하겠습니다.

$("#write").on("click", function(){
			
			location.href = "${pageContext.servletContext.contextPath}/write";
		})

 

요청을 받을 controller를 작성 하겠습니다.

 

	/*
	 * 작성 페이지 controller
	 * */
	@RequestMapping(value="/write", method = RequestMethod.GET)
	public String write() {
		
		return "board/writeForm";
	}

 

 

 페이지만 보여주기 때문에 따로 service와 repository는 작성하지 않겠습니다.

 

- writeForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>수정페이지</title>
<style>
table.table2 {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	margin: 20px 10px;
}

table.table2 tr {
	width: 50px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}

table.table2 td {
	width: 100px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}
.board-ul {
	list-style : none;
	padding-left : 0px;
}
.board-ul li {
	text-align : center;
	
}
.board-ul li input {
	width : 80%;
	height : 27px;
	
}
.board-ul li input:focus {
	outline : none;
}
.ul-span {
	margin-right :10px; 
	font-size : 20px; 
	font-weight: bold; 
	line-height:40px;
}
.board-ul li textarea:focus {
	outline : none;
}
.board-ul li textarea {
	resize: none;
}

</style>
<body>
	<jsp:include page="../common/sidebar.jsp" />
	<div class="content">
		<div
			style="padding-top: 50px; text-align: center; width: 700px; border: 0px;margin-left : 350px;">
			<div style="border-bottom : 3px solid #999;">
				<span style="font-size :40px; font-weight: bold;">글쓰기</span>
			</div>
			<form method="POST" action="write">
				<ul class="board-ul">
					<li>
						<span class="ul-span">제목 : </span>
						<input type="text" placeholder="제목을 입력해 주세요" name="board_title"></li>
					<li style="margin-top : 30px;">
						<textarea rows="25" cols="88" name="board_text"></textarea>
					</li>
					<li>
						<div style="text-align: right; padding-right:28px; margin-top : 10px;">
							<button type="submit" style="width:70px;" id="submit">작성</button>
							<button id="back">뒤로가기</button>
						</div>
					</li> 
				</ul>
			</form>
		</div>
	</div>
</body>
</html>


 

 

브라우저에서 확인해 보면 아래와 같습니다. 간단하게 제목과 내용만 입력 할 수 있도록 만들었습니다.

 

작성 페이지

 

제목과 내용을 작성 후 작성 버튼을 누르면 POST 요청을 받을 controller를 작성하도록 하겠습니다.

 

- BoardController.java

	/*
	 * 작성 페이지 controller
	 * 
	 * */
	@RequestMapping(value = "/write", method = RequestMethod.POST)
	public String write(@ModelAttribute BoardDTO board) {
		
		int boardNumber = boardService.insertBoard(board);
		
		return "redirect:/board/" + boardNumber;
	}

 

-BoardService.java (interface)

 

package com.js.board.model.service;

import java.util.List;

import com.js.board.model.dto.BoardDTO;
import com.js.board.model.dto.PageInfoDTO;

public interface BoardService {
	
	/*select board list*/
	public List<BoardDTO> selectBoardList(PageInfoDTO pageInfo);

	/*select board*/
	public BoardDTO selectById(int number);

	/*update board*/
	public void updateById(BoardDTO board);

	/*count board*/
	public int totalCount();

	/*insert board*/
	public int insertBoard(BoardDTO board);

}

 

- BoardServiceImpl.java

/*
	 * board insert method
	 * @param board 입력한 게시물 정보
	 * return boardNumber
	 * */
	@Override
	public int insertBoard(BoardDTO board) {
		
		int boardNumber = boardRepository.selectNextVal(sqlSession);
		
		board.setBoard_id(boardNumber);
		boardRepository.insertBoard(sqlSession, board);
		
		
		return boardNumber;
	}

 

-BoardRepository.java (interface)

package com.js.board.model.repository;

import java.util.List;

import org.mybatis.spring.SqlSessionTemplate;

import com.js.board.model.dto.BoardDTO;
import com.js.board.model.dto.PageInfoDTO;

public interface BoardRepository {

	/*select Board List*/
	public List<BoardDTO> selectBoardList(SqlSessionTemplate sqlSession, PageInfoDTO pageInfo);
	
	/*select Board*/
	public BoardDTO selectById(int number, SqlSessionTemplate sqlSession);

	/*update Board*/
	public int updateById(BoardDTO board, SqlSessionTemplate sqlSession);

	/*count board*/
	public int totalCount(SqlSessionTemplate sqlSession);

	/*select board nextVal*/
	public int selectNextVal(SqlSessionTemplate sqlSession);

	/*insert board*/
	public void insertBoard(SqlSessionTemplate sqlSession, BoardDTO board);
	
}

 

-BoardRepositoryImpl.java

	/*
	 * board sequence nextval 조회
	 * param sqlSession 쿼리문 실행할 객체
	 * return 시퀀스 nextval 값
	 * */
	@Override
	public int selectNextVal(SqlSessionTemplate sqlSession) {
		return sqlSession.selectOne("board.boardNextval");
	}

	/*
	 * board 정보 db에 입력(insert)
	 * param sqlSession 쿼리문 실행할 객체
	 * param board 입력한 board정보
	 * */
	@Override
	public void insertBoard(SqlSessionTemplate sqlSession, BoardDTO board) {
		sqlSession.insert("board.insertBoard", board);
	}

 

윗 코드는 각 클래스에 추가한 메소드들 입니다. 마지막으로 mapper 입니다.

 

-boara-mapper.xml

 	<select id="boardNextval" resultType="_int">
 		SELECT
 			  SEQ_BOARD.NEXTVAL
 		FROM DUAL
 	</select>
 	
 	<select id="insertBoard" parameterType="com.js.board.model.dto.BoardDTO">
 		INSERT INTO BOARD(BOARD_ID, BOARD_CATEGORY, BOARD_WRITER,
                          BOARD_TITLE, BOARD_TEXT)
		           VALUES(#{board_id}, '0', 'sj', 
		                  #{board_title}, #{board_text})
 	</select>

 

브라우저에서 실행해 보면 아래와 같습니다.

 

작성페이지
게시물 상세조회

 

전체코드

-BoardController.java

 

package com.js.board.controller;

import java.util.List;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import com.js.board.model.dto.BoardDTO;
import com.js.board.model.dto.PageInfoDTO;
import com.js.board.model.service.BoardService;
import com.js.board.paging.Pagenation;

@Controller
public class BoardController {

	private static final Logger log = LoggerFactory.getLogger(BoardController.class);
	private final BoardService boardService;
	
	@Autowired
	public BoardController(BoardService boardService) {
		this.boardService = boardService;
	}
	
	/*
	 *board 리스트 페이지 접속 시 controller
	 *@param model Model 객체
	 *@param currentPage 페이징 번호
	 *@return viewResolver에 전달할 view path String
	 */
	@RequestMapping(value ="/board", method = RequestMethod.GET)
	public String board(Model model, @RequestParam(value="currentPage", defaultValue = "1", required = false) String currentPage) {
		
	//====================변경부분==================================	
		/*기본 페이징 값 1로 설정*/
		int pageNo = 1;
		int page;
		
		try {
			page = Integer.parseInt(currentPage);
		}catch(NumberFormatException e){
			page = 1;
		}
		
		/*넘어온 currentPage 값이 0이거나 0보다 작다면 기본적으로 1로 설정*/
		if(page <= 0) {
			pageNo = 1;
		}else {
			pageNo = page;
		}
	//============================================================
		/*db에 저장되어 있는 게시판 갯수 조회*/
		int totalCount = boardService.totalCount();
		
		/*페이징 계산 후 pageInfo에 값을 담는다.*/
		PageInfoDTO pageInfo = Pagenation.getPageInfo(pageNo, totalCount);
		
		/*starRow, endRow에 해당하는 list 조회*/
		List<BoardDTO> list = boardService.selectBoardList(pageInfo);
		
		/*model에 담기*/
		model.addAttribute("list", list);
		model.addAttribute("pageInfo", pageInfo);
		
		log.info("list : {}", list);
		log.info("pageInfo : {}", pageInfo);
		
		return "board/board";
	}
	
	/*상세 페이지 controller
	 *@param number 게시판 번호 
	 *@return viewResolver에 전달할 view path String
	 */
	@RequestMapping(value = "/board/{number}", method = RequestMethod.GET)
	public String detailBoard(@PathVariable int number, Model model) {
		
		BoardDTO board = boardService.selectById(number);
		model.addAttribute("board", board); 
		log.info("board  : {}" , board);
		
		return "board/detail";
	}
	
	/*
	 * 수정 페이지 조회 controller
	 * @param number 게시판 번호
	 * @return viewResolver에 전달할 view path String
	 * */
	@RequestMapping(value = "/modify/{number}", method = RequestMethod.GET)
	public String modifyBoard(@PathVariable int number, Model model) {
		
		BoardDTO board = boardService.selectById(number);
		model.addAttribute("board", board);
		
		return "board/modify";
	}
	
	/*
	 *수정 페이지 수정 controller 
	 * @param board   게시물 정보
	 * @return redirect 할 요청주소(url)
	 * */
	@RequestMapping(value ="/modify", method = RequestMethod.POST)
	public String modifyBoard(@ModelAttribute BoardDTO board) {
		
		boardService.updateById(board);
		log.info("board : {}", board);
		
		return "redirect:/board/" + board.getBoard_id();
		
	}
	
	/*
	 * 작성 페이지 controller
	 * */
	@RequestMapping(value="/write", method = RequestMethod.GET)
	public String write() {
		
		return "board/writeForm";
	}
	
	/*
	 * 작성 페이지 controller
	 * 
	 * */
	@RequestMapping(value = "/write", method = RequestMethod.POST)
	public String write(@ModelAttribute BoardDTO board) {
		
		int boardNumber = boardService.insertBoard(board);
		
		return "redirect:/board/" + boardNumber;
	}
	
}

 

-BoardServiceImpl.java

 

package com.js.board.model.service;

import java.util.List;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.js.board.model.dto.BoardDTO;
import com.js.board.model.dto.PageInfoDTO;
import com.js.board.model.repository.BoardRepository;

@Service("boardService")
public class BoardServiceImpl implements BoardService{

	private final BoardRepository boardRepository;
	private final SqlSessionTemplate sqlSession;
	
	@Autowired
	public BoardServiceImpl(BoardRepository boardRepository, SqlSessionTemplate sqlSession) {
		this.boardRepository = boardRepository;
		this.sqlSession = sqlSession;
	}
	
	/*board list를 조회할 때 사용하는 service method
	 * @param pageInfo 페이징 객체
	 * @return board List 정보 
	 * */
	@Override
	public List<BoardDTO> selectBoardList(PageInfoDTO pageInfo) {
		
		return boardRepository.selectBoardList(sqlSession, pageInfo);
	}

	/*
	 * board를 조회할 때 사용하는 service method
	 * @param number 게시판 번호
	 * @return board 정보
	 * */
	@Override
	public BoardDTO selectById(int number) {
		
		return boardRepository.selectById(number, sqlSession);
	}

	/*
	 * board를 수정할 때 사용하는 service method
	 * @param board 게시물 수정정보가 담긴 객체
	 * @return 
	 * */
	@Override
	public void updateById(BoardDTO board) {
		
		boardRepository.updateById(board, sqlSession);
	}

	/*
	 *count board list method
	 *@return count board list  
	 * */
	@Override
	public int totalCount() {
		
		return boardRepository.totalCount(sqlSession);
	}

	/*
	 * board insert method
	 * @param board 입력한 게시물 정보
	 * return boardNumber
	 * */
	@Override
	public int insertBoard(BoardDTO board) {
		
		int boardNumber = boardRepository.selectNextVal(sqlSession);
		
		board.setBoard_id(boardNumber);
		boardRepository.insertBoard(sqlSession, board);
		
		
		return boardNumber;
	}

}

 

-BoardRepositoryImpl.java

 

package com.js.board.model.repository;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.stereotype.Repository;

import com.js.board.model.dto.BoardDTO;
import com.js.board.model.dto.PageInfoDTO;

@Repository("boardRepository")
public class BoardRepositoryImpl implements BoardRepository{

	/*
	 * board List 조회 Repository method
	 * @param sqlSession    service에서 전달받은 sqlSessionTemplate 쿼리문 실행할 객체
	 * @param pageInfo 페이징 객체
	 * @return db에서 조회한 board List정보
	 * */
	@Override
	public List<BoardDTO> selectBoardList(SqlSessionTemplate sqlSession, PageInfoDTO pageInfo) {
		
		return sqlSession.selectList("board.selectList", pageInfo);
	}

	/*
	 * board 조회 Repository method
	 * @param number  board 번호
	 * @param sqlSession   service에서 전달받은 sqlSessionTemplate 쿼리문 실행할 객체
	 * @return db에서 조회한 board 정보
	 * */
	@Override
	public BoardDTO selectById(int number, SqlSessionTemplate sqlSession) {
		
		return sqlSession.selectOne("board.selectById", number);
	}

	/*
	 * board update Repository method
	 * @param board 수정할 보드정보 객체
	 * @param sqlSession 쿼리문 실행할 객체
	 * */
	@Override
	public int updateById(BoardDTO board, SqlSessionTemplate sqlSession) {
		
		
		return sqlSession.update("board.updateById", board);
	}
	
	/*count board list Repository
	 * @param sqlSession 쿼리문 실행할 객체
	 * @return 보드리스트 갯수
	 * */
	@Override
	public int totalCount(SqlSessionTemplate sqlSession) {
		
		return sqlSession.selectOne("board.totalCount");
	}

	/*
	 * board sequence nextval 조회
	 * param sqlSession 쿼리문 실행할 객체
	 * return 시퀀스 nextval 값
	 * */
	@Override
	public int selectNextVal(SqlSessionTemplate sqlSession) {
		return sqlSession.selectOne("board.boardNextval");
	}

	/*
	 * board 정보 db에 입력(insert)
	 * param sqlSession 쿼리문 실행할 객체
	 * param board 입력한 board정보
	 * */
	@Override
	public void insertBoard(SqlSessionTemplate sqlSession, BoardDTO board) {
		sqlSession.insert("board.insertBoard", board);
	}
	
}