스프링 페이징처리 paging

code_spring-master (1).zip

6.35MB

 

 

domain 패키지

 

Criteria.java

 

package com.mystudy.domain;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class Criteria {

private int pageNum;     //현재 페이지
private int amount;       //한 페이지에 몇개 보여줄 것인

public Criteria() {
this(1, 10); // 기본이 1page에  10개
}

public Criteria(int pageNum, int amount) {
this.pageNum = pageNum;
this.amount = amount;
}
}

 

 

PageDTO

 

package com.mystudy.domain;

import lombok.Getter;
import lombok.ToString;

@Getter
@ToString
public class PageDTO {

private int startPage;
private int endPage;
private boolean prev, next;

private int total;         // 총 게시판 내 글 수
private Criteria cri;

public PageDTO(Criteria cri, int total) {

this.cri = cri;
this.total = total;

this.endPage = (int) (Math.ceil(cri.getPageNum() / 10.0)) * 10;

this.startPage = this.endPage - 9;

int realEnd = (int) (Math.ceil(total * 1.0) / cri.getAmount());

if (realEnd < this.endPage) {
this.endPage = realEnd;
}

this.prev = this.startPage > 1;
this.next = this.endPage < realEnd;
}
}

 

 

 

 

 

 

Mapper

BoardMapper

 

package com.mystudy.mapper;

import java.util.List;


import com.mystudy.domain.BoardVO;
import com.mystudy.domain.Criteria;

public interface BoardMapper {

//@Select("select * from tbl_board where bno > 0")
public List<BoardVO> getList();

public void insert(BoardVO boardVO);

public void insertSelectKey(BoardVO boardVO);

public BoardVO read(Long bno);

public int delete(Long bno);

public int update(BoardVO boardVO);




public List<BoardVO> getListWithPaging(Criteria cri);

public int getTotalCount(Criteria cri);

}

 

 

 

BoardMapper.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.mystudy.mapper.BoardMapper">
  
  
   <select id="getList" resultType="com.mystudy.domain.BoardVO">
   <![CDATA[
   select * from tbl_board where bno > 0
   ]]>
   </select>

