스프링부트+jsp로 배달사이트 만들기-05 회원가입 01

스프링부트+jsp로 배달사이트 만들기-05 회원가입 01

2021. 12. 4. 23:58ㆍ스프링부트

UserController에 회원가입 페이지를 추가합니다

@GetMapping("/join")
public String join() {
    return "user/join";
}

회원가입을 할 페이지 join.jsp를 user폴더에 붙여넣습니다

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/link.jsp" %>

<link rel="stylesheet" href="/css/user/login.css">
</head>
<body>
	<main>
		<div class="login_box">
        	<a href="/"><img src="/img/bamin2.png" alt="이미지" class="bm_img"></a>
				<form action="/join" method="post" >
					<div class="input_aera">
		            	<input type="text" name="username" class="username" maxlength="20"  placeholder="아이디를 입력해 주세요" >
						<span class="msg_box">${errorMsg.username }</span>
	            	</div>          
		               
					<div class="input_aera">
						<input type="password" class="password1" name="password" maxlength="20"  placeholder="비밀번호를 입력해 주세요">
					</div>
	               
					<div class="input_aera">
						<input type="password" class="password2" maxlength="20"  placeholder="비밀번호를 한번더 입력해 주세요">
			            <span class="msg_box">${errorMsg.password }</span>
	               	</div>
		               
	               	<div class="input_aera">
	               		<input type="text" name="email" class="email"  placeholder="이메일을 입력해 주세요" >
		                <span class="msg_box">${errorMsg.email }</span>
               		</div>
		               
					<div class="input_aera">
						<input type="text" class="nickname" name="nickname" maxlength="20"  placeholder="사용하실 닉네임을 입력해 주세요">
	               		<span class="msg_box">${errorMsg.nickname }</span>
					</div>
		               
					<div class="input_aera">
						<input type=number name="phone" value="" class="phone" placeholder="'-' 없이 입력해 주세요" maxlength="11" >
	                    <span class="msg_box">${errorMsg.phone }</span>
	                </div>
	                
	               <input type="submit" value="회원가입" class="login_btn" >
			</form>
        </div>

    </main>
</body>
</html>

<input type="text" name="username" class="username" maxlength="20"  placeholder="아이디를 입력해 주세요" >

form 태그안 input태그의 값을 서버로 name으로 준 키(username)로 전달합니다

데이터를 받을 코드를 Usercontroller에 추가합니다

	@PostMapping("/join")
	public String joinProc(Join join) {
		
		System.out.println(join);
		
		return "redirect:/login";
	}

<form> 태그의 method 타입이 post이기 때문에 컨트롤러에서도 Post로 받아야합니다

데이터를 String username, Strind password.. 이런식으로 받을수 있지만 데이터가 많을경우 파라미터가 너무 길어집니다

그래서 dto패키지를 추가하고 데이터를 받을 그릇인 join클래스를 생성합니다

package com.baemin.dto;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class Join {
	
	private String username;
	
	private String password;
		
	private String email;
	
	private String nickname;
	
	private String phone;
}

@getter, @setter 어노테이션은 getter/setter를 편하게 생성해주는 lombok의 어노테이션인데 이클립스에 롬복을 사용하려면 추가로 설정을 해줘야합니다

https://congsong.tistory.com/31

이클립스(Eclipse)에 롬복(Lombok) 설치하기

롬복은 테이블을 구조화한 도메인 클래스(Entity 또는 DTO, VO)에서 getter/setter 메서드와 toString, equals, hashCode 등의 메서드를 애너테이션으로 사용할 수 있도록 해주는 라이브러리입니다. 이외에도

congsong.tistory.com

회원가입 페이지에서 회원정보를 입력후 회원가입 버튼을 누르면 데이터를 받을수 있습니다

이렇게만 하면 엉뚱한 데이터가 들어올 수 있으니 유효성 검사를 해야합니다

