웹 개발 블로그

spring mybatis 셋팅이 끝났다면 이제 게시판을 만들 차례이다.

공지사항 게시판을 예로 들어 먼저 공지사항 리스트 페이지를 만들어 보자.

가장 먼저 게시판을 위한 controller, dao, mapper, vo를 생성하자.

<프로젝트 패키지 구성>

필자는 위와 같이 패키지와 클래스를 생성하였다.

Controller 소스를 구성하기 전에 기존에 pom.xml에 등록했던 lombok 라이브러리의 기능을 사용하기 위해 lombok.config라는 파일을 생성하자.

경로 : 프로젝트 하위(pom.xml과 동일한 경로)

<lombok.config 소스 코드>

lombok.log.fieldName=logger

이 설정은 @Slf4j 어노테이션 사용 시 static logger를 생성하지 않고 바로 log를 찍을 수 있게 해준다.(아래의 소스들을 보면 확인이 가능하다.)

<게시판 table 생성>

CREATE TABLE `push_notice` (
  `notice_id` int(11) NOT NULL AUTO_INCREMENT,
  `notice_title` varchar(32) NOT NULL,
  `notice_coments` varchar(4000) NOT NULL,
  `mod_date` timestamp NULL DEFAULT NULL,
  `use_yn` varchar(2) NOT NULL DEFAULT 'Y',
  PRIMARY KEY (`notice_id`)
)

필자는 위와같이 테이블을 생성하였다.

1. Controller 단 구성

<NoticeController.java 소스 코드>

package com.spring.test.controller;

import java.util.List;

import javax.annotation.Resource;

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 org.springframework.web.bind.annotation.ResponseBody;

import com.spring.test.dao.NoticeDao;
import com.spring.test.vo.NoticeVo;
import com.spring.test.vo.PagingVo;

import lombok.extern.slf4j.Slf4j;

@Controller
@Slf4j
public class NoticeController {

	@Resource(name = "noticeDao")
	private NoticeDao noticeDao;
	
	@RequestMapping(value = "/noticeList")
	public String noticeList(@ModelAttribute("Notice") NoticeVo notice,
							@RequestParam(defaultValue="1") int curPage,
							Model model
								) {
		logger.info("noticeList page");
		int listCnt = noticeDao.getNoticeListCount();
		PagingVo paging = new PagingVo(listCnt, curPage);
		notice.setStartIndex(paging.getStartIndex());
		notice.setCntPerPage(paging.getPageSize());
			
		List<NoticeVo> noticeList=noticeDao.getNoticeList(notice);
		model.addAttribute("noticeList", noticeList);
		model.addAttribute("listCnt", listCnt);
		model.addAttribute("paging", paging);
		return "notice/noticeList";
	}
	
	@RequestMapping(value = "/noticeRegi")
	public String noticeRegi() {
		logger.info("notice Regi page");
			return "notice/noticeDetail";
	}
	
	@RequestMapping(value = "/noticeDetail/{notice_id}")
	public String noticeEdit(@PathVariable String notice_id, Model model) {
		logger.info("notice detail page [notice_id = {}]",notice_id);
		model.addAttribute("notice",noticeDao.getNoticeOne(notice_id));
		return "notice/noticeDetail";
	}
	
	@ResponseBody
	@RequestMapping(value = "/noticeInsert", method=RequestMethod.POST)
	public int noticeInsert(NoticeVo notice) {
		logger.info("notice insert"); 
		return noticeDao.NoticeInsert(notice);
	}
	
	@ResponseBody
	@RequestMapping(value = "/noticeUpdate", method=RequestMethod.POST)
	public int noticeUpdate(NoticeVo notice) {
		logger.info("notice update {} ", notice.getNotice_id()); 
		return noticeDao.NoticeUpdate(notice);
	}
	
	@ResponseBody
	@RequestMapping(value = "/noticeDelete", method=RequestMethod.POST)
	public int noticeDelete(NoticeVo notice) {
		logger.info("notice delete {} ", notice.getNotice_id()); 
		return noticeDao.NoticeDelete(notice.getNotice_id());
	}	
}

컨트롤러 구성은 위에서 부터 게시판 리스트 페이지, 등록페이지, 수정페이지, 게시판 정보 insert, 게시판 정보 update, 게시판 정보 delete 로 구성하였다.

