회원가입 (Spring + MyBatis) - 회원 데이터베이스 설계 및 폼 구현

취업용 Spring 프로젝트/기능 내역 2019. 7. 13. 23:32

기능 - ajax 통신으로 부서/직급 선택하기

(7월 20일 변경)

데이터베이스 구성

<회원 테이블>

num : 회원 식별 번호

id : 회원 아이디

pw : 회원 비밀번호

name : 회원 이름

authority : 회원 권한 (임시 default 'ROLE_USER') ← 나중에 관리자가 승인하면 권한 주는걸로 변경할 예정

enabled : 회원 활성화 여부

ok : ...

dept : 부서

rank : 직급

<부서 테이블>

deptno : 부서 식별 번호

deptname : 부서 이름

<직급 테이블>

deptno : 직급 식별 번호

deptname : 직급 이름

DTO 구성

public class MemberDTO {

	private String id;
	private String pw;
	private String name;
	private int dept;
	private int rank;
	

	public int getDept() {
		return dept;
	}
	public void setDept(int dept) {
		this.dept = dept;
	}
	public int getRank() {
		return rank;
	}
	public void setRank(int rank) {
		this.rank = rank;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

View 구현

부서/직급 선택 컨텐츠는 'display = none' 로 숨겨두고 버튼 클릭하면 가입 컨텐츠 숨기고 부서/직급 선택 컨텐츠 보여줌 - click_group()
닫기 버튼 누르면 다시 컨텐츠를 숨김 - close_group()
부서 클릭하면 hidden(#dept,#deptName)에 부서 식별번호,이름 저장 후 사용자가 볼 수 있게 부서 이름 출력 - click_dept(name,value) *AJAX
직급 클릭하면 hidden(#rank,#rankName)에 직급 식별번호,이름 저장 후 사용자가 볼 수 있게 직급 이름 출력 - click_rank(name,value) *AJAX
확인 버튼 누르면 hidden에 저장된 식별번호를 Form안에 있는 hidden(#dept,#rank)으로 옮기고 회원가입 창에 부서/직급 출력 후 부서/직급 선택 컨텐츠 숨기고 다시 가입 컨텐츠 보여줌 - click_ok()

회원가입 페이지 - join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
  <meta name="author" content="GeeksLabs">
  <meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
  <link rel="shortcut icon" href="resources/origin/img/favicon.png">

  <title>Login Page 2 | Creative - Bootstrap 3 Responsive Admin Template</title>

  <!-- Bootstrap CSS -->
  <link href="resources/origin/css/bootstrap.min.css" rel="stylesheet">
  <!-- bootstrap theme -->
  <link href="resources/origin/css/bootstrap-theme.css" rel="stylesheet">
  <!--external css-->
  <!-- font icon -->
  <link href="resources/origin/css/elegant-icons-style.css" rel="stylesheet" />
  <link href="resources/origin/css/font-awesome.css" rel="stylesheet" />
  <!-- Custom styles -->
  <link href="resources/origin/css/style.css" rel="stylesheet">
  <link href="resources/origin/css/style-responsive.css" rel="stylesheet" />
  <!-- ajax -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
   <!-- Tree -->
  <link rel="stylesheet" href="resources/Tree/css/jquery.treeview.css" />
  <link rel="stylesheet" href="resources/Tree/css/screen.css" />
  <script src="resources/Tree/lib/jquery.js" type="text/javascript"></script>
  <script src="resources/Tree/lib/jquery.cookie.js" type="text/javascript"></script>
  <script src="resources/Tree/lib/jquery.treeview.js" type="text/javascript"></script>
  <!-- Custom -->
  <link href="resources/custom/css/popupGroup.css" rel="stylesheet" />
  <script src="resources/custom/js/join.js"></script>
  
</head>

<body class="login-img3-body">

  <div class="container">

    <form class="login-form" name = "joinForm" action="joinAction" 
    	method = "post" onsubmit="return formCheck();">
      <div class="login-wrap">
        <p class="login-img"><i class="icon_lock_alt"></i></p>
        <div class="input-group">
          <span class="input-group-addon"><i class="icon_profile"></i></span>
          <input type="text" class="form-control" 
          		name = "id" placeholder="아이디를 입력해주세요.." autofocus
          		id = "idzon" oninput="check_id();">
        </div>
        <div class = "id-text">
        </div>
        <div class="input-group">
          <span class="input-group-addon"><i class="icon_profile"></i></span>
          <input type="text" class="form-control" 
          		name = "name" placeholder="이름을 입력해주세요.." autofocus>
        </div>
        <div class="input-group">
          <input type="button" class="form-control" name = "group" autofocus 
          		onclick="click_group();"
          		style="border:0; margin-left:50px; background:#D6E3F4;
                border-radius:10px; color:white;" 
          		value = "부서/직급 선택하기">
        </div>
        <div class = "group-text">
        </div>
        <div class="input-group">
          <span class="input-group-addon"><i class="icon_key_alt"></i></span>
          <input type="password" class="form-control" 
          		name = "pw" placeholder="비밀번호를 입력해주세요.."
          		id = "pw" oninput="check_pw();">
        </div>
        <div class = "pw-text">
        </div>
        <div class="input-group">
          <span class="input-group-addon"><i class="icon_key_alt"></i></span>
          <input type="password" class="form-control" 
          		name = "pw" placeholder="비밀번호를 한번 더 입력해주세요.."
          		id = "checkPw" oninput="check_pw();">
        </div>
        <div class = "ok-text">
        </div>
        <button class="btn btn-primary btn-lg btn-block"
        	type="submit" id = "joinSubmit" disabled>가입</button>
      </div>
      <input type = "hidden" id = "dept" name = "formDept" value = "">
      <input type = "hidden" id = "rank" name = "formRank" value = "">
    </form>
  </div>


	<!-- popupGroup -->
<div class = "group" id = "popupGroup">	
	<div class = "group-head">
		<h1 class = "zTree-h1"> 부서/직급 선택 </h1>
		<button class = "close-button" type = "button" 
        	onclick="close_group();">닫기</button>
	</div>
	<div class = "group-body">
		<div class = "dept">
			<div class = "dept-head">
				부서 목록
			</div>
			<div class = "dept-body">
				<div id="sidetree">
					<ul id="tree"> 
						
						<li>
							<input class = "tree-button" type = "button"
                            		name = "1" value = "총무" 
                                    onclick="click_dept(name,value);">
						</li>
						<li>
							<input class = "tree-button" type = "button"
                            		name = "2" value = "회계" 
                                    onclick="click_dept(name,value);">
						</li>
						<li>
							<input class = "tree-button" type = "button" 
                            		name = "3" value = "인사" 
                                    onclick="click_dept(name,value);">
						</li>
						<li>
							<input class = "tree-button" type = "button" 
                            		name = "4" value = "영업본부" 
                                    onclick="click_dept(name,value);">
								<ul>
									<li>
										<input class = "tree-button-sub" 
                                        	type = "button" name = "5" 
                                            value = "영업1팀" 
                                            onclick="click_dept(name,value);">
									</li>
								</ul>
								<ul>
									<li>
										<input class = "tree-button-sub" 
                                        	type = "button" name = "6" 
                                            value = "영업2팀"
                                            onclick="click_dept(name,value);">
									</li>
								</ul>
						</li>
						<li>
							<input class = "tree-button" type = "button" 
                            		name = "7" value = "디자인" 
                                    onclick="click_dept(name,value);">
						</li>
						<li>
							<input class = "tree-button" type = "button" 
                            		name = "8" value = "IT" 
                                	onclick="click_dept(name,value);">
								<ul>
									<li>
										<input class = "tree-button-sub" 
                                        	type = "button" name = "9"
                                        	value = "개발1팀" 
                                        	onclick="click_dept(name,value);">
									</li>
								</ul>
								<ul>
									<li>
										<input class = "tree-button-sub"
                                        	type = "button" name = "10" 
                                            value = "개발2팀" 
                                            onclick="click_dept(name,value);">
									</li>
								</ul>
								<ul>
									<li>
										<input class = "tree-button-sub" 
                                        	type = "button" name = "11" 
                                            value = "개발3팀" 
                                            onclick="click_dept(name,value);">
									</li>
								</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class = "position">
			<div class = "position-head">
				직급 목록
			</div>
			<div class = "position-body">
				<input class= "position-button" type = "button" name = "1" 
                	value = "이사" onclick="click_rank(name,value);">
				<input class= "position-button" type = "button" name = "2" 
                	value = "부장" onclick="click_rank(name,value);">
				<input class= "position-button" type = "button" name = "3"
                	value = "과장" onclick="click_rank(name,value);">
				<input class= "position-button" type = "button" name = "4" 
                	value = "대리" onclick="click_rank(name,value);">
				<input class= "position-button" type = "button" name = "5"
                	value = "주임" onclick="click_rank(name,value);">
				<input class= "position-button" type = "button" name = "6" 
                	value = "사원" onclick="click_rank(name,value);">
				
				<!-- <ul>
					<li>부장</li>
					<li>과장</li>
					<li>대리</li>
					<li>주임</li>
					<li>사원</li>
				</ul> -->
			</div>
		</div>
		<div class = "group-foot">
			<div class = "result-view-zone">
				<div class = "result-dept">
				</div>
				<div class = "result-rank">
				</div>
			</div>
		</div>
		<button class = "ok-button" type= "button" onclick="click_Ok();">확인</button>
		
		<input type = "hidden" name = "dept" id = "dept" value = "">
		<input type = "hidden" name = "rank" id = "rank" value = "">
		<input type = "hidden" name = "deptName" id = "deptName" value = "">
		<input type = "hidden" name = "rankName" id = "rankName" value = "">
	</div>	
</div>

</body>
</html>

회원가입 자바스크립트 파일 - join.js

//jquery tree
$(function() {
	$("#tree").treeview({
		collapsed : false,
		animated : "medium",
		control : "#sidetreecontrol",
		persist : "location"
	});
});

// 부서/직급 선택하기 클릭
function click_group() {
	if ($("#popupGroup").css("display") == "none") {
		$(".login-wrap").hide();
		$('#popupGroup').show();
	} else {
		$('#popupGroup').hide();
		$(".login-wrap").show();
	}
};

// 부서 클릭
function click_dept(name, value) {

	var deptNum = name;
	var deptName = value;

	$.ajax({
		data : deptNum,
		url : "join/selectDeptName",
		type : "POST",
		dataType : "JSON",
		contentType : "application/json; charset=UTF-8",
		success : function(data) {
			var result = JSON.parse(data);
			$(".result-dept").html("<" + result.deptname);
			$("input#dept").val(deptNum);
			$("input#deptName").val(deptName);
		}
	});
};

// 직급 클릭
function click_rank(name, value) {

	var rankNum = name;
	var rankName = value;
	$.ajax({
		data : rankNum,
		url : "join/selectRankName",
		type : "POST",
		dataType : "JSON",
		contentType : "application/json; charset=UTF-8",
		success : function(data) {
			var result = JSON.parse(data);
			$(".result-rank").html(result.rankname + ">");
			$("input#rank").val(rankNum);
			$("input#rankName").val(rankName);
		}
	});
};

// 확인 버튼
function click_Ok() {
	var realDept = $("input#dept").val();
	var realRank = $("input#rank").val();
	var deptName = $("input#deptName").val();
	var rankName = $("input#rankName").val();

	$("input#realDept").val(realDept);
	$("input#realRank").val(realRank);

	$(".group-text").css("margin-bottom", "16px");
	$(".group-text").css("color", "#34aadc");
	$(".group-text").css("text-align", "center");
	$(".group-text").text(deptName + "/" + rankName);

	$('#popupGroup').hide();
	$(".login-wrap").show();

};

// 닫기 버튼
function close_group() {
	$('#popupGroup').hide();
	$(".login-wrap").show();
};

//사용자 입력값 검사
function formCheck() {
	var id = document.joinForm.id.value;
	var name = document.joinForm.name.value;
	var dept = document.joinForm.formDept.value;
	var rank = document.joinForm.formRank.value;
	var pw = $('input#pw').val();
	var repw = $('input#checkPw').val();

	if (id == "" || id == null) {
		alert("아이디를 입력해 주세요.");
		document.joinForm.id.focus();
		return false;
	}
	if (name == "" || name == null) {
		alert("이름을 입력해 주세요.");
		document.joinForm.name.focus();
		return false;
	}
	if (dept == "" || dept == null) {
		alert("부서를 선택해 주세요.");
		document.joinForm.group.focus();
		return false;
	}
	if (rank == "" || rank == null) {
		alert("직급을 선택해 주세요.");
		document.joinForm.group.focus();
		return false;
	}
	if (pw == "" || pw == null) {
		alert("비밀번호를 입력해 주세요.");
		pw.focus();
		return false;
	}
	if (repw == "" || repw == null) {
		alert("비밀번호를 확인해 주세요.");
		repw.focus();
		return false;
	}
	;

	alert("관리자에게 승인 후 이용 가능합니다.")
};

기본 부트스트랩 템플릿(css,js)과 custom한 css파일은 깃허브에 올려두겠습니다.

https://github.com/KingHyunSu

KingHyunSu - Overview

KingHyunSu has one repository available. Follow their code on GitHub.

github.com

Controller 구현

join() - 회원가입 페이지 이동
selectDeptName() - 부서 이름 출력
selectRankName() - 직급 이름 출력

produces - return 타입을 json 타입으로 반환 (안써도 json으로 넘어가던대 자세히 더 알아볼 것!)

@Controller
public class MemberController {

	@Inject
	private MemberService service;
	
	@RequestMapping(value = "/join")
	public String join() throws Exception {
		
		return "/join";
	}

	@ResponseBody
	@RequestMapping(value = "/join/selectDeptName", method = RequestMethod.POST, 
    							produces = "application/json")
	public Map<Object,Object> selectDeptName(@RequestBody String deptNum) 
				throws Exception{
		Map<Object,Object>map = new HashMap<Object,Object>();
		
		String name = service.selectDeptName(deptNum);
		map.put("deptname", name);
		return map;
	}
	
	@ResponseBody
	@RequestMapping(value = "/join/selectRankName", method = RequestMethod.POST, 
    							produces = "application/json")
	public Map<Object,Object> selectRankName(@RequestBody String rankNum) 
				throws Exception{
		Map<Object,Object>map = new HashMap<Object,Object>();
		
		String name = service.selectRankName(rankNum);
		map.put("rankname", name);
		return map;
	}
}

Service 구현

controller에서 넘어온 부서/직급 식별번호 int로 형 변환 후 dao로 전송

@Service
public class MemberService{

	@Inject
	private MemberDAO dao;

	public String selectDeptName(String deptNum) throws Exception {
		int deptno = Integer.parseInt(deptNum);
		return dao.selectDeptName(deptno);
	}

	public String selectRankName(String rankNum) throws Exception {
		int rankno = Integer.parseInt(rankNum);
		return dao.selectRankName(rankno);
	}
	
}

DAO 구현

@Repository
public class MemberDAO {

	@Inject
	private SqlSession sqlSession;
	
	private static final String namespace = "com.management.dao.MemberDAO";
	

	public String selectDeptName(int deptno) throws Exception {
		return sqlSession.selectOne(namespace + ".deptname", deptno);
	}

	public String selectRankName(int rankno) throws Exception {
		return sqlSession.selectOne(namespace + ".rankname", rankno);
	}

}

Mapper 구현

데이터베이스 쿼리 실행

<mapper namespace = "com.management.dao.MemberDAO">
  <select id="deptname" parameterType="int" resultType = "String">
 	 SELECT
  		deptname
  	FROM
 		 dept
 	 WHERE
 		 deptno = #{deptno}
  </select>

  <select id="rankname" parameterType="int" resultType = "String">
 	 SELECT
 		 rankname
 	 FROM
		  rank
 	 WHERE
 		 rankno = #{rankno}
  </select>
</mapper>

동작

부서/직급 hidden

회원가입 Form hidden

-끝-

'취업용 Spring 프로젝트 > 기능 내역' 카테고리의 다른 글

MySQL 5.7 → MariaDB 10.3 마이그레이션(Ubuntu 18.04) (0)	2019.07.18
로그인 기능 구현(Spring + MyBatis + Spring Security) (0)	2019.07.17
회원가입 (Spring + MyBatis) - 가입하기 구현 (0)	2019.07.15
회원가입 (Spring + MyBatis) - 아이디 중복 및 비밀번호 검사 추가 (0)	2019.07.14
개발 환경 구성 (0)	2019.07.13

ABOUT ME

현수야 공부하자 현수야 공부하자

'취업용 Spring 프로젝트 > 기능 내역' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'취업용 Spring 프로젝트 > 기능 내역' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바