Day43

2020. 12. 1. 09:51ㆍ교육과정/KOSMO

키워드 : JSP 기초 / JSP에서의 폼 / JSP에서 form과 DB 연동 / JSP의 기본객체 / 쿠키와 세션 / 실습 : 로그인페이지 / 실습 : 장바구니

 

 

****

 

 

 

0. JSP 기초 복습

※ JSP를 사용해야 하는 이유
(1) HTML에서 DB와 연동하기 위해 JSP를 사용해야 함
(2) HTML에는 반복문이 없기에 JAVA의 함수를 사용하고자 함

--> 자바 코딩 중간에 HTML을 삽입하여 사용 (서블릿)
--> 코드가 복잡하고 개발자 입장에서 유지보수가 어려움

==> HTML 코딩 중간에 자바를 삽입하는 JSP 방식을 도입 (서블릿의 확장)


※ JSP 실행 절차

사용자가 웹 페이지에서 jsp파일을 요청하면, 
웹서버에서는 jsp파일을 java파일로 변환, 
class파일로 컴파일하여 실행하고,
메모리에 띄우게 된다. 

다른 사용자가 같은 jsp 파일을 요청하면 이미 웹 컨테이너에서는 실행된 class파일이 있어서 보다 빠른 속도로 jsp파일의 결과를 사용자에게 제공하게 된다. 

 

 

1. JSP에서의 폼(form) - (1)


(1) 사용자가 주소창 입력 등으로 .jsp 페이지 요청(request)
(2) 웹서버에서 해당되는 .jsp 페이지의 코드를 사용자에게 응답(response)
(3) 사용자 입력값을 <form> 태그의 action 속성으로 지정한 곳에 넘겨줄 페이지 요청
(4) 입력값 데이터를 받은 수행결과 페이지를 사용자에게 응답

 

(실습)

02_SimpleForm.jsp의 사용자 입력값을 02_result.jsp로 받아오기

 

< 02_SimpleForm.jsp >

<form method="get" action="02_result.jsp">

→ form의 action 속성을 기술해준다. 

 

< 02_result.jsp > 

<%	
	String name = request.getParameter("name");
	String gender = request.getParameter("gender");
	String occupation = request.getParameter("occupation");
	String[] hobby = request.getParameterValues("hobby");
   	String txthobby = "";
	if (hobby != null) {
		for (string temp:hobby) {
			txthobby += temp + "/";
		}
	}
%>

→ 이전 화면에서 사용자 입력값 얻어오기

    (hobby는 체크박스로 여러 값을 가져올 수 있기 때문에 배열+조건문+반복문으로 처리)

 

<body>
이름 : <%= name %><br/>
성별 : <%= gender %><br/>
직업 : <%= occupation %><br/>
취미 : <%= txthobby %>
</body>

→ 얻어온 입력값을 출력

 

 

(+) form의 전송 method로 get 방식을 사용할 때는 문제 없으나, 

     post 방식을 사용할 경우 한글이 깨지는 상황이 발생한다.

    → 데이터를 변수에 담기 전에 한글처리를 먼저 할 필요가 있다.

request.setCharacterEncoding("utf-8");

 

< 전체 파일 >

02_result.jsp
0.00MB
02_SimpleForm.jsp
0.00MB

 

< 02_result.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	// 0. 한글처리
	request.setCharacterEncoding("utf-8");

	// 1. 이전 화면에서 사용자 입력값 얻어오기	
	String name = request.getParameter("name");
	String gender = request.getParameter("gender");
	String occupation = request.getParameter("occupation");
	String[] hobby = request.getParameterValues("hobby");
	
	/*
	String txthobby = "";
	if (hobby != null) {
		for (string temp:hobby) {
			txthobby += temp + "/";
		}
	}
	*/
%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> SimpleForm의 입력값 처리 </title>
</head>
<body>
<!-- 2. 얻어온 입력값을 출력 -->
이름 : <%= name %><br/>
성별 : <%= gender %><br/>
직업 : <%= occupation %><br/>
취미 : <% if (hobby != null) {
			for (int i=0; i<hobby.length; i++) { %>
	 <%= hobby[i] %>
	 <% } // end of for문 
	  }	// end of if문 	%><br/>

<!-- 예전 for문 사용시 for문
	for (int i=0; hobby != null && i<hobby.length; i++) {
	txthobby += hobby[i] + "/";
		}
 -->


</body>
</html>

< 02_SimpleForm.jsp 전체 소스 코드 >

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

<!DOCTYPE html>
<html>
<head>
<title> 폼과 서블릿 </title></head>

<body>
	<form method="post" action="02_result.jsp">
		<h4>  입력 후 전송 버튼을 누릅니다 </h4>

		이름	: <input type="text" name="name"><br/>

		성별    : <input type="radio" name="gender" value="male" checked="checked"> 남
 			   <input type="radio" name="gender" value="female"> 여 <br/>


		직업	: <select name="occupation">
						<option> programmer
						<option> web designer
						<option> white hand
						<option> people
			</select><br/>

		취미    :	 <input type="checkbox" name="hobby" value="쓰타크래프트"> 쓰타크래프트
					 <input type="checkbox" name="hobby" value="한솥밥먹기"> 한솥밥먹기
					 <input type="checkbox" name="hobby" value="멍때리기"> 멍때리기
					 <input type="checkbox" name="hobby" value="그냥있기"> 그냥있기 <br/> <br/>

		
		<input type="submit" value='전송'>
		<input type="reset" value='취소'>
	</form>
</body>
</html>

2. JSP에서의 폼(form)을 DB 연동하기

 

※ 본 작업 들어가기 전 확인해야 할 사항

(1) 외부 CSS 연결

(2) Submit 클릭시 연결될 jsp 파일을 form태그의 action 속성에서 확인

(3) 데이터 입력형태를 제어하기 위해 필요할 경우 JQuery를 이용한 유효성 검사 추가

 

※ 유지보수를 원활하게 하기 위해 View와 Model을 분리해준다. --- "1티어 방식" 이라고 함

View 화면 출력 담당 . jsp 로 작업 --->WebContent 아래 위치
Model DB 연결 담당 . java 로 작업 --->Java Resources 내의 src 패키지 아래 위치

VO : Value Object (값만 가지고 있는 객체)
DAO : Data Access Object (DB와 연결시킬 객체) ... (Model)

 

 

< 09_form.html을 1티어 방식으로 완성하기 >

<폴더 설정>

 

09_form.html에 입력된 사용자 데이터를 09_server.jsp로 전달

→ EmpVO.java와 EmpDao.java를 통해 사용자 데이터를 DB에 입력

 

< 09_server.jsp 소스 코드 일부 > 

 

(1) 이전 화면에서 사용자 입력값 얻어오기

<%
request.setCharacterEncoding("utf-8");
String empno = request.getParameter("empno");
String ename = request.getParameter("ename");
String deptno = request.getParameter("deptno");
String job = request.getParameter("job");
String sal = request.getParameter("sal");
%>

 

(2) 위의 얻어온 입력값들을 EmpVO의 멤버로 지정

