23/03/31 JSP

서지우·2023년 3월 31일
0

JSP

목록 보기
6/7

게시판 완성

게시판(2)에 답변, 댓글을 추가하여 이어서 완성한다.
(게시판 어려워..힘들어..제레레레레레제엔장)

테스를 하기 위해 Drop table을 하고 새로 만든다.

DROP TABLE IF EXISTS tblBoard;

CREATE TABLE `tblBoard` (
	`num`               int(11)              NOT NULL  auto_increment  ,
	`name`              varchar(20)                    ,
	`subject`           varchar(50)                    ,
	`content`           text                                ,
	`pos`                smallint(7) unsigned           ,
	`ref`               smallint(7)                    ,
	`depth`             smallint(7) unsigned           ,
	`regdate`          date                           ,
	`pass`              varchar(15)                    ,
	`ip`                  varchar(15)                    ,
	`count`             smallint(7) unsigned           ,
	`filename`         varchar(30)                    ,
	`filesize`           int(11)                        ,
	PRIMARY KEY ( `num` )
);

해당 sql문을 실행하면 데이터들을 날라가고 list.jsp를 실행하면 아래와 같이
'등록된 게시물이 없다'라고 나온다.

답변 기능을 만들기 위해 list.jsp를 실행해 [글쓰기]를 클릭하여 아래의 그림과 같이 데이터를 입력해 총 3개의 데이터를 만들어 준다.


답변

BoardMgr.java

답변을 DB에 저장하고 불러오기 위해 BoardMgr에 추가해 준다.

	//Board Reply : 답변글 입력
	public void replyBoard(BoardBean bean) {
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = null;
		try {
			con = pool.getConnection();
			sql = "insert tblBoard(name,content,subject,ref,pos,depth,regdate,"
					+ "pass,count,ip)values(?, ?, ?, ?, ?, ?, now(), ?, 0, ?)";
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, bean.getName());
			pstmt.setString(2, bean.getContent());
			pstmt.setString(3, bean.getSubject());
			///////////중요!
			pstmt.setInt(4, bean.getRef());//원글과 동일한 ref(그룹)
			pstmt.setInt(5, bean.getPos()+1);//원글 pos+1(정렬)
			pstmt.setInt(6, bean.getDepth()+1);//원글에 depth + 1 ex)답변의 대답변이 달릴때 앞의 공백지정해주는 것
			//////////
			pstmt.setString(7, bean.getPass());
			pstmt.setString(8, bean.getIp());
			pstmt.executeUpdate();

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt);
		}
		return;
	}
	
	//Board Reply Up : 답변글 위치값 수정
	public void replyUpBoard(int ref, int pos ) {
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = null;
		try {
			con = pool.getConnection();
			sql = "update tblBoard set pos=pos+1 where ref=? and pos>?";
			pstmt = con.prepareStatement(sql);
			pstmt.executeUpdate();
			pstmt.setInt(1, ref);
			pstmt.setInt(2, pos);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt);
		}
		return;
	}

주석으로 설명을 해 놨지만
Ref는 원글의 그룹 즉, 게시글그룹을 말하는데 2번 게시글을 답변, 대답변일 달리는 데 이 글들은 2번 게시글에서 파생된 것이니까 2번으로 그룹하겠다는 말이다.

pos는 정렬이다. bbb에 bbb1답변이 달리고, bbb2가 게시글이 달리면 나란히 정렬된다. 그 후 bbb2-1답변이 달리면 bbb2아래의 위치할 것이다. 나오는 순서는 bbb -> bbb2 -> bbb2-1 -> bbb1이 되는 것이다.

depth는 답변과 대답변들이 달릴 때 정렬되면서 생겨야 하는 앞의 공백이라고 보면 된다.


reply.jsp

답변을 작성할 수 있는 페이지를 만든다.

<!-- reply.jsp -->
<%@page contentType="text/html; charset=UTF-8"%>
<!-- read.jsp에서 원글을 session 저장 -->
<jsp:useBean id="bean" scope="session" class="ch15.BoardBean"/>
<%
		String nowPage = request.getParameter("nowPage");
		String numPerPage = request.getParameter("numPerPage");
		String subject = bean.getSubject();
		String content = bean.getContent();