pom.xml에 validation라이브러리를 추가합니다

		<!-- 유효성 검사 -->
		<dependency>
		    <groupId>org.springframework.boot</groupId>
		    <artifactId>spring-boot-starter-validation</artifactId>
		</dependency>

join클래스를 수정합니다

package com.baemin.dto;

import javax.validation.constraints.Pattern;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class Join {
	
	@Pattern(regexp = "[A-Za-z0-9]{4,15}$", message = "아이디는 영어, 숫자 4 ~15자리로 입력 가능합니다")
	private String username;
	
	private String password;
		
	@Pattern(regexp = "^([0-9a-zA-Z_\\.-]+)@([0-9a-zA-Z_-]+)(\\.[0-9a-zA-Z_-]+){1,2}$" , message = "올바른 이메일 형식이 아닙니다")
	private String email;
	
	@Pattern(regexp = "^[가-힣|a-z|A-Z|0-9|]+$", message = "닉네임은 한글, 영어, 숫자만 4 ~10자리로 입력 가능합니다")
	private String nickname;
	
	@Pattern(regexp = "^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$", message = "휴대폰번호를 확인해 주세요")
	private String phone;
}

필드에 붙은 @Pattern 어노테이션은 validation라이브러리 추가후 사용할수있는데

regexp에 검사할 정규식과 맞지 않으면 message를 출력해줍니다

컨트롤러의 joinPro 메서드도 수정합니다

	@PostMapping("/join")
	public String joinProc(@Valid Join join, BindingResult bindingResult, Model model) {
		System.out.println(join);
		if(bindingResult.hasErrors()) {
			System.out.println("에러");
			
			List<FieldError> list = bindingResult.getFieldErrors();
			Map<String, String> errorMsg = new HashMap<>();
			
			for(int i=0;i<list.size();i++) {
				String field = list.get(i).getField(); 
				String message = list.get(i).getDefaultMessage(); 
						
				System.out.println("필드 = " + field);
				System.out.println("메세지 = " +message);
				
				errorMsg.put(field, message);
			}
			model.addAttribute("errorMsg", errorMsg);
			return "user/join";
		}
		
		
		return "redirect:/login";
	}

에러가 있을경우 List<FieldError> list = bindingResult.getFieldErrors();을 통해 에러정보를 확인하고 에러난 필드와 메세지를 map에 담아 화면에 보여줍니다

이메일의 경우 @Email을 사용해도 되지만 이 어노테이션은 null을 허용하기때문에 패턴을 넣었습니다

@Pattern 외에도 @NotBlank, @NotNull 등이 있지만 어노테이션을 여러개 붙일경우 형식에 맞지 않는 모든 메세지를 출력합니다

username의 값을 공백을 준 결과인데 화면에는 두개의 메세지중 랜덤으로 표시되게 됩니다

프론트에서도 유효성검사를 하기위해 join.jsp를 수정합니다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/link.jsp" %>

<link rel="stylesheet" href="/css/user/login.css">
</head>
<body>
	<main>
		<div class="login_box">
        	<a href="/"><img src="/img/bamin2.png" alt="이미지" class="bm_img"></a>
				<form action="/join" method="post" onsubmit="return isSubmit.isSubmit();">
					<div class="input_aera">
		            	<input type="text" name="username" class="username" autofocus maxlength="20" required placeholder="아이디를 입력해 주세요" >
						<span class="msg_box">${errorMsg.username }</span>
	            	</div>          
		               
					<div class="input_aera">
						<input type="password" class="password1" name="password" maxlength="20" required placeholder="비밀번호를 입력해 주세요">
					</div>
	               
					<div class="input_aera">
						<input type="password" class="password2" maxlength="20" required placeholder="비밀번호를 한번더 입력해 주세요">
			            <span class="msg_box">${errorMsg.password }</span>
	               	</div>
		               
	               	<div class="input_aera">
	               		<input type="text" name="email" class="email" required placeholder="이메일을 입력해 주세요" >
		                <span class="msg_box">${errorMsg.email }</span>
               		</div>
		               
					<div class="input_aera">
						<input type="text" class="nickname" name="nickname" maxlength="20"  placeholder="사용하실 닉네임을 입력해 주세요">
	               		<span class="msg_box">${errorMsg.nickname }</span>
					</div>
		               
					<div class="input_aera">
						<input type=number name="phone" value="" class="phone" placeholder="'-' 없이 입력해 주세요" onkeypress="return lenthCheck(this, 11);" >
	                    <span class="msg_box">${errorMsg.phone }</span>
	                </div>
	                
	               <input type="submit" value="회원가입" class="login_btn" >
			</form>
        </div>
    </main>
    
    <script src="/js/util/util.js"></script>
	<script type="text/javascript" src="/js/user/join.js"></script>
