UIUX _국비과정 0620 [JSP 쿠키, 오라클DB 연결]

백만두 2024. 7. 8. 21:29

2024. 7. 8. 21:29

복습할 것)

제이쿼리 선택자 구성 방식

자바 컬렉션

🍪 Cookie

공지사항 팝업을 만들어보기

‘하루동안 열지 않기’ 체크 박스, 닫기 버튼 구현
제이쿼리 적용

Ajax → 자바스크립트를 통해 서버와 통신할 수 있게 하는 개념

$.ajax({
url : './PopupCookie.jsp',
type : 'get',
data : {inactiveToday : chkVal}, // 파라메터값 (키 : value) 형식
dataType : "text", // 어떤 형태로 데이터를 받을 건지 (쿠키는 대부분 text형식으로 받음)
success : function(resData) { // function안에 있는 매개변수의 이름은 어떤 것이든 상관없다

	if (resData != '') location.reload();

	}
});

url - 이동할 페이지이다. 이동한 페이지에서 데이터를 처리하고 다시 현페이지로 돌아온다. 필요한 경우 데이터를 전달할 수 있다.

type - 전달 방식을 의미한다. GET/POST가 있다.

data - 데이터 처리를 할 페이지에게 전달할 정도이다. 내가 전달하고 싶은 파라메터값. Array 형식일 때 위와 같이 적으면 된다.

dataType - 전달받는 인자의 형식.

success - 데이터 처리가 성공했을 경우 해당 함수(함수가 아니어도 되는듯 하다)를 실행한다. json으로 처리할 경우 데이터를 처리하는 페이지에서 전달해주는 값이 인자로 받아진다.

공지사항 팝업 창

PopupMain.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
	<%
	
	String popupMode = "on";
	
	Cookie[] cookies = request.getCookies();
	if (cookies != null){
		for (Cookie c : cookies){
			String cookieName = c.getName();
			String cookieValue = c.getValue();
			
			if (cookieName.equals("PopupClose")){
				popupMode = cookieValue;
			}
		}
	}
	%>
	
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
div#popup {
	position: absolute;
	top: 100px;
	left: 50px;
	color: yellow;
	width: 270px;
	height: 100px;
	background-color: gray;
    display: <% if (popupMode.equals("on")) { %>block<% } else { %>none<% } %>;
}

div#popup>div {
	position: relative;
	background-color: #ffffff;
	top: 0px;
	border: 1px solid gray;
	padding: 10px;
	color: black;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
/* 닫기 버튼 */
$(function(){
	$("#closeBtn").click(function(){
		$("#popup").hide();
		
		/* 하루동안 열지 않음 버튼 체크 유무 알기 */
		/* 사용자 pc에서 그 정보를 보관하고 있어야 함 -> 그것이 쿠키 */
		/* 어떤 정보를 서버에서 관리할지, 쿠키로 관리할지 판단해야한다. */
		/* 체크가 되어있으면 1 안되어 있으면 null값 */
		let chkVal = $("input:checkbox[id=inactivetoday]:checked").val();
		
		
		// ajax
		// 서버에 요청
		// 페이지 이동이 일어나지 않는다. 새로고침이 일어남, main 화면에서 처리
		$.ajax({
			url : './PopupCookie.jsp', 
			type : 'get',
			data : {inactivetoday : chkVal},
			dataType : "text",
			success : function(resData) { // resData => "쿠키 : 하루동안 열지 않음"
				if (resData != ''){
					console.log(resData);  
					location.reload(); 
				}
			}
		});
	});
});
    
</script>

</head>
<body>

<%
// 태그 자체를 실행문으로 전체 처리
if(popupMode.equals("on")) {
%>

	<div id="popup">
		<h2 align="center">공지사항 팝업입니다.</h2>
		<div align="right">
			<form name="popFrm">
				<input type="checkbox" id="inactivetoday" value="1" /> 하루 동안 열지 않음
				<input type="button" value="닫기" id="closeBtn" />
			</form>
		</div>
	</div>
	<% } %>

</body>
</html>

PopupCookie.jsp

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

