JSP - 간단한 게시판 구현하기(2) - 회원가입, Login & Logout (2022-09-29)

JSP - 간단한 게시판 구현하기(2) - 회원가입, Login & Logout (2022-09-29)

2022. 9. 29. 14:18ㆍ3층 1구역 - 개발의 장/JSP

1. 서론

이번에는 회원가입과 더불어 로그인, 로그아웃을 구현해 보자.

2. 본론

2-1. 회원가입

register.jsp(전체 코드)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<script src="check.js"></script>
</head>
<body>
	<%@ include file="/session_quiz/header.jsp" %>
	<div align="center">
		<h1>회원 등록</h1>
		<table>
		<tr><td>
			<form action="registerService.jsp" method="post" id="f">
				<input type="text" name="id" placeholder="아이디" id="id"> (*필수 항목) <br>
				<input type="password" name="pw" placeholder="비밀번호" id="pw"><br>
				<input type="password" name="confirm" placeholder="비밀번호 확인 " id="confirm" onchange="pwCheck()">
				<label id="label">(*필수 체크)</label><br>
				<input type="text" name="userName" id="userName" placeholder="이름" ><br>
				<input type="text" name="address" placeholder="주소" ><br>
				<input type="text" name="mobile" placeholder="전화번호" ><br>
				<input type="button" value="회원가입" onclick="allCheck()"><br>
			</form>
		</td></tr>
		</table>
	</div>
	<%@ include file="/session_quiz/footer.jsp" %>
</body>
</html>

먼저 회원가입에 대한 HTML 배치이다.

<form action="registerService.jsp" method="post" id="f"></form>을 이용하여 안에 있는 정보를

registerService.jsp로 post 방식으로 보낸도록 한다.

check.js(전체 코드)

function allCheck(){
	id = document.getElementById('id').value;
	pw = document.getElementById('pw').value;
	confirm = document.getElementById('confirm').value;
	userName = document.getElementById('userName').value;
	
	if(id == ""){
		alert('아이디는 필수 항목입니다.');
	}else if(pw == ""){
		alert('비밀번호는 필수 항목입니다.');
	}else if(confirm == ""){
		alert('비밀번호 확인은 필수 항목입니다.');
	}else if(userName == ""){
		alert('이름은 필수 항목입니다.');
	}else{
		document.getElementById('f').submit();
	}
}
function pwCheck(){
	pw = document.getElementById('pw');
	confirm = document.getElementById('confirm');
	if(pw.value == confirm.value){
		document.getElementById('label').innerHTML = '일치';
	}
	else {
		document.getElementById('label').innerHTML = '불일치';
		pw.value="";
		confirm.value="";
		pw.focus();
	}
}
function loginCheck(){
	id = document.getElementById('id').value;
	pw = document.getElementById('pw').value;
	
	if(id == ""){
		alert('아이디는 필수 항목입니다.');
	}else if(pw == ""){
		alert('비밀번호는 필수 항목입니다.');
	}else{
		document.getElementById('f').method = 'post';
		document.getElementById('f').submit();
	}
}

function allCheck() 여기는 어디서 적용되는가?

function allCheck(){
	id = document.getElementById('id').value;
	pw = document.getElementById('pw').value;
	confirm = document.getElementById('confirm').value;
	userName = document.getElementById('userName').value;
	
	if(id == ""){
		alert('아이디는 필수 항목입니다.');
	}else if(pw == ""){
		alert('비밀번호는 필수 항목입니다.');
	}else if(confirm == ""){
		alert('비밀번호 확인은 필수 항목입니다.');
	}else if(userName == ""){
		alert('이름은 필수 항목입니다.');
	}else{
		document.getElementById('f').submit();
	}
}

회원 가입에서 아이디, 비밀번호, 비밀번호 확인, 이름을 쓰는 텍스트칸에 입력값이 공란 이라면

alert창이 뜨게 된다. form태그에 id를 지정한 이유이다.

function pwCheck()는 어디서 사용하는가?

function pwCheck(){
	pw = document.getElementById('pw');
	confirm = document.getElementById('confirm');
	if(pw.value == confirm.value){
		document.getElementById('label').innerHTML = '일치';
	}
	else {
		document.getElementById('label').innerHTML = '불일치';
		pw.value="";
		confirm.value="";
		pw.focus();
	}
}

