SPRING(15) 회원 관리 기능 구현_회원가입 기능
이번 시간에는 회원 관리 기능에서 중요한 회원 가입 기능에 대해서 구현해보겠습니다.
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의 웹서비스 화면은 이렇게 동작합니다.
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의 변수들을 넣어주어 데이터베이스에 값을 넣어주도록 합니다.
이렇게 까지 하면 데이터베이스에 값이 들어가는 것을 알 수 있습니다.
다음 시간에는 프로필 사진을 등록하기 위한 제가 설계한 방법을 구현 해보도록 하겠습니다.