22-03-30(수) 043일차 [HTML, JavaScript] HTML 데이터 주고받기, getData 예제, 미니프로젝트 시작

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

22-03-30(수) 043일차 [HTML, JavaScript] HTML 데이터 주고받기, getData 예제, 미니프로젝트 시작

옌炎 2022. 5. 17. 10:23

728x90

수업내용

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

HTML에 대한 설명
- name은 여러 번 사용 가능하지만 id는 유일하게 사용 가능하다.
- 폼 태그 <form></form>
- Java setter 초기화 함수, getter 리턴 함수이다.

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

HTML에 대한 설명
- 자바스크립트 function 함수이름(){}
- 스크립트 <script></script>
getData_3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>FORM TAG</title>
		<script type="text/javascript">
		
			alert("자바스크립트 블록 시작 >>> : ");
			
			function checkAction(){
				alert(">>");
				
				// winmdow.document : title 이름이 FORM TAG인 문서의 body 영역
				// <form name="getData">
				var getDataForm = window.document.getData;
				alert("getDataForm >>> : " + getDataForm);
				
				// <form id="getDate)"
				// window.documentById("getDate") ==> $("#getDate")
				var getDataForm_1 = window.document.getElementById("getDate");
				alert("getDataForm_1 >>> : " + getDataForm_1);
				
				// forms 배열
				var getDataForm_2 = window.document.forms[0];
				alert("getDataForm_2 >>> : " + getDataForm_2);
				
				// forms 배열
				var forms_2 = window.document.forms[1];
				alert("form_2 >>> : " + form_2);
			}
		</script>
	</head>
	
	<body>
		<form name="getData" id="getDate">
				
		이름 : <input type="text" name="mname" id="mname"><br>
		주소 : <input type="text" name="maddr" id="maddr"><br>
		
		<!-- 
			1. 브라우저 렌더링된 전송 버튼(form 태그에 <input type="submit" value="전송">)을 마우스 클릭하면
			2. <input type="submit"태그에 있는 onClick 함수가 클릭 이벤트를 받아서
			3. checkAction() 자바스크립트 함수를 호출한다.
			4. <scipt type="text/javascript"></script> 블록 안에 
				function checkAction() {} 함수 블록이 선언이 되어 있어야 한다. 
		 -->
		
		<input type="submit" value="전송" onclick="checkAction()">
		<input type="reset" value="다시">
		</form>
	</body>
</html>

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

getData_3.html

submit, onclick() 함수 사용
input size 입력창 길이(default 20)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>FORM TAG</title>
		<script type="text/javascript">
		
			alert("자바스크립트 블록 시작 >>> : ");
			
			function checkAction(){
				alert(">>");
				
				// winmdow.document : title 이름이 FORM TAG인 문서의 body 영역
				// <form name="getData">
				var getDataForm = window.document.getData;
				alert("getDataForm >>> : " + getDataForm);
				
				// <form id="getDate)"
				// window.documentById("getDate") ==> $("#getDate")
				var getDataForm_1 = window.document.getElementById("getDate");
				alert("getDataForm_1 >>> : " + getDataForm_1);
				
				// forms 배열
				var getDataForm_2 = window.document.forms[0];
				alert("getDataForm_2 >>> : " + getDataForm_2);
				
				// forms 배열
				var forms_2 = window.document.forms[1];
				alert("form_2 >>> : " + form_2);
			}
		</script>
	</head>
	
	<body>
		<form name="getData" id="getDate">
				
		이름 : <input type="text" name="mname" id="mname"><br>
		주소 : <input type="text" name="maddr" id="maddr"><br>
		
		<!-- 
			1. 브라우저 렌더링된 전송 버튼(form 태그에 <input type="submit" value="전송">)을 마우스 클릭하면
			2. <input type="submit"태그에 있는 onClick 함수가 클릭 이벤트를 받아서
			3. checkAction() 자바스크립트 함수를 호출한다.
			4. <scipt type="text/javascript"></script> 블록 안에 
				function checkAction() {} 함수 블록이 선언이 되어 있어야 한다.
			5. checkAction() 함수 블록에서 인터프리터 방식으로 수행이 된다.
		 -->
		 
		 <!--
		 	이벤트함수
		 	submit : 전송 버튼 : 서버로 보냅, 폼 태그에 있는 속성 action 을 봄
		 	resrt : 초기화 버튼
		 	태그, 이름, 배열(형제요소임으로)로 찾을 수 있다.
		 -->
		
		<!--
			* submit 사용하는 방법
				<form action="#">
				<input type="submit" value="전송">
				</form>
			
			* button에서 onclick() 함수 사용하는 방법
				<script>
					function 함수(){
						document.submit();
					}
				</script>
				<form action="#">
				<input type="button" value="전송" onclick="함수()">
				</form>
		-->
		
		<!--
			form 태그에서 submit 함수를 사용할 때는 onclick 이벤트를 사용하지 않는다.
			form 태그 내부에 action을 사용한다.
			
			onclick 이벤트를 사용할 때는 type="button" 또는 <button> 태그를 사용한다. 
		-->
		<input type="submit" value="전송" onclick="checkAction()">
		<input type="reset" value="다시">
		</form>
	</body>
