5일차 (1)

프로그래밍/+a

slPro 5차 일지

728x90
 멤버 다음은 lol api 사용해서 정보 가져와서 뿌리는거 하려고 했는데 같은 조원 분이 게시판이 중요한 것이라고 하셔서 다음 단계는 게시판으로 결정했다.


1차 일지 - [ 설정 ], [ 회원가입 ]
2차 일지 - [ 로그인 ]
3차 일지 - [ index에서 로그인 상태에 따라 display none/block 제어하고 p태그 내용 바꾸기 ], [ 로그아웃 ]
4차 일지 - [ header에 회원 아이디, 회원정보/로그아웃 링크 or 비회원 문구 추가 후 로그인 상태에 따라 display none/block 제어 ], [ 일반 회원 정보 확인 ]

5차 일지 - [ 일반 회원 정보 출력 변경하면서 관리자 로그인 시 회원 정보 출력 추가 ], [ 일반 회원 비밀번호 변경 ]

 

1. 회원 정보 출력

 일반 회원 정보 출력을 관리자랑 같이 사용하려면 변경이 필요할 것 같아서 조금 변경하다보니 거의 다 변경하게 되었다..
 MemberController는 변경점이 없어서 빼고 작성했다.
  • memberInfo.jsp
더보기
  • body
<p>현재 로그인 중인 id: ${loginId}</p>

<br>
<div id="info">
</div>

 

  • script
$(()=>{
	let loginId = '<%=(String)session.getAttribute("loginId")%>';
	
	// ============================ 회원 정보 관련 ================================
	$.ajax({
        method: 'get',
        url: 'memberInfo',
    }).done(function(res){
        console.log("res: ",res);
        const mList = res;

        if (loginId == "admin"){
            $("#info").html(" => 회원 목록");
            for (i=0; i<mList.length; i++){
                $("#info").append("<p>=================================</p>");
                $("#info").append("<p>이름: "+mList[i].mname+"</p>");
                $("#info").append("<p>이메일: "+mList[i].memail+"</p>");
                if (!(mList[i].gname <= 0)){
                    $("#info").append("<p>게임 닉네임: "+mList[i].gname+"</p>");
                }
                $("#info").append("<p>가입 날짜: "+mList[i].joinDate+"</p>");
                if (i==mList.length-1){
                    $("#info").append("<p>=================================</p>");
                }
            }

        }else{
            $("#info").html("<p>이름: "+mList[0].mname+"</p>");
            $("#info").append("<p>이메일: "+mList[0].memail+"</p>");
            if (!(mList[0].gname <= 0)){
                $("#info").append("<p>게임 닉네임: "+mList[0].gname+"</p>");
            }
            $("#info").append("<p>가입 날짜: "+mList[0].joinDate+"</p>");

            document.getElementById("infoPwCh").style.display = 'block';
        }

    }).fail((err,status)=>{
        console.log("err:", err);
        console.log("status:", status);
        $("#info").html("에러!").css('color','red');

    })
})
  • $(()=>{}): 페이지가 로딩되면 바로 실행하는 함수
  • 4일차에서는 모든 정보를 비밀번호를 받고나서 띄우게 했었는데, 비밀번호를 변경할 때만 비밀번호를 받도록 변경했다.
  • 세션에 저장된 아이디가 admin인 경우, 아닌 경우를 나누어 회원 정보 또는 회원 정보 리스트를 띄웠다. (조건으로 리스트의 길이로 줘도 괜찮았을 것 같다!)
  • gName인 게임 닉네임이 가장 큰 고난이었는데, 조건으로 gname >= 0, gname <= 0 둘 다 해봤는데(후자는 안 될 것을 알고 해봤다.) 널 값만 잘 띄우길래 포기하고 하나로 묶어 앞에 !(느낌표)를 적어 조건을 뒤집어줬다. 

 

  • MemberAsyController.java
더보기 
@GetMapping("/member/memberInfo")
public ArrayList<MemberDto> memberInfo(HttpSession session) {
    log.info("==> GetMapping - memberInfo 요청 <==");
    String mId = session.getAttribute("loginId").toString();
    return mSer.memberInfo(mId);
}
  • 4일차에서 return 타입을 MemberDto로 했었는데, ArrayList<MemberDto>로 변경했다.

 

  • MemberService.java
더보기 
public ArrayList<MemberDto> memberInfo(String mId) {
    log.info("===> mSer memberInfo 요청 <===");
    ArrayList<MemberDto> mList = new ArrayList<>();
    if (mId.equals("admin")) {
        mList = mDao.mListInfo(mId);
    }else {
        MemberDto mDto = mDao.memberInfo(mId);
        mList.add(mDto);
    }
    return mList;
}
  • MemberAsyController에서 return 타입을 MemberDto에서 ArrayList<MemberDto>로 변경함에 따라 해당 메소드도 return 타입을 동일하게 변경했다.
  • 매개변수로 받아온 id가 admin인지 아닌지에 따라 MemberDao의 메소드를 다르게 사용하여 mList에 담아서 그걸 return했다.

 

  • MemberDao (java, xml)
