[Spring]MVC패턴 회원가입

 

데모로 쇼핑몰 사이트를 it학원 다닐때 만들어봤는데...계속 올려야지 올려야지 하다가 지금 올립니다.

 

Spring Framework MVC패턴을 사용하여 회원가입 하는 과정을 포스팅 시작하기전에 실행화면을 먼저 보여드리겠습니다.

 

회원가입 화면

유효성검사를 통과하지 못했을 경우

 

아래 펼쳐질 코드를 어느정도 이해하시고 구현하셨다면 위와같은 결과물을 원하는 목적에 맞게 얻으실 수 있을겁니다.

---

로직

pom.xml 환경설정-> dispatcher-servlet.xml 환경설정-> config/memberMapper.xml 환경설정 -> 

MemberDAO -> MemberDAOImp -> MemberService -> MemberServiceImp -> Controller

 

DAO와 Service가 있는데, DAO는 메소드이고 Service는 프로세스입니다.

메소드를 프로세스화 시켜 나중에 유지보수 하기 쉽도록 하기 위해 이런식으로 만들었습니다.

 

 

<!-- [1] DataSource빈 선언 -->
	<bean id="dataSource"
		class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="oracle.jdbc.OracleDriver" />
		<property name="url" value="jdbc:oracle:thin://@127.0.0.1:1521:xe" />
		<property name="username" value="hr" />
		<property name="password" value="a1234" />
	</bean>

	<!-- [2] SqlSessionFactoryBean 빈 선언 -->
	<bean id="sqlSessionFactory"
		class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource" />
		<property name="mapperLocations">
			<list>
				<value>classpath:config/*Mapper.xml</value>
			</list>
		</property>
	</bean>

	<!-- [3] SqlSessionTemplate 빈 선언 -->
	<bean id="sqlSession"
		class="org.mybatis.spring.SqlSessionTemplate">
		<constructor-arg ref="sqlSessionFactory" />
	</bean>
    
    <!-- [4] MemberDaoImp 빈 등록 -->
    <bean id="dao" class="dao.MemberDaoImp">
		<property name="sqlSession" ref="sqlSession" />
	</bean>
    
    <!-- [5] 컨트롤러 등록 -->
    <bean class="controller.MainController">
		<property name="memberservice" ref="memberservice" />
	</bean>

dispatcher-servlet.xml

DB는 Oracle Database를 사용했습니다.

DB연동을 위해 DataSourceBean을 선언해줍니다. username과 password를 자기꺼에 맞게 입력해주시고...

myBatis연동을 위한 sqlSessionFactoryBean도 선언해줍니다.

다음으로 SqlSessionTemplateBean도 선언해줍니다.

그다음에 MeberDaoImp와 메인컨트롤러도 등록해줍니다.

 

 

 

CREATE TABLE member(
    mem_id VARCHAR(100) PRIMARY KEY,    -- 회원 아이디
    mem_pw VARCHAR(100),                -- 회원 비밀번호
    mem_name VARCHAR(100),              -- 회원 이름
    mem_birth VARCHAR(100),             -- 회원 생일
    mem_email VARCHAR(100),             -- 회원 이메일
    mem_phone VARCHAR(100),             -- 회원 전화번호
    mem_gender VARCHAR(100),            -- 회원 성별
    mem_hobby VARCHAR(100),             -- 회원 취미
    mem_oaddress VARCHAR(100),          -- 회원 우편번호
    mem_address VARCHAR(100),           -- 회원 주소
    mem_detailaddress VARCHAR(100),     -- 회원 상세 주소
    mem_point NUMBER NOT NULL           -- 회원 포인트
);

member 테이블

회원가입할때 들어가는 칼럼들 입니다.

회원 포인트는 쇼핑몰에서 물건을살때 일정금액의 %를 포인트로 적립해주는데 그것을 표현하기 위한 칼럼입니다.

member테이블에서 필요한 칼럼들만 골라서 쓰시면 됩니다.

 

 

 

	<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>3.4.6</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis-spring</artifactId>
			<version>1.3.2</version>
		</dependency>

pom.xml에서 mybatis를쓰기위한 dependency 선언

 

 

 

<?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">

	<!-- 회원가입 -->
	<insert id="join" parameterType="dto.MemberDTO">
		insert into member
		values(
		#{mem_id},
		#{mem_pw},
		#{mem_name},
		#{mem_birth},
		#{mem_email},
		#{mem_phone},
		#{mem_gender},
		null,
		#{mem_oaddress},
		#{mem_address},
		#{mem_detailaddress},
		0
		)
	</insert>
</mapper>

memberMapper.xml

회원가입할때 입력한 내용들을 insert 합니다.

 

 

 

package dao;

import java.util.List;

import javax.servlet.http.HttpSession;

import dto.MemberDTO;

public interface MemberDAO {
	// 회원가입 메소드
	public void memberJoinMethod(MemberDTO dto);
}

MemberDAO.java

DB에 Access하기위해 MemberDao를 만들었습니다.

 

 

 

package dao;

import javax.servlet.http.HttpSession;

import org.mybatis.spring.SqlSessionTemplate;

import dto.MemberDTO;

public class MemberDaoImp implements MemberDAO {
	private SqlSessionTemplate sqlSession;

	public MemberDaoImp() {

	}

	public void setSqlSession(SqlSessionTemplate sqlSession) {
		this.sqlSession = sqlSession;
	}

	@Override
	public void memberJoinMethod(MemberDTO dto) {
		sqlSession.insert("member.join", dto);

	}
}

MemberDAOImp.java

MemberDAO를 구현한 MemberDAOImp입니다.

 

 

package service;

import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import dto.MemberDTO;

public interface MemberService {
	// 회원가입 프로세스
	public void memberJoinProcess(MemberDTO dto);
}

MemberService.java

DAO의 메소드를 프로세스화 시키기위해 MeberService를 interface로 만들었습니다.

 

 

 

package service;

import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import dto.MemberDTO;

public class MemberServiceImp implements MemberService {
	private MemberDAO dao;

	public void setDao(MemberDAO dao) {
		this.dao = dao;
	}

	// 회원가입
	@Override
	public void memberJoinProcess(MemberDTO dto) {
		dao.memberJoinMethod(dto);
	}

}

MemberServiceImp.java

MemberService를 구현했습니다.

 

 

 

package dto;

public class MemberDTO {
   private String mem_id;
   private String mem_pw;
   private String mem_name;
   private String mem_birth;
   private String mem_email;
   private String mem_phone;
   private String mem_gender;
   private String mem_hobby;
   private String mem_oaddress;
   private String mem_address;
   private String mem_detailaddress;
   private int mem_point;

   // private String mem_emailchk;
   // private String mem_address;


   public String getMem_oaddress() {
      return mem_oaddress;
   }

   public void setMem_oaddress(String mem_oaddress) {
      this.mem_oaddress = mem_oaddress;
   }

   public String getMem_address() {
      return mem_address;
   }

   public void setMem_address(String mem_address) {
      this.mem_address = mem_address;
   }

   public String getMem_detailaddress() {
      return mem_detailaddress;
   }

   public void setMem_detailaddress(String mem_detailaddress) {
      this.mem_detailaddress = mem_detailaddress;
   }

   public String getMem_gender() {
      return mem_gender;
   }

   public void setMem_gender(String mem_gender) {
      this.mem_gender = mem_gender;
   }

   public String getMem_hobby() {
      return mem_hobby;
   }

   public void setMem_hobby(String mem_hobby) {
      this.mem_hobby = mem_hobby;
   }

   public String getMem_id() {
      return mem_id;
   }

   public void setMem_id(String mem_id) {
      this.mem_id = mem_id;
   }

   public String getMem_pw() {
      return mem_pw;
   }

   public void setMem_pw(String mem_pw) {
      this.mem_pw = mem_pw;
   }

   public String getMem_name() {
      return mem_name;
   }

   public void setMem_name(String mem_name) {
      this.mem_name = mem_name;
   }

   public String getMem_birth() {
      return mem_birth;
   }

   public void setMem_birth(String mem_birth) {
      this.mem_birth = mem_birth;
   }

   public String getMem_email() {
      return mem_email;
   }

   public void setMem_email(String mem_email) {
      this.mem_email = mem_email;
   }

   public String getMem_phone() {
      return mem_phone;
   }

   public void setMem_phone(String mem_phone) {
      this.mem_phone = mem_phone;
   }

   public int getMem_point() {
      return mem_point;
   }

   public void setMem_point(int mem_point) {
      this.mem_point = mem_point;
   }
   
}

MemberDTO.java

DB에데이터들을 Transfer하기 위해 DTO를 만들었습니다.

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NANALAND 회원가입</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- daum 도로명주소 찾기 api -->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

<style type="text/css">
td{
   border:1px solid #000000;
   border-collapse:collapse;
}
</style>
 
 <script type="text/javascript">

//모든 공백 체크 정규식
var empJ = /\s/g;
//아이디 정규식
var idJ = /^[a-z0-9][a-z0-9_\-]{4,19}$/;
// 비밀번호 정규식
var pwJ = /^[A-Za-z0-9]{4,12}$/;
// 이름 정규식
var nameJ = /^[가-힣]{2,4}|[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/;
// 이메일 검사 정규식
var mailJ = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
// 휴대폰 번호 정규식
var phoneJ = /^01([0|1|6|7|8|9]?)?([0-9]{3,4})?([0-9]{4})$/;

/^[가-힣]{2,4}|[a-zA-Z]{2,10}\s[a-zA-Z]{2,10}$/


var birthJ = false;

var address = $('#mem_detailaddress');

$(document).ready(function() {
   var address = $('#mem_detailaddress');

   //아이디 중복확인
      $("#mem_id").blur(function() {
          if($('#mem_id').val()==''){
             $('#id_check').text('아이디를 입력하세요.');
             $('#id_check').css('color', 'red');                     
      
             } else if(idJ.test($('#mem_id').val())!=true){
                $('#id_check').text('4~12자의 영문, 숫자만 사용 가능합니다.');
                $('#id_check').css('color', 'red');
             } else if($('#mem_id').val()!=''){
                
               var mem_id=$('#mem_id').val();
                 $.ajax({
                     async : true,
                        type : 'POST',
                      data : mem_id,//mem_id라는 이름으로 mem_id라는 데이터를 @WebServlet("/idsearch.do")에 보내겠다
                      url : 'idcheck.do',
                        dateType: 'json',
                        contentType: "application/json; charset=UTF-8",
                        success : function(data) {

             if(data.cnt > 0){
                $('#id_check').text('중복된 아이디 입니다.');
                      $('#id_check').css('color', 'red');
                      $("#usercheck").attr("disabled", true);
             }else{
                if(idJ.test(mem_id)){
                   $('#id_check').text('사용가능한 아이디 입니다.');
                   $('#id_check').css('color', 'blue');
                   $("#usercheck").attr("disabled", false);
                }
                else if(mem_id==''){
                $('#id_check').text('아이디를 입력해주세요.');
                      $('#id_check').css('color', 'red');
                      $("#usercheck").attr("disabled", true);
                }
                else{
                   $('#id_check').text("아이디는 소문자와 숫자 4~12자리만 가능합니다.");
                   $('#id_check').css('color', 'red');
                   $("#usercheck").attr("disabled", true);
                }
             }

           }

                });//ajax/// 
             }//else if
           
    });//blur
    
     $('form').on('submit',function(){
         var inval_Arr = new Array(8).fill(false);
         if (idJ.test($('#mem_id').val())) {
            inval_Arr[0] = true;   
         } else {
            inval_Arr[0] = false;
            alert('아이디를  확인하세요.');
            return false;
         }
         // 비밀번호가 같은 경우 && 비밀번호 정규식
         if (($('#mem_pw').val() == ($('#mem_pw2').val()))
               && pwJ.test($('#mem_pw').val())) {
            inval_Arr[1] = true;
         } else {
            inval_Arr[1] = false;
            alert('비밀번호를 확인하세요.');
            return false;
         }
         // 이름 정규식
         if (nameJ.test($('#mem_name').val())) {
            inval_Arr[2] = true;   
         } else {
            inval_Arr[2] = false;
            alert('이름을 확인하세요.');
            return false;
         }
         // 생년월일 정규식
          if (birthJ) {
            console.log(birthJ);
            inval_Arr[3] = true; 
         } else {
            inval_Arr[3] = false;
            alert('생년월일을 확인하세요.');
            return false;
         } 
         // 이메일 정규식
         if (mailJ.test($('#mem_email').val())){
            console.log(phoneJ.test($('#mem_email').val()));
            inval_Arr[4] = true;
         } else {
            inval_Arr[4] = false;
            alert('이메일을 확인하세요.');
            return false;
         }
         // 휴대폰번호 정규식
         if (phoneJ.test($('#mem_phone').val())) {
            console.log(phoneJ.test($('#mem_phone').val()));
            inval_Arr[5] = true;
         } else {
            inval_Arr[5] = false;
            alert('휴대폰 번호를 확인하세요.');
            return false;
         }
         //성별 확인
          if(member.mem_gender[0].checked==false&&member.mem_gender[1].checked==false){
                 inval_Arr[6] = false;
               alert('성별을 확인하세요.');
               return false;
             
         } else{
            inval_Arr[6] = true;
         } 
   
         //주소확인
         if(address.val() == ''){
            inval_Arr[7] = false;
            alert('주소를 확인하세요.');
            return false;
         }else
            inval_Arr[7] = true;
      
         //전체 유효성 검사
         var validAll = true;
         for(var i = 0; i < inval_Arr.length; i++){
            if(inval_Arr[i] == false){
               validAll = false;
            }
         }
         if(validAll == true){ // 유효성 모두 통과
            alert('NANALAND 가족이 되어주셔 감사합니다.');      
         } else{
            alert('정보를 다시 확인하세요.')
         }
       });


   $('#mem_id').blur(function() {
      if (idJ.test($('#mem_id').val())) {
         console.log('true');
         $('#id_check').text('');
      } else {
         console.log('false');
         $('#id_check').text('5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.');
         $('#id_check').css('color', 'red');
      }
   });
   $('#mem_pw').blur(function() {
      if (pwJ.test($('#mem_pw').val())) {
         console.log('true');
         $('#pw_check').text('');
      } else {
         console.log('false');
         $('#pw_check').text('4~12자의 숫자 , 문자로만 사용 가능합니다.');
         $('#pw_check').css('color', 'red');
      }
   });

   //1~2 패스워드 일치 확인
   $('#mem_pw2').blur(function() {
      if ($('#mem_pw').val() != $(this).val()) {
         $('#pw2_check').text('비밀번호가 일치하지 않습니다.');
         $('#pw2_check').css('color', 'red');
      } else {
         $('#pw2_check').text('');
      }
   });

   //이름에 특수문자 들어가지 않도록 설정
   $("#mem_name").blur(function() {
      if (nameJ.test($(this).val())) {
         console.log(nameJ.test($(this).val()));
         $("#name_check").text('');
      } else {
         $('#name_check').text('한글 2~4자 이내로 입력하세요. (특수기호, 공백 사용 불가)');
         $('#name_check').css('color', 'red');
      }
   });
   $("#mem_email").blur(function() {
      if (mailJ.test($(this).val())) {
         $("#email_check").text('');
      } else {
         $('#email_check').text('이메일 양식을 확인해주세요.');
         $('#email_check').css('color', 'red');
      }
   });
   

         // 생일 유효성 검사
           var birthJ = false;
           
           // 생년월일   birthJ 유효성 검사
           $('#mem_birth').blur(function(){
              var dateStr = $(this).val();      
               var year = Number(dateStr.substr(0,4)); // 입력한 값의 0~4자리까지 (연)
               var month = Number(dateStr.substr(4,2)); // 입력한 값의 4번째 자리부터 2자리 숫자 (월)
               var day = Number(dateStr.substr(6,2)); // 입력한 값 6번째 자리부터 2자리 숫자 (일)
               var today = new Date(); // 날짜 변수 선언
               var yearNow = today.getFullYear(); // 올해 연도 가져옴
              
               if (dateStr.length <=8) {
                 // 연도의 경우 1900 보다 작거나 yearNow 보다 크다면 false를 반환합니다.
                  if (year > yearNow || year < 1900 ){
                     
                     $('#birth_check').text('생년월일을 확인해주세요');
                    $('#birth_check').css('color', 'red');
                  }  
                  else if (month < 1 || month > 12) {
                        
                     $('#birth_check').text('생년월일을 확인해주세요 ');
                    $('#birth_check').css('color', 'red'); 
                  
                  }else if (day < 1 || day > 31) {
                     
                     $('#birth_check').text('생년월일을 확인해주세요 ');
                    $('#birth_check').css('color', 'red'); 
                     
                  }else if ((month==4 || month==6 || month==9 || month==11) && day==31) { 
                     $('#birth_check').text('생년월일을 확인해주세요 ');
                    $('#birth_check').css('color', 'red'); 
                  }else if (month == 2) {
                        var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
                        
                      if (day>29 || (day==29 && !isleap)) {
                         
                         $('#birth_check').text('생년월일을 확인해주세요 ');
                       $('#birth_check').css('color', 'red'); 
                     
                    }else{
                       $('#birth_check').text('');
                       birthJ = true;
                    }
                  }else{
                     $('#birth_check').text(''); 
                    birthJ = true;
                 }//end of if
                 }else{
                    //1.입력된 생년월일이 8자 초과할때 :  auth:false
                    $('#birth_check').text('생년월일을 확인해주세요 ');
                    $('#birth_check').css('color', 'red');  
                 }
              }); //End of method /*
 
              // 휴대전화
              $('#mem_phone').blur(function(){
                 if(phoneJ.test($(this).val())){
                    console.log(nameJ.test($(this).val()));
                    $("#phone_check").text('');
                 } else {
                    $('#phone_check').text('휴대폰번호를 확인해주세요 ');
                    $('#phone_check').css('color', 'red');
                 }
              });
});

//우편번호 찾기 버튼 클릭시 발생 이벤트
function execPostCode() {
     new daum.Postcode({
         oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

            // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
            var extraRoadAddr = ''; // 도로명 조합형 주소 변수

            // 법정동명이 있을 경우 추가한다. (법정리는 제외)
            // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
            if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                extraRoadAddr += data.bname;
            }
            // 건물명이 있고, 공동주택일 경우 추가한다.
            if(data.buildingName !== '' && data.apartment === 'Y'){
               extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
            }
            // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
            if(extraRoadAddr !== ''){
                extraRoadAddr = ' (' + extraRoadAddr + ')';
            }
            // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
            if(fullRoadAddr !== ''){
                fullRoadAddr += extraRoadAddr;
            }

            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            console.log(data.zonecode);
            console.log(fullRoadAddr);
         /*      var a = console.log(data.zonecode);
            var b = console.log(fullRoadAddr);
            
            if(a == null || b = null){
               alert("주소를 확인하세요.");
               return false;
            }   */
            
            
            $("[name=mem_oaddress]").val(data.zonecode);
            $("[name=mem_address]").val(fullRoadAddr);
            
            document.getElementById('mem_oaddress').value = data.zonecode; //5자리 새우편번호 사용
            document.getElementById('mem_address').value = fullRoadAddr;

            //document.getElementById('mem_detailaddress').value = data.jibunAddress; 
        }
     }).open();
 }

