2022-08-30 스마트 에디터 게시판 만들기-2

개발

smartlist 페이지를 아래와 같이 수정해줬다

<%@page import="data.dto.SmartDto"%>

<%@page import="data.dao.SmartDao"%>

<%@page import="java.text.SimpleDateFormat"%>

<%@page import="data.dto.SimpleBoardDto"%>

<%@page import="java.util.List"%>

<%@page import="data.dao.SimpleBoardDao"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link

href="https://fonts.googleapis.com/css2?family=Anton&family=Edu+VIC+WA+NT+Beginner:wght@600&family=Gamja+Flower&family=Single+Day&family=Jua&family=Nanum+Pen+Script&display=swap"

rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<style type="text/css">

body *{

font-family: 'Jua';

}

a:link,a:visited {

text-decoration: none;

color: black;

}

a:hover {

text-decoration: underline;

color: red;

}

</style>

</head>

//dao 선언

SmartDao dao=new SmartDao();

//페이징 처리에 필요한 변수들

//전체 갯수

int totalCount=dao.getTotalCount();

int perPage=2;//한페이지당 보여질 글의 갯수

int perBlock=3;//한블럭당 보여질 페이지의 갯수

int startNum;//db에서 가져올 글의 시작번호(mysql은 첫글이 0번,오라클은 1번)

int startPage;//각블럭당 보여질 시작페이지

int endPage;//각 블럭당 보여질 끝페이지

int currentPage;//현재 페이지

int totalPage;//총 페이지수

int no;//각 페이지당 출력할 시작번호

//현재 페이지를 읽는다. 단,null일경우는 1페이지로 준다

if(request.getParameter("currentPage")==null)

currentPage=1;

else

//계산을 해야하므로 int로 변환

