[구디아카데미 IT국비지원] home.jsp를 완성하고, 게시글 상세페이지와 댓글 작성 및 리스트 기능을 추가했다.

💡 home.jsp

home.jsp에 페이징 기능을 추가하고, 전반적으로 가독성을 높이기 위한 수정을 했다.

📍 작성

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<%@ page import = "java.util.*" %> <!-- HashMap 사용 -->
<%@ page import = "vo.*" %>
<%
	// 콘솔창 출력 색상 지정
	final String RED = "\u001B[31m";
	final String BG_RED = "\u001B[41m";
	final String GREEN = "\u001B[32m";
	final String BG_GREEN = "\u001B[42m";
	final String RESET = "\u001B[0m";

	// 1) 요청값 유효성 검사 (리다이렉션)
	// 세션값이 있는지 또는 페이징 시 rowPerPage나 currentPage 등..
	// 1-1) session JSP 내장(기본)객체
	// 일단 지금은 없음
	// 1-2) request / response JSP 내장(기본)객체
	// currentPage, rowPerPage, localName
	System.out.println(RED + request.getParameter("currentPage") + " <- home param currentPage");
	System.out.println(request.getParameter("rowPerPage") + " <- home param rowPerPage");
	System.out.println(request.getParameter("localName") + " <- home param localName" + RESET);
	
	int currentPage = 1;
	if(request.getParameter("currentPage") != null) {
		currentPage = Integer.parseInt(request.getParameter("currentPage"));
	}
	int rowPerPage = 10;
	if(request.getParameter("rowPerPage") != null) {
		rowPerPage = Integer.parseInt(request.getParameter("rowPerPage"));
	}
	String localName = "전체";
	if(request.getParameter("localName") != null) {
		localName = request.getParameter("localName");
	}
	
	System.out.println(GREEN + currentPage + " <- home currentPage");
	System.out.println(rowPerPage + " <- home rowPerPage");
	System.out.println(localName + " <- home localName" + RESET);
	
	// 2) 모델(=결과셋) 계층 (꼭 db에서만 가져오는 것은 아니다)
	// 드라이버 로딩 및 db 접속
	String driver = "org.mariadb.jdbc.Driver";
	String dburl = "jdbc:mariadb://127.0.0.1:3306/userboard";
	String dbuser = "****";
	String dbpw = "****";
	Class.forName(driver);
	Connection conn = DriverManager.getConnection(dburl, dbuser, dbpw);
	
	// 2-1) 서브메뉴를 출력하기 위한 쿼리 작성 (서브메뉴 결과셋)
	// 전체와 각 localName의 count를 조회하기 위해 쿼리를 합침(UNION ALL 사용)
	/*
		SELECT '전체' localName, COUNT(local_name) cnt FROM board
		UNION ALL 
		SELECT local_name, COUNT(local_name) FROM board GROUP BY local_name
	*/
	String subMenuSql = "SELECT '전체' localName, COUNT(local_name) cnt FROM board UNION ALL SELECT local_name, COUNT(local_name) FROM board GROUP BY local_name";
	PreparedStatement subMenuStmt = conn.prepareStatement(subMenuSql);
	ResultSet subMenuRs = subMenuStmt.executeQuery();
	System.out.println(BG_GREEN + subMenuStmt + " <- home subMenuStmt");
	
	// HashMap을 ArrayList에 넣기
	ArrayList<HashMap<String, Object>> subMenuList = new ArrayList<HashMap<String, Object>>();
	while(subMenuRs.next()) {
		HashMap<String, Object> m = new HashMap<String, Object>();
		m.put("localName", subMenuRs.getString("localName"));
		m.put("cnt", subMenuRs.getInt("cnt"));
		subMenuList.add(m);
	}
	
	// 2-2) 카테고리 별 게시글 10개씩 출력 (게시판 목록 결과셋)
	// 모델값을 구하기 위한 변수 추가
	int startRow = (currentPage - 1) * rowPerPage;
	
	// 쿼리 작성
	PreparedStatement boardStmt = null;
	ResultSet boardRs = null;
	// 기본 쿼리
	String boardSql = "SELECT board_no boardNo, board_title boardTitle, local_name localName, createdate createdate FROM board";
	// localName 선택 시 중간에 추가되는 쿼리
	String localNameSql = " WHERE local_name = ?";
	// 마지막에 들어가는 쿼리 // 작성일자 순으로 내림차순 정렬
	String lastSql = " ORDER BY createdate DESC LIMIT ?, ?";
	
	if(localName.equals("전체") || localName.equals("")) {
		boardSql = boardSql + lastSql;
		boardStmt = conn.prepareStatement(boardSql);
		boardStmt.setInt(1, startRow);
		boardStmt.setInt(2, rowPerPage);
	} else {
		boardSql = boardSql + localNameSql + lastSql;
		boardStmt = conn.prepareStatement(boardSql);
		boardStmt.setString(1, localName);
		boardStmt.setInt(2, startRow);
		boardStmt.setInt(3, rowPerPage);
	}
	System.out.println(boardStmt + " <- home boardStmt" + RESET);
	boardRs = boardStmt.executeQuery(); // DB쿼리 결과셋 모델
	
	// 일반적인 자료구조로 변경 ArrayList
	ArrayList<Board> boardList = new ArrayList<Board>(); // 애플리케이션에서 사용할 모델 (사이즈 0)
	// boardRs -> boardList
	while(boardRs.next()) {
		Board b = new Board(); // 얘가 while문 밖에 있으면..! b는 계속 바뀌어야되는데 바뀌지 않음
		b.boardNo = boardRs.getInt("boardNo");
		b.localName = boardRs.getString("localName");
		b.boardTitle = boardRs.getString("boardTitle");
		b.createdate = boardRs.getString("createdate");
		boardList.add(b); // 마지막에 여기서 b를 list에 추가하고 새로운 b(new)를 만들어야 계속해서 다른 b의 값들이 list에 추가될 것
	}
	// 디버깅
	System.out.println(BG_RED + boardList + " <- home boardList");
	System.out.println(boardList.size() + " <- home boardList.size" + RESET);
	
	// 2-3) 페이징을 위한 모델값 구하기
	// 모델값을 구하기 위한 변수 추가
	int totalCount = 0;
	int lastPage = 0;
	
	// 쿼리 작성
	PreparedStatement pageStmt = null;
	ResultSet pageRs = null;
	// 기본 쿼리
	String pageSql = "SELECT count(*) FROM board";
	// localName에 따라 where절 추가
	if(localName.equals("전체") || localName.equals("")) {
		pageStmt = conn.prepareStatement(pageSql);
	} else {
		pageSql = pageSql + localNameSql;
		pageStmt = conn.prepareStatement(pageSql);
		pageStmt.setString(1, localName);
	}
	System.out.println(BG_GREEN + pageStmt + " <- home pageStmt" + RESET);
	
	// totalCount // 쿼리 실행 결과값을 변수에 저장
	pageRs = pageStmt.executeQuery();
	if(pageRs.next()) {
		totalCount = pageRs.getInt("count(*)");
	}
	System.out.println(GREEN + totalCount + " <- home totalCount");
	
	// lastPage
	lastPage = totalCount / rowPerPage;
	if(totalCount % rowPerPage != 0) {
		lastPage = lastPage + 1;
	}
	System.out.println(lastPage + " <- home lastPage" + RESET);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>home.jsp</title>
	<!-- 부트스트랩5 사용 -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- include 페이지 : 메인메뉴(가로) -->	
