초급의 끄적거림

[프로젝트] 상세보기 (조회 수 삽입, 특수문자 삽입)/삭제/수정 본문

실습

[프로젝트] 상세보기 (조회 수 삽입, 특수문자 삽입)/삭제/수정

codingD 2019. 9. 5. 18:16

상세보기


⊙ 목록 bbsList.jsp에서 → (bbsno 라는 PK 넘기기) 상세보기 bbsRead.jsp

  - bbsList에서 subject에 bbsno로 링크걸기

 

BbsDAO.java에 read 함수만들기

public BbsDTO read(int bbsno){ // read 함수가 dto를 불러오기 때문에 자료형이 dto의 BbsDTO가 됨
		BbsDTO dto=null;
		try{
			Connection con=DBOpen.getConnection();
			StringBuilder sql=new StringBuilder();
			sql.append(" SELECT bbsno, wname, subject, content, readcnt, grpno, ip, regdt ");
			sql.append(" FROM tb_bbs ");
			sql.append(" WHERE bbsno=?");
			
			PreparedStatement pstmt= con.prepareStatement(sql.toString());
			pstmt.setInt(1, bbsno);
			
			ResultSet rs=pstmt.executeQuery();
			
			if(rs.next()){
				dto=new BbsDTO();
				dto.setBbsno(rs.getInt("bbsno"));
				dto.setWname(rs.getString("wname"));
				dto.setSubject(rs.getString("subject"));
				dto.setContent(rs.getString("content"));
				dto.setReadcnt(rs.getInt("readcnt"));
				dto.setGrpno(rs.getInt("grpno"));
				dto.setIp(rs.getString("ip"));
				dto.setRegdt(rs.getString("regdt"));
			}else{
				dto=null;
			}//if end
		}catch(Exception e){
			System.out.println("상세보기 실패 : "+e);
		}//try end
		return dto;
	}//read() end

 

bbsRead.jsp

 ⊙ 조회수 증가 : update 쿼리를 사용해서 추가 가능

                        : 다양한 옵션을 걸어서 창을 닫고 들어오는 경우 등을 걸어 줄 수 있으나 우선 새로고침할 때마다 

                          조회수가 1회 증가하는 설정

 ⊙ content에서 특수문자 (엔터, ' , ", /, <, > )표현

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>   
<%@ include file="../header.jsp"%>
<!-- 본문시작 bbsRead.jsp-->
	<h3>* 게시판 상세보기 *</h3>

<%
	int bbsno=Integer.parseInt(request.getParameter("bbsno"));
	dto=dao.read(bbsno);
	if(dto==null){
		out.print("해당 글 없음!!");
	}else{
		//조회수 증가 (새로고침할 때마다 조회수 증가 +1이 됨) 
       		//UPDATE 쿼리를 사용해서 추가 가능 - 한번 클릭할 때마다 조회수 증가
		dao.incrementCnt(bbsno); 
%>
	<table class="table table-condensed" style="font-size: 18px;">
		<tr >
			<th class="active" width="100px">제목</th>
			<td><%=dto.getSubject() %></td>
		</tr>
		<tr>
			<th class="active" width="100px">내용</th>
			<td>
<% 			
			//content에 특수문자 표현을 위해
			//HTML 특수문자로 변환
			String content=dto.getContent();
			content=content.replaceAll(" ' ","&apos;");
			content=content.replaceAll(" \" ","&quot;");
			content=content.replaceAll(" < ","&lt;");
			content=content.replaceAll(" > ","&gt;");
			content=content.replaceAll("\r\n","<br>");
			out.print(content);
%>			
			</td>
		</tr>
		
		<tr>
			<th class="active" width="100px">작성자</th>
			<td><%=dto.getWname() %></td>
		</tr>
		<tr>
			<th class="active" width="100px">조회수</th>
			<td><%=dto.getReadcnt() %></td>
		</tr>
		<tr>
			<th class="active" width="100px">IP</th>
			<td><%=dto.getIp() %></td>
		</tr>
		<tr>
			<th class="active" width="100px">작성일</th>
			<td><%=dto.getRegdt() %></td>
		</tr>
	</table>
    		<!--'상세보기' 이에 답변, 삭제, 수정 버튼을 만들어줘야함 -->
		<!-- 클릭을 한 경우 링크를 타고 직접 이동할 수 있도록 location.href로 -->
	   <input type="button" value="답변" class="btn btn-default" onclick="location.href='bbsReply.jsp?bbsno=<%=bbsno%>'"> 
	   <input type="button" value="수정" class="btn btn-default" onclick="location.href='bbsUpdate.jsp?bbsno=<%=bbsno%>'">
	   <input type="button" value="삭제" class="btn btn-default" onclick="location.href='bbsDel.jsp?bbsno=<%=bbsno%>'">

<%
	}//if end
%>

<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

+) header.jsp 에서 td{ text-align: left; padding: 8px; } 넣어주기, 대체로 표 안의 내용 값은 왼쪽정렬이 되기 때문

 

