티스토리 뷰

프로그래밍/JSP

[JSP] MVC 게시판 만들기 3(수정, 삭제)

꼬렙 2011. 10. 15. 12:06
728x90
원래 여러가지 기능을 다 구현해서 상세하게 써놓으려고 생각하다가 
다른 프로젝트들이 밀려서 글을 못썼는데 어떤 좋은 착한 분께서 제 글을 보고 따라하신다기에 수정 삭제까지 올립니다 ^^;;

일단.. 윈도우를 싹 밀어버리는 바람에 오라클을 날려먹었구요..
블로그 작성용 간단 게시판 파일이 없었습니다

그래서 급하게 필요한 부분만 다시 작성하고 MySQL로 살짝 바꼈습니다 ㅎㅎ

DB 접속하는 부분과 리스트를 읽어오는 부분이 조금 차이가 있습니다

리스트를 10개씩 읽어와야 하기에 오라클은 ROWNUM 이란 녀석을 사용하고 
MySQL은  LIMIT이란 더 간단한 녀석을 사용하거든요

뭐.. 어쨌든 자바로 처리하는 부분이 중요한 거니까 큰 상관은 없을것 같습니다~


전까지 글을 올렸으니까 이제 글을 읽어와야 겠죠

list.jsp에서 제목을 출력해주는 부분을 보면

<a href="/MVC_BBS/read.do?articleNumber=${i.articleNumber}&pageNumber=${currentPage}">
${i.title} 
</a>

articleNumber라는 클릭된 글 번호와 pageNumber라는 현재 페이지를 GET 방식으로 보내주고 있습니다
pageNumber는.. 예를들어 98페이지에 있는 글을 본후에 
리스트로 돌아가면 98페이지를 다시 보여줘야 하기에 귀찮더라도 계속 달고 다니는 겁니다 ㅎㅎ
이런 처리를 안해주면 사용자 입장에서 상당히 짜증이 나겠죠.. 글만 봤다하면 다시 1페이지로 돌려버릴테니

그럼 read를 처리하는 자바 클래스에서 이것들을 받아주고 적절히 처리를 해줘야 겠죠

[ReadImpl.java]

package MVC;

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

public class ReadImpl implements BbsInterface {

@Override
public String handling(HttpServletRequest request, HttpServletResponse response) {
String pageNumber = request.getParameter("pageNumber");
String articleNumber = request.getParameter("articleNumber");
MvcProcessor mvcProcessor = MvcProcessor.getInstance();
BoardBean boardBean = mvcProcessor.getContent(articleNumber);
request.setAttribute("boardBean", boardBean);
request.setAttribute("pageNumber", pageNumber);
return "read.jsp";
}
}


참 간단합니다
articleNumber만 MvcProcessor에게 알려주면 끝이니까요

[MvcProcessor.getContent()]

public BoardBean getContent(String articleNumber) {
String query1 = "UPDATE article_model2 SET hit_number=hit_number+1 WHERE article_number=?";
String query2 = "SELECT * FROM article_model2 WHERE article_number=?";

try {
connection = this.getConnection();

pstmt = connection.prepareStatement(query1);
pstmt.setInt(1, Integer.parseInt(articleNumber));
pstmt.executeUpdate();

pstmt = connection.prepareStatement(query2);
pstmt.setInt(1, Integer.parseInt(articleNumber));
rs = pstmt.executeQuery();
if (rs.next()) {
boardBean = new BoardBean();
boardBean.setArticleNumber(rs.getInt("article_number"));
boardBean.setId(rs.getString("id"));
boardBean.setTitle(rs.getString("title"));
boardBean.setContent(rs.getString("content"));
boardBean.setPassword(rs.getString("password"));
boardBean.setHitNumber(rs.getInt("hit_number"));
boardBean.setDepth(Integer.parseInt(rs.getString("depth")));
boardBean.setFileName(rs.getString("file_name"));
String writeDateTemp = String.valueOf(rs.getTimestamp("write_date"));
String date = writeDateTemp.substring(0, 4) + "년 "
+ writeDateTemp.substring(5, 7) + "월"
+ writeDateTemp.substring(8, 10) + "일 "
+ writeDateTemp.substring(11, 19);
boardBean.setWriteDate(date);
}
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} finally {
if (rs != null) {
try {
rs.close();
} catch (Exception e) {}
}
if (pstmt != null) {
try {
pstmt.close();
} catch (Exception e) {}
}
if (connection != null) {
try {
connection.close();
} catch (Exception e) {}
}
}
return boardBean;
}