<%
EmpVO vo = new EmpVO();
vo.setEmpno(Integer.parseInt(empno));
vo.setEname(ename);
vo.setDeptno(Integer.parseInt(deptno));
vo.setJob(job);
vo.setSal(Integer.parseInt(sal));
%>

 

(3) EmpDao 객체를 얻어오기

EmpDao dao = EmpDao.getInstance();

(*) EmpDao의 드라이버 연결은 싱글톤 패턴으로 구성되어 ↑위와 같은 방식으로 객체를 얻어옴

 

< EmpDao.java 소스 코드 일부 > 

public class EmpDao {

	private static EmpDao  instance;
	
	// DB 연결시  관한 변수  
		private static final String 	dbDriver="oracle.jdbc.driver.OracleDriver";
		private static final String	dbUrl	="jdbc:oracle:thin:@192.168.0.17:1521:orcl";
		private static final String	dbUser	="scott";
		private static final String	dbPass	="tiger";
		
	/*	Singleton pattern */
	private EmpDao() throws Exception {
		Class.forName( dbDriver );	
	}
	
	public static EmpDao getInstance( ) throws Exception {
		if( instance == null )
		{
			instance = new EmpDao();
		}
		return instance;
	}
}

 

:::: Singleton pattern ::::
  dbDriver 연결은 empDao() 메소드에서만 가능하며,  
  이 메소드는 private 이기 때문에 getInstance() 메소드 내에서만 접근할 수 있다.  
  getInstance() 메소드는 static으로 메모리에 먼저 올라가서 수행되므로, 
  결국 dbDriver가 연결되는 과정은 싱글톤 패턴이 된다.   
  웹이기 때문에 DB연결을 여러차례 할 필요 없이 1번만 하기 위해서 싱글톤패턴 사용

 

(4) insertEmp() 호출

<%
dao.insertEmp(vo);
%>

< EmpDao.java 소스 코드 일부 > 

public void insertEmp(EmpVO vo) throws Exception {
	Connection	con = null;	
	ResultSet rs = null;
	Statement stmt	= null;
	PreparedStatement ps = null;
	try{
		// 1. 연결객체 얻어오기
		con	= DriverManager.getConnection( dbUrl, dbUser, dbPass );
		// 2. sql 문장 만들기
		String sql		= "INSERT INTO emp (empno, ename, deptno, job, sal) VALUES (?,?,?,?,?)";  
		// 3. 전송객체 얻어오기 + ? 지정
		ps	= con.prepareStatement( sql );
		ps.setInt(1, vo.getEmpno());
		ps.setString(2, vo.getEname());
		ps.setInt(3, vo.getDeptno());
		ps.setString(4, vo.getJob());
		ps.setInt(5, vo.getSal());
			
		// 4. 전송하기
		int result = ps.executeUpdate();
		System.out.println(result + "행 성공");
			
	}catch( Exception ex ){
		throw new Exception("사원정보 ) DB에 입력시 오류  : " + ex.toString() );	
	} finally{
		if( rs   != null ) { try{ rs.close();  } catch(SQLException ex){} }
		if( stmt != null ) { try{ stmt.close(); } catch(SQLException ex){} }
		if( ps   != null ) { try{ ps.close();  } catch(SQLException ex){} }
		if( con  != null ) { try{ con.close(); } catch(SQLException ex){} }
	}
}

 

< 전체 파일 >

JSP에서의 폼(form)을 DB 연동.zip
0.00MB

< 09_form.html 전체 소스 코드>

더보기 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>회원 가입</title>
<!-- 외부 CSS 연결 -->
<link type="text/css" rel='stylesheet' href="style/09_myform.css"></style>


</head>

<body>
<form  action="09_server.jsp" method="post">
<fieldset>
<legend>기본정보</legend>
<ol>
  <li>
    <label for="empno">사번</label>
    <input id="empno" name="empno" type="text" required>
  </li>
  <li>
    <label for="ename">사원명</label>
    <input id="ename" name="ename" type="text"  required>
  </li>
  <li>
    <label for="deptno">부서번호</label>
    <input id="deptno" name="deptno" type="text" required>
  </li>  
 </ol>
</fieldset>

<fieldset>
<legend>추가정보</legend>
<ol>
  <li>
    <label for="job">업무</label> 
    <input id="job" name="job" type="text">
  </li>
  <li>
    <label for="sal">월급</label>
    <input id="sal" name="sal" type="text">
  </li>
</ol>
</fieldset>
<fieldset>
  <button type="submit"> 제출 </button> 
</fieldset>
</form>
</body>
</html>

< 09_server.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="temp.*" %>
<%
// 1. 이전 화면에서 사용자 입력값 얻어오기
	request.setCharacterEncoding("utf-8");
	String empno = request.getParameter("empno");
	String ename = request.getParameter("ename");
	String deptno = request.getParameter("deptno");
	String job = request.getParameter("job");
	String sal = request.getParameter("sal");
	
// 2. 위의 얻어온 입력값들을 EmpVO의 멤버로 지정
	EmpVO vo = new EmpVO();
	vo.setEmpno(Integer.parseInt(empno));
	vo.setEname(ename);
	vo.setDeptno(Integer.parseInt(deptno));
	vo.setJob(job);
	vo.setSal(Integer.parseInt(sal));
	
// 3. EmpDao 객체를 얻어오기
	EmpDao dao = EmpDao.getInstance();
	
// 4. insertEmp() 호출
	dao.insertEmp(vo);

%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 사원등록 </title>
</head>
<body>
	 성공적으로 입력되었지 DB에서 확인합니다.
</body>
</html>

< EmpVO.java 전체 소스 코드 >

더보기 
package temp;

public class EmpVO {
	int empno;
	String ename;
	int deptno;
	String job;
	int sal;
	
	public EmpVO() {
		
	}

	public int getEmpno() {
		return empno;
	}

	public void setEmpno(int empno) {
		this.empno = empno;
	}

	public String getEname() {
		return ename;
	}

	public void setEname(String ename) {
		this.ename = ename;
	}

	public int getDeptno() {
		return deptno;
	}

	public void setDeptno(int deptno) {
		this.deptno = deptno;
	}

	public String getJob() {
		return job;
	}

	public void setJob(String job) {
		this.job = job;
	}

	public int getSal() {
		return sal;
	}

	public void setSal(int sal) {
		this.sal = sal;
	}
	
	
	
}

< EmpDao.java 전체 소스 코드 >

더보기 
package temp;

import java.sql.*;

public class EmpDao {

	private static EmpDao  instance;
	
	// DB 연결시  관한 변수  
		private static final String 	dbDriver	=	"oracle.jdbc.driver.OracleDriver";
		private static final String		dbUrl		=	"jdbc:oracle:thin:@192.168.0.17:1521:orcl";
		private static final String		dbUser		=	"scott";
		private static final String		dbPass		=	"tiger";
		
