본문 바로가기
[ View ]/JSP

[ JSP ] 게시판 만들기 4 - 수정/삭제 기능 구현

by 환이s 2023. 3. 31.

이전 포스팅에서 댓글 기능 구현을 해보았습니다.

오늘은 상세 화면 페이지에 수정/삭제 기능을 추가해서 비밀번호 입력 후 실행할 수 있게 해 보겠습니다.

 

 

게시판 기능/ 파일 구조

 

< 기능 >

1 ) CRUD(글쓰기, 목록/상세, 수정, 삭제)

2 ) 검색 기능

3 ) 페이지 나누기

4) 파일 업로드, 다운로드

5 ) 댓글 달기

6 ) 답변 달기

 

< 파일 구조 >

Contoller

BoardController.java

Model

Pager.java Constants.java (상수값들)
BoardDTO.java
BoardCommentDTO.java(댓글 관련)
BoardDAO.java
board.xml

View

index.jsp : 시작 페이지
list.jsp : 게시판 목록
write.jsp : 글쓰기
comment_list.jsp : 댓글 목록
edit.jsp : 수정, 삭제 기능
reply.jsp : 답변 달기
search.jsp : 검색 페이지

view.jsp

 

이전 포스팅에서 각 기능의 폼과 자바 스크립트 요청까지 준비를 했습니다.

그럼 Controller에서 요청을 받아줍니다. 

 


Controller

 

Controller에서는 수정/삭제 페이지로 이동할 수 있게 처리를 해줍니다.

요청 들어온 pass_check.do는 수정/삭제 페이지로 이동하기 전 비밀번호 체크를 해줘야 합니다.

비밀번호 체크는 if문을 활용합니다.

 

당연히 비밀번호가 맞는지 확인하려면 getParameter로 가져와야 합니다. 

 

게시물 번호와 입력한 비밀번호를 매개 변수로 주고 DAO에 보내주고, 비밀번호 체크는 if문에서 null값이 아니면 해당 페이지로 이동할 수 있게 요청 처리를 하고, 틀리면 view.jsp 폼에 작성한 error 메시지로 안내해 줍니다.

 

다음으로 DAO에서 mapper로 연결해 줍니다.


DAO

 

Controller에서 DAO에 매개 변수를 INT, String  두 개를 요청했습니다.  

그렇다면 이전 포스팅에서 게시글 목록을 가져올 때 사용했던 Map <>()을 활용해서 담아줍니다.

 

그리고 List를 요청 보낸 게 아니라 비밀번호 체크를 하는 거라서 session 객체에서 selectList 메서드가 아닌,

selectOne을 사용해주셔야 합니다. 

 

 

다음으로 mapper에 요청 보낸 board.pass_check 요청 처리를 하러 갑니다.

 


 

board.xml(mapper)

 

 

mapper에서 SQL문 작성을 맞췄다면 이제 비밀번호가 맞으면 수정/삭제 페이지를 호출할 수 있게 한 겁니다.

그럼 다음으로 Controller에서 페이지 처리를 했던 edit.jsp 페이지를 생성합니다.

 


edit.jsp(수정/삭제 page)

 

if문을 통해서 비밀번호가 맞으면 해당 페이지를 호출해서 들어옵니다.

 

그럼 실질적인 수정/삭제 기능을 추가해야 합니다. 수정을 할 수 있게 게시판 양식에 맞게 폼을 만들어 주고 버튼을 생성해서 자바 스크립트로 요청 처리를 합니다.

 

<body>
<h2>수정/삭제</h2>
<form name="form1" method="post" enctype="multipart/form-data">
<table border="1" style="width: 100%;">
 <tr>
  <td>이름</td>
  <td><input name="writer" id="writer" value="${dto.writer}"></td>
 </tr>
 <tr>
  <td>제목</td>
  <td><input name="subject" id="subject" size="60" value="${dto.subject}"></td>
 </tr>
 <tr>
  <td>본문</td>
  <td><textarea rows="5" cols="60" name="content" id="content">${dto.content}</textarea></td>
 </tr>
 <tr>
  <td>첨부파일</td>
  <td>
   <c:if test="${dto.filesize > 0}">
    ${dto.filename}( ${dto.filesize / 1024} KB)
     <input type="checkbox" name="fileDel">첨부파일 삭제 <br>
   </c:if>
  <input type="file" name="file1"></td>
 </tr>
<!--  <tr>
  <td>비밀번호</td>
  <td><input type="password" name="passwd" id="passwd"></td>
 </tr> -->
 <tr>
  <td colspan="2" align="center">
   <!-- 수정,삭제를 위한 글번호  -->
   <input type="hidden" name="num" value="${dto.num}">
   <input type="button" value="수정" id="btnUpdate">
   <input type="button" value="삭제" id="btnDelete">
  </td>
 </tr>
</table>
</form>

</body>
</html>

 

폼 작업을 끝내고 수정/삭제 id 값을 자바 스크립트에서 click() 이벤트를 응용해서 Controller에 요청 보냅니다.

 

 

요청을 보냈으니 Controller에서 기능 추가를 합니다.


Controller

 

먼저 수정 기능 요청을 처리하는데, 수정 기능은 해당 게시물의 상세 정보를 DB에서 가져와서 호출을 해야 하고, 파일 업로드 기능까지 있기 때문에 해당 디렉터리가 없다면 디렉터리 생성을 해줄 수 있게 해 주고 request 객체를 활용하는 게 아닌, 확장시킨 MultipartRequest를 생성해주셔야 합니다. 

 

나머지 역할들은 주석으로 간단한 설명을 포함시켰습니다.

 

좌 -> 우 

 

287 문단에서 파일 첨부를 하지 않을 경우를 대비해서 새로운 첨부 파일이 없을 시 테이블의 기존 정보를 가져올 수 있게   이전 포스팅에서 만들었던 view() 메서드를 사용합니다.

 

