22-03-28(월) 041일차 [HTML, JavaScript] 웹으로 데이터베이스 조회

국비지원교육 (22.01-22.07)/강의노트

22-03-28(월) 041일차 [HTML, JavaScript] 웹으로 데이터베이스 조회

옌炎 2022. 5. 17. 09:51

728x90

수업내용

1교시 (09:30-10:20)

지난 시간 복습
웹 브라우저에서 수행되는 프로그램 : 웹 애플리케이션

웹 브라우저
브라우저 엔진
렌더링 엔진
자바스크립트 엔진

웹 문서
HTML
CSS box-model div
javaScript ECMA
jQuery : 자바스크립트를 함수로 구현해놓은 라이브러리
Ajax, JSON, XML, Plain Text ....

react.js, vue.js, node.js ...

웹 서버
정적인 페이지를 수행하는 서버
hello.jsp

웹 애플리케이션 서버
동적인 페이지를 수행하는 서버
hello_jsp.java
hello_jsp.class

데이터베이스

jQuery
-------------------

선택자 사용하기
-------------------
문서 객체 모델(DOM, Document Object Model)은 HTML 문서 객체 구조이다.
문서 객체 모델에서는 태그 tag를 객체 Object, 노드 Node 라고 부른다.
노드의 종류
태그 요소 노드 Element Node
내용 텍스트 노드 Text Node
속성 노드 Attribute Node

