The Kkang's man

[WANT] 1. 회원가입 - Spring Framework MVC 본문

Project : WANT

[WANT] 1. 회원가입 - Spring Framework MVC

정낑깡 2021. 4. 22. 04:58

 

목차

1. 구현화면
2. 구조
3. DB
4. 코드 구성

1. 구현화면

2. 구조

먼저 구조를 간단하게 요약하면

    ① View 페이지(signupForm.jsp)에 값을 입력 후 회원가입 버튼을 클릭

    ② 입력된 값은 Controller(UserController.java)에 제출된다.

    ③ 제출된 값은 Controller에서 UserTO의 변수에 담고 UserDAO의 메서드를 호출한다.

    ④ 이 메서드는 mapper(mapper.xml)의 sql문을 통해 DB에 값을 insert해주는 기능을 하고(연결은 myBatis가

         해준다)

    ⑤ insert가 성공했다면 myBatis의 API에 의해 1(영향을 받은 행의 수(affected row))이 리턴된다.

    ⑥ 이 때 리턴되는 값 1을 UserDAO에서 함수를 통해 flag로 변환시켜 Controller로 보내준다.

    ⑦ Controller에서 받은 flag 값은 다시 signup_ok.jsp로 보내지고

    ⑧ signup_ok에서는 입력된 코드를 따라 flag의 값을 처리해 결과 창을 보여준다. 

 

3. DB

# 구축된 DB(mariaDB)

user 테이블

# Table 생성 SQL

create table user (
id varchar(100) primary key,
pwd varchar(100) not null,
name varchar(20) not null,
birth varchar(20) not null,
mail varchar(100) not null,
phone varchar(20) not null,
nick varchar(50) unique key not null,
rdate datetime not null,
profile varchar(100) default 'default_profile.png' ,
greet varchar(1000) default '안녕하세요'
);

# Table 명세

더보기

 

순번

컬럼명

컬럼설명

데이터 타입

Null여부

제약조건

0

ID

회원이 사용하게 될 ID

VARCHAR(100)

 

PK

1

PWD

로그인 시 필요한 계정 비밀번호

VARCHAR(100)

NOTNULL

 

2

NAME

회원가입시 필요한 회원이름

VARCHAR(20)

NOTNULL

 

3

BIRTH

가입할 회원의 출생연월일

VARCHAR(20)

NOTNULL

 

4

MAIL

이벤트 등 소식을 받을 회원메일주소

VARCHAR(100)

NOTNULL

 

5

PHONE

이벤트 등 소식을 받을 회원연락처

VARCHAR(20)

NOTNULL

 

6

NICK

커뮤니티 내에서 사용할 닉네임

VARCHAR(50)

NOTNULL

UK

7

RDATE

회원의 커뮤니티 가입일

DATETIME

NOTNULL

 

8

PROFILE

회원의 프로필 사진

VARCHAR(100)

 

 default 'default_profile.png'

9

GREET

회원의 인사말

VARCHAR(1000)

 

default
'안녕하세요' 

* 8. PROFILE과 9.GREET의 경우 default 제약조건을 걸어 값이 입력되지 않으면(null인 경우)

  각각의 default값이 입력되도록 만들었다.

 

4. 코드 구성

4-1. signupForm.jsp ( views/user/signupForm.jsp )

# 정보 입력란