	/*	Singleton pattern
	 	dbDriver 연결은 empDao() 메소드에서만 가능하며, 
	 	이 메소드는 private 이기 때문에 getInstance() 메소드 내에서만 접근할 수 있다. 
	 	getInstance() 메소드는 static으로 메모리에 먼저 올라가서 수행되므로,
	 	결국 dbDriver가 연결되는 과정은 싱글톤 패턴이 된다.  
	 	웹이기 때문에 DB연결을 여러차례 할 필요 없이 1번만 하기 위해서 싱글톤패턴 사용*/
	private EmpDao() throws Exception {
		Class.forName( dbDriver );	
	}
	
	public static EmpDao getInstance( ) throws Exception {
		if( instance == null )
		{
			instance = new EmpDao();
		}
		return instance;
	}
	
	public void insertEmp(EmpVO vo) throws Exception {
		Connection	con = null;	
		ResultSet rs = null;
		Statement stmt	= null;
		PreparedStatement ps = null;
		try{
			// 1. 연결객체 얻어오기
			con	= DriverManager.getConnection( dbUrl, dbUser, dbPass );
			// 2. sql 문장 만들기
			String sql		= "INSERT INTO emp (empno, ename, deptno, job, sal) VALUES (?,?,?,?,?)";  
			// 3. 전송객체 얻어오기 + ? 지정
			ps	= con.prepareStatement( sql );
			ps.setInt(1, vo.getEmpno());
			ps.setString(2, vo.getEname());
			ps.setInt(3, vo.getDeptno());
			ps.setString(4, vo.getJob());
			ps.setInt(5, vo.getSal());
			
			// 4. 전송하기
			int result = ps.executeUpdate();
			System.out.println(result + "행 성공");
			
		}catch( Exception ex ){
			throw new Exception("사원정보 ) DB에 입력시 오류  : " + ex.toString() );	
		} finally{
			if( rs   != null ) { try{ rs.close();  } catch(SQLException ex){} }
			if( stmt != null ) { try{ stmt.close(); } catch(SQLException ex){} }
			if( ps   != null ) { try{ ps.close();  } catch(SQLException ex){} }
			if( con  != null ) { try{ con.close(); } catch(SQLException ex){} }
		}
	}
	
}

 

 

 

3. 기본 객체

 

 : JSP가 java로 변환될 때 자동으로 생성되는 변수들

    ex) request, response, pageContext, session 등

   --> jsp 내에서 java 코딩 기술 할 때 변수 선언을 별도로 하지 않고도 마음대로 가져다 쓸 수 있다. 

 

(1)
기본객체 정보 중 request에서는 사용자(클라이언트) 접속 정보를 알 수 있다. 

 

(2) 리다이렉트
response를 사용하여 사용자를 다른 페이지로 이동시킬 수 있다. 

그 결과, 사용자가 페이지1을 요청했지만, 페이지2를 출력시킴 (2번 페이지가 나왔으나 속도가 빨라서 구분되지 않는 것)

 

 

(1)의 예제

<body>

요청정보 프로토콜 = <%= request.getProtocol() %> <br>
요청정보 전송방식 = <%= request.getMethod() %> <br>
요청 URI = <%= request.getRequestURI() %> <br>
컨텍스트 경로 = <%= request.getContextPath() %> <br>
서버이름 = <%= request.getServerName() %> <br>
서버포트 = <%= request.getServerPort() %> <br>

</body>

< 실행 결과 >

01_requestInfo.jsp
0.00MB

< 01_requestInfo.jsp 전체 소스 코드 >

더보기 
<%@ 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">
<title> 서버 정보 </title>
</head>
<body>

요청정보 프로토콜 = <%= request.getProtocol() %> <br>
요청정보 전송방식 = <%= request.getMethod() %> <br>
요청 URI = <%= request.getRequestURI() %> <br>
컨텍스트 경로 = <%= request.getContextPath() %> <br>
서버이름 = <%= request.getServerName() %> <br>
서버포트 = <%= request.getServerPort() %> <br>

</body>
</html>

 

 

 

(2)의 예제 -- 04_responseFirst.jsp 파일 실행

< 04_responseFirst.jsp 파일 내 코드 일부 >

<!-- #######  리다이렉트 페이지 이동  -->
<% response.sendRedirect("04_responseSecond.jsp"); %>

< 실행 결과 >

04_responseFirst.jsp
0.00MB
04_responseSecond.jsp
0.00MB

< 04_responseFirst.jsp 전체 소스 코드 >

더보기 
<%@ 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">
<title> 첫번째 페이지 </title>
</head>
<body>
		<hr><hr>
		<!-- 메인 내용 시작  -->
		
		<div id="content">
			<div class="location">
				<h3><img src="./imgs/tit_0103.gif" alt="한 &#183 일간 울릉도쟁계와 우리의 독도 영유권 확인" /></h3>
				<p> <strong> 일본의 독도 인식</strong></p>
			</div>
			<div class="content_view">
				<div class="cont_box">
					<div class="inner">
						<h4><img src="./imgs/txt_0301.gif" alt="가. 17세기 한 &#183 일 양국 정부간 교섭(울릉도쟁계) 과정을 통해 울릉도와 그 부속섬 독도가 우리나라 영토임이
 확인되었습니다." /></h4>
						<ul class="list">
							<li>17세기 일본 돗토리번(鳥取藩)의 오야(大谷) 및 무라카와(村川) 양가는 조선 영토인 울릉도에서 불법 어로행위를 하다가 1693년 울릉도에서 <a href="#" onclick="goto_page('0020105')"><strong>안용복</strong></a>을 비롯한 조선인들과 만나게 되었습니다. </li>
							<li>양가는 일본 정부(에도 막부)에 조선인들의 울릉도 도해(渡海)를 금지해달라고 청원하였고, 막부가 <span class="let02">쓰시마번(對馬藩)에</span> 조선 정부와의 교섭을 지시함에 따라 양국간 교섭이 개시되는데, 이를 ‘울릉도쟁계’라 합니다.</li>
							<li>에도 막부는 1695년 12월 25일 돗토리번에 대한 조회를 통해 “울릉도(죽도)와 독도(송도) 모두 돗토리번에 속하지 않는다”는 사실을 확인한 후(<a href="#" onclick="goto_page('0020104')"><strong>「돗토리번 답변서」</strong></a>), 1696년 1월 28일 일본인들의 울릉도 방면 도해를 금지하도록 지시하였습니다. </li>
							<li>이로써 한&#183;일 양국간 분쟁은 마무리되었고, 울릉도쟁계 과정에서 <span class="let02">울릉도와 독도가 우리나라 영토임이 확인되었습니다.</span></li>
						</ul>
						<h4><img src="./imgs/txt_0302.gif" alt="나. 1905년 시마네현 고시에 의한 독도 편입 시도 이전까지 일본 정부는 독도가 자국 영토가 아니라는 인식을 유지하고 있었으며, 이는 1877년『태정관지령』을 비롯한 일본 정부의 공식 문서를 통해 확인됩니다." /></h4>
						<ul class="list">
							<li>한 &#183; 일간 ‘울릉도쟁계’를 통해 독도가 한국 영토임이 확인된 이래, 근대 메이지 정부에 이르기까지 일본 정부는 독도가 자국 영토가 아니라는 인식을 유지하고 있었습니다. </li>
							<li>이는 1905년 시마네현 고시에 의한 일본의 독도 편입 시도 이전까지 독도가 일본 영토라고 기록한 일본 정부의 문헌이 없고, 오히려 일본 정부의 공식 문서들이 독도가 일본의 영토가 아니라고 명백히 기록하고 있는 사실을 통해 잘 알 수 있습니다.</li>
							<li>대표적으로, 1877년 메이지 시대 일본의 최고행정기관이었던 태정관(太政官)은 에도 막부와 조선 정부간 교섭(울릉도쟁계) 결과 울릉도와 독도가 일본 소속이 아님이 확인되었다고 판단하고, <span class="let02">“죽도(울릉도) 외 일도(一嶋: 독도)는 일</span>본과 관계가 없다는 것을 명심할 것을 내무성에 지시하였습니다. <a href="#" onclick="goto_page('0020107')"><strong>(『태정관지령』)</strong></a></li>
							<li>내무성이 태정관에 질의할 때 첨부하였던 지도인「기죽도약도(磯竹島略圖, 기죽도는 울릉도의 옛 일본 명칭)」에 죽도(울릉도)와 함께 송도(독도)가 그려져 있는 점 등에서 위에서 언급된 ‘죽도 외 일도(一嶋)’의 일도(一嶋)가 독도임은 명백합니다.</li>
						</ul>
						<div class="center">
							<a href="#"><img src="./imgs/img_06.gif" alt="태정관지령" /></a>
							<a href="#"><img src="./imgs/img_07.gif" alt="기죽도약도" /></a>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 메인 내용 끝  -->
		<hr><hr>


		<!-- #######  리다이렉트 페이지 이동  -->
		<% response.sendRedirect("04_responseSecond.jsp"); %>
		
		