%>
<html>
<head>
<title>JSPBoard</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFCC">
<div align="center">
<br><br>
 <table width="600" cellpadding="3">
  <tr>
   <td bgcolor="#CCCC00" height="21" align="center">답변하기</td>
  </tr>
</table>
<form method="post" action="boardReply" >
<table width="600" cellpadding="7">
 <tr>
  <td>
   <table>
    <tr>
     <td width="20%">성 명</td>
     <td width="80%">
	  <input name="name" size="30" maxlength="20"></td>
    </tr>
    <tr>
     <td>제 목</td>
     <td>
	  <input name="subject" size="50" value="답변 : <%=subject%>" maxlength="50"></td> 
    </tr>
	<tr>
     <td>내 용</td>
     <td>
	  <textarea name="content" rows="12" cols="50">
      	<%=content %>
      	========답변 글을 쓰세요.=======
      	</textarea>
      </td>
    </tr>
    <tr>
     <td>비밀 번호</td> 
     <td>
	  <input type="password" name="pass" size="15" maxlength="15"></td> 
    </tr>
    <tr>
     <td colspan="2" height="5"><hr/></td>
    </tr>
	<tr> 
     <td colspan="2">
	  <input type="submit" value="답변등록" >
      <input type="reset" value="다시쓰기">
      <input type="button" value="뒤로" onClick="history.back()"></td>
    </tr> 
   </table>
  </td>
 </tr>
</table>
 <input type="hidden" name="ip" value="<%=request.getRemoteAddr()%>" >
 <input type="hidden" name="nowPage" value="<%=nowPage%>">
 <input type="hidden" name="numPerPage" value="<%=numPerPage%>">
 <input type="hidden" name="ref" value="<%=bean.getRef()%>">
 <input type="hidden" name="pos" value="<%=bean.getPos()%>">
 <input type="hidden" name="depth" value="<%=bean.getDepth()%>">
</form> 
</div>
</body>
</html>

BoardReplyServlet.java

답변 기능을 처리할 수 있도록 servlet을 만든다.

package ch15;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ch15/boardReply")
public class BoardReplyServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		BoardMgr mgr = new BoardMgr();
		BoardBean reBean = new BoardBean();
		reBean.setName(request.getParameter("name"));
		reBean.setSubject(request.getParameter("subject"));
		reBean.setContent(request.getParameter("content"));
		reBean.setRef(Integer.parseInt(request.getParameter("ref")));
		reBean.setPos(Integer.parseInt(request.getParameter("pos")));
		reBean.setDepth(Integer.parseInt(request.getParameter("depth")));
		reBean.setPass(request.getParameter("pass"));
		reBean.setIp(request.getParameter("ip"));
		
		mgr.replyUpBoard(reBean.getRef(), reBean.getPos());//강제로 벌어짐
		mgr.replyBoard(reBean);
		
		String nowPage = request.getParameter("nowPage");
		String numPerPage = request.getParameter("numPerPage");
		response.sendRedirect("list.jsp?nowPage="+nowPage+
				"&numPerPage="+numPerPage);
		
	}

}

list.jsp를 실행해 게시글을 클릭하고 [답변]을 클릭하면 아래와 같이 출력 된다.


list.jsp(추가)

<!-- subject의 a태그 위에 '추가'주석부분을 추가해줌. -->
				<tr align="center">
					<td><%=totalRecord-start-i%></td>
					<td align="left">
                    <!-- 추가( -->
					<%for(int j=0;j<depth;j++){out.println("&nbsp;&nbsp;");} %>
					<!-- 원글 아래 답변의 앞쪽 공백 주는 코드 ex)re.답변 -->
                    <!-- )여기까지 -->
					<a href="javascript:read('<%=num%>')"><%=subject%></a>
					<%if(filename!=null&&!filename.equals("")){%>
						<img alt="첨부파일" src="img/icon.gif" align="middle">
					<%}%>
					</td>
					<td><%=name%></td>
					<td><%=regdate%></td>
					<td><%=count%></td>
				</tr>

list.jsp를 실행해 넘어가서 [답변]을 클릭해 제목을 BBB1, BBB2로 답변을 등록해 준다.

그러고 나서 다시 list.jsp를 실행하면 아래와 같이 나온다.


답변 구조

답변이 어떻게 달리고 ref,pos,depth 어떤 역할인지 설명하겠다.