더보기 
<body>
  <div class="signup-form">
      <form action="./signup_ok.do" method="post" name="sfrm" class="form-horizontal" enctype="multipart/form-data">
          <div class="row">
              <div class="col-8 signuptitle">
                  <h2>회원가입</h2>
              </div>	
          </div>			
          <div class="form-group row">
              <label class="col-form-label col-4">아이디</label>
              <div class="col-8">
                  <input type="text" class="form-control" id="user_id" name="id" placeholder="4~12, 영어대소문자, 숫자가능" required="required">
              </div>            
              <div id="usingId_chk"></div>
          </div>

          <div class="form-group row">
              <label class="col-form-label col-4">비밀번호</label>
              <div class="col-8">
                  <input type="password" class="form-control" id="user_pwd" name="pwd" placeholder="4~12, 영어대소문자, 숫자가능" required="required">
              </div>   	
              <div id="pwd_chk"></div>
          </div>
          <div class="form-group row">
              <label class="col-form-label col-4">비밀번호 확인</label>
              <div class="col-8">
                  <input type="password" class="form-control" id="user_cpwd" name="confirm_pwd">
              </div>        	
              <div id="cpwd_chk"></div>
          </div>

          <div class="form-group row">
              <label class="col-form-label col-4">이름</label>
              <div class="col-8">
                  <input type="text" class="form-control" name="name" >
              </div>        	
          </div>

          <div class="form-group row">
              <label class="col-form-label col-4">생년월일</label>
              <div class="col-8">
                  <input type="text" class="form-control" id="user_birth" name="birth" placeholder="YYMMDD" >
              </div>        	
              <div id="birth_chk"></div>
          </div>

          <div class="form-group row">
              <label class="col-form-label col-4">이메일</label>
              <div class="col-8">
                  <input type="email" class="form-control" id="user_mail" name="mail" placeholder="want@want.com" >
              </div>        	 
              <div id="mail_chk"></div>
          </div>
          <div class="form-group row">
              <label class="col-form-label col-4">전화번호</label>
              <div class="col-8">
                  <input type="tel" class="form-control" id="user_phone" name="phone" placeholder="010-1234-5678" >
              </div>   
              <div id="phone_chk"></div>     	
          </div>
          <div class="form-group row">
              <label class="col-form-label col-4">닉네임</label>
              <div class="col-8">
                  <input type="text" class="form-control" id="nick_id" name="nick" placeholder="4~12, 한글, 영어대소문자, 숫자가능">
              </div>        	
              <div id="usingNick_chk"></div>
          </div>
          <div class="form-group row">
              <label class="col-form-label col-4">프로필 사진</label>
              <div class="col-8">
                  <input type="file" class="form-control" name="profile" value="" class="board_view_input" />
              </div>        	
          </div>

          <div class="form-group row">
              <label class="col-form-label col-4">소개글</label>
              <div class="col-8">
                  <textarea name="greet" class="form-control"></textarea>
              </div>        	
          </div>
          <div class="form-group row">
              <div class="col-8 offset-4">
                  <%-- 동의 사항 내용은 modal창으로 클릭하면 뜨게 만들기 --%>
                  <p><label class="form-check-label"><input type="checkbox" name="info" required="required"><a id="agree" href="javascript:agree();">개인정보취급방침</a>에 동의하십니까?</label></p>
                  <button type="submit" id="submit1" class="btn btn-primary btn-lg">회원가입</button>
              </div>  

              <!-- 개인정보방침 modal창 내용 -->  
              <div id="dialog" title="개인정보취급방침">
                  <p>
                  1. 수집 개인정보 항목 : 회사명, 담당자명, 메일 주소, 전화번호, 홈페이지 주소, 팩스번호, 주소 <br />
                  2. 개인정보의 수집 및 이용목적 : 제휴신청에 따른 본인확인 및 원활한 의사소통 경로 확보 <br />
                  3. 개인정보의 이용기간 : 모든 검토가 완료된 후 3개월간 이용자의 조회를 위하여 보관하며, 이후 해당정보를 지체 없이 파기합니다. <br />
                  4. 그 밖의 사항은 개인정보취급방침을 준수합니다.
                  </p>
              </div>
          </div>		      
      </form>
      <div class="text-center">이미 회원이십니까? <a href="./loginForm.do">로그인 하러 가기</a></div>
  </div>
</body>

회원가입 페이지에서 값을 입력받는 부분을 Form 태그 안에 담은 것을 확인할 수 있다.

