[JSP][도서쇼핑몰 프로젝트]#14.로그인 / 회원가입 페이지 만들기

📒 개발기록/JSP 프로젝트

[JSP][도서쇼핑몰 프로젝트]#14.로그인 / 회원가입 페이지 만들기

초코붕붕 2023. 4. 10. 08:00

728x90

안녕하세요! 오늘은 이전에 만든 user테이블을 이용하여 로그인 및 회원가입을 하려고 합니다.

로그인과 회원가입은 이 UI를 이용하여 만들어 주었습니다.

https://wsss.tistory.com/1202

로그인과 회원가입을 할 수 있는 창

See the Pen Slide Form by Arturo Cabrera (@Pixmy) on CodePen. 로그인과 회원가입을 할 수 있는 창

wsss.tistory.com

이 CSS/ JS를 이용하면 하나의 페이지에서 로그인 및 회원가입을 할 수 있지만 저는 로그인과 회원가입페이지를 나누어서 따로따로 작성하였습니다. 로그인과 회원가입을 할 때 입력받은 데이터를 Action페이지로 넘겨서 처리를 해주는데요. 이때, 사용하는 것이 바로 폼(form)입니다. 폼은 사용자가 웹브라우저를 통해 입력된 모든 데이터를 한 번에 웹서버로 전송하는 양식입니다.

📋순서

1. 로그인 액션 페이지

2. 회원가입 UserDAO수정

3. 회원가입 액션 페이지

4. 결과

1. 로그인 액션페이지

사용자가 로그인페이지에서 입력한 정보를 받아 그에 해당하는 데이터를 처리해 주는 페이지입니다.

	UserDAO userDAO = new UserDAO();
	int result = userDAO.login(user.getUserID(), user.getUserPass());
	if (result == 1) {	//로그인이 성공했을 때
			//session
		session.setAttribute("userID",user.getUserID());
		PrintWriter script = response.getWriter();
		script.println("<script>");
		script.println("location.href = 'index.jsp'");
		script.println("</script>");
	}

JSP에서 데이터베이스를 쓰기 위해 만들어둔 UserDAO를 사용하기 위해 입력해 줍니다. 그리고 DAO의 userID, UserPass의 정보를 가져옵니다. result == 1 은 로그인이 성공했을 때 실행되는 것으로 성공 시 index.jsp로 이동합니다.

		else if (result == 0) {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('비밀번호가 틀립니다.')");
			script.println("history.back()");
			script.println("</script>");
		}

그리고 result == 0일 경우, '비밀번호가 틀립니다.' 메시지 출력 후 돌아갑니다. 마찬가지로 result == -1은 아이디가 없을 경우, result == -2는 데이터베이스 오류가 발생했을 때 메시지를 출력하고 이전으로 돌아가도록 작성해 주면 됩니다.

이렇게 해주면 전체코드는 다음과 같습니다.

▶ login_action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="user.UserDAO" %>
<%@ page import="java.io.PrintWriter" %>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="user" class="user.User" scope="page"/>
<jsp:setProperty name="user" property="userID" />
<jsp:setProperty name="user" property="userPass" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>login action</title>
</head>
<body>
	<%
		UserDAO userDAO = new UserDAO();
		int result = userDAO.login(user.getUserID(), user.getUserPass());
		if (result == 1) {	//로그인이 성공했을 때
			//session
			session.setAttribute("userID",user.getUserID());
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("location.href = 'login.jsp'");
			script.println("</script>");
		}
		else if (result == 0) {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('비밀번호가 틀립니다.')");
			script.println("history.back()");
			script.println("</script>");
		}
		else if (result == -1) {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('존재하지 않는 아이디입니다.')");
			script.println("history.back()");
			script.println("</script>");
		}
		else if (result == -2) {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('데이터베이스 오류가 발생했습니다.')");
			script.println("history.back()");
			script.println("</script>");
		}
	%>
</body>
</html>

+ 로그인 페이지(login.jsp) / 로그인 CSS (login.css)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" , initial-scale="1">
<link rel="stylesheet" href="assets/css/login.css">
<title>login page</title>
</head>
<body>
	<div class="container">
		<div class="move">
			<div class="p-button normal signin animated pulse" onclick="location.href='join.jsp'">
			SIGN UP</div>
		</div>
		<div class="welcome">
			<h4 class="bold welcome-text">Hello Friend</h4>
			<p class="normal text">Enter your personal details and start
				journey with us</p>
		</div>
		<div class="form">
			<h4 class="bold title">Sign-in</h4>
			<form method="post" action="login_action.jsp">	
			<p class="korean light">로그인 페이지 입니다.</p>
			<input type="text" class="normal" placeholder="ID" name="userID" maxlength="20">
			<input type="password" class="normal" placeholder="Password" name="userPass" maxlength="20">
			<input type="submit" class="b-button korean" value="로그인">
			</form>
			<div>
			<p class="normal forgot" onclick="location.href='#'">Forgot your password?</p>
			</div>
		</div>
	</div>
</body>
</html>

0.00MB

2. 회원가입 UserDAO수정

회원가입은 만들어준 데이터베이스에 내가 입력한 값들을 추가로 넣어주는 것인데요. 그렇기 때문에 먼저 UserDAO에 새로운 필드값을 삽입하도록 INSERT문을 작성합니다.

String SQL = "INSERT INTO USER VALUES (?,?,?,?)";

그리고 아이디, 비밀번호, 이름, 이메일을 물음표에 설정하도록 setString()메소드를 작성합니다. 이때, 오류가 발생할 경우 출력해 주기 위해 try catch문으로 작성하여 줍니다.

	pstmt = conn.prepareStatement(SQL);
	pstmt.setString(1, user.getUserID());
	pstmt.setString(2, user.getUserPass());
	pstmt.setString(3, user.getUserName());
	pstmt.setString(4, user.getUserEmail());

