[섹션7][미니프로젝트-회원관리] 48~54강

48. 회원가입 - 유효성 검사 처리

1. join.jsp에서 form 태그를 스프링에서 제공하는 커스텀태그로 변경하기

커스텀태그라이브러리 추가

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

- 수정 전

<form action="${root }user/login" method="get">
    <div class="form-group">
        <label for="user_name">이름</label>
        <input type="text" id="user_name" name="user_name" class="form-control"/>
    </div>
    <div class="form-group">
        <label for="user_id">아이디</label>
        <div class="input-group">
            <input type="text" id="user_id" name="user_id" class="form-control"/>
            <div class="input-group-append">
                <button type="button" class="btn btn-primary">중복확인</button>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="user_pw">비밀번호</label>
        <input type="password" id="user_pw" name="user_pw" class="form-control"/>
    </div>
    <div class="form-group">
        <label for="user_pw2">비밀번호 확인</label>
        <input type="password" id="user_pw2" name="user_pw2" class="form-control"/>
    </div>
    <div class="form-group">
        <div class="text-right">
            <button type="submit" class="btn btn-primary">회원가입</button>
        </div>
    </div>
</form>

- 수정 후

action을 user/join_pro 로 바꾸고 modelAttribute="joinUserBean"도 추가

form:label, form:input, form:errors 로 변경

<form:form action="${root }user/join_pro" method='post' modelAttribute="joinUserBean">
    <div class="form-group">
        <form:label path="user_name">이름</form:label>
        <form:input path="user_name" class="form-control"/>
        <form:errors path="user_name"/>
    </div>
    <div class="form-group">
        <form:label path="user_id">아이디</form:label>
        <div class="input-group">
            <form:input path="user_id" class="form-control"/>
            <div class="input-group-append">
                <button type="button" class="btn btn-primary">중복확인</button>
            </div>
        </div>
        <form:errors path="user_id"/>
    </div>
    <div class="form-group">
        <form:label path="user_pw">비밀번호</form:label>
        <form:input path="user_pw" class="form-control"/>
        <form:errors path="user_pw"/>
    </div>
    <div class="form-group">
        <form:label path="user_pw2">비밀번호 확인</form:label>
        <form:password path="user_pw2" class="form-control"/>
        <form:errors path="user_pw2"/>
    </div>
    <div class="form-group">
        <div class="text-right">
            <form:button class='btn btn-primary'>회원가입</form:button>
        </div>
    </div>
</form:form>

2. 컨트롤러에서 join메소드의 매개변수 joinUserBean 넣어주기

join.jsp에 modelAttribute="joinUserBean" 이라고 등록을 했으므로

아래와 같이 UserController에서 join메소드에 "joinUserBean"의 이름으로 UserBean을 매개변수로 넣어준다.

3. UserBean에서 유효성검사 조건 설정하기

4. 컨트롤러에서 join_pro 메소드 만들기

join_pro메소드에 joinUserBean, 결과값을 가지고 있는 BindingResult도 주입받기.

5. 에러메시지 프로퍼티 파일 & ServletAppContext에 메시지로 등록

Size.joinUserBean.user_name = 사용자 이름은 2 ~ 4글자여야 합니다
Size.joinUserBean.user_id = 사용자 아이디는 4 ~ 20글자여야 합니다
Size.joinUserBean.user_pw = 비밀번호는 4 ~ 20글자여야 합니다
Size.joinUserBean.user_pw2 = 비밀번호는 4 ~ 20글자여야 합니다
Pattern.joinUserBean.user_name = 사용자 이름은 한글만 허용합니다
Pattern.joinUserBean.user_id = 사용자 아이디는 영문대소문자, 숫자만 허용합니다
Pattern.joinUserBean.user_pw = 비밀번호는 영문대소문자, 숫자만 허용합니다
Pattern.joinUserBean.user_pw2 = 비밀번호는 영문대소문자, 숫자만 허용합니다

//메시지와의 충돌 방지용. 프로퍼티파일과 메시지를 구분하여 별도로 관리 해주는 빈.
@Bean
public static PropertySourcesPlaceholderConfigurer propertySourcesPlaceholderConfigurer() {
    return new PropertySourcesPlaceholderConfigurer();
}

