본 포스팅의 예제는 STS 또는 Eclipse를 사용하지 않고 Intellij를 통해 구현하고 있습니다.
그래서 기존의 STS(Spring Tool Studio)에서 생성된 Spring 프로젝트의 스프링 관련 설정 파일명과
프로젝트 구조가 약간 다를 수 있습니다.Intellij 스프링 mvc 프로젝트 생성 포스팅을 참고해주시면 감사하겠습니다.
Spring-MVC 기본 개념 및 테스트 예제 관련 포스팅 링크
| 순서 | 포스팅 제목 |
| 1 | Intellij에서 Spring MVC Project 생성하기 |
| 2 | Spring MVC - MariaDB 연결테스트 |
| 3 | Spring MVC - Mybatis 설정 및 테스트 |
| 4 | SpringMVC 구조 |
| 5 | SpringMVC + Mybatis |
| 6 | Spring MVC Controller 작성 연습 |
Spring-MVC 게시판 예제 이전 포스팅 링크
| 순서 | 포스팅제목 |
| 1 | IntelliJ를 이용한 Spring MVC Project 생성 하기 |
| 2 | Bootstrap AdminLTE Template 적용하기 |
| 3 | ExceptionResovler : 예외페이지 처리 |
| 4 | Spring AOP 적용하기 |
1. 회원가입 기능 구현
1.1 회원 테이블 생성
drop table eden_user;
create table eden_user
(
user_no number primary key,
user_id varchar2(15) not null unique,
user_pw varchar2(200) not null,
user_nickname varchar2(30) not null unique,
user_image varchar2(200) not null,
user_gender varchar2(1) not null,
user_birth date not null,
user_phone varchar2(30) not null unique,
user_email varchar2(200) not null unique,
user_status varchar2(200) not null,
user_join_date date not null,
user_last_connection_date date not null
);
-- 회원테이블 시퀸스
drop sequence eden_user_seq;
create sequence eden_user_seq;1.2 회원 클래스 작성
기본패키지/user/domain 패키지에 회원 클래스를 아래와 같이 작성해주세요
public class UserVo {
private int user_no; // 유저 번호
private String user_id; // 유저 아아디
private String user_pw; // 유저 비밀번호
private String user_nickname; // 유저 닉네임
private String user_image; // 프로필 이미지
private String user_gender; // 유저 성별
@DateTimeFormat(pattern = "yyyy-mm-dd")
private Date user_birth; // 유저 생년월일
private String user_phone; // 유저 휴대폰 번호
private String user_email; // 유저 이메일
private String user_status; // 유저 상태
@DateTimeFormat(pattern = "yyyy-mm-dd")
private Date user_join_date; // 유저 가입 일자
@DateTimeFormat(pattern = "yyyy-mm-dd")
private Date user_last_connection_date; // 최종 로그인 일자
// constructor, getter, setter, toString 생략 (Alt + Insert 단축키 활용하여 생성)
}1.3 회원 영속 계층 (Persistence Tier) 구현
기본패키지/user/persistence 패키지에 UserDAO 인터페이스와 UserDAOImpl 클래스를 아래와 같이 작성해주세요
public interface UserDAO {
// 회원가입
public void insertUser(UserVo param);
}@Repository
public class UserDAOImpl implements UserDAO {
private static final String NAMESPACE = "mappers.user.UserSQLMapper";
@Autowired
private SqlSession sqlSession;
// 회원가입
@Override
@LogException
public void insertUser(UserVo param) {
sqlSession.insert(NAMESPACE + ".insertUser", param);
}
}/resources/mappers/user 경로에 UserSQLMapper.xml을 생성하고 아래와 같이 작성해주세요.
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="mappers.user.UserSQLMapper">
<!-- 회원가입 -->
<insert id="insertUser">
insert into eden_user(user_no, user_id, user_pw, user_nickname, user_image, user_gender, user_birth, user_phone,
user_email, user_status, user_join_date, user_last_connection_date)
values (eden_user_seq.nextval,
#{user_id},
#{user_pw},
#{user_nickname},
'default-user-image.jpg',
#{user_gender},
#{user_birth},
#{user_phone},
#{user_email},
'active',
sysdate,
sysdate)
</insert>
</mapper>2.4 회원 비지니스 계층 (Business Tier) 구현
기본패키지/user/service 패키지에 UserService 인터페이스와 UserServiceImpl 클래스를 아래와 같이 작성해주세요.
public interface UserService {
// 회원가입
public void insertUser(UserVo param);
}@Service
public class UserServiceImpl implements UserService {
@Autowired
UserDAO userDAO;
// 회원가입
@Override
@LogException
public void insertUser(UserVo param) {
userDAO.insertUser(param);
}
}2.5 회원가입 컨트롤러 구현
기본패키지/user/controller 패키지에 UserController 클래스를 생성하고 아래와 같이 작성해주세요.
@Controller
@RequestMapping(value = "/user/*")
public class UserController {
@Autowired
UserService userService;
// 회원가입 페이지
@GetMapping(value = "register")
@LogException
public String registerPage() {
return "user/register";
}
// 회원가입 프로세스
@PostMapping(value = "insertUserProcess")
@LogException
public String insertUserProcess(UserVo param) {
String hashPw = BCrypt.hashpw(param.getUser_pw(), BCrypt.gensalt());
param.setUser_pw(hashPw);
userService.insertUser(param);
return "redirect:../";
}위의 코드에서 주목해서 봐야할 점은 회원가입 처리 매핑 메서드인 insertUserProcess(UserVo param) 이다. 파라미터로 넘어온 회원의 객체정보(UserVo) 중에서 비밀번호 (user_pw)를 암호화 하는 작업을 수행 합니다. 이렇게 하는 이유는 회원으로부터 받은 정보중에서 비밀번호는 반드시 DB에 암호화해서 보관해야 보안에 비교적 안전하기 떄문입니다. BCrypt.hashpw() 메서드는 위와 같이 첫번쨰 파라미터에는 암호화할 비밀번호를 두번쨰 파라미터는 BCrypt.gensalt()를 받고 암호화된 비밀번호를 리턴 해줍니다.
이렇게 암호화된 비밀번호를 다시 회원객체에 저장하고 서비스의 회원가입 메서드를 호출 하면됩니다.
암호화 처리를 위해 BCrypt를 사용하기 위해서는 pom.xml에 아래와 같이 의존성을 추가시켜줘야 합니다.
<dependency>
<groupId>org.mindrot</groupId>
<artifactId>jbcrypt</artifactId>
<version>0.4</version>
</dependency>1.6 회원가입 페이지 작성
/views/user/ 디렉토리에 회원가입 페이지 (register.jsp)를 생성하고, 아래와 같이 작성해주세요
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../include/head.jsp" %>
<html>
<body class="hold-transition skin-green-light sidebar-mini" oncontextmenu="return false" oncopy="return false"
oncut="return false" onpaste="return false" onselect="return false">
<div class="wrapper">
<%@ include file="../include/top_menu.jsp" %>
<%@ include file="../include/left_menu.jsp" %>
<div class="content-wrapper">
<section class="content-header">
<div class="register-logo">
<a href="${path}/">
<b>EdenDEV</b><br/>
SpringMVC-Examples
</a>
</div>
</section>
<section class="content container-fluid">
<div class="register-box-body">
<p class="login-box-msg">회원가입 페이지</p>
<form action="${path}/user/insertUserProcess" id="insertForm" method="post">
<div class="row mt-2">
<div class="row mt-2">
<div class="col-ls-5">
<div class="row mt-1">
<div class="col-ls-5">
<label for="joinIdInput">아이디</label>
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<input type="text" id="joinIdInput" class="form-control" name="user_id"
placeholder="아이디를 입력하세요요">
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5" id="alertId"></div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<label for="changePassword">비밀번호</label>
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<input type="password" id="changePassword" class="form-control" name="user_pw"
placeholder="비밀번호를 입력하세요">
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<div class="col-ls-5" id="alterPassword"></div>
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<label for="confirmPassword">비밀번호 확인</label>
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<input type="password" id="confirmPassword" class="form-control" name="user_pw"
placeholder="비밀번호를 한번 더 입력해주세요">
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5" id="alertPassword2"></div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<label for="userNickName">닉네임</label>
</div>
</div>
<div class="row mt-1">
<input type="text" id="userNickName" class="form-control" name="user_nickname"
placeholder="닉네임을 입력해주세요">
</div>
<div class="row mt-1">
<div class="col-ls-5" id="alertNickName"></div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<label for="userGender">성별</label>
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<input type="radio" id="userGender" name="user_gender" value="M">남
<input type="radio" id="userGender" name="user_gender" value="Y">여
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5" id="alertGender"></div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<label for="userBirth">생년월일</label>
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<input type="date" id="userBirth" class="form-control" name="user_birth"
placeholder="생년월일을 선택해주세요">
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5" id="alertBirth"></div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<label for="userPhone">휴대폰번호</label>
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<input type="text" id="userPhone" class="form-control" name="user_phone"
placeholder="휴대폰번호를 입력해주세요">
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5" id="alertPhone"></div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<label for="userEmail">이메일</label>
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<input type="text" id="userEmail" class="form-control" name="user_email"
placeholder="이메일주소를 입력해주세요">
</div>
<div class="col d-grid">
<button type="button" id="checkEmailButton"
class="btn btn-primary" style="height:36px;" disabled='disabled'>인증번호 발송
</button>
</div>
</div>
<div class="row mt-1">
<div class="col" id="alertEmail"></div>
</div>
<div class="row mt-1">
<div class="col bi bi-exclamation-square-fill deepblue">
인증번호 발송은 서버 상황에따라 5초에서 10초정도 시간이 걸릴 수 있습니다.
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<input class="form-control" id="checkEmail" type="text"
placeholder="인증번호를 입력해주세요." aria-label="default input example"
disabled="disabled">
</div>
</div>
<div class="row mt-1">
<div class="col-ls-5" id="alertCertified"></div>
</div>
<div class="row mt-1">
<div class="col-ls-5">
<a type="button" class="btn btn-default pull-left" href="../main/main">취소</a>
<button type="button" class="btn btn-primary infoModBtn pull-right" id="joinButton">가입하기
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
<%@ include file="../include/footer.jsp" %>
</div>
<%@ include file="../include/plugin_js.jsp" %>
<script type="text/javascript">
$("#joinButton").click() {
$("#insertForm").submit();
}
</script>
</body>
</html>2. 회원가입 처리 확인
회원가입 처리가 제대로 되었는지 확인해 보겟습니다. /user/register uri를 요청하거나 회원가입 버튼을 누르고 회원가입 페이지로 이동하여필드값을 입력하고 가입 버튼을 눌러주세요 회원가입이 성공적으로 처리가 되면 메인페이지로 리다이렉트 됩니다.
'스프링 프레임워크 > 스프링 MVC' 카테고리의 다른 글
| # Spring MVC 게시판 예제 07 - 회원 가입 유효성 검사 (Feat. Validation) (0) | 2023.02.23 |
|---|---|
| # Spring MVC 게시판 예제 06 - 회원가입 유효성 검사 (Feat. JavaScript) (0) | 2023.02.23 |
| # Spring MVC 게시판 예제 04 - AOP를 이용한 LogAdvice 작성 (0) | 2023.02.22 |
| # Spring MVC 게시판 예제 03 - ExceptionResolver : 예외페이지 처리 (0) | 2023.02.21 |
| # Spring MVC 게시판 예제 02 - Boostrap Template 적용 (AdminLTE) (1) | 2023.02.20 |
댓글