하이디에 들어가서 아래의 select문을 실행하면

SELECT num SUBJECT, ref, pos, depth
FROM tblboard;

아래와 같이 나오는 데 페이지를 실행시켜서 보면 ref,pos,depth가 어떤 것인지 알 수 있다.

list.jsp를 실행해 BBB2에 BBB2-1 답변을 달아서 다시 sql문을 실행해서 보면 이해할 수 있다.


댓글

BCommentBean.java

답변 글에 단 댓글들을 저장할 수 있도록 Mgr의 필요한 bean을 작성한다.

BCommentMgr.java

답변 글에 단 댓글들을 저장할 수 있도록 Mgr을 작성한다.

read.jsp(추가)

게시글(답변글)을 클릭하여 들어가면 이름과 댓글을 달 수 있도록 한다.

//script안에 추가해준다.
<script>
	function cInsert() {
		if(document.cFrm.comment.value==""){
			alert("댓글을 입력하세요.");
			document.cFrm.comment.focus();
			return;
		}
		document.cFrm.submit();
	}
</script>
<!-- html 밑에 추가 -->
<!-- td태그 밑에 -->
<td align="center" colspan="2">
  <!-- 댓글 입력폼 Start -->
	<form method="post" name="cFrm">
		<table>
			<tr  align="center">
				<td width="50">이 름</td>
				<td align="left">
					<input name="cName" size="10" value="aaa">
				</td>
			</tr>
			<tr align="center">
				<td>내 용</td>
				<td>
				<input name="comment" size="50"> 
				<input type="button" value="등록" onclick="cInsert()"></td>
			</tr>
		</table>
	<input type="hidden" name="flag" value="insert">	
	<input type="hidden" name="num" value="<%=num%>">
	<input type="hidden" name="cnum">
    <input type="hidden" name="nowPage" value="<%=nowPage%>">
    <input type="hidden" name="numPerPage" value="<%=numPerPage%>">
   	<%if(!(keyWord==null||keyWord.equals(""))){ %>
    <input type="hidden" name="keyField" value="<%=keyField%>">
    <input type="hidden" name="keyWord" value="<%=keyWord%>">
	<%}%>
	</form>
  <!-- 댓글 입력폼 End -->

list.jsp를 실행해 게시글을 클릭하면 다음과 같이 댓글을 등록할 수 있도록 화면이 출력된다.
등록시 비밀번호를 입력하지 않고 등록하면 입력하라고 알림창이 뜬다.

아무 글이나 적고 올리면 tblcomment에 저장이 된다.


read.jsp(추가)

댓글들의 리스트를 만들기 위해 코드를 추가해 준다.

//script에 추가
<script>
	function cDel(cnum) {
		document.cFrm.cnum.value=cnum;
		document.cFrm.flag.value="delete";
		document.cFrm.submit();
	}
</script>
<!-- html 밑에 추가 -->
  <!-- 댓글 입력폼 End -->
 <hr/>
 <!-- 댓글 List Start -->
 <% 
 	Vector<BCommentBean> cvlist = cmgr.getBComment(num);
 	if(!cvlist.isEmpty()){
 		//out.println(cvlist.size());
 %>
 	<table>
 	<%
 		for(int i=0;i<cvlist.size();i++){
			BCommentBean cbean = cvlist.get(i);
			int cnum = cbean.getCnum();
			String cname = cbean.getName();
			String comment = cbean.getComment();
			String cregdate = cbean.getRegdate();
 	%>
 	  	<tr>
			<td colspan="3" width="600"><b><%=cname%></b></td>
		</tr>
		<tr>
			<td>댓글:<%=comment%></td>
			<td align="right"><%=cregdate%></td>
			<td align="center" valign="middle">
			<input type="button" value="삭제" onclick="cDel('<%=cnum%>')">
			</td>
		</tr>
		<tr>
			<td colspan="3"><br></td>
		</tr>
 	<%}//for%>
 	</table>
 <%}//if%>
 <!-- 댓글 List End -->

제목 ccc 게시글에 댓글을 임시로 2개를 넣어주고 list.jsp를 실행해 들어간다.

댓글(DB에도 저장되어 있음)의 삭제버튼을 눌리게 되면

삭제가 되고, DB에도 삭제된다.


투표 프로그램



0개의 댓글

관련 채용 정보