</body>
</html>

js파일을 사용하기 위해 js폴더를 만들고 아래 파일을 추가합니다

util.js

function usernameCheck(username) {
	const regUsername =  /^[A-Za-z0-9]{4,15}$/;
	
	if(regUsername.test(username)) {
		return true;
	} else {
		return false;
	}
}

function emailCheck(email){
	const regEmail = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
	
	if(regEmail.test(email)) {
		return true;
	} else {
		return false;
	}
}

function phoneCheck(phone){
	const regPhone = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;
	if(regPhone.test(phone)) {
		return true;
	} else {
		return false;
	}
}


function nicknameCheck(nickname) {
	const regNickname = /^[가-힣|a-z|A-Z|0-9|]+$/;
	if (regNickname.test(nickname)) {
		return true;
	} else {
		return false;
	}
}



function lenthCheck(e, length) {
	if(e.value.length >= length) {
		return false;
	}
	
	$(this).off().focusout(function(){
		if(e.value.length > length) {
			e.value = "";
		}
	})
	
	return true; 
}

join.js

$(".login_btn").css("background", "#ddd");


const isSubmit = (function(){
	let usernameCheck = false;
	let passwordCheck = false;
	let emailCheck = false;
	let nicknameCheck = false;
	let phoneCheck = false;
	
	const setUsernameCheck = function(set){
		usernameCheck = set ? true : false;
		isSubmit();
	}
	const setpasswordCheck = function(set){
		passwordCheck = set ? true : false;
		isSubmit();
	}
	const setemailCheck = function(set){
		emailCheck = set ? true : false;
		isSubmit();
	}
	const setnicknameCheck = function(set){
		nicknameCheck = set ? true : false;
		isSubmit();
	}
	const setphoneCheck = function(set){
		phoneCheck = set ? true : false;
		isSubmit();
	}
	
	const isSubmit = function(){
		if(usernameCheck && passwordCheck && emailCheck && nicknameCheck && phoneCheck) {
			$(".login_btn").css("background", "#2AC1BC");
			return true;
		} else {
			$(".login_btn").css("background", "#ddd");
			return false;
		}
	}
	
	return {
		setUsernameCheck : setUsernameCheck,
		setpasswordCheck : setpasswordCheck,
		setemailCheck : setemailCheck,
		setnicknameCheck : setnicknameCheck,
		setphoneCheck : setphoneCheck,
		isSubmit : isSubmit
	}
})();





function overlapCheck(data) {
	/*
	let isUseable = false;
	$.ajax({
		url: "/overlapCheck",
		type: "get",
		data: data,
		async: false
	})
	.done(function(result){
		if(result == 0 ) {
			isUseable = true;
		} 
	})
	.fail(function(){
		alert("에러");
	});
	
	return isUseable;
	*/
}




function pwdCheck() {
	const password1 = $(".password1").val().replaceAll(" ", "");
	const password2 = $(".password2").val().replaceAll(" ", "");
	const msgBox = $(".password2").siblings(".msg_box"); 
	
	if(password1 && password2) {
		if(password1.includes(" ")  || password2.includes(" ")) {
			msgBox.text("비밀번호를 확인해 주세요");
			isSubmit.setpasswordCheck(false);
			return;
		}
		
		if(password1 != password2) {
			msgBox.text("비밀번호를 확인해 주세요");
			isSubmit.setpasswordCheck(false);
		} else {
			msgBox.text("");
			console.log("사용가능");
			isSubmit.setpasswordCheck(true);
		}
	}
	
}