<div>
	<!-- 액션태그 -->
	<jsp:include page="/inc/mainmenu.jsp"></jsp:include>
</div>
<!-------- include 페이지 끝 ------->	
	
<div class="container mt-5">
	<!----------------------------------------------------- 로그인폼 (세션에 id값이 null일때만 출력) ---------------------------------------------------->
	<div>
		<%
			if(session.getAttribute("loginMemberId") == null) {
		%>
				<h3 class="mt-4">로그인</h3>
				<div class="text-danger">
					<%	// msg 발생시 출력
						if(request.getParameter("msg") != null) {
					%>
							<%=request.getParameter("msg")%>
					<%
						}
					%>
				</div>
				<form action="<%=request.getContextPath()%>/member/loginAction.jsp" method="post">
					<table>
						<tr>
							<td>아이디</td>
							<td>
								<input type="text" name="memberId">
							</td>
						</tr>
						<tr>
							<td>패스워드</td>
							<td>
								<input type="password" name="memberPw">
							</td>
						</tr>
					</table>
					<button type="submit" class="btn btn-success">로그인</button>
				</form>
		<%
			}
		%>
	</div>
	<!----------------------------------------------------------- 로그인폼 끝 ------------------------------------------------------------------>
	
	<br>
	
	<div class="row">
	<!------------------------------------------------ 서브메뉴(세로) subMenuList모델 출력 --------------------------------------------------------->
		<div class="col-sm-4">
			<h3 class="mt-4">카테고리</h3>
			<ul class="nav nav-pills flex-column">
				<%
					for(HashMap<String, Object> m : subMenuList) {
				%>
						<li class="nav-item">
							<a href="<%=request.getContextPath()%>/home.jsp?localName=<%=(String)m.get("localName")%>" class="nav-link">
								<%=(String)m.get("localName")%>(<%=(Integer)m.get("cnt")%>)
								<!-- 값타입이 Object타입이므로 형변환 -->
							</a>
						</li>
				<%		
					}
				%>
			</ul>
		</div>
	<!--------------------------------------------------------- subMenuList 끝 ----------------------------------------------------------------->
	
	<!-------------------------------------------------- 카테고리별 게시글 10개씩 boardList모델 출력------------------------------------------------------>
		<div class="col-sm-8">
			<h3 class="mt-4">게시판</h3>
			<table class="table container">
				<thead class="table-success">
					<tr>	
						<th>카테고리</th>
						<th>제목</th>
						<th>작성일자</th>
					</tr>
				</thead>
				<tbody>
					<%
						for(Board b : boardList) {
					%>
							<tr>
								<td><%=b.localName%></td>
								<td>
									<a href="<%=request.getContextPath()%>/board/boardOne.jsp?boardNo=<%=b.boardNo%>">
										<%=b.boardTitle%>
									</a>
								</td>
								<td><%=b.createdate.substring(0, 10)%></td>
							</tr>
					<%
						}
					%>
				</tbody>
			</table>
			<!------- 페이징 시작 ------->
			<div class="text-center">
				<%
					if(currentPage > 1) {
				%>
						<a href="<%=request.getContextPath()%>/home.jsp?currentPage=<%=currentPage - 1%>&rowPerPage=<%=rowPerPage%>&localName=<%=localName%>" class="btn btn-success btn-sm">
							이전
						</a>
				<%
					}
				%>
					<%=currentPage%>페이지
				<%
					if(lastPage > currentPage) {
				%>
					<a href="<%=request.getContextPath()%>/home.jsp?currentPage=<%=currentPage + 1%>&rowPerPage=<%=rowPerPage%>&localName=<%=localName%>" class="btn btn-success btn-sm">
						다음
					</a>
				<%
					}
				%>
			</div>
			<!------- 페이징 끝 ------->
		</div>
	<!--------------------------------------------------------- boardList 끝 ------------------------------------------------------------------>
	</div>
