Bigfat

[Web] 글 확인 화면 만들기 (게시판 구현) 본문

Java/web

[Web] 글 확인 화면 만들기 (게시판 구현)

kyou 2017. 4. 10. 18:05

브라우저로 게시된 글을 확인하는 화면을 출력해보자

  게시판 리스트 화면에서 글을 선택하여 확인하는 화면을 만들어보자. 아래와 같은 구조로 진행될 것이다.


  첫 번째로 bbs.properties 파일에서 /content.bbs 요청에 ContentImpl클래스가 실행되도록 매핑한다.

#bbs.properties
/writeForm.bbs=com.edu.bbs.WriteFormImpl
/write.bbs=com.edu.bbs.WriteImpl
/list.bbs=com.edu.bbs.ListImpl
/content.bbs=com.edu.bbs.ContentImpl


  list.jsp에서 <table>태그 내에 '변경 부분' 주석 아래의 코드를 삽입한다. 게시글 타이틀(title)에 링크를 걸고, 쿼리스트링으로 선택한 게시글의 글 번호(articleNumber)와 현재 위치해 있는 페이지 번호(pageNum)을 데이터로 던져준다. 이렇게 쿼리스트링에 주어진 데이터 articleNumber와 pageNum은 JSP 내장 객체인 request에 자동으로 심어지는 듯하다(파라미터 변수인 name에).

<c:forEach var="article" items="${articleList}" varStatus="status">
	<tr align="center" height="30">
		<!-- EL(Expression Language) -->
		<!-- <td>\&{item.articleNumber}</td> -->
		<!-- <td>&#36;{item.articleNumber}</td> -->
		<td>${article.articleNumber}</td>
		<%-- <td><c:out value="${article.articleNumber}"></c:out></td> --%>
		<%-- <td align="left">${article.title}</td> --%>
		<td align="left">
			<c:if test="${article.depth > 0}">
				<img src="" width="${10 * article.depth}" height="16">
				<img src="">
			</c:if>
			<!-- 변경 부분 -->
			<a href="/bbs/content.bbs?articleNumber=${article.articleNumber}&pageNum=${pageNum}">${article.title}</a>
			<c:if test="${article.hit >= 20}">
				<img src="" border="0" height="16">
			</c:if>
		</td>
		<td>${article.id}</td>
		<td>${article.writeDate}</td>
		<td>${article.hit}</td>
	<tr>
</c:forEach>


  ContentImpl클래스를 생성하고 아래와 같이 작성한다. ContentImpl클래스는 request객체에 심어진 articleNumber에 해당되는 게시글을 DB에서 가져오며, 해당 게시글의 조회수를 1 증가 시킨다.

