[MyBatis] MyBatis 회원가입 만들기

개발환경/Mybatis 2022. 12. 26. 11:38

728x90

https://bluechanyeong.tistory.com/entry/MyBatis-MyBatis-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[MyBatis] MyBatis 사용하기

MyBatis는 쿼리 기반 웹 애플리케이션을 개발할 때 가장 많이 사용되는 SQL 매퍼(Mapper) 프레임워크이다. MyBatis는 기존 JDBC 방식은 연동 과정도 복잡하고 Java 소스 코드 안에 SQL 쿼리를 작성하면 전체

bluechanyeong.tistory.com

위 게시글에 이어서 회원가입 기능을 구현할 것이다.

MemberDTO.java

package com.blue.member;

import java.util.Arrays;

public class MemberDTO {
	private int idx;
	private String userid;
	private String userpw;
	private String username;
	private String email;
	private String hp;
	private String[] hobby = new String[5];
	private String ssn1;
	private String ssn2;
	private String zipcode;
	private String address1;
	private String address2;
	private String address3;
	private String regdate;

	public int getIdx() {
		return idx;
	}

	public void setIdx(int idx) {
		this.idx = idx;
	}

	public String getUserid() {
		return userid;
	}

	public void setUserid(String userid) {
		this.userid = userid;
	}

	public String getUserpw() {
		return userpw;
	}

	public void setUserpw(String userpw) {
		this.userpw = userpw;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getHp() {
		return hp;
	}

	public void setHp(String hp) {
		this.hp = hp;
	}

	public String[] getHobby() {
		return hobby;
	}

	public void setHobby(String[] hobby) {
		this.hobby = hobby;
	}

	public String getSsn1() {
		return ssn1;
	}

	public void setSsn1(String ssn1) {
		this.ssn1 = ssn1;
	}

	public String getSsn2() {
		return ssn2;
	}

	public void setSsn2(String ssn2) {
		this.ssn2 = ssn2;
	}

	public String getZipcode() {
		return zipcode;
	}

	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}

	public String getAddress1() {
		return address1;
	}

	public void setAddress1(String address1) {
		this.address1 = address1;
	}

	public String getAddress2() {
		return address2;
	}

	public void setAddress2(String address2) {
		this.address2 = address2;
	}

	public String getAddress3() {
		return address3;
	}

	public void setAddress3(String address3) {
		this.address3 = address3;
	}

	public String getRegdate() {
		return regdate;
	}

	public void setRegdate(String regdate) {
		this.regdate = regdate;
	}

	@Override
	public String toString() {
		return "MemberDTO [idx=" + idx + ", useid=" + userid + ", userpw=" + userpw + ", username=" + username
				+ ", email=" + email + ", hp=" + hp + ", hobby=" + Arrays.toString(hobby) + ", ssn1=" + ssn1 + ", ssn2="
				+ ssn2 + ", zipcode=" + zipcode + ", address1=" + address1 + ", address2=" + address2 + ", address3="
				+ address3 + ", regdate=" + regdate + "]";
	}

}

MemberDAO.java

package com.blue.member;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.Scanner;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.blue.db.Dbconn;
import com.blue.db.SqlMapConfig;
import com.blue.member.MemberDTO;

public class MemberDAO {

	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs;
	String sql = "";
	
	SqlSessionFactory ssf = SqlMapConfig.getSqlMapInstance();
	SqlSession sqlsession;
	
	public MemberDAO() {
		sqlsession = ssf.openSession(true);
	}
	
	public int idcheck(MemberDTO member){
		HashMap<String, String> dataMap = new HashMap();
		dataMap.put("mem_userid", member.getUserid());
			
		int isExist = sqlsession.selectOne("Member.idcheck", dataMap);
		
		if(isExist == 1) {
			return 1;
		}else {
			return 0;	
		}
	}
	
	public int join(MemberDTO member){
		HashMap<String, String> dataMap = new HashMap();
		dataMap.put("mem_userid", member.getUserid());
		dataMap.put("mem_userpw", member.getUserpw());
		dataMap.put("mem_name", member.getUsername());
		dataMap.put("mem_hp", member.getHp());
		dataMap.put("mem_email", member.getEmail());
		String hobbystr = "";
		for(String str : member.getHobby()) {
			hobbystr = hobbystr + str + " ";
		}
		dataMap.put("mem_hobby", hobbystr);
		dataMap.put("mem_ssn1", member.getSsn1());
		dataMap.put("mem_ssn2", member.getSsn2());
		dataMap.put("mem_zipcode", member.getZipcode());
		dataMap.put("mem_address1", member.getAddress1());
		dataMap.put("mem_address2", member.getAddress2());
		dataMap.put("mem_address3", member.getAddress3());
			
		return sqlsession.insert("Member.join", dataMap);
	}

}

