본문 바로가기
벡엔드/spring

SPRING(15) 회원 관리 기능 구현_회원가입 기능

by Alan__kang__morlang 2022. 1. 26.
반응형

이번 시간에는 회원 관리 기능에서 중요한 회원 가입 기능에 대해서 구현해보겠습니다. 

 

1. 준비 했던 loginPOPUP 창의 회원가입의 버튼의 경로를 지정해주고 controller에 회원가입 폼으로 가는 경로를 설정해줍니다. 

 

https://qkqtodn1.tistory.com/60  전에 작성하던 loginPOPUP 를 참고하세요

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>로그인 창입니다.</h1>
<div align="center">
	<form action="">
		<input type="text" name="userId" placeholder="input_id"> <br>
		<input type="password" name="userPw" placeholder="input_pw"> <br>
		<input type="submit" value="login">
		<button type="button" onclick="location.href='<%=request.getContextPath()%>/user/registerForm'">회원가입</button>
	</form>
</div>

</body>
</html>

button의 onclick 의 기능으로  location.href=""에 안에 경로를 지정해서 controller로 값을 넘겨줍니다.

 

@GetMapping("user/registerForm")
	public String resgitserForm() {
		return "user/registerForm";
	}

controller에서 단순 경로만 지정해서 회원 가입의 폼을 불러오는 코드입니다. 그렇게 되면 view 의 user폴더에 registerForm.jsp의 화면을 보여주게 됩니다. 

 

2. registerForm.jsp의 코드는 회원의 정보를 작성하는 영역과 다음 API를 사용하는 javascript 그리고 

다음 주소 API와 email 을 입력받은 정보들을 하나의 정보로 합쳐서 보내주기 위한 javascript function 인 register()의 기능을 구현 했습니다. 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script type="text/javascript">
function daumpost() {
	new daum.Postcode({
		oncomplete : function(data) {
			// R : 도로명, J : 지번
			console.log("data.userSelectedType : " + data.userSelectedType)
			console.log("data.roadAddress : " + data.roadAddress)
			console.log("data.jibunAddress : " + data.jibunAddress)
			console.log("data.zonecode : " + data.zonecode)

			var addr = ""
			if (data.userSelectedType === 'R') {
				addr = data.roadAddress
			} else {
				addr = data.jibunAddress
			}
			document.getElementById("addr1").value = data.zonecode
			$("#addr2").val(addr)
			$("#addr3").focus()
		}
	}).open();
}
function register() {	
	email_1 = $("#email").val()
	email_2 = $("#email_2").val()
	emailAll = email_1 + "@" + email_2
	$("#email").val(emailAll)
	
	
	addr1 = $("#addr1").val()
	addr2 = $("#addr2").val()
	addr3 = $("#addr3").val()
	addr = addr1 + "/" + addr2 + "/" + addr3
	$("#addr1").val(addr)
	fo.submit()
	
	
}
</script>

<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원 가입 페이지 입니다.</h1>

	<form id="fo" action="${contextPath }/user/register" method="post">
		<input type="text" name="id" placeholder="가입 할 아이디 "> <br>
		<input type="password" name="pw" placeholder="가입 할 비밀번호"> <br>
		<input type="text" id="email" name="email" placeholder="가입 할 이메일">
		@
		<select id="email_2" name="email_2">
			<option selected>선텍하세요!</option>
			<option value="naver.com">naver.com</option>
			<option>daum.net</option>
			<option>google.com</option>
		</select>
		<input type="hidden" name="address">
		<input type="hidden" name="email">
		
		<input type="text" id="addr1" name="addr1"  readonly placeholder="우편번호" >	
		<input type="text" id="addr2" name="addr2" readonly placeholder="주소" ><br>
		<input type="text"id="addr3" name="addr3"  placeholder="상세주소"><br>
		<input type="button" onclick="daumpost()" value="우편번호 찾기"><br>
		<input type="button" onclick="register()" value="회원가입">
	</form>
</body>
</html>

javascript의 register() 는 보시는 것과 같이 입력은 받은 이메일의 두개의 값을 합쳐주고 주소를 입력받은 3개의 데이터를 합쳐주고 <form>태그의 정보를 보내주기 위핸 submit() 이 있는데 <form> 에 id를 fo를 주어서 전송하는 코드입니다. 

 

3. registerForm.jsp의 웹서비스 화면은 이렇게 동작합니다. 

 

registerForm.jsp

 

4.  화면의 회원의 정보를 입력하고 회원가입 버튼을 누르게 되면 controller로 보내줍니다. 구현은 하단의 코드를 참고하세요

 