</div>

	<br>
	
<!-- include 페이지 : Copyright -->
<div>
	<%
		// request.getRequestDispatcher(request.getContextPath()+"./inc/copyright.jsp").include(request, response);
		// 너무 길다. 그래서 액션태그를 활용한다!
	%> 
	<!-- 액션태그 -->
	<jsp:include page="/inc/copyright.jsp"></jsp:include>
</div>
<!-------- include 페이지 끝 ------->
	
</body>
</html>

• 가독성을 높이기위해 주석으로 섹션 나누기

• 한 페이지에서 여러개의 쿼리 작성 시 숫자로 구분하지 말고(ex. sql1 , sql2 ... ) 어떤 sql문인지 이름 짓는 것이 가독성도 좋고, 디버깅 시 확인하기 용이함!

• 궁금한 점

  1. home.jsp는 회원/비회원 모두 들어올 수 있는 페이지인데도 세션값 유효성 검사를 해야하는지?
  2. 페이징 시 rowPerPage도 매번 유효성 검사를 해야하는지 / 값을 넘겨줘야하는지
  3. 지금은 샘플데이터로 createdate를 2022.5.4~2023.5.4 중 랜덤부여를 했기 때문에 ORDER BY시 boardNo를 사용하지 않았지만, 샘플데이터를 사용하는 것이 아니라면(순차적으로 게시글 작성이 이루어진다면) 새로운 게시글 생성시 자동으로 중복없는 숫자가 부여되는 기본키인 boardNo를 기준으로 해도 되는 걸까? 아니면 그렇다 해도 createdate를 기준으로 하는 것이 맞는건가?
  4. 자바에서 substring 메서드를 사용하지 않고, db에서 가져올 때부터 일부글자만 추출해서 가져오기 위해 substr(createdate,1,10)으로 작성했더니 ORDER BY도 시간이 잘린 기준으로 정렬되어버렸다. ORDER BY절에는 substr을 작성하지 않았는데도 같이 적용되는 것인지?
     
     

