Data Scientist 옌

매일 발전하는 IT문제해결사

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

22-04-04(월) 046일차 [Java, Oracle, HTML] 지난 금요일에 주신 자료 그대로 타이핑하기

옌炎 2022. 5. 24. 12:19
728x90

수업내용

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

  • mem.html ← javascript와 jQuery로 출력해보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 폼</title>
<!-- 디바이스에 최적화된 크기로 출력됨 -->
<meta name="viweport" content="width=device-width, iitail-scale=1">

<!-- jQuery CDN 불러오기  -->
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- 다음 주소록 OPEN API CDN 불러오기  -->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

<script type="text/javascript">
	
	$(document).ready(function(){
		alert("ready >>> : ");
		
		/*====== 아이디 중복 체크 START ==========================================*/
		// 아이디 중복체크		
		$("#midCheck").click(function(){		
			alert("midCheck >>> : Ajax 배워서 할 예정임 ㅋ ");		
			console.log("idCheck >>> : ");
			
			let midVal = $("#mid").val();
			if (midVal == '') {
				alert("중복 체크할 아이디를 입력하세요 >>> : ");
				$("#mid").focus();
				return false;
			}
		}); // end of $("#midCheck")
		/*====== 아이디 중복 체크 END ==========================================*/
		
		/*====== 비밀번호 체크 START ==========================================*/
		// 비밀번호 체크 
		$("#mpwCheck").click(function(){
			console.log("mpwCheck 함수 진입");
			var pw = $("#mpw").val();
			var pw_r = $("#mpw_r").val();
			alert(pw + " : " + pw_r);
			if(pw == pw_r) {
				alert("비밀번호가 같습니다.");
				$("#mpw_r").val('');			
				$("#mhp").focus();						
				return true;
			} else {
				alert("비밀번호가 다릅니다.");
				$("#mpw").val('')
				$("#mpw_r").val('');
				$("#mpw").focus();			
				return false;
			} // enf of if(pw == pw_r)
		}); // end of $("#mpwCheck")
		/*====== 비밀번호 체크 END ==========================================*/
		
		// 핸드폰
		
		/*====== 이메일 START ==========================================*/
		// 이메일	
		$('#memail2').change(function(){	
			$("#memail2 option:selected").each(function () {
				if($(this).val()== '1'){ // 직접입력일 경우 
						var aa = $("#memail1").val();
						// alert("aa >>> : " + aa);
						$("#memail1").val(''); //값 초기화 
						$("#memail1").attr("readonly",false); // 활성화 				
				}else{ // 직접입력이 아닐경우 
						$("#memail1").val($(this).text()); // 선택값 입력 
						$("#memail1").attr("readonly",true); // 비활성화 
				}
			}); 
		});  // end of $("#memail2")
		/*====== 이메일 END ==========================================*/
		
		/*====== 우편번호 START ==========================================*/
		// 우편번호	
		$("#mzone_btn").click(function(){
			console.log("mzone_btn >>> : ");
			new daum.Postcode({
				oncomplete: function(data) {
				    $("#mzone").val(data.zonecode); // 5자리 새우편번호 사용
				    $("#mroad").val(data.roadAddress); // 도로명 주소
				    $("#mjibun").val(data.jibunAddress); // 지번주소			
				}
			}).open();
		});// end of $("#mzone_btn")
		/*====== 우편번호 END ==========================================*/
		
		/*====== memForm 태그 START ==========================================*/
		// memForm 태그에 바인딩 된 데이터 jsp 로 보내기 
		$("#memInsertBtn").click(function(){
			alert("mzone_btn >>> : ");
			console.log("mzone_btn >>> : ");
			
			/*====== memForm element log  start ==========================================*/
			
			//############################################# 자바스크립트 버전 START
			/*
				자바스크립트 버전
				
				id 값 : 
					var v1 = document.getElementById('id_name').value;
				name 값 :
					var v2 = document.form_name.input_name.value;
				name 값 :
					var v3 = document.getElementsByName('mgender');
			*/
			/*
				1. console.log() : 함수는 웹 브라우저 콘솔에 프린트 하는 함수이다.
								   System.out.println()과 같다.
				2. document: <html></html>
				3. memForm : form 태그의 name 속성의 값 form name="memForm"
				4. mnum : memForm 태그의 input name="mnum" 속성
				5. value : mnum의 값
				
				<form name="memForm" id="memForm">
					<input type="text" name="mnum" id="mnum" readonly/>
				</form>
			*/
			
			// 회원번호
			console.log("mnum >>> : " + document.memForm.mnum.value);
			
			// 이름
			console.log("mname >>> : " + document.memForm.mname.value);
			
			// 아이디
			console.log("mid >>> : " + document.memForm.mid.value);
			
			// 패스워드
			console.log("mpw >>> : " + document.memForm.mpw.value);
			console.log("mpw_r >>> : " + document.memForm.mpw_r.value);
			
			// 핸드폰
			console.log("mhp >>> : " + document.memForm.mhp.value);
			console.log("mhp1 >>> : " + document.memForm.mhp1.value);
			console.log("mhp2 >>> : " + document.memForm.mhp2.value);
			
			// 이메일
			console.log("memail >>> : " + document.memForm.memail.value);
			console.log("memail1 >>> : " + document.memForm.memail1.value);
			
			// 성별
			var mgender_check = document.getElementsByName('mgender');
			for (var i=0; i < mgender_check.length; i++) {
				if (mgender_check[i].checked == true) {
					console.log("mgender_check[" + i + "].value >>> : " + mgender_check[i].value);
				}
			}
			
			// 취미
			var mhobby_check = document.getElementsByName('mhobby');
			for (var i=0; i < mhobby_check.length; i++) {
				if (mgender_check[i].checked == true) {
					console.log("mhobby_check[" + i + "].value >>> : " + mhobby_check[i].value);
				}
			}
			
			// 주소
			console.log("mzonecode >>> : " + document.memForm.mzone.value);
			console.log("mroadaddress >>> : " + document.memForm.mroad.value);
			console.log("mroadaddressdetail >>> : " + document.memForm.mroaddetail.value);
			console.log("mjibunaddress >>> : " + document.memForm.mjibun.value);
			
			// 소개글
			console.log("mmsg >>> : " + document.memForm.mmsg.value);
			//############################################# 자바스크립트 버전 END
			
			//############################################# jQuery 버전 START
			/*
			jQuery 버전
			
			id 값:
				var v1 = $("#id_name").val();
			
			name 값 :
				var v2_0 = $('input[name=input_name]').val();
				var v2_1 = $('input:radio[name=mgender]:checked').val();
				var v2_2 = $('select[name=mtel]').val();
				var v2_3 = $('input:checkbox[name=mhobby]');
				var v2_4 = $('textarea[name=minfo]').val();
				
			class 값:
				var v3 = $('.class_name').val();
			*/
			
			// 회원번호
			console.log("mnum >>> : " + $('#mnum').val());
			
			// 이름
			console.log("mname >>> : " + $("input[name=mname]").val());
			
			// 아이디
			console.log("mid >>> : " + $('input[name=mid]').val());
			
			// 패스워드
			console.log("mpw >>> : " + $('input[name=mpw]').val());
			console.log("mpw_r >>> : " + $('input[name=mpw_r]').val());
			
			// 성별
			var mgender_check = $('input:radio[name=mgender]:checked').val();
			console.log("mgender_check.value >>> : " + mgender_check);
			
			// 취미
			var mhobby_check = $('input:checkbox[name=mhobby]').each(function(){
				if (this.checked = true) {
					console.log("mhobby_check.value >>> : " + this.value);
				}
			});
			
			// 주소
			console.log("mzonecode >>> : " + $('input[name=mzone]').val());
			consol.log("mroadaddress >>> : " + $('input[name=mroad]').val());
			console.log("mroadaddressdetail >>> : " + $('input[name=mroaddetail]').val());
			console.log("mjibunaddress >>> : " + $('input[name=mjibun]').val());
			
			// 소개글
			console.log("mmsg >>> : " + $('textarea[name=mmsg]').val());
			//############################################# jQuery 버전 END
			
			/*====== memForm element log  end ==========================================*/
			$("#memForm")
			.attr({ // {} <- 리터럴 객체
					"action":"/KosMember/kosmem/memInsert.jsp",
				    "method":"GET",
				    "enctype":"application/x-www-form-urlencoded"
			}).submit();	
		}); // end of $("#memInsertBtn")
		/*====== memForm 태그 END ==========================================*/
	});
	