@PostMapping("user/register")
	public String register(@RequestParam() String id,
						@RequestParam() String pw,
						@RequestParam("addr1") String address,
						@RequestParam() String email) {
		
		email = email.substring(0, email.length()-1); 
        //마지막 쉼표가 추가 되는것을 없애주는 작업을 합니다.
		
		MemberDTO dto = new MemberDTO();
		dto.setId(id);
		dto.setPw(pw);
		dto.setAddress(address);
		dto.setEmail(email);
		dto.setImageFileName("nan");
		
		ms.register(dto);
		return "user/registerForm";
	}

<form>태그에서 보내줄때 method방식을 post방식으로 보내주었기 때문에 postMapping으로 값을 받아오고 

input창의 데이터는 @RequestParam으로 값을 받아오고 타입은 String으로 값을 받아 왔습니다. 

그렇게 데이터를 매개변수에 넣어준 후에 MemberDTO 객체를 불러오고 setter를 이용해 매개변수의 값을 해당 dto에 값을 넣어주어 데이터베이스에 저장할 시킬 수 있도록 준비합니다. 

(프로필 사진인 경우에는 따로 작업할 예정이기 때문에 "nan"으로 값을 주었습니다.)

 

5. dto에 값을 다 넣어주었다면 @autowired로 호출시킨 MemberService의 ms를 이용해 resiger(dto) dto의 값을 service로 넘겨줍니다. 

 

-MemberService.Interface

 

package com.care.member.memberService;

import com.care.member.memberDTO.MemberDTO;

public interface MemberService {
	public void register(MemberDTO dto);

}

 

-MemberServiceImpl

 

package com.care.member.memberService;

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

import com.care.member.memberDTO.MemberDTO;
import com.care.member.mybatis.member.MemberMapper;

@Service
public class MemberServiceImpl implements MemberService{
	@Autowired MemberMapper mapper;

	@Override
	public void register(MemberDTO dto) {
		System.out.println(dto.getId());
		System.out.println(dto.getPw());
		System.out.println(dto.getEmail());
		System.out.println(dto.getAddress());
		mapper.insertUser(dto);
		
	}

}

상단의 코드를 보는 것과 같이 System.out.println을 선언한 이유는 값이 잘 들어오는지를 확인하기 위한 디버깅이고 

dto의 getter 를 이용해 값이 잘 넘어오는 것을 확인하고 넘어오는 것을 확인했다면 

@Autowired를 호출한 MemberMapper 인  데이터베이스 연결에 필요한 mapper를 이용해 insertUser(dto)로 역시 dto의 값을 넘겨줍니다. 

 

6. MemberMapper의 코드는 하단의 코드를 참고하세요

 

package com.care.member.mybatis.member;

import com.care.member.memberDTO.MemberDTO;

public interface MemberMapper {
	public void insertUser(MemberDTO dto);

}

연결되어 있는 memberMapper.xml에 함수를 사용하기 위한 영역이고 insertUser라는 메소드를 이용해 값을 넘겨줄 준비를 합니다. 

 

7. memberMapper.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="com.care.member.mybatis.member.MemberMapper">
	<insert id="insertUser">
		insert into userTable values(#{id}, #{pw}, #{email}, #{address}, #{imageFileName})
	</insert>

</mapper>

이렇게 데이터베이스와 연결되어 있는 xml에 sql문을 사용하여 값을 넣어주는데 값을 넣어줄 때의 sql문은 

 

insert into '테이블 명' values('값1', '값2', ....)

 

이렇게 동작하는데 spring에서 사용할 때에는 <insert> 태그 를 이용해 그 안에 sql문을 사용하면됩니다. 

그리고 dto의 값을 넣기 위해서는 ${}를 사용하여 dto의 변수들을 넣어주어 데이터베이스에 값을 넣어주도록 합니다. 

 

이렇게 까지 하면 데이터베이스에 값이 들어가는 것을 알 수 있습니다. 

 

값이 잘 들어가는 것을 확인 할 수 있습니다.

 

 

다음 시간에는 프로필 사진을 등록하기 위한 제가 설계한 방법을 구현 해보도록 하겠습니다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'벡엔드 > spring' 카테고리의 다른 글

SPRING(17) 회원 관리 기능 구현_아이디 중복 체크 기능  (0) 2022.02.01
SPRING(16) 회원 관리 기능 구현_프로필 사진 등록  (0) 2022.02.01
SPRING(14) 로그인 팝업창으로 만들기  (0) 2022.01.26
SPRING(13) 회원 관리 기능 구현_3  (0) 2022.01.25
SPRING(12) 회원 관리 기능 구현_2(데이터베이스 설계)  (0) 2022.01.25

관련글

티스토리툴바