📍 결과

페이징을 추가했다. 카테고리 변경시(localName 값에 따라) 이전/다음 버튼을 다르게 출력.

💡 boardOne.jsp

home.jsp에서 게시글 제목(boardTitle) 클릭 시 게시글 상세 페이지(boardOne.jsp)로 이동하도록 했다. 게시글 상세 페이지에는 게시글 상세 보기/ 댓글 입력 폼/ 댓글 리스트를 출력하도록 했다. 또한 댓글 입력 폼은 회원 전용으로 구현하고, 댓글 리스트은 페이징이 가능하도록 했다.

📌 comment 테이블 추가

댓글 기능을 추가하기 위해 새로운 데이터 테이블을 추가했다. 기본키는 comment_no로 두었고 어떤 게시글(board_no)에, 어떤 사용자(member_id)가 작성했는지 알아야하기 때문에 각각 외래키로 두었다.

📌 샘플데이터 작성

댓글 샘플데이터를 추가했다. board_no는 페이징 작업 테스트틀 위해 1000,998,996,994,992 총 5개의 게시글에만 지정했다.

📌 JOIN문 미리보기

10일차 수업때 join이 어떤 것인지에 대해서만 간략하게 배웠었다.

중복된 데이터 작성을 줄여서 오류를 최소화하기 위해 테이블을 분리하는데 이것을 정규화라고 한다. 정규화한 2개 이상의 데이터 테이블을 연결해서 최종 결과를 내는 것을 join이라고 부른다.

/* boardOne.jsp의 결과셋 두가지 방법 */

/* 1) 두번의 쿼리로 따로따로 (userboard프로젝트에서 사용) */
SELECT board_no, board_title
FROM board
WHERE board_no = 1000;

SELECT comment_no, board_no, comment_content
FROM COMMENT
WHERE board_no = 1000
LIMIT 0 , 10;

/* 2) 한번에 쿼리로 (조인 문법 사용, 조인 문법은 SQL문법 수업에서 다시...) */
SELECT b.board_title, b.board_no, c.board_no, c.comment_content
FROM board b INNER JOIN comment c
ON b.board_no = c.board_no
WHERE b.board_no = 1000
ORDER BY c.createdate DESC;

게시글의 정보(board 테이블)와 댓글 리스트(comment 테이블)을 같이 출력하려면 두번의 쿼리 작성을 통해 각각 출력하는 방법도 있지만, board 테이블과 comment 테이블을 join한다면 한번의 쿼리 작성으로도 구현이 가능할 것이다. 이번 시간에는 우선 두번의 쿼리 작성을 통한 방법으로 구현하기로 했고, 다음시간에 배울 join문을 미리 보여주셨다.

join문 작성 시에는 테이블에 별명(AS)을 지정해주고, 테이블명+마침표(.)+컬럼명으로 작성한다.

INNER JOIN 를 생략하고 쉼표(,)로 작성 가능하지만 표준 방법이 아니기 때문에 DB마다 사용이 안될 수도 있다.
실행 순서는 from절이 제일 먼저 실행된다. 즉, from절에서 작성된 별명(AS)는 다른 절에서도 사용이 가능한 것이다.
join문 작성시 ON 뒤에 일치하는 외래키의 조건을 넣는다.

📌 Comment 클래스 생성

Vo타입의 Comment 객체를 생성하였다.

📌 작성

✔ 구현해야할 점

