#68. 세미프로젝트(회원정보변경, 아이디찾기, 비밀번호찾기)

국민 - 소프트웨어(S/W)

주권(법) - 운영체제(O/S)

영토 - 하드웨어(H/W)

 

-- 현재 사용중 --

 

browser DBMS

app

WAS

O/S(window)

CPU RAM

 

 

localhost

host : 네트워크 연결 상태에서 종단의 통신 가능한 장치

 

 

-----------------------------------------------

플젝 중 알아낸 것

DB에서 가져온 ResultSet 다중행 값 가져오려면

방법1. VO객체에 필드를 컬럼명과 동일하게 추가한 후에 ArrayList로 가져오기

(본래 쓰던 기존 방식)

  List<Member> memberList = new ArrayList<>(); // ArrayList를 생성하여 멤버 객체를 저장

    while (rset.next()) {
        Member member = new Member();
        member.setMemNo(rset.getInt("MEM_NO"));
        member.setMemId(rset.getString("MEM_ID"));
        member.setMemPwd(rset.getString("MEM_PWD"));
        member.setMemName(rset.getString("MEM_NAME"));
        member.setMemNickname(rset.getString("MEM_NICKNAME"));
        member.setMemEmail(rset.getString("MEM_EMAIL"));
        member.setMemStatus(rset.getString("MEM_STATUS"));
        member.setEnrollDate(rset.getDate("ENROLL_DATE"));
        member.setModifyDate(rset.getDate("MODIFY_DATE"));
        member.setDeleteDate(rset.getDate("DELETE_DATE"));
        member.setMemPicture(rset.getString("MEM_PICTURE"));
        member.setMemGrade(rset.getInt("MEM_GRADE"));

        memberList.add(member); // Member 객체를 ArrayList에 바로 추가
    }

이러면 값 뽑을 때

memberList.get(i).getMemNo();

 

방법2. VO객체에 추가 안하고 Map에 키 밸류로 저장해서 ArrayList로 가져오기

    List<Map<String, Object>> memberList = new ArrayList<>(); // 각 행의 데이터를 저장하기 위한 리스트

    while (rset.next()) {
        Map<String, Object> memberData = new HashMap<>();
        memberData.put("MEM_NO", rset.getInt("MEM_NO"));
        memberData.put("MEM_ID", rset.getString("MEM_ID"));
        memberData.put("MEM_PWD", rset.getString("MEM_PWD"));
        memberData.put("MEM_NAME", rset.getString("MEM_NAME"));
        memberData.put("MEM_NICKNAME", rset.getString("MEM_NICKNAME"));
        memberData.put("MEM_EMAIL", rset.getString("MEM_EMAIL"));
        memberData.put("MEM_STATUS", rset.getString("MEM_STATUS"));
        memberData.put("ENROLL_DATE", rset.getDate("ENROLL_DATE"));
        memberData.put("MODIFY_DATE", rset.getDate("MODIFY_DATE"));
        memberData.put("DELETE_DATE", rset.getDate("DELETE_DATE"));
        memberData.put("MEM_PICTURE", rset.getString("MEM_PICTURE"));
        memberData.put("MEM_GRADE", rset.getInt("MEM_GRADE"));

        memberList.add(memberData); // 각 행의 데이터를 ArrayList에 추가
    }

이러면 값 뽑을 때

memberList.get(i).get("MEM_NICKNAME")

for - each문

for (Map<String, Object> memberData : memberList) {
    int memNo = (int) memberData.get("MEM_NO");
    String memId = (String) memberData.get("MEM_ID");
    String memPwd = (String) memberData.get("MEM_PWD");
    // 나머지 필드도 비슷한 방법으로 추출 가능
    // ...
    System.out.println("MEM_NO: " + memNo + ", MEM_ID: " + memId + ", MEM_PWD: " + memPwd);
}

for문

for (int i = 0; i < memberList.size(); i++) {
    Map<String, Object> memberData = memberList.get(i);
    
    int memNo = (int) memberData.get("MEM_NO");
    String memId = (String) memberData.get("MEM_ID");
    String memPwd = (String) memberData.get("MEM_PWD");
    // 나머지 필드도 비슷한 방법으로 추출 가능
    // ...
    
    System.out.println("MEM_NO: " + memNo + ", MEM_ID: " + memId + ", MEM_PWD: " + memPwd);
}

 

-------------------------------------------------------------------------------------