</body>
</html>

< 04_responseSecond.jsp 전체 소스 코드 >

더보기 
<%@ 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=EUC-KR">
<title> 두번째 페이지 </title>
</head>
<body>

		<div class="content_view">
				<div class="cont_box">
					<div class="inner">
						<h4><img src="./imgs/txt_0101.gif" alt="독도에 대한 정부의 기본입장" /></h4>
						<ul class="list">
							<li>독도는 역사적, 지리적, 국제법적으로 명백한 우리 고유의 영토입니다. 독도에 대한 영유권 분쟁은 존재하지 않으며, 독도는 외교 교섭이나 사법적 해결의 대상이 될 수 없습니다.</li>
							<li>우리 정부는 독도에 대한 확고한 영토주권을 행사하고 있습니다. 우리 정부는 독도에 대한 어떠한 도발에도 단호하고 엄중하게 대응하고 있으며, 앞으로도 지속적으로 독도에 대한 우리의 주권을 수호해 나가겠습니다.</li>
						</ul>
						<div class="center">
							<a href="#"><img src="./imgs/img_01.gif" alt="동해에서 바라보는 독도 전경" /></a>
							<a href="#"><img src="./imgs/img_02.gif" alt="독도의 불 전경" /></a>
						</div>
					</div>
				</div>
			</div>


</body>
</html>

4. 쿠키와 세션 - (1)

 

쿠키 세션
- 사용자 PC에 저장
(파일로 저장할 정도가 아닐 때는 메모리에 띄우는 정도로 사용하고 소멸시킬 수도 있음)
- 로그인 데이터 변조가 가능하여 보안에 취약함
- 만료되는 유효기간이 있음
- 웹서버와 웹브라우저에서 모두 쿠키 생성 가능		 - 서버에 저장
- 쿠키보다 데이터가 안전함
- 서버에서 로그인 데이터 관리 가능
생성 : setcookie(key, value, 유효기간)
삭제 : setcookie()의 유효기간을 과거로 설정		 삭제 : 브라우저 종료시 삭제 or 서버에서 삭제

로그인시 세션만 사용할 경우 브라우저를 닫으면 매번 로그인 해줘야 한다. 

-> 따라서 세션 + 쿠키 모두 사용하여 웹 로그인하면 된다. 

  참고

* 웹 로그인시

 (1) 첫 로그인시 ... 세션, 쿠키 모두 데이터 저장

 (2) 다음 로그인부터는 쿠키의 데이터를 세션 데이터에 넣음

 (3) 쿠키 데이터가 있을 경우 로그인이 유지되는 결과가 나옴

* 웹 로그아웃시

 (1) 사용자 로그아웃시 세션, 쿠키 데이터 모두 삭제

 (2) 브라우저만 종료하고 로그아웃X 일 경우 쿠키 데이터 살아있어 재로그인 불필요

 

 

( 실습 ) - 쿠키 전송 및 전송내역 출력

 

< 01_setCookie.jsp 전체 소스 코드 >

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


<%	
	// 1. Cookie 객체 생성
	Cookie c = new Cookie("userId", "alice");	// ID, PW
	// 2. 속성 부여
	c.setMaxAge(1 * 60 * 60 * 24);	// 하루동안 유효
	// 3. 클라이언트에 쿠키 전송
	response.addCookie(c);
	
%>

<html>
<head><title>쿠키</title></head>
<body>

<b>Simple Cookie Example</b><hr>

<br><a href="01_GetCookie.jsp"> 쿠키검색 </a>

</body></html>

< 02_getCookie.jsp 전체 소스 코드 >

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


<html>
<head><title>쿠키</title></head>
<body>	

<h1>Cookie 정보 알아내기</h1>

<h4>다음은 클라이언트 브라우저의 쿠키에서 얻어온 값 : </h4><br><br>

<%	
	// 1. 클라이언트로부터 Cookie를 얻어옴 
	Cookie[] ck = request.getCookies();
	// 2. 쿠키 이름 중에 "yourid"가 있다면 그 쿠키의 값을 출력
	for (int i=0; ck != null && i<ck.length; i++){		// null point error 방지하기 위해 null 아닐 때 for문 수행하도록 작성
		if (ck[i].getName().equals("userId")){			// 쿠키에서 가져온 값이 userID와 같은지
			out.write( ck[i].getValue() + "님 접속중" );
		}
		
	}
	
%>

<br><a href="01_ChangeCookie.jsp"> 쿠키값 변경 </a><br/>
<br><a href="01_RemoveCookie.jsp"> 쿠키제거 </a>

</body></html>

 

5. 쿠키와 세션 - (2)

 

웹서버에서는 --- JSP의 Cookie 클래스 사용
웹브라우저에서는 --- JavaScript의 Cookie 객체 사용

 

쿠키의 구성 - 이름(name) : 각각의 쿠키를 구별하는 이름
- 값(value) : 해당 이름에 저장할 데이터
- 유효기간 : 쿠키가 얼마나 지속할지
- 도메인(domain) : 쿠키를 전송할 도메인
- 경로(path) : 쿠키를 전송할 요청 경로
쿠키의 생성 Cookie c = new Cookie("이름", "값");
쿠키의 저장 - 쿠키의 응갑(response)을 통해 전달
- response, addCookie(쿠키 객체);
쿠키값 읽기 Cookie[] c = request.getCookies()

 

