728x90
수업내용
1교시 (09:30-10:20)
- mem_jquery_1.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 >>> : ");
/*====== memForm 태그 START ==========================================*/
// memForm 태그에 바인딩 된 데이터 jsp 로 보내기
$("#memInsertBtn").click(function(){
alert("mzone_btn >>> : ");
console.log("mzone_btn >>> : ");
// jQuery id
//=================================================================
// mname
/*
var : 자바스크립트 데이터 타입 -> let, const
mname : 변수명 -> 값하고 같이 인식하려고
= : 대입 연산자
$() : jQuery 함수
# : css 셀렉터에서 id 가리키는 키워드 <-- 아이디 선택, name, class, getElementById()
mname : input type=text id의 속성값
*/
/*
이름이 memForm인 폼태그에 하위에 있는
input type=text 태그 중 id 속성의 값이 mname인 태그(엘리먼트, 노드(오브젝트))를
jQuery 함수에서 css 셀렉터 #으로 셀렉트해서
변수명이 mname 변수에 대입을 한다.
*/
var mname = $("#mname");
console.log("mname >>> : " + mname);
console.log("mname >>> : " + JSON.stringify(mname));
var mname_val = mname.val();
console.log("mname_val >>> : " + mname_val);
console.log("mname_val >>> : " + JSON.stringify(mname_val));
// mhp
var mhp = $("#mhp");
console.log("mhp >>> : " + mhp);
console.log("mid >>> : " + JSON.stringify(mid));
var mhp_val = mhp.val();
console.log("mhp_val >>> : " + mhp_val);
console.log("mhp_val >>> : " + JSON.stringify(mhp_val));
var mhp_length = $("#mhp").length;
console.log("mhp_length >>> : " + mhp_length);
console.log("mhp_length >>> : " + JSON.stringify(mhp_length));
var mhp_option = $("#mhp option:selected");
console.log("mhp_option >>> : " + mhp_option);
console.log("mhp_option >>> : " + JSON.stringify(mhp_option));
var mhp_option_val = $("#mhp option:selected").val();
console.log("mhp_option_val >>> : " + mhp_option_val);
console.log("mhp_option_val >>> : " + JSON.stringify(mhp_option_val));
var mhp_option_text = $("#mhp option:selected").text();
console.log("mhp_option_text >>> : " + mhp_option_text);
console.log("mhp_option_text >>> : " + JSON.stringify(mhp_option_text));
// mgender
var mgender = $("#mgender");
console.log("mgender >>> : " + mgender);
console.log("mgender >>> : " + JSON.stringify(mgender));
var mgender_val = mgender.val();
console.log("mgender_val >>> : " + mgender_val);
console.log("mgender_val >>> : " + JSON.stringify(mgender_val));
var mgender_length = mgender.length;
console.log("mgender_length >>> : " + mgender_length);
console.log("mgender_length >>> : " + JSON.stringify(mgender_length));
var mgender_checked = $("#mgender:checked");
console.log("mgender_checked >>> : " + mgender_checked);
console.log("mgender_checked >>> : " + JSON.stringify(mgender_checked));
var mgender_checked_val = $("#mgender:checked").val();
console.log("mgender_checked_val >>> : " + mgender_checked_val);
console.log("mgender_checked_val >>> : " + JSON.stringify(mgender_checked_val));
var mgender_id_01 = $("input:radio[id='mgender']:input[value='01']").val();
console.log("mgender_id_01 >>> : " + mgender_id_01);
console.log("mgender_id_01 >>> : " + JSON.stringify(mgender_id_01));
var mgender_id_02 = $("input:radio[id='mgender']:input[value='02']").val();
console.log("mgender_id_02 >>> : " + mgender_id_02);
console.log("mgender_id_02 >>> : " + JSON.stringify(mgender_id_02));
// mhobby
var mhobby = $("#mhobby");
console.log("mhobby >>> : " + mhobby);
console.log("mhobby >>> : " + JSON.stringify(mhobby));
var mhobby_val = mhobby.val();
console.log("mhobby_val >>> : " + mhobby_val);
console.log("mhobby_val >>> : " + JSON.stringify(mhobby_val));
var mhobby_length = mhobby.length;
console.log("mhobby_length >>> : " + mhobby_length);
console.log("mhobby_length >>> : " + JSON.stringify(mhobby_length));
var mhobby_checked = $("#mhobby:checked");
console.log("mhobby_checked >>> : " + mhobby_checked);
console.log("mhobby_checked >>> : " + JSON.stringify(mhobby_checked));
// var mhobby_checked_val = $("#mhobby:checked").val();
// console.log("mhobby_checked_val >>> : " + mhobby_checked_val);
// console.log("mhobby_checked_val >>> : " + JSON.stringify(mhobby_checked_val));
// jquery name
//=================================================================
// mname
var mname_name = $("input[name=mname]");
console.log("mname_name >>> : " + mname_name);
console.log("mname_name >>> : " + JSON.stringify(mname_name));
var mname_name_val = $("input[name=mname]").val();
console.log("mname_name_val >>> : " + mname_name_val);
console.log("mname_name_val >>> : " + JSON.stringify(mname_name_val));
// mhp
var mhp_name = $("select[name=mhp]");
console.log("mhp_name >>> : " + mhp_name);
console.log("mhp_name >>> : " + JSON.stringify(mhp_name));
var mhp_name_val = $("select[name=mhp]").val();
console.log("mhp_name_val >>> : " + mhp_name_val);
console.log("mhp_name_val >>> : " + JSON.stringify(mhp_name_val));
var mhp_name_length = $("select[name=mhp]").length;
console.log("mhp_name_length >>> : " + mhp_name_length);
console.log("mhp_name_length >>> : " + JSON.stringify(mhp_name_length));
var mhp_name_option = $("select[name=mhp] option:selected");
console.log("mhp_name_option >>> : " + mhp_name_option);
console.log("mhp_name_option >>> : " + JSON.stringify(mhp_name_option));
var mhp_name_option_val = $("select[name=mhp] option:selected").val();
console.log("mhp_name_option_val >>> : " + mhp_name_option_val);
console.log("mhp_name_option_val >>> : " + JSON.stringify(mhp_name_option_val));
var mhp_name_option_text = $("select[name=mhp] option:selected").text();
console.log("mhp_name_option_text >>> : " + mhp_name_option_text);
console.log("mhp_name_option_text >>> : " + JSON.stringify(mhp_name_option_text));
// mgender
var mgender_name = $("input:radio[name='mgender']");
console.log("mgender_name >>> : " + mgender_name);
console.log("mgender_name >>> : " + JSON.stringify(mgender_name));
var mgender_name_val = $("input:radio[name='mgender']").val();
console.log("mgender_name_val >>> : " + mgender_name_val);
console.log("mgender_name_val >>> : " + JSON.stringify(mgender_name_val));
var mgender_name_length = $("input:radio[name='mgender']").length;
console.log("mgender_name_length >>> : " + mgender_name_length);
console.log("mgender_name_length >>> : " + JSON.stringify(mgender_name_length));
var mgender_name_checked = $("input:radio[name='mgender']:checked");
console.log("mgender_name_checked >>> : " + mgender_name_checked);
console.log("mgender_name_checked >>> : " + JSON.stringify(mgender_name_checked));
var mgender_name_checked_length = $("input:radio[name='mgender']:checked").length;
console.log("mgender_name_checked_length >>> : " + mgender_name_checked_length);
console.log("mgender_name_checked_length >>> : " + JSON.stringify(mgender_name_checked_length));
var mgender_name_01_is = $("input:radio[name='mgender']:input[value='01']").is(":checked");
console.log("mgender_name_01_is >>> : " + mgender_name_01_is);
console.log("mgender_name_01_is >>> : " + JSON.stringify(mgender_name_01_is));
var mgender_name_02_is = $("input:radio[name='mgender']:input[value='02']").is(":checked");
console.log("mgender_name_02_is >>> : " + mgender_name_02_is);
console.log("mgender_name_02_is >>> : " + JSON.stringify(mgender_name_02_is));
var mgender_name_checked_val = $("input:radio[name='mgender']:checked").val();
console.log("mgender_name_checked_val >>> : " + mgender_name_checked_val);
console.log("mgender_name_checked_val >>> : " + JSON.stringify(mgender_name_checked_val));
var mgender_name_01 = $("input:radio[name='mgender']:input[value='01']").val();
console.log("mgender_name_01 >>> : " + mgender_name_01);
console.log("mgender_name_01 >>> : " + JSON.stringify(mgender_name_01));
var mgender_name_02 = $("input:radio[name='mgender']:input[value='02']").val();
console.log("mgender_name_02 >>> : " + mgender_name_02);
console.log("mgender_name_02 >>> : " + JSON.stringify(mgender_name_02));
// mhobby
var mhobbby_name = $("input:checkbox[name='mhobby']");
console.log("mhobbby_name >>> : " + mhobbby_name);
console.log("mhobbby_name >>> : " + JSON.stringify(mhobbby_name));
var mhobby_name_val = $("input:checkbox[name='mhobby']").val();
console.log("mhobby_name_val >>> : " + mhobby_name_val);
console.log("mhobby_name_val >>> : " + JSON.stringify(mhobby_name_val));
var mhobby_name_length = $("input:checkbox[name='mhobby']").length;
console.log("mhobby_name_length >>> : " + mhobby_name_length);
console.log("mhobby_name_length >>> : " + JSON.stringify(mhobby_name_length));
var mhobby_name_checked = $("input:checkbox[name='mhobby']:checked");
console.log("mhobby_name_checked >>> : " + mhobby_name_checked);
console.log("mhobby_name_checked >>> : " + JSON.stringify(mhobby_name_checked));
var mhobby_name_checked_length = $("input:checkbox[name='mhobby']:checked").length;
console.log("mhobby_name_checked_length >>> : " + mhobby_name_checked_length);
console.log("mhobby_name_checked_length >>> : " + JSON.stringify(mhobby_name_checked_length));
var mhobby_name_checked_is = $("input:checkbox[name='mhobby']").is(":checked");
console.log("mhobby_name_checked_is >>> : " + mhobby_name_checked_is);
console.log("mhobby_name_checked_is >>> : " + JSON.stringify(mhobby_name_checked_is));
var mhobby_name_01_is = $("input:checkbox[name='mhobby']:input[value='01']").is(":checked");
console.log("mhobby_name_01_is >>> : " + mhobby_name_01_is);
console.log("mhobby_name_01_is >>> : " + JSON.stringify(mhobby_name_01_is));
var mhobby_name_02_is = $("input:checkbox[name='mhobby']:input[value='02']").is(":checked");
console.log("mhobby_name_02_is >>> : " + mhobby_name_02_is);
console.log("mhobby_name_02_is >>> : " + JSON.stringify(mhobby_name_02_is));
var mhobby_name_03_is = $("input:checkbox[name='mhobby']:input[value='03']").is(":checked");
console.log("mhobby_name_03_is >>> : " + mhobby_name_03_is);
console.log("mhobby_name_03_is >>> : " + JSON.stringify(mhobby_name_03_is));
var mhobby_name_04_is = $("input:checkbox[name='mhobby']:input[value='04']").is(":checked");
console.log("mhobby_name_04_is >>> : " + mhobby_name_04_is);
console.log("mhobby_name_04_is >>> : " + JSON.stringify(mhobby_name_04_is));
var mhobby_name_01 = $("input:checkbox[name='mhobby']:input[value='01']").val();
console.log("mhobby_name_01 >>> : " + mhobby_name_01);
console.log("mhobby_name_01 >>> : " + JSON.stringify(mhobby_name_01));
var mhobby_name_02 = $("input:checkbox[name='mhobby']:input[value='02']").val();
console.log("mhobby_name_02 >>> : " + mhobby_name_01);
console.log("mhobby_name_02 >>> : " + JSON.stringify(mhobby_name_02));
var mhobby_name_03 = $("input:checkbox[name='mhobby']:input[value='03']").val();
console.log("mhobby_name_03 >>> : " + mhobby_name_03);
console.log("mhobby_name_03 >>> : " + JSON.stringify(mhobby_name_03));
var mhobby_name_04 = $("input:checkbox[name='mhobby']:input[value='04']").val();
console.log("mhobby_name_04 >>> : " + mhobby_name_04);
console.log("mhobby_name_04 >>> : " + JSON.stringify(mhobby_name_04));
// class
//=================================================================
var mname_class = $(".mname");
console.log("mname_class >>> : " + mname_class);
console.log("mname_class >>> : " + JSON.stringify(mname_class));
var mname_class_val = $(".mname").val();
console.log("mname_class_val >>> : " + mname_class_val);
console.log("mname_class_val >>> : " + JSON.stringify(mname_class_val));
var mhp_class = $(".mhp");
console.log("mhp_class >>> : " + mhp_class);
console.log("mhp_class >>> : " + JSON.stringify(mhp_class));
var mhp_class_val = $(".mhp").val();
console.log("mhp_class_val >>> : " + mhp_class_val);
console.log("mhp_class_val >>> : " + JSON.stringify(mhp_class_val));
var mhp_class_length = $(".mhp").length;
console.log("mhp_class_length >>> : " + mhp_class_length);
console.log("mhp_class_length >>> : " + JSON.stringify(mhp_class_length));
var mhp_class_option = $(".mhp option:selected");
console.log("mhp_class_option >>> : " + mhp_class_option);
console.log("mhp_class_option >>> : " + JSON.stringify(mhp_class_option));
var mhp_class_option_val = $(".mhp option:selected").val();
console.log("mhp_class_option_val >>> : " + mhp_class_option_val);
console.log("mhp_class_option_val >>> : " + JSON.stringify(mhp_class_option_val));
var mhp_class_option_text = $(".mhp option:selected").text();
console.log("mhp_class_option_text >>> : " + mhp_class_option_text);
console.log("mhp_class_option_text >>> : " + JSON.stringify(mhp_class_option_text));
// mgender
var mgender_class = $(".mgender");
console.log("mgender_class >>> : " + mgender_class);
console.log("mgender_class >>> : " + JSON.stringify(mgender_class));
var mgender_class_val = $(".mgender").val();
console.log("mgender_class_val >>> : " + mgender_class_val);
console.log("mgender_class_val >>> : " + JSON.stringify(mgender_class_val));
var mgender_class_length = $(".mgender").length;
console.log("mgender_class_length >>> : " + mgender_class_length);
console.log("mgender_class_length >>> : " + JSON.stringify(mgender_class_length));
var mgender_class_checked = $(".mgender:checked");
console.log("mgender_class_checked >>> : " + mgender_class_checked);
console.log("mgender_class_checked >>> : " + JSON.stringify(mgender_class_checked));
var mgender_class_checked_length = $(".mgender:checked").length;
console.log("mgender_class_checked_length >>> : " + mgender_class_checked_length);
console.log("mgender_class_checked_length >>> : " + JSON.stringify(mgender_class_checked_length));
var mgender_class_01_is = $(".mgender:input[value='01']").is(":checked");
console.log("mgender_class_01_is >>> : " + mgender_class_01_is);
console.log("mgender_class_01_is >>> : " + JSON.stringify(mgender_class_01_is));
var mgender_class_02_is = $(".mgender:input[value='02']").is(":checked");
console.log("mgender_class_02_is >>> : " + mgender_class_02_is);
console.log("mgender_class_02_is >>> : " + JSON.stringify(mgender_class_02_is));
// mhobby
var mhobby_class = $(".mhobby");
console.log("mhobby_class >>> : " + mhobby_class);
console.log("mhobby_class >>> : " + JSON.stringify(mhobby_class));
var mhobby_class_val = $(".mhobby").val();
console.log("mhobby_class_val >>> : " + mhobby_class_val);
console.log("mhobby_class_val >>> : " + JSON.stringify(mhobby_class_val));
var mhobby_class_length = $(".mhobby").length;
console.log("mhobby_class_length >>> : " + mhobby_class_length);
console.log("mhobby_class_length >>> : " + JSON.stringify(mhobby_class_length));
var mhobby_class_checked = $(".mhobby:checked");
console.log("mhobby_class_checked >>> : " + mhobby_class_checked);
console.log("mhobby_class_checked >>> : " + JSON.stringify(mhobby_class_checked));
var mhobby_class_checked_length = $(".mhobby:checked").length;
console.log("mhobby_class_checked_length >>> : " + mhobby_class_checked_length);
console.log("mhobby_class_checked_length >>> : " + JSON.stringify(mhobby_class_checked_length));
var mhobby_class_01_is = $(".mhobby:input[value='01']").is(":checked");
console.log("mhobby_class_01_is >>> : " + mhobby_class_01_is);
console.log("mhobby_class_01_is >>> : " + JSON.stringify(mhobby_class_01_is));
var mhobby_class_02_is = $(".mhobby:input[value='02']").is(":checked");
console.log("mhobby_class_02_is >>> : " + mhobby_class_02_is);
console.log("mhobby_class_02_is >>> : " + JSON.stringify(mhobby_class_02_is));
var mhobby_class_03_is = $(".mhobby:input[value='03']").is(":checked");
console.log("mhobby_class_03_is >>> : " + mhobby_class_03_is);
console.log("mhobby_class_03_is >>> : " + JSON.stringify(mhobby_class_03_is));
var mhobby_class_04_is = $(".mhobby:input[value='04']").is(":checked");
console.log("mhobby_class_04_is >>> : " + mhobby_class_04_is);
console.log("mhobby_class_04_is >>> : " + JSON.stringify(mhobby_class_04_is));
/*
$("#memForm")
.attr({
"action":"#",
"method":"GET",
"enctype":"application/x-www-form-urlencoded"
})
.submit();
*/
}); // end of $("#memInsertBtn")
/*====== memForm 태그 END ==========================================*/
});
</script>
<style type="text/css">
div {
width: 80%;
margin: 50px auto;
padding:5px;
border:1px solid red;
background-color: cyan;
display:table;
}
table {
width: 50%;
margin: auto;
}
h3, h4{
text-align: center;
}
.tt {
text-align: center;
}
</style>
</head>
<body>
<div>
<h3>KOSMO MEMBER</h3>
<hr>
<form name="memForm" id="memForm">
<table border="1">
<tr>
<td class="tt" colspan="2">
<font size="4" style="color:blue;">KOSMO 108기 회원가입</font>
<img src="/kosMember/img/img_mando/ase.gif" width="25" height="25" alt="image">
</td>
</tr>
<tr>
<td class="tt" >회원번호</td>
<td><input type="text" name="mnum" id="mnum" readonly /></td>
</tr>
<tr>
<td class="tt" >이름</td>
<td><input type="text" class="mname" name="mname" id="mname" /></td>
</tr>
<tr>
<td class="tt" >아이디</td>
<td>
<input type="text" name="mid" id="mid" placeholder="아이디체크" />
<input type="button" name="midCheck" id="midCheck" value="아이디중복확인" />
</td>
</tr>
<tr>
<td class="tt" >패스워드</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 class="tt" >핸드폰</td>
<td>
<select class="mhp" name="mhp" id="mhp" style="width:50px;">
<option value="010">010000</option>
<option value="011">011222</option>
<option value="016">016666</option>
<option value="017">017777</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 class="tt" >이메일</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 class="tt" >성별</td>
<td>
<input type="radio" class="mgender" name="mgender" id="mgender" value="01" checked="checked" />여자
<input type="radio" class="mgender" name="mgender" id="mgender" value="02" /> 남자
</td>
</tr>
<tr>
<td class="tt" >취미</td>
<td>
<input type="checkbox" class="mhobby" name="mhobby" id="mhobby" value="01" />독서
<input type="checkbox" class="mhobby" name="mhobby" id="mhobby" value="02" />운동
<input type="checkbox" class="mhobby" name="mhobby" id="mhobby" value="03" />음악감상
<input type="checkbox" class="mhobby" name="mhobby" id="mhobby" value="04" />여행
</td>
</tr>
<tr>
<td class="tt" >주소</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 class="tt" >소개글</td>
<td>
<textarea name="mmsg" id="mmsg" rows="5" cols="50"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="hidden" id="ISUD_TYPE" name="ISUD_TYPE" value="I">
<input type="button" value="jsp_보내기" id="memInsertBtn" />
<input type="reset" value="취소" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>- prop_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// $(window).load();
$(document).ready(function(){
// 성별
var gen = '01';
console.log("gen >>> : " + gen);
if ('01' == gen) {
$(".mgender:input[value='01']").prop('checked', true);
}
if ('02' == gen) {
$(".mgender:input[value='02']").prop('checked', true);
}
// 이메일
var email = 'abc@gmail.com';
var emails = email.split('@');
$("#memail").val(emails[0]);
$("#memail1").val(emails[1]);
// 취미
var hobs = '01,02,04';
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) {
$(".mhobby:input[value='01']").prop('checked', true);
}
if ('02' == hobValue) {
$(".mhobby:input[value='02']").prop('checked', true);
}
if ('03' == hobValue) {
$(".mhobby:input[value='03']").prop('checked', true);
}
if ('04' == hobValue) {
$(".mhobby:input[value='04']").prop('checked', true);
}
if ('05' == hobValue) {
$(".mhobby:input[value='05']").prop('checked', true);
}
}
/*
$(".mhobby").each(functioN(){
alert(">>");
var hobValue='01';
if(this.value=hobValue) {
this.prop('checked', true);
}
});
*/
// 이메일 선택
$("#memail2").change(function(){
$("#memail2 option:selected").each(function() {
if ($(this).val() == '1') { // 직접 입력일 경우
var aa = $("#memail1").val();
// alert("aa >>> : " + aa);
$("#memail1").val(''); // 값 초기화
$("#memail1").prop("readonly", false); // 활성화
} else { // 직접 입력이 아닐 경우
$("#memail1").val($(this).text()); // 선택값 입력
$("#memail1").prop("readonly", true); //비활성화
}
});
});
});
</script>
</head>
<body>
<hr>
<div>
<form name="memUpdateForm" id="memUpdateForm">
<table border="1">
<tr>
<td colspan="3" align="center">
<font size="4" style="color:blue;">회원 정보 수정 & 삭제</font>
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" class="mgender" name="mgender" id="mgender" value="01" checked />여자
<input type="radio" class="mgender" name="mgender" id="mgender" value="02" /> 남자
</td>
</tr>
<tr>
<td>이메일</td>
<td colspan="2">
<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 colspan="2">
<input type="checkbox" class="mhobby" name="mhobby" id="mhobby" value="01" />알고리즘
<input type="checkbox" class="mhobby" name="mhobby" id="mhobby" value="02" />코딩
<input type="checkbox" class="mhobby" name="mhobby" id="mhobby" value="03" />분석설계<br>
<input type="checkbox" class="mhobby" name="mhobby" id="mhobby" value="04" />데이터베이스
<input type="checkbox" class="mhobby" name="mhobby" id="mhobby" value="05" />스크립트
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="수정" id='U'/>
<input type="button" value="삭제" id='D'/>
<input type="reset" value="취소" />
<input type="button" value="입력" id='I'/>
<input type="button" value="목록" id='SALL'/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
2교시 (10:30-11:20)
- 컨텍스트
- content-type : media, charset, boundary
- jsp
1. 페이지 이동
<jsp:forward
<jsp:include
<%@ include
RequestDispatcher.forward()
response.sendRedirect()
location.href
history.go()
<a href=""
2. 데이터 이동
request.getParameter();
request.getAttribute(java.lang.String)
3. 파일 업로드
POST, multipart/form-data
-----------------------------
form, method
텍스트 : key=value&key=value : application/x-www-form-urlencoded
바이너리 : 파일 데이터 : multipart/form-data
GET
application/x-www-form-urlencoded : key=value
multipart/form-data
POST
application/x-www-form-urlencoded : key=value
multipart/form-data : 파일 업로드 할 때
3교시 (11:30-12:20)
- FileUploadUtil.java
package a.b.c.common;
import java.util.ArrayList;
import java.util.Enumeration;
import javax.servlet.http.HttpServletRequest;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
public class FileUploadUtil {
public static final String ENCODE_TYPE = "UTF-8";
public static final int SIZE_LIMIT = 5240880;
private MultipartRequest m;
public FileUploadUtil() {
}
public boolean fileUpload(HttpServletRequest hReq, String filePaths) {
boolean fb = false;
try {
m = new MultipartRequest( hReq
,filePaths
,FileUploadUtil.SIZE_LIMIT
,FileUploadUtil.ENCODE_TYPE
, new DefaultFileRenamePolicy());
return fb = true;
} catch (Exception e) {
System.out.println("FileUploadUtil.fileUpload() >>> : " + e);
}
return fb;
}
public boolean fileUpload3( HttpServletRequest hReq
,String filePaths
,int size_limit
,String encode_type) {
boolean fb = false;
try {
m = new MultipartRequest( hReq
,filePaths
,size_limit
,encode_type
,new DefaultFileRenamePolicy());
return fb = true;
} catch (Exception e) {
System.out.println("FileUploadUtil.fileUpload3() >>> : " + e);
}
return fb;
}
public String getParameter(String s) {
return m.getParameter(s);
}
public String[] getParameterValues(String s) {
return m.getParameterValues(s);
}
public String getFileName(String f) {
return m.getFilesystemName(f);
}
public ArrayList<String> getFileNames(){
@SuppressWarnings("unchecked")
Enumeration<String> en = m.getFileNames();
ArrayList<String> a = new ArrayList<String>();
while (en.hasMoreElements()) {
String f = en.nextElement().toString();
a.add(m.getFilesystemName(f));
}
return a;
}
}- fileupload_2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--log4j 관련 객체 import --%>
<%@ page import="org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>
<%@ page import="a.b.c.common.CommonUtils" %>
<%@ page import="a.b.c.common.FileUploadUtil" %>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FILE UPLOAD JSP</title>
<style type="text/css">
#circle {border-radius : 50%;}
</style>
</head>
<body>
<h3>FILE UPLOAD JSP</h3>
<hr>
<%
Logger logger = LogManager.getLogger(this.getClass());
logger.info("fileupload_2.jsp 페이지 >>> : ");
String filePaths = CommonUtils.TEST_IMG_UPLOAD_PATH;
int size_limit = CommonUtils.TEST_IMG_FILE_SIZE;
String encode_type = CommonUtils.TEST_IMG_ENCODE;
String filename1 = "";
FileUploadUtil fu = new FileUploadUtil();
boolean bool = fu.fileUpload3(request, filePaths, size_limit, encode_type);
if (bool) {
String name = fu.getFileName("name");
ArrayList<String> aListFile = fu.getFileNames();
filename1 = aListFile.get(0);
} else {
System.out.println("업로드 실패");
}
%>
<!-- html img 태그의 src 경로 속성은 웹 경로를 사용한다. -->
<table border="1">
<tr align="center">
<td>
<img id="circle" src="/KosMember/upload/aaaa/<%= filename1 %>" width="100" height="100"><br>
<%= filename1 %>
</td>
</tr>
</table>
</body>
</html>4교시 (12:30-13:20)
- fileupload_2.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--log4j 관련 객체 import --%>
<%@ page import="org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>
<%@ page import="a.b.c.common.CommonUtils" %>
<%@ page import="a.b.c.common.FileUploadUtil" %>
<%@ page import="java.util.ArrayList" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FILE UPLOAD JSP</title>
<style type="text/css">
#circle {border-radius : 50%;}
</style>
</head>
<body>
<h3>FILE UPLOAD JSP</h3>
<hr>
<%
Logger logger = LogManager.getLogger(this.getClass());
logger.info("fileupload_2.jsp 페이지 >>> : ");
String filePaths = CommonUtils.TEST_IMG_UPLOAD_PATH;
int size_limit = CommonUtils.TEST_IMG_FILE_SIZE;
String encode_type = CommonUtils.TEST_IMG_ENCODE;
String filename1 = "";
FileUploadUtil fu = new FileUploadUtil();
boolean bool = fu.fileUpload3(request, filePaths, size_limit, encode_type);
if (bool) {
String name = fu.getFileName("name");
ArrayList<String> aListFile = fu.getFileNames();
filename1 = aListFile.get(0);
} else {
System.out.println("업로드 실패");
}
%>
<!-- html img 태그의 src 경로 속성은 웹 경로를 사용한다. -->
<table border="1">
<tr align="center">
<td>
<img id="circle" src="/KosMember/upload/aaaa/<%= filename1 %>" width="100" height="100"><br>
<%= filename1 %>
</td>
</tr>
</table>
</body>
</html>
5교시 (14:30-15:20)
- sequence
CREATE TABLE KOS_FILE_IMAGE (
FNUM VARCHAR2(20) PRIMARY KEY
,FNAME VARCHAR2(200)
,FPATH VARCHAR2(300)
,INSERTDATE DATE
,UPDATEDATE DATE
);
DELETE FROM KOS_FILE_IMAGE;
COMMIT;
SELECT * FROM KOS_FILE_IMAGE;
/*
시퀀스
CREATE SEQUENCE [시퀀스명]
INCREMENT BY [N] -- 증가 숫자
START WITH [N] -- 시작 숫자
MINVALUE [N] -- 최소값
MAXVALUE [N] -- 최대값
CYCLE OR NOCYCLE -- CYCLE 설정시 최대값에 도달하면 최소값부터 다시 시작 NOCYCLE 설정시 최대값 생성 시 시퀀스 생성중지
CACHE OR NOCACHE -- CACHE 설정시 메모리에 시퀀스 값을 미리 할당하고 NOCACHE 설정시 시퀀스값을 메로리에 할당하지 않음
*/
CREATE SEQUENCE KOS_FILE_IMAGE_SEQ
INCREMENT BY 1
START WITH 1
MAXVALUE 9999;
-- 순환하지 않음
-- 메모리에 시퀀스값 미리 할당
INSERT INTO KOS_FILE_IMAGE (FNUM, FNAME, FPATH, INSERTDATE, UPDATEDATE)
VALUES (KOS_FILE_IMAGE_SEQ.NEXTVAL, '11', '11', SYSDATE, SYSDATE);
-- 해당 시퀀스 값 조회
SELECT KOS_FILE_IMAGE_SEQ.CURRVAL FROM DUAL;
-- 전체 시퀀스 조회
SELECT * FROM USER_SEQUENCES;
INSERT INTO KOS_FILE_IMAGE(FNUM, FNAME, FPATH, INSERTDATE, UPDATEDATE) VALUES ('11', '11', '11', SYSDATE, SYSDATE);
ROLLBACK;
COMMIT;
UPDATE KOS_FILE_IMAGE SET FNAME='test';6교시 (15:30-16:20)
- FileVO.java
package a.b.c.test.vo;
public class FileVO {
private String fnum;
private String fname;
private String fpath;
private String insertdate;
private String updatedate;
// 생성자
public FileVO() {
}
public FileVO(String fnum, String fname, String fpath, String insertdate, String updatedate) {
this.fnum = fnum;
this.fname = fname;
this.fpath = fpath;
this.insertdate = insertdate;
this.updatedate = updatedate;
}
// getter
public String getFnum() {
return fnum;
}
public String getFname() {
return fname;
}
public String getFpath() {
return fpath;
}
public String getInsertdate() {
return insertdate;
}
public String getUpdatedate() {
return updatedate;
}
// setter
public void setFnum(String fnum) {
this.fnum = fnum;
}
public void setFname(String fname) {
this.fname = fname;
}
public void setFpath(String fpath) {
this.fpath = fpath;
}
public void setInsertdate(String insertdate) {
this.insertdate = insertdate;
}
public void setUpdatedate(String updatedate) {
this.updatedate = updatedate;
}
}- fileupload_3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- log4j 관련 객체 import --%>
<%@ page import=" org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>
<%@ page import="a.b.c.common.CommonUtils" %>
<%@ page import="a.b.c.common.FileUploadUtil" %>
<%@ page import="java.util.ArrayList" %>
<!-- 커넥션 클래스 import -->
<%@ page import="a.b.c.common.KosConnectivity" %>
<!-- java.sql.* JDBC 클래스 import -->
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="a.b.c.test.vo.FileVO" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FILE UPLOAD JSP</title>
<!-- CDN -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// fnumChk
$(document).on("click", "#fnumChk", function(){
alert("fnumChk >>> : ");
if($(this).prop('checked')){
$('.mnumCheck').prop('checked',false);
$(this).prop('checked',true);
}
});
// U
$(document).on("click", "#U", function(){
// alert("U >>> : ");
if ($('.fnumChk:checked').length == 0){
alert("이미지 하나를 선택하세요!!");
return;
}
});
// U
$(document).on("click", "#U", function(){
if ($('.fnumChk:checked').length == 0){
alert("이미지 하나 하나를 선택하세요!!");
return;
}
$("#checkForm").attr({
"action":"/KosMember/kos_fileupload/fileupload_img.jsp",
"method":"GET",
"enctype":"application/x-www-form-urlencoded"}).submit();
});
});
</script>
<style type="text/css">
#circle {border-radius: 50%;}
</style>
</head>
<body>
<h3>FILE UPLOAD JSP</h3>
<hr>
<%
Logger logger = LogManager.getLogger(this.getClass());
logger.info("fileupload_3.jsp 페이지 >>> :");
String filePaths = CommonUtils.TEST_IMG_UPLOAD_PATH;
int size_limit = CommonUtils.TEST_IMG_FILE_SIZE;
String encode_type = CommonUtils.TEST_IMG_ENCODE;
String filename1 = "";
FileUploadUtil fu = new FileUploadUtil();
boolean bool = fu.fileUpload3(request, filePaths, size_limit, encode_type);
ArrayList<FileVO> aList = null;
if (bool){
String name = fu.getParameter("name");
ArrayList<String> aListFile = fu.getFileNames();
filename1 = aListFile.get(0);
logger.info("name >>> :" + name);
logger.info("filename1 >>> :" + filename1);
// 파일 이름 테이블에 적재하기 --------------------
Connection conn = null;
PreparedStatement pstmt = null;
int nCnt = 0;
conn = KosConnectivity.getConnection();
String sqls = "INSERT INTO KOS_FILE_IMAGE (FNUM, FNAME, FPATH, INSERTDATE, UPDATEDATE) VALUES (KOS_FILE_IMAGE_SEQ.NEXTVAL, ?, ?, SYSDATE, SYSDATE)";
logger.info("INSERT >>> :" + sqls);
pstmt = conn.prepareStatement(sqls);
pstmt.clearParameters();
pstmt.setString(1, name);
pstmt.setString(2, filename1);
nCnt = pstmt.executeUpdate();
if (nCnt > 0) {
Connection conn_s = null;
PreparedStatement pstmt_s = null;
ResultSet rsRs_s = null;
conn_s = KosConnectivity.getConnection();
String sqls_s = "SELECT * FROM KOS_FILE_IMAGE ORDER BY 1";
logger.info("SELECT >>> :" + sqls_s);
pstmt_s = conn_s.prepareStatement(sqls_s);
rsRs_s = pstmt_s.executeQuery();
if (rsRs_s !=null){
aList = new ArrayList<FileVO>();
while (rsRs_s.next()){
FileVO fvo = new FileVO();
fvo.setFnum(rsRs_s.getString(1));
fvo.setFname(rsRs_s.getString(2));
fvo.setFpath(rsRs_s.getString(3));
aList.add(fvo);
}
}
}
}else{
System.out.println("업로드 실패 !!!");
}
%>
<!-- html img 태그의 src 경로 속성은 웹 경로를 사용한다. -->
<form name="checkForm" id="checkForm">
<table border="1">
<tr>
<td><input type="checkbox" class="chkAll" name="chkAll" id="chkAll"></td>
<td>순번</td>
<td>이름</td>
<td>파일</td>
</tr>
<%
if (aList !=null && aList.size() > 0){
for (int i=0; i < aList.size(); i++){
FileVO _fvo = aList.get(i);
%>
<tr>
<td>
<input type="checkbox" class="fnumChk" name="fnumChk" id="fnumChk" value=<%= _fvo.getFnum() %> >
</td>
<td>
<%= _fvo.getFnum() %>
</td>
<td>
<%= _fvo.getFname() %>
</td>
<td>
<img id="circle" src="/KosMember/upload/aaaa/<%= _fvo.getFpath() %>" width="50" height="50"><br>
</td>
</tr>
<%
}
}
%>
<td colspan="5" align="right">
<input type="hidden" name="ISUD_TYPE" id="ISUD_TYPE" value="">
<input type="button" value="이미지보기" id="U">
</td>
</table>
</form>
</body>
</html>7교시 (16:30-17:20)
- fileupload_img.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- log4j 관련 객체 import --%>
<%@ page import=" org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>
<%@ page import="a.b.c.common.CommonUtils" %>
<%@ page import="a.b.c.common.FileUploadUtil" %>
<%@ page import="java.util.ArrayList" %>
<!-- 커넥션 클래스 import -->
<%@ page import="a.b.c.common.KosConnectivity" %>
<!-- java.sql.* JDBC 클래스 import -->
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="a.b.c.test.vo.FileVO" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FILEUPLOAD IMG</title>
<script type="text/javascript">
</script>
<style type="text/css">
.wrap {
width: 300px;
height: 100px;
margin: 100px auto;
}
#circle {border-radius: 50%;}
</style>
</head>
<body>
<%
Logger logger = LogManager.getLogger(this.getClass());
logger.info("fileupload_img.jsp 페이지 >>> : ");
String fnumChk = request.getParameter("fnumChk");
FileVO fvo = null;
fvo = new FileVO();
fvo.setFnum(fnumChk);
Connection conn_s = null;
PreparedStatement pstmt_s = null;
ResultSet rsRs_s = null;
ArrayList<FileVO> aList = null;
conn_s = KosConnectivity.getConnection();
String sqls_s = "SELECT * FROM KOS_FILE_IMAGE WHERE FNUM = ? ";
logger.info("SELECT >>> : " + sqls_s);
pstmt_s = conn_s.prepareStatement(sqls_s);
pstmt_s.clearParameters();
pstmt_s.setString(1, fvo.getFnum());
rsRs_s = pstmt_s.executeQuery();
if (rsRs_s != null) {
aList = new ArrayList<FileVO>();
while (rsRs_s.next()) {
FileVO _fvo = new FileVO();
_fvo.setFnum(rsRs_s.getString(1));
_fvo.setFname(rsRs_s.getString(2));
_fvo.setFpath(rsRs_s.getString(3));
aList.add(_fvo);
}
}
FileVO __fvo = aList.get(0);
logger.info("__fvo.getFpath() >>> : " + __fvo.getFpath());
// out.println("__fvo.getFpath() >>> : " + __fvo.getFpath());
%>
<div class="wrap">
<h3>fileupload_img</h3>
디비 조회해서 사진 정중앙에 디피하기
<hr>
<img id="circle" src="/KosMember/upload/aaaa/<%= __fvo.getFpath() %>">
</div>
</body>
</html>8교시 (17:30-18:30)
- fileupload_3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FileUpload</title>
</head>
<body>
<h3>FILE UPLOAD</h3>
<hr>
<form name="fileUploadForm"
action="/KosMember/kos_fileupload/fileupload_3.jsp"
method="POST"
enctype="multipart/form-data">
이름 : <input type="text" name="name"/><br>
파일1 : <input type="file" name="filename1"/><br>
<input type="submit" value="전송">
</form>
</body>
</html>
Notes
728x90