• 게시글 상세 정보 출력 (board 테이블)
• 댓글 입력 폼 생성 (회원 전용)
• 댓글 리스트 출력 (comment 테이블), 최근순으로 정렬
• 댓글 리스트 페이징하기
  
  

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<%@ page import = "java.util.*" %>
<%@ page import = "vo.*" %>
<%
	//콘솔창 출력 색상 지정
	final String RED = "\u001B[31m";
	final String BG_RED = "\u001B[41m";
	final String GREEN = "\u001B[32m";
	final String BG_GREEN = "\u001B[42m";
	final String RESET = "\u001B[0m";
	
	// 1) 요청값 유효성 검사
	// currentPage, rowPerPage, boardNo
	System.out.println(RED + request.getParameter("currentPage") + " <- boardOne param currentPage");
	System.out.println(request.getParameter("rowPerPage") + " <- boardOne param rowPerPage");
	System.out.println(request.getParameter("boardNo") + " <- boardOne param boardNo" + RESET);

	// boardNo가 null이거나 공백이면 home으로 리다이렉션
	if(request.getParameter("boardNo") == null
			|| request.getParameter("boardNo").equals("")) {
		response.sendRedirect(request.getContextPath() + "/home.jsp");
		return;
	}
	int boardNo = Integer.parseInt(request.getParameter("boardNo"));
	// currentPage
	int currentPage = 1;
	if(request.getParameter("currentPage") != null) {
		currentPage = Integer.parseInt(request.getParameter("currentPage"));
	}
	// rowPerPage
	int rowPerPage = 10;
	if(request.getParameter("rowPerPage") != null) {
		rowPerPage = Integer.parseInt(request.getParameter("rowPerPage"));
	}
	// 디버깅
	System.out.println(GREEN + currentPage + " <- boardOne currentPage");
	System.out.println(rowPerPage + " <- boardOne rowPerPage");
	System.out.println(boardNo + " <- boardOne boardNo" + RESET);
	
	// 2) 모델값 구하기
	// 드라이버 로딩 및 db 접속
	String driver = "org.mariadb.jdbc.Driver";
	String dburl = "jdbc:mariadb://127.0.0.1:3306/userboard";
	String dbuser = "****";
	String dbpw = "****";
	Class.forName(driver);
	Connection conn = DriverManager.getConnection(dburl, dbuser, dbpw);
	
	// 2-1) 해당 boardNo의 게시글 상세보기 - boardOne
	// SELECT * FROM board WHERE board_no = ?
	PreparedStatement boardOneStmt = null;
	ResultSet boardOneRs = null;
	String boardOneSql = "SELECT board_no boardNo, local_name localName, board_title boardTitle, board_content boardContent, member_id memberId, createdate createdate, updatedate updatedate FROM board WHERE board_no = ?";
	boardOneStmt = conn.prepareStatement(boardOneSql);
	boardOneStmt.setInt(1, boardNo);
	System.out.println(BG_GREEN + boardOneStmt + " <- boardOne boardOneStmt");
	
	// Vo타입으로 바꾸기
	boardOneRs = boardOneStmt.executeQuery();
	Board board = null;
	if(boardOneRs.next()) {
		board = new Board();
		board.boardNo = boardOneRs.getInt("boardNo");
		board.localName = boardOneRs.getString("localName");
		board.boardTitle = boardOneRs.getString("boardTitle");
		board.boardContent = boardOneRs.getString("boardContent");
		board.memberId = boardOneRs.getString("memberId");
		board.createdate = boardOneRs.getString("createdate");
		board.updatedate = boardOneRs.getString("updatedate");
	}
	
	// 2-2) 해당 boardNo의 댓글 리스트 출력 - commentList
	// 모델값을 구하기 위한 변수 추가
	int startRow = (currentPage - 1) * rowPerPage;
	
	// 쿼리 작성 // 작성일자 순으로 내림차순 정렬
	// SELECT comment_content, member_id, createdate, updatedate FROM comment WHERE board_no = ? ORDER BY createdate DESC LIMIT ?, ?
	PreparedStatement commentListStmt = null;
	ResultSet commentListRs = null;
	String commentListSql = "SELECT comment_content commentContent, member_id memberId, createdate createdate, updatedate updatedate FROM comment WHERE board_no = ? ORDER BY createdate DESC LIMIT ?, ?";
	commentListStmt = conn.prepareStatement(commentListSql);
	commentListStmt.setInt(1, boardNo);
	commentListStmt.setInt(2, startRow);
	commentListStmt.setInt(3, rowPerPage);
	System.out.println(commentListStmt + " <- boardOne commentListStmt");
	
	// Vo타입의 ArrayList로 바꾸기
	commentListRs = commentListStmt.executeQuery();
	ArrayList<Comment> commentList = new ArrayList<Comment>();
	while(commentListRs.next()) {
		Comment c = new Comment();
		c.commentContent = commentListRs.getString("commentContent");
		c.memberId = commentListRs.getString("memberId");
		c.createdate = commentListRs.getString("createdate");
		c.updatedate = commentListRs.getString("updatedate");
		commentList.add(c);
	}
	// 디버깅
	System.out.println(BG_RED + commentList + " <- boardOne commentList");
	System.out.println(commentList.size() + " <- boardOne commentList.size" + RESET);
	
	// 2-3) 페이징을 위한 모델값 구하기
	// 모델값을 구하기 위한 변수 추가
	int totalCount = 0;
	int lastPage = 0;
	
	// 해당 boardNo의 댓글의 총 갯수를 구하는 쿼리 작성
	PreparedStatement commentPageStmt = null;
	ResultSet commentPageRs = null;
	String commentPageSql = "SELECT count(*) FROM comment WHERE board_no = ?";
	commentPageStmt = conn.prepareStatement(commentPageSql);
	commentPageStmt.setInt(1, boardNo);
	System.out.println(BG_GREEN + commentPageStmt + " <- boardOne commentPageStmt" + RESET);
	
	// totalCount
	commentPageRs = commentPageStmt.executeQuery();
	if(commentPageRs.next()) {
		// 결과값을 변수에 저장
		totalCount = commentPageRs.getInt("count(*)");
	}
	System.out.println(GREEN + totalCount + " <- boardOne totalCount");
	
	// lastPage
	lastPage = totalCount / rowPerPage;
	if(totalCount % rowPerPage != 0) {
		lastPage = lastPage + 1;
	}
	System.out.println(lastPage + " <- boardOne lastPage" + RESET);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>boardOne.jsp</title>
	<!-- 부트스트랩5 사용 -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- include 페이지 : 메인메뉴(가로) -->	
