서블릿(Servlet) 게시판 만들기 3 - 회원가입 / 로그인 / 로그아웃

728x90

[내 소개..?? 겸 국비 일주일 후기]

서블릿(Servlet) 게시판 만들기 1 - 게시판 목록/리스트 조회

국비 수업 중에 너무 어려워서 정리하고자 한다. MVC모델을 적용해 게시판을 만들어보자 (서블릿, JSP) DB에 있는 게시판 목록들을 웹브라우저에 출력하기. 일단 어떤식으로 코드가 진행되는지 알

kimdevel.tistory.com

서블릿(Servlet) 게시판 만들기 2 - 게시글 상세보기

게시판 목록 조회 서블릿(Servlet)을 이용한 게시판 만들기 1 - 게시판 목록/리스트 조회 국비 수업 중에 너무 어려워서 정리하고자 한다. MVC모델을 적용해 게시판을 만들어보자 (서블릿, JSP) DB에

kimdevel.tistory.com

게시판은 만들어봤으니 이제 로그인 / 회원가입을 만들어보자

우선 메인페이지 만들기

메인 서블릿 코드 - 바로 main.jsp로 ㄱㄱ

@WebServlet("/main")
public class MainController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		req.getRequestDispatcher("/WEB-INF/views/member/main.jsp").forward(req, resp);
		
	}
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<div>
<!-- 비로그인상태 -->
<%	if(session.getAttribute("login") == null || !(boolean)session.getAttribute("login")) { %>

	<strong>로그인이 필요합니다</strong><br>
	<button onclick='location.href="/member/login";'>로그인</button>
	<button onclick='location.href="/member/join";'>회원가입</button>
    
    
<!-- 로그인상태 -->
<%	} else if( (boolean)session.getAttribute("login") ) { %>

	<strong>${usernick } 님, 환영합니다</strong><br>
	<button onclick='location.href="/board/list";'>게시판 가기</button>
	<button onclick='location.href="/member/logout";'>로그아웃</button>
	
<%	} %>
</div>


</body>
</html>

우선 회원가입을 해야 로그인을 할테니 회원가입부터 만들어보자.

<button onclick='location.href="/member/join";'>회원가입</button>

회원가입 클릭시 /member/join으로 Get방식으로 이동되므로 그에 맞는 controller 있어야 한다.

@WebServlet("/member/join")
public class MemberJoinController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		req.getRequestDispatcher("/WEB-INF/views/member/join.jsp").forward(req, resp);
	
	}
}

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
window.onload = function() {
	//로그인 버튼 클릭 시 form submit
	document.getElementById('btnJoin').onclick = function() {
		document.getElementById('form').submit();
	}
	
	//취소 버튼 누르면 뒤로가기
	document.getElementById('btnCancel').onclick = function() {
		history.go(-1);
	}
}
</script>

</head>
<body>

<h3>회원가입</h3>
<hr>
<form action="/member/join" method="post" id="form">
	<label for="userid">아이디</label>
	<input type="text" id="userid" name="userid" /> <br>
	<label for="userpw">패스워드</label>
	<input type="text" id="userpw" name="userpw" /> <br>
	<label for="usernick">닉네임</label>
	<input type="text" id="usernick" name="usernick" /> <br>
	
	<button type="button" id="btnJoin">가입</button>
	<button type="button" id="btnCancel">취소</button>
</form>

</body>
</html>

전달받은 파라미터를 member에 대입 (service를 이용)

@WebServlet("/member/join")
public class MemberJoinController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private MemberService memberService = new MemberServiceImpl(); 
	
	...
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//요청파라미터 처리
		Member param = memberService.getJoinMember(req);
		
	}
}

MemberService

public interface MemberService {

	public Member getJoinMember(HttpServletRequest req);

}

MemberServiceImpl

public class MemberServiceImpl implements MemberService {