1.  제이쿼리가 먼저 실행되고
그 다움 <body> 영역에 문서 객체를 불러온다.
선택자를 선택할 수 없다.
------------------------------------------
<head>
<script>
$("#아이디명").css("color, "red");
</script>
</head>

<body>
<p id="아이디명">내용</p>
</body>

2.  <body> 영역에 문서 객체를 먼저 불러온 다음
선택자를 사용할 수 있도록 해야한다.
------------------------------------------
<head>
<script>
$(document).ready(function(){
$("#아이디명").css("color", "red");
});
</script>
</head>
<body>
<p id="아이디명">내용</p>
</body>

<head>
<script>
$(function(){
$("#아이디명").css("color", "red");
});
</script>
</head>
<body>
<p id="아이디명">내용</p>
</body>

제이쿼리 선택자로 스타일, 속성을 적용하는 기본형
----------------------------------------
1. 선택한 요소에 지정한 스타일 style을 적용
$("CSS 선택자").css("스타일 속성명", "값");
2. 선택한 요소에 지정한 속성 attribute을 적용
$("CSS 선택자").attr("속성명", "값");

선택자
------------

기본 선택자
$(*)
$("#아이디명")
$(".클래스명")
$("요소명")
$("선택1, 선택2, ... 선택n")
$("요소.클래스명")
$("요소#아이디명)

회원번호 mnum
회원이름 mname
아이디 mid
패스워드 mpw
핸드폰번호 mhp
이메일 memail
성별 mgender
취미 mhobby
지역 mlocal
내용 mmsg
회원여부 deleteyn
등록일 insertdate
수정일 updatedate

#####################################################
오라클 SID 확인하기

1. 파일로 확인하는 방법
------------------
C:\app\kosmo\product\11.2.0\dbhome_1\NETWORK\ADMIN
tnsnames.ora
listner.ora

2. 쿼리로 확인하는 방법 ' /as sysdba', system/비밀번호
-------------------------------------------
?>sqlplus "/as sysdba"
?>sqlplus system/1234

SQL>SELECT NAME, DB_UNIQUE_NAME FROM v$database;
NAME      DB_UNIQUE_NAME
--------- ------------------------------
ORCLJSY0  orclKSY0
#####################################################

2교시 (10:30-11:20)

jquery_1

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>제이쿼리 테스트</title>
	<!-- CDN -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
	
		$("#test").css("color", "red");
		
		/*
		$(document).ready(function(){
			$("#test").css("color", "red");
		})
		*/
		
		/*
		$(function(){
			$("#test").css("color", "red");
		})
		*/
	</script>
</head>
<body>
	<p id="test">내용</p>
</body>
</html>

jquery_2

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>제이쿼리 테스트</title>
	
	<!-- CDN -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		
		window.jQuery(document).ready(function(){
			alert("window.jQuery(document) 블록");
		});
		
		jQuery(document).ready(function(){
			alert("jQuery(document) 블록");
		});
		
		window.$(document).ready(function(){
			alert("window.$(document) 블록");
		});
		
		$(document).ready(function(){
			alert("jquery ready 함수 블록 >>> : ");
			alert("$(document).ready() 형식만 사용하면 된다. "
					+ "제이쿼리는 ready(function() {}) ready함수 펑션 블록에서만 사용한다. ")
		});
		
		jquery(document).ready(function(){
			alert("jquery(document) 블록")
		});
	</script>
</head>
<body>

</body>
</html>

3교시 (11:30-12:20)

jquery_3.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>제이쿼리 테스트</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
			/*
				$ : 제이쿼리를 시작하는 키워드
				#아이디명  : CSS 선택자에서 #아이디명 : 태그의 id 속성의 이름을 가리킨다.
						#tidCheck <-- form 태그에서 id 값이 tidCheck를 찾아라
				$("#아이디명") : 제이쿼리 함수를 이용해서 CSS 선택자를 이용해서
								DOM Tree Node list에서 아이디 속성의 값을 찾으시오
				$("tidCheck") : jquery_3.html 웹 문서의 DOM Tree 노드 리스트에서
								아이디 속성값이 tidCheck인 노드를 찾으시오
				$("#tidCheck").click(); : jquery_3.html 웹 문서의 DOM Tree 노드 리스트에서
										아이디 속성값이 tidCheck인 노드를 찾아서 Click 이벤트를 수행하시오
			*/
			
			$("#tidCheck").click(function() {
				alert(">>>>>>> tidCheck");
				alert("Ajax 또는 window.open() 함수를 이용해서 아이디 중복 체크");
			});
			
			// id 속성이 "tPwCheck"인 요소에 대한 "click" 이벤트 정의
			$("#tPwCheck").click(function() {
				alert("tPwCheck 블록 진입 >>> : ")	
			
				// 사용자 입력값 얻어오기
				var tPwVal = $("#tPw").val();
				var tPwRVal = $("#tPwR").val();
				alert(tPwVal + " : " + tPwRVal);
				
				// 입력 여부 검사
				if (!tPwVal) {
					alert("비밀번호를 입력하세요."));
					$("#tPw").focus();
					return false;
				}
				if (!tPwRVal) {
					alert("비밀번호 확인란을 입력하세요.");
					$("#tPwR").focus();
					return false;
				}
				
				if(tPwVal == tPwRVal) {
					alert("비밀번호가 확인되었습니다.");
					$("#tEmail").focus();
				} else {
					alert("비밀번호를 다시 확인하세요.");
					$("#tPw").val('');
					$("#tPwR").val('');
					$("#tPw").focus();
				}
			});
		
			$("#I_formTest").click(function() {
				alert(">>>>>>> I_formTest");
				$("#formTest").attr("action", "#insertTest.jsp").submit();
			});
			$("#S_formTest").click(function() {
				alert(">>>>>>> S_formTest");
				$("#formTest").attr("action", "#selectTest.jsp").submit();
			});
			$("#U_formTest").click(function() {
				alert(">>>>>>> U_formTest");
				$("#formTest").attr("action", "#updateTest.jsp").submit();
			});
			$("#D_formTest").click(function() {
				alert(">>>>>>> D_formTest");
				$("#formTest").attr("action", "#deleteTest.jsp").submit();
			});
		});
	</script>
