기록장

스프링부트 게시판 만들기 (12) - 글 수정 기능 만들기 본문

인턴 기록/게시판?블로그?만들기

스프링부트 게시판 만들기 (12) - 글 수정 기능 만들기

210_yy 2021. 5. 3. 12:36

글을 작성한 사람이 나중에 글을 수정할 수도 있어야 한다. 삭제 기능과 똑같이 글을 작성한 사람이 수정할 수 있어야 하기때문에 삭제 기능때 만든 비밀번호 check.하는 것을 재사용하도록 할것이다. 

 

글 수정 기능을 요약하자면 대략 이렇다 

 

1. 글 상세 페이지에서 수정 버튼을 클릭

2. 비밀번호 확인 

3.1 비밀번호가 일치하지 않으면 alert 메시지 띄우기

3.2 비밀번호가 일치하면 내용을 작성할 수 있는 textarea와 수정버튼 활성화

4. 수정버튼을 눌렀을 때 db업데이트하고 글 상세 페이지로 이동 

 

 

필요한것은

 - 수정을 위한 페이지 생성

 - 페이지와 controller mapping

 - service단, dao단 만들기

 - 쿼리문 작성 

 

들이다.

 

시작해보자 ^_^

 

1.  수정 페이지 만들기 revise.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layout/default_layout">

<head>
<meta charset="UTF-8">
<title>글삭제</title>
</head>
<body>
	<div layout:fragment="content">
		<div>
			<form name="revise-form" action="/board/revise" autocomplete="off" method="post">  
				<div>
					<input type="hidden" name="idx" th:value="${idx}">
					<br />
					글을 작성할 때 입력했던 비밀번호를 적어주세요
					<input type="password" id="password" name="password" maxlength='6'  value="" placeholder="비밀번호">
					<input type="button" class="btn btn-outline-primary mr-7"onclick="checkPassword()" value="비밀번호 확인">
					<br />
					<textarea class="form-control" style="height:200%; width:100%;" maxlength='1000' id="content" name ="content" disabled></textarea>
					<input type="submit" id="submiBtn"  class="btn btn-outline-primary mr-2" value="수정" disabled>			
					<a th:href="@{'/board/detail?idx='+${idx}}"><input type="button" class="btn btn-outline-primary mr-2" value="취소"></input></a>	
				</div>
			</form>
			
		</div>
	</div>
</body>
<th:block layout:fragment="script">
  	<script th:src="@{/js/revise.js}" type="text/javascript"></script>
</th:block>
</html>

 

이 페이지는 글 상세 페이지에서 수정 버튼을 눌렀을 때 이동하도록 코드를 작성했다.

 

해당 페이지를 크롬에서 띄워보면 

 

잘 만들어진 것을 확인할 수 있다. 글을 작성할 수 있는 textarea 부분과 수정버튼은 아직 비밀번호가 일치하다는 걸 확인하지 못했기 때문에 비활성화되어있다. 

 

 

2. 수정 페이지와 controller mapping (페이지 이동을 위함) 

 

글 상세 목록 페이지에서 수정 버튼을 누르면 '/board/revise?idx=' + {idx}' 로 이동한다. 

idx를 parameter로 받으면 revise.html 에 해당 idx를 input hidden의 값으로 넣어준다. (비밀번호 check할 때 idx가 필요) 

 

 

3.  실제 수정을 위한 controller mapping (수정 버튼을 눌렀을 때 form 내용을 받는 서버)

 

수정버튼을 눌렀을 때 textarea의 내용과 해당 글의 idx를 받을 서버가 필요하다. 

나는 그 서버를 '/board/revise'로 결정했고 post 방식으로 데이터를 전송할 것이다.

 

idx와 content를 parameter로 받아서 새로운 boarddto에 set해준다. 그리고 content 수정을 위한 service단 함수를 호출한다. 내용을 업데이트한 후에는 원래 상세 페이지로 이동하기 위해 redirect:/board/detail?idx={idx}를 return한다.

 

 

4. service단, dao단 만들기

 

 - controller에서 호출한 service단

 

 dao단 함수를 호출해준다

 

 - dao단 

xml 파일의 쿼리문을 호출해준다.

 

 

 

5. xml파일에 쿼리문 생성

 

사용자가 수정하기 위해 입력한 content내용과 수정 일자를 업데이트 해야한다.

 

 

 

6. 수정해보기 

 

비밀번호를 입력했을 때 활성화 된 textarea칸에 글을 입력했다. 수정 버튼을 눌러보자 

 

 

바뀐 내용으로 잘 나오는것을 볼 수 있다.

 

 

db에도 바뀐 content와 date가 잘 업데이트 되었다.

 

 

 

다음 글에서는 검색기능을 만들어볼 것이다 ~~!

반응형

'인턴 기록 > 게시판?블로그?만들기' 카테고리의 다른 글

스프링부트 게시판 만들기 (13) - 검색 기능 만들기  (1) 2021.05.03
스프링부트 게시판 만들기 (11) - 댓글 기능 만들기  (0) 2021.04.29
스프링부트 게시판 만들기 (9) - 글 삭제 기능 구현 中 비밀번호 체크 로직  (0) 2021.04.28
스프링부트 게시판 만들기 (10) - 글 삭제 기능 구현 中 실제 삭제 로직  (0) 2021.04.27
스프링부트 게시판 만들기 (8) - 조회수 증가 기능 추가  (0) 2021.04.27
'인턴 기록/게시판?블로그?만들기' Related Articles more
Comments