// 에러프로퍼티파일을 메시지로 등록
@Bean
public ReloadableResourceBundleMessageSource messageSource() {
    ReloadableResourceBundleMessageSource res = new ReloadableResourceBundleMessageSource();
    res.setBasenames("/WEB-INF/properties/error_message");
    return res;
}

6. 비밀번호 확인 기능을 위해 Validator만들기 & 프로퍼티파일에 에러메시지 추가하기

비밀번호가 같은지 확인하기 위해서는 기본 기능으로 불가능하여 Validator를 따로 만들어 줘야 한다.

public class UserValidator implements Validator{

	@Override
	public boolean supports(Class<?> clazz) {
		// TODO Auto-generated method stub
		return UserBean.class.isAssignableFrom(clazz);//이건 코드가 정해져 있음. 이대로 쓰면된다.
	}

	@Override
	public void validate(Object target, Errors errors) {
		// TODO Auto-generated method stub
		UserBean userBean = (UserBean)target;
		
		if(userBean.getUser_pw().equals(userBean.getUser_pw2()) == false) {
			errors.rejectValue("user_pw", "NotEquals");
			errors.rejectValue("user_pw2", "NotEquals");
		}
	}
}

NotEquals.joinUserBean.user_pw = 비밀번호가 일치하지 않습니다.
NotEquals.joinUserBean.user_pw2 = 비밀번호가 일치하지 않습니다.

7. UserController에 등록하기

@InitBinder
	public void initBinder(WebDataBinder binder) {
		UserValidator validator1 = new UserValidator();
		binder.addValidators(validator1);
	}

이제 실행해보면, 비밀번호를 다르게 지정하고 회원가입 버튼을 누르면 아래와 같이 에러메시지가 뜬다.

49. 회원가입 - 아이디 중복 확인 처리

아이디 중복 확인 처리를 위하여 RestController와 Ajax통신을 사용하기.

 

1. 중복처리를 위한 UserMapper클래스 만들기 & ServletAppContext에 UserMapper등록하기

오라클데이터베이스에 아래의 select 쿼리로 id를 확인하여 중복처리 하기. 

오라클에 먼저 쿼리 작성후 UserMapper에 복붙한다. user_id는 {}로 받아온다.

2. UserDao → UserService → RestApiController 순으로 작성하기

UserService에서 저장된 아이디가 없으면 true라고 출력되도록 하기

실행 후 주소를 아래와 같이 넣으면, abcd라고 저장된 아이디가 없기 때문에 true라고 나온다.

3. join.jsp 파일의 중복확인버튼에 onclinck 넣고, ajax로 script넣기

실행하고 아이디 입력해주면 아래와 같이 동작한다. ajax통신을 이용했기 때문에 페이지는 바뀌지 않는다.

4. 유효성 검사 넣기

Spring MVC에서 유효성검사를 하기 위해서는 <form:input> 에 값이 들어와 있어야지만 서버에서 값을 주입받아서 validator를 통과해서 유효성 검사가 가능했다.

사용자가 유효성 검사를 했는지 안했는지를  판단하기 위해서 join.jsp에서 <form:hidden>태그를 써서 값을 담을수 있지만 보이지 않도록 하자.

 

join.jsp에 <form:hidden>태그 추가 & $("#userIdExist") 2줄 추가 

→ UserBean.java에 userIdExist변수, 생성자 추가 & 게터세터메소드추가 

→ UserValidator.java에 isUserIdExist()이용한 if문 추가  → error_message.properties 추가

그런데 중복확인 후에 아이디를 수정하면, 다시 중복확인 하라는 메시지를 다시 띄워야 한다.

join.jsp에 가서 아래와 같이 추가 해주기.

50. 회원가입 - 저장처리

1. UserMapper → UserDao → UserService → UserController 순으로 작성하기

빨간표시 된 부분만 추가하기

 

2. join_success.jsp 만들기

UserController에서 return하는 join_success.jsp 만들기

실행하고 회원가입하면 alert잘뜨고, 데이터베이스에도 잘 저장이 되었다.

51. 로그인 처리

아이디 비밀번호 입력에 대한 유효성검사 처리, 로그인 성공 시 사용자 정보를 세션영역에 저장하기.

 

1. UserBean을 RootAppContext에서 SessionScope로 등록하기

"loginUserBean"이란 이름으로 세션스코프등록. 컨트롤러에서 잘 출력되는지 확인하기