하나의 메소드에서 여러개의 기능을 하도록 소스를 구성할 수 있으나, 보기 쉽게 할 수 있도록 메소드를 나뉘었다.

또한 noticeList()에서 페이징 처리를 할 수 있도록 소스를 구성하였다.

-> 여기서 @ResponseBody 어노테이션을 사용한 메소드는 view의 ajax로 부터의 요청에 대해 view 즉 jsp의 경로를 돌려주는게 아닌 문자열만 리턴하도록 처리된다.

-> Spring에서 제공하는 @Autowired 어노테이션 대신 java에서 제공하는 @Resource 어노테이션을 사용하여 가용성을 높였다.

2. model 단 구성

<PagingVo.java 소스코드>

package com.spring.test.vo;

import lombok.Data;

@Data
public class PagingVo {
	/** 한 페이지당 게시글 수 **/
    private int pageSize = 10;
    
    /** 한 블럭(range)당 페이지 수 **/
    private int rangeSize = 10;
    
    /** 현재 페이지 **/
    private int curPage = 1;
    
    /** 현재 블럭(range) **/
    private int curRange = 1;
    
    /** 총 게시글 수 **/
    private int listCnt;
    
    /** 총 페이지 수 **/
    private int pageCnt;
    
    /** 총 블럭(range) 수 **/
    private int rangeCnt;
    
    /** 시작 페이지 **/
    private int startPage = 1;
    
    /** 끝 페이지 **/
    private int endPage = 1;
    
    /** 시작 index **/
    private int startIndex = 0;
    
    /** 이전 페이지 **/
    private int prevPage;
    
    /** 다음 페이지 **/
    private int nextPage;
    
    public PagingVo(int listCnt, int curPage){
        
        /**
         * 페이징 처리 순서
         * 1. 총 페이지수
         * 2. 총 블럭(range)수
         * 3. range setting
         */
        
        // 총 게시물 수와 현재 페이지를 Controller로 부터 받아온다.
        /** 현재페이지 **/
        setCurPage(curPage);
        /** 총 게시물 수 **/
        setListCnt(listCnt);
        
        /** 1. 총 페이지 수 **/
        setPageCnt(listCnt);
        /** 2. 총 블럭(range)수 **/
        setRangeCnt(pageCnt);
        /** 3. 블럭(range) setting **/
        rangeSetting(curPage);
        
        /** DB 질의를 위한 startIndex 설정 **/
        setStartIndex(curPage);
    }
 
    public void setPageCnt(int listCnt) {
        this.pageCnt = (int) Math.ceil(listCnt*1.0/pageSize);
    }
    public void setRangeCnt(int pageCnt) {
        this.rangeCnt = (int) Math.ceil(pageCnt*1.0/rangeSize);
    }
    public void rangeSetting(int curPage){
        
        setCurRange(curPage);        
        this.startPage = (curRange - 1) * rangeSize + 1;
        this.endPage = startPage + rangeSize - 1;
        
        if(endPage > pageCnt){
            this.endPage = pageCnt;
        }
        
        this.prevPage = curPage - 1;
        this.nextPage = curPage + 1;
    }
    public void setCurRange(int curPage) {
        this.curRange = (int)((curPage-1)/rangeSize) + 1;
    }
    public void setStartIndex(int curPage) {
        this.startIndex = (curPage-1) * pageSize;
    }
}

<NoticeVo.java 소스코드>

package com.spring.test.vo;

import lombok.Data;

@Data
public class NoticeVo {
	private String notice_id;
	private String notice_title;
	private String notice_coments;
	private String use_yn;
	private String mod_date;
	private int startIndex;
	private int cntPerPage;
}

->lombok의 @Data 어노테이션을 사용하여 setter, getter 생성을 생략할 수 있다.

<NoticeMapper.java 소스코드>

package com.spring.test.dao;

import java.util.List;

import org.springframework.stereotype.Repository;

import com.spring.test.vo.NoticeVo;

@Repository(value = "noticeMapper")
public interface NoticeMapper {
	public int noticeListCount();
	public List<NoticeVo> noticeList(NoticeVo notice);
	public NoticeVo noticeOne(String notice_id);
	public int noticeInsert(NoticeVo notice);
	public int noticeUpdate(NoticeVo notice);
	public int noticeDelete(String notice_id);
}

<NoticeDao.java 소스코드>