수정 전

 

수정 후

 

글삭제 


⊙ 회원제 사이트가 아니기 때문에 삭제를 누르게 되면 비밀번호를 입력하라는 창이 필요

⊙ 비밀번호가 일치하면 글을 삭제함 (myscript.js) - 사용자가 비밀번호를 입력할 수 있는 폼을 작성한다

 

bbsDel.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp"%>
<!-- 본문시작 bbsDel.jsp -->
	<h3>* 글삭제 *</h3>
	<p><a href="bbsList.jsp" class="btn btn-default" >글목록</a></p>
<form method="post" action="bbsDelProc.jsp" onsubmit="return pwCheck(this)">
<!-- 삭제할 글을 지정해줄 PK인 bbsno를 히든 속성으로 가져옴 -->
<input type="hidden" name="bbsno" value="<%=request.getParameter("bbsno")%>"> 
<table class="table">
	<tr>
		<th style="font-size: 20px; width: 150px" class="active">비밀번호</th>
 		<td><input type="password" name='passwd'  required ></td> <!-- 자바스크립트 -->
	</tr>	
	<tr>
		<td colspan="2">
			<input type="submit" value="확인" class="btn btn-default" >
		</td>
	</tr>
</table>	
</form>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

⊙ 자바스크립트는 '바리케이드' 역할을 함