2. login.jsp를 커스텀태그로 구현하기

오른쪽 코드로 변경하기

3. UserController의 login, login_pro메소드에 파라미터로 UserBean주입받기

4. error_message.properties 파일에 아래코드 추가하기

실행하고 로그인버튼 누르면, 500서버오류가 뜬다. UserValidator에서 아래처럼 작성해주면 해결된다.

5. 로그인시 아이디/ 비밀번호가 맞는지 확인하는 기능의 Mapper → Dao → Service → Controller 순으로 작성하기

6. login_fail.jsp 만들기

실행 후, 로그인시 비밀번호를 잘못 입력시 alert메시지가 작동된다.

7. login_success.jsp 만들기

8. 로그인 실패 창 없애기 

로그인 실패했을 때만 떠야하는데, 성공해도 로그인실패가 뜨기때문에 파라미터로 처리해주기.

UserController에 @RequestParam으로 fail이란 이름의  파라미터에 true가 들어오면 로그인실패창 띄우고,

true가 안들어오면 false가 디폴트값이 되므로 false가 파라미터에 들어가면 로그인실패창을 띄우지 않는다.

model에 값을 담아준다. 이 값을 login.jsp로 전달한다.

login.jsp에 if설정으로 fail이 true이면 로그인실패 창 띄우도록 조건을 추가한다.

login_fail.jsp에도 경로에 fail=true추가한다.

52. 상단 메뉴 처리 및 로그아웃

로그인, 회원가입은 로그인 전에만 표시되고, 로그아웃, 정보수정은 로그인 후에만 표시되도록 처리하기.

상단메뉴는 항상 표시되기 때문에 TopMenuInterceptor에서 처리를 했었다. 이것도 마찬가지로 여기서 처리해야 한다.

그런데, 자바에서 인터셉터는 빈을 주입받을수가 없다고 했었다.

그래서 인터셉터를 정의한 ServletAppContext에서 빈을 주입받아서 인터셉터로 전달을 시키도록 하자.

 

1. ServletAppContext에서 빈 주입받고 TopMenuInterceptor에서 전달받기

2. Top_Menu.jsp 분기하기

분기 전과 후 비교

실행 후 로그인하면, 로그아웃, 정보수정만 보인다. 

 

3. 로그아웃 처리하기

로그아웃 처리는 아래 한줄만 추가해주면 된다.

실행 후 로그아웃하면, 로그인, 회원가입만 보인다. 

53. 로그인 확인 처리

로그인 처리를 하더라도 웹은 항상 URL을 통해 접근할 수 있다는 것을 염두해두어야 한다.

로그인을 하지 않으면 접근하지 못하도록 처리를 해야한다.

인터셉터에서 로그인여부를 확인하고 로그인했을 때만 다음단계로 진행되도록 처리한다.

 

1. 로그인확인처리 로직의 인터셉터 CheckLoginInterceptor 생성하기

loginUserBean이 false라면 return값은 false를 준다.

인터셉터에서 false를 주면 다음단계로 넘어가지 않고 여기서 끝나게 된다.

만약 loginUserBean이 true라면 return값은 true가 된다.

2. ServletAppContext에 CheckLoginInterceptor 등록하기

modify, logout, board하위주소는 요청시 인터셉터 거치도록 설정, board/main은 제외설정

 

3. UserController에 not_login()메소드 추가 & not_login.jsp 생성하기 

실행 후 주소창에 user/modify를 쳐보면 튕긴다.

인터셉터의 하는 역할이 다 이런식의 역할이다.

54. 정보 수정 처리

1. modify.jsp 커스텀태그 처리하기

readonly ="true" 로 하면 수정은 불가능하지만 여기서 입력받은 데이터는 서버로 전달되어 파라미터로 주입된다.

2. UserController에 매개변수로 주입받기

3. 데이터베이스에서 사용자 정보를 가져와서 정보수정페이지 구성하기

Mapper → Dao → Service → Controller 순으로 작성하기

4. 유효성 검사 처리하기

modify_pro작성, error_message작성, UserValidator 분기하기

5. 실제로 수정 처리 하기

Mapper → Dao → Service → Controller 순으로 작성하기 & modify_success.jsp 작성하기

 

출처 : [인프런] 윤재성의 만들면서 배우는 Spring MVC 5