이 포스팅은 공부할 겸 오픈소스를 참고하지 않고 혼자서 만들어 본 것으로 굉장히 비효율적일 것입니다. 

-------------------------------------------------------------------------------------------------------------------------------------------

1. DB

CREATE TABLE TB_USER(
IDX INT PRIMARY KEY AUTO_INCREMENT,
UID VARCHAR(15) UNIQUE KEY NOT NULL,
UPW VARCHAR(15) NOT NULL,
UNAME VARCHAR(15) NOT NULL,
UNICK VARCHAR(15) UNIQUE KEY NOT NULL,
CREA_DTM TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
MAIL VARCHAR(25) NOT NULL,
DEL_GB VARCHAR(1) NOT NULL DEFAULT 'N'
)

TB_USER

IDX                - 회원 번호(주키, INT, AUTO_INCREMENT)

UID                - 회원 아이디(유일키,VARCHAR(15),NOT NULL)

UPW              - 회원 비밀번호(VARCHAR(15), NOT NULL)

UNAME          - 회원 이름(VARCHAR(15), NOT NULL)

UNICK            - 회원 닉네임(VARCHAR(15), UNIQUE KEY,NOT NULL)

CREA_DTM      - 가입 시간(NN, TIMESTAMP, DEFAULT CURRENT_TIMESTAMP)

MAIL              - 이메일(VARCHAR(50), NOT NULL)

DEL_GB           - 삭제여부(NN, VARCHAR(1), DEFAULT 'N')

2. Controller

SampleController.java

    @RequestMapping(value="/sample/openUserJoin.do")
    public ModelAndView openUserJoin(CommandMap commandMap) throws Exception{
    	ModelAndView mv = new ModelAndView("user/userJoin");
    	
    	mv.addObject("error", commandMap.get("error"));
    	
    	return mv;
    }
    
    @RequestMapping(value="/sample/joinUser.do")
    public ModelAndView joinUser(CommandMap commandMap) throws Exception{
    	
    	String error = sampleService.joinUser(commandMap.getMap());
    	ModelAndView mv = null;;
    	if(error.equals("완료")) {
    		mv = new ModelAndView("redirect:/sample/openBoardList.do");
    	}else {
    		mv = new ModelAndView("redirect:/sample/openUserJoin.do");
    		mv.addObject("error", error);
    	}
    	return mv;
    }

- 두 컨트롤러를 보면 error라는 오브젝트를 mv에 추가 시켜주는데 이는 joinUser라는 회원가입 페이지에서 회원 가입시 아이디나 이메일, 또는 닉네임의 중복으로 인한 UNIQUE KEY에 대한 오류를 방지하기 위함이다. 이에 따른 error 라는 객체를 mv에 추가하여 redirect하여 회원가입 페이지를 다시 불러올 경우 이 객체가 존재할 시 에러라는 문구를 활성화하기 위함이다.

- joinUser 메소드의 조건문을 통해 회원가입 성공에 대한 페이지를 따로 redirect 시켰다. 

3. Service(Impl)

SampleServiceImpl.java

	@Override
	public String joinUser(Map<String, Object> map) throws Exception{
		if(!(sampleDAO.selectUserID(map)==null)) {
			return "아이디";
		}else if(!(sampleDAO.selectUserID(map)==null)) {
			return "이메일";
		}else if(!(sampleDAO.selectUserID(map)==null)) {
			return "닉네임";
		}else {
			sampleDAO.insertUser(map);
			return "완료"; 
		}
	}

- 유저가 입력한 아이디, 닉네임, 이메일 값 중에서 sampleDAO를 통해 찾아온 쿼리가 존재 할 시 그에 대한 부분을 String으로 리턴하게 하여 어떤 부분이 중복인 지를 확인할 수 있게 하였다. 모든 것에 대해 중복이 존재 하지 않을 시 회원에 대한 insert 쿼리를 실행하는 DAO 메소드를 호출하고 완료라는 String 값을 리턴 하였다.

4. DAO

SampleDAO.java

	public void insertUser(Map<String, Object> map) throws Exception {
		insert("sample.insertUser",map);
	}

	@SuppressWarnings("unchecked")
	public Map<String,Object> selectUserID(Map<String, Object> map) {
		return (Map<String,Object>)selectOne("sample.selectUserID",map);
	}

	public String selectUserEmail(Map<String, Object> map) {
		return (String)selectOne("sample.selectUserEmail",map);
	}

	public String selectUserNickname(Map<String, Object> map) {
		return (String)selectOne("sample.selectUserNickname",map);
	}

- 다른 DAO 부분과 다른 점은 없고 selectUserID의 경우만 리턴 형태가 Map인 이유는 로그인을 구현하면서 유저에 대한 정보를 가져와 세션에 저장하기 위함이다.