member.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="Member">
   <select id="idcheck" parameterType="map" resultType="int">
    select count(*) from tb_member where mem_userid=#{mem_userid};
  </select>
  
  <insert id="join" parameterType="map">
    insert into tb_member 
    (mem_userid, mem_userpw, mem_name, mem_hp, mem_email, mem_hobby, mem_ssn1, mem_ssn2,
    mem_zipcode, mem_address1, mem_address2, mem_address3) 
    values 
    (#{mem_userid}, #{mem_userpw}, #{mem_name}, #{mem_hp}, #{mem_email} ,#{mem_hobby} ,
    #{mem_ssn1} ,#{mem_ssn2} ,#{mem_zipcode} ,#{mem_address1} ,#{mem_address2} ,#{mem_address3});
  </insert>
</mapper>

regist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="./js/regist.js"></script>
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script>
        function sample6_execDaumPostcode() {
            new daum.Postcode({
                oncomplete: function(data) {
                    var addr = ''; // 주소 변수
                    var extraAddr = ''; // 참고항목 변수

                    if (data.userSelectedType === 'R') {
                        addr = data.roadAddress;
                    } else {
                        addr = data.jibunAddress;
                    }

                    if(data.userSelectedType === 'R'){
                        if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                            extraAddr += data.bname;
                        }
                        
                        if(data.buildingName !== '' && data.apartment === 'Y'){
                            extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                        }

                        if(extraAddr !== ''){
                            extraAddr = ' (' + extraAddr + ')';
                        }

                        document.getElementById("sample6_extraAddress").value = extraAddr;
                    
                    } else {
                        document.getElementById("sample6_extraAddress").value = '';
                    }
                    
                    document.getElementById('sample6_postcode').value = data.zonecode;
                    document.getElementById("sample6_address").value = addr;
                    document.getElementById("sample6_detailAddress").focus();
                }
            }).open();
        }
    </script>
</head>
<body>
    <h2>회원가입</h2>
    <form action="./regist_ok.jsp" method="post" name="regform" id="regform" onsubmit="return sendit()">
        <input type="hidden" name="isidcheck" id="isidcheck" value="n">
        <p>아이디 : <input type="text" name="userid" id="userid" maxlength="20"> 
        <input type="button" id="btnIdCheck" value="아이디 중복제거"></p>
        <p id="idcheckmsg"></p>
        <p>비밀번호 : <input type="password" name="userpw" id="userpw" maxlength="20"></p>
        <p>비밀번호 확인 : <input type="password" name="userpw_re" id="userpw_re" maxlength="20"></p>
        <p>이름 : <input type="text" name="name" id="name"></p>
        <p>휴대폰 번호 : <input type="text" name="hp" id="hp"></p>
        <p>이메일 : <input type="text" name="email" id="email"></p>
        <p>취미 : 
        	<label>드라이브<input type="checkbox" name="hobby" value="드라이브"></label>
            <label>영화감상<input type="checkbox" name="hobby" value="영화감상"></label>
            <label>쇼핑<input type="checkbox" name="hobby" value="쇼핑"></label>
            <label>게임<input type="checkbox" name="hobby" value="게임"></label>
            <label>운동<input type="checkbox" name="hobby" value="운동"></label>
        </p>
        <p>주민등록번호 : <input type="text" name="ssn1" id="ssn1" maxlength="6" onkeyup="moveFocus()" onkeydown="ssnChange()">
        - <input type="text" name="ssn2" id="ssn2" maxlength="7" onkeydown="ssnChange()"></p>
        <p>우편번호 : <input type="text" name="zipcode" id="sample6_postcode"> <input type="button" value="우편번호 검색" onclick="sample6_execDaumPostcode()"></p>
        <p>주소 : <input type="text" name="address1" id="sample6_address"></p>
        <p>상세주소 : <input type="text" name="address2" id="sample6_detailAddress"></p>
        <p>참고항목 : <input type="text" name="address3" id="sample6_extraAddress"></p>
        <p><input type="submit" value="가입완료"> <input type="reset" value="다시작성"> <input type="button" value="로그인" onclick="location.href='./2_login.jsp'"></p>
    </form>

</body>
</html>

idcheck.jsp

<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean class="com.blue.member.MemberDTO" id="member"/>
<jsp:setProperty property="*" name="member"/>   
<jsp:useBean class="com.blue.member.MemberDAO" id="memberDAO"/>    
<%
	if(memberDAO.idcheck(member) == 1){
		out.println("no");
	}else{
		out.println("ok");
	}