<%
    String chkval = request.getParameter("inactivetoday");
    
    if (chkval != null && chkval.equals("1")){
    	Cookie cookie = new Cookie("PopupClose", "off");
    	cookie.setPath("/");
    	cookie.setMaxAge(3600 * 24);
    	response.addCookie(cookie);
    	// ajax 통신을 통해 요청된 text 타입 데이터를 보내주는 역할 (여기서의 역할)
    	out.println("쿠키 : 하루 동안 열지 않음");
    } else {
    	out.println("쿠키 설정 안됨");
    }
    %>

자동로그인 기능 구현해보기

+쿠키를 적용할 만한 기능들 검색해보기

페이지 이동 방식 → jsp, js에서 제공 ( js - location 객체 )

utils 패키지에 페이지 이동 방식에 대한 내용 정의

history, location 객체가 제공해주기 때문에 이를 이용할 것이다.

페이지를 이동하는 과정에서 페이지 이동 이유, 정보, 문제점 등을 메세지 창을 통해 전달

js alert 창을 이용해 제공.

out.print("<h1 style = 'color : red'>로그인 실패</h1>");

기능을 그대로 수행해준다.

IdsaveProcess 페이지에서는 아이디 저장하기 체크박스에 값이 있으면 쿠키를 만들어주고

체크가 안된 상태로 넘어온다면 쿠키를 만들지 않는다

가능하면 기능은 분리해서 사용

java 파일로 만든 기능을 jsp 파일에서 사용한다.

response 객체의 타입 → HttpServletResponse response

request 객체의 타입 → HttpServletRequest request

아이디 저장 체크 후 로그인에 성공하면 저렇게 아이디가 저장되고 쿠키가 생기는 것을 확인할 수 있다.

아이디 저장을 체크하지 않고 로그인에 성공하면 쿠키가 생기지 않는다.

그런데 이렇게 하면 뒤로가기를 했을 때 사용자가 입력했던 정보들이 다 노출된다.

이걸 어떻게 해결하지

뒤로 갔을 때 새로고침이 되는 함수를 만들어서.. (?)

페이지 뒤로 가기, 앞으로 가기 경로를 결정해주는 JSFunction.java 파일

package utils;

import jakarta.servlet.jsp.JspWriter;

public class JSFunction {
	// location.href = "페이지 경로" -> 특정페이지 지정
	// history.back(), history.forward() -> 뒤로가기, 앞으로 가기

	public static void alertLocation(String msg, String url, JspWriter out) {
		try {
			String script = ""
					+ "<script>"
					+ "alert('" + msg + "');" // alert('hello')
					+ "location.href = '" + url + "'"
					+ "</script>";
			
			out.print(script);
					
		}catch(Exception e) {
			
		}
	}

	public static void alertBack(String msg, JspWriter out) {
		try {
			String script = ""
					+ "<script>"
					+ "alert('" + msg + "');"
					+ "history.back();"
					+ "</script>";
					
			out.print(script);
			
		}catch(Exception e) {
			
		}

	}
}

쿠키를 생성, 삭제, 정보를 확인하는 CookieManager.java 파일

package utils;

import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public class CookieManager {
	
	// 쿠키 생성
	public static void makeCookie(HttpServletResponse response, String cName, String cValue, int cTime) {
		Cookie cookie = new Cookie(cName ,cValue );
		cookie.setPath("/"); 
		cookie.setMaxAge(cTime); 
		response.addCookie(cookie);
	}
	
	// 쿠키 삭제
	public static void deleteCookie(HttpServletResponse response, String cName) {
		makeCookie(response, cName, "", 0);
	}
	
	// 쿠키 정보 확인
	public static String readCookie(HttpServletRequest request, String cName) {
		
		String cookieValue = "";
		
		Cookie[] cookies = request.getCookies(); 
		if (cookies != null) {
			for (Cookie c : cookies) {
				String cookieName = c.getName();
				if (cookieName.equals(cName)) {
					cookieValue = c.getValue();
				}
			}
		}
		
		return cookieValue;
	}
}

IdSaveMain.jsp