</html>

getData_4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>FORM TAG</title>
		<script type="text/javascript">
		
			alert("자바스크립트 블록 시작 >>> : ");
			
			function checkAction(){
				alert(">>");
				
				var getDataForm = window.document.getData;
				/*
				alert("getDataForm >>> : " + getDataForm);
				alert("window.document.getData.action >>> : " + window.document.getData.action)
				<!--  http://localhost:8088/firstWeb/getData/getData_4.html -->
				alert("window.document.getData.method >>> : " + window.document.getData.method)
				<!-- get -->
				alert("window.document.getData.enctype >>> : " + window.document.getData.enctype)
				<!--  application/x-www-form-urlencoded -->
				*/

				window.document.getData.action = "/firstWeb/getData_jsp/getData_1.jsp"
				window.document.getData.method = "POST"
				window.document.getData.enctype = "multipart/form-data"
				
				/*
				alert("window.document.getData.action >>> : " + window.document.getData.action)
				<!--   http://localhost:8088/firstWeb/getData_jsp/getData_1.jsp -->
				alert("window.document.getData.method >>> : " + window.document.getData.method)
				<!-- post -->
				alert("window.document.getData.enctype >>> : " + window.document.getData.enctype)
				<!--  multipart/form-data -->
				*/
				window.document.getData.submit();
			}
		</script>
	</head>
	
	<body>
		<script>
			/*
				url : http://localhost:8088/firstWeb/getData_jsp/getData_1.jsp
				? : 구분자 : url과 쿼리스트링 Query String 구분자
				mname=111&maddr=222 : 쿼리 스트링 Query String : 데이터
					GET : HEADER : mname=111&addr=222
					POST : BODY : mname=111&addr=222
			*/
		</script>
	
		<form name="getData" id="getDate">
		
		<!-- https://www.w3schools.com/ 에서 찾아가면서 하기 --> 
		이름 : <input type="text" name="mname" id="mname" size="5" maxlength="15"><br>
		주소 : <input type="text" name="maddr" id="maddr" size="20" maxlength="15"><br>
		
		<input type="submit" value="전송" onclick="checkAction()">
		<input type="reset" value="다시">
		</form>
	</body>
</html>

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

getData_5.html