<div>
	<!-- 액션태그 -->
	<jsp:include page="/inc/mainmenu.jsp"></jsp:include>
</div>
<!-------- include 페이지 끝 ------->	

<div class="container mt-5">
	<!-------------------------------------------------- 게시글 상세보기 boardOne모델 출력------------------------------------------------------>
	<h3 class="mt-4">게시글 상세보기</h3>
	<table class="table container">
		<tr>
			<th class="table-success">글번호</th>
			<td>No.<%=board.boardNo%></td>
		</tr>
		<tr>
			<th class="table-success">카테고리</th>
			<td><%=board.localName%></td>
		</tr>
		<tr>
			<th class="table-success">작성자</th>
			<td><%=board.memberId%></td>
		</tr>
		<tr>
			<th class="table-success">제목</th>
			<td><%=board.boardTitle%></td>
		</tr>
		<tr>
			<th class="table-success">내용</th>
			<td><%=board.boardContent%></td>
		</tr>
		<tr>
			<th class="table-success">작성일자</th>
			<td><%=board.createdate%></td>
		</tr>
		<tr>
			<th class="table-success">수정일자</th>
			<td><%=board.updatedate%></td>
		</tr>
	</table>
	<div class="text-center">
		<a href="" class="btn btn-success">수정</a>
		<a href="" class="btn btn-success">삭제</a>
	</div>
	<!--------------------------------------------------------- boardOne 끝 ------------------------------------------------------------------>
		
	<br>
	
	<!----------------------------------------------------- 댓글입력폼 (세션에 id값이 있을때만 출력) --------------------------------------------------->
	<div>
		<%
			// 로그인 사용자만 댓글 입력을 허용하기 위해 분기
			if(session.getAttribute("loginMemberId") != null) {
				// 현재 로그인 사용자의 아이디를 변수에 넣기
				String loginMemberId = (String)session.getAttribute("loginMemberId"); // 형변환해주기
		%>
				<h5 class="mt-4">댓글입력</h5>
				<div class="text-danger">
					<%
						// msg 발생시 출력
						if(request.getParameter("msg") != null) {
					%>
							<%=request.getParameter("msg") %>
					<%
						}
					%>
				</div>
				<form action="<%=request.getContextPath()%>/board/insertCommentAction.jsp" method="post">
					<!-- boardNo와 memberId는 입력값이 없기 때문에 hidden으로 넘김 -->
					<input type="hidden" name="boardNo" value="<%=board.boardNo%>">
					<input type="hidden" name="memberId" value="<%=loginMemberId%>">
					<table>
						<tr>
							<td>댓글</td>
							<td>
								<textarea rows="3" cols="80" name="commentContent"></textarea>
							</td>
						</tr>
					</table>
					<button type="submit" class="btn btn-success">입력</button>
				</form>
		<%
			}
		%>
	</div>
	<!----------------------------------------------------------- 댓글입력폼 끝 ----------------------------------------------------------------->

	<br>
	
	<!------------------------------------------------------- 댓글리스트 commentList모델 출력  ----------------------------------------------------->
	<table class="table table-hover">
		<thead>
			<tr>
				<th>댓글 내용</th>
				<th>작성자</th>
				<th>작성일자</th>
				<th>수정일자</th>
				<th>수정</th>
				<th>삭제</th>
			</tr>
		</thead>
		<tbody>			
			<%
				for(Comment c : commentList) {
			%>
					<tr>
						<td><%=c.commentContent%></td>
						<td><%=c.memberId%></td>
						<td><%=c.createdate%></td>
						<td><%=c.updatedate%></td>
						<td>
							<a href="" class="btn btn-outline-secondary btn-sm">수정</a>
						</td>
						<td>
							<a href="" class="btn btn-outline-secondary btn-sm">삭제</a>
						</td>
					</tr>
			<%
				}
			%>
		</tbody>
	</table>
	<%
		// 댓글이 없으면 출력
		if(totalCount == 0) {
	%>
			<h5>댓글이 없습니다 ㅠㅠ</h5>
	<%
		}
	%>
	
	<!------- 페이징 시작 ------->
	<div class="text-center">
		<%
			if(currentPage > 1) {
		%>
				<a href="<%=request.getContextPath()%>/board/boardOne.jsp?currentPage=<%=currentPage - 1 %>&rowPerPage=<%=rowPerPage%>&boardNo=<%=boardNo%>" class="btn btn-success btn-sm">
					이전
				</a>
		<%
			}
		%>
			<%=currentPage%>페이지
		<%
			if(lastPage > currentPage) {
		%>
			<a href="<%=request.getContextPath()%>/board/boardOne.jsp?currentPage=<%=currentPage + 1%>&rowPerPage=<%=rowPerPage%>&boardNo=<%=boardNo%>" class="btn btn-success btn-sm">
				다음
			</a>
		<%
			}
		%>
	</div>
	<!------- 페이징 끝 ------->
	<!--------------------------------------------------------------- commentList 끝 -------------------------------------------------------------->