	@Override
	public Member getJoinMember(HttpServletRequest req) {
		
		try {
			//한글 인코딩. 닉네임은 한글로 받으니깐.
			req.setCharacterEncoding("utf-8");
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		
		//Member객체 생성 후 전달파라미터를 객체에 설정
		Member m = new Member();
		m.setUserid(req.getParameter("userid"));
		m.setUserpw(req.getParameter("userpw"));
		m.setUsernick(req.getParameter("usernick"));
		
		return m;
	}
}

현재 Member param에는 form태그에 입력한 아이디, 패스워드, 닉네임이 설정되어있다. 그 전달값을 DB에 insert 해주도록 하자

@WebServlet("/member/join")
public class MemberJoinController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private MemberService memberService = new MemberServiceImpl(); 
	
	...
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//요청파라미터 처리
		Member param = memberService.getJoinMember(req);
		
		//회원가입
		memberService.join(param);
		
		//메인으로 리다이렉션
		resp.sendRedirect("/main");
		
	}

}

MemberService

public interface MemberService {

	public Member getJoinMember(HttpServletRequest req);

	public void join(Member param);

}

MemberServiceImpl

public class MemberServiceImpl implements MemberService {

	//MemberDao 객체
	private MemberDao memberDao = new MemberDaoImpl();

	@Override
	public void join(Member member) {
    
    	//JDBC연결 객체  
		Connection conn = JDBCTemplate.getConnection();
		
		if( memberDao.insert(conn, member) > 0 ) {
			JDBCTemplate.commit(conn);
		} else {
			JDBCTemplate.rollback(conn);
		}
		
	}
	
}

MemberDao

public interface MemberDao {

	int insert(Connection conn, Member member);

}

MemberDaoImpl

public class MemberDaoImpl implements MemberDao {
	
	private PreparedStatement ps = null; //SQL 수행 객체
	private ResultSet rs = null; //SQL조회 결과 객체
	
	@Override
	public int insert(Connection conn, Member member) {
		
		//쿼리작성
			String sql = "";
			sql += "INSERT INTO member ( userid, userpw, usernick )";
			sql += " VALUES( ?, ?, ? )";
			
			int res = 0;
			
			try {
				//DB작업
				ps = conn.prepareStatement(sql);
				
				ps.setString(1, member.getUserid());
				ps.setString(2, member.getUserpw());
				ps.setString(3, member.getUsernick());
				
				res = ps.executeUpdate(); //업데이트가 실행되면 1
				
			} catch (SQLException e) {
				e.printStackTrace();
			} finally {
				try {
					//DB객체 닫기
					if(ps!=null)	ps.close();
					
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
			
			return res;
	}

}

회원가입을 해줬으니 이제 로그인을 개발.

<button onclick='location.href="/member/login";'>로그인</button>

메인창에서 로그인 클릭시 /member/login으로 Get방식으로 이동되므로 그에 맞는 controller 있어야 한다.

@WebServlet("/member/login")
public class MemberLoginController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		req.getRequestDispatcher("/WEB-INF/views/member/login.jsp").forward(req, resp);
	
	}

}

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>

<script type="text/javascript">
window.onload = function() {
	
	//로그인 버튼 클릭시 form submit
	document.getElementById('btnLogin').onclick = function() {
		document.getElementById('form').submit();
	}
	
	//취소 버튼 누르면 뒤로가기
	document.getElementById('btnCancel').onclick = function() {
		history.go(-1);
	}
	
}
</script>


</head>
<body>
	<h3>로그인</h3>
	<hr>	
	
	<form action="/member/login" method="post" id="form">
		<label for="userid">아이디</label>
		<input type="text" id="userid" name="userid"><br>
		<label for="userpw">비밀번호</label>
		<input type="text" id="userpw" name="userpw"><br><br>
					
		
		<button type="button" id="btnLogin">로그인</button>
		<button type="button" id="btnCancel">취소</button>
	</form>
	
</body>
</html>

MemberLoginController(POST) - login.jsp에서 전달받은 파라미터 userid, userpw를 받아와 login 인증을 하는 코드