getElementById : 폼 태그의 id 속성값(웹문서에서 유일한 값) 가져오기
id 속성 값이 여러 개일 때는 에러가 나지 않고 제일 제일 마지막 값을 가져온다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FOMR TAG</title>
	<script type="text/javascript">
		
		alert("자바스크립트 블록 시작 >>> : ");
			
		function checkAction() {
			alert(">>");
			
			// <form id="getDate"
			// window.document.getElementById("getDate") ==> $("#getDate")
			var getDataForm_1 = window.document.getElementById("getData");
			alert("getDataForm_1 >>> : " + getDataForm_1);
			
			var mname = document.getElementById("mname");			
			alert("mname >>> : " + mname);
			
			var mname_value = document.getElementById("mname").value;			
			alert("mname_value >>> : " + mname_value);
			
			// mname_value = "서민정";
			// alert("mname_value >>> : " + mname_value);			
			// document.getElementById("mname").value = "aaa";
			
			var maddr = document.getElementById("maddr");
			alert("maddr >>> : " + maddr);	
			
			var maddr_value = document.getElementById("maddr").value;			
			alert("mname_value >>> : " + mname_value);
			
			// mname_value = "서울";
			// alert("mname_value >>> : " + mname_value);			
			// document.getElementById("maddr").value = "bbb";			
		
			// window.document.getData.submit();
			getDataForm_1.action="/firstWeb/getData_jsp/getData_1.jsp";
			getDataForm_1.method="GET";
			getDataForm_1.enctype="application/x-www-form-urlencoded";
			getDataForm_1.submit();
		}		
	</script>
</head>

<body>
	<form name="getData" id="getData">

	이름 : <input type="text" name="mname" id="mname" size="5" maxlength="15" value="111"><br>
	주소 : <input type="text" name="maddr" id="maddr" size="20" maxlength="15" value="222"><br>

	 <!-- 
	 이름 : <input type="text" name="mname" id="mname" size="5" maxlength="15"><br>
	주소 : <input type="text" name="maddr" id="maddr" size="20" maxlength="15"><br>
	-->
	
	<input type="button" value="전송" onclick="checkAction()">
	<input type="reset" value="다시">
	</form>
</body>
</html>

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

getData_6.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FORM TAG</title>
	<script type="text/javascript">
	
	alert("자바스크립트 블록 시작 >>> : ");
	
	function checkAction() {
		alert(">>");
		
		// form 배열
		var getDataForm_2 = window.document.forms[0];
		alert("getDataForm_2 >>> : " + getDataForm_2);
		
		var mname = window.document.forms[0].elements[0].value;
		alert("mname >>> : " + mname);
		var maddr = window.document.forms[0].elements[1].value;
		alert("maddr >>> : " + maddr);
		var button = window.document.forms[0].elements[2].value;
		alert("button >>> : " + button);
		var reset = window.document.forms[0].elements[3].value;
		alert("reset >>> : " + reset);
		
		alert(document.getElementsByTagName("input")[0].value);
		alert(document.getElementsByTagName("input")[1].value);
		alert(document.getElementsByTagName("input")[2].value);
		alert(document.getElementsByTagName("input")[3].value);
		
		// getDataForm_2 변수를 사용해서 "/firstWeb/getData_jsp/getData_1.jsp"
		// POST 방식, enctype="application/x-www.form-urlencoded"
		getDataForm_2.action = "/firstWeb/getData_jsp/getData_1.jsp";
		getDataForm_2.method = "POST";
		getDataForm_2.enctype = "application/x-www.form-urlencoded";
	}
		
	</script>
</head>
<body>
	<form name="getData" id="getData">

	이름 : <input type="text" name="mname" id="mname" size="5" maxlength="15" value="111"><br>
	주소 : <input type="text" name="maddr" id="maddr" size="20" maxlength="15" value="222"><br>

	 <!-- 
	 이름 : <input type="text" name="mname" id="mname" size="5" maxlength="15"><br>
	주소 : <input type="text" name="maddr" id="maddr" size="20" maxlength="15"><br>
	-->
	
	<input type="button" value="전송" onclick="checkAction()">
	<input type="reset" value="다시">
	</form>
</body>
</html>

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

Servers/Tomcat v8.5 Server at localhost-config/server.xml 63line~ 수정