</div>

	<br>
	
<!-- include 페이지 : Copyright -->
<div>
	<!-- 액션태그 -->
	<jsp:include page="/inc/copyright.jsp"></jsp:include>
</div>
<!-------- include 페이지 끝 ------->

</body>
</html>

• 저번 다이어리 프로젝트는 세션기능을 이용하지 않았기 때문에 게시글 작성 시 비밀번호를 입력하도록 하고, 수정/삭제 시 비밀번호 입력 폼을 만들어 비밀번호가 일치하지 않으면 수정/삭제가 되지 않도록 했다. 하지만 이번 프로젝트는 세션기능을 사용하기 때문에, 비밀번호 입력 폼을 만들 필요가 없다. 또한, action 페이지 작성 시에도 쿼리에 where절을 작성할 필요가 없을 것이다.
• 따라서 댓글 입력 시 현재 로그인 사용자의 아이디(session.getAttribute("loginMemberId"))의 값을 넘긴다.

📌 결과

로그인 안했을 때 (세션값 X) 해당 boardNo의 댓글 리스트 출력 (가장 최근에 작성된 댓글이 상단으로 올라오도록 정렬), 댓글 10개 이하시에는 페이징 발생X, 댓글 리스트 첫페이지에선 이전이 출력되지 않음

로그인 시 (세션값 O) 댓글 입력 폼 출력

댓글이 존재하지 않을 시 메세지 출력

댓글 10개 초과 출력 시 페이징 발생O, 해당 boardNo의 댓글 리스트 마지막 페이지에선 다음이 출력되지 않음

💡 insertCommentAction.jsp

댓글 입력(insert) 시 action페이지를 직접 작성해보는 과제 시간을 가졌다.