@WebServlet("/member/login")
public class MemberLoginController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private MemberService memberService = new MemberServiceImpl(); 
	
	...
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//전달파라미터 얻기 - 로그인 정보
		Member member = memberService.getLoginMember(req);
		
		//로그인 인증
		boolean login = memberService.login(member);
		
	}
}

MemberService

public interface MemberService {

	public Member getJoinMember(HttpServletRequest req);

	public void join(Member param);

	public Member getLoginMember(HttpServletRequest req);

	public boolean login(Member member);

}

MemberServiceImpl - getLoginMember - req에서 userid, userpw 파라미터를 전달받아 Member객체에 저장

public class MemberServiceImpl implements MemberService {

	//MemberDao 객체
	private MemberDao memberDao = new MemberDaoImpl();

	...

	@Override
	public Member getLoginMember(HttpServletRequest req) {
		
		Member member = new Member();
		
		member.setUserid( req.getParameter("userid") );
		member.setUserpw( req.getParameter("userpw") );
		
		return member;
	}
	
}

로그인 정보를 전달 받았으니 로그인 인증차례

MemberServiceImpl - login의 전달인자인 member에 userid, userpw를 dao로 전달해서 DB와 비교

public class MemberServiceImpl implements MemberService {

	//MemberDao 객체
	private MemberDao memberDao = new MemberDaoImpl();

	...

	@Override
	public boolean login(Member member) {
    	
        //DB에 있는 로그인 정보와 비교해서 존재하면 true 아니면 false 반환
		if( memberDao.selectCntMemberByUseridUserpw(JDBCTemplate.getConnection(), member) > 0 ) {
			return true; //로그인 성공
		} else {
			return false; //로그인 실패
		
	}
}

MemberDao

public interface MemberDao {

	int insert(Connection conn, Member member);

	int selectCntMemberByUseridUserpw(Connection conn, Member member);

}

MemberDaoImpl - count(*)를 통해서 userid와 userpw 둘다 일치하는 정보가 있으면 cnt 반환

public class MemberDaoImpl implements MemberDao {
	
	private PreparedStatement ps = null; //SQL 수행 객체
	private ResultSet rs = null; //SQL조회 결과 객체
	
	...

	@Override
	public int selectCntMemberByUseridUserpw(Connection conn, Member member) {
		//SQL 작성
		String sql = "";
		sql += "SELECT count(*) FROM member";
		sql += " WHERE 1=1";
		sql += "	AND userid = ?";
		sql += "	AND userpw = ?";
		
		//결과 저장할 변수
		int cnt = -1;
		
		try {
			ps = conn.prepareStatement(sql); //SQL수행 객체
			
			ps.setString(1, member.getUserid());
			ps.setString(2, member.getUserpw());
			
			rs = ps.executeQuery(); //SQL 수행 및 결과집합 저장
			
			//조회 결과 처리
			while(rs.next()) {
				cnt = rs.getInt(1);
			}
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			//DB객체 닫기
			JDBCTemplate.close(rs);
			JDBCTemplate.close(ps);
		}
		
		//최종 결과 반환
		return cnt;
	}

}

MemberLoginController(POST) - 로그인 인증이 완료되면 로그인 사용자의 정보(아이디, 닉네임)를 얻어와서 Session에 저장하기

@WebServlet("/member/login")
public class MemberLoginController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	private MemberService memberService = new MemberServiceImpl(); 
	
	...
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//전달파라미터 얻기 - 로그인 정보
		Member member = memberService.getLoginMember(req);
		
		//로그인 인증
		boolean login = memberService.login(member);
		
		if(login) {
			//로그인 사용자의 정보 얻어오기
			member = memberService.info(member);
			
			//세션정보 저장하기
			HttpSession session = req.getSession();
			session.setAttribute("login", login);
			session.setAttribute("userid", member.getUserid());
			session.setAttribute("usernick", member.getUsernick());
		}
		
		//메인페이지로 리다이렉트
		resp.sendRedirect("/main");
		
	}
}

MemberServiceImpl - 현재 member에는 userid와 userpw값이 저장되어있다.