currentPage=Integer.parseInt(request.getParameter("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;

//각페이지당 출력할 시작번호 구하기

//예: 총글갯수가 23이라면 1페이지는 23,2페이지는 18,3페이지는 13...

no=totalCount-(currentPage-1)*perPage;

//페이지에서 보여질 글만 가져오기

List<SmartDto> list=dao.getPagingList(startNum, perPage);

<body>

<div style="margin: 30px 30px;width: 800px;">

<br>

<table class="table table-bordered">

<caption align="top"><h5><b>스마트 게시판</b></h5></caption>

</tr>

if(totalCount==0)

{%>

</td>

</tr>

<%}else{

SimpleDateFormat sdf=new SimpleDateFormat("yyyy.MM.dd.");

for(SmartDto dto:list)

{

<tr>

<input type="checkbox" class="alldel" value="<%=dto.getNum()%>">

<%=no--%></td>

<a href="contentview.jsp?num=<%=dto.getNum()%>&currentPage=<%=currentPage%>">

<img src="../save/<%=dto.getMainphoto() %>"width="40" height="40"

border="1">  

<%=dto.getSubject()%>

</a>

</td>

<%=sdf.format(dto.getWriteday()) %>

</td>

</tr>

<%}%>

<tr>

<input type="checkbox" class="alldelcheck"> 전체선택

<span style="float: right">

<button type="button" class="btn btn-danger btn-sm"

id="btndel">삭제</button>

<button type="button" class="btn btn-outline-info"

onclick="location.href='smartform.jsp'">

글쓰기</button>

</span>

</td>

</tr>

<%}//else 괄호

</table>

<div style="width: 750px;text-align: center;">

//이전

if(startPage>1)

{%>

<a class="page-link"

href=smartlist.jsp?currentPage=<%=startPage-1%> style="color: black;">이전</a>

</li>

<%}

for(int pp=startPage;pp<=endPage;pp++)

{

if(pp==currentPage)//현재페이지와 같은경우 약간의 css추가

{%>

<a href="smartlist.jsp?currentPage=<%=pp%>"

class="page-link"><%=pp%></a>

</li>

<%}else

{%>

<a href="smartlist.jsp?currentPage=<%=pp%>"

class="page-link"><%=pp%></a>

</li>

<%}

}

//다음

if(endPage<totalPage)

{%>

<a class="page-link"

href="smartlist.jsp?currentPage=<%=endPage+1%>" style="color: black;">다음</a>

</li>

<%}

</ul>

</div>

</body>

</html>

해당 페이지를 켜보면 아래와같이 구현된다

전체선택 버튼과 함께

우측 하단에 삭제와 글쓰기 버튼을 넣어줬다

부트스트랩을 이용해서 아래에 이전 <블럭 넘버> 다음 버튼을 깔끔하게 구현해서 사용하도록 해줬다

자동 줄넘김 코드를 넣어서

긴 글을 정리해서 보여주도록 해보자

또한 제목이 너무 길 경우 아래 코드를 이용해서 줄여줄 수 있다

전체선택을 누르고 삭제를 누르면 삭제가 될 수 있도록 하고

전체 선택이나 체크박스를 누르지않고 삭제를 누르면 알림창이 나와서

삭제 할 값을 정할 수 있도록 구현해보자

alldelete jsp 파일에 위 코드를 작성해줘서

삭제를 할 수 있는 기능을 부여하고

smartlist 에 아래와같이 코드를 줘서

전체선택기능과 알림 창을 만들어주자

<%@page import="data.dto.SmartDto"%>

<%@page import="data.dao.SmartDao"%>

<%@page import="java.text.SimpleDateFormat"%>

<%@page import="java.util.List"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<link

href="https://fonts.googleapis.com/css2?family=Anton&family=Edu+VIC+WA+NT+Beginner:wght@600&family=Gamja+Flower&family=Single+Day&family=Jua&family=Nanum+Pen+Script&display=swap"

rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<style type="text/css">

body *{

font-family: 'Jua';

}

a:link,a:visited {

text-decoration: none;

color: black;

}

a:hover {

text-decoration: underline;

color: red;

}

</style>

</head>

//dao 선언

SmartDao dao=new SmartDao();

//페이징 처리에 필요한 변수들

//전체 갯수

int totalCount=dao.getTotalCount();

int perPage=2;//한페이지당 보여질 글의 갯수

int perBlock=3;//한블럭당 보여질 페이지의 갯수

int startNum;//db에서 가져올 글의 시작번호(mysql은 첫글이 0번,오라클은 1번)

int startPage;//각블럭당 보여질 시작페이지

int endPage;//각 블럭당 보여질 끝페이지

int currentPage;//현재 페이지

int totalPage;//총 페이지수

int no;//각 페이지당 출력할 시작번호

//현재 페이지를 읽는다. 단,null일경우는 1페이지로 준다

if(request.getParameter("currentPage")==null)

currentPage=1;

else

//계산을 해야하므로 int로 변환

currentPage=Integer.parseInt(request.getParameter("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;

//각페이지당 출력할 시작번호 구하기

//예: 총글갯수가 23이라면 1페이지는 23,2페이지는 18,3페이지는 13...

no=totalCount-(currentPage-1)*perPage;

//페이지에서 보여질 글만 가져오기

List<SmartDto> list=dao.getPagingList(startNum, perPage);

<body>

<div style="margin: 30px 30px;width: 800px;">

<br>

<table class="table table-bordered">

<caption align="top"><h5><b>스마트 게시판</b></h5></caption>

</tr>

if(totalCount==0)

{%>

</td>

</tr>

<%}else{

SimpleDateFormat sdf=new SimpleDateFormat("yyyy.MM.dd.");

for(SmartDto dto:list)

{

<tr>

<input type="checkbox" class="alldel" value="<%=dto.getNum()%>">

<%=no--%></td>

<a href="contentview.jsp?num=<%=dto.getNum()%>&currentPage=<%=currentPage%>">

<span style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;display: block;max-width: 250px;">

<img src="../save/<%=dto.getMainphoto() %>"width="40" height="40"

border="1">  

<%=dto.getSubject()%></span>

</a>

</td>

<%=sdf.format(dto.getWriteday()) %>

</td>

</tr>

<%}%>

<tr>

<input type="checkbox" class="alldelcheck"> 전체선택

<span style="float: right">

<button type="button" class="btn btn-danger btn-sm"

id="btndel">삭제</button>

<button type="button" class="btn btn-outline-info"

onclick="location.href='smartform.jsp'">

글쓰기</button>

</span>

</td>

</tr>

<%}//else 괄호

</table>

<div style="width: 750px;text-align: center;">

//이전

if(startPage>1)

{%>

<a class="page-link"

href=smartlist.jsp?currentPage=<%=startPage-1%> style="color: black;">이전</a>

</li>

<%}

for(int pp=startPage;pp<=endPage;pp++)

{

if(pp==currentPage)//현재페이지와 같은경우 약간의 css추가

{%>

<a href="smartlist.jsp?currentPage=<%=pp%>"

class="page-link"><%=pp%></a>

</li>

<%}else

{%>

<a href="smartlist.jsp?currentPage=<%=pp%>"

class="page-link"><%=pp%></a>

</li>

<%}

}

//다음

if(endPage<totalPage)

{%>

<a class="page-link"

href="smartlist.jsp?currentPage=<%=endPage+1%>" style="color: black;">다음</a>

</li>

<%}

</ul>

</div>

<script>

//전체 체크 클릭 시 체크 값 얻어서 모든 체크 값 전달하기

$(".alldelcheck").click(function(){

var chk=$(this).is(":checked");

$(".alldel").prop("checked", chk);

//전체 체크값을 글 앞의 체크에 일괄 전달하기

$(".alldel").prop("checked",chk);

});

//삭제 버튼 클릭 시 삭제

$("#btndel").click(function(){

//체크를 안했을 경우 '최소 1개 이상의 글을 선택해주세요' 라고 alert

//체크된 길이 구하기

var len=$(".alldel:checked").length;

if(len==0){

alert("최소 1개 이상의 글을 선택해주세요");

}else{

var a=confirm(len+"개의 글을 삭제하려면 [확인]을 눌러주세요")

if(a){

//체크된 곳의 value값(num)얻기

var n="";

$(".alldel:checked").each(function(idx){

n+=$(this).val()+",";

});

//마지막 컴마 제거하기

n=n.substring(0, n.length-1);

console.log(n);

//삭제 파일로 get방식 전송

location.href="alldelete.jsp?nums="+n;

}

});

</script>

</body>

</html>

저작자표시 비영리 변경금지

'개발' 카테고리의 다른 글

2022-09-01 프론트와 백 나누기 (0)	2022.09.14
Ajax를 알아보자 (0)	2022.08.30
2022-08-29 스마트 에디터 게시판 만들기 (0)	2022.08.29
2022-08-29 페이징처리 (0)	2022.08.29
220721-객체 지향 언어 핵심 정리하기 (0)	2022.07.21

현재글2022-08-30 스마트 에디터 게시판 만들기-2

Taemin's Devlog