package com.spring.test.dao;

import java.util.List;

import javax.annotation.Resource;
import org.springframework.stereotype.Service;

import com.spring.test.vo.NoticeVo;

@Service(value = "noticeDao")
public class NoticeDao{

	@Resource(name = "noticeMapper")
	private NoticeMapper noticeMapper;
	
	public int getNoticeListCount() {
		return noticeMapper.noticeListCount();
	}
	
	public List<NoticeVo> getNoticeList(NoticeVo notice){
		return noticeMapper.noticeList(notice);
	}
	
	public NoticeVo getNoticeOne(String notice_id) {
		return noticeMapper.noticeOne(notice_id);
	}
	
	public int NoticeInsert(NoticeVo notice) {
		return noticeMapper.noticeInsert(notice);
	}
	
	public int NoticeUpdate(NoticeVo notice) {
		return noticeMapper.noticeUpdate(notice);
	}
	
	public int NoticeDelete(String notice_id) {
		return noticeMapper.noticeDelete(notice_id);
	}
}

-> NoticeDao.java에서 현재 소스에는 없지만 추후 트랜잭션을 처리하기에 용이할 것 같다.

<noticeMapper.xml 소스 코드>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.spring.test.dao.NoticeMapper">
 	<resultMap id="NoticeVo" type="com.spring.test.vo.NoticeVo">
		<result property="notice_id" column="notice_id"/>
		<result property="notice_title" column="notice_title"/>
		<result property="notice_coments" column="notice_coments"/>
		<result property="mod_date" column="mod_date"/>
		<result property="use_yn" column="use_yn"/>
	</resultMap>
	
	<select id="noticeListCount" resultType="Integer">
		select count(*)
		from push_notice;
	</select>
	
	<select id="noticeList" resultMap = "NoticeVo">
		select	notice_id,
				notice_title,
				notice_coments,
				use_yn,
				DATE_FORMAT(mod_date, '%Y-%m-%d') mod_date
		from push_notice
		order by notice_id
		limit #{startIndex}, #{cntPerPage}
		
	</select>
	<select id="noticeOne" parameterType="String" resultMap = "NoticeVo">
		select	notice_id,
				notice_title,
				notice_coments
		from push_notice
		where notice_id = #{notice_id}
	</select>
	<insert id="noticeInsert" parameterType="com.spring.test.vo.NoticeVo">
		insert into push_notice
		(
			notice_title,
			notice_coments,
			mod_date
		)
		values
		(
			#{notice_title},
			#{notice_coments},
			NOW()
		)
	</insert>
	<update id="noticeUpdate" parameterType="com.spring.test.vo.NoticeVo">
		update push_notice set
			notice_title = #{notice_title},
			notice_coments = #{notice_coments},
			mod_date = NOW()
		where notice_id = #{notice_id}
	</update>
	<delete id="noticeDelete" parameterType="String">
		delete from push_notice
		where notice_id = #{notice_id}
	</delete>
 </mapper>

비즈니스 로직을 다양한 방법으로 구성할 수 있으나 필자는 위와 같이 구성하는 것이 추후 유지보수 하거나 트랜잭션을 구성하는데 용이하다고 판단되었다.

3. View 단 구성

View단은 noticeList.jsp와 noticeDetail.jsp로 구성하였으며, jquery는 3.3.1버전을 사용하였다.

<noticeList.jsp 소스코드>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/test/resources/css/noticeList.css">
<script type="text/javascript" src="/test/resources/js/jquery-3.3.1.min.js"></script>
<script>
	$(document).ready(function(){
		$("#notice_regi").on("click",function(){
			location.href="/test/noticeRegi"
		});
	});
	function fn_paging(curPage){
		location.href="/test/noticeList?curPage="+curPage;
	}
	function notice_push(notice_id){
		alert(notice_id);
	}