글을 읽었으니까 query1 에서 hit_number를 +1 시켜주고
query2로 실제 글을 가져옵니다

가져온 데이터는 다시 BoardBean에 열심히 set 해주고.. 그 BoardBean을 반환해 줍니다


[read.jsp]

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr>
<td>글쓴이 : ${boardBean.id}</td>
</tr>
<tr>
<td>제목 : ${boardBean.title}</td>
</tr>
<tr>
<td>내용 : ${boardBean.content}</td>
</tr>
<tr>
<td>작성일자 : ${boardBean.writeDate}</td>
</tr>
</table>
</body>
</html>


아... 참 디자인.. 정말.. 안그래도 디자인 못하는데 급하게 만드느라 더 허접하네요

어쨌든 여기까지 작성을 하면 결과는 이렇습니다
미리 글 한개만 입력을 시켜놨었구요

[list]


[read]


[다시 list]


조회수가 1 증가됐고.. 일단 글도 잘 가져옵니다

이제 read에서 수정, 삭제, 리스트로 돌아가기 등을 넣어보겠습니다

여기서 살짝 고민이 되는 부분은 read를 할때 이미 DB에서 글에 대한 데이터를 가져왔는데
1번 : 이 데이터들을 바로 modify_form 이라는 녀석에게 줄 것인지..
2번 : 다시 DB에 접속을 해서 새로 데이터를 가져올 것인지
입니다

각각 장단점이 있겠지만.. 2번방식으로 하겠습니다
파일에 관련된 것은 생략하고 제목, 본문, 비밀번호만 수정하는 것으로 ㅎㅎ

read.jsp를 살짝 수정해주고요

[read.jsp]

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script language="javascript">
function goURI(text) {
if(text == 'modify') {
document.readForm.action = "modify_form.do";
} else if(text == 'delete') {
document.readForm.action = "delete.do";
} else {
document.readForm.action = "list.do";
}
document.readForm.submit();
}
</script>
</head>
<body>
<form name="readForm" method="post" action="">
<table border="1">
<tr>
<td>글쓴이 : ${boardBean.id}</td>
</tr>
<tr>
<td>제목 : ${boardBean.title}</td>
</tr>
<tr>
<td>내용 : ${boardBean.content}</td>
</tr>
<tr>
<td>작성일자 : ${boardBean.writeDate}</td>
</tr>
<tr>
<td>
<input type="button" value="수정" onClick="goURI('modify')"/>
<input type="button" value="삭제" onClick="goURI('delete')"/>
<input type="button" value="Back" onClick="goURI('back')"/>
<input type="hidden" name="articleNumber" value="${boardBean.articleNumber}"/>
<input type="hidden" name="pageNumber" value="${pageNumber}"/>
</td>
</tr>
</table>
</form>
</body>
</html>


버튼과 자바스크립트가 추가되었습니다

수정을 누르면 modify_form으로 가야 하니까
ModifyFormImpl.java와 modify_form.jsp 도 만들어 줍니다
(하아.. 귀찮네요 OTL 매번 느끼는 거지만 웹페이지 만들기는 참 노가다스럽다는... ㅋㅋ;;)

[ModifyFormImpl.java]

package MVC;

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

