Bigfat

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

Java/web

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

kyou 2017. 4. 11. 18:12

게시된 글을 수정하는 화면을 만들어 보자

  이전과 동일하게 bbs.properties파일에 수정(update) 관련 정보를 추가한다.

#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
/login.bbs=com.edu.bbs.LoginImpl
/logout.bbs=com.edu.bbs.LogoutImpl
/updateForm.bbs=com.edu.bbs.UpdateFormImpl
/update.bbs=com.edu.bbs.UpdateImpl


  UpdateFormImpl클래스를 생성하고 아래와 같이 작성한다. 선택된 글의 데이터를 조회한 후 DTO를 HttpServletRequest 객체에 심어준다.

package com.edu.bbs;

import java.io.IOException;

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

public class UpdateFormImpl implements BBSService {

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

		req.setAttribute("pageNum", pageNum);
		req.setAttribute("article", article);
		
		return "/updateForm.jsp";
	}

}

  updateForm.jsp를 생성하고 아래와 같이 작성한다. 조회한 데이터를 출력해준다. '취소'버튼을 누르면 해당 게시글로 다시 돌아간다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>BBS Update</title>
	<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<style>
		#contentForm {
			width: 40%;
			margin: 0 auto;
			padding-top: 12%;
		}

		.table > thead > tr > th, .table > tbody > tr > th {
			background-color: #e6ecff;
			text-align: center;
		}
	</style>
</head>
<body>
	<form action="/bbs/update.bbs" method="post">
		<div id="contentForm">
		    <input type="hidden" name="pageNum" value="${pageNum}">
		    <input type="hidden" name="articleNumber" value="${article.articleNumber}">
		    
		    <div class="input-group input-group-sm" role="group" aria-label="...">
				<table class="table table-striped table-bordered">
					<thead>
						<tr>
							<th width="30%">글쓴이</th>
							<td width="70%">${id}</td>
						</tr>
						<tr>
							<th style="padding-top: 15px">제목</th>
							<td><input type="text" name="title" value="${article.title}"
										class="form-control" aria-describedby="basic-addon1"></td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td colspan="2">
								<textarea class="form-control" rows="20" name="content" >${article.content}</textarea>
							</td>
						</tr>
						<tr>
							<th style="padding-top: 15px">첨부파일</th>
							<td><input type="file" class="btn btn-default" name="fileName"></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="btn-group btn-group-sm" role="group" aria-label="...">
				<input type="submit" class="btn btn-default" value="수정하기">
				<input type="button" class="btn btn-default" value="취소" onclick="document.location.href='/bbs/content.bbs?articleNumber=${articleNumber}&pageNum=${pageNum}'">
			</div>
		</div>
	</form>

	<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
	<script>
		jQuery(document).ready(function() {
			if(${id== null}) {
				alert("게시판을 이용하시려면 로그인하셔야 합니다.");
				location.href="/bbs/login.bbs"
			}
		});
	</script>
</body>
</html>


  updateForm.jsp에서 '수정하기'버튼을 클릭하면 UpdateImpl클래스가 처리한다.

package com.edu.bbs;

import java.io.IOException;

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

public class UpdateImpl implements BBSService {

	@Override
	public String bbsService(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		
		BBSDto article = new BBSDto();
		int result = 0;
		
		article.setArticleNumber(Integer.parseInt(req.getParameter("articleNumber")));
		article.setTitle(req.getParameter("title"));
		article.setContent(req.getParameter("content"));
		article.setFileName(req.getParameter("fileName"));
		
		try {
			result = BBSOracleDao.getInstance().updateArticle(article);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		resp.sendRedirect("/bbs/list.bbs?pageNum="+req.getParameter("pageNum"));
		
		return null;
	}

}

  해당 게시글을 갱신(update)하는 쿼리를 updateArticle메서드로 던져준다.

/**
 * BBSOracleDao클래스에 추가한다.
 * @param article
 * @return
 */
public synchronized int updateArticle(BBSDto article) throws ClassNotFoundException, SQLException {
	conn = orclDbc.getConnection();
	pstmt = conn.prepareStatement("UPDATE bbs SET title=?, content=? WHERE article_number=?");
	pstmt.setString(1, article.getTitle());
	pstmt.setString(2, article.getContent());
	pstmt.setInt(3, article.getArticleNumber());
	int result = pstmt.executeUpdate();
	
	disconnect();
	
	return result;
}


  아래는 기존에 있는 글을 수정하고 확인하는 화면이다. content.jsp를 보면 알다시피 게시글을 작성한 id와 비교하여 버튼을 활성화, 비활성화시키기 때문에 작성자와 동일한 id로도 확인해보고, 다른 아이디를 만들어서도 확인해보도록 하자.