본문 바로가기
JSP/연습

게시판2 완성용) 게시판+댓글 +페이징 --★

by SEOKIHOUSE 2023. 7. 2.

 

페이징 숫자.txt
0.00MB
bandicam 2023-07-15 23-31-50-616.mp4
17.78MB
0627practice_noajax.zip
2.93MB
0627게시판 다시만드는거 (2) (1).sql
0.00MB

<%@ 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">
<title>Insert title here</title>
	<style>
		a {
			color: black;
			text-decoration: none;
		}
		a:visited {
			color : black;
		}
		a:hover {
			text-decoration: underline;
		}
		#aa {
			border :1px solid black;
			position:absolute;
			float :left;
			left:430px;
			background-color: #8080806b;
			 
		}
		#aa:active {
			border :0.5px solid black;
			background-color: #808080a1;
		}
		#aa:hover {
			text-decoration: none;
		}
		.nounderline:hover {
			text-decoration: none;
		}
	</style>
</head>
<body>
	<h1>목록페이지</h1>
	<button id="loginbtn" type="button" onclick="gologin()">로그인</button>
	<script>
		window.onload = function() {
			let showinfos = document.querySelector("#showinfo");
			let loginBtn = document.querySelector("#loginbtn");	
			
			if(${empty id} == true) {
				showinfos.style.display ="none";
			}else {
				loginBtn.style.display ="none";
			}
			
		}
		function gologin() {
			location.href ="02_login.jsp";
		}
	</script>
	<div id="showinfo">
		<span>반갑습니다 ${id }님</span>
		<button type="button" onclick="logout()">로그아웃</button>
		<script>
			function logout() {
				console.log(window.location.href);
				location.href ="Logout?url="+window.location.href;
			}
		</script>
	</div>
	<hr>
	
	<div>
		<a id="aa" href="01_regForm.jsp">게시물 등록</a>
		<table border="1">
			<tbody>
			<tr>
				<th>번호</th>
				<th>제목</th>
				<th>작성자</th>
				<th>등록일</th>
			</tr>
			<c:forEach var="repeat" items="${list }">
				<tr>
					<td>${repeat.bno }</td>
					<td class="titles">
						<a href="detailServlet?nums=${repeat.bno }">
							${repeat.title } [${repeat.count}]
						</a>
					</td>
					
					<td>${repeat.writer }</td>
					<td><fmt:formatDate value="${repeat.regdate }" pattern="yyyy/MM/dd"/></td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
		

		<c:choose>
			<c:when test="${pageNum eq 1 }">
				<a href="selectServlet?pageNum=1" style="pointer-events:none">◀◀</a>				
			</c:when>
			<c:otherwise>
				<a href="selectServlet?pageNum=1">◀◀</a>
			</c:otherwise>
		</c:choose>		
		
		<c:choose>
			<c:when test="${startNum-1 < 1}">
				<a id="beforePage" href="selectServlet?pageNum=${startNum-10 }" style="pointer-events:none">◀</a>	
			</c:when>
			<c:otherwise>
				<a id="beforePage" href="selectServlet?pageNum=${startNum-10 }">◀</a>
			</c:otherwise>
		</c:choose>
		<%-- 1번 jsp에서 처리 --%>
		<%--
		<c:choose>
			<c:when test="${startNum+9 >pageMaxNum }">
				<c:set var="end" value="${pageMaxNum }"/>			
			</c:when>
			<c:otherwise>
				<c:set var="end" value="${startNum+9 }"/>
			</c:otherwise>
		</c:choose>
		
		<c:forEach var="repeat" begin="${startNum }" end="${end }">
			<a href="selectServlet?pageNum=${repeat}">${repeat }</a>
		</c:forEach>
		 --%>
		 
		<%--2번 서블렛에서 처리 --%>
		
		<c:forEach var="repeat" begin="${startNum }" end="${endNum }">
			<c:choose>
				<c:when test="${repeat eq pageNum }">
					<a href="selectServlet?pageNum=${repeat}" style="color: blue; border: 1px solid; black; border-radius: 20px; pointer-events: none;" class="nounderline">${repeat }</a>
				</c:when>
				<c:otherwise>
					<a class="nounderline" href="selectServlet?pageNum=${repeat}">${repeat }</a>
				</c:otherwise>
			</c:choose>
		</c:forEach>
		
		<c:choose>
			<c:when test="${startNum+10>pageMaxNum }">
				<a href="selectServlet?pageNum=${startNum+10 }" style="pointer-events: none;">▶</a>				
			</c:when>
			<c:otherwise>
				<a href="selectServlet?pageNum=${startNum+10 }">▶</a>
			</c:otherwise>
		</c:choose>
		
		<%-- 1. ESTL조건문으로 스타일 변경(pointer -events) --%>
		<%--
		<c:choose>
			<c:when test="${pageMaxNum eq pageNum }">
				<a class="ho" href="selectServlet?pageNum=${pageMaxNum }" style="pointer-events: none;">▶▶</a>
			</c:when>
			<c:otherwise>
				<a href="selectServlet?pageNum=${pageMaxNum }">▶▶</a>
			</c:otherwise>
		</c:choose>
		 --%>
			<a class="ho" href="selectServlet?pageNum=${pageMaxNum }">▶▶</a>
			
		<%-- 2. 자바스크립트로 스타일 변경 --%>
		<script>
			if(${pageMaxNum == pageNum}) {
				let ho = document.querySelector(".ho");
				ho.style.pointerEvents ="none";
			}
		</script>
	</div>
	
	