public class ModifyFormImpl implements BbsInterface {

@Override
public String handling(HttpServletRequest request, HttpServletResponse response) {
String pageNumber = request.getParameter("pageNumber");
String articleNumber = request.getParameter("articleNumber");
MvcProcessor mvcProcessor = MvcProcessor.getInstance();
BoardBean boardBean = mvcProcessor.getContent(articleNumber);
request.setAttribute("boardBean", boardBean);
request.setAttribute("pageNumber", pageNumber);
request.setAttribute("articleNumber", articleNumber);
return "modify_form.jsp";
}
}


read의 동작과 같습니다
DB에서 글을 가져오는 것 밖에 없죠 ㅎㅎ


[modify_form.jsp]

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>글 쓰기</title>
</head>
<body>
<form name="modifyForm" method="post" action="/MVC_BBS/modify.do">
<table border="1" width="300">
<tr>
<td>글번호</td>
<td>${articleNumber}</td>
</tr>
<tr>
<td>글쓴이</td>
<td>${boardBean.id}</td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" name="title" value="${boardBean.title}"></td>
</tr>
<tr>
<td colspan="2" align="center">내용</td>
</tr>
<tr>
<td colspan="2">
<pre>
<textarea name="content" cols="50" rows="10">${boardBean.content}</textarea>
</pre>
</td>
</tr>
<tr>
<td width="100">비밀번호</td>
<td><input type="password" name="password" value="${boardBean.password}"></td>
</tr>
<tr>
<td colspan="2" align="center" height="30">
<input type="submit" value="수정"/>
  <input type="hidden" name="articleNumber" value="${articleNumber}"/>
<input type="hidden" name="pageNumber" value="${pageNumber}"/> 
</td>
</tr>
</table>
</form>
</body>
</html>


ModifyFormImpl 로 부터 넘겨받은 값을 뿌려주고요
수정을 눌렀을때 수정한 여러 데이터들과 또 articleNumber, pageNumber를 달고 modify.do로 갑니다

[ModifyImpl.java]

package MVC;

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

public class ModifyImpl implements BbsInterface {

@Override
public String handling(HttpServletRequest request, HttpServletResponse response) {
String pageNumber = request.getParameter("pageNumber");
String articleNumber = request.getParameter("articleNumber");

BoardBean boardBean = new BoardBean();
boardBean.setArticleNumber(Integer.parseInt(articleNumber));
boardBean.setTitle(request.getParameter("title"));
boardBean.setContent(request.getParameter("content"));
boardBean.setPassword(request.getParameter("password"));
MvcProcessor mvcProcessor = MvcProcessor.getInstance();
mvcProcessor.setModify(boardBean);
request.setAttribute("pageNumber", pageNumber);
request.setAttribute("articleNumber", articleNumber);
return "read.do";
}
}


write 하는 것과 큰 차이가 없습니다
단지 INSERT냐 UPDATE냐 하는 것 뿐이죠 ㅎㅎ 
그리고 마지막 return 값은 read.do입니다

List.java => list.jsp
LoginForm.java => login_form.jsp
보통 이런식이었지만.. modify는 수정한 후에 수정된 글을 다시 읽어서 보여줘야 되므로
바로 read.do라고 해놓았습니다 
read.do 는 articleNumber만 넘겨주면 해당 글을 읽어서 보여줄 테니까요 

[MvcProcessor.setModify()]

public void setModify(BoardBean boardBean) {
String query = "UPDATE article_model2 SET "
+ "title=?, content=?, password=?, write_date=now() WHERE article_number=?";
try {
connection = this.getConnection();
pstmt = connection.prepareStatement(query);
pstmt.setString(1, boardBean.getTitle());
pstmt.setString(2, boardBean.getContent());
pstmt.setString(3, boardBean.getPassword());
pstmt.setInt(4, boardBean.getArticleNumber());
pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} finally {
if (rs != null) {
try {
rs.close();
} catch (Exception e) {}
}
if (pstmt != null) {
try {
pstmt.close();
} catch (Exception e) {}
}
if (connection != null) {
try {
connection.close();
} catch (Exception e) {}
}
}
}


