[jQuery] 글 수정

728x90

miniProject _jQuery

글 수정 하는 법 흐름 정리 하기

/table>
  		<input type="button" value="목록" onclick="location.href='/miniProject_jQuery/board/boardList.do?pg=${pg}'">
 	
 	
 	
 		<span id="boardViewSpan"> 
 		 	<input type="button" value="글 수정" id="boardUpdateFormBtn">
 	
 		 	<input type="button" value="글 삭제" id="boardDeleteBtn">
 		</span>

먼저 boardview.jsp 파일에서 글 수정 버튼을 생성

여기서 주의 깊게 봐야 할 점 id="boardUpdateFormBtn"

그리고 다음 boardview.js 파일로 이동한다.

//글 수정 폼 
$('#boardUpdateFormBtn').click(function(){
	$('#boardViewForm').attr('action','/miniProject_jQuery/board/boardUpdateForm.do');
	$('#boardViewForm').submit(); //submit은 name 속성만 가져감 	그래서 seq랑 pg만 가져감
	
});

boardview.jsp 파일에서 쓴 id를 그대로 글 수정 폼으로 넣고 click(function(){

이벤트 만든다.

그 다음 attr 속성을 넣어 눌렀을 때

'/miniProject_jQuery/board/boardUpdateForm.do'

이 부분으로 이동할 수 있게 한다.

그런데 아직 boardUpdateForm.do 이 부분이 없으므로 따로 만들어줘야 함

그래서 command.properties 파일로 가서

/board/boardUpdateForm.do=board.service.BoardUpdateFormService

이걸 추가해주고 src에서 board.service로 가서 BoardUpdateFormService.java class파일을 만들어준다.

BoardUpdateFormService.java 파일에서 데이터와 응답을 받아와야 함으로

요청 객체에서 데이터를 가져와 요청 객체의 속성으로 설정하는 것이 전부이므로 간단합니다

첫번째 코드 샘플은 UI 측면을 처리함

package board.service;

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

import com.control.CommandProcess;

public class BoardUpdateFormService implements CommandProcess {

	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) {
		//데이터 
		String seq = request.getParameter("seq");
		String pg = request.getParameter("pg");
		
		//응답
		request.setAttribute("seq", seq);
		request.setAttribute("pg", pg);
		request.setAttribute("display","/board/boardUpdateForm.jsp");
		
		return "/index.jsp";
	}

}

board/ boardUpdateForm.jsp 파일을 따로 만들어야 한다. 이 파일은 기존의 boardWriteForm과 내용을 동일하게 하면 된다. 그 중 일부 내용만 바꿔주면 됨

form id="boardUpdateForm"

boardUpdateForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#boardUpdateForm div {   
	font-size :8pt;
	color:red;
	font-weight:bold;
}
</style>
</head>
<body>
<form id="boardUpdateForm">  <!-- action="/miniProject_jQuery/board/boardWrite.do" -->
	<input type="hidden" name="seq" value="${seq }">


<h3>글수정</h3>
  <table border="1" cellpadding="5" cellspacing="0">
 <tr>
  	<th>제목</th>
  	<td>
  	 <input type="text" name="subject" id="subject" size="50" placeholder="제목 입력">
  	 <div id="subjectDiv"></div>
  	</td>
  </tr>


 <tr>
  	<th>내용</th>
  	<td>
  	  <textarea name="content" id="content" cols="50" rows="15"></textarea>
  	<div id="contentDiv"></div>
  	</td>
  </tr>
  
  <tr>
  	<td colspan="2" align="center">
  	 <input type="button" value="글 수정" id="boardUpdateFormBtn">
  	 <input type="reset" value="다시작성" onclick="location.reload()">
  	 
  	</td>
  </tr>
</table>
<br><br>
</form>


