12.09.(금) Spring Framework(8): 회원관리 기능(2)

회원가입 기능

MemberController.java 매핑을 해주자.

package com.poby.myapp.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.poby.myapp.service.MemberService;

@Controller
public class MemberController {
	// 클래스를 찾아 객체를 생성해주는 어노테이션
	@Autowired
	MemberService service;
	
	// 회원가입 페이지
	@RequestMapping("/member/signup")
	public String signup() {
		return "member/signup";
	}
}

@Autowired 어노테이션은 객체를 생성해준다. 인터페이스는 new로 객체를 생성할 수 없기 때문에 사용한다.

views폴더 아래 member폴더를 만들고, signup.jsp를 생성하자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<title>회원가입</title>

<div class="container">
	<h1>회원가입 Form</h1>
	<form method="post" action="/member/signupOk">
		<ul>
			<li>아이디</li>
			<li>
				<input type="text" name="username" id="username">
				<input type="button" value="중복확인">
			</li>
			<li>비밀번호</li>
			<li><input type="password" name="password" id="password"></li>
			<li>비밀번호 확인</li>
			<li><input type="password" name="v-password" id="v-password"></li>
			<li>이름</li>
			<li><input type="text" name="name" id="name"></li>
			<li>연락처</li>
			<li>
				<input type="text" name="tel1" id="tel1">-
				<input type="text" name="tel2" id="tel2">-
				<input type="text" name="tel3" id="tel3">
			</li>
			<li>이메일</li>
			<li><input type="text" name="email" id="email"></li>
			<li>우편번호</li>
			<li><input type="text" name="zipcode" id="zipcode"></li>
			<li>주소</li>
			<li><input type="text" name="addr" id="addr"></li>
			<li>상세주소</li>
			<li><input type="text" name="detailaddr" id="detailaddr"></li>
			<li><input type="submit" value="회원가입"></li>
		</ul>
	</form>
</div>

아이디 중복확인

중복확인 버튼을 누르면 팝업창을 띄워 확인 후 적용하는 기능이다. jQuery를 이용해서 만들 수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script>
	$(function(){
		$("#idCheck").click(function(){
			if($("#username").val()!=""){
				window.open("/myapp/member/idCheck?username="+$("#username").val(),"idCheck","width=500px, height=400px");
			}else{
				alert("아이디를 입력해주세요.")
			}
		});
	});
</script>
<title>회원가입</title>

<div class="container">
	<h1>회원가입 Form</h1>
	<form method="post" action="/myapp/member/signupOk">
		<ul>
			<li>아이디</li>
			<li>
				<input type="text" name="username" id="username">
				<input type="button" value="중복확인" id="idCheck">
			</li>
			<li>비밀번호</li>
			<li><input type="password" name="password" id="password"></li>
			<li>비밀번호 확인</li>
			<li><input type="password" name="v-password" id="v-password"></li>
			<li>이름</li>
			<li><input type="text" name="name" id="name"></li>
			<li>연락처</li>
			<li>
				<input type="text" name="tel1" id="tel1">-
				<input type="text" name="tel2" id="tel2">-
				<input type="text" name="tel3" id="tel3">
			</li>
			<li>이메일</li>
			<li><input type="text" name="email" id="email"></li>
			<li>우편번호</li>
			<li><input type="text" name="zipcode" id="zipcode"></li>
			<li>주소</li>
			<li><input type="text" name="addr" id="addr"></li>
			<li>상세주소</li>
			<li><input type="text" name="detailaddr" id="detailaddr"></li>
			<li><input type="submit" value="회원가입"></li>
		</ul>
	</form>
</div>

signup페이지에서 클라이언트가 아이디를 입력하고나서 중복확인 버튼을 누르면, 입력값을 parameter로 설정하고 idCheck페이지(팝업)을 띄운다. 이는 새로운 창이기 때문에 당연히 MemberController에 매핑해줘야 한다.