</script>

<style type="text/css">
	/*====== div START ==========================================*/
	div {
			margin: 50px 0px 0px 100px;
		}	
	/*====== div END ==========================================*/
</style>

</head>
<body>
<div>
<h3>회원 가입</h3>
<hr>
<form name="memForm" id="memForm">
<table border="1">
<tr>
	<td colspan="2">회원 가입</td>	
</tr>
<tr>
	<td>회원번호</td>
	<td><input type="text" name="mnum"  id="mnum" readonly /></td>
</tr>
<tr>
	<td>이름</td>
	<td><input type="text" name="mname" id="mname" /></td>
</tr>
<tr>
	<td>아이디</td>
	<td>	
		<input type="text" name="mid" id="mid" placeholder="아이디체크" />
		<input type="button" name="midCheck" id="midCheck" value="아이디중복확인" />
	</td>
</tr>
<tr>
	<td>패스워드</td>
	<td>
		<input type="text" name="mpw" id="mpw" style="width:100px"/><br>
		<input type="text" name="mpw_r" id="mpw_r" placeholder="비밀번호확인" style="width:100px"/>
		<input type="button"  name="mpwCheck" id="mpwCheck" value="비밀번호확인">
	</td>
</tr>
<tr>
	<td>핸드폰</td>
	<td>
		<select name="mhp" id="mhp" style="width:50px;">
        	<option value="010">010</option>
        	<option value="011">011</option>
        	<option value="016">016</option>
        	<option value="017">017</option>		        	
         </select>
         - <input type="text" name="mhp1" id="mhp1" maxlength="4" style="width:50px;"/>
         - <input type="text" name="mhp2" id="mhp2" maxlength="4" style="width:50px;"/>
	</td>
</tr>
<tr>
	<td>이메일</td>
	<td>		
		<input type="text" name="memail"  id="memail" style="width:100px"/>
		@ <input type="text" name="memail1" id="memail1" style="width:100px" placeholder="직접입력" />
		<select name="memail2" id="memail2">
        	 <option value="1" selected>직접입력</option>
       		 <option value="naver.com">naver.com</option>	       	   
      		 <option value="gmail.com">gmail.com</option>
      		 <option value="daum.net">daum.net</option>	       	   
         </select>
	</td>
</tr>
<tr>
	<td>성별</td>
	<td> 
		<input type="radio" name="mgender" value="01" checked="checked" />여자
		<input type="radio" name="mgender" value="02" /> 남자
	</td>
</tr>
<tr>
	<td>취미</td>
	<td> 
		<input type="checkbox" name="mhobby" value="01" />독서		      
		<input type="checkbox" name="mhobby" value="02" />운동
		<input type="checkbox" name="mhobby" value="03" />음악감상
		<input type="checkbox" name="mhobby" value="04" />여행
	</td>
</tr>
<tr>
	<td>주소</td>
 	<td>
 		<input type="text" name="mzone" id="mzone" placeholder="우편번호" style="width:70px" maxlength="6" >
 		<input type="button" name="mzone_btn" id="mzone_btn" value="우편번호 찾기"><br>	 	
 		<input type="text" name="mroad" id="mroad" placeholder="도로명주소" style="width:250px"><br>	 	
 		<input type="text" name="mroaddetail" id="mroaddetail" placeholder="도로명주소 상세주소" style="width:250px"><br>	 	
 		<input type="text" name="mjibun" id="mjibun" placeholder="지번주소" style="width:250px">
 	</td>
