회원정보 수정

Coding/spring

회원정보 수정

찡콩찡 2022. 9. 16. 16:08

지난시간 리스트 띄우기 한 부분!

아이디를 클릭 시, 회원정보가 보여지고 작성된 정보 부분을 수정 해야하므로 memId값에 a링크(수정페이지를 가야하므로 edit.do)를 걸어준다.

링크 클릭시 보여지는 화면은 해당 아이디의 내용 페이지여야 하므로 memid 값에 파라미터 값을 붙여서 이동할 수 있겠끔 list.jsp를 작성한다.

edit.do?memId=${vo.memId}

list.jsp 완성본

<div class="container">
 <div class="row">
    <div class="col">
		<h1>회원목록</h1>
		<a href="${pageContext.request.contextPath}/member/add.do"><button type="button" class="btn btn-primary"><i class="bi-file-plus-fill"></i>회원추가</button></a>
		<table class="table">
			<thead>
				<tr><th>아이디</th><th>이름</th><th>포인트</th></tr>
			</thead>
			<tbody>
				<c:forEach var="vo" items="${memList}">		 	
			 		<tr>
						<td><a href="${pageContext.request.contextPath}/member/edit.do?memId=${vo.memId}"><c:out value="${vo.memId}"/></a></td>
						<td><c:out value="${vo.memName}"/></td>
						<td>${vo.memPoint}</td>
					</tr>
				</c:forEach>			
			</tbody>
		</table>
   </div>
 </div>	
</div>

요청을 보낸걸 controller가 실행하게끔 한다.

edit으로 요청보낸걸 처리할 Method를 Controller에서 만들어준다.

@RequestMapping(path = "edit.do", method = RequestMethod.GET)
	public String editform(MemberVo vo) {	
		//db에서 회원정보를 꺼내서 링크에 들어갔을 때 회원 정보가 떠야함 jsp만 띄우면 안됨
		//파라미터에 담겨있는 vo를 담아서 변수 mvo에 저장해준다.
		MemberVo mvo = memberService.select(vo);
		
		return "member/edit";
	}

service를 작성해준다.

package com.exam.myapp.member;

import java.util.List;


public interface MemberService {
	.     .     .
	public MemberVo select(MemberVo vo);
}

구현체 serviceimpl 에도 Method를 추가한다. member dao에 일을 시키는 거니까

@Override
	public MemberVo select(MemberVo vo) {	
		return memberDao.select(vo);
	}

MemberDao에서도 메서드 추가

package com.exam.myapp.member;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;


@Mapper
public interface MemberDao {
	.	.	.

	public MemberVo select(MemberVo vo);
}

Dao랑 연결되어 실행될 sql문을 등록하러 가자

select id 값은 메소드에 작성된 이름과 같아야 한다. resultType에는 조회한 결과를 담은 MemberVo를 작성한다.

클릭한 회원의 아이디 값이 실행되어야 하니까 WHERE절을 추가한다.

 <!-- 조회한 결과는 멤버브이오에 담아야 해  -->

   <select id="select" resultType="MemberVo">
   select mem_id, mem_name, mem_point from MEMBER 
   WHERE mem_id = #{memId}
	</select>

다음으로 회원으로 보여지는 JSP로 가야하는데 그전에

Controller에 mvo변수에 담기는 값을 model에 담아 jsp 뿌려주려고 한다.

@RequestMapping(path = "edit.do", method = RequestMethod.GET)
	public String editform(MemberVo vo, Model model) {	
		//db에서 회원정보를 꺼내서 링크에 들어갔을 때 회원 정보가 떠야함 jsp만 띄우면 안됨
		//파라미터에 담겨있는 vo를 담아서 변수 mvo에 저장해준다.
		MemberVo mvo = memberService.select(vo);
		model.addAttribute("memVo",mvo);
		
		return "member/edit";
	}
    
    jsp에서 쓸때 ${memVo} 이라는 이름으로 사용하면 된다.

member 폴더 밑에 edit.jsp를 만들어준다.

add.jsp와 비슷한 틀이 필요하므로 복사해서 붙여준다. 수정해야할 부분은 아래와 같다.

회원 목록 아이디에 링크가 걸려있다.

링크를 클릭하면 edit.do로 요청되면서 아래와 같은 화면이 보여진다.

아이디 변경은 하면 안되니 아이디값에 readonly를 써준다.

<div class="mb-3">
		    <label for="memId" class="form-label">아이디</label>
		    <input type="text" name="memId"  value="${memVo.memId}"readonly="readonly" class="form-control" id="memId"><!-- 현재회원에 값을 출력해줘야 하는 코드 줄	 -->   
		  </div>

목록 list에서 저장눌렀을때 파라미터 값으로 저장되며 값을 포스트 방식으로 요청이 가니,

membercontroller를 작성해준다.

@RequestMapping(path = "edit.do", method = RequestMethod.POST)
	public String edit(MemberVo vo) {	
		int num = memberService.update(vo);
		return "redirect:/member/list.do";
	}

update 메서드 service생성하기