</script>
</head>
<body>
	<div class="title">공지사항</div>
	<div class="contents">
		<input type="button" id="notice_regi" value="등록">
		<div class="divTable greenTable">
			<div class="divTableHeading">
				<div class="divTableRow">
					<div class="divTableHead"><input type="checkbox"></div>
					<div class="divTableHead">NO</div>
					<div class="divTableHead">제목</div>
					<div class="divTableHead">등록일자</div>
					<div class="divTableHead"></div>
				</div>
			</div>
			<c:forEach var="v" items="${noticeList}" varStatus="status">
				<div class="divTableBody">
					<div class="divTableRow">
						<div class="divTableCell"><input type="checkbox"></div>
						<div class="divTableCell">${status.index+1+(paging.curPage-1)*10}</div>
						<div class="divTableCell">
							<a href="/test/noticeDetail/${v.notice_id}">${v.notice_title}</a>
						</div>
						<div class="divTableCell">${v.mod_date}</div>
						<div class="divTableCell"><input type="button" onclick="notice_push(${v.notice_id})" value="전송"></div>
					</div>
				</div>
			</c:forEach>
		</div>
		
		<div class="greenTable outerTableFooter">
			<div class="tableFootStyle">
				<div class="links">
                        <a href="#" onClick="fn_paging(1)">[처음]</a> 
                    <c:if test="${paging.curPage ne 1}">
                        <a href="#" onClick="fn_paging(${paging.prevPage })">[이전]</a> 
                    </c:if>
                    <c:forEach var="pageNum" begin="${paging.startPage }" end="${paging.endPage }">
                        <c:choose>
                            <c:when test="${pageNum eq  paging.curPage}">
                                <span style="font-weight: bold;">
                                	<a href="#" onClick="fn_paging(${pageNum })" style="font-weight: bold; color:red;">
                                		${pageNum }
                                	</a>
                                </span> 
                            </c:when>
                            <c:otherwise>
                                <a href="#" onClick="fn_paging(${pageNum })">${pageNum }</a> 
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                    <c:if test="${paging.curPage ne paging.pageCnt && paging.pageCnt > 0}">
                        <a href="#" onClick="fn_paging(${paging.nextPage })">[다음]</a> 
                    </c:if>
                    <c:if test="${paging.curRange ne paging.rangeCnt && paging.rangeCnt > 0}">
                        <a href="#" onClick="fn_paging(${paging.pageCnt })">[끝]</a> 
                    </c:if>
				</div>
			</div>
		</div>
		
		<div>
                    총 게시글 수 : ${paging.listCnt } /    총 페이지 수 : ${paging.pageCnt } / 현재 페이지 : ${paging.curPage } / 현재 블럭 : ${paging.curRange } / 총 블럭 수 : ${paging.rangeCnt }
        </div>
		
	</div>
	
	
</body>
</html>

<noticeDetail.jsp 소스코드>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/test/resources/css/noticeDetail.css">
<script type="text/javascript" src="/test/resources/js/jquery-3.3.1.min.js"></script>
<script>
	$(document).ready(function(){
		
		//공지사항 신규 등록
		$("#notice_regist").on("click",function(){
			var formData = $("#notice_form").serialize();
			$.ajax({
				type : "post",
				url : "/test/noticeInsert",
				data : formData,
				success : function(data){
					if(data==1) alert("등록 완료");
					else alert('등록 실패');
						
				},
				error : function(error){
					alert("등록 실패");
					console.log("notice insert fail : "+error);
				}
			});
		});
		
		//공지사항 수정
		$("#notice_edit").on("click",function(){
			var formData = $("#notice_form").serialize();
			$.ajax({
				type : "post",
				url : "/test/noticeUpdate",
				data : formData,
				success : function(data){
					if(data==1) alert("수정 완료");
					else alert('수정 실패');
				},
				error : function(error){
					alert("수정 실패");
					console.log("notice update fail : "+error);
				}
			});
		});
		
		//공지사항 삭제
		$("#notice_delete").on("click",function(){
			var formData = $("#notice_form").serialize();
			alert(formData);
			$.ajax({
				type : "post",
				url : "/test/noticeDelete",
				data : formData,
				success : function(data){
					if(data==1){
						alert("삭제 완료");
						location.href="/push/noticeList";
					}else alert('삭제 실패');
				},
				error : function(error){
					alert("삭제 실패");
					console.log("notice delete fail : "+error);
				}
			});
		});
		
		$("#notice_backPage").on("click",function(){
			location.href="/test/noticeList";
		});
	})
