728x90
TODO : 검색 로직, 대 댓글 만들기(231107)
개발 환경 : 인텔리제이 --> SpringbootMybatisMini
폼만 작성한 코드를 작성해서 적어두겠습니다
addform.jsp (댓글 등록폼)
<%@ 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 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>Insert title here</title>
</head>
<body>
<c:if test="${sessionScope.loginok==null}">;
<script>
alert("먼저 로그인 해주세요")
history.back();
</script>
</c:if>
<div style="margin:50px 100px;">
<form action="insert" method="post" enctype="multipart/form-data">
<<%--hidden 5개 댓글--%>
<input type="hidden" name="num" value="${num}">
<input type="hidden" name="regroup" value="${regroup}">
<input type="hidden" name="restep" value="${restep}">
<input type="hidden" name="relevel" value="${relevel}">
<input type="hidden" name="currentPage value="${currentPage}">
<%--hidden 2개 id,name--%>
<input type="hidden" name="id" value="${sessionScope.myid}">
<input type="hidden" name="name" value="${sessionScope.loginname}">
<button type="button" class="btn btn-outline-info" onclick="location.href='list'">목록</button><br>
<table class="table table-bordred" style="width:800px; height: 600px;">
<tr>
<th width="100">제목</th>
<td><input type="text" name="subject" class="form-control" required="required"></td>
</tr>
<tr>
<th width="100">사진</th>
<td>
<input type="file" name="upload" class="form-control" multiple="multiple">
</td>
</tr>
<tr>
<td colspan="2">
<textarea style="width:700px; height: 150px;" name="content"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" class="btn btn-outline-info">게시글 저장</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
boardlist.jsp ( 게시글 출력폼)
<%@ 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 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>Insert title here</title>
</head>
<body>
<%-- 검색 창 --%>
<div class="searcharea" style="width:100%; text-align: center;">
<form action="list">
<div style="width:450px;" class="d-inline-flex">
<select class="form-select" style="width:150px;" name="searchcolumn">
<option value="all">전체</option>
<option value="subject">제목</option>
<option value="id">아이디</option>
<option value="name">작성자</option>
<option value="content">내용</option>
</select>
<input type="text" name="searchword" class="form-control" style="width:150px;" placeholder="검색어 입력하세요">
<button type="submit" class="btn btn-outline-danger">검색</button>
</div>
</form>
</div>
<div style="margin:20px 100px;">
<h3 class="alert alert-danger">총 ${totalCount}개의 글이 있습니다.</h3>
<br>
<button type="button" class="btn btn-info" onclick="location.href='form'" style="float:right;">글쓰기</button>
<button type="button" class="btn btn-danger" onclick="location.href='list?searchcolumn=id&searchword=${sessionScope.myid}'" style="float:right">내가 쓴글</button>
<br>
<table class="table table-bordered">
<tr>
<th width="60">번호</th>
<th width="60">제목</th>
<th width="60">작성자</th>
<th width="60">작성일</th>
<th width="40">조회</th>
<th width="60">추천</th>
</tr>
<c:if test="${totalCount==0}">
<tr>
<td colspan="6" align="center">
<h5>등록된 게시글이 없습니다.</h5>
</td>
</tr>
</c:if>
<c:if test="${totalCount>0}">
<c:forEach var="dto" items="${list}">
<tr>
<td align="center">${no}</td>
<c:set var="no" value="${no-1}"/>
<td>
<<%-- 답글일 경우 level 1개당 2칸 띄우기--%>
<c:forEach begin="1" end="${dto.relevel}">
</c:forEach>
<%--답글일 경우 답글 이미지--%>
<c:if test="${dto.relevel>0}">
<img src="../image/re.png">
</c:if>
<a href="content?num=${dto.num}¤tPage=${currentPage}">${dto.subject}</a>
<c:if test="${dto.photo !='no'}">
<i class="bi bi-images" style="color: gray"></i>
</c:if>
<c:if test="${dto.photo =='no'}">
<img src="../image/noimage.JPG">
</c:if>
</td>
<td align="center">${dto.name}</td>
<td>
<fmt:formatDate value="${dto.writeday}" pattern="yyyy년MM월dd일 HH시mm분"/>
</td>
<td>${dto.readcount}</td>
<td>${dto.likes}</td>
</tr>
</c:forEach>
</c:if>
</table>
<!-- 페이지 번호 출력 -->
<div>
<!-- 페이지 번호 출력 -->
<c:if test="${totalCount>0 }">
<div style="width: 1100px; 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>
</body>
</html>
content.jsp (댓글 출력폼)
<%@ page import="org.springframework.web.context.request.SessionScope" %>
<%@ 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 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>Insert title here</title>
</head>
<body>
<div style="width: 1000px; margin : 100px 100px;">
<table class="table table-bordered">
<tr>
<td>
<h2>${dto.subject}</h2>
<b>${dto.name}(${dto.id})</b><br>
<span style="color:gray; font-size:0.8em">
<fmt:formatDate value="${dto.writeday}" pattern="yyyy-MM-dd HH:mm"/>
조회수 : ${dto.readcount}
</span>
</td>
</tr>
<tr>
<td>
<pre>
${dto.content}
</pre><br><br>
<c:if test="${dto.photo!='no'}">
<c:forEach var="photo" items="${dto.photo}">
<img src="../rephoto/${photo}" width="150px;" class="img-thumnail">
</c:forEach>
</c:if>
<br><br>
<div class="likes">
<i class="bi bi-hand-thumbs-up-fill" style="cursor:pointer;"></i>
좋아요 <b>${dto.likes}</b>
</div>
</td>
</tr>
<tr align="center">
<td>
<button type="button" class="btn btn-outline-success" onclick="location.href='form?num=${dto.num}&restep=${dto.restep}&relevel=${dto.relevel}¤tPage=${currentPage}'">답글</button>
<%-- <c:if test="${sessionScope.loginok!=null && sessionScope.myid=dto.id}"> --%>
<button type="button" class="btn btn-outline-success" onclick="location.href='update?num=${dto.num}'">수정</button>
<button type="button" class="btn btn-outline-success" onclick="location.href='delete?num=${dto.num}'">삭제</button>
<button type="button" class="btn btn-outline-success" onclick="location.href='list?currnetPage=${currentPage}'">목록</button>
<button type="button" class="btn btn-info" onclick="location.href='form'">글쓰기</button>
</td>
</tr>
</table>
</div>
<script>
$("div.likes").click(function(){
var thum = $(this).find("i").attr("class"); //find -> i태그의 class를 찾는다.
if(thum =='bi bi-hand-thumbs-up-fill') {
$(this).find("i").attr("class","bi bi-hand-thumbs-up-fill a").css("color","red");
} else {
$(this).find("i").attr("class","bi bi-hand-thumbs-up-fill").css("color","black");
}
var num = ${dto.num}
//alert(num);
$.ajax({
type:"get",
url:"likes",
dataType:"json",
data : {"num":num},
success:function(res) {
$("div.likes").find("b").text(res.likes);
}
})
})
</script>
</body>
</html>
이상으로 답변형 게시판 끝 입니다.
728x90