query 에서 "write_date=NOW()" 라는 부분은 오라클의 "write_date=SYSDATE"와 같은 의미입니다

여기까지 수정 부분이 완료되었습니다

[read]


위와 같이 버튼이 추가되었구요

[modify]


수정폼 화면도 잘 뜹니다
아.. 진짜 디자인..

제목을 영어로 바꾸겠습니다(MySQL 설정을 제대로 안해줘서 한글이 깨지는 현상이...;;;;)




이렇게 영어로 바뀌어 있습니다 ㅎㅎ


이제 삭제입니다

아까 read.jsp에서 삭제 버튼을 미리 만들어놨었구요

<script language="javascript">
function goURI(text) {
if(text == 'modify') {
document.readForm.action = "modify_form.do";
} else if(text == 'delete') {
document.readForm.action = "delete.do";
} else {
document.readForm.action = "list.do";
}
document.readForm.submit();
}
</script>

<input type="button" value="삭제" onClick="goURI('delete')"/>


delete.do 를 만들어줘야 됩니다

MvcProcessor.properties는 제일 처음에 다 작성이 되어있었으니까 이것도 됐고..
delete도 결과 화면을 굳이 보여주지 않아도 되니까 지운후에 바로 리스트 화면으로 보내버리겠습니다

DeleteImpl.java만 만들면 되겠네요

[DeleteImpl.java]

package MVC;

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

public class DeleteImpl implements BbsInterface {

@Override
public String handling(HttpServletRequest request, HttpServletResponse response) {
String pageNumber = request.getParameter("pageNumber");
String articleNumber = request.getParameter("articleNumber");

MvcProcessor mvcProcessor = MvcProcessor.getInstance();
mvcProcessor.setDelete(articleNumber);
request.setAttribute("pageNumber", pageNumber);
return "list.do";
}
}


이것도 간단합니다
articleNumber만 MvcProcessor에게 알려줘서 지우라고 명령하면 끝입니다

[MvcProcessor.setDelete()]

public void setDelete(String articleNumber) {
String query = "DELETE FROM article_model2 WHERE article_number=?";
try {
connection = this.getConnection();
pstmt = connection.prepareStatement(query);

pstmt.setInt(1, Integer.parseInt(articleNumber));
pstmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} finally {
if (rs != null) {
try {
rs.close();
} catch (Exception e) {}
}
if (pstmt != null) {
try {
pstmt.close();
} catch (Exception e) {}
}
if (connection != null) {
try {
connection.close();
} catch (Exception e) {}
}
}
}


글이 한개밖에 없는데 지워버리면 썰렁하니까 임의로 DB에 글을 하나 더 입력해놓고 지우겠습니다

[list]


아.. 내림차순으로 정렬을 안해줬더니 2번글이 밑으로 와버렸네요
뭐 중요한 건 아니니까 넘어가겠습니다
MvcProcessor.getArticles()의 query를 SELECT * FROM article_model2 ORDER BY article_number DESC LIMIT ?, ?;
이렇게 바꿔주면 제대로 나올겁니다

[read]


다시 1번글을 읽어와서 삭제 버튼을 눌러주면


이렇게 1번글이 사라진 것을 볼수 있습니다

수정 / 삭제하는 내용은 여기까지 입니다

내용은 참 간단한데.. 노가다 작업이 많다는게 힘든 것 같습니다


 

'프로그래밍 > JSP' 카테고리의 다른 글

IE(익스플로러) 6 또는 7 버전에서 한글이 깨지는 문제  (2) 2012.01.04
파일 다운로드 도우미  (0) 2012.01.04
[JSP] JSP 기초(스크립틀릿, 지시어, 표현식)  (0) 2011.09.12
[JSP] JSTL 1.2 다운로드  (0) 2011.08.27
[JSP] EL 함수  (0) 2011.07.29