![[JSP/Servlet] 2. 회원가입](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FczpKJx%2FbtsBFgfd32j%2F4OjF8YIjwmVklyPK09b8Rk%2Fimg.png)
[JSP/Servlet] 2. 회원가입개발자가 되기까지 (2023.08.16~2024.04.15)/[Servlet] Basic Web2023. 12. 9. 00:57
Table of Contents
회원가입을 하려면 먼저 어떤 양식으로 회원가입하게 만들지 DB에 관련 table을 생성해야한다.
table을 생성한 후에 webapp 하위에 resources 폴더를 만들어서 sql.sql 파일을 생성하여
db를 업데이트 한 날짜와 관련 내용을 기록해주면 좋다.
sql.sql
-- 2023-12-08
CREATE TABLE member (
id VARCHAR(100),
pwd VARCHAR(200) NOT NULL,
email VARCHAR(200) NOT NULL,
team INT DEFAULT 0,
regdate datetime DEFAULT now(),
lastlogin datetime DEFAULT now(),
PRIMARY KEY(id));
table 구조를 참고하여 memberVO를 만든다.
meberVO는 src/main/java에 domain package를 생성하여 그 package에 class로 만든다.
생성자는 로그인 / 회원가입 / 프로필 수정 할 때 무엇이 필요한지 생각하고 만든다.
memberVO.java
package domain;
public class memberVO {
private String id;
private String pwd;
private String email;
private int team;
private String regdate;
private String lastlogin;
public memberVO() {
}
// login : id, pwd
public memberVO(String id, String pwd) {
this.id = id;
this.pwd = pwd;
}
// join,modify : id, pwd, email,team
public memberVO(String id, String pwd, String email, int team) {
this.id = id;
this.pwd = pwd;
this.email = email;
this.team = team;
}
// 전부
public memberVO(String id, String pwd, String email, int team, String regdate, String lastlogin) {
this.id = id;
this.pwd = pwd;
this.email = email;
this.team = team;
this.regdate = regdate;
this.lastlogin = lastlogin;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public int getTeam() {
return team;
}
public void setTeam(int team) {
this.team = team;
}
public String getRegdate() {
return regdate;
}
public void setRegdate(String regdate) {
this.regdate = regdate;
}
public String getLastlogin() {
return lastlogin;
}
public void setLastlogin(String lastlogin) {
this.lastlogin = lastlogin;
}
@Override
public String toString() {
return "memberVO [id=" + id + ", pwd=" + pwd + ", email=" + email + ", team=" + team + ", regdate=" + regdate
+ ", lastlogin=" + lastlogin + "]";
}
}
mapper에서 memberVO를 쓸 때, domain.memberVO라고 쓰기 싫어서
orm > MybatisConfig.xml에서 mvo라는 별칭을 만들어줬다.
겸사겸사 member의 mapper도 memberMapper.xml로 미리 설정해주었다.
MybatisConifg.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<typeAliases> <!-- 여러개 생성 가능 / 없는 것을 만들 순 없음 -->
<typeAlias type="domain.MemberVO" alias="mvo"/>
</typeAliases>
// ... (기존코드)
<mappers> <!-- 여러개 생성 가능 / 없는 것을 만들 순 없음 -->
<mapper resource="mapper/memberMapper.xml"/>
</mappers>
</configuration>
mapper를 미리 지정해주었으니, mapper도 생성해보자.
src/main/java에서 mapper라는 이름으로 package를 생성하고 memberMapper.xml 파일을 생성한다.
memberMapper.xml에 쓸 코드는 https://mybatis.org/mybatis-3/ko/getting-started.html 이곳을 참고하여
작성했다.
memberMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="MemberMapper">
</mapper>
다음은 회원가입 화면을 만들기 위해 join.jsp 파일을 생성했다.
join.jsp는 webapp 하위에 member 폴더를 만들어서 그 폴더에 생성했다.
member > join.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<h1>회원가입</h1>
<br>
<form action="" method="post">
<table>
<tr>
<th>ID</th>
<td><input type="text" name="id"></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<th>E-Mail</th>
<td><input type="email" name="email"></td>
</tr>
<tr>
<th>Team</th>
<td><input type="text" name="team"></td>
</tr>
</table>
<button type="submit">회원가입</button>
</form>
<button>취소</button>
</body>
</html>
src/main/java에 controller 라는 package를 만들고 그 곳에 MemberController servlet를 생성한다.
생성할 때, URL Mappings에 /memb/*로 설정하고 method stub은 service도 체크해준다.
필요없는 주석들을 모두 지우고 service와 serviceImpl을 비롯해 데이터들이 오고가는
기본 틀을 먼저 작성한다.
MemberController.java
package controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import service.MemberService;
import service.MemeberServiceImpl;
@WebServlet("/memb/*")
public class MemberController extends HttpServlet {
private static final long serialVersionUID = 1L;
// 로그 사용하려고
private static final Logger log = LoggerFactory.getLogger(MemberController.class);
// jsp에서 받은 요청을 처리, 처리 결과를 다른 jsp로 보내는 역할
private RequestDispatcher rdp;
// 목적지 주소
private String destPage;
// DB 구문 체크
private int isOk;
// controller <-> service
private MemberService msv; // service 패키지에 인터페이스로 생성
public MemberServlet() {
// 인터페이스 msv를 구현할 객체이므로 class로 생성
msv = new MemberServiceImpl(); // service 패키지에 class로 생성
}
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 모든 서비스 처리 경로
request.setCharacterEncoding("utf-8"); // 소/대문자 상관없음
response.setCharacterEncoding("utf-8"); // 소/대문자 상관없음
response.setContentType("text/html; charset=UTF-8"); // 여기 UTF-8은 규격이 대문자라서 대문자로
String uri = request.getRequestURI();
String path = uri.substring(uri.lastIndexOf("/")+1);
log.info(">>> path >>> {}", path);
// 목적지 주소로 데이터를 전달(RequestDispatcher)
rdp = request.getRequestDispatcher(destPage);
rdp.forward(request, response); // 요청에 필요한 객체를 가지고 경로로 전송
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// get으로 오는 요청처리
service(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// post로 오는 요청처리
service(request, response);
}
}
service와 serviceImpl의 빨간색을 먼저 없애주기 위해서
src/main/java에 service package를 만들어서
그 package에 MemberService interface와 MemberServiceImpl class를 생성한다.
생성을 완료 했다면 이제 회원가입을 하기 위한 controller를 작성해보자.
MemberController.java
package controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import domain.MemberVO;
import service.MemberService;
import service.MemberServiceImpl;
@WebServlet("/memb/*")
public class MemberController extends HttpServlet {
// ... (기존 코드)
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 모든 서비스 처리 경로
request.setCharacterEncoding("utf-8"); // 소/대문자 상관없음
response.setCharacterEncoding("utf-8"); // 소/대문자 상관없음
response.setContentType("text/html; charset=UTF-8"); // 여기 UTF-8은 규격이 대문자라서 대문자로
String uri = request.getRequestURI();
String path = uri.substring(uri.lastIndexOf("/")+1);
log.info(">>> path >>> {}", path);
switch(path) {
case "join":
// index의 /member/join 경로
destPage = "/member/join.jsp";
break;
case "register":
try {
// join.jsp에서 보낸 파라미터 값 받기
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String email = request.getParameter("email");
int team = Integer.parseInt(request.getParameter("team"));
MemberVO mvo = new MemberVO(id, pwd, email, team);
log.info(">>> join check 1 >>> {}", mvo);
isOk = msv.register(mvo);
log.info("join >>>", (isOk > 0)? "OK" : "FAIL");
destPage = "/index.jsp";
} catch (Exception e) {
e.printStackTrace();
log.info(">>> join error");
}
break;
}
// 목적지 주소로 데이터를 전달(RequestDispatcher)
rdp = request.getRequestDispatcher(destPage);
rdp.forward(request, response); // 요청에 필요한 객체를 가지고 경로로 전송
}
// ... (기존 코드)
}
msv.register(mvo)를 만들어주기 위해 MemberService interface와 MemberServiceImpl을 작성한다.
MemberService.interface
package service;
import domain.MemberVO;
public interface MemberService {
int register(MemberVO mvo);
}
MemberServiceImpl에서 구현된 객체는 DAO와 DAOImpl과 연결되어 필요한 데이터들을 가져온다.
MemberServiceImpl.java
package service;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import domain.MemberVO;
public class MemberServiceImpl implements MemberService {
private static final Logger log = LoggerFactory.getLogger(MemeberServiceImpl.class);
private MemberDAO mdao; // repository 패키지에 interface로
public MemberServiceImpl() {
mdao = new MemberDAOImpl();
}
@Override
public int register(MemberVO mvo) {
log.info(">>> joing check 2");
return mdao.insert(mvo);
}
}
service와 serviceImpl과 마찬가지로 dao와 daoImpl을 만들어주어야 한다.
위치는 src/main/java에서 repository라는 package를 생성하여
그 package에 MemberDAO.interface와 MemberDAOImpl.class를 생성한다.
생성을 완료했다면 mdao.insert(mvo)의 method를 만들어주기 위해
MemberDAO와 MemberDAOImpl을 작성한다.
MemberDAO.interface
package repository;
import domain.MemberVO;
public interface MemberDAO {
int insert(MemberVO mvo);
}
MemberDAPImpl은 DB와 상호작용해야하기 때문에 Mybatis와 DatabaseBuilder를 활용해야한다.
MemberDAOImpl.class
package repository;
import org.apache.ibatis.session.SqlSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import domain.MemberVO;
import orm.DatabaseBuilder;
public class MemberDAOImpl implements MemberDAO {
private static final Logger log = LoggerFactory.getLogger(MemberDAOImpl.class);
// Sql Session 객체
private SqlSession sql;
public MemberDAOImpl() {
// db와의 연결 및 Session 관리에 필요한 객체
new DatabaseBuilder();
sql = DatabaseBuilder.getFactory().openSession();
}
@Override
public int insert(MemberVO mvo) {
log.info(">>> join check 3");
// "MemberMapper.reg" => namespace.id
int isOk = sql.insert("MemberMapper.reg", mvo);
if(isOk > 0) sql.commit();
return isOk;
}
}
join.jsp form에서 들어가는 데이터들을 DB에 insert 할 때,
Mapper에 그 insert의 id를 임의로 reg라는 이름으로 정했으므로 해당 id에 관련 SQL 구문을 써준다.
mvo는 parameterType으로 들어오게 되는데 parameterType는 생략해 주어도 무방하다.
MemberMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="MemberMapper">
<insert id="reg">
insert into member(id, pwd, email, team)
values(#{id}, #{pwd}, #{email}, #{team})
</insert>
</mapper>
index.jsp에서 회원가입 페이지가 될 a태그에 join.jsp를 연결하고 join.jsp의 form에 action을 기재한다.
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Semicolone;</title>
</head>
<body>
<header>
<div>Logo</div>
<div>
<ul>
<li><a href="/index.jsp">HOME</a></li>
<li><a href="#">LOGIN</a></li>
<li><a href="/memb/join">SIGNUP</a></li>
<li><a href="#">BOARD</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">LOGOUT</a></li>
</ul>
</div>
</header>
<main></main>
<footer></footer>
</body>
</html>
join.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<h1>회원가입</h1>
<br>
<form action="/memb/register" method="post">
<table>
<tr>
<th>ID</th>
<td><input type="text" name="id"></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<th>E-Mail</th>
<td><input type="email" name="email"></td>
</tr>
<tr>
<th>Team</th>
<td><input type="text" name="team"></td>
</tr>
</table>
<button type="submit">회원가입</button>
</form>
<button>취소</button>
</body>
</html>
여기까지 진행을 완료하면 회원가입을 작성하고 버튼을 누르면 DB에 저장되는 것이 확인 가능하다.
그러나 회원가입이 되었는지 화면에서도 확인 가능하게 하고 싶어서
JS를 활용해서 alert를 추가해보려고 한다.
회원가입 후에 index.jsp로 돌아가므로 index.jsp에 script를 작성한다.
c:out 태그를 사용하기 위해서는 JSTL을 사용해야하는데,
JSTL 태그 라이브러리를 사용하려면 taglib를 상단에 선언해 주어야 한다.
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Semicolone</title>
</head>
<body>
// ... (기존 코드)
<script type="text/javascript">
const msg_join = `<c:out value="${msg_join}" />`;
console.log(msg_join);
if (msg_join == 'welcome') {
alert('회원가입이 완료되었습니다~!!\n환영합니다!');
}
</script>
</body>
</html>
회원가입을 성공하면 index.jsp 페이지로 넘어가기 전에 alert를 띄우기 위해서
MemberController에서 코드를 추가한다.
MemberController.java
// ... (기존 코드)
case "register":
try {
// join.jsp에서 보낸 파라미터 값 받기
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String email = request.getParameter("email");
int team = Integer.parseInt(request.getParameter("team"));
MemberVO mvo = new MemberVO(id, pwd, email, team);
log.info(">>> join check 1 >>> {}", mvo);
isOk = msv.register(mvo);
log.info("join >>>", (isOk > 0)? "OK" : "FAIL");
if(isOk > 0) {
request.setAttribute("msg_join", "welcome");
}
destPage = "/index.jsp";
// ... (기존 코드)
}
회원가입 화면
회원가입 완료 시 alert
[JSP/Servlet] 2. 회원가입
(다음 게시물 예고편)
[JSP/Servlet] 3. 로그인
728x90
@rlozlr :: 얼렁뚱땅 개발자
얼렁뚱땅 주니어 개발자
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
![[JSP/Servlet] 4. 로그아웃](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FczvfNN%2FbtsBKhcEMr3%2FQNfKI4JLwcu2K6VfmTGbS1%2Fimg.png)
![[JSP/Servlet] 3. 로그인](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsY4bt%2FbtsBJeG6FR3%2FN0DEgIFT9IYZddYJUeqLH0%2Fimg.png)
![[JSP/Servlet] 1. 기초 설정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCpjGr%2FbtsBGGcYITe%2FeHo73wA7LyKYkZdbyAo1j0%2Fimg.png)