%>

regist_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
%>
<jsp:useBean class="com.blue.member.MemberDTO" id="member"/>
<jsp:setProperty property="*" name="member"/>
<jsp:setProperty property="username" param="name" name="member"/>

<jsp:useBean class="com.blue.member.MemberDAO" id="memberDAO"/>
<%
	if(memberDAO.join(member) == 1){
%>		
		<script>
			alert('회원가입 완료 되었습니다.');
			location.href='login.jsp';
		</script>
<%
	}else{
%>
		<script>
			alert('회원가입 실패 되었습니다.');
			history.back();
		</script>
<%
}
%>

regist.js

function sendit(){
    /*
        만약에 입력한 값이 있다면 return false;
    */

    const userid = document.getElementById('userid');
    const userpw = document.getElementById('userpw');
    const userpw_re = document.getElementById('userpw_re');
    const name = document.getElementById('name');
    const hp = document.getElementById('hp');
    const email = document.getElementById('email');
    const hobby = document.getElementsByName('hobby');
    const isssn = document.getElementById('isssn');
    const isidcheck = document.getElementById('isidcheck');


    // 정규식
    const expNameText = /[가-힣]+$/; // + : 뒤로 계속(몇글자일지 모름), $ : 끝, [] : 들어갈 수 있는 문자범위
    const expHpText = /^\d{3}-\d{3,4}-\d{4}$/; 
    // ^ : 이것으로 무조건시작, \d : 숫자, {3,4} : 3글자 혹은 4글자, {} : 글자수
    const expEmailText = /^[A-Za-z0-9\-\.]+@[A-Za-z0-9\-\.]+\.[A-Za-z0-9]+$/;


    if(userid.value == ''){
        alert('아이디를 입력하세요');
        userid.focus(); // id 쪽으로 포커스
        return false;
    }
    if(userid.value.length < 4 || userid.value.length > 20){
        alert('아이디는 4자 이상 20자 이하로 입력하세요');
        userid.focus(); // id 쪽으로 포커스
        return false;
    }
    
    if(isidcheck.value == 'n'){
		alert('아이디 중복확인 해주세요');
		isidcheck.focus();
        return false;
	}

    if(userpw.value == ''){
        alert('비밀번호를 입력하세요');
        userpw.focus(); // pw 쪽으로 포커스
        return false;
    }
    if(userpw.value.length < 4 || userpw.value.length > 20){
        alert('비밀번호는 4자 이상 20자 이하로 입력하세요');
        userpw.focus(); // pw 쪽으로 포커스
        return false;
    }

    if(userpw.value != userpw_re.value){
        alert('비밀번호와 비밀번호 확인의 값이 다릅니다');
        userpw.focus(); // pw 쪽으로 포커스
        return false;
    }

    if(!expNameText.test(name.value)){
        alert('이름 형식을 확인하세요\n한글만 입력 가능합니다');
        name.focus(); // pw 쪽으로 포커스
        return false;
    }

    if(!expHpText.test(hp.value)){
        alert('휴대폰 번호 형식을 확인하세요 \n하이픈(-)을 포함해야합니다')
        hp.focus(); // pw 쪽으로 포커스
        return false;
    }

    if(!expEmailText.test(email.value)){
        alert('이메일 형식을 확인하세요');
        email.focus();
        return false;
    }
    
    let count = 0;
    for(let i in hobby){
        if(hobby[i].checked){
            count++;
        }
    }
    if(count == 0){
        alert('취미는 적어도 한개 이상 선택하세요');
        return false;
    }
   
    return true;
}

function moveFocus(){
    const ssn1 = document.getElementById('ssn1');
    if(ssn1.value.length >= 6){
        document.getElementById('ssn2').focus();
    }
}

$(function(){
	$('#btnIdCheck').on('click', function(){
		if($('#userid').val() == ''){
			alert('아이디를 입력하세요');
			$('#userid').focus();
			return false;
		}
		
		const xhr = new XMLHttpRequest();
		const userid = $('#userid').val();
		xhr.open('GET', 'idcheck.jsp?userid='+userid, true);
		xhr.send();
		
		xhr.onreadystatechange = function(){
			if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
				const result = xhr.responseText;
				if(result.trim() == "ok"){
					$('#idcheckmsg').html("<b style='color:blue'>사용 할 수 있는 아이디입니다.</b>");
					$('#isidcheck').val('y');
				}else{
					$('#idcheckmsg').html("<b style='color:red'>사용 할 수 없는 아이디입니다.</b>");
				}
			}
		}
	});
	$('#userid').on('keyup', function(){
		$('#isidcheck').val("n");
		$('#idcheckmsg').html("");
	})
});