더보기
  • 일반 회원 메소드
MemberDto memberInfo(String mId);	// .java
<select id="memberInfo" parameterType="String">
    select mId, mName, mEmail, gName, joinDate from member where mId=#{param1}
</select>				// .xml

 

  • admin(관리자) 메소드
ArrayList<MemberDto> mListInfo(String admin);	// .java
<select id="mListInfo">
    select mId, mName, mEmail, gName, joinDate from member where mId!=#{param1}
</select>				// .xml

 

  • 결과
더보기
  • 일반 회원
회원 정보 출력 / 비밀번호 변경은 2번에서 후술.

 

  • admin(관리자)
회원 정보 출력

 

 

2. 일반 회원 비밀번호 변경

  • memberInfo.jsp
더보기
  • body
<div id="infoPwCh" style="display: none;">
    <p>비밀번호를 변경하시려면 현재 비밀번호를 입력하세요.</p>
    <input type="password" name="mPw" id="infoMPw" class="input" placeholder="비밀번호를 입력하세요" maxlength="20" autocapitalize="off">
    <div id="infoCh" style="display: none;"></div>
    <button type="button" class="btn btn-3 btn-3e" id="infoSubBtn" style="text-align: center;">비밀번호 확인</button>
</div>

<div id="changePw" style="display: none;">
    <input type="password" name="changeMPw" id="changeMPw" class="input" placeholder="변경할 비밀번호를 입력하세요" maxlength="20" autocapitalize="off">
    <input type="password" name="changeMPwRe" id="changeMPwRe" class="input" placeholder="변경할 비밀번호 재입력" maxlength="20" autocapitalize="off">
    <button type="button" class="btn btn-3 btn-3e" id="changeMPwBtn" style="text-align: center;">비밀번호 변경</button>
    <p id="changeAlert" style="display: none;"></p>
</div>

 

  • script
// ============================ 비밀번호 변경 관련1 ================================
$('#infoSubBtn').on('click',function(){			// 현재 비밀번호 확인
    let pw = $('#infoMPw').val();
    if (pw==''){
        $('#infoCh').html('비밀번호를 입력해주세요.').css('color','red');
        document.getElementById("infoCh").style.display = 'block';
        $('#infoMPw').focus();
        return;
    }
    document.getElementById("infoCh").style.display = 'none';
    let chPwSend = {mId:loginId, mPw:pw};
    $.ajax({
        methoed: "get",
        url: "pwCheck",
        data: chPwSend,
    }).done(function(res){
        if (!(res <= 0)){
            document.getElementById("changePw").style.display = 'block';
            document.getElementById("infoPwCh").style.display = 'none';
        }else{
            $('#infoCh').html('비밀번호가 틀렸습니다.').css('color','red');
            document.getElementById("infoCh").style.display = 'block';
        }
    }).fail((err,status)=>{
        console.log("err:", err);
        console.log("status:", status);
        document.getElementById("infoCh").style.display = 'block';
        $("#infoCh").html("비밀번호가 틀렸습니다.").css('color','red');

    })
})
// ============================ 비밀번호 변경 관련2 ================================
let usePw = false;

$('#changeMPwRe').on('click',function(){	// 비밀번호 체크
    let pw = $('#changeMPw').val();
    let chPw = $('#changeMPwRe').val();
    let con = document.getElementById("changeAlert");
    con.style.display = 'block';
    if (pw==''){
        $('#changeAlert').html("변경할 비밀번호를 먼저 입력해주세요.").css("color",'red');
        $('#changeMPw').focus();
        return;
    }
})
$('#changeMPwRe').blur(function(){
    let pw = $('#changeMPw').val();
    let chPw = $('#changeMPwRe').val();
    let con = document.getElementById("changeAlert");
    con.style.display = 'block';
    if (pw!='' && chPw==''){
        $('#changeAlert').html("비밀번호 확인 칸은 비워둘 수 없습니다.").css("color",'red');
        $('#changeMPwRe').focus();
        return;
    }
})
$('#changePw').on('keyup', function(){
    let pw = $('#changeMPw').val();
    let chPw = $('#changeMPwRe').val();
    let con = document.getElementById("changeAlert");
    con.style.display = 'block';
    if (pw!=''){
        if(pw.length<=20 && pw.length>=8){
            $('#changeAlert').html("");
        }else if(pw.length>20 || pw.length<8){
            $('#changeAlert').html("비밀번호의 길이는 8~20자 사이로 정해주세요.").css("color",'red');
            $('#changeMPw').focus();
            return;
        }
        if(chPw!='' && pw!=chPw){
            $('#changeAlert').html("비밀번호가 일치하지 않습니다.").css("color",'red');
            $('#changeMPwRe').focus();
        }else if(pw==chPw){
            usePw = true;
            con.style.display = 'none';
        }
            return;
    }
    usePw = false;
});			// 비밀번호 체크 끝