</head>
<body>
	<form name="formTest" id="formTest" method="POST">
	<table border="1">
		<tr>
			<td colspan="2" align="center">제이쿼리 테스트</td>
		</tr>
		<tr>
			<td align="center">아이디</td>
			<td>
				<input type="text" name="tId" id="tId" size="20">
				<input type="button" name="tidCheck" id="tidCheck" value="아이디 중복 확인" />
			</td>
		</tr>
		<tr>
			<td align="center">비밀번호</td>
			<td><input type="password" name="tPw" id="tPw" size="20"></td>
		</tr>
		<tr>
			<td align="center">비밀번호확인</td>
			<td>
				<input type="password" name="tPwR" id="tPwR" size="20">
				<input type="button" id="tPwCheck" value="비밀번호확인">
			</td>
		</tr>
		<tr>
			<td align="center">이메일</td>
			<td><input type="text" name="tEmal" id="tEmal" size="20"></td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="button" value="글쓰기" id="I_formTest">
				<input type="button" value="글목록" id="S_formTest">
				<input type="button" value="글수정" id="U_formTest">
				<input type="button" value="글삭제" id="D_formTest">
				<input type="reset" value="다시">
			</td>
		</tr>
	</table>
	</form>
</body>
</html>

제이쿼리 테스트
아이디
비밀번호
비밀번호확인
이메일

4교시 (12:30-13:20)

데이터베이스 연결
- ojdbc6.jar를 WEB-INF/lib 경로에 복사해두기
- ksyProject 아래 폴더를 Web의 Java Resources/src 경로에 복사
  - UTF-8로 인코딩 바꾸기
oracle_1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Oracle Test</title>
</head>
<body>
	<h3>Oracle Test</h3>
	<hr>
	<%
	Class.forName("oracle.jdbc.driver.OracleDriver");
	System.out.println("" + Class.forName("oracle.jdbc.driver.OracleDriver"));
	Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orclKSY00", "scott", "tiger");
	System.out.println("conn >>> : " + conn);
	Statement stmt = conn.createStatement();
	System.out.println("stmt >>> : " + stmt);
	ResultSet rsRs = stmt.executeQuery("SELECT * FROM TEST_T6 ORDER BY 1 DESC");
	System.out.println("rsRs >>> : " + rsRs);
	
	while (rsRs.next()) {
		out.print(rsRs.getString("T1") + " : ");
		out.print(rsRs.getString("T2") + " : ");
		out.print(rsRs.getString("T3") + " : ");
		out.print(rsRs.getString("T4") + " : ");
		out.print(rsRs.getString("T5") + " : ");
		out.println(rsRs.getString("T6") + "<br>");
		}
	%>
	</hr>
</body>
</html>

5교시 (14:30-15:20)

TEST_T6 웹 조회

t6selectAll.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="a.b.c.t6.service.T6Service" %>>
<%@ page import ="a.b.c.t6.service.T6ServiceImpl" %>>
<%@ page import ="a.b.c.t6.vo.T6VO" %>>
<%@ page import ="java.util.ArrayList" %>>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>TEST_T6 SELECT ALL</title>
</head>
<body>
	<h3>TEST_T6 SELECT ALL</h3>
	<hr>
	<%
		T6Service ts = new T6ServiceImpl();
		ArrayList<T6VO> aList = ts.t6SelectAll();
		
		if (aList != null && aList.size() > 0) {
			for (int i=0; i < aList.size(); i++) {
				T6VO _tvo = aList.get(i);
				System.out.print(_tvo.getT1() + " : ");
				System.out.print(_tvo.getT2() + " : ");
				System.out.print(_tvo.getT3() + " : ");
				System.out.print(_tvo.getT4() + " : ");
				System.out.print(_tvo.getT5() + " : ");
				System.out.println(_tvo.getT6());
	%>
				<%= _tvo.getT1() + " : "%>
				<%= _tvo.getT2() + " : "%>
				<%= _tvo.getT3() + " : "%>
				<%= _tvo.getT4() + " : "%>
				<%= _tvo.getT5() + " : "%>
				<%= _tvo.getT6() + "<br>"%>
	<%			
				/*
				out.print(_tvo.getT1() + " : ");
				out.print(_tvo.getT2() + " : ");
				out.print(_tvo.getT3() + " : ");
				out.print(_tvo.getT4() + " : ");
				out.print(_tvo.getT5() + " : ");
				out.println(_tvo.getT6() + "<br>");
				*/
			}
		}
	%>