< 쿠키 클래스가 제공하는 메소드 >

String getName()		쿠키의 이름을 얻음
String getValue()		쿠키의 값을 얻음
void setValue(String name)	쿠키의 값을 지정
void setDomain(String pattern)	이 쿠키가 전송될 서버의 도메인을 지정
String getDomain()		쿠키의 도메인을 얻음
void setPath(String path)	쿠키를 전송할 경로(디렉토리)를 지정
String getPath()		쿠키의 전송 경로를 얻음
void setMaxAge(int expire)	쿠키의 유효기간을 초 단위로 지정(0을 지정하면 쿠키 삭제됨)
int getMaxAge()			쿠키의 유효기간을 얻음

 

< 쿠키(Cookie) 보안 >

도메인 - 쿠키를 생성한 사이트 외의 다른 사이트로 연결할 때에는 쿠키를 전송하지 않는다. 
- "www.somehost.com"에서 생성된 쿠키를 "mail.somehost.com"이나 "cafe.somehost.com"에서 사용하고자 할 때 도메인을 지정한다.
- cookie.setDomain( ".somehost.com" );
경로 - 기본적으로 쿠키를 생성하는 파일의 위치를 기준으로, 해당 경로와 하위 경로에서만 쿠키를 전송
- 다른 경로에 쿠키를 전달하기 위해 지정
유효 기간 - 기본적으로 쿠키는 웹 브라으저를 닫으면 자동 삭제

 

< 세션(session) >

- 웹 컨테이너는 기본적으로 필요한 정보를 저장할 수 있도록 하나의 웹 브라우저당 하나의 세션을 생성한다.
- 쿠키가 클라이언트의 웹 브라우저에 저장되는 반면, 세션은 오직 서버에 저장된다. 
- 쿠키는 String만 저장하는 반면, 세션은 Object 객체를 저장한다. 
- 인증된 사용자 정보를 유지하기 위해, 쿠키보다는 세션을 많이 사용한다. 
- 기본적으로 <%@ page sessioin="true" %>를 기본값으로 하여 생성된다. 

 

 

 

클라이언트 쪽에 쿠키값으로 JSessionID를 가지고 있음

서버로 쿠키값을 계속 보내어, 서버에 있는 sessionID와 같은 속성들을 가져옴

   (속성에 ID, 장바구니를 비롯한 데이터가 들어있음)

 

같은 ID로 여러 클라이언트에서 다중접속하더라도, 

서버의 쿠키에 있는 Value값이 달라서 각각의 유저를 구분 가능하다. 

 

< session 기본 객체가 제공하는 메소드 >

void setAttribute(String name, Object value)	세션에 속성값 저장
Object getAttribute(string name)		세션에서 해당 이름의 속성값 가져오기

void removeAttribute(String name)		세션에서 해당 이름의 속성을 제거하기
void invalidate()				세션을 무효화하기

String getId()					세션 고유 ID를 가져오기
long getCreationtime()				세션이 생성된 시간을 가져오기 (1970-01-01 이후의 milisecond)
long getLastAccessedTime()			웹 브라우저가 마지막으로 세션에 접근한 시간을 가져오기
						(1970-01-01 이후의 milisecond)

 

사용 예 ) 장바구니만 비우고자 할 때 : removeAttribute 사용

            로그아웃과 동시에 장바구니도 비우고자 할 때 : invalidate 사용

 

 

 

※ 세션을 생성하는 다른 방식 

HttpSession sess = request.getSession();

 : 생성된 세션이 있으면 그 세션을 리턴하고, 없으면 새롭게 세션을 생성해서 리턴

HttpSession sess = request.getSession(false);

 : 생성된 세션이 있으면 그 세션을 리턴하고 없으면 null 리턴

HttpSession sess = request.getSession(true);

 : 무조건 생성하여 리턴

 

 

※ 세션의 유효기간 

 : 일정 시간이 지나면 세션은 자동 종료 (WEB-INF / web.xml에서 지정 가능)

<session-config>
	<session-timeout> 50 </session-timeout>
</session-config>

 

6. 쿠키와 세션 - (3) 실습 : 로그인 페이지

 

 

(1) 클라이언트가 LoginForm.jsp 페이지 요청 (접속)

     → "login" 버튼 클릭시 사용자 입력값을 LoginService.jsp로 전달

<form action="LoginService.jsp" method="get">
사용자: <input name='User' type='text'><br/>
비밀번호: <input name='Pass' type='password'><br/>
<input type='submit' value='login'> 
</form>

 

(2) LoginService.jsp에서 사용자 입력값과 DB에 저장된 값이 동일한지 확인 후 해당되는 페이지로 연결

    → 두 값 일치할 경우,

        세션에 "id" 라는 Key값으로 id 데이터 저장 및 MainPage.jsp 페이지로 Redirect 시킴

    → 두 값이 일치하지 않을 경우,

        LoginForm.jsp 페이지로 Redirect시켜 되돌려 보냄

// 이전화면 폼에서 넘겨받는 값
String user = request.getParameter("User");
String pass = request.getParameter("Pass");
			
// user, password가 같을 때 로그인 성공, 그렇지 않으면 로그인 실패
if( ( user.equals(saveUser) ) && ( pass.equals(savePass) ) ){
	// #2. 세션에 "id"라는 이름에 변수 user 값을 저장
	session.setAttribute("id", user);
	// #1. 로그인 성공하면 바로 MainPage.jsp를 요청
	response.sendRedirect("MainPage.jsp");
} else {

	// #1. 로그인에 실패하면 바로 LoginForm.jsp을 요청
	response.sendRedirect("LoginForm.jsp");
}

 

(3) 세션에 "id" 라는 Key값으로 저장된 value값을 얻어와서 화면에 출력하기 위한 변수로 지정한다. 

//# 1."id"로 저장된 세션값을 얻어온다.
Object obj = session.getAttribute("id");

//# 2. 값이 null이라면 LoginForm.jsp로 페이지 이동
if (obj == null) {
	response.sendRedirect("LoginForm.jsp");
	return;
}
	
//# 3. null이 아니라면 String 형변환하여 변수에 지정
String user = (String)obj;

★ String obj = (String)session.getAttribute("id"); 
    ==> null일 경우 String은 null point Error 발생할 수 있어 굳이 String 사용 X 

 

 

< LoginForm.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<html>
<head>
<title> 로그인창 </title>
</head>
<body>

<h3>로그인 확인하기 </h3> 
<form action="LoginService.jsp" method="get">
사용자: <input name='User' type='text'><br/>
비밀번호: <input name='Pass' type='password'><br/>
<input type='submit' value='login'> 
</form>

</body>
</html>