<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
	$.ajax({
		type: 'post',
		url: '/miniProject_jQuery/board/boardUpdateForm.do',
		data: 'seq=' + ${seq},
		dataType: 'json',
		success: function(data){
			alert(JSON.stringify(data));
			
				$('#subject').val(data.subject);
				$('#content').val(data.content);
			},
			 error: function(err) {
		           console.log(err); // error msg 요청	        	
			}
		});
	
	
	//글수정
	 $('#boardUpdateFormBtn').click(function(){
	$('#subjectDiv').empty(); //document.getElementById("subjectDiv").innerText == "";
	$('#contentDiv').empty(); //document.getElementById("contentDiv").innerText == "";
	
	
	if($('#subject').val() == '') { //if(document.getElementById("subject").value == ""){
	 $('#subjectDiv').text('제목 입력');
	 $('#subjct').focus();          //document.getElementById("subject").focus();
	}
	
	else if($('#content').val() == '') {  //else if (document.getElementById("content").value == ""){
		$('#contentDiv').text('내용 입력');  //document.getElementById("contentDiv").innerText = "내용 입력";
		$('#content').focus();	
	}
	
	else {
		$.ajax({
			type: 'post',
			
			url: '/miniProject_jQuery/board/boardUpdate.do',
			
			//data: 'subject=' + $('#subject').val() +'&content=' +$('#content').val(),
			data: $('#boardUpdateForm').serialize(), //seq, subject, content
			
			success: function(){
				alert("글 수정 완료");
				location.href='/miniProject_jQuery/board/boardList.do?pg=${requestScope.pg}';
			
			},
	        error: function(err) {
	           console.log(err); // error msg 요청
	        }	
		});
	}
	}); 

	});

</script>
</body>
</html>

두 파일의 차이점 #1.

boardWrireForm.jsp

  <tr>
  	<td colspan="2" align="center">
  	 <input type="button" value="글작성" id="checkBWBtn">
  	 <input type="reset" value="다시작성">
  	 
  	</td>
  </tr>

boardUpdateForm.jsp

  <tr>
  	<td colspan="2" align="center">
  	 <input type="button" value="글 수정" id="boardUpdateFormBtn">
  	 <input type="reset" value="다시작성" onclick="location.reload()">
  	 
  	</td>
  </tr>

비교해보면 id 를 바꿔보고

onclick="location.reload()"는 update에 쓰이는 이유가 글 수정이기 때문에 다시 작성을 눌렀을 때 기존에 작성했던 내용을

그대로 돌려놔야 하기 때문에 쓰는 것임

두 파일의 차이점 #2.

boardUpdateForm.jsp

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
	$.ajax({
		type: 'post',
		url: '/miniProject_jQuery/board/getBoard.do',
		data: 'seq=' + ${seq},
		dataType: 'json',
		success: function(data){
			alert(JSON.stringify(data));
			
				$('#subject').val(data.subject);
				$('#content').val(data.content);
			},
			 error: function(err) {
		           console.log(err); // error msg 요청	        	
			}
		});

여기서 보면 이 a.jax의 역할이 뭔지 잘 몰랐음... 더군다나 alert도 안 떴는데 안 뜨는지도 몰랐음......

일단 이 자바스크립의 내용을 정리해보자면

이건 getBoard.do를 통해 가져오는 것인데 글 수정에서 수정하기 전 기존의 글을 불러오는 코드이다.

이 스크립트는 먼저 jQuery를 사용하여 AJAX 요청을 서버로 보내 게시판을 업데이트해야하는 데이터를 검색합니다.

데이터는 json 형식으로 전송되며 응답으로 받아들여지고

JSON.stringify() 메소드를 사용하여 구문 분석되어 alert를 통해 경고 창에 표시된다.

*****JSON.stringify() 메소드는 자바스크립트 객체나 배열을 JSON 문자열로 변환하는 메소드입니다. 이 메소드는 주어진 객체를 JSON 형식으로 직렬화하고 이를 문자열로 반환합니다.

여튼 중요한건 이게 아님

subject과 content를 받은 다음

//글수정
	 $('#boardUpdateFormBtn').click(function(){
	$('#subjectDiv').empty(); //document.getElementById("subjectDiv").innerText == "";
	$('#contentDiv').empty(); //document.getElementById("contentDiv").innerText == "";
	
	
	if($('#subject').val() == '') { //if(document.getElementById("subject").value == ""){
	 $('#subjectDiv').text('제목 입력');
	 $('#subjct').focus();          //document.getElementById("subject").focus();
	}
	
	else if($('#content').val() == '') {  //else if (document.getElementById("content").value == ""){
		$('#contentDiv').text('내용 입력');  //document.getElementById("contentDiv").innerText = "내용 입력";
		$('#content').focus();	
	}
	
	else {
		$.ajax({
			type: 'post',
			
			url: '/miniProject_jQuery/board/boardUpdate.do',
			
			//data: 'subject=' + $('#subject').val() +'&content=' +$('#content').val(),
			data: $('#boardUpdateForm').serialize(), //seq, subject, content
			
			success: function(){
				alert("글 수정 완료");
				location.href='/miniProject_jQuery/board/boardList.do?pg=${requestScope.pg}';
			
			},
	        error: function(err) {
	           console.log(err); // error msg 요청
	        }	
		});
	}
	}); 

	});