</body>
</html>

t6selectDate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="a.b.c.t6.service.T6Service" %>
<%@ page import="a.b.c.t6.service.T6ServiceImpl" %>
<%@ page import="a.b.c.t6.vo.T6VO" %>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>TEST_T6 SELECT ALL</title>
</head>
<body>
	<h3>TEST_T6 SELECT DATE</h3>
	<hr>
	<%
		String fromdate = request.getParameter("fromdate");
		String todate = request.getParameter("todate");
		
		T6VO tvo = null;
		tvo = new T6VO();
		tvo.setFromdate(fromdate);
		tvo.setTodate(todate);
		
		T6Service ts = new T6ServiceImpl();
		ArrayList<T6VO> aList = ts.t6SelectDate(tvo);
		
		if (aList != null && aList.size() > 0) {
			for (int i=0; i < aList.size(); i++) {
				T6VO _tvo = aList.get(i);
				System.out.print(_tvo.getT1() + " : ");
				System.out.print(_tvo.getT2() + " : ");
				System.out.print(_tvo.getT3() + " : ");
				System.out.print(_tvo.getT4() + " : ");
				System.out.print(_tvo.getT5() + " : ");
				System.out.println(_tvo.getT6());
	%>
				<%= _tvo.getT1() + " : " %>
				<%= _tvo.getT2() + " : " %>
				<%= _tvo.getT3() + " : " %>
				<%= _tvo.getT4() + " : " %>
				<%= _tvo.getT5() + " : " %>
				<%= _tvo.getT6() + "<br>" %>
	<%
			}
		}
	%>
</body>
</html>

6교시 (15:30-16:20)

TEST_T6 웹 조회

t6selectName.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="a.b.c.t6.service.T6Service" %>
<%@ page import="a.b.c.t6.service.T6ServiceImpl" %>
<%@ page import="a.b.c.t6.vo.T6VO" %>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>TEST_T6 SELECT ALL</title>
</head>
<body>
	<h3>TEST_T6 SELECT NAME</h3>
	<hr>
	<%
		String t2 = request.getParameter("t2");
		T6VO tvo = null;
		tvo = new T6VO();
		tvo.setT2(t2);
		
		T6Service ts = new T6ServiceImpl();
		ArrayList<T6VO> aList = ts.t6SelectName(tvo);
		
		if (aList != null && aList.size() > 0) {
			for (int i=0; i < aList.size(); i++) {
				T6VO _tvo = aList.get(i);
				System.out.print(_tvo.getT1() + " : ");
				System.out.print(_tvo.getT2() + " : ");
				System.out.print(_tvo.getT3() + " : ");
				System.out.print(_tvo.getT4() + " : ");
				System.out.print(_tvo.getT5() + " : ");
				System.out.println(_tvo.getT6());
	%>
				<%= _tvo.getT1() + " : " %>
				<%= _tvo.getT2() + " : " %>
				<%= _tvo.getT3() + " : " %>
				<%= _tvo.getT4() + " : " %>
				<%= _tvo.getT5() + " : " %>
				<%= _tvo.getT6() + "<br>" %>
	<%
			}
		}
	%>
</body>
</html>

t6scr.html

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="a.b.c.t6.service.T6Service" %>
<%@ page import="a.b.c.t6.service.T6ServiceImpl" %>
<%@ page import="a.b.c.t6.vo.T6VO" %>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>TEST_T6 SELECT ALL</title>
</head>
<body>
	<h3>TEST_T6 SELECT NAME</h3>
	<hr>
	<%
		String t2 = request.getParameter("t2");
		T6VO tvo = null;
		tvo = new T6VO();
		tvo.setT2(t2);
		
		T6Service ts = new T6ServiceImpl();
		ArrayList<T6VO> aList = ts.t6SelectName(tvo);
		
		if (aList != null && aList.size() > 0) {
			for (int i=0; i < aList.size(); i++) {
				T6VO _tvo = aList.get(i);
				System.out.print(_tvo.getT1() + " : ");
				System.out.print(_tvo.getT2() + " : ");
				System.out.print(_tvo.getT3() + " : ");
				System.out.print(_tvo.getT4() + " : ");
				System.out.print(_tvo.getT5() + " : ");
				System.out.println(_tvo.getT6());
	%>
				<%= _tvo.getT1() + " : " %>
				<%= _tvo.getT2() + " : " %>
				<%= _tvo.getT3() + " : " %>
				<%= _tvo.getT4() + " : " %>
				<%= _tvo.getT5() + " : " %>
				<%= _tvo.getT6() + "<br>" %>
	<%
			}
		}
	%>
