[Spring][쇼핑몰 프로젝트][2.2] 회원가입 기능 구현(Service / controller/ jsp)

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

 이번 포스팅에선 회원가입 기능을 구현해보겠습니다. 해당 기능이 구현되는 상황은 다음과 같습니다.

 

     1. 회원가입페이지(join.jsp)에서 필요 정보를 입력합니다.

     2.입력 후 '가입하기' 버튼을 클릭합니다.

     3.입력한 회원정보가 데이터베이스에 저장되고 화면은 메인 페이지로 이동합니다.

 

 회원가입 기능 구현은 두포스팅에 걸쳐서 진행하겠습니다. 

순서

1. 데이터베이스 테이블 생성 및 VO 생성

   1) Oracle

   2) MySQL

   3) VO생성

2. MemberMapper.xml 추가

   1) insert 쿼리문 테스트 및 관리자 아이디 만들기

   2) mapper.xml 작성

3. MemberMapper.java 인터페이스 추가

----------------------↑이전 포스팅--------------------------------

4. Mapper에 추가한 쿼리문 테스트(MemberMapperTests.java)

5. MemberService.java 추가

6. MemberController.java 회원가입 메서드 추가

7. join.jsp

8. 테스트

9. 정리

 

4. Mapper에 추가한 쿼리 메서드 테스트(MemberMapprTests.java)

 

- src/test/java 경로에 패키지 com.vam.mapper를 추가해준 후 MemberMapperTests.java 클래스를 추가해줍니다.

 

그림 4-1

 

- 아래와 같이 코드를 추가해준후 테스트를 진행해줍니다. 

 

 MemberMapperTests.java

package com.vam.mapper;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import com.vam.model.MemberVO;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
public class MemberMapperTests {

	@Autowired
	private MemberMapper membermapper;			//MemberMapper.java 인터페이스 의존성 주입
	
	//회원가입 쿼리 테스트 메서드
	@Test
	public void memberJoin() throws Exception{
		MemberVO member = new MemberVO();
		
		member.setMemberId("test");			//회원 id
		member.setMemberPw("test");			//회원 비밀번호
		member.setMemberName("test");		//회원 이름
		member.setMemberMail("test");		//회원 메일
		member.setMemberAddr1("test");		//회원 우편번호
		member.setMemberAddr2("test");		//회원 주소
		member.setMemberAddr3("test");		//회원 상세주소
		
		membermapper.memberJoin(member);			//쿼리 메서드 실행
		
	}
	
	
	
}

 

그림 4-2

1

그림 4-3

 

그림 4-4

 

-데이터베이스 SELECT * FROM book_member; 명령문을 통해 테스트가 정상적으로 진행되었는지 확인합니다.

 

그림 4-5 Oracle 결과

 

그림 4-6 MySQL 결과

 

5.MemberService.java 

- com.vam.service에 MemberService.java 인터페이스와 MemberServiceImpl.java 클래스를 추가해줍니다.

 

그림 5-1

 

- MemberService.java 인터페이스와 MemberServiceImpl.java클래스의 코드는 아래와 같이 추가해줍니다.

- MemberServceImpl.java 클래스는 MemberService.java 인터페이스르 상속받도록 설정해줍니다.

(public class MemberServiceImpl 옆에 implements MemberService 추가)

- 가장 주의해야할점은 MemberServiceImp.java 클래스에 @Service 어노테이션이 반드시 추가해주어야 한다는 점입니다. 

 

package com.vam.service;

import com.vam.model.MemberVO;

public interface MemberService {

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

 

package com.vam.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.vam.mapper.MemberMapper;
import com.vam.model.MemberVO;

@Service
public class MemberServiceImpl implements MemberService{

	@Autowired
	MemberMapper membermapper;

	@Override
	public void memberJoin(MemberVO member) throws Exception {
		
		membermapper.memberJoin(member);
		
	}
	
	
	
}

 

6. MemberController.java 회원가입 메서드 추가

-  회원가입 메서드를 추가하기 앞서 @Autowired를 통해서 MemberService.java가 MemberController.java에 자동 주입되도록 코드를 추가해줍니다.

 

	@Autowired
	private MemberService memberservice;

 

그림 6-1

 

- 회원가입 메서드를 추가해줍니다.

- 반환형식을 String으로 하여 return에 main페이지로 이동하도록 작성하였습니다. 

 

	//회원가입
	@RequestMapping(value="/join", method=RequestMethod.POST)
	public String joinPOST(MemberVO member) throws Exception{
		
		logger.info("join 진입");
		
		// 회원가입 서비스 실행
		memberservice.memberJoin(member);
		
		logger.info("join Service 성공");
		
		return "redirect:/main";
		
	}

 

그림 6-2

 

 

7. join.jsp

- 정보를 입력해야할  input태그에 속성 name태그를 추가합니다. 속성 name의 값은 해당 input태그에 들어가야할 정보에 해당하는 MemberVO에서 정의한 변수 이름을 삽입합니다.(대상 클래스 : id_input, pw_input,  user_input, mail_input, address_input_1, address_input_2, address_input_3 )

 

<input class="id_input">

=>

<input class="id_input" name="memberId">

 

- form태그에 기존에 있던 action속성은 지우고, id속성과 method속성을 추가해줍니다. id속성의 값은 join_form, method속성의 값은 post로 한다. 

 

<form action="">

=>

<form id="join_form" method="post">

 

- jquery 사용을 위해 head태그 내부 제일 끝에 jquery연결을 위한<script>태그를 추가해준다

 

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

 

그림 7-1

 

- body태그 내부 제일 아래에 script 태그를 추가 해준 후 회원가입 클릭 시 회원가입 기능 작동을 위한 jquery 코드를 추가 해줍니다.

- 코드의 의미는 '가입하기 버튼'(<input type="button" class="join_button" value="가입하기">) 클릭하였을때 form태그에 속성 action(url 경로)이 추가되고, form태그가  서버에 제출이 된다는 의미입니다.(제출 방식(post)은 form태그에 미리 추가되어져 있습니다.)

 

<script>

$(document).ready(function(){
	//회원가입 버튼(회원가입 기능 작동)
	$(".join_button").click(function(){
		$("#join_form").attr("action", "/member/join");
		$("#join_form").submit();
	});
});

</script>

 

그림 7-2

 

8. 테스트

 - 회원가입 기능이 완성되었습니다. 해당기능이 정상적으로 작동이 되는지 확인해보도록하겠습니다.

 

- 서버를 구동시켜서 회원가입 페이지로 이동하겠습니다.

 

그림 8-1

 

- 회원가입페이지에 테르트를 위해 데이터를 test3을 입력하고 '가입하기' 버튼을 클릭합니다.

 

 

- 정상적으로 완료가되었다면 화면은 메인페이지로 이동할 것입니다.

 

 

- 데이터베이스Select명령문을 통해 방금 작성한 회원정보가 등록이 되었는지 확인합니다.

 

그림 8-4

 

그림 8-5

 

 

9. 정리

- 지금까지 작성한 문서들은 전체적인 흐름에서 어떤역할을 하는지 어떤흐름을 거치는지 정리하였습니다.

 

그림 9-1

 

 

 

DATE

• 2020.08.14 작성