멀티캠퍼스 백엔드 과정 34일차[7월 19일] -JDBC 설정 및 데이터 베이스 연결과 로그인

GoldenDusk·2023년 7월 24일

KDT 국비 멀티캠퍼스 톰캣

멀티캠퍼스 백엔드 과정

목록 보기

29/60

DB 연동해서 회원가입 정보 받고 DB에 넣기

설계 과정

프로젝트 생성
DB 작업
1. DBMS : 오라클
2. DBA : 사용자 계정 허가, 리소스 접근 권한 허가
  1. 접속정보 : URL, id, pwd
  2. multi.member 테이블 생성, 구조(속성)
  3. 더미 데이터 입력
Tomcat 서버(WAS) 작업
1. DataSource
2. conf > server,xml, context.xml
3. 내장객체 : application ⇒ connection 확인
사용자 화면 설계
1. userInsert.jsp
- common > JDBConnection.java
- 사용자에게 id, pass, name, regidate 입력태그
- 오라클 데이터 베이스에 입력 쿼리 실행
- 회원가입이 완료되었습니다. or 회원가입 실패
- 링크 : userList.jsp
b. userList.jsp
- common > JDBConnection.kava
- 조회 쿼리 실행
- 결과에 대한 출력

예제

DBConnection.java

package common;

import java.sql.Connection;
import java.sql.SQLException;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class DBConnection {
	public DBConnection() { 
		
	}
	public static Connection getConnection() throws SQLException{
		Connection con = null;
		try {
			Context initCtx = new InitialContext();
			// 환경정보를 담을 거, 서버의 정보를 가지고 온 것
			Context ctx = (Context)initCtx.lookup("java:comp/env");
			DataSource source = (DataSource)ctx.lookup("dbcp_myoracle");
			con = source.getConnection();
			System.out.println("오라클 DB 연결 성공!");
			return con;
		} catch (Exception e) {
			System.out.println("오라클 DB 연결 실패!");
			e.printStackTrace();
			return null;
		}
	}

	

}

index.html : 회원가입 페이지

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입화면</title>

</head>

<body>
<script type="text/javascript">
function validateForm(form){
        if(!form.id.value){
        	alert('아이디 입력하세요.');
        	return false;
        }	
	    if(form.ps.value ==""){
	    	alert("패스워드를 입력하세요");
	    	return false;
	    }
	    if(form.name.value ==""){
	    	alert("이름을 입력하세요");
	    	return false;
	    }
	    
}
</script>

<form method="post" name="memberInfo" action="userinsert1.jsp" onsubmit="return validateForm(this);">
<table align=center>
<tr><td colspan=2 align=center height=40><b>회원가입</b><td></tr>
<tr>
<td align=right>아이디&nbsp;</td>
<td><input type="text" name="id" placeholder="꼭 입력!" required></td>
</tr>
<tr>
<td align=right>패스워드&nbsp;</td>
<td><input type="password" name="ps" required></td>
</tr>
<tr>
<td align=right>이 름&nbsp;</td>
<td><input type="text" name="name" required></td>
</tr>
<tr>
<td colspan=2 align=center height=50>
<input type="submit" value="회원가입하기">
</td>
</tr>
</table>
</form>
</body>
</html>

userinsert1 : 완료와 값 넣는 페이지

<%@page import="javax.naming.NamingException"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.PreparedStatement"%>
<%@ page import="common.DBConnection" %>
<%@ page import="java.sql.Connection" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 DB 입력 페이지</title>
</head>
<body>
<%! 
   Connection con = null; 
   PreparedStatement pstmt= null; 
%>
<%
    request.setCharacterEncoding("UTF-8");
    String id = request.getParameter("id");
    String pass = request.getParameter("ps");
    String name = request.getParameter("name");
    try{
    //DB con 객체 얻기 (DB연결)
    con = DBConnection.getConnection();
    /* out.println(con);
    out.println(id);
    out.println(pass);
    out.println(name); */
    //동적쿼리 작업
    String sql = "insert into member values (?, ? , ?,sysdate)";
    //preparedStatement 생성  
    pstmt = con.prepareStatement(sql);
    // 인파라미터 (?) 값 설정
    pstmt.setString(1,id);
    pstmt.setString(2,pass);
    pstmt.setString(3,name);
    //쿼리 실행
     int result = pstmt.executeUpdate();
     
     if(result !=0) {
    	 out.print("회원가입 완료");
    	
     }else{
    	 out.print("가입양식을 다시 작성하여 주세요");
     }
   
    }catch(SQLException e){
    	  e.printStackTrace();
   	
    }finally{
    	try{
    		if(pstmt != null) pstmt.close();
    		if(con != null) con.close();
    	}catch(Exception e){
    		  throw new RuntimeException(e.getMessage());
    	}
    	
    }
  

%>
 <br/>
 <a href="index.html">회원가입페이지</a><br/>
 <a href="userList1.jsp">회원정보페이지</a>
 