⊙ 비밀번호도 어느정도의 형식이 필요하기 때문에 유효성검사를 자바스크립트에 함수 pwCheck()를 만들기

 - pwCheck()를 myscript.js 에 만들어줌 (실무에서는 이렇게 분리해서 만들지만 시험에서는 bbsDel에서 바로 script를 만듦 

 - pwCheck() 함수 안에 정말 삭제할지를 다시 묻는 '확인취소' 물음도 추가

   : 확인 true, 취소 false 

 

myscript.js - pwCheck()

function pwCheck(f){
    	  //비밀번호가 4글자 이상 입력되었는지 검사
    	  var passwd=f.passwd.value;
    	  passwd=passwd.trim();	//공백 없애주기
    	  if(passwd.length<4){
    		  alert("비밀번호를 4자 이상 입력해주세요");
    		  f.passwd.focus(); //커서 가져다 두기
    		  return false;  
    	  }//if end
    	  
    	  var message="'확인'을 누르시면 명령이 완료됩니다. \n 진행하시겠습니까? "
    	  if(confirm(message)){  //확인 true, 취소 false
    		  return true;
    	  }else{
    		  return false;
    	  }//if end
}//pwCheck() end

4자보다 적게 입력해서 유효성 검사에서 걸린 것
4자보다 많게 적절히 넣었을경우

⊙ 글 삭제 쿼리문 bbs.sql 에 작성

  - 비밀번호가 맞는 것 뿐만 아니라 PK 가 맞아야 특정된 한 가지 글만 삭제되기 때문에 지정 (비밀번호가 겹치는 글이 있을 수도 있기 때문

⊙ hidden을 사용해서 관리자에게는 필요하지만 사용자에게는 필요없는 정보를 숨기면서 가져옴

 

BbsDAO.java에 delete 함수만들기

public int delete(BbsDTO dto){
	int cnt=0;
	try{
		Connection con=DBOpen.getConnection();
		StringBuilder sql=new StringBuilder();
	
		sql.append(" DELETE FROM tb_bbs ");
		sql.append("	WHERE passwd=? AND bbsno=? ");
		
		PreparedStatement pstmt=con.prepareStatement(sql.toString());
		pstmt.setString(1, dto.getPasswd());  // BbsDTO의 자료형으로 들어갔으면 불러올 때도 dto.get~ 으로
		pstmt.setInt(2, dto.getBbsno());
			
		cnt=pstmt.executeUpdate();
	}catch(Exception e){
		System.out.println("삭제 실패 : "+e);
	}//try end
	return cnt;
}//delete() end

 

bbsDelProc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp"%>
<!-- 본문시작 bbsDelProc.jsp-->
<h3> * 글삭제 결과 *</h3>
<%
	String passwd=request.getParameter("passwd").trim();
	int bbsno=Integer.parseInt(request.getParameter("bbsno"));

	/* dto에 담아서 넘어감 */	
	dto.setPasswd(passwd);
	dto.setBbsno(bbsno);
	
	int cnt= dao.delete(dto);
	 if(cnt==0){	//0이 되었다는 것은 제대로 실행이 되지 않았다는 것
		 out.println("<p>글 삭제를 실패했습니다. 비밀번호를 확인해주세요.</p>");
		 out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>"); 
	 }else{
		 out.println("<script>");
		 out.println("		alert('글이 삭제되었습니다');");
		 out.println("		location.href='bbsList.jsp';");  //삭제가 되면 성적이 삭제되었다는 알림창과 함께 성적목록으로 이동
		 out.println("</script>");	
	 }//if end

%>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

 

⊙ 글삭제 결과

바른 비밀번호를 넣었을 때 글이 삭제도 되었다는 알림

 

비밀번호가 틀렸을 경우, 글 삭제를 실패함

 

수정


 ⊙ bbsUpdate.jsp -> bbsUpdateForm.jsp -> bbsUpdateProc.jsp

 ⊙ 비밀번호가 일치하면 글을 가져와서 수정을 할 수 있게 함

   - bbsUpdate.jsp        비밀번호 입력 폼

   - bbsUpdateForm.jsp  비밀번호 일치되면 게시판 수정 폼에 레코드 출력 (작성자/제목/내용/비밀번호)

   - bbsUpdateProc.jsp  오라클에서 내용 수정

 

bbsUpdate.jps

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>   
<%@ include file="../header.jsp"%>
<!-- 본문시작 bbsUpdate.jsp-->
	<h3>* 글 수정 *</h3>
<p>
	<a href="bbsForm.jsp" class="btn btn-default" >글쓰기</a>
	<a href="bbsList.jsp" class="btn btn-default" >글목록</a>
</p>

<form method="post" action="bbsUpdateForm.jsp" onsubmit="return pwCheck(this)">
<input type="hidden" name="bbsno" value="<%=request.getParameter("bbsno")%>"> <!-- %=bbsno% 가 아니라 request.getParameter("bbsno") 이용 -->
<table class="table">
	<tr>
		<th style="font-size: 20px; width: 150px" class="active">비밀번호</th>
 		<td><input type="password"name='passwd'  required ></td> <!-- 자바스크립트 -->
	</tr>	
	<tr>
		<td colspan="2">
			<input type="submit" value="확인" class="btn btn-default"  >
		</td>
	</tr>
</table>	

</form>

<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

bbsUpdateForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp"%>
<!-- 본문시작 bbsUpdateForm.jsp-->
 <h3>* 글 수정 *</h3>
<%
/* 비밀번호가 정확히 맞아야 수정이 가능한데 그것을 js에서 유효성 검사처럼 설정하는 것이 아니라 jsp에서 설정 */
String passwd = request.getParameter("passwd").trim();
int bbsno=Integer.parseInt(request.getParameter("bbsno"));
	
	dto.setPasswd(passwd);
	dto.setBbsno(bbsno);
	
	dto=dao.updateform(dto);
	if(dto==null){
		out.print("<script>");
		out.print(" alert('비밀번호가 일치하지 않습니다.');");
		out.print(" history.back();");
		out.print("</script>");
	}else{
	
%>
<form name="bbsfrm" method="post" action="bbsUpdateProc.jsp" onsubmit="return bbsCheck(this)"> <!-- onsubmit은 return을 만나야지만 실행이 가능, this는 form을 가리킴 → 자바스크립트 function에 해당하기 때문에 myscript.js 에 만들어도 되고 현재 페이지에 만들어도 됨-->
<input type="hidden" name="bbsno" value="<%=bbsno%>">
<table class="table table-condensed" style="font-size: 18px;">
		<tr >
			<th class="active">제목</th>
			<td><input type="text" name="subject"  value="<%=dto.getSubject() %>" size="30" maxlength="100" required class="form-control"></td>
		</tr>
		<tr>
			<th class="active">작성자</th>
			<td><input type="text" name="wname"  value="<%=dto.getWname() %>" size="10" maxlength="20" required class="form-control"></td>
		</tr>		
		<tr>
			<th class="active">내용</th> <!-- textarea는 value로 넣어주는 것이 아니라 태그 사이에 내용으로 넣어주기 -->
			<td><textarea rows="5" cols="30" name="content" class="form-control"><%=dto.getContent() %></textarea></td>
		</tr>		
		<tr>
			<th class="active">비밀번호</th>
			<td><input type="password" name="passwd"  value="<%=dto.getPasswd()%>" size="10" maxlength="10" required class="form-control"></td>
		</tr>
	<tr>
		<td colspan="2"  align="right">
			<input type="submit" value="수정" class="btn btn-default"> <!-- submit을 하게 되면 onsubmit 이라는 액션이 발생 -->
			<input type="reset" value="취소" class="btn btn-default">		
		</td>
	</tr>
	</table>
	<p>
		<a href="bbsForm.jsp"  class="btn btn-default">글쓰기</a>
		<a href="bbsList.jsp"  class="btn btn-default">글목록</a>
	</p>
</form>
<%
	}//if end
%>

<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

bbsUpdateProc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp"%>
<!-- 본문시작 bbsUpdateProc.jsp-->
	<h3> * 글 수정 *</h3>
<p>
	<a href="bbsForm.jsp" class="btn btn-default" >글쓰기</a>
	<a href="bbsList.jsp" class="btn btn-default" >글목록</a>
</p>
<%
	int bbsno=Integer.parseInt(request.getParameter("bbsno"));
	String subject=request.getParameter("subject").trim();
	String wname=request.getParameter("wname").trim();
	String content=request.getParameter("content").trim();
	String passwd=request.getParameter("passwd").trim();
	String ip=request.getRemoteAddr();
	
	//dto에 담아서 한번에 updateproc로
	dto.setBbsno(bbsno);
	dto.setSubject(subject);
	dto.setContent(content);
	dto.setWname(wname);
	dto.setPasswd(passwd);
	dto.setIp(ip);
	
	
	int res=dao.updateproc(dto);
	if(res==0){
		 out.println("<p>수정을 실패했습니다</p>");
		 out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>"); 
	 }else{
		 out.println("<script>");
		 out.println("		alert('글이 수정되었습니다');");
		 out.println("		location.href='bbsList.jsp';"); 
		 out.println("</script>");			 
	 }//if end
%>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

수정하려 비밀번호 입력이 틀렸을 경우 알림창

Comments