< LoginService.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<html>
<head>
<title> 로그인확인 </title>
</head>
<body>
<%

	// 실제로는 DB에서 가져와야하는 값
	String saveUser = "alice";
	String savePass = "1357";
	
	// 이전화면 폼에서 넘겨받는 값
	String user = request.getParameter("User");
	String pass = request.getParameter("Pass");
			
	// user, password가 같을 때 로그인 성공, 그렇지 않으면 로그인 실패
	if( ( user.equals(saveUser) ) && ( pass.equals(savePass) ) ){
		// #2. 세션에 "id"라는 이름에 변수 user 값을 저장
		session.setAttribute("id", user);
		// #1. 로그인 성공하면 바로 MainPage.jsp를 요청
		response.sendRedirect("MainPage.jsp");
	} else {

		// #1. 로그인에 실패하면 바로 LoginForm.jsp을 요청
		response.sendRedirect("LoginForm.jsp");
	}			
%>
	
</body>
</html>

< MainPage.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="temp.*" %>
<%
// 1. 이전 화면에서 사용자 입력값 얻어오기
	request.setCharacterEncoding("utf-8");
	String empno = request.getParameter("empno");
	String ename = request.getParameter("ename");
	String deptno = request.getParameter("deptno");
	String job = request.getParameter("job");
	String sal = request.getParameter("sal");
	
// 2. 위의 얻어온 입력값들을 EmpVO의 멤버로 지정
	EmpVO vo = new EmpVO();
	vo.setEmpno(Integer.parseInt(empno));
	vo.setEname(ename);
	vo.setDeptno(Integer.parseInt(deptno));
	vo.setJob(job);
	vo.setSal(Integer.parseInt(sal));
	
// 3. EmpDao 객체를 얻어오기
	EmpDao dao = EmpDao.getInstance();
	
// 4. insertEmp() 호출
	dao.insertEmp(vo);

%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 사원등록 </title>
</head>
<body>
	 성공적으로 입력되었지 DB에서 확인합니다.
</body>
</html>

 

7. 쿠키와 세션 - (4) 실습 : 장바구니

 

 

< tv-samsung-1020.jsp 소스 코드 일부 >

<form method='post' action='Cart.jsp'> 
<input type='hidden' name='id' value="1020"> 
<input type='hidden' name='name' value="삼성 TV CT 14R1"> 
<input type='hidden' name='price' value="147000"> 
<input type='submit' value="장바구니"> 
</form>

--> submit 버튼 클릭하면 id, name, price의 value가 Cart.jsp로 전달된다. 

 

< Cart.jsp 소스 코드 일부 >

// 1. Form의 값(hidden값) 넘겨받기 ( id, name, price )
id = request.getParameter("id");
name = request.getParameter("name");
price = Integer.parseInt(request.getParameter("price"));

// 2. 세션의 cart 속성을 얻어온다. 
Object obj = session.getAttribute("cart");

// 3. 만일 null이면 ArrayList 객체 새로 생성하고 그렇지 않으면 ArrayList 변수(glist)에 지정
if (obj == null) {
	glist = new ArrayList();
} else {
	glist = (ArrayList)obj;
}

// 4. 1번의 값들을 Goods 객체로 생성후 ArrayList 에 추가
Goods g = new Goods(id, name, price);
glist.add(g);

// 5. 세션에 cart 라는 이름에 ArrayList를 저장
session.setAttribute("cart", glist);

--> 장바구니에 담고자 하는 정보가 세션에 cart라는 이름으로 저장된다. 

 

[<a href="Buy.jsp">구입하기</a>]

--> 구입하기 버튼을 클릭하면 Buy.jsp를 요청한다. 

 

 

< Buy.jsp 소스 코드 일부 >

// 1. 세션에서 지정한 cart 속성값을 얻어온다
Object obj = session.getAttribute("cart");

// 2. 위의 값이 null 이면 리턴하고, 그렇지 않으면 glist 에 세션의 값을 지정
if (obj == null) {
	return;
} else {
	glist = (ArrayList)obj;
}

// 3. 세션에서 속성을 제거한다
session.removeAttribute("cart");

--> Buy.jsp의 결과로 장바구니에 저장된 속성값들을 제거하여 장바구니를 비우게 된다. 

 

 

< wshop.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<html><head><title>우리 쇼핑 몰</title></head> 
<body> 
<h2>쇼핑 몰</h2> 
 
<h3>가전 제품</h3> 
<ul>
<li><a href='tv-samsung-1020.jsp'>삼성 R14 텔레비젼</a> </li>
<li><a href='ref-lg-2072.jsp'>LG 냉장고</a> </li>
</ul>
</body> 
</html>

< Goods.java 전체 소스 코드 >

더보기 
package shop.cart;

/*
 * 이 파일은 Java Resources / src 밑에 있어야한다.
 */
public class Goods { 
	private String  id;	 
	private String  name; 
	private int     price; 
	 
	public Goods(String id, String name, int price) { 
		this.id = id; 
		this.name = name; 
		this.price = price; 
	} 
		 
	public void setPrice(int price) { 
		this.price = price; 
	} 
		 
	public String getId() { 
		return id; 
	} 
	 
	public String getName() { 
		return name; 
	} 
	 
	public int getPrice() { 
		return price; 
	}	 
}

< ref-lg-2072.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<html> 
<head><title>우리 쇼핑몰 </title></head> 
<body> 
 
<table><tr><td><img src='imgs/2072.gif' width='180'> 
 
</td><td> 
 
 
문을 자주 열어도, 음식을 많이 채워도, 
역시 LG 싱싱특급~ 
- 용량 : 500L (냉장 : 360L, 냉동 : 140L) 
- 신감각 가죽 무늬 
- 더욱 효율적인 내부 공간 
- 얼듯 말듯 싱싱고 
- 유러피안 아치 디자인 
- 레일 부착 분리형 생생 야채실 
- CFC-FREE 환경 친화 설계 
- 안전 강화 유리 선반 
- 광촉매 파워 탈취 
- 인체 공학적 설계 
- 방음 보강으로 저소음 설계 
- 초절전 설계 
- 360。 이동용 회전 바퀴 
- 색상 : 진미색 
- 에너지 소비 효율 : 1등급 
- 소비 전력 : 55 kwh/월 
- 크기 : 831 x 1,785 x 699mm 
 
</table> 
 
663,600 원 
<form action='Cart.jsp' method='post'> 
<input type='hidden' name='id' value="2072"> 
<input type='hidden' name='name' value="LG 냉장고 R-B50CF"> 
<input type='hidden' name='price' value="663600"> 
<input type='submit' value="장바구니"> 
</form> 
</body>

< tv-samsung-1020.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<html> 
<head><title> 우리 쇼핑몰 </title></head> 
<body> 
 
<table><tr><td><img src='imgs/1020.jpg' width='180'> 
 
</td><td> 
^^상품설명^^ 
*14" 화면 명품 플러스 
*절약형 절전 TV 
*Dual스피커 채용의 고감각 디자인 
(측면Ear Type)  
*초절전 버튼(대기 소비 전력 Zero) 
*A/V 입력 단자: 후1 
*다기능 간단 리모컨(VTR 조작기능)  
*크기: 380 X 325 X 381(mm) 
</td></tr></table> 
 