</body>
</html>
package servlet;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.BoardDao;
import vo.BoardVo;

@WebServlet("/selectServlet")
public class SelectServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String stPageNum = request.getParameter("pageNum");
		int pageNum = 1;
		if(stPageNum != null) {
			pageNum = Integer.parseInt(stPageNum);
			
		}
		
		BoardDao bd = new BoardDao();
		// 1번방법
		//ArrayList<BoardVo> ar = bd.selectFirst(pageNum);
		// 2번조인방법 댓글도 같이 추출방법
		ArrayList<BoardVo> ar = bd.selectSecond(pageNum);
		
		int startNum = ((pageNum -1)/10)*10 +1;
//		int startNum = ((int) Math.ceil(pageNum/10.0)-1)*10+1;
//		int startNum = ((pageNum+9)/10-1)*10+1;
		int endNum = startNum +9;
		
		int getMaxNum =(int) (bd.pageMaxNum());
		int pageMaxNum = (int) (Math.ceil(getMaxNum/10.0));
		
		if(endNum > pageMaxNum) {
			endNum = pageMaxNum;
		}
		
		request.setAttribute("startNum", startNum);
		request.setAttribute("endNum", endNum);
		request.setAttribute("pageMaxNum", pageMaxNum);
		request.setAttribute("pageNum", pageNum);
		
		request.setAttribute("list", ar);
		request.getRequestDispatcher("01_boardList.jsp").forward(request, response);
	}

}

ㅇㅣ건 댓글페이징용

<%@ 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">
<title>Insert title here</title>
	<style>
		a {
			color : black;
			text-decoration : none;
		}
		
		a:visited {
			color: black
		}
	</style>
	<script>
		window.onload = function() {
			let repair = document.querySelector("#rewrite");
			let del = document.querySelector("#delbtn");
			
			repair.addEventListener("click", function() {
				location.href = "goUpdatepage?bno=${detail.bno}";
			})
			
			//게시글 삭제
			del.addEventListener("click", function() {
				alert("삭제완료");
				location.href ="deleteServlet?bno=${detail.bno}";
			})
			
			//댓글등록 alert
			document.querySelector("#detbtn").addEventListener("click", function() {
				alert("댓글 등록완료");
			})
			
			//댓글삭제
			const tables2 = document.querySelector("#tb2");
			
			tables2.addEventListener("click", function () {
				if(event.target.className == "btns") {
					alert("댓글 삭제완료");
					location.href = "replyDelete?rno="+event.target.value+"&nums="+${detail.bno }+"&pageNum="+${pageNum};
				}else {
					return;
				}
			})
			
			if("${id}" != "${detail.writer }") {
				repair.style.display ="none";
				del.style.display ="none";
			}
			
			if(${empty id} == false) {
				document.querySelector("input[name=writer]").readOnly =true;
			}
		}
	</script>