5. SQL

sample_SQL.xml

     <insert id="insertUser" parameterType="HashMap" >
      	<![CDATA[
      		INSERT INTO
	           	TB_USER(
	               UID,
	               UPW,
	               UNAME,
	               UNICK,
	               MAIL)
	           VALUES(
	               #{UID},
	               #{UPW},
	               #{UNAME},
	               #{UNICK},
	               #{EMAIL})
      	]]>
      </insert>
      
      <select id="selectUserID" parameterType="HashMap" resultType="HashMap">
      	<![CDATA[
			SELECT
				IDX,
				UID,
				UPW,
				UNICK
			FROM
				TB_USER
			WHERE
				UID=#{UID}
      	]]>
      </select>
      
            <select id="selectUserEmail" parameterType="HashMap" resultType="java.lang.String">
      	<![CDATA[
			SELECT
				EMAIL
			FROM
				TB_USER
			WHERE
				EMAIL=#{EMAIL}
      	]]>
      </select>
      
            <select id="selectUserNickName" parameterType="HashMap" resultType="java.lang.String">
      	<![CDATA[
			SELECT
				UNICK
			FROM
				TB_USER
			WHERE
				UNICK=#{UNICK}
      	]]>
      </select>

- SQL의 경우 따로 특별한 것은 없다.

6. JSP

jsp 폴더에 user 폴더를 만들어 userJoin.jsp 파일을 만든 후 아래와 같이 작성한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<head>
<title>회원가입</title>
<%@ include file="/WEB-INF/include/include-header.jspf" %>
</head>
<body>
	<div class="user_view wdp_30" >
		<div class="con_center under_line"><h5>회원 가입</h5></div>
		<form id="frm" class="padding_5" onSubmit="JavaScript:fn_joinUser()">
			<fieldset>
				<input type="text" class="input_text" name="UID" maxlength="15" placeholder="아이디" value="" id="uid" required><br/>
				<input type="password" class="input_text" name="UPW" maxlength="15" placeholder="비밀번호" value="" id="upw" required><br/>
				<input type="text" class="input_text" name="EMAIL" maxlength="50" placeholder="이메일" value="" id="email" required><br/>
				<input type="text" class="input_text" name="UNAME" maxlength="15" placeholder="이름" value="" id="uname" required><br/>
				<input type="text" class="input_text" name="UNICK" maxlength="15" placeholder="닉네임" value="" id="unick" required><br/>
			</fieldset>
			<br/>
			<c:if test="${! empty error}">
				${error} 값이 중복된 값입니다.			
			</c:if>
			<button type="submit" class="btn con_center">회원 가입</button>
		</form>
	</div>
</body>
	<%@ include file="/WEB-INF/include/include-body.jspf" %>
	<script type="text/javascript">
		
		function fn_joinUser(){
			var comSubmit = new ComSubmit("frm");
			comSubmit.setUrl("<c:url value='/sample/joinUser.do'/>");
			comSubmit.submit();
		}
		
	</script>
</html>

- 11~24줄

각 input에 대한 값의 부재에 대한 오류를 방지하기 위하여 input에 required 속성을 선언하고 form의 기능을 사용하였다. button과의 호환으로 보통 쓰던 <a>태그를 사용하지 않았고 11줄의 onSubmit의 처리로 스크립트에서의 함수를 불러 올 수 있게 하였다. 20줄의 <c:if:> 태그를 통하여 error값의 존재를 확인 후 error 값이 존재할 경우 그 값이 중복이라고 출력하도록 하였다.

7. CSS

간단히 회원가입과 로그인 기능을 편히 볼 수 있도록 CSS 코드를 수정하였다.

ui.css

.wdp_90 {width:90%}
.wdp_30	{width:30%}
.user_view {border:1px solid;}
.btn {border-radius:3px;padding:5px 11px; cursor:pointer; color:#fff !important; display:inline-block; border:2px solid; background-color:#6b9ab8; vertical-align:middle}
.input_text {line-height:1.5;padding:5px 10px;width:100%}
.con_center{text-align: center;width:100%;padding:5px 0px;border:0px;}
.under_line{border-bottom: 1px solid;}
.padding_5{padding: 5px}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

- 위 부분을 추가하였다.

8. 테스트

- 회원가입

위와 같이 입력하여 회원가입을 시도하였다.

위 로그처럼 회원가입 페이지의 호출 후 joinUser 컨트롤러로 시작하여 회원가입에 대한 처리 후 게시판 리스트 페이지가 이상없이 호출 됨을 볼 수 있다.

이 부분은 동일한 아이디값을 입력하고 회원가입의 경우를 보여준다.