[Spring][쇼핑몰 프로젝트] 2. 회원가입 기능 구현

목표

회원가입 기능을 구현하기 위해서 다음과 같은 기능을 구현합니다.

• 회원가입페이지(join.jsp)에서 필요 정보를 입력합니다.
• 입력 후 '가입하기' 버튼을 클릭합니다.
• 입력한 회원정보가 데이터베이스에 저장되고 메인 페이지로 이동합니다.

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

1) MySQL 테이블 생성

• 아이디(memberId)
• 비밀번호(memberPw)
• 회원 이름(memberName)
• 회원 메일(memberMail)
• 우편 번호(memberAddr1)
• 사는 지역(memberAddr2)
• 상세 주소(memberAddr3)
• 관리자 여부(adminCk) / 0 : 일반사용자, 1 : 관리자
• 등록 날짜(regDate)
• 회원 돈(money)
• 회원 포인트(point)

* 오류는 DB가 2개 있을 시, CREATE TABLE DB.테이블이름(); 하여 지정

CREATE TABLE BOOK_MEMBER(
  memberId VARCHAR(50),
  memberPw VARCHAR(100) NOT NULL,
  memberName VARCHAR(30) NOT NULL,
  memberMail VARCHAR(100) NOT NULL,
  memberAddr1 VARCHAR(100) NOT NULL,
  memberAddr2 VARCHAR(100) NOT NULL,
  memberAddr3 VARCHAR(100) NOT NULL,
  adminCk int NOT NULL,
  regDate DATE NOT NULL,
  money int NOT NULL,
  point int NOT NULL,
  PRIMARY KEY(memberId)
);

2) VO 생성

- book_member 테이블에 데이터를 저장하거나, 반환된 데이터를 담을 객체(VO) com.test.model에 "MemberVo.java"클래스를 생성합니다.

package com.test.model;

public class MemberVO {
	
	//회원 id
	private String memberId;
	
	//회원 비밀번호
	private String memberPw;
	
	//회원 이름
	private String memberName;
	
	//회원 이메일
	private String memberMail;
	
	//회원 우편번호
	private String memberAddr1;
	
	//회원 주소
	private String memberAddr2;
	
	//회원 상세주소
	private String memberAddr3;
	
	// 관리자 구분(0:일반사용자, 1:관리자)
	private int adminCk;
	
	//등록일자
	private int regDate;
	
	//회원 돈
	private int money;
	
	//회원 포인트
	private int point;
	
	//getter / setter
	public String getMemberId() {
		return memberId;
	}

	public void setMemberId(String memberId) {
		this.memberId = memberId;
	}

	public String getMemberPw() {
		return memberPw;
	}

	public void setMemberPw(String memberPw) {
		this.memberPw = memberPw;
	}

	public String getMemberName() {
		return memberName;
	}

	public void setMemberName(String memberName) {
		this.memberName = memberName;
	}

	public String getMemberMail() {
		return memberMail;
	}

	public void setMemberMail(String memberMail) {
		this.memberMail = memberMail;
	}

	public String getMemberAddr1() {
		return memberAddr1;
	}

	public void setMemberAddr1(String memberAddr1) {
		this.memberAddr1 = memberAddr1;
	}

	public String getMemberAddr2() {
		return memberAddr2;
	}

	public void setMemberAddr2(String memberAddr2) {
		this.memberAddr2 = memberAddr2;
	}

	public String getMemberAddr3() {
		return memberAddr3;
	}

	public void setMemberAddr3(String memberAddr3) {
		this.memberAddr3 = memberAddr3;
	}

	public int getAdminCk() {
		return adminCk;
	}

	public void setAdminCk(int adminCk) {
		this.adminCk = adminCk;
	}

	public int getRegDate() {
		return regDate;
	}

	public void setRegDate(int regDate) {
		this.regDate = regDate;
	}

	public int getMoney() {
		return money;
	}

	public void setMoney(int money) {
		this.money = money;
	}

	public int getPoint() {
		return point;
	}

	public void setPoint(int point) {
		this.point = point;
	}