package com.edu.bbs;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ContentImpl implements BBSService {

	@Override
	public String bbsService(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String articleNumber = req.getParameter("articleNumber");
		BBSDto article = null;
		
		try {
			article = BBSOracleDao.getInstance().selectArticle(articleNumber);
			BBSOracleDao.getInstance().upHit(articleNumber);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		req.setAttribute("article", article);
		req.setAttribute("pageNum", req.getParameter("pageNum"));
		
		return "/content.jsp";
	}

}


  content.jsp를 생성한 후 아래와 같은 코드를 작성한다. 파일 다운로드나 로그인 유무에 따라 변하는 버튼 기능들은 나중에 사용하기 위해 주석 처리해뒀다. <table>태그 가장 마지막 주석 코드들은 모델 1 구조로 요청을 처리하는 방법이며, 모델 1 구조를 확인하기 위해 지우지 않았다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>BBS Content</title>
	<style>
	</style>
</head>
<body>
	<form action="/bbs/replyForm.bbs" method="post"> 
		<div align="center">
		    <input type="hidden" name="pageNum" value="${pageNum}">
		    <input type="hidden" name="depth" value="${article.depth}">
		    <input type="hidden" name="pos" value="${article.pos}">
		    <input type="hidden" name="groupId" value="${article.groupId}">
		    
			<table border="2" width="500">
				<tr>
					<th>글쓴이</th>
					<td>${article.id}</td>
					<th>조회수</th>
					<td>${article.hit}</td>
				</tr>
				<tr>
					<th>제목</th>
					<td>${article.title}</td>
					<th>날짜</th>
					<td>${article.writeDate}</td>
				</tr>
				<tr>
					<th colspan="2">다운로드</th>
					<td colspan="2">
						<!-- 파일 다운로드 기능 -->
						<a href="">${article.fileName}</a>
						<%-- <a href="/bbs/download.bbs?fileName=${article.fileName}">${article.fileName}</a> --%>
					</td>
				</tr>
				<tr height="200" valign="top">
					<td colspan="4">${article.content}</td>
				</tr>
				<tr>
					<th>첨부</th>
					<td colspan="3">
						<c:if test="${article.fileName == null}">없음</c:if>
						<c:if test="${article.fileName != null}">${article.fileName}</c:if>
					</td>
				</tr>
				<tr>
					<td colspan="4" align="right">
						<!-- 로그인 검증 -->
						<%-- <c:if test="${id != null}">
							<input type="submit" value="답글달기">
							<c:if test="${id == article.id}">
								<input type="button" value="수정하기" onclick="document.location.href='/bbs/updateForm.bbs?articleNum=${article.articleNumber}&pageNum=${pageNum}'">
								<input type="button" value="삭제하기" onclick="document.location.href='/bbs/delete.bbs?articleNum=${article.articleNumber}&pageNum=${pageNum}'">
							</c:if>
							<c:if test="${id != article.id}">
								<input type="button" value="수정하기" disabled="disabled">
								<input type="button" value="삭제하기" disabled="disabled">
							</c:if>
						</c:if>
						<c:if test="${id == null}">
							<input type="submit" value="답글달기" disabled="disabled">
							<input type="button" value="수정하기" disabled="disabled">
							<input type="button" value="삭제하기" disabled="disabled">
						</c:if> --%>
						<input type="button" value="목록으로" onclick="document.location.href='/bbs/list.bbs?pageNum=${pageNum}'">
					</td>
				</tr>
				
				<!-- Model 1 방식, 스트립트릿과 식을 이용한 방법 -->
				<!-- 상단부에 BBSDto import 필요 -->
				<%-- <%BBSDto article = (BBSDto)request.getAttribute("article"); %>
				<tr>
					<td>글쓴이 : </td>
					<td><%=article.getId() %></td>
				</tr>
				<tr>
					<td>제목 : </td>
					<td>
						<%=article.getTitle() %>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<%=article.getContent() %>
					</td>
				</tr>
				<tr>
					<td>첨부 : </td>
					<td>
						<%if(article.getFileName() != null && !article.getFileName().equals("")) { %>
							<%=article.getFileName() %>
						<%} else { %>
							<span>없음</span>
						<%} %>
					</td>
				</tr> --%>
			</table>
		</div>
	</form>

	<script>
	</script>
</body>
</html>


  이미 만들어져있는 BBSOracleDao클래스에 게시글의 조회수를 증가시키는 메서드를 작성한다.

/**
 * BBSOracleDao.java에 추가한다.
 * @param articleNumber
 * @return int
 */
public synchronized int upHit(String articleNumber) throws ClassNotFoundException, SQLException {
	conn = orclDbc.getConnection();
	pstmt = conn.prepareStatement("UPDATE bbs SET hit = hit + 1 WHERE article_number = ?");
	pstmt.setString(1, articleNumber);
	int result = pstmt.executeUpdate();
	
	disconnect();
	
	return result;
}


  이제 톰캣을 실행한 뒤 http://localhost/bbs/list.bbs?pageNum=1로 접속하여 게시글 제목 링크를 클릭해보자. list.jsp에서 ${article.hit}가 20 이상될 때 게시글의 제목 옆에 'hit!'를 출력하게 해놓았다.


  288번 글을 선택했을 때 해당되는 게시글을 조회하여 화면에 출력해주고, 조회수를 증가시켜준 것을 확인할 수 있다. ContentImpl클래스에서 pageNum 데이터를 다시 content.jsp로 던져주기 때문에, '목록으로' 버튼을 누르면 이 글을 확인한 페이지 번호로 돌아갈 수 있다.


  원래는 기능 구현을 끝마치고 부트스트랩(Bootstrap)을 이용해 디자인을 고치려했었다. 그런데 이게 미리 구현해놓은 것을 포스팅하는 것이라 CSS(Cascading Style Sheets) 공부와 겹치는 바람에 다음 글에선 list.jsp에 부트스트랩을 적용하고자 한다.



[[JSP] request 내장 객체 참고]


저작자표시 비영리 동일조건

'Java > web' 카테고리의 다른 글

[Web] 로그인, 로그아웃 구현하기 (게시판 구현)  (0) 2017.04.11
[Web] 부트스트랩 적용하기 (게시판 구현)  (0) 2017.04.10
[Web] 에러 페이지 처리하기 (게시판 구현)  (0) 2017.04.10
[Web] 페이징 처리하기 (게시판 구현)  (2) 2017.04.07
[Web] 리스트 화면 만들기 (게시판 구현)  (0) 2017.04.06
'Java/web' Related Articles more