READ
게시글을 생성하고 제목을 클릭하면 해당하는 게시글의 내용과 작성자 등 상세보기 기능을 구현해보자.
구현하기에 앞서 제목을 클릭했을 때 상세보기를 하기 위해서는 해당 게시글의 Primary Key 정보를 가져와서 그에 해당하는 폼을 연결해주는 방식이다.
boardList.jsp에서의 코드이다.
<c:forEach items="${list}" var="vo" varStatus="i">
<tr>
<td>${i.count}</td>
<td><a href="boardContent.do/${vo.idx }">${vo.title}</a></td>
<td>${vo.writer}</td>
<td>${fn:split(vo.indate," ")[0] }</td>
<td>${vo.count}</td>
</tr>
</c:forEach>a태그의 href속성은 "boardContent.do/${vo.idx }" 의 url로 넘겨주고 있다. 따라서 Controller에서 idx의 정보를 받아야 한다.
BoardController
BoardController에서는 각 게시글의 idx정보를 받기 때문에 idx값을 통해 식별할 수 있다.
조회수
조회수를 증가시켜주는 boardCount함수 생성
boardMapper 인터페이스에 boardCount 함수 추가
boardMapper.xml파일에 조회수를 추가시켜주는 sql문 작성
게시글 상세보기
유저가 입력한 title, content, writer와 조회수들을 JSP파일에 보내주기 위해서 결국에는 Spring에서 제공하는 Model을 사용해야하기 때문에 위와 같이 작성한다.
BoardMapper 인터페이스 파일에 BoardContent 함수 추가
BoardMapper.xml파일에 쿼리문 작성
JSP
boardContent.jsp파일 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<% pageContext.setAttribute("newLineChar", "\n"); %> <!-- 줄바꿈 !! -->
<div class="container">
<h2>project01</h2>
<div class="panel panel-default">
<div class="panel-heading">Board</div>
<div class="panel-body">
<table class = "table">
<tr>
<td>제목</td>
<td>${vo.title }</td>
</tr>
<tr>
<td>내용</td>
<td>
${fn:replace(vo.content, newLineChar, "<br/>") }
</td>
</tr>
<tr>
<td>작성자</td>
<td>${vo.writer }</td>
</tr>
<tr>
<td>작성일</td>
<td>
${fn:split(vo.indate," ")[0] }<!-- 날짜만 출력되게끔 짤라냄 -->
</td>
</tr>
<tr>
<td colspan ="2" align="center">
<a href = "../boardUpdateForm.do/${vo.idx}" class="btn btn-success btn-sm">수정화면</a>
<a href = "../boardDelete.do/${vo.idx }" class="btn btn-warning btn-sm">삭제</a>
<a href ="../boardList.do" class="btn btn-info btn-sm">목록</a>
</td>
</tr>
</table>
</div>
<div class="panel-footer">Board</div>
</div>
</div>
</body>
</html>
게시글 상세보기까지 완료되었다.
hello!