😎 STS3 Spring 쇼핑몰
STS3 쇼핑몰 프로젝트[11] 아이디 찾기
개발자 린다씨
2022. 8. 2. 16:05
반응형
순서
0. 아이디 찾기 폼 만들기(jsp, css)
1. MemberController.java에 아이디 찾기 폼으로 이동하기 위한 코드 추가
2. MemberMapper.xml에 아이디 찾기 sql작성
3. MemberMapper.java, MemberService.java, MemberServiceImpl.java 코드 작성
4. MemberController.java에 아이디 찾기 버튼 클릭 시 실행될 로직 작성
5. find_id.jsp 추가
6. find_id_form.jsp에 이메일 유효성 검사 추가
7. 테스트
0. 아이디 찾기 폼 만들기(jsp, css)
src/main/webapp/WEB-INF/views/member 아래 아이디 찾기에 사용될 폼인 find_id_form.jsp를 생성합니다.
find_id_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 찾기</title>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${path}/resources/css/login/find.css" rel="stylesheet"/>
</head>
<body>
<header>
<jsp:include page="../common/header.jsp"/>
</header>
<main>
<div class="container">
<form id="findId_form" method="post">
<div class="title">
<a href="find_id_form">아이디 찾기</a>
</div>
<div class="input-box underline">
<input type="text" name="email" placeholder="이메일을 입력하세요." class="mail_input" required>
<div class="underline"></div>
<span class="final_mail_ck" style="color: red;">이메일을 입력해주세요.</span>
</div>
<div class="input-box button">
<input type="button" class="findId_button" value="아이디 찾기">
</div>
</form>
</div>
</main>
</body>
</html>find.css
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=IBM+Plex+Sans+KR:wght@200;300;400&family=Noto+Serif+KR:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gowun Dodum', sans-serif;
}
main{
height: 500px;
}
.container {
background: #fff;
width: 500px;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}
.container form .title {
font-size: 30px;
font-weight: 600;
margin: 20px 0 10px 0;
position: relative;
}
.container form .title:before {
content: '';
position: absolute;
height: 4px;
width: 33px;
left: 0px;
bottom: 3px;
border-radius: 5px;
}
.container form .input-box {
width: 100%;
height: 45px;
margin-top: 25px;
position: relative;
}
.container form .input-box input {
width: 100%;
height: 100%;
outline: none;
font-size: 16px;
border: none;
}
.container form .underline::before {
content: '';
position: absolute;
height: 2px;
width: 100%;
background: #ccc;
left: 0;
bottom: 0;
}
.container form .underline::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
left: 0;
bottom: 0;
transform: scaleX(0);
transform-origin: left;
transition: all 0.3s ease;
background: linear-gradient(to left, #99004d 0%, #ff0080 100%);
}
.container form .input-box input:focus ~ .underline::after, .container form .input-box input:valid
~ .underline::after {
transform: scaleX(1);
transform-origin: left;
}
.container form .button {
margin: 40px 0 20px 0;
}
.container .input-box input[type="button"] {
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
font-size: 17px;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.container .input-box input[type="submit"]:hover {
letter-spacing: 1px;
background: linear-gradient(to left, #99004d 0%, #ff0080 100%);
}
.container .option {
font-size: 14px;
text-align: center;
}
a {
text-decoration: none;
text-color: #black;
}
.sign_up a:hover{
text-decoration: underline;
}
/* 유효성 검사 문구 */
.final_mail_ck{
display: none;
}
.final_id_ck{
display: none;
}
1. MemberController.java에 아이디 찾기 폼으로 이동하기 위한 코드 추가
폼 생성 이후 MemberController.java에 아이디 찾기 버튼 클릭 시 아이디 찾기 폼으로 이동시키기 위한 코드를 추가합니다.
// 아이디 찾기 페이지 이동
@RequestMapping(value="/find_id_form")
public void findIdGET() {
logger.info("아이디 찾기 페이지 진입");
}
이후 기존 로그인 창에서 아이디 찾기 버튼을 클릭했을 때 아이디 찾기 폼으로 이동하도록 클릭 이벤트를 추가합니다.
<div class="sign_up">
<a href="#">비밀번호 찾기</a> |
<a href="find_id_form">아이디 찾기</a> |
<a href="join">회원가입</a>
</div>2. MemberMapper.xml에 아이디 찾기 sql작성
MemberMapper.xml에 아이디를 찾기 위한 쿼리문을 작성합니다.
저는 회원가입 시 사용자가 등록했던 이메일을 통해 아이디를 찾는 방법으로 진행했습니다.
<!-- 아이디 찾기 -->
<select id="getId" parameterType="String" resultType="String">
select id from member
where email = #{email} and member_status='Y'
</select>3. MemberMapper.java, MemberService.java, MemberServiceImpl.java 코드 작성
3-1. MemberMapper.java
MemberMapper.xml과의 연동을 위해 MemberMapper.java에 아래의 내용을 추가합니다.
/* 아이디 찾기 */
public String getId(String email);3-2. MemberService.java
MemberService.java 인터페이스에 아래의 내용을 추가합니다.
/* 아이디 찾기 */
public String getId(HttpServletResponse response, String email) throws Exception;3-3. MemberServiceImpl.java
MemberServiceImpl.java 클래스에 아이디 찾기에 사용될 로직을 추가합니다.
/* 아이디 찾기 */
@Override
public String getId(HttpServletResponse response, String email) throws Exception {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String id = membermapper.getId(email);
if (id == null) {
out.println("<script>");
out.println("alert('가입된 아이디가 없습니다.');");
out.println("history.go(-1);");
out.println("</script>");
out.close();
return null;
} else {
return id;
}
}4. MemberController.java에 아이디 찾기 버튼 클릭 시 실행될 로직 작성
다음으로 MemberController.java 클래스에 아래의 내용을 추가합니다.
/* 아이디 찾기 */
@RequestMapping(value = "/find_id")
public String getIdPOST(HttpServletResponse response, @RequestParam(value="email") String email, Model model) throws Exception{
model.addAttribute("id", memberService.getId(response, email));
logger.info("아이디 찾기 성공");
return "/member/find_id";
}여기서 주의할 점은 service단에서 PrintWriter out = response.getWriter();의 out을 이용해 alert을 띄우고, controller에서 redirect로 결과를 반환하면, "java.lang.IllegalStateException: 응답이 이미 커밋된 후에는, sendRedirect()를 호출할 수 없습니다."라는 에러가 발생합니다.
따라서 redirect 사용 없이 결과를 반환해야 합니다.
5. find_id.jsp 추가
src/main/webapp/WEB-INF/views/member 아래 검색된 아이디를 뷰에 출력할 find_id.jsp를 생성합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 찾기 결과</title>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${path}/resources/css/login/find.css" rel="stylesheet"/>
<style type="text/css">
.title {
font-size: 30px;
font-weight: 600;
margin: 20px 0 10px 0;
position: relative;
}
main{
height: 500px;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<header>
<jsp:include page="../common/header.jsp"/>
</header>
<main>
<div class="container">
<div class="title">
<a href="#">아이디 찾기 검색 결과</a>
</div>
<div class="input-box underline">
<p>고객님의 아이디는 <b>"${ id }"</b>입니다.</p>
<div class="underline"></div>
</div>
</div>
</main>
</body>
</html>6. find_id_form.jsp에 이메일 유효성 검사 추가
아이디 찾기를 위한 거의 모든 준비가 끝났습니다.
마지막으로 find_id_form.jsp에 이메일 유효성 검사를 추가해줍니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 찾기</title>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${path}/resources/css/login/find.css" rel="stylesheet"/>
</head>
<body>
<header>
<jsp:include page="../common/header.jsp"/>
</header>
<main>
<div class="container">
<form id="findId_form" method="post">
<div class="title">
<a href="find_id_form">아이디 찾기</a>
</div>
<div class="input-box underline">
<input type="text" name="email" placeholder="이메일을 입력하세요." class="mail_input" required>
<div class="underline"></div>
<span class="final_mail_ck" style="color: red;">이메일을 입력해주세요.</span>
</div>
<div class="input-box button">
<input type="button" class="findId_button" value="아이디 찾기">
</div>
</form>
</div>
</main>
<script>
/* 이메일 유효성 검사 */
var mailCheck = false; // 이메일
$(document).ready(function(){
/* 아이디 찾기 버튼 */
$(".findId_button").click(function(){
/* 입력값 변수 */
var mail = $('.mail_input').val(); // 이메일 입력란
/* 이메일 유효성 검사 */
if(mail == ""){
$('.final_mail_ck').css('display', 'block');
mailCheck = false;
} else {
$('.final_mail_ck').css('display', 'none');
mailCheck = true;
}
/* 최종 유효성 검사 */
if(mailCheck){
$('#findId_form').attr("action", "../member/find_id");
$('#findId_form').submit();
}
});
});
</script>
</body>
</html>해당 코드는 이메일 입력 값 없이 아이디 찾기 버튼을 클릭하면, 화면 단에 "이메일을 입력해주세요."라는 문구가 출력되게 하기 위한 것입니다.
7. 테스트
DB에 저장된 이메일을 입력했을 시
DB에 저장되지 않은 이메일을 입력했을 시
반응형