// 아이디 중복확인 팝업
@RequestMapping("/member/idCheck")
public String idCheck() {
	return "member/idCheck";
}

idCheck.jsp 생성

idCheck.jsp를 생성해서 구성하자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!-- parameter로 넘어온 변수 : username -->
<style>
	.topMenu, .bottomMenu{
		display:none;
	}
</style>
<div>
	<div>
		아이디 중복확인
	</div>
	<hr>
	<div>
		<form action="/myapp/member/idCheck">
			아이디 입력 : <input type="text" name="username" id="username" value="${ param.username }">
			<input type="submit" value="중복확인">
		</form>
	</div>
</div>

parameter로 넘어온 username을 입력칸에 넣어주고 form태그로 DB에 값을 넘겨주어 DB에 중복되는 아이디가 있는지 확인하자.

순서는 이렇다:

idCheck.jsp → MemberController.idCheck() → MemberService.idCheck() → MemberServiceImpl.idCheck() → MemberDAO.idCheck() → memberMapper.xml 쿼리문 실행 후 역순으로 실행

MemberDAO인터페이스에 메소드 생성

package com.poby.myapp.dao;

public interface MemberDAO {
	// 아이디 중복확인
	public int idCheck(String username);
}

매개변수로 username을 넣어준다.

나중에 나오겠지만, 여기서 매개변수는 예전에 DAO에서 메소드를 이용해 DB쿼리를 할때 SQL문에 만들었던 ?를 PreparedStatement.setString()으로 지정해준 것과 같다.

MemberService인터페이스에 메소드 생성

DAO에서 생성한 메소드를 동일하게 생성한다.

package com.poby.myapp.service;

public interface MemberService {
	public int idCheck(String username);
}

MemberServiceImpl클래스에서 오버라이딩

package com.poby.myapp.service;

import javax.inject.Inject;

import org.springframework.stereotype.Service;

import com.poby.myapp.dao.MemberDAO;

@Service
public class MemberServiceImpl implements MemberService {
	@Inject
	MemberDAO dao;

	@Override
	public int idCheck(String username) {
		return dao.idCheck(username);
	}
}

@Inject어노테이션은 @Autowired와 이름만 다른 어노테이션이다.

memberMapper.xml에서 쿼리문 작성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.poby.myapp.dao">
	<select id="idCheck">
		select count(username) cnt from member_tbl where username=#{param1}
	</select>
</mapper>

#{param1} = 'param1'

${param1} = param1 이렇게 홀따옴표가 붙는지 안 붙는지에 따라서 알맞게 쓰면 된다.

param값은 MemberServiceImpl.idCheck()의 매개변수 username이다.

MemberController.java에서 idCheck()메소드 실행

// 아이디 중복확인 팝업
@RequestMapping("/member/idCheck")
public String idCheck(String username, Model model) {
    // DB에 username이 이미 존재하는지 확인
    int result = service.idCheck(username);

    model.addAttribute("username", username);	// 검색 조건
    model.addAttribute("result", result);		// 검색 결과

    return "member/idCheck";
}

service.idCheck는 @Service인 MemberServiceImpl클래스의 idCheck를 말한다.

컨트롤러의 idCheck의 매개변수에 form태그에서 submit된 username과 동일한 이름의 매개변수를 넣으면 parameter값을 받아올 수 있고, 검색한 아이디값과 결과를 attribute로 돌려주기 위해 Model도 매개변수로 넣어주었다. ModelAndView를 사용해도 무방하다.

idCheck.jsp에서 중복확인결과 표시 및 재확인 기능 구현

우선 중복된 아이디인지 아닌지를 가장 위에 표시해주고, 사용 가능하다면 사용하기 버튼을 만들어서 팝업창을 닫고, 사용이 불가하면 다시 중복확인을 실행해서 동일한 창에 결과를 띄우도록 할 것이다. 이 기능은 JSTL의 if태그를 사용한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!-- parameter로 넘어온 변수 : username -->
<style>
	.topMenu, .bottomMenu{
		display:none;
	}
	b{
		color:blue;
		text-decoration:underline;
	}