</tr>
<tr>
	<td>소개글</td>
	<td>
		<textarea name="mmsg" id="mmsg" rows="5" cols="50"></textarea>
	</td>
</tr>
<tr>
	<td colspan="2"> 
		<input type="hidden" id="isudtype" name="isudtype" value="I">		
		<input type="button" value="jsp_보내기" id="memInsertBtn" />	
		<input type="reset" value="취소" />
	</td>				
</tr>
</table>				 		        		     
</form>	
</div>		
</body>
</html>

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

  • 지난 금요일에 주신 자료 그대로 타이핑하기

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

지난 금요일에 주신 자료 그대로 타이핑하기

  • 데이터 흐름 파악하면서 타이핑하기

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

  • 지난 금요일에 주신 자료 그대로 타이핑하기
  • mem.html - 노트, 로그찍기 추가됨

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

  • 지난 금요일에 주신 자료 그대로 타이핑하기
    • mem.html find 함수, each 함수 기억해두기
      • $().change(function(){ $().each(); });
  • JSON 맛보기

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

지난 금요일에 주신 자료 그대로 타이핑하기

  • mem.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 폼</title>
<!-- 디바이스에 최적화된 크기로 출력됨 -->
<meta name="viweport" content="width=device-width, iitail-scale=1">

<!-- jQuery CDN 불러오기  -->
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- 다음 주소록 OPEN API CDN 불러오기  -->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

<script type="text/javascript">
	
	$(document).ready(function(){
		alert("ready >>> : ");
		
		// 아이디 중복체크		
		$("#midCheck").click(function(){		
			alert("midCheck >>> : Ajax 배워서 할 예정임 ㅋ ");		
			console.log("idCheck >>> : ");
			
			let midVal = $("#mid").val();
			if (midVal == '') {
				alert("중복 체크할 아이디를 입력하세요 >>> : ");
				$("#mid").focus();
				return false;
			}
		});
		
		// 비밀번호 체크 
		$("#mpwCheck").click(function(){
			console.log("mpwCheck 함수 진입");
			var pw = $("#mpw").val();
			var pw_r = $("#mpw_r").val();
			alert(pw + " : " + pw_r);
			if(pw == pw_r) {
				alert("비밀번호가 같습니다.");
				$("#mpw_r").val('');			
				$("#mhp").focus();						
				return true;
			} else {
				alert("비밀번호가 다릅니다.");
				$("#mpw").val('')
				$("#mpw_r").val('');
				$("#mpw").focus();			
				return false;
			}
		});
		
		// 핸드폰
		
		// 이메일 		
		$('#memail2').change(function(){	
			$("#memail2 option:selected").each(function () {
				if($(this).val()== '1'){ // 직접입력일 경우 
						var aa = $("#memail1").val();
						// alert("aa >>> : " + aa);
						$("#memail1").val(''); //값 초기화 
						$("#memail1").attr("readonly",false); // 활성화 				
				}else{ // 직접입력이 아닐경우 
						$("#memail1").val($(this).text()); // 선택값 입력 
						$("#memail1").attr("readonly",true); // 비활성화 
				}
			}); 
		}); 
		
		// 우편번호	
		$("#mzone_btn").click(function(){
			console.log("mzone_btn >>> : ");
			new daum.Postcode({
				oncomplete: function(data) {
				    $("#mzone").val(data.zonecode); // 5자리 새우편번호 사용
				    $("#mroad").val(data.roadAddress); // 도로명 주소
				    $("#mjibun").val(data.jibunAddress); // 지번주소			
				}
			}).open();
		});
		
		// memForm 태그에 바인딩 된 데이터 jsp 로 보내기 
		$("#memInsertBtn").click(function(){
			// alert("mzone_btn >>> : ");
			// console.log("mzone_btn >>> : ");
			
			$("#memForm")
			.attr({ // {} <- 리터럴 객체
					"action":"/KosMember/kosmem/memInsert.jsp",
				    "method":"GET",
				    "enctype":"application/x-www-form-urlencoded"
			}).submit();	
		});
	});
	
</script>

<style type="text/css">
	div {
			margin: 50px 0px 0px 100px;
		}	
</style>

</head>
<body>
<div>
<h3>회원 가입</h3>
<hr>
<form name="memForm" id="memForm">
<table border="1">
<tr>
	<td colspan="2">회원 가입</td>	
</tr>
<tr>
	<td>회원번호</td>
	<td><input type="text" name="mnum"  id="mnum" readonly /></td>
</tr>
<tr>
	<td>이름</td>
	<td><input type="text" name="mname" id="mname" /></td>
</tr>
<tr>
	<td>아이디</td>
	<td>	
		<input type="text" name="mid" id="mid" placeholder="아이디체크" />
		<input type="button" name="midCheck" id="midCheck" value="아이디중복확인" />
	</td>
</tr>
<tr>
	<td>패스워드</td>
	<td>
		<input type="text" name="mpw" id="mpw" style="width:100px"/><br>
		<input type="text" name="mpw_r" id="mpw_r" placeholder="비밀번호확인" style="width:100px"/>
		<input type="button"  name="mpwCheck" id="mpwCheck" value="비밀번호확인">
	</td>
</tr>
<tr>
	<td>핸드폰</td>
	<td>
		<select name="mhp" id="mhp" style="width:50px;">
        	<option value="010">010</option>
        	<option value="011">011</option>
        	<option value="016">016</option>
        	<option value="017">017</option>		        	
         </select>
         - <input type="text" name="mhp1" id="mhp1" maxlength="4" style="width:50px;"/>
         - <input type="text" name="mhp2" id="mhp2" maxlength="4" style="width:50px;"/>
	</td>