비밀번호 및 비밀번호 확인할 때 비밀번호와 비밀번호 확인에 입력된 값이

일치하는지 불일치하는지 innerHTML을 통해 띄어줄 수 있다.

그래서 register input태그에 보면

onchange="pwCheck()" 라고 해서 값을 지정해줬다.

불일치 할 경우,

document.getElementById('label').innerHTML = '불일치';
		pw.value="";
		confirm.value="";
		pw.focus();

비밀번호 및 확인 입력칸을 공란으로 만들고 비밀번호 입력칸으로 focus를 주었다.

registerService.jsp(전체 코드)

<%@page import="session_quiz.MemberDAO"%>
<%@page import="session_quiz.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	request.setCharacterEncoding("utf-8");
	String id = request.getParameter("id");
	String pw = request.getParameter("pw");
	String confirm = request.getParameter("confirm");
	String userName = request.getParameter("userName");
	String address = request.getParameter("address");
	String mobile = request.getParameter("mobile");
	
	if(id == "" || pw == "" || userName == ""){
		out.print("<script>alert('필수 정보입니다.'); history.back();</script>");
		return ;
	}
	if(! pw.equals(confirm)){
		out.print("<script>alert('두 패스워드가 일치하지 않습니다.'); history.back();</script>");
		return ;
	}
	
	MemberDAO memberDao = new MemberDAO();
	MemberDTO check = memberDao.selectId(id);
	if(check == null){
		MemberDTO member = new MemberDTO();
		member.setId(id);
		member.setPw(pw);
		member.setUserName(userName);
		member.setAddress(address);
		member.setMobile(mobile);
		memberDao.insert(member);
		out.print("<script>alert('회원 가입 완료'); location.href='index.jsp';</script>");
	}else{
		out.print("<script>alert('회원 가입 실패'); history.back();</script>");
	}
%>

회원가입할 때 검증해주는 코드이다.

하지만 대부분의 검증은 자바스크립트 부분에서 해주고 있기 때문에 여기서 눈여겨 볼 것은.....

아래 코드인데

MemberDAO memberDao = new MemberDAO();
	MemberDTO check = memberDao.selectId(id);
	if(check == null){
		MemberDTO member = new MemberDTO();
		member.setId(id);
		member.setPw(pw);
		member.setUserName(userName);
		member.setAddress(address);
		member.setMobile(mobile);
		memberDao.insert(member);
		out.print("<script>alert('회원 가입 완료'); location.href='index.jsp';</script>");
	}else{
		out.print("<script>alert('회원 가입 실패'); history.back();</script>");
	}

DTO클래스에 dao의 id값을 받아와 만약 그 값이 공란이 아니고 null(없는 값)이면

DTO로 입력값을 보내주고 DTO가 받은 값은 다시 DAO의 inset메서드를 호출하여 DB에 저장하게 된다.

그리고 가입이 성공적으로 진행 되었다면 회원 가입 완료라는 alert을,

아이디가 중복되어 회원가입이 안되었다면 회원 가입 실패 alert을 띄울 것이다.

2-2. 로그인

회원가입도 끝냈다 이제 로그인을 해보자.

로그인페이지는 아이디, 비밀번호랑 로그인 버튼만 있는 그런 페이지로 구성했다.

login.jsp(전체 코드)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<script src="check.js"></script>
</head>
<body>
	<%@ include file="/session_quiz/header.jsp" %>
	<div align="center">
		<h1>로그인</h1>
		<table>
		<tr><td>
			<form action="loginService.jsp" id="f">
				<input type="text" name="id" placeholder="아이디" id="id"> <br>
				<input type="password" name="pw" placeholder="비밀번호" id="pw"><br>
				<input type="button" value="로그인" onclick="loginCheck()"><br>
			</form>
		</td></tr>
		</table>
	</div>
	<%@ include file="/session_quiz/footer.jsp" %>
</body>
</html>

그런데 위 코드를 보다보니 회원가입 때랑 비슷한 애가 몇 보인다.

<form action="loginService.jsp" id="f"><form> 얘랑....

onclick="loginCheck()" 얘다. 뭔가 쎄하지 않는가...