</body>
</html>

7교시 (16:30-17:20)

TEST_T6 웹 조회

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>TEST_T6 테이블</title>
	<!-- CDN -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		
		alert("스크립트 블록에 진입 성공 >>> : ");
		
		// jQuery는 스크립트 블록 ready 함수 블록에 만들어야 한다.
		$(document).ready(function(){
			alert("jQuery ready() 함수 진입 성공 >>> : ");
			
			$("#t2name_btn").click(function(){
				alert("t2name_btn 버튼 클릭 성공 >>> : ");
				// http://localhost:8088/firstWeb/test_t6/t6selectName.jsp
				$("#form_t2_name").attr(
					{
						"action":"/firstWeb/test_t6/t6selectName.jsp",
						"method":"GET"
					}		
				).submit();
			});
			
			$("#t2date_btn").click(function(){
				alert("t2date_btn 버튼 클릭 성공 >>> : ");
				
				// http://localhost:8088/firstWeb/test_t6/t6selectDate.jsp
				$("#form_t2_date").attr(
					{
						"action":"/firstWeb/test_t6/t6selectDate.jsp",
						"method":"GET"
					}		
				).submit();
			});
		});
	</script>
</head>
<body>
	<h3>TEST_T6 테이블</h3>
	<hr>
		<a href="/firstWeb/test_t6/t6selectAll.jsp">전체 조회</a>
	<br>
	<form name="form_t2_name" id="form_t2_name">
	이름 검색 <input type="text" name="t2" id="t2" />
		  <input type="button" id="t2name_btn" value="이름검색" />
	</form>
	<br>
	
	<form name="form_t2_date" id="form_t2_date">
	날짜 검색 <input type="text" name="fromdate" id="fromdate" /> ~
			<input type="text" name="todate" id="todate" />
			<input type="button" id="t2date_btn" value="날짜검색" />
	</form>
	<br>
	<a href="#">데이터 입력</a><br>
</body>
</html>

index를 서버로 실행

8교시 (17:30-18:30)

insert, update 기능 추가하기
- t6scr.html
- t6Update.jsp
- t6Insert.jsp
- t6UpdateOk.jsp

Notes

728x90

저작자표시 (새창열림)

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

22-03-30(수) 043일차 [HTML, JavaScript] HTML 데이터 주고받기, getData 예제, 미니프로젝트 시작 (0)	2022.05.17
22-03-29(화) 042일차 [HTML, JavaScript] select, delete 가능한 창에서 insert, update 구현해보기, 데이터 주고받기 (0)	2022.05.17
22-03-25(금) 040일차 [HTML, JavaScript, JSP] jsp와 jQuery 기초 (0)	2022.05.14
22-03-24(목) 039일차 [HTML, JavaScript] (0)	2022.05.14
22-03-23(수) 038일차 [HTML, JSP, CSS] HTML과 폼 태그, JSP, CSS 활용법 (0)	2022.05.12

현재글22-03-28(월) 041일차 [HTML, JavaScript] 웹으로 데이터베이스 조회

A New Life

22-03-28(월) 041일차 [HTML, JavaScript] 웹으로 데이터베이스 조회

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

티스토리툴바

22-03-28(월) 041일차 [HTML, JavaScript] 웹으로 데이터베이스 조회

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

관련글

티스토리툴바