package com.exam.myapp.member;

import java.util.List;


public interface MemberService {



	public int update(MemberVo vo);
}

serviceimpl도 작성하기

@Override
	public int update(MemberVo vo) {		
		return memberDao.update(vo);
	}

memberdao작성

package com.exam.myapp.member;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;


@Mapper
public interface MemberDao {


	public int update(MemberVo vo);
}

update를 실행할 sql문을 mapper에등록 Dao에서 요청이 오면 update문이 실행

  <update id="update">
  	UPDATE member
  	SET mem_name = #{memName} ,mem_point = #{memPoint}
  	WHERE mem_id = #{memId} 
  </update>

삭제버튼 클릭시 내용 삭제해보자! edit.jsp에 아래와 같이 작성해준다.

누구를 삭제해야하는 알려줘야하니까 파라미터값을 부여주자

<a href="${pageContext.request.contextPath}/member/del.do?memId=${memVo.memId}">
	<button type="button" class="btn btn-primary"><i class="bi-file-plus-fill"></i>삭제</button>
</a>

controller에 작성하기

//delete실행
	@RequestMapping(path = "del.do", method = RequestMethod.GET)
	public String delform(MemberVo vo) {			
		int num = memberService.delete(vo);		
		
		return "redirect:/member/list.do";
	}

memService에 작성한다.

package com.exam.myapp.member;

import java.util.List;


public interface MemberService {

	public int delete(MemberVo vo);
}

serviceimpl에 메서드 추가

@Override
	public int delete(MemberVo vo) {		
		return memberDao.delete(vo);
	}

memberdao에 작성

package com.exam.myapp.member;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;


@Mapper
public interface MemberDao {

	public int delete(MemberVo vo);
}

mapper가서 delete 태그 사용하여 등록하기

 <delete id="delete">
  	DELETE FROM member	
	WHERE mem_id = #{memId} 
  </delete>

삭제버튼을 눌렀을 때 실제로 삭제되기전에 삭제할건지 물어보는걸 구현해보자

jquery 스크립트 추가

<script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>

<a id="delLink" href="${pageContext.request.contextPath}/member/del.do?memId=${memVo.memId}">
			<button type="button" class="btn btn-primary"><i class="bi-file-plus-fill"></i>삭제</button>
		</a>

<script type="text/javascript">


	$(function(){ //문서 로드가 완료된 후 실행
		 $('#delLink').on('click', function(e){
				var ok = confirm('삭제하시겠습니까?');	
				if(ok ===false) {
					e.preventDefault(); //이벤트에 대한 브라우저 기본동작 취소
					return false; //이벤트리스너함수에서 false를 반환하면 이벤트에 대한 브라우저 기본동작 취소
					 
				}
			});	
	});		
	
</script>

취소하면 삭제가 되지 않는다.

실행 시 화면

번외

jqery를 사용하지 않고 삭제하시겠습니까? 구현해보기

http://vanilla-js.com/

Vanilla JS

Vanilla JS Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is smal

vanilla-js.com

window.addEventListener('DOMContentLoaded',function() {
	document.querySelector('#delLink').addEventListener('click,function(e)){
    if (!confirm("진짜삭제?")) {
    	e.prventDefault(); //또는 return false;
    }
    };
});

add.jsp에서 비밀번호 확인 창을 만들어주기위해 아래 코드를 추가한다. 서버로 전송이 필요없는 값이라서 name을 없앤다.

<div class="mb-3">
		    <label for="memPassCheck" class="form-label">비밀번호 확인</label>
		    <input type="password" class="form-control" id="memPassCheck">
</div>

아이디 옆에 중복확인 button을 넣어준다. 부트스트랩이용!

<form action="${pageContext.request.contextPath}/member/add.do" method="post">
		  <div class="mb-3">
		    <label for="memId" class="form-label">아이디</label>
			  <div class="input-group">
			    <input type="text" name="memId" class="form-control" id="memId">	
			    <button type="button" id="dupBtn" class="btn btn-primary">중복확인</button>	   
			  </div>
		  </div>

미션!

(1) 회원등록 폼을 제출(submit)할 때, 비밀번호와 비밀번호 확인 값이 다르면 안내메세지를 출력하고 제출 제출하지 않도록 구현
(2) 회원등록 폼을 제출(submit)할 때, 중복확인을 성공한 적이 없으면 안내메세지를 출력하고 제출하지 않도록 구현
(3) 중복확인 버튼을 클릭하면 입력한 아이디가 데이터베이스에 없는 경우,저장 버튼을 활성화(중복확인 버튼을 비활성화)
입력한 아이디가 데이터베이스에 이미 있는 경우, 저장 버튼을 비활성화(disable)
(4) 회원아이디 값을 변경한 경우에는 다시 중복확인을 하도록 구현(중복확인 버튼을 활성화, 저장버튼을 비활성화)

(1번 코드 답)