</script> 
</head>
<body>

   <article class="container">
            <div class="page-header">
                <div class="col-md-6 col-md-offset-3">
                <h3>회원가입</h3>
                </div>
              
            </div>
            <div class="col-sm-6 col-md-offset-3">
                <form action="memberjoinpro.do" method="post" role="form" id="usercheck" name="member">
                
                    <div class="form-group">
                        <label for="id">아이디</label>
                        <input type="text" class="form-control" id="mem_id" name="mem_id" placeholder="ID">
                        <div class="eheck_font" id="id_check"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="pw">비밀번호</label>
                        <input type="password" class="form-control" id="mem_pw" name="mem_pw" placeholder="PASSWORD">
                        <div class="eheck_font" id="pw_check"></div>
                    </div>
                    <div class="form-group">
                        <label for="pw2">비밀번호 확인</label>
                        <input type="password" class="form-control" id="mem_pw2" name="mem_pw2" placeholder="Confirm Password">
                          <div class="eheck_font" id="pw2_check"></div>
                    </div>
                    
                       <div class="form-group">
                        <label for="mem_name">이름</label>
                        <input type="text" class="form-control" id="mem_name" name="mem_name" placeholder="Name">
                         <div class="eheck_font" id="name_check"></div>
                    </div>
                    
                        <div class="form-group">
                        <label for="mem_birth">생년월일</label>
                        <input type="tel" class="form-control" id="mem_birth" name="mem_birth" placeholder="ex) 19990101">
                       <div class="eheck_font" id="birth_check"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="mem_email">이메일 주소</label>
                        <input type="email" class="form-control" id="mem_email" name="mem_email" placeholder="E-mail">
                       <div class="eheck_font" id="email_check"></div>
                    </div>
                    
             
                    <div class="form-group">
                        <label for="mem_phone">휴대폰 번호('-'없이 번호만 입력해주세요)</label>
                        <input type="tel" class="form-control" id="mem_phone" name="mem_phone" placeholder="Phone Number">
                         <div class="eheck_font" id="phone_check"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="mem_gender">성별 </label>
                        <input type="checkbox" id="mem_gender" name="mem_gender" value="남">남
                        <input type="checkbox" id="mem_gender" name="mem_gender" value="여">여
                    </div>

                    