INSERT문을 실행하도록 PreparedStatment객체의 executeUpdate()메소드를 작성합니다.

return pstmt.executeUpdate();

▶ UserDAO의 회원가입 부분 전체코드

	//회원가입
	public int join(User user) {
		String SQL = "INSERT INTO USER VALUES (?,?,?,?)";
		try {
			pstmt = conn.prepareStatement(SQL);
			pstmt.setString(1, user.getUserID());
			pstmt.setString(2, user.getUserPass());
			pstmt.setString(3, user.getUserName());
			pstmt.setString(4, user.getUserEmail());
			return pstmt.executeUpdate();
		} catch(Exception e) {
			e.printStackTrace();
		}
		return -1;	//데이터베이스 오류
	}

3. 회원가입 액션 페이지

회원가입도 로그인액션페이지와 비슷하게 작성해줍니다.

먼저, join_action.jsp라는 이름으로 파일을 하나 만들어 준 뒤 사용자의 정보를 가져와 사용해 주기 위해 작성합니다.

<jsp:useBean id="user" class="user.User" scope="page" />
<jsp:setProperty name="user" property="userID" />
<jsp:setProperty name="user" property="userPass" />
<jsp:setProperty name="user" property="userName" />
<jsp:setProperty name="user" property="userEmail" />

그리고 로그인과 다르게 회원가입에서는 빈칸의 입력여부를 확인해서 정보가 입력되어있지 않으면 입력하라는 메시지가 출력됩니다.

if (user.getUserID() == null || user.getUserPass() == null || user.getUserName() == null
|| user.getUserEmail() == null) {
	PrintWriter script = response.getWriter();
	script.println("<script>");
	script.println("alert('입력이 안 된 사항이 있습니다.')");
	script.println("history.back()");
	script.println("</script>");

이후, 이미 존재하는 아이디라면 -1 값을 반환하고 성공이라면 메인페이지로 넘어가도록 작성해 줍니다.

	if (result == -1) {
		PrintWriter script = response.getWriter();
		script.println("<script>");
		script.println("alert('이미 존재하는 아이디 입니다.')");
		script.println("history.back()");
		script.println("</script>");
	} else { //회원가입 성공 시
		//session
		session.setAttribute("userID", user.getUserID());
		PrintWriter script = response.getWriter();
		script.println("<script>");
		script.println("location.href = 'login.jsp'");
		script.println("</script>");
	}

중간에 있는 session은 회원가입 후 에도 정보를 유지하도록 넣어주었습니다.

▶ join_action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="user.UserDAO"%>
<%@ page import="java.io.PrintWriter"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<jsp:useBean id="user" class="user.User" scope="page" />
<jsp:setProperty name="user" property="userID" />
<jsp:setProperty name="user" property="userPass" />
<jsp:setProperty name="user" property="userName" />
<jsp:setProperty name="user" property="userEmail" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>join action</title>
</head>
<body>
	<%
		if (user.getUserID() == null || user.getUserPass() == null || user.getUserName() == null
				|| user.getUserEmail() == null) {
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('입력이 안 된 사항이 있습니다.')");
			script.println("history.back()");
			script.println("</script>");
		} else {
			UserDAO userDAO = new UserDAO();
			int result = userDAO.join(user);
			if (result == -1) {
				PrintWriter script = response.getWriter();
				script.println("<script>");
				script.println("alert('이미 존재하는 아이디 입니다.')");
				script.println("history.back()");
				script.println("</script>");
			} else { //회원가입 성공 시
				//session
				session.setAttribute("userID", user.getUserID());
				PrintWriter script = response.getWriter();
				script.println("<script>");
				script.println("location.href = 'index.jsp'");
				script.println("</script>");
			}
	
		}
	%>
</body>
</html>

+ 회원가입 페이지(join.jsp) / 회원가입 CSS (join.css)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" , initial-scale="1">
<link rel="stylesheet" href="assets/css/join.css">
<title>Join page</title>
</head>
<body>
	<div class="container">
		<div class="move">
			<div class="p-button normal signin animated pulse" onclick="location.href='login.jsp'">
			SIGN IN</div>
		</div>
		<div class="welcome">
			<h4 class="bold welcome-text">Welcome Back!</h4>
			<p class="normal text">To keep connected with us please login
				with your personal info</p>
		</div>
		<div class="hello">
			<h4 class="bold welcome-text">Hello Friend</h4>
			<p class="normal text">Enter your personal details and start
				journey with us</p>
		</div>
		<div class="form">
			<h4 class="bold title">Create Account</h4>
			<p class="korean light">환영합니다! 회원가입 페이지 입니다.</p>
			<form method="post" action="join_action.jsp">		
			<input type="text" class="normal" placeholder="ID" name="userID" maxlength="20">
			<input type="password" class="normal" placeholder="Password" name="userPass" maxlength="20">
			<input type="text" class="normal name" placeholder="Name" name="userName" maxlength="20">
			<input type="text" class="normal" placeholder="Email" name="userEmail" maxlength="50">
			<p class="normal forgot">Forgot your password?</p>
			<input type="submit" class="b-button korean" value="회원가입">
			</form>
		</div>
	</div>
</body>
</html>

join.css

0.00MB

4. 결과

이렇게 해주고 나면 다음과 같이 결과가 잘 뜨는 것을 확인할 수 있습니다. 그리고 실행시켰을 때 빈칸이나 입력값이 다르다면 alert를 이용한 메시지가 잘 나오는 것을 볼 수 있습니다.

저작자표시 비영리 변경금지