<pre> 
[[ 특징 ]] 
*절전 스위치를 내장한 초절전 TV:  
대기 소비전력을 0으로 낮추어서 TV 평균 사용 기간인 
7년이 지나면 14인치 TV 1대를 구입할 수 있는 금액을 
아낄 수 있습니다.  
(1일 6시간 시청기준, 월 500KW이상 사용 가정의 경우)  
(본 제품은 에너지 절약마크 획득 제품입니다 )  

*고감각 디자인:  
DUAL 스피커를 채용한 미려한 디자인으로 어디서나 잘 
어울리는 고감각 디자인 제품입니다.  

*다기능 간단 리모컨 채용:  
TV와 VTR을 겸용으로 사용할수 있는 인체공학적 간단 리모컨을 
채용하고 있습니다. 
 
 
</pre> 
147,000 원 
<form method='post' action='Cart.jsp'> 
<input type='hidden' name='id' value="1020"> 
<input type='hidden' name='name' value="삼성 TV CT 14R1"> 
<input type='hidden' name='price' value="147000"> 
<input type='submit' value="장바구니"> 
</form> 
 
</body> 
</html>

< Cart.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ page import="java.util.*" %>
<%@ page import="shop.cart.Goods" %> 
<% 
	String id="";
	String name ="";
	int price=0; 

	ArrayList<Goods> glist = null;

	request.setCharacterEncoding("utf-8");
	
	// 1. Form의 값(hidden값) 넘겨받기 ( id, name, price )
	id = request.getParameter("id");
	name = request.getParameter("name");
	price = Integer.parseInt(request.getParameter("price"));
	// 2. 세션의 cart 속성을 얻어온다. 
	Object obj = session.getAttribute("cart");
	// 3. 만일 null이면 ArrayList 객체 새로 생성하고 그렇지 않으면 ArrayList 변수(glist)에 지정
	if (obj == null) {
		glist = new ArrayList();
	} else {
		glist = (ArrayList)obj;
	}
	// 4. 1번의 값들을 Goods 객체로 생성후 ArrayList 에 추가
	Goods g = new Goods(id, name, price);
	glist.add(g);
//	glist.add(new Goods(id, name, price));
	// 5. 세션에 cart 라는 이름에 ArrayList를 저장
	session.setAttribute("cart", glist); 
%>		 
		 
<html> 
<body bgcolor=white>
<%= name %> 을 구입하셨습니다.
 
<br><br><br>

<table>
<tr bgcolor="#e7a068"><th>상품명</th>
<th>가격</th></tr>

<%
		int n = glist.size(); 
		int sum = 0; 
		for(int i=0; i < n; i++) { 
			Goods goods = (Goods) glist.get(i); 
			int gp = goods.getPrice(); 
			sum += gp; 
%>
			<tr><td align="center"> <%= goods.getName() %> </td>
				<td align="right"> <%= gp %> </td></tr>
<%
		} 		 
%>

<tr bgcolor="#e7a068"><td colspan="2" align="right"> 총액 : <%= sum  %></td></tr>
</table>

<br/><br/>
[<a href="wshop.jsp">쇼핑하러 가기</a>]
[<a href="Buy.jsp">구입하기</a>]

</body></html>

< Buy.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ page import="shop.cart.Goods" %> 
<%@ page import="java.util.*" %>

<%
	ArrayList<Goods> glist = null; 

	request.setCharacterEncoding("utf-8"); 
	
	// 1. 세션에서 지정한 cart 속성값을 얻어온다
	Object obj = session.getAttribute("cart");
	// 2. 위의 값이 null 이면 리턴하고, 그렇지 않으면 glist 에 세션의 값을 지정
	if (obj == null) {
		return;
	} else {
		glist = (ArrayList)obj;
	}
	// 3. 세션에서 속성을 제거한다
	session.removeAttribute("cart");
		
%>		 
 
<html>		
<body bgcolor="white">
<table>
<tr bgcolor="#e7a068"><th>상품명</th>
<th>가격</th></tr>

<%
		int sum = 0; 
		int n = glist.size(); 
		 
		for(int i=0; i < n; i++) { 
			Goods goods = (Goods) glist.get(i); 
			int gp = goods.getPrice(); 
			sum += gp; 

%>
			<tr><td align="center"> <%= goods.getName() %></td>
				<td align="right"><%= gp %></td>
			</tr>
<%
		} 	
%>
<tr bgcolor="#e7a068"><td colspan="2" align="right"> 총액 :  <%= sum %> </td></tr>
</table>

<br><br><a href="wshop.jsp">다시 쇼핑하기</a>
</body></html>

 

 

7. 과제 - 로그인 페이지와 DB 연동하기

 

< LoginService.jsp 소스 코드 일부 >

// 이전화면 LoginForm.jsp의 폼에서 넘겨받는 사용자 입력값
String user = request.getParameter("User");
String pass = request.getParameter("Pass");
	
// 사용자 입력값을 EmpVO의 멤버에 담기 -> EmpLoginDao에서 사용하기 위해
EmpVO vo = new EmpVO();
vo.setEname(user);
vo.setEmpno(Integer.parseInt(pass));
	
// EmpLoginDao의 드라이버 객체 얻어오기
EmpLoginDao dao = EmpLoginDao.getInstance();
	
// 사용자 입력값에 부합하는 DB 데이터를 Arraylist로 받아오기
ArrayList list = dao.searchEmp(vo);

 

< EmpLoginDao.java 소스 코드 일부 >

// EmpVO에서 얻은 id, password값과 동일한 데이터가 DB에 있는지 확인 
// (동일 정보 있을 경우 1행을 rs로 받음) 
public ArrayList searchEmp(EmpVO vo) throws Exception {
	Connection con = null;
	PreparedStatement ps = null;
	ResultSet rs = null;
	list = new ArrayList();
	try {
		con = DriverManager.getConnection(dbUrl, dbUser, dbPass);
        	// 사용자 입력값과 일치하는 데이터를 찾기 위한 SQL
		String sql = "SELECT * FROM emp WHERE ename=? AND empno=? ";
		ps = con.prepareStatement(sql);
		ps.setString(1, vo.getEname());
		ps.setInt(2, vo.getEmpno());
		rs = ps.executeQuery();
			
		// SQL 조건에 부합하여 DB에서 출력된 결과를 Arraylist에 저장
		if (rs.next()) {
			list.add(rs.getString("ENAME"));
			list.add(rs.getInt("EMPNO"));
		}
			
	} catch ( Exception ex ) {
		throw new Exception (" 로그인 정보 호출 실패 : " + ex.toString());
	} finally {
		if (rs != null) { try {rs.close(); } catch (SQLException ex) {} }
		if (ps != null) { try {rs.close(); } catch (SQLException ex) {} }
		if (con != null) { try {rs.close(); } catch (SQLException ex) {} }
	}
	// DB 출력 결과가 저장된 ArrayList를 리턴하기
	return list;
}

 

< LoginService.jsp 소스 코드 일부 >

// ArrayList에 있는 값을 사용자 입력값과 비교하기 위해 각각의 변수에 대입
String saveUser = list.get(0).toString();
String savePass = list.get(1).toString();