<%@page import="utils.CookieManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
	<%
	String loginId = CookieManager.readCookie(request, "loginId"); // "must" 받아오기
	
	String cookieCheck = "";
	if (!loginId.equals("")){
		cookieCheck = "checked";
	}
	
	%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<form action = "IdsaveProcess.jsp" method = "post">
		아이디 : <input type="text" name="user_id" value="<%=loginId %>" /> 
		<input type="checkbox" name="save_check" value="Y" <%= cookieCheck %> /> 아이디 저장하기 
		<br /> 
		패스워드 : <input type="text" name="user_pw" /> 
		<br /> 
		<input type="submit" value="로그인하기" />
	</form>

</body>
</html>

IdsaveProcess.jsp

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

<%
String user_id = request.getParameter("user_id");
String user_pw = request.getParameter("user_pw");
String save_check = request.getParameter("save_check");

if (user_id.equals("must") && user_pw.equals("1234")){
	// 로그인 성공
	if (save_check != null && save_check.equals("Y")){
		// 쿠키 생성
		// 별도의 클래스를 만들어서 분리
		CookieManager.makeCookie(response, "loginId", user_id, 86400);
	}else{
		// 쿠키 삭제
		CookieManager.deleteCookie(response, "loginId");
	}
	
	JSFunction.alertLocation("로그인에 성공했습니다.", "IdSaveMain.jsp", out);
	
}else{
	// 로그인 실패 
	JSFunction.alertBack("로그인에 실패했습니다.", out);
}
%>

오라클데이터베이스를 활용해서 프로그램 만들기

(SQL)

system에서 musthave 1234 계정만들기,

권한 부여

create user musthave identified by 1234;

grant connect,resource,dba
to musthave;

테이블 만들기, 값 넣기 (SQL)

create table member (
id varchar2(10) not null,
pass varchar2(10) not null,
name varchar2(30) not null,
regidate date default sysdate not null,
primary key(id)
);

create table board (
num number primary key,
title varchar2(200) not null,
content varchar2(2000) not null,
id varchar2(10) not null,
postdate date DEFAULT sysdate not null,
visitcount number(6)
);

alter table board
add constraint board_mem_fk foreign key (id)
REFERENCES member(id);

-- 시퀀스 객체
create sequence seq_borad_num
increment by 1
start with 1
minvalue 1;

insert into member (id, pass, name) values ('musthave', '1234', '머스트해브');

insert into board (num, title, content, id, postdate, visitcount) 
   values (seq_borad_num.nextval, '제목1입니다', '내용1입니다', 'musthave', sysdate, 0);

commit;

ojdbc11 설치

모든 암세포는 맥북으로 오라클을 쓰는 순간 자라난다

jsp로 돌아와서

jdbcTest.jsp - 오라클와 연결이 되는지 확인하기

<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Driver"%>
<%@page import="java.net.ConnectException"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import = "java.sql.*" %>
    <%
    //1. Connection 객체 생성
    Connection conn = null;
    
    // 이 정보를 이용해서 db에 접속
    String driver ="oracle.jdbc.driver.OracleDriver";
    String url = "jdbc:oracle:thin:@localhost:1521:XE"; // orcl 로 바꾸라카는데 나는 xe로 해야함.
    
    Boolean connect = false;
    
    try {
    	// 2. DriverManager 객체 생성
    Class.forName(driver);
    	conn = DriverManager.getConnection(url, "musthave", "1234");
    	
    	connect = true;
    	
    	// db 연결 종료
    	conn.close();
    	
    }catch(Exception e) {
    	
    }
    
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<% if (connect == true) { %>
<h1> 연결성공 </h1>
<%}else{ %>
      <h1>연결 실패</h1>
<% } %>
</body>
</html>

자바에서 DB와 연결하기 위해 사용하는 객체

Connection
statement (쿼리문 쓸 때 필요한 객체, 많이 안쓴다.)
PreparedStatement (쿼리문 사용할 떄 필요한 객체 많이쓴다. 쿼리문을 쓸 때 융통성이 좋다.)
ResultSet (실행된 쿼리문의 결과를 받아올 떄 필요한 객체)

자바스크립트에서 함수를 만들어 사용하듯 클래스를 만들어 다른 파일에서도 사용한다.

JDBConnect.java

package common;