📍 작성

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import = "java.net.*"%>
<%@ page import = "vo.*" %>
<%@ page import = "java.sql.*" %>
<%
	//콘솔창 출력 색상 지정
	final String RED = "\u001B[31m";
	final String BG_RED = "\u001B[41m";
	final String GREEN = "\u001B[32m";
	final String BG_GREEN = "\u001B[42m";
	final String RESET = "\u001B[0m";
	
	// 인코딩
	request.setCharacterEncoding("utf-8");

	// 1) 요청값 유효성 검사
	// boardNo, memberId, commentContent
	System.out.println(RED + request.getParameter("boardNo") + " <- insertCommentAction param boardNo");
	System.out.println(request.getParameter("memberId") + " <- insertCommentAction param memberId");
	System.out.println(request.getParameter("commentContent") + " <- insertCommentAction param commentContent" + RESET);
	
	// boardNo, memberId
	if(request.getParameter("boardNo") == null
			|| request.getParameter("boardNo").equals("")
			|| request.getParameter("memberId") == null
			|| request.getParameter("memberId").equals("")) {
		response.sendRedirect(request.getContextPath() + "/home.jsp");
		return;
	}
	// null이거나 공백이 아니면 값 변수에 받기
	int boardNo = Integer.parseInt(request.getParameter("boardNo"));
	String memberId = request.getParameter("memberId");
	
	// commentContent
	if(request.getParameter("commentContent") == null
			|| request.getParameter("commentContent").equals("")) {
		String msg = URLEncoder.encode("댓글 내용을 입력해주세요!", "utf-8");
		response.sendRedirect(request.getContextPath() + "/board/boardOne.jsp?boardNo=" + boardNo + "&msg=" + msg);
		return;
	}
	// null이거나 공백이 아니면 값 변수에 받기
	String commentContent = request.getParameter("commentContent");
	
	// 디버깅
	System.out.println(GREEN + boardNo + " <- insertCommentAction boardNo");
	System.out.println(memberId + " <- insertCommentAction memberId");
	System.out.println(commentContent + " <- insertCommentAction commentContent" + RESET);
	
	// 파라미터값 클래스에 저장
	Comment paramComment = new Comment();
	paramComment.boardNo = boardNo;
	paramComment.memberId = memberId; 
	paramComment.commentContent = commentContent; 
	
	// 2) insert
	// 드라이버 로딩 및 db 접속
	String driver = "org.mariadb.jdbc.Driver";
	String dburl = "jdbc:mariadb://127.0.0.1:3306/userboard";
	String dbuser = "****";
	String dbpw = "****";
	Class.forName(driver);
	Connection conn = DriverManager.getConnection(dburl, dbuser, dbpw);
	
	// 쿼리 작성
	// INSERT INTO comment(board_no, comment_content, member_id, createdate, updatedate) VALUES(?, ?, ?, NOW(), NOW())
	String sql = "INSERT INTO comment(board_no, comment_content, member_id, createdate, updatedate) VALUES(?, ?, ?, NOW(), NOW())";
	PreparedStatement stmt = conn.prepareStatement(sql);
	stmt.setInt(1, paramComment.boardNo);
	stmt.setString(2, paramComment.commentContent);
	stmt.setString(3, paramComment.memberId);
	System.out.println(BG_GREEN + stmt + " <- insertCommentAction stmt");
	
	// 쿼리가 잘 실행되었는지 확인
	// 해당 boardNo의 boardOne 페이지로 리다이렉션
	int row = stmt.executeUpdate(); // 1이면 1행 성공
	if(row == 1) {
		System.out.println("insertCommentAction 댓글 입력 성공" + RESET);
		response.sendRedirect(request.getContextPath() + "/board/boardOne.jsp?boardNo=" + boardNo);
		return;
	} else {
		System.out.println(BG_RED + "insertCommentAction 댓글 입력 실패" + RESET);
		String msg = URLEncoder.encode("댓글이 등록되지 않았습니다", "utf-8");
		response.sendRedirect(request.getContextPath() + "/board/boardOne.jsp?boardNo=" + boardNo + "&msg=" + msg);
		return;
	}
%>

• 유효성 검사의 개념은 아직도 조금 아리송한 것 같다. 어떤 값을 검사해야하고, 어디로 리다이렉션 할지 구상을 잘 해야하기 위해서는 넘어오는 값이 무엇이고 넘어가야될 값이 무엇인지 잘 파악하는 것이 중요할 것이다.

• 궁금한 점

  • insert시 파라미터값을 객체(class)에 반드시 저장해야 하는지?
    
    
    
    

📍 결과

댓글(commentContent값) null 또는 공백인 상태로 댓글입력을 시도하면 msg 출력