$(".username").focusout(function(){
	const username = $(".username").val().replaceAll(" ", "");
	const msgBox = $(this).siblings(".msg_box"); 
	
	if(!username) {
		msgBox.text("아이디를 입력해주세요");
		isSubmit.setUsernameCheck(false);
		return;
	}
	
	if(!usernameCheck(username)) {
		msgBox.text("사용할수 없는 아이디입니다");
		isSubmit.setUsernameCheck(false);
		return;
	}
	
	const data = {
		value : username,
		valueType : "username" 
	};
	
	
	if(overlapCheck(data)) {
		msgBox.text("사용 가능합니다");
		isSubmit.setUsernameCheck(true);
	} else {
		msgBox.text("이미 사용중인 아이디입니다");
		isSubmit.setUsernameCheck(false);
	}
});


$(".password1").focusout(function() {
	pwdCheck();
});

$(".password2").focusout(function() {
	pwdCheck();
});



$(".email").focusout(function() {
	const email = $(".email").val();
	const msgBox = $(this).siblings(".msg_box"); 

	if (!email) {
		msgBox.text("이메일을 입력해 주세요");
		isSubmit.setemailCheck(false);
		return;
	}

	if(!emailCheck(email)) {
		msgBox.text("사용 불가능합니다");
		isSubmit.setemailCheck(false);
	} else {
		msgBox.text("");
		isSubmit.setemailCheck(true);
	}
}); 




$(".nickname").focusout(function() {
	const nickname = $(".nickname").val();
	const msgBox = $(this).siblings(".msg_box"); 

	if (!nickname) {
		msgBox.text("닉네임을 입력 해주세요");
		isSubmit.setnicknameCheck(false);
		return;
	}

	if (!nicknameCheck(nickname)) {
		msgBox.text("닉네임은 한글, 영어, 숫자만 4 ~10자리로 입력 가능합니다.");
		isSubmit.setnicknameCheck(false);
		return;
	}

	let data = {
		value: nickname,
		valueType : "nickname" 
	};
	
	if(!overlapCheck(data)){
		msgBox.text("이미 사용중인 닉네임입니다");
		isSubmit.setnicknameCheck(false);
	} else {
		msgBox.text("사용 가능합니다");
		isSubmit.setnicknameCheck(true);
	}

}); // nickname check 




$(".phone").focusout(function() {
	const phone = $(".phone").val();
	const msgBox = $(this).siblings(".msg_box"); 
	
	if(!phone) {
		isSubmit.setphoneCheck(false);
		return;
	}
	
	if(!phoneCheck(phone)) {
		msgBox.text("휴대폰번호를 확인해 주세요");
		isSubmit.setphoneCheck(false);
	} else {
		msgBox.text("");
		isSubmit.setphoneCheck(true);
	}
});

아직 ajax를 구현하지 않아 정상작동하지 않습니다

'스프링부트' 카테고리의 다른 글

스프링부트+jsp로 배달사이트 만들기0 - 오라클 테이블생성 하기 (2)	2021.12.05
스프링부트+jsp로 배달사이트 만들기-06 회원가입 02 MYBATIS 사용하기 (21)	2021.12.05
스프링부트+jsp로 배달사이트 만들기-04 mypage, 로그인페이지 만들기 (0)	2021.12.04
스프링부트+jsp로 배달사이트 만들기-03 메인페이지 만들기2(쿠키,세션으로 주소저장) (0)	2021.12.04
스프링부트+jsp로 배달사이트 만들기-02 메인페이지 만들기1 (0)	2021.12.03

sumin

sumin

태그

최근글

댓글

공지사항

아카이브

'스프링부트' 카테고리의 다른 글

관련글

티스토리툴바