스프링부트 팀플) 20240325 게시판 전체

전체 게시판 출력

 

 

 

<!-- 게시판 글 리스트업 -->

<div class="card text-center">

<div class="card-body">

<table class="table table-striped">

<thead>

<tr id="listHead">

<th class="col-1">글번호</th>

<th class="col-1" id="cateHeadText">카테고리</th>

<th class="col-auto">제목</th>

<th class="col-1">닉네임</th>

<th class="col-1">작성 날짜</th>

<th class="col-1">조회수</th>

<th class="col-1">추천수</th>

</tr>

</thead>

<tbody>

<c:forEach var="db" items="${list}" varStatus="vs">

<tr>

<td><span class="badge bg-info"><c:out value="${db.boardNum}"/></span></td>

<td><span class="badge bg-secondary"><c:out value="${db.category}"/></span></td>

<td class="text-start"><span id="titleText" class="link-primary" onclick="submitForm(${db.boardNum})">${db.title}</span></td>

<td id="nameText"><c:out value="${db.nickname}"/></td>

<td id="timeText"><c:out value="${db.edittedDate}"/></td>

<td><span class="badge bg-warning text-dark"><c:out value="${db.viewCount > 9999 ? '9999+' : db.viewCount}"/></span></td>

<td><span class="badge bg-success"><c:out value="${Math.min(Math.max(db.recommendNum - db.disRecommendNum, -999), 999)}"/></span></td>

</tr>

</c:forEach>

</tbody>

</table>

</div>

</div>

 

//게시판 글 목록 보기

@GetMapping("/viewDBoardList")

public ModelAndView viewDBoardList(

@RequestParam(defaultValue = "1") int currentPage,

@RequestParam(defaultValue = "10") int perPage,

String orderBy, HttpServletRequest request, HttpServletResponse response) throws ParseException {

 

// 전체 글 개수 가져오기 (페이지네이션에 사용될 수 있음)

List<DebugBoardDTO> allPosts = serv.viewDBoardList(orderBy);

int totalPosts = allPosts.size();

 

// 현재 페이지에 해당하는 글 목록 생성

List<DebugBoardDTO> list = new ArrayList<>();

int startIndex = (currentPage - 1) * perPage;

int endIndex = Math.min(startIndex + perPage, totalPosts);

for (int i = startIndex; i < endIndex; i++) {

list.add(allPosts.get(i));

}

 

//리스트의 날짜 형식 변경

for (DebugBoardDTO debugBoardDTO : list) {

debugBoardDTO.setEdittedDate(chooseDateForm(debugBoardDTO.getEdittedDate()));

}

 

ModelAndView mav = new ModelAndView();

mav.addObject("currentPage", currentPage);

mav.addObject("perPage", perPage);

mav.addObject("orderBy", orderBy);

mav.addObject("totalPosts", totalPosts);

mav.addObject("list", list);

mav.setViewName("member/Board/viewDBoardList");

return mav;

}

 

<!-- 게시판 목록 출력 -->

<select id="viewDBoardList" resultType="DebugBoardDTO">

SELECT

boardNum, nickname, title, category, edittedDate, viewCount, recommendNum, disRecommendNum

FROM

debugBoardDB

<choose>

<when test="orderBy == 'boardNum'"> <!-- 기본정렬 -->

ORDER BY boardNum desc

</when>

<when test="orderBy == 'viewCount'"> <!-- 인기글 -->

WHERE viewcount > 100

ORDER BY viewCount desc

</when>

<when test="orderBy == 'recommendNum'"> <!-- 추천글 -->

WHERE recommendNum-disRecommendNum >= 20

ORDER BY recommendNum desc

</when>

<when test="orderBy == '정보'"> <!-- 정보 카테고리 -->

WHERE category = '정보'

ORDER BY boardNum desc

</when>

<when test="orderBy == '문제'"> <!-- 문제 카테고리 -->

WHERE category = '문제'

ORDER BY boardNum desc

</when>

<when test="orderBy == '질문'"> <!-- 질문 카테고리 -->

WHERE category = '질문'

ORDER BY boardNum desc

</when>

<when test="orderBy == '정리'"> <!-- 정리 카테고리 -->

WHERE category = '정리'

ORDER BY boardNum desc

</when>

<when test="orderBy == '잡담'"> <!-- 잡담 카테고리 -->

WHERE category = '잡담'

ORDER BY boardNum desc

</when>

<otherwise>

ORDER BY boardNum desc <!-- 기본정렬 -->

</otherwise>

</choose>

</select>

 

 

카테고리 탭 정렬(정보 / 문제 / 질문 / 정리 / 잡담)

 

인기글(조회수 100이상)

추천글(추천수 20이상)

<!-- 게시판, 글 네비게이션 -->