</tr>
<tr>
	<td>이메일</td>
	<td>		
		<input type="text" name="memail"  id="memail" style="width:100px"/>
		@ <input type="text" name="memail1" id="memail1" style="width:100px" placeholder="직접입력" />
		<select name="memail2" id="memail2">
        	 <option value="1" selected>직접입력</option>
       		 <option value="naver.com">naver.com</option>	       	   
      		 <option value="gmail.com">gmail.com</option>
      		 <option value="daum.net">daum.net</option>	       	   
         </select>
	</td>
</tr>
<tr>
	<td>성별</td>
	<td> 
		<input type="radio" name="mgender" value="01" checked="checked" />여자
		<input type="radio" name="mgender" value="02" /> 남자
	</td>
</tr>
<tr>
	<td>취미</td>
	<td> 
		<input type="checkbox" name="mhobby" value="01" />독서		      
		<input type="checkbox" name="mhobby" value="02" />운동
		<input type="checkbox" name="mhobby" value="03" />음악감상
		<input type="checkbox" name="mhobby" value="04" />여행
	</td>
</tr>
<tr>
	<td>주소</td>
 	<td>
 		<input type="text" name="mzone" id="mzone" placeholder="우편번호" style="width:70px" maxlength="6" >
 		<input type="button" name="mzone_btn" id="mzone_btn" value="우편번호 찾기"><br>	 	
 		<input type="text" name="mroad" id="mroad" placeholder="도로명주소" style="width:250px"><br>	 	
 		<input type="text" name="mroaddetail" id="mroaddetail" placeholder="도로명주소 상세주소" style="width:250px"><br>	 	
 		<input type="text" name="mjibun" id="mjibun" placeholder="지번주소" style="width:250px">
 	</td>
</tr>
<tr>
	<td>소개글</td>
	<td>
		<textarea name="mmsg" id="mmsg" rows="5" cols="50"></textarea>
	</td>
</tr>
<tr>
	<td colspan="2"> 
		<input type="hidden" id="isudtype" name="isudtype" value="I">		
		<input type="button" value="jsp_보내기" id="memInsertBtn" />	
		<input type="reset" value="취소" />
	</td>				
</tr>
</table>				 		        		     
</form>	
</div>		
</body>
</html>

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

<%@page import="a.b.c.kos.mem.service.MemService"%>    
<%@page import="a.b.c.kos.mem.service.MemServiceImpl"%>    
<%@ page import="a.b.c.kos.mem.vo.MemVO" %>
<%@ page import="a.b.c.common.ChabunUtil" %>

<%@ page import=" org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 화면</title>
</head>
<body>
<h3>회원 가입</h3>
<hr>
<% request.setCharacterEncoding("UTF-8"); %>
<%
	Logger logger = LogManager.getLogger(this.getClass());

	logger.info("memInsert.jsp 페이지 >>> : ");

	//회원번호
	String mnum = ChabunUtil.getMemChabun("d");	
	// 회원이름
	String mname = request.getParameter("mname");	
	// 아이디
	String mid = request.getParameter("mid");	
	// 패스워드
	String mpw = request.getParameter("mpw");	
	// 핸드폰
	String mhp = request.getParameter("mhp");
	String mhp1 = request.getParameter("mhp1");
	String mhp2 = request.getParameter("mhp2");
	mhp = mhp.concat(mhp1).concat(mhp2);
	// 이메일
	String memail = request.getParameter("memail");
	String memail1 = request.getParameter("memail1");						
	memail = memail.concat("@").concat(memail1);	
	// 성별
	String mgender = request.getParameter("mgender");	
	// 취미 
	String[] hobby = request.getParameterValues("mhobby");
	String mhobby = "";
	for (int i=0; i < hobby.length; i++){
		mhobby += hobby[i] + ",";
	}		
	// 주소 : 우편번호
	String mzone = request.getParameter("mzone");	
	// 주소 : 도로명 주소						
	String mroad = request.getParameter("mroad");
	String mroaddetail = request.getParameter("mroaddetail");						
	mroad = mroad.concat("@").concat(mroaddetail);
	// 주소 : 지번 주소 
	String mjibun = request.getParameter("mjibun");	
	// 내소개
	String mmsg = request.getParameter("mmsg");	
	
	MemVO mvo = null;
	mvo = new MemVO();
	mvo.setMnum(mnum);
	mvo.setMname(mname);
	mvo.setMid(mid);
	mvo.setMpw(mpw);
	mvo.setMhp(mhp);
	mvo.setMemail(memail);
	mvo.setMgender(mgender);
	mvo.setMhobby(mhobby);
	mvo.setMzone(mzone);
	mvo.setMroad(mroad);	
	mvo.setMjibun(mjibun);
	mvo.setMmsg(mmsg);
	
	MemService ms = new MemServiceImpl();
	boolean bool = ms.memInsert(mvo);
	
	if (bool){
%>
		<script>
			alert("회원가입 성공 >>> :");
			location.href="/KosMember/kosmem/memSelectAll.jsp";
		</script>
<%		
	}else{
%>
		<script>
			alert("회원가입 실패 >>> :");
			history.go(-1);
		</script>
<%		
	}
	
%>
</body>
</html>
  • memSelectAll.jsp
<%@page import="a.b.c.common.CodeUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@page import="a.b.c.kos.mem.service.MemService"%>    
<%@page import="a.b.c.kos.mem.service.MemServiceImpl"%>    
<%@ page import="a.b.c.kos.mem.vo.MemVO" %>
<%@ page import="a.b.c.common.CodeUtil" %>

<%@ page import="java.util.ArrayList" %>

