기록장

스프링부트 게시판 만들기 (9) - 글 삭제 기능 구현 中 비밀번호 체크 로직 본문

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

스프링부트 게시판 만들기 (9) - 글 삭제 기능 구현 中 비밀번호 체크 로직

210_yy 2021. 4. 28. 13:06

이제 글을 삭제하는 기능을 구현해볼 것이다.

 

내가 머릿속에 그려놓은 삭제 기능은 

더보기란 클릭 !! 

더보기

1. 먼저 삭제 버튼을 클릭

2. 그럼 비밀번호를 입력하는 페이지가 뜨고

3. 먼저 해당 글을 작성했을 때의 비밀번호를 입력하고 오른쪽 버튼을 클릭하면 비밀번호가 맞는지 check를 한다.

3-1. 비밀번호가 틀린 경우 alert메세지가 뜨고 글 목록 페이지로 이동

3-2. 비밀번호가 맞으면 삭제 버튼이 활성화가 되고 누를 수 있다.

4. 삭제 버튼을 클릭

5. 글이 삭제가 되고 글 목록 페이지롱 이동

 

1. 먼저 삭제 버튼을 클릭

2. 그럼 비밀번호를 입력하는 페이지가 뜨고

3. 먼저 해당 글을 작성했을 때의 비밀번호를 입력하고 오른쪽 버튼을 클릭하면 비밀번호가 맞는지 check를 한다.

3-1. 비밀번호가 틀린 경우 alert메세지가 뜬다.

3-2. 비밀번호가 맞으면 삭제 버튼이 활성화가 되고 누를 수 있다.

4. 삭제 버튼을 클릭

5. 글이 삭제가 되고 글 목록 페이지롱 이동

 

대략 이렇다 

 

 

이렇게 구현하기 위해서 할 일들을 정리해보면

1. 비밀번호 check하는 로직 만들기 (controller, service, dao,  xml 순으로)

2. 글을 삭제하는 로직 만들기 (controller, service, dao,  xml 순으로)

 

을 해야한다..

 

이번 글에서는 비밀번호를 check하는 로직을 먼저 만들어보도록 하자.

 

1. delete.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="delete-form" action="/board/delete" 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 />
					<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/delete.js}" type="text/javascript"></script>
</th:block>
</html>

 

여기서 주의!!!!!

나는 처음에 "삭제" 버튼을 disabled로 설정하고, "비밀번호 확인" 버튼을 <button> 태그로 만들었다. 그러고 나서 "비밀번호 확인" 버튼을 누르니깐 <form>태그 안에 있는 데이터들이 "/board/delete" 서버로 전송이 되어 거기와 mapping된 함수가 실행이 되는 것이었다.. 처음엔 뭐가 문제인지 잘 몰랐는데 알고보니

 

<form>태그 안에 있는 <button>태그는 기본적으로 submit 이라고 한다. 그래서 저 서버로 submit되는 것이었음. 내 목적은 그게 아니고 submit하기 전에 check하는 함수를 실행시키는 것이었다. 

 

그렇게 하기 위해서는 <button>태그를 <input type="button">으로 바꾸어주어야 했다

 

 

이 페이지를 띄워보면 

 

요롷게 생겼다 (삭제 버튼이 비활성화 된게 보이시죠????, 이거는 비밀번호를 검사했을 때 일치하면 삭제 버튼이 활성화가 되어 삭제할 수 있게 만들거임!!!)

 

2. checkPassword() 함수 작성

 

"비밀번호 확인" 버튼이 클릭되었을 때 실행되는 함수이다. 

이 함수가 실행이 되면 해당 글의 idx와 사용자가 일치하는지 확인하기 위해 입력한 비밀번호를 파라미터로 보내 해당 글의 비밀번호를 답으로 주는 ajax 요청을 하게 된다.  

  일치할 경우 : 아래의 "삭제"버튼을 활성화

  일치하지 않을 경우 : 비밀번호가 일치하지 않는다는 alert 메시지를 띄우기!

 

function checkPassword(){	
	var idx = $('input[name=idx]').val();
	var password = $('input[name=password]').val();

	$.ajax({
		type: 'GET',
		url: '/board/delete/getPassword',
		data : {idx,password},
		success: function(result) {
			if(result.password == password){
				$('#submiBtn').attr('disabled',false);
			}
			else{
				alert("비밀번호가 일치하지않습니다");
			}
		}
		,
		error: function(result) {
		},
		complete: function() {
		}

	})
}

 

3. ajax 요청을 받는 서버 url을 controller와 mapping

 

@GetMapping("/board/delete/getPassword")
@ResponseBody
private BoardDto getPassword(@RequestParam("idx") int idx, @RequestParam("password") String password, Model model) throws Exception{	
	BoardDto boardDto = new BoardDto();
	boardDto.setIdx(idx);
	BoardDto result = boardservice.getContentByidx(boardDto);
	return result;	
}

 

 

4. service 단, dao, xml 생략 

 

url과 mapping된 함수가 boardservice.getContentByidx(boardDto)를 실행시키는데 이것은 상세 페이지 조회 기능을 만들 때 생성한 함수이다. BoardDto의 idx를 파라미터로 받은 idx로 set하고 해당 dto를 파라미터로 보내면 idx가 일치하는 데이터의 모든 컬럼을 받아온다. 우리는 그 모든 컬럼 중에서 password 컬럼만을 사용하는 것이다 

 

developeryoung.tistory.com/32

 

스프링부트 게시판 만들기 (6) - 글 클릭했을 때 해당 content 보여주기

1. boarddetail.html 생성 210's blog Leave a Comment: Submit 기본 layout에서 content부분만 수정해준다 db에서 가져온 데이터 중에서 제목(title)과 내용(content)만 보여줄 것이다. th:objec..

developeryoung.tistory.com

이 내용은 여기를 참고 하면 된다 

 

5. 실제로 비밀번호 check 해보기 

 

 

 

위의 그림에서 번호가 3번인 글을 삭제하기 위해 비밀번호를 검사해보도록 하자.

해당 글을 작성했을 때 입력했던 비밀번호는 12345 이다.

 

 

 

 

 

1234를 입력하고 비밀번호 확인 버튼을 누른후 결과

---->

 

일치하지 않는다는 경고 메시지가 뜬다 

 

 

그럼 12345를 입력해본 결과는??

---->

삭제 버튼이 활성화 된 것을 볼 수 있다 ~~ 

 

반응형

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

스프링부트 게시판 만들기 (12) - 글 수정 기능 만들기  (0) 2021.05.03
스프링부트 게시판 만들기 (11) - 댓글 기능 만들기  (0) 2021.04.29
스프링부트 게시판 만들기 (10) - 글 삭제 기능 구현 中 실제 삭제 로직  (0) 2021.04.27
스프링부트 게시판 만들기 (8) - 조회수 증가 기능 추가  (0) 2021.04.27
스프링부트 게시판 만들기 (7) - 글 작성 로직 생성  (0) 2021.04.27
'인턴 기록/게시판?블로그?만들기' Related Articles more
Comments