<Connector connectionTimeout="20000" 
		    port="8088" 
		    protocol="HTTP/1.1" 
		    redirectPort="8443"
		    URIEncoding="UTF-8"/>

getData_1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getData_1 jsp</title>
</head>
<body>
	<h3>getData_1 jsp</h3>
	<hr>
	<!--
		HTML ------------------Web Server ---------------WAS -----DATABASE
							인코딩
							HTML    JSP
			GET		HEADER			탐캣 서버 환경설정 파일에서 한다.
			POST	BODY			탐캣 서버 환경설정 파일에서 한다.
									: 요청한 스트림을 받아서 인코딩한 것
									request.setCharacterEncoding("UTF-8");
		
		탐캣 서버 환경설정 파일에서 한다.
		1. server.xml : 탐캣 서버 전체에 인코딩 : GET 방식으로 들어오는 스트림 인코딩
			탐캣 서버 - Servers - Tomcat v8.5 Server at localhost-config -	server.xml	
			63라인 : Connector 	connectionTimeout="20000" 
						port="8088" 
						protocol="HTTP/1.1" 
						redirectPort="8443"
						URIEncoding="UTF-8"
		2. Context/WebContent/WEB-INF/web.xml : Context만 인코딩하는 것	
	-->
	<%
		request.setCharacterEncoding("UTF-8");
	%>
	<%
		String mname = request.getParameter("mname");
		String maddr = request.getParameter("madrr");
		
		System.out.println("mname >>> : " + mname);
		System.out.println("maddr >>> : " + maddr);
	%>
	
	이름 : <%= mname %><br>
	주소 : <%= maddr %>
	
</body>
</html>

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

getData_7.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FORM TAG</title>
	<!--
		<script src="http://code.jquery.com/jquery-latest.min.js></script>
	 -->
	<script src="/firstWeb/js/jquery-latest.min.js"></script>
	<script type="text/javascript">
		
		alert("자바스크립트 블록 시작 >>> : ");
		
		// jQuery로 보내기
		jQuery(document).ready(function(){
			alert("jQuery ready 함수 블록");
			
			$("getDataBtn").click(function(){
				
				/*
				$("#getData").attr("action", "/firstWeb/getData_jsp/getData_1.jsp");
				$("#getData").attr("method", "GET");
				$("#getData").attr("enctype", "application/x-www-form-urlencoded");
				$("#getData").submit();
				*/
				
				$("#getData").attr({
					"action":"/firstWeb/getData_jsp/getData_1.jsp",
					"method":"GET",
					"enctype":"application/x-www-form-urlencoded"
				}).submit();
			});
		});
		
		function checkAction() {
			alert(">>");
			
			// <form id="getDate"
			// window.document.getElementById("getDate") ==> $("#getDate")
			var getDataForm_1 = window.document.getElementById("getData");
			alert("getDataForm_1 >>> : " + getDataForm_1);
			
			getDataForm_1.action="/firstWeb/getData_jsp/getData_1.jsp";
			getDataForm_1.method="GET";
			getDataForm_1.enctype="application/x-www-form-urlencoded";
			getDataForm_1.submit();
		}
	</script>
</head>
<body>
	<form name="getData" id="getData">
	이름 : <input type="text" name="mname" id="mname" size="5" maxlength="15" value="111"><br>
	주소 : <input type="text" name="maddr" id="maddr" size="20" maxlength="15" value="222"><br>
	<input type="button" value="전송" onclick="checkAction()">
	<input type="button" value="jquery_btn" id="getDataBtn">
	<input type="reset" value="다시">
	</form>
</body>
</html>

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

회원관리 프로그램 만들기 프로젝트
회원 관리 프로그램
jsp 모델 I 아키텍처
3월 30일 수요일 17:00 ~ 4월 01일 금요일 13:20 까지
-------------------------------
강의장, 강의장 옆 사무실을 이용
강의시작 시간, 강의시간 끝나는 시간
수업 시간에는 아무데나 가면 않된다.