<%@ page import=" org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 디바이스에 최적화된 크기로 출력됨 -->
<meta name="viweport" content="width=device-width, initial-scale=1">
<title>회원 전체 조회</title>
</head>
<body>
<% request.setCharacterEncoding("EUC-KR");%> 
SELECT ALL
<%	
	Logger logger = LogManager.getLogger(this.getClass());

	logger.info("memSelectAll.jsp 페이지 >>> : ");

	String searchFilter =  request.getParameter("searchFilter");	
	String keyword =  request.getParameter("keyword");	
	String fromdate =  request.getParameter("fromdate");	
	String todate =  request.getParameter("todate");	

	MemVO mvo = null;
	mvo = new MemVO();
	
	mvo.setSearchFilter(searchFilter);
	mvo.setKeyword(keyword);
	mvo.setFromdate(fromdate);
	mvo.setTodate(todate);
	
	MemService ms = new MemServiceImpl();
	ArrayList<MemVO> aList = ms.memSelectAll(mvo);
	if (aList == null) return;
	
	int nCnt = aList.size();
	out.println(":::: 전체 조회 건수  " + nCnt + " 건<br>");	
%>
<h3>회원 전체 조회</h3>
<hr>
<form name="memSelectAllForm" id="memSelectAllForm">
<table border="1">
<thead>

<tr>
	<td class="tt"><input type="checkbox" name="chkAll" id="chkAll"></td>
	<td class="tt">순번</td>
	<td class="tt">회원번호</td>
	<td class="tt">이름</td>
	<td class="tt">아이디</td>
	<td class="tt">패스워드</td>
	<td class="tt">핸드폰</td>
	<td class="tt">이메일</td>
	<td class="tt">성별</td>	
	<td class="tt">취미</td>
	<td class="tt">우편번호</td>
	<td class="tt">도로명주소</td>
	<td class="tt">지번주소</td>
	<td class="tt">내용</td>	
	<td class="tt">수정일</td>
</tr>
</thead>
<%	
	String hp = "";
	String email = "";
	String gender = "";
	String hobby = "";
	String addr = "";
	
	for(int i=0; i<nCnt; i++){		
		MemVO _mvo = aList.get(i);
				
		gender = CodeUtil.gender(_mvo.getMgender());			
		hobby = CodeUtil.hobbys(_mvo.getMhobby());		
		addr = _mvo.getMroad().replace("@", " ");
		
		logger.info("gender >>> : " + gender);
		logger.info("hobby >>> : " + hobby);
		logger.info("addr >>> : " + addr);
%>					
<tbody>
<tr>
	<td class="tt">
		<input type="checkbox" id="mnumCheck" name="mnumCheck" value=<%= _mvo.getMnum() %> onclick="checkOnly(this)">
	</td>		
	<td class="tt"><%= i + 1 %></td>
	<td class="tt"><%= _mvo.getMnum() %> </td>
	<td class="tt"><%= _mvo.getMname() %> </td>
	<td class="tt"><%= _mvo.getMid() %> </td>
	<td class="tt"><%= _mvo.getMpw() %> </td>
	<td class="tt"><%= _mvo.getMhp() %> </td>
	<td class="tt"><%= _mvo.getMemail() %> </td>
	<td class="tt"><%= gender %> </td>
	<td class="tt"><%= hobby %> </td>
	<td class="tt"><%= _mvo.getMzone() %> </td>
	<td class="tt"><%= addr %> </td>
	<td class="tt"><%= _mvo.getMjibun() %> </td>
	<td class="tt"><%= _mvo.getMmsg() %> </td>	
	<td class="tt"><%= _mvo.getUpdatedate() %> </td>			
</tr>	
<%
	}//end of if
%>						
<tr>
	<td colspan="20" align="right">
		<input type="hidden" name="ISUD_TYPE" id="ISUD_TYPE" value="">			
		<input type="button" value="등록" id="I">
		<input type="button" value="조회" id="SALL">
		<input type="button" value="수정" id="U">
		<input type="button" value="삭제" id="D">									
	</td>
</tr>	
</tbody>			
</table>
</form>		
</body>
</html>

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

지난 금요일에 주신 자료 그대로 타이핑하기

  • memSelect.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@page import="a.b.c.kos.mem.service.MemService"%>    
<%@page import="a.b.c.kos.mem.service.MemServiceImpl"%>    
<%@ page import="a.b.c.kos.mem.vo.MemVO" %>
<%@ page import="a.b.c.common.CodeUtil" %>

<%@ page import="java.util.ArrayList" %>

<%@ page import=" org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 전체 조회</title>
<!-- 디바이스에 최적화된 크기로 출력됨 -->
<meta name="viweport" content="width=device-width, initial-scale=1">

<!-- jQuery CDN 불러오기  -->
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- 다음 주소록 OPEN API CDN 불러오기  -->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

<script type="text/javascript">
	
	//jQuery 는 스크립트 블럭 ready 함수 블럭에 만들어야 한다.
	$(document).ready(function(){
		
		// 이메일 		
		$('#memail2').change(function(){	
			$("#memail2 option:selected").each(function () {
				if($(this).val()== '1'){ //직접입력일 경우 
						var aa = $("#memail1").val();
						//alert("aa >>> : " + aa);
						$("#memail1").val(''); //값 초기화 
						$("#memail1").attr("readonly",false); //활성화 				
				}else{ //직접입력이 아닐경우 
						$("#memail1").val($(this).text()); //선택값 입력 
						$("#memail1").attr("readonly",true); //비활성화 
				}
			}); 
		}); 
		
		// 우편번호	
		$("#mzone_btn").click(function(){
			console.log("mzone_btn >>> : ");
			new daum.Postcode({
				oncomplete: function(data) {
				    $("#mzone").val(data.zonecode); // 5자리 새우편번호 사용
				    $("#mroad").val(data.roadAddress); // 도로명 주소
				    $("#mroaddetail").val(''); // 도로명 상세주소
				    $("#mjibun").val(data.jibunAddress); // 지번주소			
				}
			}).open();
		});
		// 수정
		$("#memUpdateBtn").click(function(){
			alert("memUpdateBtn 버튼 클릭 성공 >>> : ");
			
			$("#memSelectForm").attr(
				{
					"action":"/KosMember/kosmem/memUpdateOk.jsp",
					"method":"GET"
				}
			).submit();
		});
		
		// 삭제
		$("#memDeleteBtn").click(function(){
			alert("memDeleteBtn 버튼 클릭 성공 >>> : ");
						
			$("#memSelectForm").attr(
				{
					"action":"/KosMember/kosmem/memDeleteOk.jsp",
					"method":"GET"
				}
			).submit();
		});
	});