</body>
</html>

userList1 : 리스트 불러오기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가입한 회원의 정보 확인페이지</title>
</head>
<body>
<%!
	Connection con = null;
	PreparedStatement psmt = null;
	ResultSet rs = null;
%>
<%
	//connection 얻어오기
	con = DBConnection.getConnection();

	// 쿼리작성
	String sql = "select id, pass, name, regidate from member";
	
	//PreparedStatement 객체 생성
	psmt = con.prepareStatement(sql);
	
	//select 실행 => 결과값이 ResultSet
	rs = psmt.executeQuery();
	
	// 담을 그릇 필요
	String id, pass, name;
	
	if(rs.next()){
		//한 줄씩 rs는 반환 읽어올 행이 있는 지 봄
		id = rs.getString("id");
		pass = rs.getString("pass");
		name = rs.getString("name");
		out.print("id : "+ id + " pass : " + pass + " name : " + name +"<br/>");
	}
%>
</body>
</html>

세션

세션이란?

쿠키는 정보를 클라이언트에 저장 후 네트워크로 주고받기 때문에 민감한 정보를 다루기엔 위험
세션은 서버가 직접 관리하므로 민감한 정보를 다루기에 더 적합 ‘로그인’ 정보가 대표적
클라이언트가
- 1) 웹 브라우저를 통해 서버에 접속한 후
- 2) 용무를 처리하고
- 3) 웹 브라우저를 닫아 서버와의 접속을 종료하는 하나의 단위
- 즉 세션은 클라이언트가 서버에 접속해 있는 동안 그 상태를 유지하는 것이 목적

세션 설정, 확인, 삭제

유지 시간 설정

세션의 유지 시을 설정하는 방법

/WEB-INF/web.xml에서 설정 ⇒ </web-app>은 어플리케이션 의미

<session-config>
	<session-timeout>20</session-timeout>
	</session-config>
	<!-- web.xml에서의 세션의 유지 단위 : 분 -->

JSP 파일에서 session 내장 객체가 제공하는 setMaxInactiveInterval( )을 사용

<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	SimpleDateFormat dateFormat = new SimpleDateFormat("HH:mm:ss");
	
	long creationTime = session.getCreationTime(); //최초 요청 시각(세션 생성)
	String creationTimeStr = dateFormat.format(new Date(creationTime));
	
	long lastTime = session.getLastAccessedTime(); //마지막 요청 시각
	String lastTimeStr =  dateFormat.format(new Date(lastTime)); 
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Session 설정 확인</title>
</head>
<body>
<h2>Session 설정 확인</h2>
<ul>
<li>세션 유지 시간 : <%= session.getMaxInactiveInterval() %></li>
<li>세션 아이디 : <%= session.getId() %></li>
<li>최초 요청 시간 : <%= creationTimeStr %></li>
<li>마지막 요청 시각 : <%= lastTimeStr %></li>
</ul>
</body>
</html>

세션을 이용해서 로그인 + 회원가입 기능 구현

회원 한명의 정보를 담을 객체 만들기
index.html : 회원가입 페이지

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입화면</title>

</head>

<body>
<script type="text/javascript">
function validateForm(form){
        if(!form.id.value){
        	alert('아이디 입력하세요.');
        	return false;
        }	
	    if(form.ps.value ==""){
	    	alert("패스워드를 입력하세요");
	    	return false;
	    }
	    if(form.name.value ==""){
	    	alert("이름을 입력하세요");
	    	return false;
	    }
	    
}
</script>

<form method="post" name="memberInfo" action="userinsert1.jsp" onsubmit="return validateForm(this);">
<table align=center>
<tr><td colspan=2 align=center height=40><b>회원가입</b><td></tr>
<tr>
<td align=right>아이디&nbsp;</td>
<td><input type="text" name="id" placeholder="꼭 입력!" required></td>
</tr>
<tr>
<td align=right>패스워드&nbsp;</td>
<td><input type="password" name="ps" required></td>
</tr>
<tr>
<td align=right>이 름&nbsp;</td>
<td><input type="text" name="name" required></td>
</tr>
<tr>
<td colspan=2 align=center height=50>
<input type="submit" value="회원가입하기">
</td>
</tr>
</table>
</form>
</body>
</html>

MemberDTO.java