public class MemberServiceImpl implements MemberService {

	//MemberDao 객체
	private MemberDao memberDao = new MemberDaoImpl();

	...
    
	@Override
	public Member info(Member member) {
		return memberDao.selectMemberByUserid(JDBCTemplate.getConnection(), member);
	}
	
}

MemberDao

public interface MemberDao {

	int insert(Connection conn, Member member);

	int selectCntMemberByUseridUserpw(Connection conn, Member member);

	Member selectMemberByUserid(Connection conn, Member member);

}

MemberDaoImpl - DB에서 전달인자 member의 userid와 일치하는 정보를 새로운 Member객체에 저장

public class MemberDaoImpl implements MemberDao {
	
	private PreparedStatement ps = null; //SQL 수행 객체
	private ResultSet rs = null; //SQL조회 결과 객체
	
	...

	@Override
	public Member selectMemberByUserid(Connection conn, Member member) {
		
		//SQL 작성
		String sql = "";
		sql += "SELECT * FROM member";
		sql += " WHERE 1=1";
		sql += "	AND userid = ?";
		
		//조회결과를 저장할 객체
		Member result = null;
		
		try {
			ps = conn.prepareStatement(sql); //SQL수행 객체
			
			ps.setString(1, member.getUserid());
			
			rs = ps.executeQuery(); //SQL 수행 및 결과집합 저장
			
			//조회 결과 처리
			while(rs.next()) {
				result = new Member();
				
				result.setUserid( rs.getString("userid") );
				result.setUserpw( rs.getString("userpw") );
				result.setUsernick( rs.getString("usernick") );
			}
			
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			//DB객체 닫기
			JDBCTemplate.close(rs);
			JDBCTemplate.close(ps);
		}
		
		//최종 결과 반환
		return result;
	}

}

저장된 Member객체인 result에는 id, pw, nick 정보가 다 들어있고 그 후에 세션으로 저장된 후 메인페이지로 리다이렉트 된다.

<!-- 로그인상태 -->
<%	} else if( (boolean)session.getAttribute("login") ) { %>

	<strong>${usernick } 님, 환영합니다</strong><br>
	<button onclick='location.href="/board/list";'>게시판 가기</button>
	<button onclick='location.href="/member/logout";'>로그아웃</button>
	
<%	} %>

마지막으로 로그아웃 구현하기

MemberLogoutController - 세션정보 해제를 해주면 끝!

@WebServlet("/member/logout")
public class MemberLogoutController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//세션 해제
		req.getSession().invalidate();

		//메인페이지로 리다이렉트
		resp.sendRedirect("/main");
		
	}
}

서블릿 / JSP를 이용하여 로그인 회원가입 구현하기 끝!

게시판 글쓰기(첨부파일)/수정/삭제 정도가 남은 것 같다..!

[내 소개..?? 겸 국비 일주일 후기]

자바 국비 일주일 후기

[자바 국비 한달 후기] [자바 국비 50% 후기] 자바 국비지원을 다닌 지 일주일이 지났다. 진짜 많은 걸 배웠다. 자바, 이클립스 설치, 자바 프로그램 개발(실행) 과정(컴파일), 데이터 타입, 변수, 스

kimdevel.tistory.com

'개발 > 서블릿JSP' 카테고리의 다른 글

서블릿(Servlet) 게시판 만들기 2 - 게시글 상세보기 (0)	2021.04.13
서블릿(Servlet) 게시판 만들기 1 - 게시판 목록/리스트 조회 (2)	2021.04.11

👋국비 후기 모음👋 (이력도 확인 가능!)

고졸에서 개발자까지

서블릿(Servlet) 게시판 만들기 3 - 회원가입 / 로그인 / 로그아웃

'개발 > 서블릿JSP' 카테고리의 다른 글

댓글

티스토리툴바

서블릿(Servlet) 게시판 만들기 3 - 회원가입 / 로그인 / 로그아웃

'개발 > 서블릿JSP' 카테고리의 다른 글

관련글

댓글

티스토리툴바