</script>
</head>
<body onload="compCheck()">
<% request.setCharacterEncoding("EUC-KR");%> 
SELECT ALL
<%	
	Logger logger = LogManager.getLogger(this.getClass());

	logger.info("memSelect.jsp 페이지 >>> : ");

	String mnum = request.getParameter("mnum");
	MemVO mvo = null;
	mvo = new MemVO();
	mvo.setMnum(mnum);
	logger.info("mnum >>> : " + mvo.getMnum());
	
	MemService ms = new MemServiceImpl();
	ArrayList<MemVO> aList = ms.memSelect(mvo);
	if(aList == null) return;
	
	String mhp = "";
	String memail = "";
	String mgender = "";
	String mhobby = "";
	String mzone = "";
	String mroad = "";	
	String mroaddetail = "";
	String mjibun = "";

	MemVO _mvo = aList.get(0);
	
	// 핸드폰
	mhp = CodeUtil.hp(_mvo.getMhp());
	logger.info("mhp >>> : " + mhp);
	String hp[] = mhp.split("-");
	String mhp0 = hp[0];
	String mhp1 = hp[1];
	String mhp2 = hp[2];
	
	// 이메일
	memail = _mvo.getMemail();
	logger.info("memail >>> : " + memail);
	
	// 성별
	mgender = CodeUtil.gender(_mvo.getMgender());
	logger.info("mgender >>> : " + mgender);
	
	// 취미
	mhobby = _mvo.getMhobby();
	logger.info("mhobby >>> : " + mhobby);
	
	// 우편번호, 도로명 주소, 지번 주소
	mzone = _mvo.getMzone();
	logger.info("mzone >>> : " + mzone);
	
	mroad = _mvo.getMroad();
	logger.info("mroad >>> : " + mroad);
	
	String addr[] = mroad.split("@");
	mroad = addr[0];
	logger.info("mroad >>> : " + mroad);
	mroaddetail = addr[1];
	logger.info("mroaddetail >>> : " + mroaddetail);
	
	mjibun = _mvo.getMjibun();
	logger.info("mjibun >>> : " + mjibun);
%>
<div>
<h3>회원 정보 수정 삭제</h3>
<hr>
<form name="memSelectForm" id="memSelectForm">
<table border="1">
<script>
function compCheck(){
	console.log("compCheck >>> 진입 >>> : ");
	
	// 핸드폰 
	var hp0 = '<%= mhp0 %>';
	// hp0 = '017';
	// alert("hp0 >>> : " + hp0);
	if ('010' == hp0){		
		document.memSelectForm.mhp.options[0].selected = true;
	}
	if ('011' == hp0){		
		document.memSelectForm.mhp.options[1].selected = true;
	}
	if ('016' == hp0){		
		document.memSelectForm.mhp.options[2].selected = true;
	}
	if ('017' == hp0){		
		document.memSelectForm.mhp.options[3].selected = true;
	}
	
	// 성별
	var gen = '<%= mgender %>';
	console.log("gen >>> : "  + gen);
	
	if ('여자' == gen){
		document.getElementsByName("mgender")[0].checked = true;
	}
	if ('남자' == gen){
		document.getElementsByName("mgender")[1].checked = true;
	}
	
	// 이메일 
	var email = '<%= memail %>';	
	var emails = email.split('@');
	document.getElementById("memail").value = emails[0];
	document.getElementById("memail1").value = emails[1];
	
	// 취미
	var hobs = '<%= mhobby %>';
	console.log("hobs >>> : "  + hobs);
	var hob = hobs.split(',');
	for (var m=0; m < hob.length; m++){
		var hobValue = hob[m];
		console.log("hobValue >>> : " + hobValue);
		if ('01' == hobValue){
			document.getElementsByName("mhobby")[0].checked = true;
		}
		if ('02' == hobValue){
			document.getElementsByName("mhobby")[1].checked = true;
		}
		if ('03' == hobValue){
			document.getElementsByName("mhobby")[2].checked = true;
		}
		if ('04' == hobValue){
			document.getElementsByName("mhobby")[3].checked = true;
		}	
	}
}
</script>
<tr>
	<td colspan="2">회원 정보</td>	
</tr>
<tr>
	<td>회원번호</td>
	<td><input type="text" name="mnum"  id="mnum" value="<%= _mvo.getMnum() %>" readonly /></td>
</tr>
<tr>
	<td>이름</td>
	<td><input type="text" name="mname" id="mname" value="<%= _mvo.getMname() %>"/></td>
</tr>
<tr>
	<td>아이디</td>
	<td>	
		<input type="text" name="mid" id="mid" value="<%= _mvo.getMid() %>"/>		
	</td>
</tr>
<tr>
	<td>패스워드</td>
	<td>
		<input type="text" name="mpw" id="mpw" value="<%= _mvo.getMpw() %>" style="width:100px"/><br>
	</td>
</tr>
<tr>
	<td>핸드폰</td>
	<td>
		<select name="mhp" id="mhp" style="width:50px;">
        	<option value="010">010</option>
        	<option value="011">011</option>
        	<option value="016">016</option>
        	<option value="017">017</option>		        	
         </select>
         - <input type="text" name="mhp1" id="mhp1" value="<%= mhp1 %>" maxlength="4" style="width:50px;"/>
         - <input type="text" name="mhp2" id="mhp2" value="<%= mhp1 %>" maxlength="4" style="width:50px;"/>
	</td>