업무일지_231012

오늘의 할 일
- 회원정보변경을 위한 비밀번호 확인 과정
- 회원정보변경 화면 틀 잡기
- 회원정보변경 이미지(프로필) 변경
- 회원정보변경 기능(회원가입과 마찬가지로 정규표현식 + unique컬럼 중복체크)

달성률 :  20%

오늘 한 일
 - 회원정보변경을 위한 비밀번호 확인 과정 (로그인 유저와 input의 value값 동일 여부 판단) (90%)
 - 회원정보변경 화면 틀 잡기(기존 틀에서 사진 파일 업로드 추가됨) (70%)

오늘의 문제점
 - 회원정보변경을 위해 비밀번호를 확인하는 과정에서 로그인 유저(세션값)과 input의 value값의 동일 여부를 판단했는데
 DB에서 판단해서 일치하는 값만 보낼것인지, 화면단에서 처리하느냐에 따라 방식이 달라졌다. 
 - 뒤로가기 누르고 새로고침하면 에러가 뜬다.


 - 회원정보변경에 기본값으로 정보가 들어가 있어야 함.
=> 로그인 유저로 넣어줄건가? 
=> 비밀번호 확인 작업
1) 로그인유저로 땡겨올 경우 비밀번호 확인을 DB에서 조회한 후 맞나 조회할 수 있음
2) DB에서 비밀번호와 ID가 맞는 회원을 조회해 올 수 있음 -> 그럼 이걸 회원정보 input value에 기본값으로 넣어줄 수 있음
=> 로그인 유저에 등급번호와 함께 등급이름이 있다면 마이페이지에서 바로 조회할 수 있을 것 같음(수정할 것)

 - 비밀번호 변경을 모달로 할 수 있을까?



아 재설정 UpdateDate안바꿈




String은 문자열비교시 equals를 쓰는데 ajax는 == 동등비교 연산자를 씀 => javascript임

url주소 다시 확인해보기 (action값에 contextPath등)

 

 

 

views/member/memberUpdateConfirm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% String checkPwd = (String)session.getAttribute("checkPwd"); %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보변경</title>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>  

<style>
    /* Bordered form */
    form {
        border: 3px solid #f1f1f1;
    
    }

    /* Full-width inputs */
    input[type=text], input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

    /* Set a style for all buttons */
    button {
        background-color: rgb(88, 87, 87);
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
    }

    /* Add a hover effect for buttons */
    button:hover {
        opacity: 0.8;
    }

    /* Add padding to containers */
    .container {
        padding: 100px 350px;
        background-color: lightgray;
    }

    #title{
        padding-top: 100px;
        display : flex;
        align-items: center;
        justify-content: center;
    }


    
</style>

</head>
<body>
    <!-- header부분 (상단 메인 메뉴바) -->
	<%@ include file="/views/common/header.jspf" %>

    <div>
        <form action="<%= contextPath %>/yrmemberUpdateConfirm.me" method="post">
            <h1 id="title"><b>회원정보변경</b></h1>
            <div class="container">
                <p>본인확인을 위한 비밀번호 입력창입니다.</p>
	            <input type="password" name="checkPwd" placeholder="비밀번호를 입력해 주세요." required>
	            <input type="hidden" name="memberNo" value="<%= loginMember.getMemNo() %>">
	            <input type="hidden" name="memberPwd" value="<%= loginMember.getMemPwd() %>">
	            <button type="submit" onclick="error();">확인</button>
            </div>
        </form>
    </div>
    
    <% if(checkPwd != null && loginMember != null && !checkPwd.equals(loginMember.getMemPwd())) { %>
    	<script>
		Swal.fire({
			icon: 'error',
			title: '비밀번호 불일치',
			text: '비밀번호가 일치하지 않습니다!'
    	})
         </script>
         
    <% //checkPwd = null; 
    } %>
    


    <!-- footer 푸터영역 -->
	<%@ include file="/views/common/footer.jspf" %>

</body>
</html>

 

 

 

 

아이디찾기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 찾기</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>


<style>
    /* Bordered form */
    form {
    border: 3px solid #f1f1f1;
    }

    /* Full-width inputs */
    input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    }

    /* Set a style for all buttons */
    button {
    background-color: rgb(88, 87, 87);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    }

    /* Add a hover effect for buttons */
    button:hover {
    opacity: 0.8;
    }

    /* Add padding to containers */
    .container {
    padding: 100px 350px;
    }

    /* The "Forgot password" text */
    span.psw {
    float: right;
    padding-top: 16px;
    }

    #title{
      padding-top: 100px;
      display : flex;
      align-items: center;
      justify-content: center;
    }

