10일차
2024. 7. 2. 16:11ㆍAquarium
시간이 남아 아이디 찾기 비밀번호 찾기를 구현하려고 한다.
먼저 아이디 찾기, 비밀번호 찾기 페이지의 핵심 코드는 다음과 같다.
findId.html
<div class="mainform">
<div class="backimg">
<img src="/image/realistic-shark-in-ocean.jpg" alt="배경 이미지">
</div>
<div class="form-container">
<div class="form text-center">
<form action="/findId" method="post">
<h3 style="margin-bottom: 30px">아이디 찾기</h3>
<div class="form-group">
<input type="text" name="memberName" class="form-control" id="memberName" required placeholder="이름">
</div>
<div class="form-group">
<input type="text" name="memberBirth" class="form-control" id="memberBirth" required placeholder="생년월일">
</div>
<button type="submit" class="btn btn-outline-info loginButton">아이디 찾기</button>
</form>
</div>
</div>
</div>
findPw.html
<div class="mainform">
<div class="backimg">
<img src="/image/realistic-shark-in-ocean.jpg" alt="배경 이미지">
</div>
<div class="form-container">
<div class="form text-center">
<form action="/findPw" method="post">
<h3 style="margin-bottom: 30px">비밀번호 찾기</h3>
<div class="form-group">
<input type="text" name="memberId" class="form-control" id="memberId" required placeholder="아이디">
</div>
<div class="form-group">
<input type="email" name="memberEmail" class="form-control" id="memberEmail" required placeholder="이메일">
</div>
<button type="submit" class="btn btn-outline-info loginButton">비밀번호 찾기</button>
</form>
</div>
</div>
</div>
XML 파일에서 아이디는 이름과 생년월일, 비밀번호는 아이디와 이메일로 회원을 조회한다.
<!-- 생년월일과 이름으로 회원 조회 -->
<select id="findByBirthAndName" resultType="com.camel.project.dto.Member">
SELECT * FROM member
WHERE memberBirth = #{memberBirth} AND memberName = #{memberName}
</select>
<!-- 아이디랑 이메일로 회원 조회-->
<select id="findByEmailAndId" resultType="com.camel.project.dto.Member">
SELECT * FROM member
WHERE memberId = #{memberId} AND memberEmail = #{memberEmail}
</select>
Controller
//아이디 찾기 페이지 이동
@GetMapping("/findId")
public String findIdPage() {
return "findId";
}
//아이디 찾기
@PostMapping("/findId")
public String findMemberId(@RequestParam("memberName") String memberName,
@RequestParam("memberBirth") String memberBirth,
Model model) {
String memberId = memberService.findMemberId(memberBirth, memberName);
if (memberId != null) {
model.addAttribute("memberId", memberId);
System.out.println(memberId);
return "findIdResult"; // 결과를 보여줄 HTML 페이지 이름 (예: resultPage.html)
} else {
model.addAttribute("msg", "일치하는 회원 정보가 없습니다.");
return "findId"; // 회원을 찾지 못했을 경우의 페이지 (예: notFoundPage.html)
}
}
//아이디 찾기 결과 페이지 이동
@GetMapping("/findIdResult")
public String findIdResultPage() {
return "findIdResult";
}
//비밀번호 찾기 페이지 이동
@GetMapping("/findPw")
public String findPwPage() {
return "findPw";
}
//비밀번호 찾기
@PostMapping("/findPw")
public String findMemberPw(@RequestParam("memberId") String memberId,
@RequestParam("memberEmail") String memberEmail,
Model model) {
String memberPw = memberService.findMemberPw(memberId, memberEmail);
if (memberPw != null) {
// 비밀번호 마스킹 처리
String maskedPassword = maskPassword(memberPw);
model.addAttribute("memberPw", maskedPassword);
System.out.println(maskedPassword); // 마스킹된 비밀번호 출력
return "findPwResult"; // 비밀번호 찾기 결과 페이지로 이동
} else {
model.addAttribute("msg", "일치하는 회원 정보가 없습니다.");
return "findPw"; // 회원을 찾지 못했을 경우의 페이지로 이동
}
}
// 비밀번호 마스킹 처리 메서드
private String maskPassword(String password) {
int length = password.length();
StringBuilder masked = new StringBuilder();
// 처음 세 자리를 제외하고 나머지는 마스킹 처리
for (int i = 0; i < length; i++) {
if (i < 3) {
masked.append(password.charAt(i));
} else {
masked.append('*');
}
}
return masked.toString();
}
//비밀번호 찾기 결과 페이지 이동
@GetMapping("/findPwResult")
public String findPwResultPage() {
return "findPwResult";
}
Mapper
// 아이디 찾기
Member findByBirthAndName(@Param("memberBirth") String memberBirth, @Param("memberName") String memberName);
// 비밀번호 찾기
Member findByEmailAndId(@Param("memberId") String memberId, @Param("memberEmail") String memberEmail);
Service
//아이디 찾기
public String findMemberId(String memberBirth, String memberName) {
Member member = memberMapper.findByBirthAndName(memberBirth, memberName);
if (member != null) {
return member.getMemberId();
} else {
return null; // 회원을 찾지 못했을 경우
}
}
//비밀번호 찾기
public String findMemberPw(String memberId, String memberEmail) {
Member member = memberMapper.findByEmailAndId(memberId, memberEmail);
if (member != null) {
return member.getMemberPw();
} else {
return null; // 회원을 찾지 못했을 경우
}
}
이 코드들이 모두 정상 작동하면 각각 findIdResult // findPwResult 페이지로 넘어가야 한다.
findIdResult
<div class="mainform">
<div class="backimg">
<img src="/image/realistic-shark-in-ocean.jpg" alt="배경 이미지">
</div>
<div class="form-container">
<div class="form text-center">
<h3 style="margin-bottom: 30px">아이디 찾기 결과</h3>
<div th:if="${memberId}">
<p>회원님의 아이디는 <span th:text="${memberId}"></span> 입니다.</p>
<a href="/login">로그인</a>
</div>
</div>
</div>
</div>
findPwResult
<div class="mainform">
<div class="backimg">
<img src="/image/realistic-shark-in-ocean.jpg" alt="배경 이미지">
</div>
<div class="form-container">
<div class="form text-center">
<h3 style="margin-bottom: 30px">비밀번호 찾기 결과</h3>
<div th:if="${memberPw}">
<p>회원님의 비밀번호는 <span th:text="${memberPw}"></span> 입니다.</p>
<a href="/login">로그인</a>
</div>
</div>
</div>
</div>
이제 기능 시험
먼저 아이디 찾기
이제 비밀번호 찾기
이제 팀원들이 만든 페이지들과 통합할 차례다.
내가 제작한 페이지들을 총 정리하자면
메인페이지(모든 페이지에 들어갈 헤더, 푸터 포함)
회원가입
회원정보수정(회원탈퇴)
이용 안내
전시생물 소개
프로그램 소개
아이디 찾기
비밀번호 찾기
로그인 (9일차에서 내가 만든게 있지만 이건 다른 팀원의 것으로 넘겨주었다. 주요 소스는 내가 제공했다.)(로그아웃)
주요 기능은
아이디 중복검사
비밀번호 일치
아이디, 비밀번호 정규식 검사
회원가입 이메일 인증
로그인 전후의 헤더 로그인 세션 변화
아이디, 비밀번호 찾기
회원 정보 수정 및 탈퇴
프로젝트 기간 동안 내 주요역할은
회원가입 폼 만들기 -> 첫 번째로 목표했던 기능. 이게 끝나고나서 나머지 페이지들을 모두 제작했다.
팀원들의 전반적인 CSS 총 책임
팀원들의 에러 수집
자세한 최종 결과물은 링크와 시연 영상을 걸도록 하며 프로젝트를 마감하도록 한다.
https://github.com/kimsanghoTT/Aquarium.git