</style>
<script>
	$(function(){
		$("#idCheckForm").submit(function(){
			if($("#userid").val()==""){
				alert("아이디를 입력하세요.");
				return false;
			}
			return true;
		});
	});
</script>
<div>
	<div>
		<!-- 사용 가능 -->
		<c:if test="${ result==0 }">
			<b>${ username }</b>는 사용 가능한 아이디입니다.
			<input type="button" value="사용하기">
		</c:if>
		<!-- 사용 불가능 -->
		<c:if test="${ result==1 }">
			${ username }는 사용 불가한 아이디입니다.
		</c:if>
	</div>
	<hr>
	<div>
		<form action="/myapp/member/idCheck" onsubmit="return idCheck()" id="idCheckForm">
			아이디 입력 : <input type="text" name="username" id="username" value="${ param.username }">
			<input type="submit" value="중복확인">
		</form>
	</div>
</div>

jQuery를 이용해서 form태그에서 아이디 입력칸이 채워졌을때만 submit하게 만들었다.

이제 사용하기 버튼을 눌러서 팝업창을 닫을때 사용할 아이디를 원래 회원가입 페이지의 input태그에 넣어주자.

javascript의 opener기능을 이용하면 부모창(회원가입 페이지)에게 적용할 수 있다.

<script>
	function setUsername(success){
			// DB검색해서 사용 가능한 아이디 회원등록Form에 표시하고
			opener.document.getElementById("username").value = success;
			
			// window 닫기
			window.close();
	}
</script>

<!-- 사용 가능 -->
<c:if test="${ result==0 }">
    <b>${ username }</b>는 사용 가능한 아이디입니다.
    <input type="button" value="사용하기" onclick="setUsername('${ username }')">
</c:if>

signup.jsp에서 id="username"인 곳의 값(value)를 setUsername함수의 매개변수로 설정해주는 함수다.

해당 함수를 사용하기 버튼이 클릭될 때 실행되도록(onclick) 설정했다. 매개변수는 검색 조건인 username이다.

아이디 수정 후 다시 중복확인

이렇게 확정시키고도 마음이 바뀌어서 아이디를 바꾸고 싶을때, 다시 중복확인을 실행하도록 해줘야한다.

회원가입 페이지에서 중복확인을 한 상태인지 아닌지 상태를 알려주는 hidden타입의 input을 넣어주자.

<li>아이디</li>
<li>
	<input type="text" name="username" id="username">
	<input type="button" value="중복확인" id="idCheck">
	<input type="hidden" value="N" id="idCheckStatus">
</li>

id를 idCheckStatus라고 지어주고, 기본값은 N(중복 확인 안 됨)으로 설정한다.

<script>
	$(function(){
		$("#idCheck").click(function(){
			if($("#username").val()!=""){
				window.open("/myapp/member/idCheck?username="+$("#username").val(),"idCheck","width=500px, height=400px");
			}else{
				alert("아이디를 입력해주세요.")
			}
		});
		
		$("#username").keyup(function(){
			$("#idCheckStatus").val("N");
		});
	});
</script>

jQuery를 이용해서 #username의 입력창에서 키가 눌렀다 떼었을때 idCheckStatus가 N(중복확인 안 됨)으로 설정되도록 만들었다.

다시 idCheck.jsp 팝업창으로 가서 사용하기 버튼을 눌렀을 때, 부모창에 있는 idCheckStatus가 Y(중복확인 됨)으로 바뀌게 설정하자.

<script>
	function setUsername(success){
		// DB검색해서 사용 가능한 아이디 회원등록Form에 표시하고
		opener.document.getElementById("username").value = success;
		opener.document.getElementById("idCheckStatus").value = "Y";
		
		// window 닫기
		window.close();
	}
</script>