[JSP Study] id중복 체크를 추가한 로그인

Noah97·2022년 6월 7일
0

JspStudy

목록 보기
15/18
post-thumbnail

📒 id중복 체크를 추가하고 관리자의 level인 level이 5일 때만 회원정보를 볼 수 있도록 하였다.

login.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>
	<form name = "frm" action="loginProcess.jsp" method="post" onsubmit = "return formCheck()">
		<fieldset>
			<legend>로그인</legend>
			<table>
				<tr>
					<td><label for="id">아이디</label></td>
					<td><input type="text" name="id" id="id" /></td>
				</tr>
				<tr>
					<td><label for="pass">비밀번호</label></td>
					<td><input type="password" name="pass" id="pass" /></td>
				</tr>
			</table>
		</fieldset>
		<input type="reset" value="다시입력">&nbsp;<input type ="submit" value = "로그인"><br>
		♣ 아이디가 없으면 <a href = "regStep1.jsp">회원가입</a>
	</form>
	<script src = "script.js"></script>
</body>
</html>

loginProcess.jsp

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

<%
	String id = request.getParameter("id");
	String pass = request.getParameter("pass");
	
	if(id.equals("") || id.equals(null)) {
		response.sendRedirect("login.jsp");
		return;
	}
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	String driver = "org.mariadb.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testdb3";
	try {
		Class.forName(driver);
		conn = DriverManager.getConnection(url,"java","java");
		
		String sql = "SELECT * FROM member WHERE id = ?";
		
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, id);
		
		rs = pstmt.executeQuery();
		
		if(rs.next() && pass.equals(rs.getString("pass"))) { //데이터베이스에 데이터가 있고 비밀번호와 데이터베이스에서 받아온 비밀번호가 같을 경우
			session.setAttribute("sessionid", id); // id를 sessionid로 세션으로 받음
			session.setAttribute("level", rs.getInt("level")); //level을 세션으로 받아서 memList에서 처리
			response.sendRedirect("memList.jsp"); //memList.jsp로 이동
			return;
		} else {
			out.print("<script>alert('id또는 비밀번호가 틀립니다.'); location.href = 'login.jsp';</script>"); //아이디 비밀번호가 다를 시 script로 alert창을 띄우고 login.jsp로 이동
			return;
		}
		
	}catch(ClassNotFoundException e) {
		e.printStackTrace();
	}catch(SQLException e) {
		e.printStackTrace();
	}catch(Exception e) {
		e.printStackTrace();
	}finally {
		try {
			pstmt.close();
			conn.close();
		}catch(SQLException e) {
			e.printStackTrace();
		}
		
	}
%>

memList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%
String sessionid;
int level;
if (session.getAttribute("sessionid") != null) { //세션에서 받아온 id가 null이 아니면
	sessionid = (String) session.getAttribute("sessionid"); //sessionid에 id값 저장
	level = (int) session.getAttribute("level"); //level에 level값 저장
	out.println("id : <strong>" + sessionid + "</strong>님 반갑습니다."); 
} else {
	response.sendRedirect("login.jsp");
	return;
}
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;

String driver = "org.mariadb.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/testdb3";

try {
	Class.forName(driver);
	conn = DriverManager.getConnection(url, "java", "java");

	String sql = "SELECT * FROM member";
	pstmt = conn.prepareStatement(sql);

	rs = pstmt.executeQuery();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>멤버리스트</title>
</head>
<body>
	<%
	if (level == 5) { //loginProcess에서 세션으로 받아온 level이 5라면 관리자모드 이므로 테이블 보여줌
	%>
	<table border="1">
		<caption>회원목록</caption>
		<thead>
			<tr>
				<th>아이디</th>
				<th>비밀번호</th>
				<th>이메일</th>
				<th>휴대번호</th>
				<th>생년월일</th>
				<th>등록일자</th>
			</tr>
		</thead>
		<tbody>
			<%
			while (rs.next()) {
				String id = rs.getString("id");
				String pass = rs.getString("pass");
				String email = rs.getString("email");
				String phone = rs.getString("phone");
				String birth = rs.getString("birth");
				String regdate = rs.getString("regdate");
			%>
			<tr>
				<td><%=id%></td>
				<td><%=pass%></td>
				<td><%=email%></td>
				<td><%=phone%></td>
				<td><%=birth%></td>
				<td><%=regdate%></td>
			</tr>
			<%
			}
			%>
		</tbody>
	</table>
	<%
	} else { //아니면 그냥 환영합니다 띄움
	%>
	<h3>환영합니다!</h3>
	<%
	}
	%>
	<a href="logout.jsp">로그아웃</a>
</body>
</html>
<%
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
	rs.close();
	pstmt.close();
	conn.close();
} catch (SQLException e) {
	e.printStackTrace();
}
}
%>