$(function(){ //문서 로드가 완료된 후 실행
		 $('#memForm').on('submit', function(e){
			 $('#memPass').val()
			 $('#memPassCheck').val()
						
				if( $('#memPass').val() !=  $('#memPassCheck').val()) {
					alert('비밀번호를 확인하세요!');
					return false; //e.peventDefault();								 
				}
			});	
	});

(3번 코드 답)

$('#dupBtn').on('click', function(){
			$.ajax({
				url:"${pageContext.request.contextPath}/member/check.do",
				method: "post",
				data: {memId: $('#memId').val()},
				dataTypes: 'JSON'
			}).done(function(resp){
				console.log(resp);
				if (resp.result){ //사용가능한 아이디
					alert('사용가능한 아이디입니다.');
					$('#saveBtn').prop('disabled',false);
					$('#dupBtn').prop('disabled',true);
				}else { //이미 존재하는 아이디
					alert('이미 존재하는 아이디입니다.');
					$('#saveBtn').prop('disabled',true);
					$('#dupBtn').prop('disabled',false);
				}
			}).fail(function(jqXHR,textStatus){
				alert('아이디 중복 확인 요청 실패!');
			});
		});
		$('#memId').on('change', function(){
			$('#saveBtn').prop('disabled',true);
			$('#dupBtn').prop('disabled',false);
		});
	});

check.do로 요청을 보내야 하니 controller에 check.do에 관련한 메소드를 추가해준다.

@RequestMapping(path = "check.do", method = RequestMethod.POST)
@ResponseBody
	public Map<String, Object> checkId(MemberVo vo) {			
		MemberVo mvo = memberService.select(vo);
		 Map<String, Object> map= new HashMap<String, Object>();
		 map.put("result",mvo == null); //사용가능한 경우 {result:true} , 불가능한 경우 {result:false}
		
		return map;
	}

map이 add.jsp에 있는 resp에 보내짐

jackson에 대한 meaven 추가

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.13.4</version>
</dependency>

없는 회원 중복확인 시 콘솔에 true라고 뜬다.

회원목록에 있는 루루를 검색할 때, 콘솔에 false라고 잘 뜬다.!

사용가능한 아이디라고 확인되면, 저장버튼 비활성화

아이디 수정 후에, 비밀번호 칸을 클릭 후 중복확인 버튼이 활성화 된다.

3번코드 변수명 이용한 코드

$(function(){ //문서 로드가 완료된 후 실행
		var idCheck = false; //아이디 중복확인 여부		
		 $('#memForm').on('submit', function(e){
			  
				if (!idCheck) {
					alert('아이디 중복확인이 필요합니다.');
					return false;
				}		
				if( $('#memPass').val() !=  $('#memPassCheck').val()) {
					alert('비밀번호를 확인하세요!');
					return false; //e.peventDefault();							 
				}
			});	
	
		
		$('#dupBtn').on('click', function(){
			$.ajax({
				url:"${pageContext.request.contextPath}/member/check.do",
				method: "post",
				data: {memId: $('#memId').val()},
				dataTypes: 'JSON'
			}).done(function(resp){
				console.log(resp);
				idCheck = resp.result;
				if (resp.result){ //사용가능한 아이디
					alert('사용가능한 아이디입니다.');

				}else { //이미 존재하는 아이디
					alert('이미 존재하는 아이디입니다.');

				}
			}).fail(function(jqXHR,textStatus){
				alert('아이디 중복 확인 요청 실패!');
			});
		});
		$('#memId').on('change', function(){
			idCheck = false;
		});
	});

<body>
<div class="container">
 <div class="row">
    <div class="col">
		<h1>회원추가</h1>
		<form id="memForm" action="${pageContext.request.contextPath}/member/add.do" method="post">
		  <div class="mb-3">
		    <label for="memId" class="form-label">아이디</label>
			  <div class="input-group">
			    <input type="text" name="memId" class="form-control" id="memId">	
			    <button type="button" id="dupBtn" class="btn btn-primary">중복확인</button>	   
			  </div>
		  </div>
		  <div class="mb-3">
		    <label for="memPass" class="form-label">비밀번호</label>
		    <input type="password" name="memPass" class="form-control" id="memPass">
		  </div>
		  <div class="mb-3">
		    <label for="memPassCheck" class="form-label">비밀번호 확인</label>
		    <input type="password" class="form-control" id="memPassCheck">
		  </div>	
		  <div class="mb-3">
		    <label for="memName" class="form-label">이름</label>
		    <input type="text" name="memName" class="form-control" id="memName">		   
		  </div>
		  <div class="mb-3">
		    <label for="memPoint" class="form-label">포인트</label>
		    <input type="text" name="memPoint" class="form-control" id="memPoint">		   
		  </div>	  
		  <button type="submit" id="saveBtn" class="btn btn-primary">저장</button>
		<a href="${pageContext.request.contextPath}/member/list.do">
		<button type="button" class="btn btn-primary"><i class="bi-file-plus-fill"></i>회원목록</button>
		</a>
		</form>	
			
	</div>
 </div>	
</div>
	<!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
	</body>

비밀번호가 다를때!

저작자표시 비영리 (새창열림)