같이 하는 친구의 의견을 존중
공부를 먼저해서 조금 많이 이해가 되는 친구가
리딩한다고 하면서 자기 맘대로 하는 것을
코딩 실력
+++++++++++++++++++++++++++++++++++++++
같이 하는 친구가 하는 말을 잘 듣는 것 연습
말은 하는 사람은 상대방이 잘 들을 수 있게 연습
+++++++++++++++++++++++++++++++++++++++
-------------------------------

=============================================
2인 ~ 3인 1개조
17시 30분에 발표

변수 동일
클래스이름 MemService_본인이니셜
=============================================

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

요구사항
1. jsp 페이지를 이용해서 jdbc 드라이버를 이용해서 오라클 데이베이스에다가
회원 데이터를 ISUD, CRUD 하기
화면
1. mem.html
2.  memInsert.jsp
3.  memSelect.jsp : 회원번호, 이름, 날짜
4.  memSelectAll.jsp : 전체
5.  memUpdate.jsp
6.  memDelete.jsp

비즈
service
MemService
MemServiceImpl
dao
MemDAO
MemDAOImpl
sql
MemQueryMap
vo
MemVO

공통클래스
jdbc 연결 공통 클래스
KosConnectivity

채번로직
ChabunQuery
ChabunUtil
DateFormatUtil
DateUtil

데이터베이스
-----------------------------
sid :
account : scott/tiger

테이블 이름 : KOS_MEMBER
컬럼
MNUM VARCHAR2(20) PRIMARY KEY  M + YYYYMMDD + 0001 M202203300001
MNAME VARCHAR2(50)
MID VARCHAR2(50) NOT NULL
MPW VARCHAR2(300) NOT NULL
MHP VARCHAR2(16) NOT NULL
MEMAIL VARCHAR2(200) NOT NULL
MGENDER VARCHAR2(10)
MHOBBY VARCHAR2(100)
MLOCAL VARCHAR2(200)
MMSG VARCHAR2(2000)
DELETEYN VARCHAR2(1) NOT NULL Y/N
INSERTDATE DATE YYYY-MM-DD
UPDATEDATE DATE YYYY-MM-DD

테이블 정의서 만들기

Context : kosMember
=====================================================
Java 창
Default output folder:
build\classes -->  WebContent\WEB-INF\classes

WEB-INF 에 classes 디렉토리가 생성된다.
C:\00.KOSMO108\30.Web\eclipse_web_work\kosMember\WebContent\WEB-INF\classes
=====================================================

package member : a.b.c.kos.mem
package common : a.b.c.commom
jsp : kosmember

Notes

728x90

저작자표시 (새창열림)

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

22-04-01(금) 045일차 [Java, Oracle, HTML, JavaScript] 미니 프로젝트 (0)	2022.05.17
22-03-31(목) 044일차 [Java, Oracle, HTML, JavaScript] 미니 프로젝트 (0)	2022.05.17
22-03-29(화) 042일차 [HTML, JavaScript] select, delete 가능한 창에서 insert, update 구현해보기, 데이터 주고받기 (0)	2022.05.17
22-03-28(월) 041일차 [HTML, JavaScript] 웹으로 데이터베이스 조회 (0)	2022.05.17
22-03-25(금) 040일차 [HTML, JavaScript, JSP] jsp와 jQuery 기초 (0)	2022.05.14

현재글22-03-30(수) 043일차 [HTML, JavaScript] HTML 데이터 주고받기, getData 예제, 미니프로젝트 시작

A New Life

22-03-30(수) 043일차 [HTML, JavaScript] HTML 데이터 주고받기, getData 예제, 미니프로젝트 시작

수업내용

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

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

티스토리툴바

22-03-30(수) 043일차 [HTML, JavaScript] HTML 데이터 주고받기, getData 예제, 미니프로젝트 시작

수업내용

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

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

관련글

티스토리툴바