</tr>
<tr>
	<td>이메일</td>
	<td>		
		<input type="text" name="memail"  id="memail" style="width:100px"/>
		@ <input type="text" name="memail1" id="memail1" style="width:100px" placeholder="직접입력" />
		<select name="memail2" id="memail2">
        	 <option value="1" selected>직접입력</option>
       		 <option value="naver.com">naver.com</option>	       	   
      		 <option value="gmail.com">gmail.com</option>
      		 <option value="daum.net">daum.net</option>	       	   
         </select>
	</td>
</tr>
<tr>
	<td>성별</td>
	<td> 
		<input type="radio" name="mgender" value="01" checked="checked" />여자
		<input type="radio" name="mgender" value="02" /> 남자
	</td>
</tr>
<tr>
	<td>취미</td>
	<td> 
		<input type="checkbox" name="mhobby" value="01" />독서		      
		<input type="checkbox" name="mhobby" value="02" />운동
		<input type="checkbox" name="mhobby" value="03" />음악감상
		<input type="checkbox" name="mhobby" value="04" />여행
	</td>
</tr>
<tr>
	<td>주소</td>
 	<td>
 		<input type="text" name="mzone" id="mzone" placeholder="우편번호" value="<%= mzone %>" style="width:70px" maxlength="6" >
 		<input type="button" name="mzone_btn" id="mzone_btn" value="우편번호 찾기"><br>	 	
 		<input type="text" name="mroad" id="mroad" placeholder="도로명주소" value="<%= mroad %>" style="width:250px"><br>	 	
 		<input type="text" name="mroaddetail" id="mroaddetail" placeholder="도로명주소 상세주소" value="<%= mroaddetail %>" style="width:250px"><br>	 	
 		<input type="text" name="mjibun" id="mjibun" placeholder="지번주소" value="<%= mjibun %>" style="width:250px">
 	</td>
</tr>
<tr>
	<td>소개글</td>
	<td>
		<textarea name="mmsg" id="mmsg" rows="5" cols="50"><%= _mvo.getMmsg() %></textarea>
	</td>
</tr>
<tr>
	<td colspan="2"> 	
		<input type="button" value="회원정보수정" id="memUpdateBtn" />
		<input type="button" value="회원정보삭제" id="memDeleteBtn" />	
		<input type="reset" value="취소" />
	</td>				
</tr>
</table>				 		        		     
</form>	
</div>		
</body>
</html>

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

<%@ page import="a.b.c.kos.mem.service.MemService" %>
<%@ page import="a.b.c.kos.mem.service.MemServiceImpl" %>
<%@ page import="a.b.c.kos.mem.vo.MemVO" %>
<%@ page import="a.b.c.common.CodeUtil" %>

<%@ page import="java.util.ArrayList" %>

<%@ page import="org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>회원정보 수정</title>
</head>

<body>
    <h3>회원정보 수정</h3>
    <hr>
    <%
        Logger logger = LogManager.getLogger(this.getClass());

        logger.info("memUpdateOk.jsp 페이지 >>> : ");

        // 회원번호
        String mnum = request.getParameter("mnum");

        // 이메일
        String memail = request.getParameter("memail");
        String memail1 = request.getParameter("memail1");
        memail = memail.concat("@").concat(memail1);

        // 취미
        String[] hobby = request.getParameterValues("mhobby");
        String mhobby = "";
        for (int i=0; i < hobby.length; i++) {
            mhobby += hobby[i] + ",";
        } 

        // 주소 : 우편번호
        String mzone = request.getParameter("mzone");
        // 주소 : 도로명 주소
        String mroad = request.getParameter("mroad");
        String mroaddetail = request.getParameter("mroaddetail");
        mroad = mroad.concat("@").concat(mroaddetail);
        // 주소 : 지번 주소
        String mjibun = request.getParameter("mjibun");

        // vo 세팅
        MemVO mvo = null;
        mvo = new MemVO();
        mvo.setMnum(mnum);
        mvo.setMemail(memail);
        mvo.setMhobby(mhobby);
        mvo.setMzone(mzone);
        mvo.setMroad(mroad);
        mvo.setMjibun(mjibun);

        logger.info("mnum >>> : " + mvo.getMnum());
        logger.info("memail >>> : " + mvo.getMemail());
        logger.info("mhobby >>> : " + mvo.getMhobby()); 
        logger.info("mzone >>> : " + mvo.getMzone());
        logger.info("mroad >>> : " + mvo.getMroad());
        logger.info("mjibun >>> : " + mvo.getMjibun());

        MemService ms = new MemServiceImpl();
        boolean bool = ms.memUpdate(mvo);
        if (bool) {
    %>
            <script>
                alert("수정 성공");
                location.href="/KosMember/kosmem/memSelectAll.jsp";
            </script>
    <%
        } else {
    %>
            <script>
                alert("수정 실패");
                history.go(-1);
            </script>
    <%
        }
    %>
</body>
</html>
  • memDeleteOk.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>
