JSP 소규모 게시판 - 17. 글 수정

2023. 9. 13. 16:46

위로 아래

글 수정 매커니즘

글 수정도 글 보기 페이지처럼 데이터베이스에서 데이터를 불러와야 하고,

불러온 데이터를 수정해 다시 데이터베이스에 데이터를 수정해야 한다.

두 차례 데이터베이스에 접근해야 하니, model 역할을 하는 action 폴더의 jsp 파일도 두 개가 된다.

데이터베이스에서 데이터 불러오기

글 수정에 데이터를 불러오는 방법은

글 보기에 데이터를 불러오는 방법과 같다.

글 보기 페이지를 위해 만들었던 DAO의 getArticle() 메소드를 사용한다.

BoardUpdateAction.jsp는 다음과 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="bean.BoardDAO" %>
<%@ page import="bean.BoardDTO" %>

<%
	//이전 페이지에서 전달한 bno 받기
	int bno = Integer.parseInt(request.getParameter("bno"));
	
	//데이터 접근 객체 가져오기 
	BoardDAO dao = BoardDAO.getInstance();
	
	//게시글 갖고 오라는 메소드 호출
	BoardDTO article = dao.getArticle(bno);
	
	//현재 페이지에서 받은 게시글 저장
	request.setAttribute("article", article);
	
 	RequestDispatcher dp = request.getRequestDispatcher("../view/BoardUpdateView.jsp");
	dp.forward(request, response);
%>

글 수정 페이지

글 수정 페이지에도 validate() 함수를 적용해준다.

BoardWriteForm.jsp 파일을 복사해 BoardUpdateView.jsp 만든다.

스크립트 부분은 게시글 작성 폼의 자바스크립트를 그대로 사용한다.

<script src="jquery/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$().ready(function(){
	$("#submit11").on("click",function(){
		if(validate()){
			$("form").submit();
		}
	});
});

function validate(){
	let flen = $("form[name=form1] .chk").length;
	for(var i=0; i<flen; i++){
		if($('.chk').eq(i).val()=="" ||
			$('.chk').eq(i).val()==null||
			$('.chk').eq(i).val().trim()==""){
				alert($('.chk').eq(i).attr('title')+ '은/는 필수 입력');
				$('.chk').eq(i).focus();
				return false;
			}  
	}
	return true;
}
</script>

HTML부분은 input 태그 안에 value에 article 속성 값을 이용해 불러온 게시글의 데이터를 출력한다.

BoardContent.jsp와는 다르게 readonly를 넣지 않아서 수정할 수 있게 한다.

<body>
<form name="form1" action="jb?command=updateProc" method="post">
<table>
	<tr><td colspan="2"><h3>게시글 수정</h3></td></tr>
	<tr>
		<th>제목</th>
		<td>
			<input type="text" name="subject" title="제목" value="${article.subject}">
		</td>
	</tr>
	<tr>
		<th>작성자</th>
		<td><input type="text" name="writer" class="chk" title="작성자" value="${article.writer}"></td>
	</tr>
	<tr>
		<th>글 내용</th>
		<td><textarea name="content" class="chk"title="글내용">${article.content}</textarea></td>
	</tr>
	<tr>
		<th>비밀번호</th>
		<td><input type="password" name="passwd" class="chk" title="비밀번호" value="${article.passwd}"></td>
	</tr>
	<tr>
		<td colspan="2">
			<input class="btn" type="button" value="글 수정" id="submit11">
			<input class="btn" type="button" value="글 목록" onclick="location.href='jb?command=list'">
		</td>
	</tr>
</table>
<input type="hidden" name="bno" value="${article.bno}">
<input type="hidden" name="bref" value="${article.bref}">
<input type="hidden" name="bstep" value="${article.bstep}">
<input type="hidden" name="blevel" value="${article.blevel}">
</form>
</body>

전체 코드

<!-- BoardUpdateAction.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="bean.BoardDAO" %>
<%@ page import="bean.BoardDTO" %>

<%
	//이전 페이지에서 전달한 bno 받기
	int bno = Integer.parseInt(request.getParameter("bno"));
	
	//데이터 접근 객체 가져오기 
	BoardDAO dao = BoardDAO.getInstance();
	
	//게시글 갖고 오라는 메소드 호출
	BoardDTO article = dao.getArticle(bno);
	
	//현재 페이지에서 받은 게시글 저장
	request.setAttribute("article", article);
	
	//BoardContentView 페이지로 전달
	//response.sendRedirect("jb?command=contentView");
	
 	RequestDispatcher dp = request.getRequestDispatcher("../view/BoardUpdateView.jsp");
	dp.forward(request, response);
%>

<!-- BoardUpdateView.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" %>
<%@ page import="bean.BoardDAO" %>
<%@ page import="bean.BoardDTO" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글 수정</title>
<link rel="stylesheet" src="CSS/form.css" type="text/css">
<script src="jquery/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$().ready(function(){
	$("#submit11").on("click",function(){
		if(validate()){
			$("form").submit();
		}
	});
});

function validate(){
	let flen = $("form[name=form1] .chk").length;
	for(var i=0; i<flen; i++){
		if($('.chk').eq(i).val()=="" ||
			$('.chk').eq(i).val()==null||
			$('.chk').eq(i).val().trim()==""){
				alert($('.chk').eq(i).attr('title')+ '은/는 필수 입력');
				$('.chk').eq(i).focus();
				return false;
			}  
	}
	return true;
}
</script>

</head>
<body>
<form name="form1" action="jb?command=updateProc" method="post">
<table>
	<tr><td colspan="2"><h3>게시글 수정</h3></td></tr>
	<tr>
		<th>제목</th>
		<td>
			<input type="text" name="subject" title="제목" value="${article.subject}">
		</td>
	</tr>
	<tr>
		<th>작성자</th>
		<td><input type="text" name="writer" class="chk" title="작성자" value="${article.writer}"></td>
	</tr>
	<tr>
		<th>글 내용</th>
		<td><textarea name="content" class="chk"title="글내용">${article.content}</textarea></td>
	</tr>
	<tr>
		<th>비밀번호</th>
		<td><input type="password" name="passwd" class="chk" title="비밀번호" value="${article.passwd}"></td>
	</tr>
	<tr>
		<td colspan="2">
			<input class="btn" type="button" value="글 수정" id="submit11">
			<input class="btn" type="button" value="글 목록" onclick="location.href='jb?command=list'">
		</td>
	</tr>
</table>
<input type="hidden" name="bno" value="${article.bno}">
<input type="hidden" name="bref" value="${article.bref}">
<input type="hidden" name="bstep" value="${article.bstep}">
<input type="hidden" name="blevel" value="${article.blevel}">
</form>
</body>
</html>

저작자표시

개 발소리 춉춉