</head>
<body>
	<h1>상세페이지</h1>
	<hr>
	<table border ="1">
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>내용</th>
			<th>작성자</th>
			<th>작성일</th>
			<th>수정일자</th>
		</tr>
		<tr>
			<td>${detail.bno }</td>
			<td>${detail.title }</td>
			<td>${detail.content }</td>
			<td>${detail.writer }</td>
			<td>
				<fmt:formatDate value="${detail.regdate }" pattern="yyyy/MM/dd"/>
			</td>
			<td>
				<fmt:formatDate value="${detail.moddate }" pattern="yyyy/MM/dd"/>
			</td>		
		</tr>
	</table>
	<button id="rewrite" type="button">수정</button>
	<button id="delbtn" type="button">삭제</button><br>
	
	<%--댓글영역 --%>
	<a href ="selectServlet" style="color:blue; border:1px solid black;">▶▶목록으로 가기◀◀</a>
	<h1>댓글(${replyTotalNum})</h1>
	<hr>
	
	<form action="replyRegist" method="GET"> 
		<input type="text" name="hidebno" value="${detail.bno }" style="display:none">
		작성자:<input type="text" name="writer" value="${id }" placeholder="작성자 이름을 입력하세요"><br>
		댓글내용:<input type="text" name="replycontent" placeholder="댓글 내용을 입력하세요" style="width:300px; height:50px">
		<input id="detbtn" type="submit" value="등록">
	</form>  	
	<table id="tb2" border="1">
		<tr>
			<th>번호</th>
			<th>댓글내용</th>
			<th>작성자</th>
			<th>댓글등록일</th>
			<th>댓글삭제</th>
		</tr>
		
		<c:forEach var="replys" items="${reply }" varStatus="counts">
			<tr>
				<td>${reply.size() - counts.count + 1}</td>
				<td>${replys.comments }</td>
				<td>${replys.writer }</td>
				<td>
					<fmt:formatDate value="${replys.regdate }" pattern="yyyy/MM/dd"/>
				</td>
				<td><button type="button" class="btns" value="${replys.rno }" style="width:100%">X</button></td>
			</tr>	
		</c:forEach>
	</table>
	
	
	<c:choose>
		<c:when test="${pageNum eq 1 }">
			<a href ="detailServlet?nums=${detail.bno }&pageNum=1" style="pointer-events:none">◀◀</a>
		</c:when>
		<c:otherwise>
			<a href ="detailServlet?nums=${detail.bno }&pageNum=1">◀◀</a>
		</c:otherwise>
	</c:choose>
	
	<c:choose>
		<c:when test="${startNum-1 <1 }">
			<a href ="detailServlet?nums=${detail.bno }&pageNum=${startNum-10 }" style="pointer-events:none">◀</a>
		</c:when>
		<c:otherwise>
			<a href ="detailServlet?nums=${detail.bno }&pageNum=${startNum-10 }">◀</a>
		</c:otherwise>
	</c:choose>
	
	<c:forEach var="re" begin="${startNum }" end="${endNum }">
		<c:choose>
			<c:when test="${pageNum eq re }">
				<a href ="detailServlet?nums=${detail.bno }&pageNum=${re}" style="color: blue; border: 1px solid; black; border-radius: 20px; pointer-events: none;">${re }</a>	
			</c:when>	
			<c:otherwise>
				<a href ="detailServlet?nums=${detail.bno }&pageNum=${re}">${re }</a>
			</c:otherwise>
		</c:choose>
	</c:forEach>
	
	<c:choose>
		<c:when test="${startNum+10>replyMaxCount}">
			<a href ="detailServlet?nums=${detail.bno }&pageNum=${startNum+10 }" style="pointer-events:none">▶</a>
		</c:when>
		<c:otherwise>
			<a href ="detailServlet?nums=${detail.bno }&pageNum=${startNum+10 }">▶</a>
		</c:otherwise>	
	</c:choose>
	
	<c:choose>
		<c:when test="${pageNum eq replyMaxCount }">
			<a href ="detailServlet?nums=${detail.bno }&pageNum=${replyMaxCount }" style="pointer-events:none">▶▶</a>
		</c:when>
		<c:otherwise>
			<a href ="detailServlet?nums=${detail.bno }&pageNum=${replyMaxCount }">▶▶</a>
		</c:otherwise>	
	</c:choose>
	
</body>
</html>
package servlet;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.BoardDao;
import dao.ReplyDao;
import vo.BoardVo;
import vo.ReplyVo;

@WebServlet("/detailServlet")
public class DetailServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String stbno = request.getParameter("nums");
		int bno = Integer.parseInt(stbno);
		
		BoardDao bd = new BoardDao();
		BoardVo bv = bd.selectOne(bno);
		
		//댓글
		String getNum = request.getParameter("pageNum");
		int pageNum = 1;
		if(getNum != null) {
			pageNum = Integer.parseInt(getNum);
		}
		
		ReplyDao rd = new ReplyDao();
		ArrayList<ReplyVo> ar = rd.selectReply(bno, pageNum);
		
		int startNum = ((pageNum -1) /10) * 10 +1;
		int endNum = startNum +9;
		int replyTotalNum = rd.selectTotalCount(bno);
		int replyMaxCount = (int)Math.ceil(replyTotalNum/10.0);
		
		if(endNum >replyMaxCount) {
			endNum = replyMaxCount;
		}
		
		request.setAttribute("startNum", startNum);
		request.setAttribute("endNum", endNum);
		request.setAttribute("replyMaxCount", replyMaxCount);
		request.setAttribute("pageNum", pageNum);
		request.setAttribute("replyTotalNum", replyTotalNum);
		
		request.setAttribute("detail", bv);
		request.setAttribute("reply", ar);
		request.getRequestDispatcher("01_detail.jsp").forward(request, response);
	}


}
저작자표시 비영리 변경금지 (새창열림)

'JSP > 연습' 카테고리의 다른 글

fetch 서블릿연계 post //배열  (0) 2023.07.14
fetch써서 get방식 연습 / txt파일로 가져오는것도 포함  (0) 2023.07.14
회원가입 만들기(수업시간 평가)  (0) 2023.07.02
미완성용 게시판 1)기존에 게시판 한거 다시 연습해보기..;; + server.xml/ context.xml이용 leftjoin  (0) 2023.06.27
연습해보기..connection..  (0) 2023.06.27

관련글

티스토리툴바