728x90
수업내용
1교시 (09:30-10:20)
- 지난 시간 복습
- checkbox_js.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CHECKBOX TAG</title>
<!-- CDN -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
//체크박스 체크 함수
function checkOnly(chk){
alert("checkOnly chk >>> : " + chk);
var chkObj = document.getElementsByName("mnumCheck");
alert("chkObj >>> : " + chkObj);
console.log("chkObj >>> : " + chkObj);
for (var i=0; i < chkObj.length; i++){
if (chkObj[i] != chk){
chkObj[i].checked = false;
}
}
}
$(document).ready(function(){
// 체크박스
function chkInfo(){
var obj = document.getElementsByName("mnumCheck");
var nCnt = 0;
for(var i=0; i < obj.length; i++){
if (obj[i].checked == true){
nCnt++;
}
}
console.log('nCnt >>> : ' + nCnt);
return nCnt;
}
// 수정
$("#U").click(function(){
alert("U");
var nCnt = chkInfo();
if (nCnt == 0){
alert("체크박스 체크하세요");
}else{
alert("어디로 보낼까요 ");
}
});
// 삭제
$("#D").click(function(){
alert("D");
var nCnt = chkInfo();
if (nCnt == 0){
alert("체크박스 체크하세요");
}else{
alert("어디로 보낼까요 ");
}
});
});
</script>
<style type="text/css">
table {
border: 1px solid blue;
width: 300px;
height: 50px;
margin: 5px auto;
text-align: center;
}
h3,hr {
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<h3>CHECKBOX TAG</h3>
<hr>
<form name="check_form_1" id="check_form_1">
<table>
<thead>
<tr>
<td class="tt">
<input type="checkbox" class="chkAll" name="chkAll" id="chkAll">
</td>
<td class="tt">순번</td>
<td class="tt">회원번호</td>
<td class="tt">이름</td>
</tr>
</thead>
<%
for(int i=0; i<5; i++){
%>
<tbody>
<tr>
<td class="tt">
<input type="checkbox" class="numCheck" name="mnumCheck" id="mnumCheck"
value=<%= i %> onclick="checkOnly(this)">
</td>
<td class="tt"><%= i + "_순번" %></td>
<td class="tt"><%= i + "_회원번호" %> </td>
<td class="tt"><%= i + "_이름" %> </td>
</tr>
<%
}//end of if
%>
<tr>
<td colspan="5" 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>
</div>
</body>
</html>- checkbox_jquery.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CHECKBOX TAG</title>
<!-- CDN -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
CSS 선택자 우선순위 점수
직접기입 : style='' : 1000 점
id : #mnumCheck : 100점
class : .mnumCheck : 10점
속성 : [name="mnumCheck"] : 10점
*/
/*
prop() javaScript property vs attr() html attribute
1. jQuery 1.6 이후 부터는
form 요소 (element)의 disabled, selected, checked 속성 값을
확인 또는 변경하는 경우는 prop() 함수 사용 권장
2. prop() : element의 활성화, 체크, 선택여부 disabled, selected, checked 등에 사용
3. attr() : element의 속성값, 정보 조회나 세팅에 사용
*/
// mnumCheck
$(document).on("click", "#mnumCheck", function(){
alert("mnumCheck >>> : ");
if($(this).prop('checked')){
//$('input[type="checkbox"][name="mnumCheck"]').prop('checked',false);
$('.mnumCheck').prop('checked',false);
$(this).prop('checked',true);
}
});
// U
$(document).on("click", "#U", function(){
// alert("U >>> : ");
if ($('.mnumCheck:checked').length == 0){
alert("수정할 글번호 하나를 선택하세요!!");
return;
}else{
alert("체크박스 선텍 :: action은 어디로 ");
}
});
// D
$(document).on("click", "#D", function(){
//alert("D >>> : ");
if ($('.mnumCheck:checked').length == 0){
alert("삭제할 글번호 하나를 선택하세요!!");
return;
}else{
alert("체크박스 선텍 :: action은 어디로 ");
}
});
});
</script>
<style type="text/css">
table {
border: 1px solid blue;
width: 300px;
height: 50px;
margin: 5px auto;
text-align: center;
}
h3,hr {
text-align: center;
}
</style>
</head>
<body>
<h3>CHECKBOX TAG</h3>
<hr>
<div class="wrap">
<form name="check_form_1" id="check_form_1">
<table>
<thead>
<tr>
<td class="tt"><input type="checkbox" class="chkAll" name="chkAll" id="chkAll"></td>
<td class="tt">순번</td>
<td class="tt">회원번호</td>
<td class="tt">이름</td>
</tr>
</thead>
<%
for(int i=0; i<5; i++){
%>
<tbody>
<tr>
<td class="tt">
<input type="checkbox" class="mnumCheck" name="mnumCheck" id="mnumCheck" value=<%= i %> >
</td>
<td class="tt"><%= i + "_순번" %></td>
<td class="tt"><%= i + "_회원번호" %> </td>
<td class="tt"><%= i + "_이름" %> </td>
</tr>
<%
}//end of if
%>
<tr>
<td colspan="5" 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>
</div>
</body>
</html>- 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 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 103기 회원가입</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>2교시 (10:30-11:20)
- 데이터 이동
데이터 보내기
--------------
1. <input type="text" name="mid">
2. location.href="/KosMember/kos_jsp/test.jsp?mid=<%= 11 %>";
3. pageContext.forward("/kosMember/kos_jsp/testA.jsp?mid="+mid);
4. <jsp:forward>
<jsp:param name="mid" value="<%= mid %>">
</jsp:forward>
5. request.setAttribute(java.lang.String, java.lang.Object);
6. ArrayList aList = new ArrayList();
request.setAttribute("aList", aList);
데이터 받기
--------------
1, 2, 3, 4번
<%
String mid = request.getParameter("mid");
%>
5번
<%
Object obj = request.getAttribute(java.lang.String);
String objStr = (String)obj;
%>
6번
<%
Object obj = request.getAttribute("aList");
ArrayList aList = (ArrayList)obj;
%> - 로그인 페이지 만들기
- 쿼리 확인
로그인 ------------------------------------- KOS_MEMBER 테이블 데이터 사용 -- 카운터 로그인 SELECT COUNT(A.MNUM) FROM KOS_MEMBER A WHERE A.DELETEYN = 'Y'; AND A.MID = 'TEST' AND A.MPW = '11;
3교시 (11:30-12:20)
- kos_login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KOS_LOGIN JSP</title>
</head>
<body>
<h3>KOS_LOGIN JSP</h3>
<hr>
<%
request.setCharacterEncoding("UTF-8");
String mid = request.getParameter("mid");
String mpw = request.getParameter("mpw");
System.out.println("mid >>> : " + mid);
System.out.println("mpw >>> : " + mpw);
out.println("mid >>> : " + mid);
out.println("mpw >>> : " + mpw);
%>
</body>
</html>- kos_login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KOS_LOGIN HTML</title>
<!--
id : mid
pw : mpw
action : kos_login.jsp
method : GET
jQuery CDN 이용
버튼 클릭 이벤트 할 때 kos_login.jsp 보내기
kos_login.jsp -> 화면에 id, pw 출력하기
-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
alert("스크립트 블록");
// jQuery 블록을 만든다. ready() 함수로 만든다.
$(document).ready(function(){
alert("jQuery 블록");
$("#login_btn").click(function(){
alert("login_btn 블록");
$("#loginForm").attr({
"action":"/KosMember/koslogin/kos_login.jsp",
"method":"GET"
}).submit();
});
});
</script>
</head>
<body>
<h3>KOS_LOGIN_OK JSP</h3>
<hr>
<form name="loginForm" id="loginForm">
<input type="text" class="mid" name="mid" id="mid" /><br>
<input type="text" class="mpw" name="mpw" id="mpw" /><br>
<button type="button" id="login_btn">login_btn</button>
</form>
</body>
</html>
4교시 (12:30-13:20)
- 로그인 처리 방법
전통적인 방식
ID, PW를 비교해서 하는 방식
ID 다른지
PW 다른지
두 가지의 다른 경우를 분기해서 코딩했다.
디바이스 : 데탑, 랩탑 컴퓨터(노트북), 태블릭, 안드로이드, iOS
로그인 처리 하는 것 : 다중 디바이스
1. 싱글 로그인
account 계정이 하나의 디바이스에 한 계정
SSO 싱글 사인 온
2. 다중 로그인
account 계정 멀티 디바이스에서 로그인 허락
우리가 공부할 것은
COUNT 로그인 처리 방법
패스워드가 암호화 되어 있다. - kos_login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 커넥션 클래스 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"%>
<!-- 깡통 클래스 import -->
<%@ page import="a.b.c.kos.mem.vo.MemVO"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KOS_LOGIN JSP</title>
</head>
<body>
<h3>KOS_LOGIN JSP</h3>
<hr>
<%
request.setCharacterEncoding("UTF-8");
String mid = request.getParameter("mid");
String mpw = request.getParameter("mpw");
System.out.println("mid >>> : " + mid);
System.out.println("mpw >>> : " + mpw);
out.println("mid >>> : " + mid);
out.println("mpw >>> : " + mpw);
MemVO mvo = null;
mvo = new MemVO();
mvo.setMid(mid);
mvo.setMpw(mpw);
%>
<%
// jdbc 연결 및 sql 사용하기
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rsRs = null;
int nCnt = 0;
conn = KosConnectivity.getConnection();
String sqls = "SELECT COUNT(A.MNUM) MCNT FROM KOS_MEMBER A WHERE A.DELETEYN = 'Y' AND A.MID = ? AND A. MPW = ?";
pstmt = conn.prepareStatement(sqls);
pstmt.clearParameters();
pstmt.setString(1, mvo.getMid());
pstmt.setString(2, mvo.getMpw());
rsRs = pstmt.executeQuery();
if (rsRs != null) {
while (rsRs.next()) {
nCnt = rsRs.getInt(1);
// nCnt = rsRs.GetInt("MCNT"); // 컬럼명, 컬렴명 앨리어스
}
}
if (nCnt == 1) {
request.setAttribute("nCnt", new Integer(nCnt));
RequestDispatcher rd = request.getRequestDispatcher("/koslogin/kos_login_ok.jsp");
rd.forward(request, response);
} else {
}
%>
</body>
</html>5교시 (14:30-15:20)
- kos_login_ok.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- Date 관련 클래스 import -->
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KOS_LOGIN_OK JSP</title>
</head>
<body>
<%@ include file="/kos_jsp/include_header.html" %>
<h3>KOS_LOGIN_OK JSP</h3>
<hr>
<%
String browser = "";
String uagent = request.getHeader("User-Agent");
//"-Djava.net.preferIPv4Stack"=true
// ip : 32bit, 128bit
String raddr = request.getRemoteAddr();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy.MM.dd hh:mm:ss");
String dtime = sdf.format(new Date()).toString();
System.out.println("userAgent >>> : " + uagent);
System.out.println("remoteAddr >>> : " + raddr);
System.out.println("dtime >>> : " + dtime);
if (uagent.indexOf("Chrome") > 0){
browser = "Chrome";
%>
<script>
var b = '<%= browser %>'
var r = '<%= raddr %>'
var b = '<%= dtime %>'
alert(b + " : " + r + ":" + d + "\n로그인 성공");
</script>
<%
}
%>
<jsp:include page="/kosmem/memSelectAll.jsp" />
<%@ include file="/kos_jsp/include_footer.html" %>
</body>
</html>- kos_login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 커넥션 클래스 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"%>
<!-- 깡통 클래스 import -->
<%@ page import="a.b.c.kos.mem.vo.MemVO"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KOS_LOGIN JSP</title>
</head>
<body>
<h3>KOS_LOGIN JSP</h3>
<hr>
<%
request.setCharacterEncoding("UTF-8");
String mid = request.getParameter("mid");
String mpw = request.getParameter("mpw");
System.out.println("mid >>> : " + mid);
System.out.println("mpw >>> : " + mpw);
out.println("mid >>> : " + mid);
out.println("mpw >>> : " + mpw);
MemVO mvo = null;
mvo = new MemVO();
mvo.setMid(mid);
mvo.setMpw(mpw);
%>
<%
// jdbc 연결 및 sql 사용하기
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rsRs = null;
int nCnt = 0;
conn = KosConnectivity.getConnection();
String sqls = "SELECT COUNT(A.MNUM) MCNT FROM KOS_MEMBER A WHERE A.DELETEYN = 'Y' AND A.MID = ? AND A. MPW = ?";
pstmt = conn.prepareStatement(sqls);
pstmt.clearParameters();
pstmt.setString(1, mvo.getMid());
pstmt.setString(2, mvo.getMpw());
rsRs = pstmt.executeQuery();
if (rsRs != null) {
while (rsRs.next()) {
nCnt = rsRs.getInt(1);
// nCnt = rsRs.GetInt("MCNT"); // 컬럼명, 컬렴명 앨리어스
}
}
if (nCnt == 1) {
// new Integer, new Double, new Boolean, new String 나머진 다 object
request.setAttribute("nCnt", new Integer(nCnt));
RequestDispatcher rd = request.getRequestDispatcher("/koslogin/kos_login_ok.jsp");
rd.forward(request, response);
} else {
%>
<script>
alert("로그인 실패 !!!");
// history.go(-1);
location.href="/KosMember/koslogin/kos_login.html";
</script>
<%
}
%>
</body>
</html>kos_login.html 실행
로그인 실패 시
로그인 성공 시 (sellectAll이 구현이 안되었음)
6교시 (15:30-16:20)
- 한글 인코딩
- GET
Servers - Tomcat v8.5 Servers at localhost-config
servers.xml
라인 63
<Connector URIEncoding="UTF-8"
xml 번경하면 꼭 서버를 리스타트 해야한다. - POST
JSP
<% request.setCharacterEncoding("UTF-8"); %>
- GET
- CSS 부여 및 조정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KOS_LOGIN HTML</title>
<!--
id : mid
pw : mpw
action : kos_login.jsp
method : GET
jQuery CDN 이용
버튼 클릭 이벤트 할 때 kos_login.jsp 보내기
kos_login.jsp -> 화면에 id, pw 출력하기
-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
alert("스크립트 블록");
// jQuery 블록을 만든다. ready() 함수로 만든다.
$(document).ready(function(){
alert("jQuery 블록");
$("#login_btn").click(function(){
alert("login_btn 블록");
$("#loginForm").attr({
"action":"/KosMember/koslogin/kos_login.jsp",
"method":"GET"
}).submit();
});
});
</script>
<style type="text/css">
.div1 {
border: 1px solid blue;
width: 300px;
height: 300px;
margin: 100px auto;
}
table {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">
<h3 align="center">KOS_LOGIN_OK JSP</h3>
<hr>
<form name="loginForm" id="loginForm">
<table align="center">
<tr>
<td>
<input type="text" class="mid" name="mid" id="mid" /><br>
</td>
</tr>
<tr>
<td>
<input type="text" class="mpw" name="mpw" id="mpw" /><br>
</td>
</tr>
<tr>
<td>
<button type="button" id="login_btn">login_btn</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
7교시 (16:30-17:20)
- 선생님 css 적용 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KOS_LONG HTML</title>
<!--
id : mid
pw : mpw
버튼 : login_btn
action : kos_login.jsp
method : GET
jQuery CDN 이용
버튼 클릭 이벤트 할 때 kos_login.jsp 보내기
kos_login.jsp -> 화면에 id, pw 출력하기
-->
<!-- jQuery CDN 불러오기 -------------------------------------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
alert("스크립트 블럭 ");
// jQuery 블럭을 만든다 : ready() 함수로 만든다.
$(document).ready(function(){
alert("jQuery 블럭 ");
$("#mid").attr('placeholder', '아이디 ');
$("#mpw").attr('placeholder', '비밀번호 ');
$('#login_btn').click(function(){
alert("login_btn 블럭 ");
$('#loginForm').attr({
"action":"/kosMember/koslogin/kos_login.jsp",
"method":"GET"
}).submit();
});
});
</script>
<style type="text/css">
.div1 {
background: lightblue;
border: 1px solid blue;
width: 300px;
height: 300px;
margin: 100px auto;
}
table {
border: 1px solid red;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<div class="div1">
<h3>KOS_LOGIN</h3>
<hr>
<form name="loginForm" id="loginForm">
<table align="center">
<tr>
<td>
<input type="text" class="mid" name="mid" id="mid" style="width:200px;"/>
</td>
</tr>
<tr>
<td>
<input type="text" class="mpw" name="mpw" id="mpw" style="width:200px;"/>
</td>
</tr>
<tr>
<td>
<button type="button" id="login_btn" style="width:208px; background-color: yellow;">
로그인
</button>
</td>
</tr>
<tr>
<td align="right">
<a href="#/kosMember/koslogin/findId.jsp"><font size="2">아이디찾기</font></a> |
<a href="#/kosMember/kosLogin/findPw.jsp"><font size="2">비밀번호찾기<font></a>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
- request_test.jsp ←파일 업로드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>REQUEST TEST</title>
</head>
<body>
<h3>REQUEST TEST</h3>
<hr>
<%
String context_path = pageContext.getServletContext().getRealPath("/");
out.println("context_path >>> : " + context_path);
String method = request.getMethod();
out.println("method >>> : " + method);
String content_type = request.getHeader("Content-Type");
out.println("content_type >>> : " + content_type + "<br>");
%>
<form action="request_test.jsp"
method="POST"
enctype="multipart/form-data">
<input type="submit" value="보내기" />
</form>
</body>
</html>
8교시 (17:30-18:30)
- 자습
Notes
728x90