<div class="form-group">                   
<input class="form-control" style="width: 40%; display: inline;" placeholder="우편번호" name="mem_oaddress" id="mem_oaddress" type="text" readonly="readonly" >
    <button type="button" class="btn btn-default" onclick="execPostCode();"><i class="fa fa-search"></i> 우편번호 찾기</button>                               
</div>

<div class="form-group">
    <input class="form-control" style="top: 5px;" placeholder="도로명 주소" name="mem_address" id="mem_address" type="text" readonly="readonly" />
</div>

<div class="form-group">
    <input class="form-control" placeholder="상세주소" name="mem_detailaddress" id="mem_detailaddress" type="text"  />
</div>


  <div class="form-group text-center">
       <button type="submit" class="btn btn-primary">회원가입</button> 
  </div>
                </form>
            </div>
        </article>
</body>
</html>

memberjoin.jsp

jsp에는 각종 정보들의 유효성검사와 css들이 있습니다. 

유효성검사에는 ajax를 사용하여 비동기처리를 했습니다.

도로명주소는 daum의 오픈api를 사용했습니다.

form action="memberjoinpro.do" 가 있습니다. 정보를 모두 입력한 후, 회원가입을 누르면 action이 발생하고

controller에서 이 액션을 받습니다.

 

 

 

	// 회원가입정보를 다 입력하고 회원가입 버튼을 누른다.
	@RequestMapping(value = "/memberjoinpro.do", method = RequestMethod.POST)
	public ModelAndView memberJoinPro(MemberDTO dto) {
		ModelAndView mav = new ModelAndView();
		memberservice.memberJoinProcess(dto);
		mav.setViewName("memberloginform");
		return mav;
	}// end memberJoinPro()

MainController의 회원가입 RequestMapping하는 부분

---

 

Meber테이블

현재 Meber테이블에는 2개의 회원정보가 들어있는 상태입니다. 빨간줄은 저의 개인정보라 지웠습니다..ㅎㅎ

 

회원정보를 입력한 모습

회원가입을 해보겠습니다

 

Member테이블에 추가된 모습

3번에 입력한 내용이 추가됐네요~ㅎㅎ

 

다음시간에는 이 정보를 사용하여 로그인및 회원정보수정, 삭제, 아이디찾기, 비밀번호찾기 등등을 보여줄 예정입니다.

 

그럼 모두모두 행복한 날 보내시길..!