	@Override
	public String toString() {
		return "MemberVO [memberId=" + memberId + ", memberPw=" + memberPw + ", memberName=" + memberName
				+ ", memberMail=" + memberMail + ", memberAddr1=" + memberAddr1 + ", memberAddr2=" + memberAddr2
				+ ", memberAddr3=" + memberAddr3 + ", adminCk=" + adminCk + ", regDate=" + regDate + ", money=" + money
				+ ", point=" + point + "]";
	}

}

2. MemberMapper.xml 추가

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

- MemberMapper.xml에 회원가입 쿼리문 작성을 하기전에 회원가입에 사용할 쿼리를 테스트하여 추후에 사용할 관리자 아이디를 만들겠습니다.

insert into book_member values('admin', 'admin', 'admin', 'admin', 'admin', 'admin', 'admin', 1, sysdate(), 1000000, 1000000);

2) mapper.xml 작성

- src/main/resources에 있는 mapper 폴더에 MemberMapper.xml 파일을 생성
- 아래의 기본적인 코드를 작성합니다
- mapper 태그에 namespace 속성은 연동시키고자 하는 Mapper 인터페이스명을 경로와 함께 명시해줍니다.

<?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="com.test.mapper.MemberMapper">

  </mapper>

- mapper태그 내에 insert 태그를 추가해줍니다. insert태그의 id속성은 'memberJoin' 으로 하고 memberJoin은 MemberMapper.java에서 회원가입 쿼리문을 호출하는 메서드 이름입니다.

- insert 태그 내에 앞서 테스트 하였던 쿼리 명령문을 붙여 넣기 한 후 삽입될 데이터를 '#{VO에 저장된 데이터 이름}으로 교체해줍니다.

- adminCk는 회원가입 시 기본적으로 일반회원으로 등록하기 위해 0이 삽입되도록 합니다.

- money, point의 경우 추후에 회원이 물품을 구매하는 기능을 구현하기 위해 회원에게 10만원과 5천 포인트를 기본으로 가질 수 있도록 하였습니다.

  	<insert id="memberJoin">
  		insert into book_member values(#{memberId}, #{memberPw}, #{memberName}, #{memberMail}, #{memberAddr1}, #{memberAddr2}, #{memberAddr3}, 0, sysdate(), 100000, 5000 )

  	</insert>

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

- com.test.mapper 경로에 MemberMapper.java 인터페이스를 추가해줍니다.

1) 회원등록 insert 쿼리 추가

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

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

- src/test/java 경로에 패키지 com.test.mapper를 추가해준 후 MemberMapperTests.java 클래스를 추가해주고 아래의 코드를 추가해준 후 JUnit테스트를 진행합니다.

@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);			//쿼리 메서드 실행
		
	}

5. MemberService.java

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

- MemberService.java 인터페이스와 MemberServiceImpl.java 클래스에 아래의 코드를 추가해줍니다.
- MemberServiceImpl.java 클래스는 MeberService.java 인터페이스를 상속받도록 설정해줍니다.
- MemberServiceImpl.java 클래스에 @Service 어노테이션이 반드시 추가해주어야 한다.

MemberService.java

public interface MemberService {

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

MemberSerivceImpl.java

@Service
public class MemberServiceImpl implements MemberService{

	@Autowired
	MemberMapper membermapper;

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

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

- MemberService.java가 MemberController.java에 자동 주입되도록 @Autowired 코드를 추가해줍니다.

	@Autowired
	private MemberService memberservice;

- 회원가입 메서드를 추가해줍니다.
- 반환형식을 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";
	}

7. join.jsp

1.

- 정보에 입력해야할 input태그에 속성 name태그를 추가합니다. 속성 name의 값은 해당 input태그에 들어가야할 정보에 해당하는 MemberVO에서 정의한 변수 이름을 삽입합니다.

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

2.

- form태그에 기존에 있던 action속성을 지우고, id속성과 method속성을 추가해줍니다.

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

3.

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

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

4.

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

<script>

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

</script>

8. 테스트

9. 정리