728x90
๐ TODO : ํ์ด์ง , ๊ฒ์๊ธ AJax์์ , ์ญ์
๐ project : ์ธํ ๋ฆฌ์ ์ด - SpringBootMybatisMini
github : https://github.com/Hyeonqz/SpringBootMybatisMini
์คํ๋ง๋ถํธ ๋์๊ด์ ๊ฐ๋จ
- ํด๋ผ์ด์ธํธ๊ฐ JSP ํ์ด์ง์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅํ๊ณ ์ ์ถํฉ๋๋ค.
- JSP ํ์ด์ง์์ ์ปจํธ๋กค๋ฌ์๊ฒ ์์ฒญ์ ๋ณด๋ ๋๋ค.
- ์ปจํธ๋กค๋ฌ๋ ์์ฒญ์ ๋ฐ๊ณ ํ์ํ ์์ ์ ์ํํฉ๋๋ค.
- ์ปจํธ๋กค๋ฌ๋ ์๋น์ค๋ก ๋ฐ์ดํฐ ์ฒ๋ฆฌ๋ฅผ ์์ํฉ๋๋ค.
- ์๋น์ค๋ ํ์ํ ๋น์ฆ๋์ค ๋ก์ง์ ์คํํ๊ณ ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ต๋๋ค.
- ์๋น์ค๊ฐ ๋ฐ์ดํฐ ์ฒ๋ฆฌ๋ฅผ ์๋ฃํ๋ฉด, ๊ฒฐ๊ณผ๋ฅผ ์ปจํธ๋กค๋ฌ๋ก ๋ฐํํฉ๋๋ค.
- ์ปจํธ๋กค๋ฌ๋ JSP ํ์ด์ง๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํฉ๋๋ค.
- JSP ํ์ด์ง๋ ๋ฐ์ดํฐ๋ฅผ ์ด์ฉํ์ฌ ๋์ ์น ํ์ด์ง๋ฅผ ์์ฑํ๊ณ ํด๋ผ์ด์ธํธ์๊ฒ ๋ฐํํฉ๋๋ค.
๋ฐ๋ผ์ ๋ฐ์ดํฐ ์ฒ๋ฆฌ ํ ๋ฐํ๋๋ ๊ณณ์ ์ปจํธ๋กค๋ฌ์ด๋ค.
ํ์ด์ง์ ํด๋ณด๊ฒ ์ต๋๋ค.
1) mapper
<select id="getList" parameterType="HashMap" resultType="MemboardDto">
select * from memboard order by num desc limit #{start},#{perpage}
</select>- mysql -> limit ๋ฅผ ์์์ผ์ง ํ์ด์ง์ ํ ์ ์์ต๋๋ค.
- limit๋ (begin, end)๋ก ๊ตฌ์ฑ๋๋ฉฐ (์์ํ์ด์ง๋ถํฐ, ๋ง์ง๋ง ํ์ด์ง) ์ฆ ๋ด๊ฐ ์ค์ ํด๋ ์์ํ์ด์ง๋ถํฐ ๋ด๊ฐ์ค์ ํด๋ ๋ง์ง๋งํ์ด์ง ๊น์ง ์ ํ ํ๋ค๋ ๋ป ์ ๋๋ค.
2) service
@Override
public List<MemBoardDto> getList(int start, int perpage) {
HashMap<String,Integer> map = new HashMap<>();
map.put("start",start);
map.put("perpage",perpage);
return memBoardMapperInter.getList(map);
}- ํ์ด์ง์ ํ๊ธฐ ์ํด์ Map ์ปฌ๋ ์ ์ start, perpage๋ฅผ ๋ด์์ dto๊ฐ , map์ list์ ๋ฆฌํดํฉ๋๋ค
3) controller
@GetMapping("/list")
public ModelAndView goreboard(
@RequestParam(value="currentPage",defaultValue = "1") int currentPage) {
ModelAndView mv= new ModelAndView();
int totalCount = memboardService.getTotalCount();
//ํ์ด์ง ์ฒ๋ฆฌ ํ์ํ ๋ณ์ ์ ์ธ
int totalPage; //์ด ํ์ด์ง์
int startPage; //๊ฐ๋ธ๋ญ์์ ๋ณด์ฌ์ง ์์ํ์ด์ง
int endPage; //๊ฐ๋ธ๋ญ์์ ๋ณด์ฌ์ง ๋ํ์ด์ง
int startNum; //db์์ ๊ฐ์ ธ์ฌ ๊ธ์ ์์๋ฒํธ(mysql์ ์ฒซ๊ธ์ด 0,์ค๋ผํด์ 1)
int perPage=10; //ํํ์ด์ง๋น ๋ณด์ฌ์ง ๊ธ์ ๊ฐฏ์
int perBlock=5; //ํ๋ธ๋ญ๋น ๋ณด์ฌ์ง ํ์ด์ง ๊ฐ์
//ํ์ฌํ์ด์ง ์ฝ๊ธฐ(๋จ null์ผ๊ฒฝ์ฐ๋ 1ํ์ด๋ก ์ค๋ค)๊ณ์ฐ์ ํด์ผํ๋ฏ๋ก int๋ก ํ๋ณํํด์ค
//if(("currentPage")==null)
// currentPage=1;
//else
//currentPage=Integer.parseInt(("currentPage"));
//์ดํ์ด์ง์ ๊ตฌํ๊ธฐ
//์ด๊ธ์ ๊ฐฏ์/ํํ์ด์ง๋น ๋ณด์ฌ์ง ๊ฐ์๋ก ๋๋(7/5=1)
//๋๋จธ์ง๊ฐ 1์ด๋ผ๋ ์์ผ๋ฉด ๋ฌด์กฐ๊ฑด 1ํ์ด์ง ์ถ๊ฐ(1+1=2ํ์ด์ง๊ฐ ํ์)
totalPage=totalCount/perPage+(totalCount%perPage==0?0:1);
//๊ฐ๋ธ๋ญ๋น ๋ณด์ฌ์ผํ ์์ํ์ด์ง
//perBlock=5์ผ๊ฒฝ์ฐ๋ ํ์ฌํ์ด์ง 1~5 ์์:1 ๋:5
//ํ์ฌํ์ด์ง 13 ์์:11 ๋:15
startPage=(currentPage-1)/perBlock*perBlock+1;
endPage=startPage+perBlock-1;
// ์ดํ์ด์ง๊ฐ 23์ผ๊ฒฝ์ฐ ๋ง์ง๋ง๋ธ๋ญ์ 25๊ฐ์๋๋ผ 23์ด๋ค
if(endPage>totalPage)
endPage=totalPage;
//๊ฐํ์ด์ง์์ ๋ณด์ฌ์ง ์์๋ฒํธ
//1ํ์ด์ง: 0,2ํ์ด์ง:5 3ํ์ด์ง:10....
startNum=(currentPage-1)*perPage;
//๊ฐ ํ์ด์ง์์ ํ์ํ ๊ฒ์๊ธ ๊ฐ์ ธ์ค๊ธฐ == ๋ณด์ฌ์ง ๊ธ๋ง ๊ฐ์ ธ์ค๊ธฐ
//๊ฐํ์ด์ง๋น ์ถ๋ ฅํ ์์๋ฒํธ ๊ตฌํ๊ธฐ no
//์ด๊ธ๊ฐ์๊ฐ 23์ด๋ฉด 1ํ์ด์ง 23,2ํ์ด์ง๋ 18,3ํ์ด์ง 13.....
//์ถ๋ ฅ์ 1์ฉ ๊ฐ์ํ๋ฉฐ ์ถ๋ ฅ
List<MemBoardDto> list = memboardService.getList(startNum, perPage);
//list์ ๊ฐ ๊ธ์ ๋๊ธ ๊ฐ์ ํ์๋ฅผ ํด์ผํจ
/*for(MemBoardDto m:list) {
m.setAcount(adao.getAnswerList(d.getNum()).size());
}*/
//๊ฐ ํ์ด์ง์ ์ถ๋ ฅํ ์์๋ฒํธ
int no = totalCount-(currentPage-1)*perPage;
mv.addObject("totalCount",totalCount);
mv.addObject("list",list);
mv.addObject("startPage",startPage);
mv.addObject("totalPage",totalPage);
mv.addObject("endPage",endPage);
mv.addObject("no",no);
mv.addObject("currentPage",currentPage);
mv.setViewName("/memboard/memlist");
return mv;
}- form ์ ๋ณด๋ผ ๋, ๋ณด๋ด์ค ๊ฐ์ด ๋ง๊ธฐ ๋๋ฌธ์ ModelandView๋ฅผ ๋ฆฌํดํ์ ์ผ๋ก ์ฌ์ฉํด์ ๋ณด๋ด์ค๋ค.
- totalCount๋ ๋ชจ๋ dto๋ค์ list๋ก ์ถ๋ ฅํ๊ธฐ ์ํด์ ์์ฑํ ๋ณ์ ์ด๋ค.
- ๊ทธ๋ฆฌ๊ณ ํ์ด์ง ์ฒ๋ฆฌ์ ํ์ํ ๋ณ์๋ค์ ๋ฏธ๋ฆฌ ์ ์ธํด์ค๋๋ค
- ์์ธํ ์ค๋ช ๋ค์ ์ฝ๋์ ์ฃผ์์ผ๋ก ์ค๋ช ๋์ด ์์ต๋๋ค.
- ๊ทธ๋ฆฌ๊ณ ์ปจํธ๋กค๋ฌ์์ addObject ๋ฉ์๋ ์์์๋ key๊ฐ๋ค์ jspํ์ผ์์ ์ง์ ์ ์ผ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.
4) form ์์ฑ
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>ํ์ ๊ฒ์ํ</title>
</head>
<body>
<div style="width: 1150px;">
<c:if test="${sessionScope.loginok != null}">
<button type="button" class="btn btn-outline-info" onclick="location.href='form'" style="width:100px;">๊ธ์ฐ๊ธฐ</button>
</c:if>
<br><br>
<table class="table table-bordered">
<tr class="table-secondary" align="center">
<th width="60">๋ฒํธ</th>
<th width="60">์ ๋ชฉ</th>
<th width="60">์์ฑ์</th>
<th width="60">์กฐํ์</th>
<th width="60">๋ฑ๋ก์ผ</th>
</tr>
<c:if test="${totalCount==0}">
<tr>
<td>๋ฑ๋ก๋ ๊ธ์ด ์์ต๋๋ค.</td>
</tr>
</c:if>
<c:if test="${totalCount>0 }">
<c:forEach var="dto" items="${list }" varStatus="i">
<tr>
<td align="center">${no }</td>
<c:set var="no" value="${no-1 }"/> <!-- ์ถ๋ ฅ ํ ๊ฐ์์ํค๊ธฐ -->
<td> <!-- ์ ๋ชฉ -->
<!-- ์ ๋ชฉ.. ์ฌ๊ธฐ ๋๋ฅด๋ฉด ๋ด์ฉ ๋ณด๊ธฐ๋ก -->
<a href="content?num=${dto.num }¤tPage=${currentPage}">${dto.subject }</a>
<!-- ์ฌ์ง์ด ์์ ๊ฒฝ์ฐ ์์ด์ฝ ํ์ -->
<c:if test="${dto.uploadfile != 'no' }">
<i class="bi bi-image"></i>
</c:if>
</td>
<td><fmt:formatDate value="${dto.writeday }" pattern="yyyy-MM-dd"/></td>
<td align="center">${dto.readcount }</td>
</tr>
</c:forEach>
</c:if>
</table>
<!-- ํ์ด์ง๋ฒํธ ์ถ๋ ฅ -->
<!-- ํ์ด์ง ๋ฒํธ ์ถ๋ ฅ -->
<div>
<!-- ํ์ด์ง ๋ฒํธ ์ถ๋ ฅ -->
<c:if test="${totalCount>0 }">
<div style="width: 800px; text-align: center">
<ul class="pagination justify-content-center">
<!-- ์ด์ -->
<c:if test="${startPage>1 }">
<li class="page-item"><a class="page-link" href="list?currentPage=${startPage-1 }">์ด์ </a></li>
</c:if>
<c:forEach var="pp" begin="${startPage }" end="${endPage }">
<c:if test="${currentPage==pp }">
<li class="page-item active"><a class="page-link"
href="list?currentPage=${pp }">${pp }</a></li>
</c:if>
<c:if test="${currentPage!=pp }">
<li class="page-item"><a class="page-link" href="list?currentPage=${pp }">${pp }</a></li>
</c:if>
</c:forEach>
<!-- ๋ค์ -->
<c:if test="${endPage<totalPage }">
<li class="page-item"><a class="page-link"
href="list?currentPage=${endPage+1 }">๋ค์</a></li>
</c:if>
</ul>
</div>
</c:if>
</div>
</div>
</table>
</div>
</body>
</html>
- totalCount -> ์ฆ ๊ธ์ ๊ฐ์๊ฐ ์์ผ๋ฉด, ๊ธ์ด ์์ต๋๋ค. ๋ผ๊ณ ๋จ๊ณ , totalCount 1 ์ด์์์ผ๋ฉด ๋ฆฌ์คํธ๋ก ๋์ดํ๋ค.
- JSTL ํ๊ทธ๋ฅผ ์ฌ์ฉํด์, c:for each๋ฌธ์ ์ฌ์ฉํด์ list๋ฅผ ์ถ๋ ฅํด์ค๋๋ค.
์ง์ ๊ฐ์ฌํ๊ฒ ๋ฐ๊ฒ ์ต๋๋ค
728x90