</script>
</head>
<body>
	<div class="big_title">공지사항 수정/삭제/추가</div>
	<div class="big_contents">
	<form id="notice_form">
	<input type="hidden" id="notice_id" name="notice_id" value="${notice.notice_id }">
		<div class="title">
			<div>
				제목
			</div>
			<div>
				<input type="text" id="notice_title" name="notice_title" value="${notice.notice_title}">
			</div>
		</div>
		
		<div class="contents">
			<div>
				내용
			</div>
			<div>
				<textarea id="notice_coments" name="notice_coments">${notice.notice_coments}</textarea>
			</div>
		</div>
	</form>
		
		<div class="footer">
			
			<c:if test="${null eq notice }">
				<input type="button" id="notice_regist" value="등록">
			</c:if>
			<c:if test="${null ne notice }">
				<input type="button" id="notice_edit" value="수정">
			</c:if>		
			<input type="button" id="notice_backPage" value="뒤로">
			<input type="button" id="notice_delete" value="삭제">
		</div>
		
	</div>
	
	
</body>
</html>

noticeDetail.jsp에서 ajax를 사용하여 등록, 수정, 삭제 기능을 처리하였다.

-> ajax에서 serialize()메소드를 통해 POST로 넘길 form data들을 객체 변수로 생성하여 controller에서 NoticeVo 변수로 받을 수 있다.

<noticeList.css 소스코드>

.title{
	position : relative;
	text-align : center;
	left : 50%;
	width : 200px;
	margin-left : -100px;
}
.contents{
	position : relative;
	top : 30px;
	left : 50%;
	width : 1000px;
	margin-left : -500px;
}		
div.greenTable {
  font-family: Georgia, serif;
  border: 0px solid #949494;
  background-color: #FFFFFF;
  width: 100%;
  border-collapse: collapse;
}
.divTable.greenTable .divTableCell, .divTable.greenTable .divTableHead {
  border: 1px solid #000000;
  padding: 3px 2px;
}
.divTable.greenTable .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.greenTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: center;
}
.greenTable .tableFootStyle {
  font-size: 13px;
  font-weight: bold;
}
.greenTable .tableFootStyle {
  font-size: 13px;
}
.greenTable .tableFootStyle .links {
	 text-align: right;
}
.greenTable .tableFootStyle .links a{
  display: inline-block;
  color: #101010;
  padding: 2px 8px;
  border-radius: 5px;
}
.greenTable.outerTableFooter {
  border-top: none;
}
.greenTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
.divTableRow>div:first-child{                                        
	width : 5px;
	text-align : center;
}
.divTableRow>div:nth-child(2){
	width : 10px;
	text-align : center;
}
.divTableRow>div:nth-child(3){
	width : 700px;
}
.divTableRow>div:nth-child(4){
	width : 100px;
	text-align : center;
}
.divTableRow>div:nth-child(5){
	width : 10px;
	text-align : center;
}


/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

.divTableBody a,.tableFootStyle a{
	text-decoration:none;
	color : black;
}

<noticeDetail.css 소스코드>

body{
	margin : 0px;
	padding : 0px;
}
.big_title{
	position : relative;
	text-align : center;
	left : 50%;
	width : 200px;
	margin-left : -100px;
}
.big_contents{
	position : relative;
	top : 30px;
	left : 50%;
	width : 800px;
	margin-left : -400px;
}
.title{
	position : absolute;
	border-top : 1px solid black;
	width : 100%;
}
.contents{
	position : absolute;
	top : 30px;
	width : 100%;
	border-top : 1px solid black;
	border-bottom : 1px solid black;
}
.footer{
	position : absolute;
	width : 140px;
	top : 560px;
	left: 50%;
	margin-left : -70px;
}
.title>div, .contents>div{
	display : inline-block;
	padding : 3px 0 3px 0;
	width : 100%;
}
.title>div:first-child, .contents>div:first-child{
	width : 100px;
	text-align : center;
}
.title>div:nth-child(2), .contents>div:nth-child(2){
	width : 600px;
}
.title input[type=text] {
	width : 602px;
}
.contents textarea {
	width : 600px;
	height : 500px;
}
.contents>div:first-child{
	position : relative;
	bottom : 250px;
}

페이징 처리 로직은 https://gangnam-americano.tistory.com/18 을 참고하였다.(참고 사이트에서는 일부 소스가 누락되어있음)

4. 모두 적용이 되었다면 tomcat에 올려 실행시켜 보자.(tomcat 7을 사용하였다.)

<공지사항 리스트 페이지>

<공지사항 상세 페이지>

<공지사항 등록 페이지>