<form action="./signup_ok.do" method="post" name="sfrm" class="form-horizontal" enctype="multipart/form-data">
	...
    <button type="submit" id="submit1" class="btn btn-primary btn-lg">회원가입</button>
    	...
</form>

태그 안의 button을 클릭하면 id값인 "submit1"과 form 태그의 name인 "sfrm"을 통해 유효성을 검사하게 된다.

# 유효성 검사

더보기

유효성 검사는 <head> 안에 입력된 JavaScript에서 이루어지며 크게 두 가지를 검사한다.

1. 입력된 값이 정해진 형식에 부합하는지(이 부분은 earthconquest.tistory.com/189# 참조)

2. 필수입력란에 값이 모두 입력되었는지, 파일 형식은 이미지가 맞는지

<script type="text/javascript">
	window.onload = function() {
      document.getElementById('submit1').onclick = function() {
          let id = document.sfrm.id.value.trim()
          let pwd = document.sfrm.pwd.value.trim()
          let mail = document.sfrm.mail.value.trim()
          let birth = document.sfrm.birth.value.trim()
          let phone = document.sfrm.phone.value.trim()

          if( id == '' ) {
              alert( 'ID를 입력하셔야 합니다.' )
              document.sfrm.id.focus()
              return false;
          } 
          if( pwd == '' ) {
              alert( '비밀번호를 입력하셔야 합니다.')
              return false;
          }
          if( document.sfrm.name.value.trim() == '' ) {
              alert( '이름을 입력하셔야 합니다.')
              return false;
          }
          if( birth == '' ) {
              alert( '생년월일을 입력하셔야 합니다.')
              return false;
          }
          if( mail == '' ) {
              alert( '이메일을 입력하셔야 합니다.')
              return false;
          }
          if( phone == '' ) {
              alert( '핸드폰 번호를 입력하셔야 합니다.')
              return false;
          }
          if( document.sfrm.nick.value.trim() == '' ) {
              alert( '닉네임을 입력하셔야 합니다.')
              return false;
          }
          if(document.sfrm.info.checked == false) {
              alert('동의를 하셔야 합니다.');
              return false;
          }
          //파일형식 검사(사진파일만 가능)
          if ( document.sfrm.profile.value.trim() != '' ) {
              var fileValue = document.sfrm.profile.value.trim().split('\\');
              var filename = fileValue[fileValue.length-1];
              var fileEname = filename.substring(filename.length-4, filename.length);
              if ( fileEname == '.jpg' || fileEname == '.png' || fileEname == '.gif' || fileEname == '.GIF' || fileEname == '.PNG' || fileEname == '.JPG' ) {} 
              else {
                  alert( '사진파일만 첨부해주세요.(jpg, png, gif)' );
                  document.sfrm.profile.value = '';
                  return false;
              }
          }
          document.sfrm.submit();
      };
	};
</script>

 검사 결과 문제가 없다면 form action에 입력된 UserController의 signup_ok.do로 값이 제출된다.

 

4-2. UserController( controller/UserController.java )

# JSP에서 보낸 값 처리

더보기
변수를 선언하기 전에 JSP와 연결될 수 있도록 RequestMapping을 해주고 리턴할 경로를 정해준다. 
@RequestMapping(value = "/signup_ok.do")
public String signup_ok(HttpServletRequest request, Model model) throws Exception {
	return "user/signup_ok";
}

 

JSP에서 보낸 값을 to에 담는다

		int maxFileSize = 1024 * 1024 * 6;
		String encType = "utf-8";

		MultipartRequest multi = null;

		try {
			request.setCharacterEncoding("utf-8");

			multi = new MultipartRequest(request, uploadPath, maxFileSize, encType, new DefaultFileRenamePolicy());

			String key = "secret Key";

			UserTO to = new UserTO();
			to.setId(multi.getParameter("id"));

			// 비밀번호암호화해서 TO에 set
			String encryPwd = userDao.encrytAES(multi.getParameter("pwd"), key);
			to.setPwd(encryPwd);

			to.setName(multi.getParameter("name"));
			to.setBirth(multi.getParameter("birth"));
			to.setMail(multi.getParameter("mail"));
			to.setPhone(multi.getParameter("phone"));
			to.setNick(multi.getParameter("nick"));

			to.setProfile(multi.getFilesystemName("profile"));
			File file = multi.getFile("profile");
			if (multi.getParameter("greet").equals("")) {
				to.setGreet(null);
			} else {
				to.setGreet(multi.getParameter("greet"));
			}

 

 

4-3. UserDAO ( model1/user/UserDAO.java )

더보기 
	public int signup_ok(UserTO to) {
		int flag = 1;
		
		int result = sqlSession.insert("signup_ok", to);
		if (result == 1) {
			flag = 0;
		}
		
		return flag;
	}

회원 가입에 성공했을 경우의 flag 값을 0으로 하기 위해 flag의 기본값을 1로 선언해준다.

이게 가능한 이유는 myBatis API의 sqlSession에서 선언된 insert의 @return을 살펴보면 알 수 있다.

  int insert(String statement, Object parameter);

  /**
   * Execute an update statement. The number of rows affected will be returned.
   * @param statement Unique identifier matching the statement to execute.
   * @return int The number of rows affected by the update.
   */

insert의 경우 return값은 영향을 받은 행의 수 이다.

 * 회원가입 성공 → User테이블에 1행의 데이터 생성 → return값 = 1

즉 회원가입이 성공한다면 return값은 1이 된다.

 

4-4. mapper.xml ( resources/mappers/mapper.xml )

더보기

mapper에는 sql문을 입력해준다.

<insert id="signup_ok" parameterType="com.exam.model1.user.UserTO">
	insert into user
	values( #{id}, #{pwd}, #{name}, #{birth}, #{mail}, #{phone}, #{nick}, now(),
	ifnull( #{profile}, profile ), ifnull( #{greet}, greet ) )
</insert>

형식에 맞게 성공적으로 입력된 경우 DAO에서의 설명과 같이 return값은 1이 된다.

 

4-5. UserDAO ( model1/user/UserDAO.java )

더보기 
	public int signup_ok(UserTO to) {
		int flag = 1;
		
		int result = sqlSession.insert("signup_ok", to);
		if (result == 1) {
			flag = 0;
		}
		
		return flag;
	}

sqlSession.insert의 결과로 얻은 1을 if문을 통해 flag값 0으로 바꿔주고, flag값을 반환, Controller로 보낸다.

여기서 flag로 선언한 이유는 처리 결과를 여러 경우의 수로 나누어 에러가 났을 경우 쉽게 추적하기 위함이다.

 

4-6. UserController( controller/UserController.java )

더보기 
			int flag = userDao.signup_ok(to);

UserDAO에서 to가 담긴 signup_ok를 호출하고

model.addAttribute("flag", flag);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		return "user/signup_ok";
	}

flag에 담아서 user/signup_ok에 보낸다.

 

4-7. signup_ok.jsp( controller/UserController.java )

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
   int flag = (Integer)request.getAttribute("flag");

   out.println("<script type='text/javascript'>");
   if(flag == 0){
      out.println("alert('회원가입에 성공했습니다.');");
      out.println("location.href='./home.do';");
   }else{
      out.println("alert('회원가입에 실패했습니다.');");
      out.println("history.back();");
   }
   out.println("</script>");
%>

flag 값이 0인 경우 회원가입 성공 메시지를,

그 외의 경우 실패 메시지를 출력한다.

 

저작자표시 비영리 변경금지

'Project : WANT' 카테고리의 다른 글

[WANT] 2. 비밀번호 찾기(메일X) - Spring Framework MVC  (1) 2021.04.27
[WANT - 랜선여행 커뮤니티 사이트] 0. 개요  (0) 2021.04.21
'Project : WANT' Related Articles more
Comments