아까 자바스크립트 구문 중 하나 사용하지 않은게 여기서 사용된다.

function loginCheck(){
	id = document.getElementById('id').value;
	pw = document.getElementById('pw').value;
	
	if(id == ""){
		alert('아이디는 필수 항목입니다.');
	}else if(pw == ""){
		alert('비밀번호는 필수 항목입니다.');
	}else{
		document.getElementById('f').method = 'post';
		document.getElementById('f').submit();
	}
}

전체코드는 Ctrl + f키를 눌러 찾아보도록 하자(블로그 초보라 링크를 못 건다...)

(검색어 : check.js)

아이디를 적지않고 로그인 버튼을 눌렀을 경우,

아이디는 기입했으나 비밀번호를 적지 않았을 경우,

loginService.jsp (전체 코드)

<%@page import="session_quiz.MemberDAO"%>
<%@page import="session_quiz.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	request.setCharacterEncoding("utf-8");
	String id = request.getParameter("id");
	String pw = request.getParameter("pw");

	if(id == "" || pw == ""){
		out.print("<script>alert('필수 정보입니다.'); history.back();</script>");
		return ;
	}

	MemberDAO memberDao = new MemberDAO();
	MemberDTO check = memberDao.selectId(id);
	if(check != null && check.getPw().equals(pw)){
		session.setAttribute("id", id);
		session.setAttribute("userName", check.getUserName());
		session.setAttribute("address", check.getAddress());
		session.setAttribute("mobile", check.getMobile());
		out.print("<script>alert('로그인 성공'); location.href='index.jsp';</script>");
	}else{
		out.print("<script>alert('로그인 실패'); history.back();</script>");
	}
%>

아래 코드 부분은 이미 check.js에서 검증을 하기 때문에 선택적으로 사용할 수 있다.

request.setCharacterEncoding("utf-8");
	String id = request.getParameter("id");
	String pw = request.getParameter("pw");

	if(id == "" || pw == ""){
		out.print("<script>alert('필수 정보입니다.'); history.back();</script>");
		return ;
	}

MemberDAO memberDao = new MemberDAO();
	MemberDTO check = memberDao.selectId(id);
	if(check != null && check.getPw().equals(pw)){
		session.setAttribute("id", id);
		session.setAttribute("userName", check.getUserName());
		session.setAttribute("address", check.getAddress());
		session.setAttribute("mobile", check.getMobile());
		out.print("<script>alert('로그인 성공'); location.href='index.jsp';</script>");
	}else{
		out.print("<script>alert('로그인 실패'); history.back();</script>");
	}

모든 검증이 끝나면 이제 DB에서 검증이 들어간다. MemberDAO를 새로운 변수로 선언 후,

DTO에 DAO의 selectId 값을 대입한다.

만약에 DTO가 null이 아니'고' DTO가 가져온 비밀번호와 로그인창 비밀번호 칸에 적은 비밀번호가 같다면

selectId로 가져온 id, userName, address, mobile에 세션을 부여해준다.

2-3. 로그아웃

로그아웃은 민망할 만큼 별게 없다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    <%
    session.invalidate();
    response.sendRedirect("index.jsp");
    %>

3. 결론

깜박한게 있는데.....회원 관련해서 DTO DAO를 올리지 않았다.....

다음엔 그거다

JAVA로만 게시판을 구현했을 땐 자바 → 데이터베이스 이런 순서였지만

JSP를 배움으로서 자바 → JSP서버측 → 데이터베이스로 거쳐가야 할 구간이 늘었다.

(데이터 부분은 아직도 헷갈림...)

저작자표시 (새창열림)

'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글

JSP - 간단한 게시판 구현하기(3) - 회원정보 열람 및 수정,삭제 (2022-09-29) (1)	2022.09.29
JSP - 간단한 게시판 구현하기(외전) - MemberDAO,DTO (2022-09-29) (1)	2022.09.29
JSP - 간단한 게시판 구현하기(1) - Index (2022-09-29) (1)	2022.09.29
JSP - 간단한 게시판 구현하기(0) - 준비단계(2022-09-29) (0)	2022.09.29
JSP - login 관련 페이지를 맹글어보자! (2022-09-25) (0)	2022.09.25

상이태상의 도서관