$('#changeMPwBtn').on('click',function(){	// 비밀번호 변경
    let changePw = $('#changeMPw').val();
    let changePwRe = $('#changeMPwRe').val();

    if (!usePw){
        document.getElementById("changeAlert").style.display = 'block';
        $('#changeAlert').html("비밀번호를 확인해주세요.").css("color",'red');
        return;
    }

    let changePwSend = {mId:loginId, changeMPw:changePw} 
    $.ajax({
        methoed: "get",
        url: "changeMPw",
        data: changePwSend,
    }).done(function(res){
        if (res == "ok"){
            alert("비밀번호를 성공적으로 변경했습니다.");
            document.getElementById('infoMPw').value = null;
            document.getElementById('changeMPw').value = null;
            document.getElementById('changeMPwRe').value = null;
            /* $('#infoMPw').value = null;
            $('#changeMPw').value = null;
            $('#changeMPwRe').value = null; */
            document.getElementById("changePw").style.display = 'none';
            document.getElementById("changeAlert").style.display = 'none';
            document.getElementById("infoPwCh").style.display = 'block';
        }else{
            $('#changeAlert').html('비밀번호를 변경하지 못했습니다.').css('color','red');
            document.getElementById("changeAlert").style.display = 'block';
        }
    }).fail((err,status)=>{
        console.log("err:", err);
        console.log("status:", status);
        document.getElementById("changeAlert").style.display = 'block';
        $("#changeAlert").html("비밀번호를 변경하지 못했습니다.").css('color','red');

    })

})

 새로운 비밀번호를 입력하고 또 그 비밀번호를 확인하는 것 때문에 스크립트가 길어졌지만 회원가입 할 때와 스크립트가 유사하기 때문에 마지막 스크립트만 시간이 걸렸다.

 

  • MemberAsyController.java
더보기
  • 현재 비밀번호 확인
@GetMapping("/member/pwCheck")
public String pwCheck(@RequestParam(name = "mId")String mId, @RequestParam(name = "mPw")String mPw) {
    log.info("==> GetMapping - pwCheck 요청 <==");
    MemberDto mDto = new MemberDto();
    mDto.setMId(mId);
    mDto.setMPw(mPw);
    if(mSer.login(mDto)) {
        return "ok";
    }
    return null;
}

 간단하게 id만 가져와서 로그인 할 때 사용했던 메소드를 사용하여 비밀번호가 맞는지 확인했다.

 

  • 새로운 비밀번호로 변경
@GetMapping("/member/changeMPw")
public String changeMPw(@RequestParam(name = "mId")String mId, @RequestParam(name="changeMPw")String changeMPw) {
    log.info("==> GetMapping - changeMPw 요청 <==");
    MemberDto mDto = new MemberDto();
    mDto.setMId(mId);
    mDto.setMPw(changeMPw);
    if(mSer.changeMPw(mDto)) {
        return "ok";
    }
    return "no";
}

 

  • MemberService.java
더보기 
public boolean changeMPw(MemberDto mDto) {
    log.info("===> mSer changeMPw 요청 <===");
    BCryptPasswordEncoder pwEn = new BCryptPasswordEncoder();
    mDto.setMPw(pwEn.encode(mDto.getMPw()));
    if (mDao.changeMPw(mDto)) {
        return true;
    }
    return false;
}
  • 회원가입을 암호화해서 저장했고, 로그인할 때 암호화된 비밀번호만 비교했었으니 변경해서 저장할 때도 꼭 암호화를 해서 저장해주어야 한다!
  • 처음에 암호화를 안 하고 저장해버려서 로그인 할 수 없었다 ㅠ

 

  • MemberDao (java, xml)
더보기
  • .java
boolean changeMPw(MemberDto mDto);

 

  • .xml
<update id="changeMPw">
    update member set mPw=#{mPw} where mId=#{mId}
</update>

 

  • 결과
더보기
비밀번호 공란 시
비밀번호 오류 시
비밀번호 확인이 끝난 후
변경 비밀번호를 8글자 미만, 20글자 초과로 적을 시
비밀번호 재입력에서 변경 비밀번호와 일치하지 않을 시
비밀번호 재입력에서 변경 비밀번호와 일치 시
비밀번호 변경에 성공
비밀번호 변경 성공 후

 

 

전체 피드백

  • 아직 비밀번호가 틀렸을 경우를 작업하지 않았지만 이건 나중에 작업할 수 있도록 해두고 중요하다고 했던 게시판을 먼저 해보기로 했다.

 

728x90
저작자표시 비영리 변경금지

'프로그래밍 > +a' 카테고리의 다른 글

slPro 7차 일지  (0) 2024.01.15
slPro 6차 일지  (1) 2024.01.11
slPro 4차 일지  (1) 2024.01.08
미니 팀 프로젝트 중간 과정 (파이썬)  (1) 2024.01.03
slPro 3차 일지  (0) 2024.01.01
1

티스토리툴바