19.회원가입구현하기

회원가입 구현하기

순서

1.VO생성하기

2.Mapper처리및 테스트

3.Service 처리 및 테스트

4.Controller 처리

5.뷰처리

---

 

1.VO 생성하기

• member 테이블

create table member(
   mnum int primary key, 
    -- unique key : 테이블 내 항상 유일해야하는 값(중복을 허용하지 않는 컬럼)
    id varchar2(20) UNIQUE, --아이디
    pw varchar2(100) not null, --비밀번호
    name varchar2(20) not null,--이름
    birth varchar2(30)not null,--생일
    gender varchar2(10) not null,--성별
    email varchar2(30) not null,--이메일
    phone varchar2(30) not null,--전화번호
    zipcode varchar2(30),--파일
    addr1 varchar2(300),--주소1
    addr2 varchar2(300),--주소2
    addr3 varchar2(300),--주소3
    mpoint int default 0,--포인트
    money number default 0,--돈
    regdate date default sysdate, --날짜
    adminchk NUMBER NOT NULL--관리자확인
);

-

 

2.Mapper처리및 테스트

• MemberMapper.xml

<!-- 회원 가입 하기 -->
	<insert id="memberjoin">
		insert into member(mnum, id, pw, name, birth, gender, email, phone, addr1,
		addr2, addr3, regdate, adminchk)
		values(memberSeq.NEXTVAL, #{id}, #{pw}, #{name}, #{birth}, #{gender}, #{email}, #{phone},
		#{addr1}, #{addr2}, #{addr3}, sysdate, 0)
	</insert>

• MemberMapper.java

//회원가입 
	public void memberjoin(MemberVO member);

회원가입 쿼리문을 호출 시키는 메소드를 작성한다.

mapper테스트 하기

// 회원 가입 쿼리 테스트 
	
	 @Test public void memberjoin() throws Exception{
	 
	  MemberVO member = new MemberVO();
	  
	 member.setId("test"); member.setPw("test"); member.setName("test");
	  member.setBirth("test"); member.setEmail("test"); member.setGender("test");
	  member.setPhone("test"); member.setAddr1("test"); member.setAddr2("test");
	  member.setAddr3("test");
	
	  mapper.memberjoin(member);
	  
	  }
	 

 

3.service 처리 및 테스트

• MemberService.java

	// 회원가입
	public void memberjoin(MemberVO member) throws Exception;

• MemberServiceimpl.java

	//회원가입
	@Override
	public void memberjoin(MemberVO member) throws Exception {

		System.out.println("memberjoin service..");

		mapper.memberjoin(member);

	}

인터페이스를 상속 받도록 설정을 해준다.

4.Controller 처리

• MemberController

  // 회원가입 페이지 이동
    @RequestMapping(value = "/client-register", method = RequestMethod.GET)
    public String joinGET() {
  
        System.out.println("회원가입 페이지 진입");
  
        return "client/login/client-register";
    }
  

  반환 형식을 string 으로 하였고 회원 가입 페이지로 이동 할 수 있도록 하였다.

	// 회원가입 메소드
	@RequestMapping(value = "/client-register", method = RequestMethod.POST)
	public String joinPOST(MemberVO member) throws Exception {

		/*
		 * String rawPw =""; //인코딩 전 비밀번호 String encodePw =""; //인코딩 후 비밀번호
		 * 
		 * 
		 * rawPw = member.getPw(); //비밀번호 데이터를 얻음 encodePw = pwEncoder.encode(rawPw);
		 * //비밀번호를 인코딩 member.setPw(encodePw); // 인코딩한 member객체를 다시 저장한다
		 */
		service.memberjoin(member);

		return "redirect:/client-login";
	}

회원가입 페이지로 이동 후 버튼으 누를 시 회원가입 메소드를 호출하여 회원가입이 되게 하였다.

5.View처리

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

<%@ include file="../inc/client-header.jsp"%>

<script src="https://code.jquery.com/jquery-3.4.1.js"
	integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
	crossorigin="anonymous"></script>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
	src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<link rel="stylesheet" href="${ctx}/resources/css/join.css" />

jpuery를 사용하기 위해서 제이쿼리를 선언한다.

						<div class="button">
						<input  type ="button" class="join_btn btn" value="가입하기">
						</div>

						<p class="outer-link">
							로그인이 이미 되어 있으신가요? <a href="client-login">로그인 하기</a>
						</p>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

 <script>

    $(document).ready(function(){
    	
    	$(".join_btn").click(function(){
    		
	 $("#joinForm").attr("action","/client-register");
  	    	$("#joinForm").submit();
  	     }
</script>


	
<%@ include file="../inc/footer.jsp"%>

가입하기 버튼을 클릭하면 form 태그에 속성이 action(url)이 추가 되고 서버에 제출된다.