import java.sql.Statement;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class JDBConnect {
	// Connection,
	// statement (쿼리문 쓸 때 필요한 객체, 많이 안쓴다.),
	// PreparedStatement (쿼리문 사용할 떄 필요한 객체 많이쓴다. 쿼리문을 쓸 때 융통성이 좋다.),
	// ResultSet (실행된 쿼리문의 결과를 받아올 떄 필요한 객체)

	public Connection con;
	public Statement stmt;
	public PreparedStatement psmt;
	public ResultSet rs;

	public JDBConnect() {
		String driver = "oracle.jdbc.driver.OracleDriver";
		String url = "jdbc:oracle:thin:@localhost:1521:XE";

		try {
			Class.forName(driver);
			con = DriverManager.getConnection(url, "musthave", "1234");

			System.out.println("DB 연결 성공 (기본 생성자)");

		} catch (SQLException e) {
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}

	}

	// 두번째 생성자 방식 - 매개변수로 개인 정보를 숨김
	public JDBConnect(String driver, String url, String id, String pwd) {
		try {
			// JDBC 드라이버 로드
			Class.forName(driver);

			// DB에 연결
			con = DriverManager.getConnection(url, id, pwd);

			System.out.println("DB 연결 성공(인수 생성자 1)");

		} catch (SQLException e) {
			e.printStackTrace();

		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}

	}

	public void close() {

		try {
			if (con != null) {
				con.close();
			}
		} catch (Exception e) {

		}
	}
}

예외처리해서 꼭 종료까지 해야한다.

web.xml

<context-param> 라는 태그로 초기화 매개변수를 정의한다.

정의된 초기화 매개변수는 모든 서블릿과 JSP에서 ServletContext를 통해 접근가능하다.

이렇게 하면 어플리케이션의 설정정보를 중앙 집중적으로 관리할 수 있고 유지 보수가 용이하다.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="https://jakarta.ee/xml/ns/jakartaee" xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd" id="WebApp_ID" version="5.0">
  <display-name>firstjsp</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    <welcome-file>default.htm</welcome-file>
  </welcome-file-list>
  
  <context-param>
  <param-name>INIT_PARAM</param-name>
  <param-value>web.xml에 저장한 초기화 매개변수</param-value>
  </context-param>
  
  <!-- 오라클 설정정보 -->
    
  <context-param>
  <param-name>OracleDriver</param-name>
  <param-value>oracle.jdbc.driver.OracleDriver</param-value>
  </context-param>
  
  <context-param>
     <param-name>OracleURL</param-name>
     <param-value>jdbc:oracle:thin:@localhost:1521:XE</param-value>
  </context-param>
  
  <context-param>
  <param-name>OracleId</param-name>
  <param-value>musthave</param-value>
  </context-param>
  
  <context-param>
  <param-name>OraclePwd</param-name>
  <param-value>1234</param-value>
  </context-param>
  
  
</web-app>

JDBCTest2.jsp 연결을 테스트하는 파일

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%@ page import = "common.JDBConnect" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>JDBCTest1</h2>

<%
JDBConnect jdbc1 = new JDBConnect();
jdbc1.close();
%>

<h2>JDBCTest2</h2>

<%
String driver = application.getInitParameter("OracleDriver");
String url = application.getInitParameter("OracleURL");
String id = application.getInitParameter("OracleId");
String pwd = application.getInitParameter("OraclePwd");

JDBConnect jdbc2 = new JDBConnect(driver,url,id,pwd);
jdbc2.close();
%>

</body>
</html>

연결성공 !

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

'2024_UIUX 국비 TIL' 카테고리의 다른 글

UIUX _국비과정 0624 [JSP 세션의 역할, 액션태그] (0)	2024.07.10
UIUX _국비과정 0621 [커넥션풀 방식, 회원가입 폼] (0)	2024.07.09
UIUX _국비과정 0619 [JSP 문법] (0)	2024.07.08
UIUX _국비과정 0618 [톰캣 설치와 JSP 앞으로 배울 구문 맛보기] (0)	2024.07.08
UIUX _국비과정 0617 [오라클 SQL, ERD] (0)	2024.07.08

개발(자)되어가는 일지