// user, 	 pass 	  : 사용자 입력값
// saveUser, savePass : DB에서 가져온 값
// user, password가 같을 때 로그인 성공, 그렇지 않으면 로그인 실패
if( ( user.equals(saveUser) ) && ( pass.equals(savePass) ) ){
	// #2. 세션에 "id"라는 이름에 변수 user 값을 저장
	session.setAttribute("id", user);
	// #1. 로그인 성공하면 바로 MainPage.jsp를 요청
	response.sendRedirect("MainPage.jsp");
} else {

	// #1. 로그인에 실패하면 바로 LoginForm.jsp을 요청
	response.sendRedirect("LoginForm.jsp");
}

 

< LoginForm.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<html>
<head>
<title> 로그인창 </title>
</head>
<body>

<h3>로그인 확인하기 </h3> 
<form action="LoginService.jsp" method="get">
사용자: <input name='User' type='text'><br/>
비밀번호: <input name='Pass' type='password'><br/>
<input type='submit' value='login'> 
</form>

</body>
</html>

< LoginService.jsp 전체 소스 코드 >

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="temp.*" %>
<%@ page import="java.util.*" %>
    
<!DOCTYPE html>
<html>
<head>
<title> 로그인확인 </title>
</head>
<body>
<%

	/* 실제로는 DB에서 가져와야하는 값
	String saveUser = "alice";
	String savePass = "1357"; */
	
	// 이전화면 LoginForm.jsp의 폼에서 넘겨받는 사용자 입력값
	String user = request.getParameter("User");
	String pass = request.getParameter("Pass");
	
	// 사용자 입력값을 EmpVO의 멤버에 담기 -> EmpLoginDao에서 사용하기 위해
	EmpVO vo = new EmpVO();
	vo.setEname(user);
	vo.setEmpno(Integer.parseInt(pass));
	
	// EmpLoginDao의 드라이버 객체 얻어오기
	EmpLoginDao dao = EmpLoginDao.getInstance();
	
	// 사용자 입력값에 부합하는 DB 데이터를 Arraylist로 받아오기
	ArrayList list = dao.searchEmp(vo);

	// ArrayList에 있는 값을 사용자 입력값과 비교하기 위해 각각의 변수에 대입
	String saveUser = list.get(0).toString();
	String savePass = list.get(1).toString();

	// user, 	 pass 	  : 사용자 입력값
	// saveUser, savePass : DB에서 가져온 값
	// user, password가 같을 때 로그인 성공, 그렇지 않으면 로그인 실패
	if( ( user.equals(saveUser) ) && ( pass.equals(savePass) ) ){
		// #2. 세션에 "id"라는 이름에 변수 user 값을 저장
		session.setAttribute("id", user);
		// #1. 로그인 성공하면 바로 MainPage.jsp를 요청
		response.sendRedirect("MainPage.jsp");
	} else {

		// #1. 로그인에 실패하면 바로 LoginForm.jsp을 요청
		response.sendRedirect("LoginForm.jsp");
	}			
%>
	
</body>
</html>

< EmpVO.java 전체 소스 코드 >

더보기 
package temp;

public class EmpVO {
	int empno;
	String ename;
	int deptno;
	String job;
	int sal;
	
	public EmpVO() {
		
	}

	public int getEmpno() {
		return empno;
	}

	public void setEmpno(int empno) {
		this.empno = empno;
	}

	public String getEname() {
		return ename;
	}

	public void setEname(String ename) {
		this.ename = ename;
	}

	public int getDeptno() {
		return deptno;
	}

	public void setDeptno(int deptno) {
		this.deptno = deptno;
	}

	public String getJob() {
		return job;
	}

	public void setJob(String job) {
		this.job = job;
	}

	public int getSal() {
		return sal;
	}

	public void setSal(int sal) {
		this.sal = sal;
	}
	
	
	
}

< EmpLoginDao.java 전체 소스 코드 >

더보기 
package temp;

import java.sql.*;
import java.util.*;

public class EmpLoginDao {
	
	private static EmpLoginDao	instance;
	ArrayList  list;
	
	// DB 연결에 관한 변수
	private static final String 	dbDriver	=	"oracle.jdbc.driver.OracleDriver";
	private static final String		dbUrl		=	"jdbc:oracle:thin:@192.168.0.17:1521:orcl";
	private static final String		dbUser		=	"scott";
	private static final String		dbPass		=	"tiger";
	
	// 싱글톤 패턴으로 DB 연결
	private EmpLoginDao() throws Exception {
		Class.forName(dbDriver);
	}
	
	public static EmpLoginDao getInstance() throws Exception {
		if (instance == null) {
			instance = new EmpLoginDao();
		}
		return instance;
	}
	
	// EmpVO에서 얻은 id, password값과 동일한 데이터가 DB에 있는지 확인 (동일 정보 있을 경우 1행을 rs로 받음) 
	public ArrayList searchEmp(EmpVO vo) throws Exception {
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		list = new ArrayList();
		try {
			con = DriverManager.getConnection(dbUrl, dbUser, dbPass);
			// 사용자 입력값과 일치하는 데이터를 찾기 위한 SQL
			String sql = "SELECT * FROM emp WHERE ename=? AND empno=? ";
			ps = con.prepareStatement(sql);
			ps.setString(1, vo.getEname());
			ps.setInt(2, vo.getEmpno());
			rs = ps.executeQuery();
			
			// SQL 조건에 부합하여 DB에서 출력된 결과를 Arraylist에 저장
			if (rs.next()) {
				list.add(rs.getString("ENAME"));
				list.add(rs.getInt("EMPNO"));
			}
			
		} catch ( Exception ex ) {
			throw new Exception (" 로그인 정보 호출 실패 : " + ex.toString());
		} finally {
			if (rs != null) { try {rs.close(); } catch (SQLException ex) {} }
			if (ps != null) { try {rs.close(); } catch (SQLException ex) {} }
			if (con != null) { try {rs.close(); } catch (SQLException ex) {} }
		}
		// DB 출력 결과가 저장된 ArrayList를 리턴하기
		return list;
	}

}

< MainPage.jsp 전체 소스 코드 >

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

<%

	//# 1."id"로 저장된 세션값을 얻어온다.
	Object obj = session.getAttribute("id");

	//# 2. 값이 null이라면 LoginForm.jsp로 페이지 이동
	if (obj == null) {
		response.sendRedirect("LoginForm.jsp");
		return;
	}
	
	//# 3. null이 아니라면 String 형변환하여 변수에 지정
	String user = (String)obj;
	
%>
    
<!DOCTYPE html>
<html>
<head>
<title> 우리 페이지 </title>
</head>
<body>

	<h2> 이 페이지는 로그인을 하셔야만 볼 수 있는 페이지 입니다 </h2><br/><br/><br/>
	<%= user %>님, 로그인 중입니다.

</body>
</html>

 

 

 

 

 

 

 

 

반응형
저작자표시 (새창열림)

'교육과정 > KOSMO' 카테고리의 다른 글

Day45  (0) 2020.12.03
Day44  (0) 2020.12.02
Day42  (0) 2020.11.30
Day41  (0) 2020.11.27
Day40  (0) 2020.11.25

관련글

티스토리툴바