<div class="row">

<!-- 글 정렬 -->

<div class="col">

<div class="btn-group" role="group" aria-label="글 정렬">

<button type="button" class="btn btn-outline-primary" name="orderBy" value="boardNum" onClick="changeList(this)">일반</button>

<button type="button" class="btn btn-outline-primary" name="orderBy" value="viewCount" onClick="changeList(this)">인기</button>

<button type="button" class="btn btn-outline-primary" name="orderBy" value="recommendNum" onClick="changeList(this)">추천</button>

</div>

</div>

 

<!-- 카테고리 검색 -->

<div class="col-auto">

<div class="mb-3">

<span class="badge bg-secondary" onClick="changeTab(this)">정보</span>

<span class="badge bg-secondary" onClick="changeTab(this)">문제</span>

<span class="badge bg-secondary" onClick="changeTab(this)">질문</span>

<span class="badge bg-secondary" onClick="changeTab(this)">정리</span>

<span class="badge bg-secondary" onClick="changeTab(this)">잡담</span>

</div>

</div>

</div>

//게시판 리스트 변경

function changeList(e) {

var orderBy = e.value

window.location.href ="<c:url value='/viewDBoardList'/>?orderBy="+orderBy;

}

 

//게시판 탭 변경

function changeTab(e) {

var orderBy = e.innerText

window.location.href ="<c:url value='/viewDBoardList'/>?orderBy="+orderBy;

}

 

 

검색어를 입력한 경우

 

 

<!-- 글 검색 -->

<form action="<c:url value='/searchPost'/>" method="post" class="d-flex">

<input type="hidden" name="orderBy" value="${orderBy}">

<select class="col-auto" name="searchTag" style="height: 38px;">

<option value="title_contents">제목 + 내용</option>

<option value="title">제목</option>

<option value="contents">내용</option>

<option value="nickname">닉네임</option>

</select>

<div class="col-auto">&nbsp;</div>

<input class="col-auto" type="text" name="searchData" style="height: 38px;">

<div class="col-auto">&nbsp;</div>

<button class="btn btn-primary col-auto" type="submit">검색</button>

</form>

 

//게시판 글 검색하기

@PostMapping("/searchPost")

public ModelAndView searchPost(

@RequestParam(defaultValue = "1") int currentPage,

@RequestParam(defaultValue = "10") int perPage,

String orderBy, String searchTag, String searchData) throws ParseException {

HashMap<String, String> map = new HashMap<>();

map.put("searchTag", searchTag);

map.put("searchData", searchData);

map.put("category", orderBy);

 

List<DebugBoardDTO> allPosts = serv.searchList(map);

int totalPosts = allPosts.size();

 

// 현재 페이지에 해당하는 글 목록 생성

List<DebugBoardDTO> list = new ArrayList<>();

int startIndex = (currentPage - 1) * perPage;

int endIndex = Math.min(startIndex + perPage, totalPosts);

for (int i = startIndex; i < endIndex; i++) {

list.add(allPosts.get(i));

}

 

//리스트의 날짜 형식 변경

for (DebugBoardDTO debugBoardDTO : list) {

debugBoardDTO.setEdittedDate(chooseDateForm(debugBoardDTO.getEdittedDate()));

}

 

ModelAndView mav = new ModelAndView();

mav.addObject("currentPage", currentPage);

mav.addObject("perPage", perPage);

mav.addObject("orderBy", orderBy);

mav.addObject("totalPosts", totalPosts);

mav.addObject("list", list);

mav.setViewName("member/Board/viewDBoardList");

return mav;

}

 

<!-- 게시판 글 검색 -->

<select id="searchList" resultType="DebugBoardDTO" parameterType="hashmap">

SELECT *

FROM debugBoardDB

<where>

<if test="searchTag == 'title_contents'"> <!-- 제목 + 내용 -->