</style>


</head>
<body>
	<!-- header부분 (상단 메인 메뉴바) -->
	<%@ include file="/views/common/header.jspf" %>

    <!-- ajax로 처리할 것 
    <form action="yrsearchMemberId.me" method="post">
	   -->
      <h1 id="title"><b>아이디 찾기</b></h1>
      <div class="container">

          <input type="text" placeholder="이름" name="memberName" required>
      
          <input type="text" placeholder="이메일" name="memberEmail" required>

          <!-- 인증코드 입력창 -->
          <input type="text" placeholder="인증코드 입력" name="certificationCode" required>
          <!-- <button type="submit">확인</button> -->

          <button type="button" onclick="searchMemberId();">확인</button>

          <div id="searchMemberId"> </div>
      
          <button type="button" onclick="location.href='<%= contextPath %>/yrloginForm.me'">로그인하러 가기</button>

        </div>
        
      <!-- </form> -->
      
    <!-- footer 푸터영역 -->
	<%@ include file="/views/common/footer.jspf" %>
	
	<script>
	// 아이디 찾기 ajax
	const $memberName = $('input[name=memberName]');
	const $memberEmail = $('input[name=memberEmail]');
	
    function searchMemberId(){
    	console.log($memberName);
    	console.log($memberEmail);
      $.ajax({
    	  url : 'yrsearchMemberId.me',
    	  data : {memberName : $memberName.val(),
    		  	  memberEmail : $memberEmail.val()},
 		  success : function(result){
 			  if(result == 'null'){
 				  $('#searchMemberId').html('조회된 아이디가 없습니다.');
 			  } else{
 				  if(result.searchMemberStatus == 'Y'){
					$('#searchMemberId').html('조회 아이디 : ' + result.searchMemberId);
 				  } else{
 					  $('#searchMemberId').html('이미 탈퇴한 회원입니다. 관리자에게 문의바랍니다.');
 				  }
 			  }
 			  
 		  },
 		  
 		  error : function(){
 			 console.log('아이디 찾기 AJAX통신 실패!');
 		  }
      })
    }

  </script>

  </body>
</html>

 

비밀번호찾기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비밀번호 찾기</title>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>  


<style>
    /* Bordered form */
    form {
    border: 3px solid #f1f1f1;
    }

    /* Full-width inputs */
    input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    }

    /* Set a style for all buttons */
    button {
    background-color: rgb(88, 87, 87);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    }

    /* Add a hover effect for buttons */
    button:hover {
    opacity: 0.8;
    }

    /* Add padding to containers */
    .container {
    padding: 100px 350px;
    }

    /* The "Forgot password" text */
    span.psw {
    float: right;
    padding-top: 16px;
    }

    #title{
      padding-top: 100px;
      display : flex;
      align-items: center;
      justify-content: center;
    }
    
    #updateMemberPwd{
    	display : none;
    }

    #updateMemberPwd > label{
      font-size: 12px;
      margin : 0px 0px 5px 0px;
    }

</style>