package membership;
// 회원 한 명의 정보를 담을 객체
public class MemberDTO {
	//멤버 변수 선언
	private String id;
	private String pass;
	private String name;
	private String regidate;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPass() {
		return pass;
	}
	public void setPass(String pass) {
		this.pass = pass;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getRegidate() {
		return regidate;
	}
	public void setRegidate(String regidate) {
		this.regidate = regidate;
	}
	
	
}

MemberDAO.java

package membership;
// 데이터베이스 연결/동적인 기능(CRUD) 구현

import common.JDBConnection;

public class MemberDAO extends JDBConnection{
	public MemberDAO() {}
	public MemberDAO(String drv, String url, String id, String pw) {
		
		super(drv, url, id, pw);
	}
	public MemberDTO getMemberDTO(String id, String pass) {
		MemberDTO dto = new MemberDTO();
		String sql ="SELECT * FROM member WHERE id=? AND pass=?";
		
		try {
			//쿼리 실행
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, id);
			pstmt.setString(2, pass);
			rs = pstmt.executeQuery();
			
			//결과 처리
			if(rs.next()) {
				dto.setId(rs.getString("id"));
				dto.setPass(rs.getString("pass"));
				dto.setName(rs.getString("name"));
				dto.setRegidate(rs.getString(4));
			}
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		return dto;
	}
}

LoginForm.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>
<%= request.getAttribute("LoginErrMsg") == null ? "" : request.getAttribute("LoginErrMsg") %>
<% 
if (session.getAttribute("UserId") == null) {
%>

<h2>로그인 페이지</h2>
<script type="text/javascript">
function validateForm(form) {
    if (!form.id.value) {
        alert('아이디를 입력하세요.');
        return false;
    }
    if (!form.ps.value) {
        alert('패스워드를 입력하세요.');
        return false;
    }
}
</script>

<form method="post" action="LoginProcess.jsp" name="LoginFrm" onsubmit="return validateForm(this)">
    <table align="center">
        <tr>
            <td colspan="2" align="center" height="40"><b>회원가입</b></td>
        </tr>
        <tr>
            <td align="right">아이디&nbsp;</td>
            <td><input type="text" name="id" placeholder="입력!" required></td>
        </tr>
        <tr>
            <td align="right">패스워드&nbsp;</td>
            <td><input type="password" name="ps" required></td>
        </tr>
        <tr>
            <td colspan="2" align="center" height="50">
                <input type="submit" value="로그인하기">
            </td>
        </tr>
    </table>
</form>
<% 
} else { //로그인 상태
    String userName = (String) session.getAttribute("UserName");
%>
    <%= userName %> 회원님, 로그인 하셨습니다. <br/>
    <a href="LogOut.jsp">로그아웃</a>
<% } %>
</body>
</html>

LoginProcess

<%@ page import="membership.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
	String userId = request.getParameter("id");
	String userPwd = request.getParameter("ps");
	
	//회원테이블 DAO를 통해 로그인 페이지에서 입력한 아이디의 회원정보를 MemberDTO에 담자
	MemberDAO dao = new MemberDAO(application);
	MemberDTO user = dao.getMemberDTO(userId, userPwd);
	dao.close();
	
	//로그인 성공 여부에 따른 처리
	if(user.getId()!=null){
		//로그인 성공
		session.setAttribute("UserId", user.getId()); //memberDTO에서 가져옴
		session.setAttribute("UserName", user.getName());
		response.sendRedirect("LoginForm.jsp");
	}
	else{
		//로그인 실패
		request.setAttribute("LoginErrMsg", "로그인 오류입니다.");
		request.getRequestDispatcher("LoginForm.jsp").forward(request, response);
		
	}
%>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 처리 페이지</title>
</head>
<body>

</body>
</html>

Logout

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	session.invalidate();
	response.sendRedirect("LoginForm.jsp");
%>

총 정리

📌 1. 회원가입(index.html) ⇒ ok
2. 회원 가입 처리(DB) - userInsert.jsp ⇒ ok
3. 회원 정보확인(DB) - userList.jsp
4. 로그인 - LoginForm.jsp(Link.jsp 포함)
5. 로그인 처리 - LoginProcess.jsp(DTO, DAO에 사용자 정보 조회 select * from member)
(입력한 아이디와 패스워드의 사용자가 member테이블에 있는 회원인지 여부 확인)
6. 만약 회원이라면 로그인 성공(UserList.jsp 페이지) ⇒ LogOut.jsp 포함하여 처리
실패하면 로그인페이지(LoginForm.jsp) 이동

회고

확실히 db를 연결하니까 뭔가 진짜 페이지를 만드는 기분이다. 대신 해야할 것도 많고 드라이버도 넣어줘야 하고 db이름이랑 비밀번호도 다 기억 해둬야하고 서버 잠깐 만지는 느낌? 그리고 여태 배운게 왜 배웠구나 납득이 되는 연결이 되는 기분이다.

GoldenDusk

내 지식을 기록하여, 다른 사람들과 공유하여 함께 발전하는 사람이 되고 싶다. 참고로 워드프레스는 아직 수정중

이전 포스트

멀티캠퍼스 백엔드 과정 33일차[7월 18일] -JDBC 설정 및 데이터 베이스 연결

다음 포스트

멀티캠퍼스 백엔드 과정 34일차-35일차[7월 19일-20일] - 로그인, 회원가입, 게시글 CRUD

1개의 댓글

happy

2023년 7월 25일

좋은 글이네요. 공유해주셔서 감사합니다.

답글 달기