JSP_basic. MySQL DB와 연동되는 로그인 페이지를 만들어보자(PreparedStatement, session)

dwanGim·2022년 4월 5일
jspmysql
0

JSP_basic

목록 보기
2/15

SQL DB에 자바에서 접속하는 방법

준비물은 mysql 커넥터입니다.

WEB-INF의 라이브러리에 커넥터가 준비되었다면

userLoginForm.jsp 파일을 작성합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<row>
<div class="col-sm-5">
	<form action="http://localhost:8181/JSPbasic/user/userLoginCheck.jsp" method="post">
		<input type="text" name="userId" placeholder="아이디를 입력해주세요." class="form-control form-control-lg">
		<input type="password" name="userPw" placeholder="비밀번호를 입력해주세요." class="form-control form-control-lg">
		<input type="submit" value="확인" class="btn btn-primary mb-3">
	</form>
</div>
</row>


</body>
</html>

간단한 로그인 form을 작성했습니다.

form = action을 지정해 userLoginCheck.jsp로 이동하도록 했습니다.

입력받은 아이디는 userId

입력받은 패스워드는 userPw라는 데이터로 저장됩니다.

이 데이터를 submit 버튼을 통해 post방식으로 전송할 것 입니다.

전송받은 데이터를 DB와 연동하면서 비교할 userLoginCheck.jsp에서는 PreparedStatement를 이용하겠습니다.

가장 먼저, 혹시 모를 데이터 전송 오류를 막기 위해 setCharacterEncoding을 선언합니다.

request.setCharacterEncoding("UTF-8");

그리고 전송된 데이터들을 변수에 저장합니다.

String uId = request.getParameter("userId");
	String uPw = request.getParameter("userPw");

이후에 DB에 연동하기 위한 connection문을 준비합니다.

	String dbType = "com.mysql.cj.jdbc.Driver";
	String connectUrl = "jdbc:mysql://localhost:3306/jdbcprac2?serverTimezone=UTC";
	String connectId = "root";
	String connectPw = "????";

위에서 준비된 dbType, connectUrl, connectId, connectPw는

Connection문에서 DriverManager.getConnection을

통해 SQL DB에 쉽게 접근할 수 있도록 도와줄 것 입니다.

try {
		Class.forName(dbType);
	
		Connection con = DriverManager.getConnection(connectUrl, connectId, connectPw);
		
		String sql = "SELECT*FROM userinfo WHERE user_id = ?";
		
		PreparedStatement pstmt = con.prepareStatement(sql);
		

		pstmt.setString(1, uId);
		
		
		rs = pstmt.executeQuery();

try ~catch 의 try 안에 DB 연동 구문과 원하는 메서드를 집어넣으면 됩니다.

PreparedStatement에서는 sql에 보낼 쿼리문을 어렵게 저장할 필요없습니다.

String sql = "SELECT*FROM userinfo WHERE user_id = ?"; 과 같이

원하는 변수가 들어갈 공간에 '?'만 붙여두면 됩니다.

그 이후 .setString(숫자, 변수)를 이용하면

숫자에 들어간 번째의 ?에 원하는 변수를 집어넣어주게 됩니다.

이후 rs = pstmt.executeQuery();로

쿼리문을 sql에 보내 데이터를 요청했습니다.

그럼 이제 로그인 체크 메서드를 만들어보겠습니다.

여기서 작성할 기초적인 로그인 메서드는 if~else문을 이용해 DB데이터와 비교를 하는 형식입니다.

		if(rs.next()){			
			String dbId = rs.getString(1);
			String dbPw =  rs.getString(2);
			String dbName = rs.getString(3);
			String dbMail =  rs.getString(4); 

			if(uPw.equals(dbPw)) {
						
				response.sendRedirect("http://localhost:8181/JSPbasic/user/loginWelcome.jsp");
							
				} else {
						response.sendRedirect("http://localhost:8181/JSPbasic/user/userPwFail.jsp");
				}
		
			} else {
				response.sendRedirect("http://localhost:8181/JSPbasic/user/userIdFail.jsp");
			}
			
		
	} catch(Exception e){
		e.printStackTrace();
	}
%>

로그인이 실패했을 때

userIdFail.jsp로 리다이렉트되거나

userPwFail.jsp로 리다이렉트되는 형식입니다.

DB에 요청한 자료와 ID와 PW가 일치하면 loginWelcome.jsp로 리다이렉트됩니다.

어렵지 않네요.

밑은 로그인 jsp파일의 전문입니다.

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String uId = request.getParameter("userId");
	String uPw = request.getParameter("userPw");
	
	String dbType = "com.mysql.cj.jdbc.Driver";
	String connectUrl = "jdbc:mysql://localhost:3306/jdbcprac2?serverTimezone=UTC";
	String connectId = "root";
	String connectPw = "mysql";
	
	ResultSet rs = null;
	
	try {
		Class.forName(dbType);
	
		Connection con = DriverManager.getConnection(connectUrl, connectId, connectPw);
		
		String sql = "SELECT*FROM userinfo WHERE user_id = ?";
		
		PreparedStatement pstmt = con.prepareStatement(sql);
		

		pstmt.setString(1, uId);
		
		
		rs = pstmt.executeQuery();
		
		if(rs.next()){			
			String dbId = rs.getString(1);
			String dbPw =  rs.getString(2);
			String dbName = rs.getString(3);
			String dbMail =  rs.getString(4); 

			if(uPw.equals(dbPw)) {
						
session.setAttribute("s_id", uId);				response.sendRedirect("http://localhost:8181/JSPbasic/user/loginWelcome.jsp");
							
				} else {
						response.sendRedirect("http://localhost:8181/JSPbasic/user/userPwFail.jsp");
				}
		
			} else {
				response.sendRedirect("http://localhost:8181/JSPbasic/user/userIdFail.jsp");
			}
			
		
	} catch(Exception e){
		e.printStackTrace();
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


</body>
</html>

loginWelcome.jsp의 전문입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<%
	request.setCharacterEncoding("UTF-8");
	String userId = (String)session.getAttribute("s_id");
	System.out.println(userId);
	
	if (userId == null) {
		response.sendRedirect("userLoginForm.jsp");
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p><strong><%= userId %>님 로그인을 환영합니다.</strong></p>
	<p><strong><a href="http://localhost:8181/JSPbasic/user/userLogout.jsp">로그아웃하기</a></strong></p>
	
</body>
</html>

userPwFail.jsp 전문입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p><strong>비밀번호를 잘못 입력했습니다.</strong></p>
	<p><strong><a href="http://localhost:8181/JSPbasic/user/userLoginForm.jsp">로그인 화면으로 돌아가기</a></strong></p>
</body>
</html>

userIdFail.jsp의 전문입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p><strong>ID를 잘못 입력했습니다.</strong></p>
	<p><strong><a href="http://localhost:8181/JSPbasic/user/userLoginForm.jsp">로그인 화면으로 돌아가기</a></strong></p>
</body>
</html>

userLogout.jsp의 전문입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	session.invalidate();
	response.sendRedirect("userLoginForm.jsp");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

마지막으로 MySQL에 작성한 더미 테이블입니다.

일단은 여기까지 입니다.

profile
dwanGim
배울 게 참 많네요.
이전 포스트

JSP_basic. SQL DB와 연동한 로그인 페이지를 수정해보자 (pstmt, session을 이용한 INSERT)

다음 포스트

JSP_basic. 로그인 페이지

0개의 댓글