마지막으로 수정을 위해 DAO에 요청을 보내고 수정이 완료되면 목록 페이지로 이동할 수 있게 페이지 처리를 해줍니다.

 

 

< CODE >

else if(url.indexOf("update.do") != -1) {
			//파일업로드 처리
			File uploadDir=new File(Constants.UPLOAD_PATH);
			if(!uploadDir.exists()) {//업로드디렉토리가 존재하지 않으면
				uploadDir.mkdir();//디렉토리를 만듦
			}
			//request를 확장시킨 MultipartRequest생성
			MultipartRequest multi=new MultipartRequest(request, Constants.UPLOAD_PATH, 
					Constants.MAX_UPLOAD, "utf-8", new DefaultFileRenamePolicy());
			int num=Integer.parseInt(multi.getParameter("num"));
			
			String writer=multi.getParameter("writer");
			String subject=multi.getParameter("subject");
			String content=multi.getParameter("content");
			String passwd=multi.getParameter("passwd");
			//클라이언트 ip주소 가져오기
			String ip=request.getRemoteAddr();
			if(ip.equalsIgnoreCase("0:0:0:0:0:0:0:1")) {
				InetAddress inetAddress=InetAddress.getLocalHost();
				ip=inetAddress.getHostAddress();
			}
			String filename=" ";//공백 1개
			int filesize=0;
			try {
				//첨부파일집합
				Enumeration files=multi.getFileNames();
				//다음 요소가 있으면
				while(files.hasMoreElements()) {
					//첨부파일의 이름
					String file1=(String)files.nextElement();
					filename=multi.getFilesystemName(file1);
					File f1=multi.getFile(file1);
					if(f1 != null) {
						filesize=(int)f1.length();//파일 사이즈 저장
					}
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
			BoardDTO dto=new BoardDTO();
			dto.setNum(num);
			dto.setWriter(writer);
			dto.setSubject(subject);
			dto.setContent(content);
			dto.setPasswd(passwd);
			dto.setIp(ip);
			//파일 첨부를 하지 않을 경우
			if(filename == null || filename.trim().equals("")) {
				//새로운 첨부파일이 없을 때(테이블의 기존정보를 가져옴)
				BoardDTO dto2=dao.view(num);
				String fName=dto2.getFilename();
				int fSize=dto2.getFilesize();
				int fDown=dto2.getDown();
				dto.setFilename(fName);
				dto.setFilesize(fSize);
				dto.setDown(fDown);
			}else {
				//새로운 첨부파일이 있을 때
				dto.setFilename(filename);
				dto.setFilesize(filesize);
			}
			//첨부파일 삭제 처리
			String fileDel=multi.getParameter("fileDel");
			//체크박스에 체크되었으면, value없이 썼기 때문에 on이 디폴트값이 됨
			if(fileDel != null && fileDel.equals("on")) {
				String fileName=dao.getFileName(num);
				File f=new File(Constants.UPLOAD_PATH+fileName);
				f.delete();//파일삭제
				//첨부파일 정보를 지움
				dto.setFilename("-");
				dto.setFilesize(0);
				dto.setDown(0);
			}
			//레코드 수정
			dao.update(dto);

			String page="/board_servlet/list.do";
			response.sendRedirect(contextPath+page);

 

다음으로 DAO에. update(dto) 요청 처리를 합니다.


DAO

 

수정 기능은 session 객체에서 update()를 사용해서 mapper에 요청을 보냅니다.

 


board.xml(mapper)

 

mapper에서는 update 문으로 해당 칼럼에 들어오는 값을 웹에서 들어오는 값을 처리할 수 있게 함수 처리를 해주셔야 합니다.

 

 

여기까지 수정 파트는 끝났습니다.

이어서 삭제 기능을 추가해 보겠습니다.

view.jsp에서 Controller로 요청 보낸 delete.do 처리를 해줍니다.

 


Controller

 

삭제 기능도 수정과 동일하게 해당 버튼 클릭 시 목록 페이지로 이동할 수 있게 페이지 처리를 해줍니다.

 

 

패턴에 맞춰서 DAO에서 delete(num) 생성해 줘서 mapper로 요청을 보내줍니다.


DAO

 

공통적으로 웹 페이지에서 회원 정보, 게시물 등 등록된 데이터들은 삭제를 했다고 해서 데이터가 완전히 삭제되는 건 아닙니다. 

 

데이터는 그대로 보존시키고 형식 상 삭제된 게시물이라고 안내를 해주는데, 이럴 땐 delete() 메서드를 사용하는 게 아니라 update() 메서드를 사용해주셔야 합니다.

 

 

위 코드에 나온 것처럼 delete 가 아닌, updatemepper 요청을 보냅니다.


board.xml(mapper)

 

처음에 테이블 생성할 때 필드 추가를 했습니다.

 

 

y는 화면에 표시할 수 있게 해 주고 n은 화면에서 안 보이게 설정했기 때문에 show 값을 n으로 설정해 주고 해당 게시물은 함수 처리를 해주시면 됩니다.

 

 

마지막으로 목록 페이지에서 수정을 해줘야 하는데, 게시물이 삭제가 되면 해당 게시물 자리에 삭제된 게시물이라고 안내를 해줄 수 있게 수정합니다.

 


list.jsp

 


결과 출력

 

< 상세 화면 >

 

 

< 수정 >

 

 

< 목록 >

 

 

 

< 삭제 >

 

 

< 삭제 메시지 호출 >

 

 

< 목록 >

 

 

 

 


마치며

 

오늘까지 수정/삭제 기능 구현을 했습니다.

다음 포스팅은 답글 구현을 해보겠습니다.

 

 

 

728x90