</head>
<body>
	<!-- header부분 (상단 메인 메뉴바) -->
	<%@ include file="/views/common/header.jspf" %>

    <!-- ajax로 처리 
    <form action="yrsearchMemberPwd.me" method="post">
	-->
      <h1 id="title"><b>비밀번호 찾기</b></h1>
      <div class="container">

          <input type="text" placeholder="아이디" name="memberId" required>
      
          <input type="text" placeholder="이메일" name="memberEmail" required>

          <!-- 인증코드 입력창 -->
          <input type="text" placeholder="인증코드 입력" name="certificationCode" required>
          <!-- <button type="submit">확인</button> -->
          <button type="button" onclick="searchMemberPwd();">확인</button>
          
          <div id="searchMemberPwd"> </div>

          <!-- 비밀번호 재설정 -->
          <div id="updateMemberPwd">
	          <input type="password" placeholder="비밀번호 재설정" name="memberPwd" maxlength="20" required>
            <label for="memberPwd">* 영문, 숫자, 특수문자(!@#$+^*) 포함 8 ~ 20자로 입력 가능합니다.</label>
	          <input type="password" placeholder="비밀번호 재설정 확인" name="memberPwdCheck" maxlength="20" required>
            <label for="memberPwdCheck">* 비밀번호가 일치하지 않습니다.</label>
	      	  <button type="button" id="updatePwdBtn" onclick="updateMemberPwd();">비밀번호 재설정하기</button>
          </div>
	          <button type="button" onclick="location.href='<%= contextPath %>/yrloginForm.me'">로그인하러 가기</button>
        </div>
        
      <!-- </form> -->
      
    <!-- footer 푸터영역 -->
	<%@ include file="/views/common/footer.jspf" %>
	
	<script>
		const $memberId = $('input[name=memberId]');
		const $memberEmail = $('input[name=memberEmail]');
	
		function searchMemberPwd(){
			$.ajax({
				url : 'yrsearchMemberPwd.me',
				data : {memberId : $memberId.val(),
						memberEmail : $memberEmail.val()},
				success : function(result){
					if(result == 'null'){
						$('#searchMemberPwd').text('조회된 결과가 없습니다.');
					} else{
						$('#searchMemberPwd').text('비밀번호 재설정');
						$('#updateMemberPwd').attr('style', "display:block;");
					}
				},
				error : function(){
					console.log('비밀번호 찾기 AJAX통신 실패!');
				}
			})
		};
		
		const $memberPwd = $('input[name=memberPwd]');
		const $memberPwdCheck = $('input[name=memberPwdCheck]');

    // 비밀번호 재설정 유효성 검사
    // 비밀번호 (영문 숫자 특수문자 !@#$+^* 포함 8 ~ 20자)
    $(function(){
      $('input[name*=memberPwd]').keyup(function(){

        var $regExp = /^[a-zA-Z0-9!@#$+^*]{8,20}$/;
        
        // 비밀번호 정규표현식 불일치 시
        if(!$regExp.test($('input[name=memberPwd]').val())){
          $('label[for="memberPwd"]').css('color', 'red');
          $('#updatePwdBtn').attr('disabled', true);
        
        // 비밀번호확인 불일치 시 (정규표현식을 일치)
        } else if($memberPwd.val() != $memberPwdCheck.val()){
        	$('label[for="memberPwdCheck"]').text('* 비밀번호가 일치하지 않습니다.').css('color', 'red');
        	$('label[for="memberPwd"]').css('color', 'black');
        	$('#updatePwdBtn').attr('disabled', true);
        	
        // 둘다 일치
        } else {
        	$('label[for="memberPwdCheck"]').text('').css('color', 'black');
        	$('label[for="memberPwd"]').css('color', 'black');
        	$('#updatePwdBtn').attr('disabled', false);
        }
        
      })
    })
    
    
		
		function updateMemberPwd(){
			
			if($memberPwd.val() != $memberPwdCheck.val()){
				console.log("비밀번호 달라");
        $('label[for="memberPwdCheck"]').text("* 비밀번호가 일치하지 않습니다.").css('color', 'red');
			} else{ // 비밀번호 재설정 및 확인 동일작성
			$.ajax({
				url : 'yrupdateMemberPwd.me',
				data : {memberId : $memberId.val(),
						memberPwd : $memberPwd.val()		
				},
				success : function(result){
					if(result == 'S'){
						Swal.fire({
							  title: '비밀번호 재설정 성공',
							  text: "비밀번호가 변경되었습니다.",
							  icon: 'success',
							  confirmButtonColor: '#3085d6',
							  confirmButtonText: '확인'
						}).then((result) => {
						  if (result.isConfirmed) {
							  $(location).attr("href", "views/member/memberLogin.jsp");
						  }
						})

					} else{
						// ★★★★★★★★★★★★여기서 jsp로 보내니까 다시 입력하면 AJAX통신 오류가 뜸
            Swal.fire({
							  title: '비밀번호 재설정 실패',
							  text: "다시 시도해 주십시오.",
							  icon: 'error',
							  confirmButtonColor: '#d33',
							  confirmButtonText: '확인'
						}).then((result) => {
						  if (result.isConfirmed) {
							  
							  $(location).attr("href", "views/member/searchMemberPwdForm.jsp");
						  }
						})
					}

				},
				error : function(){
					console.log('비밀번호 재설정 AJAX통신 실패!');
				}
			})
			}
    };
	
	</script>

  </body>
</html>