관리 메뉴

DeseoDeSeo

[Spring] 해당 글 작성자만 수정, 삭제 가능 기능 본문

spring

[Spring] 해당 글 작성자만 수정, 삭제 가능 기능

deseodeseo 2023. 9. 21. 17:50
MySQL.sql
➜ 기존 테이블 drop하고 MEMID를 추가한 테이블 생

 

CREATE TABLE BOARD(
	
	IDX INT NOT NULL AUTO_INCREMENT,
	MEMID VARCHAR(20) NOT NULL,
	TITLE VARCHAR(100) NOT NULL,
	CONTENT VARCHAR(2000) NOT NULL,
	WRITER VARCHAR(300) NOT NULL,
	INDATE DATETIME DEFAULT NOW(),
	COUNT INT DEFAULT 0,
	PRIMARY KEY(IDX)
	
);
BoardMapper.xml
: 글쓰기 작성하는 sql문
<insert id ="boardInsert" parameterType="kr.spring.entity.Board">
		INSERT INTO BOARD(MEMID,TITLE, CONTENT, WRITER) VALUES(#{memID},#{title},#{content},#{writer})
	</insert>
Board.java
private String memID;// 작성했을 당시 로그인 한 사람의 아이디
main.jsp
<body>
	<div class="container">
		<jsp:include page="../common/header.jsp"></jsp:include>
		<h2>Spring MVC03</h2>
		<div class="panel panel-default">
			<div class="panel-heading">Board</div>
			<div class="panel-body">
				<table id="boardList" class="table table-bordered table-hover">
				<!-- tr class = success , info , danger, warning, active -->
					<tr class="danger">  
						<td>번호</td>
						<td>제목</td>
						<td>작성자</td>
						<td>작성일</td>
						<td>조회수</td>
					</tr>	
					<tbody id="view">
						<!-- 비동기 방식으로 가져온 게시글을 나오게 할 부분.  -->
						
					</tbody>	
					<c:if test="${not empty mvo}">  <!-- 로그인을 했는지 안 했는지. -->
					<tr>
						<td colspan="5">
							<button onclick="goForm()" class="btn btn-primary btn-sm"> 글쓰기 </button>
						</td>
					</tr>	
					</c:if>	
				</table>

t body 태그 끝나고 로그인의 유무에 따라서 글쓰기 버튼이 보인다.

<input type="hidden" name="memID" value="${mvo.memID}">

세션인 mvo에 id를 hidden으로 해서 보낸다.

( input태그에서 name 는 서버로 전달되는 이름 값, value는 서버로 전달되는 값.

<tr>
	  <td>작성자</td>
	  <td><input readonly="readonly" value="${mvo.memName}" type="text"  name ="writer" class ="form-control"></td>
</tr>

작성할 떄, 작성자의 이름은 바꿀 수 없도록 readonly로 설정한다.

 

/수정, 삭제 화면
			//조건 문안에서 EL식을 사용하고 싶다면 문자열로 감싸줘야한다.
			if("${mvo.memID}" == obj.memID){
				listHtml += "<br>";
				listHtml += "<span id='ub"+ obj.idx +"'>";
				listHtml +="<button onclick='goUpdateForm("+obj.idx+ ")' class='btn btn-sm btn-success'>수정화면</button></span> &nbsp;" // non break space 
				listHtml +="<button onclick='goDelete("+ obj.idx +")' class='btn btn-sm btn-warning'>삭제</button> &nbsp;"
				listHtml += "</td>";
				listHtml +="</tr>";
			}else{
				listHtml += "<br>";
				listHtml += "<span id='ub"+ obj.idx +"'>";
				listHtml +="<button disabled onclick='goUpdateForm("+obj.idx+ ")' class='btn btn-sm btn-success'>수정화면</button></span> &nbsp;" // non break space 
				listHtml +="<button disabled onclick='goDelete("+ obj.idx +")' class='btn btn-sm btn-warning'>삭제</button> &nbsp;"
				/* button에 disabled 넣으면 버튼은 나오지만 작동하지 않는다. */
				listHtml += "</td>";
				listHtml +="</tr>";
			}
			listHtml += "</td>";
			listHtml +="</tr>";
		});

 

function makeView에서  작성자 id와 현재 세션에 있는 id가 같다면 수정화면 , 삭제가 작동되도록 한다.

 

updateForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix ="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@ taglib prefix ="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="contextPath" value ="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<jsp:include page="../common/header.jsp"></jsp:include>
		<h2>Spring MVC03</h2>
		<div class="panel panel-default">
			<div class="panel-heading">Board</div>
			<div class="panel-body">
				<form action="${contextPath}/update.do" method="post">
					<input type="hidden" name="memPassword" id="memPassword" value="">
					<input type="hidden" name="memID" id="memID" value="${mvo.memID}">
					<input type="hidden" name="memProfile" id="memProfile" value="${mvo.memProfile}">
					<!-- 애초에 hidden 으로 memProfile값도 같이 보냄. -->
					<table style ="text-align:center; border: 1px solid #dddddd " class="table table-borded">
						<tr>
						 	<td style="width:110px; vertical-align:middle;">아이디</td>
						 	<td>${mvo.memID}</td>
						</tr>
						<tr>
						 	<td style="width:110px; vertical-align:middle;">비밀번호</td>
						 	<td colspan="2"><input type="password" onkeyup="passwordCheck()" name ="memPassword1" id="memPassword1" class="form-control" maxlength="20" placeholder="비밀번호를 입력하세요."></td>
						</tr>
						<tr>
						 	<td style="width:110px; vertical-align:middle;">비밀번호 확인</td>
						 	<td colspan="2"><input type="password" onkeyup="passwordCheck()"  name ="memPassword2" id="memPassword2" class="form-control" maxlength="20" placeholder="비밀번호를 확인하세요."></td>
						</tr>
						<tr>
						 	<td style="width:110px; vertical-align:middle;">사용자 이름</td>
						 	<td colspan="2"><input value="${mvo.memName}" type="text" id="memName" name ="memName" class="form-control" maxlength="20" placeholder="이름을 입력하세요."></td>
						</tr>
						<tr>
						 	<td style="width:110px; vertical-align:middle;">나이</td>
						 	<td colspan="2"><input required="required" value="${mvo.memAge}"type="number" name ="memAge" id="memAge" class="form-control" maxlength="20" placeholder="나이를 입력하세요."></td>
						</tr>
						<tr>
							<td style="width:110px; vertical-align:middle;">성별</td>
							<td colspan="2">
							<div class="form-group" style ="text-align:center; margin:0 auto;"> 
								
								
								<div class="btn-group" data-toggle="buttons">
								
								<c:if test="${mvo.memGender eq '남자' }">
										<label class="btn btn-primary active">
												<input type="radio" id="memGender" name="memGender" autocomplete="off" value="남자" checked="checked"> 남자
											</label>
											<label class="btn btn-primary">
												<input type="radio" id="memGender" name="memGender" autocomplete="off" value="여자" > 여자
											</label>
									
								</c:if>
								
								<c:if test="${mvo.memGender eq '여자' }">
										<label class="btn btn-primary">
												<input type="radio" id="memGender" name="memGender" autocomplete="off" value="남자" > 남자
											</label>
											<label class="btn btn-primary active">
												<input type="radio" id="memGender" name="memGender" autocomplete="off" value="여자" checked="checked" > 여자
											</label>
									
								</c:if>
								
								
							
								</div>
								
								
							</div>
							
							</td>
						</tr> <!-- 성별 끝 -->
						<tr>
						 	<td style="width:110px; vertical-align:middle;">이메일</td>
						 	<td colspan="2"><input value="${mvo.memEmail}" type="email" name ="memEmail" id="memEmail"class="form-control" maxlength="50" placeholder="이메일을 입력하세요."></td>
						</tr>
						<tr>
							<td colspan ="3">
							<span id="passMessage" style="color:red;"></span>
								<input type="submit" class="btn btn-primary btn-sm pull-right" value="회원정보 수정">
								<input type="reset" class="btn btn-warning btn-sm pull-right" value="취소">
							
							</td>
						</tr>
						
					</table>
				</form>
			</div>
			
			<div class="panel-footer">스프링게시판-뇽뇽이</div>
		</div>
	</div>
	
	
	<script type="text/javascript">
		
		function passwordCheck(){
			var memPassword1 = $("#memPassword1").val();
			var memPassword2 = $("#memPassword2").val();
			
			if(memPassword1 != memPassword2){
				$("#passMessage").html("비밀번호가 서로 일치하지 않습니다.");
			} else{
				/* pw1과 pw2의 값이 같을 때만 pw가 넘어감. */
				$("#memPassword").val(memPassword1);
				$("#passMessage").html(" ");
			}
			
		}
		//html을 다 로딩할때 까지 기다리겠다.
		$(document).ready(function(){
			if(${not empty msgType}){
				if(${msgType eq "실패메세지"}){
					$("#messageType").attr("class","modal-content panel-warning");
				}
				$("#myMessage").modal("show");
			}
		});
		
		
	</script>

</body>
</html>