실행 화면⬇️


regStep1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.util.ArrayList"%>
<%@ page import="java.sql.*"%>
<%
	String id = request.getParameter("id");
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	String driver = "org.mariadb.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testdb3";
	Class.forName(driver);
	conn = DriverManager.getConnection(url, "java", "java");
	String sql = "SELECT * FROM member";
	pstmt = conn.prepareStatement(sql);
	rs = pstmt.executeQuery();
	
	ArrayList<String> list = new ArrayList<>();
	while (rs.next()) {
		list.add(rs.getString("id"));
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 화면</title>
<script>
	function submit2(frm) { //폼에서 액션 경로를 여러개 사용하기 위한 함수
		frm.action = 'check.jsp'; //두번째로 보낼 경로 아이디 중복 체크하는 부분
		frm.submit();
		return false;
	}
</script>
</head>
<body>
	<form name="frm" action="regStep2.jsp" method="post"
		onsubmit="return formCheckreg1()">
		<fieldset>
			<legend>회원가입 : 기본</legend>
			<table>
				<tr>
					<td><label for="id">아이디</label></td>
					<td><input type="text" name="id" id="id" /><input type="hidden" id="con" value="0"></td>
					<td><button onclick="return submit2(this.form);">중복확인</button>		
						<!-- 중복확인 버튼을 누르면 check.jsp로 이동하여 아이디 중복 검사 -->
				</tr>
				<tr>
					<td><label for="pass1">비밀번호</label></td>
					<td><input type="password" name="pass1" id="pass1" /></td>
				</tr>
				<tr>
					<td><label for="pass2">비밀번호 확인</label></td>
					<td><input type="password" name="pass2" id="pass2" /></td>
				</tr>
			</table>
		</fieldset>
		<button type="reset">다시입력</button>
		<button onclick="return formCheckreg1();">다음단계</button>
		<br>
	</form>
	♣ 아이디가 있으면
	<a href="login.jsp">로그인</a>
	<script src="script.js"></script>
</body>
</html>

실행 화면⬇️

check.jsp id 중복확인

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%
	String id = request.getParameter("id");	
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	String driver = "org.mariadb.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testdb3";
	Class.forName(driver);
	conn = DriverManager.getConnection(url,"java","java");
	String sql = "SELECT * FROM member WHERE id=?";
	pstmt = conn.prepareStatement(sql);
	pstmt.setString(1, id);
	rs = pstmt.executeQuery();

%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%if(rs.next()) { %>
	<script>
	alert('중복입니다.')
	location.href = "regStep1.jsp";	
	</script>
	<% } else { %>
	<script>
	alert('사용가능한 아이디 입니다.')
	location.href = "regStep1.jsp";	
	</script>
	<% } %>
</body>
</html>

실행 화면⬇️


regStep2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String id = request.getParameter("id");
	String pass = request.getParameter("pass1");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 화면</title>
</head>
<body>
	<form name="frm" action="regInsert.jsp" method="post" onsubmit="return formCheckreg2()">
	<input type = "hidden" name = "id" value = "<%=id %>">
	<input type = "hidden" name = "pass" value = "<%=pass %>">
	<h3>
		신청 아이디 : <%=id %>
	</h3>
		<fieldset>
			<legend>회원가입 : 상세</legend>
			<table>
				<tr>
					<td><label for="email">이메일</label></td>
					<td><input type="text" name="email" id="email" /></td>
				</tr>
				<tr>
					<td><label for="phone">휴대번호</label></td>
					<td><input type="text" name="phone" id="phone" /></td>
				</tr>
				<tr>
					<td><label for="birth"> 생년월일</label></td>
					<td><input type="date" name="birth" id="birth" /></td>
				</tr>
			</table>
		</fieldset>
		<button type = "reset">다시입력</button>
		<button onclick ="javascript:histody.back();">이전단계</button>
		<button onclick ="return formCheckreg2();">다음단계</button>
	</form>
	<script src = "script.js"></script>
</body>
</html>

실행 화면⬇️

regInsert.jsp

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.Date" %> 
<%@ page import="java.text.SimpleDateFormat" %>
<%
	Date nowTime = new Date();//date객체를 이용해 현재 시간 nowTime으로 받아옴
	SimpleDateFormat st = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); //SimpleDateFormat 클래스로 date는 "yyyy/MM/dd" time은 "hh:mm:ss"로 받아옴
	String regdate = st.format(nowTime); //regdate는 현재 시간 
	request.setCharacterEncoding("UTF-8");
	String id = request.getParameter("id");
	String pass = request.getParameter("pass");
	String email = request.getParameter("email");
	String phone = request.getParameter("phone");
	String birth = request.getParameter("birth");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	String driver = "org.mariadb.jdbc.Driver";
	String url = "jdbc:mysql://localhost:3306/testdb3";
	try {
		Class.forName(driver);
		conn = DriverManager.getConnection(url,"java","java");		
		String sql = "INSERT INTO member(level, id, pass, email, phone, birth, regdate) VALUES(?,?,?,?,?,?,?)";
		pstmt = conn.prepareStatement(sql);
		pstmt.setInt(1, 1); //level값은 1로 고정
		pstmt.setString(2, id);
		pstmt.setString(3, pass);
		pstmt.setString(4, email);
		pstmt.setString(5, phone);
		pstmt.setString(6, birth);
		pstmt.setString(7, regdate);
		int result = pstmt.executeUpdate();
		if(result != 0) {
			out.println("회원 등록 완료<br>");
		}
	} catch(Exception e) {
		e.printStackTrace();
		response.sendRedirect("regStep1.jsp");
	} finally {
		try {
			pstmt.close();
			conn.close();
		}
		catch (Exception e) {
			e.printStackTrace();
		}
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보보기</title>
<style>
table {
	margin: auto;
	width: 400px;
	border: 1px solid gray;
	text-align: center;
}
</style>
</head>
<body>
	<h3>아이디 : <%=id %></h3>
	<h3>비밀번호 : <%=pass %></h3>
	<h3>이메일 : <%=email %></h3>
	<h3>휴대번호 : <%=phone %></h3>
	<h3>생년월일 : <%=birth %></h3>
	<a href = "login.jsp">로그인</a>
<script src = "script.js"></script>
</body>
</html>

실행 화면⬇️

logout.jsp

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

<%
	if((session).getAttribute("sessionid") != null) { //세션 id가 null이 아니면
		session.removeAttribute("sessionid"); //세션에서 삭제
		response.sendRedirect("login.jsp"); //login.jsp로 이동
		return;
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script src = "script.js"></script>
</body>
</html>

script.js

function formCheck() {
	if(frm.id.value=="") {
		alert("아이디를 입력하세요");
		frm.id.focus();
		return false;
	}
	if(frm.pass.value=="") {
		alert("비밀번호를 입력하세요");
		frm.pass.focus();
		return false;
	}
}

function formCheckreg1() {
	if(frm.id.value=="") {
		alert("아이디를 입력하세요");
		frm.id.focus();
		return false;
	}
	if(frm.pass1.value=="")  {
		alert("비밀번호를 입력하세요");
		frm.pass1.focus();
		return false;
	}
	if(frm.pass2.value=="") {
		alert("비밀번호를 입력하세요");
		return false;
	}
	if(frm.pass1.value != frm.pass2.value) {
		alert("비밀번호가 서로 다릅니다");
		return false;
	}
}

function formCheckreg2() {
	if(frm.email.value=="") {
		alert("이메일을 입력하세요");
		frm.email.focus();
		return false;
	}
	if(frm.phone.value=="") {
		alert("번호를 입력하세요");
		frm.phone.focus();
		return false;
	}
	if(frm.birth.value=="") {
		alert("생년월일을 입력하세요");
		frm.birth.focus();
		return false;
	}
}
profile
안녕하세요 반갑습니다😊

0개의 댓글