그런 다음, 스크립트는 "boardUpdateFormBtn" 버튼에 클릭 이벤트 리스너를 추가합니다.

버튼을 클릭하면 먼저 오류 메시지 div를 지우고 "subject" 및 "content" 필드가 비어 있는지 확인하고 비어 있으면 오류 메시지를 표시합니다. 필드가 비어 있지 않으면, jQuery의 serialize() 메소드를 사용하여 양식 필드를 직렬화하여 서버로 게시판 데이터를 업데이트하는 AJAX 요청을 보냅니다.

업데이트가 성공하면, 게시판이 업데이트되었음을 나타내는 메시지가 포함된 경고 상자가 표시됩니다.

이제 여기서 boardUpdatd.do 가 만들어졌기 때문에 이걸 command properties를 통해 작성하러 가야하는데

/board/boardUpdate.do=board.service.BoardUpdateService

추가해주면 됨

board.service로 가서 BoardUpdateService class 파일로 만들어주는데

package board.service;

import java.util.HashMap;
import java.util.Map;

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

import com.control.CommandProcess;

import board.dao.BoardDAO;

public class BoardUpdateService implements CommandProcess {

	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) {

		//데이터
		String seq = request.getParameter("seq");
		String subject = request.getParameter("subject");
		String content = request.getParameter("content");
				
		Map<String, String> map = new HashMap <String, String>();
		map.put("seq", seq);
		map.put("subject", subject);
		map.put("content", content);
	
		//DB
		BoardDAO boardDAO = BoardDAO.getInstance();
		boardDAO.boardUpdate(map);
		
		
		// 응답	
		return "/board/boardUpdate.jsp";
	
		
	}

}

솔직히 나는 BoardUpdateFormService와 BoardUpdateService의 차이가 정확하게 뭔지 잘 모르겠어서.....

챗GPT한테 물어봤고... 해답을 얻었다.

두 코드 샘플을 비교해보면, 게시판 애플리케이션에서 서로 다른 역할을 수행하는 것을 알 수 있습니다.

BoardUpdateFormService첫번째 코드는 게시글을 수정하기 위한 폼을 표시하는 요청을 처리하는 서비스 클래스입니다. 요청 객체에서 데이터를 가져오고, 해당 데이터를 요청 객체의 속성으로 설정한 후, 응답을 표시할 JSP 파일의 이름을 반환합니다.

BoardUpdateService두번째 코드는 데이터베이스에서 게시글을 수정하기 위한 요청을 처리하는 서비스 클래스입니다.

요청 객체에서 데이터를 가져와 Map 객체로 묶은 다음, 해당 게시글을 데이터베이스에서 수정합니다. 그리고 응답을 표시할 JSP 파일의 이름을 반환합니다.

코드 구조적으로 첫번째 코드 샘플은 요청 객체에서 데이터를 가져와 요청 객체의 속성으로 설정하는 것이 전부이므로 더 간단합니다. 반면, 두번째 코드 샘플은 데이터베이스 접근에 따른 DAO 객체 사용 등 더 복잡한 코드가 포함되어 있습니다.

전반적으로, 두 코드 샘플은 게시판 애플리케이션에서 다른 측면을 처리하기 위해 필요합니다. 첫번째 코드 샘플은 UI 측면을 처리하고, 두번째 코드 샘플은 데이터 저장 측면을 처리합니다

728x90

'Java' 카테고리의 다른 글

[JAVA] 정수의 최대값, 최소값 출력 (0)	2024.02.19
[Java] chapter2. 변수(varibale) (0)	2023.10.26
[JAVA] Java의 정석 기초/ 변수 (1)	2023.10.23
[java] boardList.js / boardList.jsp 로그인 여부 (0)	2023.03.31
JQuery board글쓰기 기능 (0)	2023.03.28

INDUSTRY BABY

[jQuery] 글 수정

'Java' 카테고리의 다른 글

티스토리툴바

[jQuery] 글 수정

'Java' 카테고리의 다른 글

관련글

티스토리툴바