<insert id="insert">
insert into tbl_board (bno, title, content, writer)
values (seq_board.nextval, #{title}, #{content}, #{writer})
</insert>

<insert id="insertSelectKey">
<selectKey keyProperty="bno" order="BEFORE" resultType="long">
select seq_board.nextval from dual
</selectKey>

insert into tbl_board (bno, title, content, writer)
values (#{bno}, #{title}, #{content}, #{writer})
</insert>

<select id="read" resultType="com.mystudy.domain.BoardVO">
select * from tbl_board where bno = #{bno}
</select>

<delete id="delete">
delete from tbl_board where bno = #{bno}
</delete>
  
   <update id="update" parameterType="com.mystudy.domain.BoardVO">
   update tbl_board 
   set title = #{title},
   content = #{content},
   writer = #{writer},
   updateDate = sysdate 
   where bno = #{bno}
   </update>
  
   <select id="getListWithPaging" resultType="com.mystudy.domain.BoardVO">
   <![CDATA[
   select 
   bno, title, content, writer, regdate, updatedate
   from
   (
   select /* INDEX_DESC(tbl_board pk_board) */
   rownum rn, bno, title, content, writer, regdate, updatedate
   from
   tbl_board
   where rownum <= #{pageNum} * #{amount}
   )
   where rn > (#{pageNum} - 1) * #{amount}
   ]]>
   </select>
  
   <select id="getTotalCount" resultType="int">
   select count(*) from tbl_board where bno > 0
   </select>
  
  </mapper>

 

 

 

 

 

 

 

 

Service

BoardServiceImpl.java

 

package com.mystudy.service;


import lombok.AllArgsConstructor;
import lombok.RequiredArgsConstructor;
import lombok.Setter;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.mystudy.domain.BoardVO;
import com.mystudy.domain.Criteria;
import com.mystudy.mapper.BoardMapper;

import lombok.extern.log4j.Log4j;

@Log4j
@Service
@AllArgsConstructor
@RequiredArgsConstructor
public class BoardServiceImpl implements BoardService {

@Setter(onMethod_ = @Autowired)
private BoardMapper mapper;

@Override
public void register(BoardVO boardVO) {

log.info("register........." + boardVO);

mapper.insertSelectKey(boardVO);
}

@Override
public BoardVO get(Long bno) {

log.info("get.........." + bno);

return mapper.read(bno);
}

@Override
public boolean modify(BoardVO boardVO) {
log.info("modify............." + boardVO);

return mapper.update(boardVO) == 1;
}

@Override
public boolean remove(Long bno) {
log.info("remove............." + bno);

return mapper.delete(bno) == 1;
}

/*
 * @Override public List<BoardVO> getList() {
 * 
 * log.info("getList...............");
 * 
 * return mapper.getList(); }
 */


@Override
public List<BoardVO> getList(Criteria cri) {

log.info("get List with criteria : " + cri);

return mapper.getListWithPaging(cri);
}

@Override
public int getTotal(Criteria cri) {

log.info("get total count");
return mapper.getTotalCount(cri);
}



}

 

 

 

 

 

Controller

BoardController

package com.mystudy.spring;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.mystudy.domain.BoardVO;
import com.mystudy.domain.Criteria;
import com.mystudy.domain.PageDTO;
import com.mystudy.service.BoardService;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@Log4j
@RequestMapping("/board/*")
@AllArgsConstructor
public class BoardController {

private BoardService service;

@GetMapping("/list")
public void list(Model model, Criteria cri) {
//log.info("list");
//model.addAttribute("list", service.getList());

log.info("list : " + cri);
model.addAttribute("list", service.getList(cri));
//model.addAttribute("pageMaker", new PageDTO(cri, 123));

int total = service.getTotal(cri);
log.info("total : " + total);

model.addAttribute("pageMaker", new PageDTO(cri, total));
}

@GetMapping("/register")
public void Register() {

}

@PostMapping("/register")
public String register(BoardVO boardVO, RedirectAttributes rttr) {

log.info("register : " + boardVO);

service.register(boardVO);

rttr.addFlashAttribute("result", boardVO.getBno());

return "redirect:/board/list";
}

@GetMapping({"/get", "/modify"})
public void get(@RequestParam("bno") Long bno, Model model, @ModelAttribute("cri") Criteria cri) {

log.info("/get of modify");
model.addAttribute("board", service.get(bno));
}


@PostMapping("/modify")
public String modify(BoardVO boardVO, RedirectAttributes rttr, @ModelAttribute("cri") Criteria cri) {

log.info("modify : " + boardVO);

if (service.modify(boardVO)) {
rttr.addFlashAttribute("result", "success");
}

rttr.addAttribute("pageNum", cri.getPageNum());
rttr.addAttribute("amount", cri.getAmount());

return "redirect:/board/list";
}

 

 

 

@PostMapping("/remove")
public String remove(@RequestParam("bno") Long bno, 
RedirectAttributes rttr, @ModelAttribute("cri") Criteria cri) {

log.info("remove..." + bno);

if(service.remove(bno)) {
rttr.addFlashAttribute("result", "success");
}

rttr.addAttribute("pageNum", cri.getPageNum());
rttr.addAttribute("amount", cri.getAmount());

return "redirect:/board/list";
}

}

 

 

 

 

 

---

view>board

 

list.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" %>

<!-- 부트스트랩 -->
<%@include file="../includes/header.jsp" %>

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    <h1 class="h3 mb-2 text-gray-800">게시판</h1>
                    <p class="mb-4">눈누난나 스프링으로 게시판 만들기 </p>

                    <!-- DataTales Example -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h5 class="m-0 font-weight-bold text-primary">내가 만든 게시판
                            <button id='regBtn' type="button" class="btn btn-xs btn-primary float-right">Register</button>
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>#번호</th>
                                            <th>제목</th>
                                            <th>작성자</th>
                                            <th>작성일</th>
                                            <th>수정일</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach var="board" items="${list}">
                                        <tr>
                                            <td>${board.bno}</td>
                                            <td>
                                            <a class='move' href='${board.bno}'>
                                            ${board.title}
                                            </a>
                                            </td>
                                            <td>${board.writer}</td>
                                            <td>
                                             <fmt:formatDate pattern="yyyy-MM-dd" value="${board.regdate}" />
                                           </td>
                                            <td>
                                             <fmt:formatDate pattern="yyyy-MM-dd" value="${board.updatedate}" />
                                            </td>
                                        </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                                
                                <br><br><br>
<!-- 페이징처리 -->
<div class='pull-right'>
<ul class="pagination">
                                
<c:if test="${pageMaker.prev}">
<li class="paginate_button previous"><a
href="${pageMaker.startPage -1}">Previous</a></li>
</c:if>

<c:forEach var="num" begin="${pageMaker.startPage}"
end="${pageMaker.endPage}">
<li class="paginate_button  ${pageMaker.cri.pageNum == num ? "active":""} ">
<a href="${num}">${num}</a>
</li>
</c:forEach>

<c:if test="${pageMaker.next}">
<li class="paginate_button next"><a
href="${pageMaker.endPage +1 }">Next</a></li>
</c:if>
                              
</ul>
</div>
<!-- 페이징처리 -->
                                
                                <form id='actionForm' action="/board/list" method='get'>
                                 <input type='hidden' name='pageNum' value='${pageMaker.cri.pageNum}'>
                                 <input type='hidden' name='amount' value='${pageMaker.cri.amount}'>
                                </form>
                                
                                
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- End of Main Content -->
          

<!-- Modal-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">Modal title</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                </div>
                <div class="modal-body">처리 완료</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="button" >Save changes</button>
                </div>
            </div>
        </div>
    </div>     
          
          
            
<script type="text/javascript">

$(document).ready(function(){

/* 모달 설정 */
var result = '${result}';

checkModal(result);

history.replaceState({}, null, null);

function checkModal(result){

if(result === '' || history.state){
return;
}

if(parseInt(result) > 0 ) {
$(".modal-body").html("게시글 " + parseInt(result) + " 번이 등록되었습니다!");
}
$("#myModal").modal("show");
}

/* 등록버튼 */
$("#regBtn").on("click", function(){
self.location = "/board/register";
})


/* 페이징 처리 */
var actionForm = $("#actionForm");

$(".paginate_button a").on("click", function(e){
e.preventDefault();

console.log('click');

actionForm.find("input[name='pageNum']").val($(this).attr("href"));
actionForm.submit();
});

/* 게시물 조회를 위한 이벤트 처리 추가 */
$(".move").on("click", function(e){

e.preventDefault();
actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>")
actionForm.attr("action", "/board/get");
actionForm.submit();
});

});

</script>    
   
<%@include file="../includes/footer.jsp" %>

 

 

 

 

 

 

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" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!-- 부트스트랩 -->
<%@include file="../includes/header2.jsp" %>

<link rel="stylesheet" type="text/css" href="resources/mycss.css" />


<div class="row">
<div class="col-lg-12 d-flex justify-content-center">
<h1 class="page-header" style="color:#00498c">Board Register</h1>
</div>
</div>


<div class="row">
<div class="col-lg-10" style="float:none; margin:0 auto;">

<div class="panel panel-default">
<!-- <div class="panel-heading">Board Register</div> -->
<div class="panel-body">
<form action="/board/register" method="post">
<div class="form-group">
<label style="color:tomato">Title</label> <input class="form-control" name="title" >
</div>
<div class="form-group">
<label style="color:tomato">Text area</label> <textarea class="form-control" rows="5" name="content"></textarea>
</div>
<div class="form-group">
<label style="color:tomato">Writer</label> <input class="form-control" name="writer">
</div>
<div style="text-align:center;">
<button type="submit" class="btn btn-primary">Submit Button</button>
<button type="reset" class="btn btn-danger">Reset Button</button>
</div>
</form>
</div>
</div>
</div>
</div>


<%@include file="../includes/footer.jsp" %>

 

 

 

 

get.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" %>

<!-- 부트스트랩 -->
<%@include file="../includes/header2.jsp" %>

<link rel="stylesheet" type="text/css" href="resources/mycss.css" />


<div class="row">
<div class="col-lg-12 d-flex justify-content-center">
<h1 class="page-header" style="color:#00498c">Board Read</h1>
</div>
</div>


<div class="row">
<div class="col-lg-10" style="float:none; margin:0 auto;">

<div class="panel panel-default">
<!-- <div class="panel-heading">Board Register</div> -->
<div class="panel-body">
<div class="form-group">
<label style="color:tomato">bno</label> 
<input class="form-control" name="bno" value="${board.bno}" readonly="readonly">
</div>
<div class="form-group">
<label style="color:tomato">Title</label> 
<input class="form-control" name="title" value="${board.title}" readonly="readonly">
</div>
<div class="form-group">
<label style="color:tomato">Text area</label> 
<textarea class="form-control" rows="5" name="content" readonly="readonly">${board.content}</textarea>
</div>
<div class="form-group">
<label style="color:tomato">Writer</label> 
<input class="form-control" name="writer" value="${board.writer}" readonly="readonly">
</div>
<div style="text-align:center;">
<button data-oper='modify' class="btn btn-primary"
<%-- onclick="location.href='/board/modify?bno=${board.bno}'" --%>>Modify</button>
<button data-oper='list' class="btn btn-info"
<%-- onclick="location.href='/board/list'" --%>>List</button>
</div>

<form id='operForm' action="/board/modify" method="get">
<input type='hidden' id='bno' name='bno' value="${board.bno}">
<input type='hidden' name='pageNum' value="${cri.pageNum}">
<input type='hidden' name='amount' value="${cri.amount}">
</form>
</div>
</div>
</div>
</div>

<script>
$(document).ready(function(){

var oper = $("#operForm");

$("button[data-oper='modify']").on("click", function(e){
oper.attr("action", "/board/modify").submit();
});

$("button[data-oper='list']").on("click", function(e){
oper.find("#bno").remove();
oper.attr("action", "/board/list");
oper.submit();
});

});

</script>


<%@include file="../includes/footer.jsp" %>

 

 

 

 

 

modify.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" %>

<!-- 부트스트랩 -->
<%@include file="../includes/header2.jsp" %>

<link rel="stylesheet" type="text/css" href="resources/mycss.css" />


<div class="row">
<div class="col-lg-12 d-flex justify-content-center">
<h1 class="page-header" style="color:#00498c">Board Modify Page</h1>
</div>
</div>


<div class="row">
<div class="col-lg-10" style="float:none; margin:0 auto;">

<div class="panel panel-default">
<!-- <div class="panel-heading">Board Register</div> -->
<div class="panel-body">

<form action="/board/modify" method="post" id="myform">
<div class="form-group">
<label style="color:tomato">bno</label> 
<input class="form-control" name="bno" value="${board.bno}" readonly="readonly">
</div>
<div class="form-group">
<label style="color:tomato">Title</label> 
<input class="form-control" name="title" value="${board.title}" >
</div>
<div class="form-group">
<label style="color:tomato">Text area</label> 
<textarea class="form-control" rows="5" name="content" >${board.content}</textarea>
</div>
<div class="form-group">
<label style="color:tomato">Writer</label> 
<input class="form-control" name="writer" value="${board.writer}" readonly="readonly">
</div>
<div class="form-group">
<input type="hidden" class="form-control" name="regdate" 
value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.regdate}" />' 
readonly="readonly">
</div>
<div class="form-group">
<input type="hidden" class="form-control" name="updatedate" 
value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.updatedate}" />'
readonly="readonly">
</div>

<!-- 페이징처리  -->
<input type='hidden' name='pageNum' value='${cri.pageNum}'>
<input type='hidden' name='amount' value='${cri.amount}'>



<div style="text-align:center;">
<button type="submit" data-oper='modify' class="btn btn-primary">Modify</button>
<button type="submit" data-oper='remove' class="btn btn-danger">Remove</button>
<button type="submit" data-oper='list' class="btn btn-info">List</button>
</div>
</form>
</div>
</div>
</div>
</div>



<script type="text/javascript">
$(document).ready(function(){

var form = $("#myform");

$('button').on("click", function(e){

e.preventDefault();  //submit 처리되는것 막아

var operation = $(this).data("oper");

console.log(operation);

if(operation === 'remove'){
form.attr("action", "/board/remove");
} else if(operation === 'list'){
form.attr("action", "/board/list").attr("method","get");
var pageNumTag = $("input[name='pageNum']").clone();
var amountTag = $("input[name='amount']").clone();

form.empty();
form.append(pageNumTag);
form.append(amountTag);
//self.location = "/board/list";
//return;
}
form.submit();

});

});

</script>


<%@include file="../includes/footer.jsp" %>