AND (title LIKE '%'||#{searchData}||'%' OR content LIKE '%'||#{searchData}||'%')

</if>

<if test="searchTag == 'title'"> <!-- 제목 -->

AND title LIKE '%'||#{searchData}||'%'

</if>

<if test="searchTag == 'contents'"> <!-- 내용 -->

AND content LIKE '%'||#{searchData}||'%'

</if>

<if test="searchTag == 'nickname'"> <!-- 닉네임 -->

AND nickname = #{searchData}

</if>

</where>

ORDER BY boardNum desc

</select>

 

페이지네이션과 검색창

 

1번 페이지인 경우, 이전 버튼이 출력되지 않음(마지막 페이지와 다음버튼도 동일)

<!-- 페이지 번호 표시 -->

<nav aria-label="페이지 네비게이션">

<ul class="pagination justify-content-center">

<!-- 이전 버튼 -->

<li class="page-item">

<c:if test="${currentPage > 1}">

<c:url var="prevPageURL" value="/viewDBoardList">

<c:param name="currentPage" value="${currentPage - 1}"/>

<c:param name="perPage" value="${perPage}"/>

<c:param name="orderBy" value="${orderBy}"/>

</c:url>

<a class="page-link" href="${prevPageURL}" aria-label="Previous">이전</a>

</c:if>

</li>

<!-- 페이지 번호 -->

<c:choose>

<c:when test="${currentPage <= 5}">

<c:set var="startPage" value="1" />

</c:when>

<c:otherwise>

<c:set var="startPage" value="${currentPage - 5}" />

</c:otherwise>

</c:choose>

<c:forEach begin="${startPage}" end="${startPage + 9}" var="pageNum">

<c:if test="${pageNum > 0 && pageNum <= (totalPosts + perPage - 1) / perPage}">

<li class="page-item">

<c:url var="pageURL" value="/viewDBoardList">

<c:param name="currentPage" value="${pageNum}"/>

<c:param name="perPage" value="${perPage}"/>

<c:param name="orderBy" value="${orderBy}"/>

</c:url>

<a class="page-link" href="${pageURL}">${pageNum}</a>

</li>

</c:if>

</c:forEach>

<!-- 다음 버튼 -->

<li class="page-item">

<c:if test="${currentPage < (totalPosts + perPage - 1) / perPage -1}">

<c:url var="nextPageURL" value="/viewDBoardList">

<c:param name="currentPage" value="${currentPage + 1}"/>

<c:param name="perPage" value="${perPage}"/>

<c:param name="orderBy" value="${orderBy}"/>

</c:url>

<a class="page-link" href="${nextPageURL}" aria-label="Next">다음</a>

</c:if>

</li>

</ul>

</nav>

 

 

 

 

네비게이션바 연결

 

<!-- 익명게시판 -->

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">익명 게시판(정렬🤮🤮🤮)</a>

 

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a class="dropdown-item" href="<c:url value='/viewDBoardList'/>">메인</a></li>

<li><hr class="dropdown-divider"></li>

 

<li><a class="dropdown-item" href="<c:url value='/viewDBoardList?orderBy=viewCount'/>">인기글</a></li>

<li><a class="dropdown-item" href="<c:url value='/viewDBoardList?orderBy=recommendNum'/>">추천글</a></li>

 

<li><hr class="dropdown-divider"></li>

<li><a class="dropdown-item" href="<c:url value='/viewDBoardList?orderBy=정보'/>">정보</a></li>

<li><a class="dropdown-item" href="<c:url value='/viewDBoardList?orderBy=문제'/>">문제</a></li>

<li><a class="dropdown-item" href="<c:url value='/viewDBoardList?orderBy=질문'/>">질문</a></li>

<li><a class="dropdown-item" href="<c:url value='/viewDBoardList?orderBy=정리'/>">정리</a></li>

<li><a class="dropdown-item" href="<c:url value='/viewDBoardList?orderBy=잡담'/>">잡담</a></li>

</ul>

</li>

- onClick 이벤트로 작동하게 만드는 편이 현명할 것 같다.

 

작성글 날짜에 따른 작성날짜/시간 표시 출력

 

 

//글을 게시한 날짜와 오늘 날짜를 비교하는 함수

public String chooseDateForm(String date) throws ParseException {

 

String str = date;

SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

Date edittedDate = format.parse(str); //등록, 수정된 날짜

 

SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy. MM. dd."); //연월일 Format

SimpleDateFormat timeFormat = new SimpleDateFormat("HH시 mm분"); //시분 Format

 

String todayForm = dateFormat.format(new Date()); //현재 시간의 연월일

String edittedDateForm = dateFormat.format(edittedDate); //등록, 수정된 날짜의 연월일

String edittedDateTime = timeFormat.format(edittedDate); //등록, 수정된 날짜의 시분초

 

if(todayForm.equals(edittedDateForm)) { //오늘이 글을 쓴 날짜일 경우

return edittedDateTime; //jsp에 시분초 전송

} else {

return edittedDateForm; //jsp에 연월일 전송

}

}

 

 

글 세부 내용

 

<div id="header">

<jsp:include page="/WEB-INF/views/common/navibarForMember.jsp" flush="true"></jsp:include><br>

</div>

<hr>

 

<input type="hidden" id="userBylike" name="userBylike" value="${userBylike}">

<input type="hidden" id="userBydislike" name="userBydislike" value="${userBydislike}">

<input type="hidden" id="boardNum" name="boardNum" value="${dto.boardNum}">

<input type="hidden" id="userKey" name="userKey" value="${userKey}">

<input type="hidden" id="recommendNum" name="recommendNum" value="${dto.recommendNum}">

<input type="hidden" id="disRecommendNum" name="disRecommendNum" value="${dto.disRecommendNum}">

 

<div class="card">

<div class="card-body">

 

<!-- 글 제목과 카테고리 -->

<h5 class="card-title">[${dto.category}] ${dto.title}</h5>

<div class="row">

 

<!-- 글 작성자 / 작성 날짜(수정 날짜) / 조회수 / 추천수 -->

<div class="col">

<div class="card-subtitle mb-2 text-muted">작성자: ${dto.nickname}</div>

</div>

<div class="col-auto">

<div class="mb-3">

<div class="card-subtitle mb-2 text-muted">

<span>작성 날짜: ${dto.edittedDate}</span> |

<span>조회수: ${dto.viewCount > 9999 ? '9999+' : dto.viewCount}</span> |

<span>추천수: <span id="resultRecommendNum">${Math.min(Math.max(dto.recommendNum - dto.disRecommendNum, -999), 999)}</span></span>

</div>

</div>

</div>

<hr>

</div>

 

<!-- 글 내용 -->

<div class="card-text">${dto.content}</div>

</div>

 

<!-- 추천 / 비추천 -->

<div class="text-center mt-3">

<img src="<c:url value='/resources/images/member/well.svg'/>" width="50" height="50" id="recommendVal" data-val="like">

<img src="<c:url value='/resources/images/member/well.svg'/>" width="50" height="50" id="disrecommendVal" data-val="dislike">

</div>

<br>

</div>

 

 

<!-- 글 수정 / 글 삭제 / 글 목록 -->

<div class="button-container d-flex justify-content-end">

<form action="<c:url value='/checkUpdatePost'/>/${dto.boardNum}" method="post" style="display: inline-block;">

<input type="submit" id="update" value="글 수정" class="button-style">

</form>

<form action="<c:url value='/checkDeletePost'/>/${dto.boardNum}" method="post" style="display: inline-block;">

<input type="submit" id="delete" value="글 삭제" class="button-style">

</form>

<form action="<c:url value='/viewDBoardList'/>" method="get" style="display: inline-block;">

<input type="submit" id="list" value="글 목록" class="button-style">

</form>

</div>

 

//게시판 글 보기

@GetMapping("/viewDBoardContent")

public ModelAndView viewDBoardContent(int boardNum, HttpServletRequest request, HttpServletResponse response) throws ParseException {

 

//쿠키에 user 식별 key 있는지 확인

String userKey = "";

Cookie[] cookies = request.getCookies();

if (cookies != null) {

// System.out.println("userKey 탐색");

for (Cookie cookie : cookies) {

if (cookie.getName().equals("userKey")) {

userKey = cookie.getValue();

break; // 찾았으면 루프 종료

}

}

 

//글로 바로 들어왔을 경우, 사용자 식별을 위한 값을 쿠키에 저장

if(userKey == "") {

userKey = getNum();

Cookie key= new Cookie("userKey", userKey);

key.setMaxAge(60*60*24);

response.addCookie(key);

//System.out.println("====userKey Cookie 생성====");

}

}

//System.out.println("userKey: " + userKey);

 

 

//현재 게시판에 접속한 유저가 추천을 눌렀는지 쿠키에서 출력

String LikeCookieKey = "K"+userKey+"N"+boardNum+"Like";

String userBylike = "";

cookies = request.getCookies();

if (cookies != null) {

// System.out.println("CookieKey 탐색");

for (Cookie cookie : cookies) {

if (cookie.getName().equals(LikeCookieKey)) {

userBylike = cookie.getValue();

break;

}

}

}

//System.out.println("recommendVal: "+ userBylike);

 

 

//현재 게시판에 접속한 유저가 비추천을 눌렀는지 쿠키에서 출력

String disLikeCookieKey = "K"+userKey+"N"+boardNum+"disLike";

String userBydislike = "";

cookies = request.getCookies();

if (cookies != null) {

// System.out.println("CookieKey 탐색");

for (Cookie cookie : cookies) {

if (cookie.getName().equals(disLikeCookieKey)) {

userBydislike = cookie.getValue();

break;

}

}

}

//System.out.println("disRecommendVal: "+ userBydislike);

 

//이전글 | 다음글 가져오기

DebugBoardDTO prev = prevPost(boardNum);

if(prev != null) { //마지막 글은 prev가 null값

prev.setEdittedDate(chooseDateForm(prev.getEdittedDate()));

}

DebugBoardDTO next = nextPost(boardNum);

if(next != null) { //가장 최신 글은 next가 null값

next.setEdittedDate(chooseDateForm(next.getEdittedDate()));

}

 

 

//조회수 증가

serv.updateDBoardViewCount(boardNum);

 

 

//날짜 형식 변경

DebugBoardDTO dto = serv.viewDBoardContent(boardNum);

dto.setEdittedDate(chooseDateForm(dto.getEdittedDate()));

 

 

ModelAndView mav = new ModelAndView();

mav.addObject("userBylike", userBylike);

mav.addObject("userBydislike", userBydislike);

mav.addObject("userKey", userKey);

mav.addObject("dto", dto);

mav.addObject("prev", prev);

mav.addObject("next", next);

mav.setViewName("member/Board/viewDBoardContent");

return mav;

}

 

<!-- 게시판 글 출력 -->

<select id="viewDBoardContent" resultType="DebugBoardDTO" parameterType="int">

SELECT

boardNum, nickname, password, title, category, content, edittedDate, viewCount, recommendNum, disRecommendNum

FROM

debugBoardDB

WHERE

boardNum = #{boardNum}

</select>

 

<!-- 게시판글 조회수 수정 -->

<update id="updateDBoardViewCount" parameterType="Integer">

UPDATE debugBoardDB

SET viewCount = viewCount + 1

WHERE boardNum = #{boardNum}

</update>

 

 

이전글과 다음글

 

첫 글의 경우, 다음글은 출력되지 않음(마지막 글과 이전글도 동일)

 

 

 

<!-- 이전 글과 다음 글(없을 경우, 출력되지 않음) -->

<table width="100%">

<colgroup>

<col width="9%">

<col width="5%">

<col width="5%">

<col width="30%">

<col width="10%">

<col width="10%">

<col width="5%">

<col width="5%">

</colgroup>

<div class="prev-next">

<c:if test="${prev != null}">

<tr>

<td>이전 글:</td>

<td><span class="badge bg-info">${prev.boardNum}</span></td>

<td><span class="badge bg-secondary">${prev.category}</span></td>

<td><span class="text-start"><span id="titleText" class="link-primary" onclick="submitForm(${prev.boardNum})">${prev.title}</span></span></td>

<td><span class="nameText">${prev.nickname}</span></td>

<td><span class="timeText">${prev.edittedDate}</span></td>

<td><span class="badge bg-warning text-dark">${prev.viewCount > 9999 ? '9999+' : prev.viewCount}</span></td>

<td><span class="badge bg-success">${Math.min(Math.max(prev.recommendNum - prev.disRecommendNum, -999), 999)}</span></td>

 

</tr>

</c:if>

<c:if test="${next != null}">

<tr>

<td>다음 글:</td>

<td><span class="badge bg-info">${next.boardNum}</span></td>

<td><span class="badge bg-secondary">${next.category}</span></td>

<td><span class="text-start"><span id="titleText" class="link-primary" onclick="submitForm(${next.boardNum})">${next.title}</span></span></td>

<td><span class="nameText">${next.nickname}</span></td>

<td><span class="timeText">${next.edittedDate}</span></td>

<td><span class="badge bg-warning text-dark">${next.viewCount > 9999 ? '9999+' : next.viewCount}</span></td>

<td><span class="badge bg-success">${Math.min(Math.max(next.recommendNum - next.disRecommendNum, -999), 999)}</span></td>

</tr>

</c:if>

</div>

</table>

 

//현재 글의 이전 글 보기

public DebugBoardDTO prevPost(int boardNum) throws ParseException {

DebugBoardDTO prevPost = serv.prevPost(boardNum);

return prevPost;

}

 

 

//현재 글의 다음 글 보기

public DebugBoardDTO nextPost(int boardNum) throws ParseException {

DebugBoardDTO nextPost = serv.nextPost(boardNum);

return nextPost;

}

 

<!-- 현재 글의 이전 글 목록 -->

<select id="prevPost" parameterType="int" resultType="DebugBoardDTO">

select boardNum, nickname, title, category, edittedDate, viewCount, recommendNum, disRecommendNum

from debugboarddb

where boardNum =(

select max(boardnum)

from debugboarddb

where #{boardnum} > boardNum

)

</select>

 

<!-- 현재 글의 다음 글 목록 -->

<select id="nextPost" parameterType="int" resultType="DebugBoardDTO">

select boardNum, nickname, title, category, edittedDate, viewCount, recommendNum, disRecommendNum

from debugboarddb

where boardNum =(

select min(boardnum)

from debugboarddb

where boardnum > #{boardnum}

)

</select>

 

추천 / 비추천 기능

 

추천 / 비추천 중복 시 경고 출력

 

<!-- 추천 / 비추천 -->

<div class="text-center mt-3">

<img src="<c:url value='/resources/images/member/well.svg'/>" width="50" height="50" id="recommendVal" data-val="like">

<img src="<c:url value='/resources/images/member/well.svg'/>" width="50" height="50" id="disrecommendVal" data-val="dislike">

</div>

 

//익명 유저가 추천/비추천을 했을 경우, 그 상태 유지

$(function(){

 

if($("#userBylike").val() == "like"){

$("#recommendVal").attr("data-val", "likeChecked");

$("#recommendVal").attr("src", "<c:url value='/resources/images/member/like.svg'/>");

}

if($("#userBydislike").val() == "dislike"){

$("#disrecommendVal").attr("data-val", "dislikeChecked");

$("#disrecommendVal").attr("src", "<c:url value='/resources/images/member/dislike.svg'/>");

}

})

 

//추천을 위한 이미지 클릭 시 추천 숫자 변경 및 이미지 변경을 위한 ajax

$("#recommendVal").on("click", function(){

var userKey = $("#userKey").val();

var boardNum = $("#boardNum").val();

var recommendVal = $(this).attr("data-val");

 

if (recommendVal === "like") {

$.ajax({

type: "POST",

url: "<c:url value='/increaseDBoardRecommendNum'/>",

data: {

userKey: userKey,

boardNum: boardNum,

recommendVal: recommendVal

},

success: function(response) {

console.log(response)

$("#recommendNum").val(response)

$("#resultRecommendNum").text($("#recommendNum").val()-$("#disRecommendNum").val())

$("#recommendVal").attr("data-val", "likeChecked");

$("#recommendVal").attr("src", "<c:url value='/resources/images/member/like.svg'/>");

},

error: function(error) {

console.error("추천 기능 에러:", error);

}

})

} else (

alert("좋아요는 1일 1회만 가능합니다.")

)

})

 

 

//비추천을 위한 이미지 클릭 시 추천 숫자 변경 및 이미지 변경을 위한 ajax

$("#disrecommendVal").on("click", function(){

var userKey = $("#userKey").val();

var boardNum = $("#boardNum").val();

var disrecommendVal = $(this).attr("data-val");

 

if (disrecommendVal === "dislike") {

$.ajax({

type: "POST",

url: "<c:url value='/decreaseDBoardRecommendNum'/>",

data: {

userKey: userKey,

boardNum: boardNum,

disrecommendVal: disrecommendVal

},

success: function(response) {

$("#disRecommendNum").val(response)

$("#resultRecommendNum").text($("#recommendNum").val()-$("#disRecommendNum").val())

$("#disrecommendVal").attr("data-val", "dislikeChecked");

$("#disrecommendVal").attr("src", "<c:url value='/resources/images/member/dislike.svg'/>");

},

error: function(error) {

console.error("비추천 기능 에러:", error);

}

})

} else (

alert("싫어요는 1일 1회만 가능합니다.")

)

})

 

//익명 유저가 게시판에 추천을 했는지 여부를 쿠키로 저장

@PostMapping("/increaseDBoardRecommendNum")

public int increaseDBoardRecommendNum(String userKey, int boardNum, String recommendVal, HttpServletRequest request, HttpServletResponse response) {

 

DebugBoardDTO dto = dServ.viewDBoardContent(boardNum);

int recommendNum = dto.getRecommendNum();

 

//페이지에서 불러온 현재 접속한 유저Key | 페이지 번호 | 좋아요 상태

//System.out.println("userKey: " + userKey);

//System.out.println("boardNum: "+ boardNum);

//System.out.println("recommendVal: "+recommendVal);

 

String LikeCookieKey = "K"+userKey+"N"+boardNum+"Like";

//System.out.println(LikeCookieKey);

 

if(recommendVal.equals("like")) {

dServ.increaseDBoardRecommendNum(boardNum);

dto = dServ.viewDBoardContent(boardNum);

recommendNum = dto.getRecommendNum();

 

Cookie key= new Cookie(LikeCookieKey, recommendVal);

key.setMaxAge(60*60*24);

response.addCookie(key);

//System.out.println("userKey에 따른 페이지 좋아요 Cookie 생성");

}

 

return recommendNum;

}

 

//익명 유저가 게시판에 비추천을 했는지 여부를 쿠키로 저장

@PostMapping("/decreaseDBoardRecommendNum")

public int decreaseDBoardRecommendNum(String userKey, int boardNum, String disrecommendVal, HttpServletRequest request, HttpServletResponse response) {

 

DebugBoardDTO dto = dServ.viewDBoardContent(boardNum);

int disRecommendNum = dto.getDisRecommendNum();

 

//페이지에서 불러온 현재 접속한 유저Key | 페이지 번호 | 좋아요 상태

//System.out.println("userKey: " + userKey);

//System.out.println("boardNum: "+ boardNum);

//System.out.println("disrecommendVal: "+disrecommendVal);

 

String disLikeCookieKey = "K"+userKey+"N"+boardNum+"disLike";

//System.out.println(disLikeCookieKey);

 

if(disrecommendVal.equals("dislike")) {

dServ.decreaseDBoardRecommendNum(boardNum);

dto = dServ.viewDBoardContent(boardNum);

disRecommendNum = dto.getDisRecommendNum();

 

Cookie key= new Cookie(disLikeCookieKey, disrecommendVal);

key.setMaxAge(60*60*24);

response.addCookie(key);

// System.out.println("userKey에 따른 페이지 싫어요 Cookie 생성");

}

 

return disRecommendNum;

}

<!-- 게시판글 추천수 증가 -->

<update id="increaseDBoardRecommendNum" parameterType="Integer">

UPDATE debugBoardDB

SET

recommendNum = recommendNum+1

WHERE boardNum = #{boardNum}

</update>

 

<!-- 게시판글 비추천수 증가 -->

<update id="decreaseDBoardRecommendNum" parameterType="Integer">

UPDATE debugBoardDB

SET

disRecommendNum = disRecommendNum+1

WHERE boardNum = #{boardNum}

</update>

 

 

새 글 쓰기

 

//게시판 글 쓰기 화면으로 이동

@PostMapping("/newPost")

public ModelAndView newPost() {

ModelAndView mav = new ModelAndView();

mav.setViewName("member/Board/newPost");

return mav;

}

 

 

<script type="text/javascript">

 

$(function(){

//카테고리 변경 시 db에 저장할 카테고리 name의 value에 반영

$("#categorySelect").on("change", function(){

$("#category").val($("#categorySelect").val());

})

 

//제출 시 입력된 정보를 컨트롤러로 전송

$("form").on("submit", function(){

$("#content").val( $("#txtContent").val());

})

})

 

</script>

 

</head>

<body>

 

<!-- 헤더 네비게이션바 -->

<div id="header">

<jsp:include page="/WEB-INF/views/common/navibarForMember.jsp" flush="true"></jsp:include><br>

</div>

 

<form id="board" action="insertPost" method="POST">

 

<input type="hidden" id="category" name="category" value="정보">

<input type="hidden" id="content" name="content">

 

 

<div class="mb-3">

<label for="title" class="form-label">제목:</label>

<input type="text" id="title" name="title" class="form-control" required="required" maxlength="35">

</div>

<div class="row">

<div class="col-md-6 mb-3">

<label for="nickname" class="form-label">닉네임:</label>

<input type="text" id="nickname" name="nickname" class="form-control" required="required"

pattern="^[가-힣]{1,6}$|^[a-zA-Z0-9]{1,12}$"

title="한글 6글자 또는 영어+숫자 12글자 이내로 입력해주세요.">

</div>

 

<div class="col-md-6 mb-3">

<label for="password" class="form-label">비밀번호:</label>

<input type="password" id="password" name="password" class="form-control" maxlength="10" required="required">

</div>

</div>

<div class="mb-3">

<label for="txtContent" class="form-label">내용:</label>

<textarea id="txtContent" name="txtContent" class="form-control">내용을 입력해주세요</textarea>

</div>

 

<div class="row">

<div class="col-md-6 mb-3">

<label for="categorySelect" class="form-label">카테고리:</label>

<jsp:include page="/WEB-INF/views/common/categoryForDBoard.jsp" flush="true"></jsp:include>

</div>

<div class="col-md-6 mb-3">

<div class="text-end">

<input type="submit" value="제출">

</div>

</div>

</div>

 

 

</form>

 

 

<script src="${pageContext.request.contextPath}/resources/js/member/ckeditor.js"></script>

 

//게시판 글 등록(PRG 패턴을 통해 중복 등록 방지)

@PostMapping("/insertPost")

public ModelAndView insertPost(DebugBoardDTO dto) {

//추천|비추천 입력

dto.setRecommendNum(0);

dto.setDisRecommendNum(0);

dto.setViewCount(0);

 

 

//날짜 형식 변경

Date nowDate = new Date();

SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

String now = format.format(nowDate);

dto.setPostDate(now);

 

 

serv.insertPost(dto);

List<DebugBoardDTO> list = serv.viewDBoardList("boardNum");

ModelAndView mav = new ModelAndView();

mav.addObject("list", list);

mav.setViewName("redirect:/viewDBoardList");

return mav;

}

 

<!-- 게시판글 입력-->

<insert id="insertPost" parameterType="DebugBoardDTO">

INSERT INTO debugBoardDB (

boardNum, nickname, password, title, category, content,

postDate, edittedDate)

VALUES (

DEBUGBOARD_SEQ.nextval, #{nickname}, #{password}, #{title}, #{category}, #{content},

#{postDate}, #{postDate})

</insert>

 

 

글 수정하기의 비밀번호 확인창

 

//게시판 글 수정하기 전 비밀번호 확인

@PostMapping("/checkUpdatePost/{bNum}")

public ModelAndView checkUpdatePost(@PathVariable("bNum") int boardNum) {

DebugBoardDTO dto = serv.viewDBoardContent(boardNum);

ModelAndView mav = new ModelAndView("member/Board/checkUpdatePost");

mav.addObject("dto", dto);

return mav;

}

 

비밀번호를 틀렸을 경우

//글 수정 / 글 삭제 시 비밀번호 확인

@PostMapping("/checkPostPW")

public String checkPostPW(int boardNum, String password) {

DebugBoardDTO dto = dServ.viewDBoardContent(boardNum);

if(dto.getPassword().equals(password)) {

return "yes";

} else {

return "no";

}

}

글 수정하기 창

//게시판 글 수정화면으로 이동

@PostMapping("/checkUpdatePost/modifyPost")

public ModelAndView modifyPost(int boardNum) {

DebugBoardDTO dto = serv.viewDBoardContent(boardNum);

ModelAndView mav = new ModelAndView();

mav.addObject("dto", dto);

mav.setViewName("member/Board/modifyPost");

return mav;

}

 

<script>

 

$(function(){

 

//카테고리 select DB 반영

$("#categorySelect").val($("#category").val());

 

//카테고리 변경 시 db에 저장할 카테고리 name의 value에 반영

$("#categorySelect").on("change", function(){

$("#category").val($("#categorySelect").val());

})

 

//제출 시 입력된 정보를 컨트롤러로 전송

$("form").on("submit", function(){

$("#content").val( $("#txtContent").val());

})

})

 

</script>

 

</head>

<body>

 

<!-- 헤더 네비게이션바 -->

<div id="header">

<jsp:include page="/WEB-INF/views/common/navibarForMember.jsp" flush="true"></jsp:include><br>

</div>

 

<form id="board" action="<c:url value='/checkUpdatePost/updateDBoard'/>" method="post">

<input type="hidden" id="boardNum" name="boardNum" value="${dto.boardNum}">

<input type="hidden" id="category" name="category" value="${dto.category}">

<input type="hidden" id="content" name="content" value="">

<div class="mb-3">

<label for="title" class="form-label">제목:</label>

<input type="text" name="title" value="${dto.title}" class="form-control" required="required" maxlength="10" maxlength="35">

</div>

<div class="row">

<div class="col-md-6 mb-3">

<label for="nickname" class="form-label">닉네임:</label>

<input type="text" name="nickname" value="${dto.nickname}" class="form-control" required="required"

pattern="^[가-힣]{1,6}$|^[a-zA-Z0-9]{1,12}$"

title="한글 6글자 또는 영어+숫자 12글자 이내로 입력해주세요.">

</div>

<div class="col-md-6 mb-3">

<label for="password" class="form-label">비밀번호:</label>

<input type="password" name="password" value="${dto.password}" class="form-control" required="required">

</div>

</div>

<div class="mb-3">

<label for="txtContent" class="form-label">내용:</label>

<textarea id="txtContent" name="txtContent" class="form-control">${dto.content}</textarea>

</div>

 

<div class="row">

<div class="col-md-6 mb-3">

<label for="categorySelect" class="form-label">카테고리:</label>

<jsp:include page="/WEB-INF/views/common/categoryForDBoard.jsp" flush="true"></jsp:include>

</div>

<div class="col-md-6 mb-3">

<div class="text-end">

<input type="submit" value="제출">

</div>

</div>

</div>

</form>

 

<script src="${pageContext.request.contextPath}/resources/js/member/ckeditor.js"></script>

 

//게시판 글 수정하기

@PostMapping("/checkUpdatePost/updateDBoard")

public String updateDBoard(DebugBoardDTO dto) {

 

// 현재 날짜와 시간을 dto에 입력

Date nowDate = new Date();

SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

String now = format.format(nowDate);

dto.setEdittedDate(now);

 

serv.updateDBoard(dto);

return "redirect:/viewDBoardContent/?boardNum="+dto.getBoardNum();

}

 

 

글 삭제하기에서 잘못된 비밀번호를 입력했을 경우

//게시판 글 삭제 전 비밀번호 확인

@PostMapping("/checkDeletePost/{bNum}")

public ModelAndView checkDeletePost(@PathVariable("bNum") int boardNum) {

DebugBoardDTO dto = serv.viewDBoardContent(boardNum);

ModelAndView mav = new ModelAndView("member/Board/checkDeletePost");

mav.addObject("dto", dto);

return mav;

}

글 삭제하기에서 재확인창

//게시판 글 삭제하기

@PostMapping("/deletePost")

public String deletePost(String nickname, int boardNum) {

serv.deleteDBoard(boardNum);

return "redirect:/viewDBoardList/";

}