<h3>회원정보 삭제</h3>
<hr>
</body>
</html>
  • index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>회원 관리 연습</title>
    <!-- CDN -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<!-- date picker -->
	<link rel="stylesheet" href="/KosMember/calendar_datepicker/jquery-ui-1.12.1/jquery-ui.min.css">
	<script src="/KosMember/calendar_datepicker/jquery-ui-1.12.1/jquery-ui.min.js"></script>
	<script src="/KosMember/calendar_datepicker/jquery-ui-1.12.1/datepicker-ko.js"></script>
	<script type="text/javascript">
		
		$(document).ready(function(){
			
			// 날짜 검색 from date $("#fromdate").datepicker(value);
			$("#fromdate").datepicker(
				{
					showOn: "button",
			        buttonImage: "/KosMember/calendar_datepicker/images/calendar.gif",
				    buttonImageOnly: false,
					buttonText: "Select date",				
					onClose: function( selectedDate ) {    
						// 시작일(fromdate) datepicker가 닫힐때
						// 종료일(todate)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
						$("#todate").datepicker( "option", "minDate", selectedDate );
					}       
				}
			);
			
			// 날짜 검색 to date
			$("#todate").datepicker(
				{
					showOn: "button",
			        buttonImage: "/KosMember/calendar_datepicker/images/calendar.gif",
				    buttonImageOnly: false,
					buttonText: "Select date",
					onClose: function( selectedDate ) {
						// 종료일(todate) datepicker가 닫힐때
						// 시작일(fromdate)의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정 
						$("#fromdate").datepicker( "option", "maxDate", selectedDate );
					}     				
				}
			);
			
			$("#search_btn").click(function(){
				console.log('검색버튼 클릭! >>> 전체조회 조건검색 컨트롤러로 이동');
				alert('검색버튼 클릭! >>> 전체조회 조건검색 컨트롤러로 이동');
				
				$("#searchForm").attr({				
					"action":"/KosMember/kosmem/memSelectAll.jsp",
					"method":"GET"
				}).submit();
			});
			
			$("#mnumSearch_btn").click(function(){
				$("#mnumSearch_form").attr({
					"action":"/KosMember/kosmem/memSelect.jsp",
				    "method":"GET",
				    "enctype":"application/x-www-form-urlencoded"
				}).submit();
			});
		});
    </script>
</head>

<body>
    <h3>JSP MODEL I ARCHITECTURE</h3>
    <hr>
    <a href="http://localhost:8088/KosMember/kosmem/mem.html">회원가입</a><br>
    <a href="#">회원 검색</a>
        <form name="searchForm" id="searchForm">
            <table>
                <tr>
                    <td>
                        <select id="searchFilter" name="searchFilter"style="width:100px;height:2zpx;">
                            <option value="01" selected>전체</option>
                            <option value="02">회원번호</option>
                            <option value="03">이름</option>
                            <option value="04">아이디</option>
                        </select>
                        <input type="text" id="keyword" name="keyword" placeholder="검색어 입력">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="fromdate" name="fromdate" placeholder="시작일" style="width:100px;height:20px">
                        ~
                        <input type="text" id="todate" name="todate" placeholder="종료일" style="width:100px;height:20px">
                    </td>
                    <td>
						<input type="button" id="search_btn" name="search_btn" value="검색">
						<input type="reset" value="다시">							
					</td>
                </tr>
            </table>
        </form>
    	<br>
    <a href="#">회원정보 수정 삭제</a>
        <form name="mnumSearch_form" id="mnumSearch_form">
            	회원번호 <input type="text" name="mnum" id="mnum" />
                	 <input type="button" id="mnumSearch_btn" value="검색" />
        </form>
        <br>
</body>
</html>
  • CodeUtil.java ← 취미에서 for문의 ‘i < hobby_label.length’ 오류 수정
package a.b.c.common;

public abstract class CodeUtil {
	
		
	// 성별 라벨
	public static final String[] gender_value = {"여자","남자"};
	
	// 핸드폰 라벨
	public static final String[] hp_value = {"010", "011", "016", "017"};
	
	
	// 취미 라벨
	public static final String[] hobby_label = {"독서", "운동", "음악감상", "여행"};
	public static final String[] hobby_value = {"01", "02", "03", "04"};
		
	// 성별
	public static String gender(String s) {
		return "01".equals(s.toUpperCase()) ? "여자" : "남자";
	}
	
	
	// 핸드폰 
	public static String hp(String s) {

		String s0 = "";
		String s1 = "";
		String s2 = "";
		String ss = "";
		
		if (s !=null && s.length() > 0){			
			int sLen = s.length();			
			if (11 == sLen) {
				s0 = s.substring(0, 3);
				s1 = s.substring(3, 7);
				s2 = s.substring(7);
				ss = s0 + "-" + s1 + "-" + s2;
			}
		}		
		return ss;
	}

	// 취미들 
	public static String hobbys(String s){
		System.out.println(s);
		String h = "";
		String ss[] = s.split(",");
		for (int i=0; i < ss.length; i++){			
			h += hobby(ss[i]) + " ";
		}		
		return h;
	}
	
	// 취미
	public static String hobby(String s) {
		
		String h = "";				
		if (s !=null && s.length() > 0){	
			for (int i=1; i < hobby_label.length+1; i++) {	
				if (("0" + i).equals(s)) {
					h = CodeUtil.hobby_label[i-1];
				}
			}			
		}		
		return h;
	}
		
	
	public static void main(String args[]) {
				
		// 핸드폰
		String hp = CodeUtil.hp("01012341234");		
		System.out.println("hp >>> : " + hp);		
		
		// 성별
		String g = CodeUtil.gender("F");
		System.out.println("g >>> : " + g);
		// 취미
		String h = CodeUtil.hobby("02");
		System.out.println("h >>> : " + h);
		// 취미들
		String hs = CodeUtil.hobbys("01,02,03,04");
		System.out.println("hs >>> : " + hs);		
	}
}

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

  • 지난 금요일에 주신 자료 그대로 타이핑하기
    • 최소 입력과 조회까지는 할 줄 알아야 함
    • 폼 태그 안에 로그 찍기 다 알아야 함

Notes

728x90
저작자표시

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

22-04-06(수) 048일차 [HTML, CSS] 웹에서 데이터를 가져오기, CSS margin과 float 조절  (0) 2022.05.24
22-04-05(화) 047일차 [CSS] CSS 인라인 스타일, 외부 스타일 시트 적용하기  (0) 2022.05.24
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-30(수) 043일차 [HTML, JavaScript] HTML 데이터 주고받기, getData 예제, 미니프로젝트 시작  (0) 2022.05.17

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

  • 현재글22-04-04(월) 046일차 [Java, Oracle, HTML] 지난 금요일에 주신 자료 그대로 타이핑하기

관련글

댓글

티스토리툴바