240308 WEB - 정리 2, jQuery

KDT/WEB

240308 WEB - 정리 2, jQuery

001cloudid 2024. 3. 8. 18:40

728x90

정리 2

폼에서 입력한 내용이 서버에 전달되면 서버에 request 내장 객체 저장

web.xml : 페이지를 적지 않으면 자동으로 실행 시켜줌

response.sendredirect : 주소가 바뀌면서 요청 - 응답 결과값

session.setAttribute : 연결되어 있는 동안 페이지 상관없이 값을 유지

MVC패턴을 이용하기 전에는 jsp에 모든 것을 다 넣음.(여러 명이 동시에 작업하기 위해 분리)

객체 생성 개념

MemberDTO memberDTO = new MemberDTO();

변수에는 하나만 저장이 가능, 기억장소를 여러 개 담을 수 있게

memberDTO 여러 개를 담을 수 있는 주소값을 가지고 있음. set() get() 메소드로 접근

MVC 패턴

Q. MVC 패턴 동작원리 및 장점

장점

-반복되는 작업을 줄여줌. (수정 최소화)

-여러 명이 동시에 작업할 수 있게 작업별로 분리시켜놓음

-보안상에 이점(가상 주소가 화면에 보임)

Model => DB 작업

View => 화면

Controller => 제어(전체적인 제어, SQL 제어 처리), 자바 파일 메소드()

하이퍼링크가 되지 않기 때문에 가상 주소를 만들어서 하이퍼링크 연결

MVC 동작원리

web.xml 설정 정보 : 가상 주소 -> 주소 매핑하는 처리담당자 연결

servlet(명령 처리 담당자) 주소 매핑 실제 페이지(자바 메소드()) 연결

...

시작점 => 가상주소

※MVC 형태는 제 각기다름

주소매핑 post, get

스프링 프레임워크

Q. DI 의존관계주입, AOP, 스프링 보안

자바로 만든 프로그램 툴

스프링 MVC동작원리

최근 트랜드는 xml보다 java로 사용을 많이함

jQuery

onclick 버튼에 이벤트 함수를 불러옴. 값을 들고가지 못함

sumbit 폼 태그 전체를 전송. 값을 들고감

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
<script src="${pageContext.request.contextPath}/resources/script/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<!-- include 경로 => jsp 문법 => 상대적인 웹 경로를 적용. 현 파일을 기준으로 상대적으로 경로를 표시 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->
<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Join us</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->
<!-- 본문내용 -->
<article>
<h1>Join Us</h1>
<form action="${pageContext.request.contextPath}/member/insertPro" id="join" method="post">
<!-- 비밀번호가 포함되어있으면 method를 post -->
<fieldset>
<legend>Basic Info</legend>
<label>User ID</label>
<input type="text" name="id" class="id">
<input type="button" value="dup.check" class="dup"><br>
<label></label>
<div id="dupdiv"></div><br>
<label>Password</label>
<input type="password" name="pw" class="pw"><br>
<label>Retype Password</label>
<input type="password" name="pw2" class="pw2"><br>
<label>Name</label>
<input type="text" name="name" class="name"><br>
<label>E-Mail</label>
<input type="email" name="email"><br>
<label>Retype E-Mail</label>
<input type="email" name="email2"><br>
</fieldset>

<fieldset>
<legend>Optional</legend>
<label>Address</label>
<input type="text" name="address"><br>
<label>Phone Number</label>
<input type="text" name="phone"><br>
<label>Mobile Phone Number</label>
<input type="text" name="mobile"><br>
</fieldset>
<div class="clear"></div>
<div id="buttons">
<input type="submit" value="Submit" class="submit">
<input type="reset" value="Cancel" class="cancel">
</div>
</form>
</article>
<!-- 본문내용 -->
<!-- 본문들어가는 곳 -->

<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>

<!-- Ajax(Asynchronous JavaScript and XML) 비동기적인 웹 애플리케이션의 제작을 위해 웹 개발 기법 -->
<script type="text/javascript">

//<input type="button" value="dup. check" class="dup">
	$(function() {
		//대상.함수()
		$(".dup").click(function(){
// 			alert("클릭");
			//$(대상).함수 이지만, ajax는 주소값
			//속성이 여러 개 있을 경우
			
			//alert($('.id').val()); //class="id" 아이디 상자 대상 => .val() value값
			//${pageContext.request.contextPath}/member/idCheck?id=값
			$.ajax({
				//속성 : 값, 속성 : 값,...
				url : '${pageContext.request.contextPath}/member/idCheck',
				data : {'id' : $('.id').val()}, //data : {이름(아이디):값, 이름: 값}
				success : function(result){
					//result 출력 결과값
					if(result=="iddup"){
						result = "사용불가능한 아이디입니다.";
					}else{
						result = "사용가능한 아이디입니다.";
					}
					
// 					alert(result);
// 					id="dupdiv" 결과값 넣기 => 대상에 html 문서를 넣기
					$('#dupdiv').html(result);
				}
			});
		
		});
		
		
// 		$(".dup").on("click",function(){
// 			alert("on클릭");			
// 		});
	});
	
//===================================================================================
	
	$(function (){
		// <input type="button" value="버튼" onClick="location.href='주소값'"> 버튼일 때는 onClick 이벤트 동작
		// <input type="submit" value="Submit" class="submit"> 클릭하면 
		// submit 전송 동작 => 폼 태그 전체가 submit
		// 폼 태그의 이름 id="join" 전송
		// 대상.함수()
		$('#join').submit(function(){
			alert("전송버튼 클릭");
			
			// class="id" value값 가져오기
			//alert(대상.함수);
// 			alert("아이디 " + $('.id').val());
			if($('.id').val()=== null || $('.id').val()=== undefined || $('.id').val() === ''){
				alert("아이디를 입력해주세요.");
				$('.id').focus();
				//전송 못하게(false 신호값) 함수 호출한 곳으로 이동(되돌아가기)
				return false;
			} 
			
			// class="pw" value값 가져오기
			if($('.pw').val() === null || $('.pw').val() === undefined || $('.pw').val() === ''){
				alert("비밀번호를 입력해주세요.");
				$('.pw').focus();
				return false;
			}
			if($('.pw2').val() === null || $('.pw2').val() === undefined || $('.pw2').val() === ''){
				alert("비밀번호를 입력해주세요.");
				$('.pw2').focus();
				return false;
			}			
			if($('.pw').val() !== $('.pw2').val()){
				alert("비밀번호를 확인해주세요.");
				$('.pw').focus();
				return false;
			} 
			
			// class="name" value값 가져오기
			if($('.name').val() === null || $('.name') === undefined || $('.name').val() === ''){
				alert("이름을 입력해주세요.");
				$('.name').focus();
				return false;
			}
	
			
		});
	});
	
</script>


</body>
</html>

alert 대신

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
<script src="${pageContext.request.contextPath}/resources/script/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<!-- include 경로 => jsp 문법 => 상대적인 웹 경로를 적용. 현 파일을 기준으로 상대적으로 경로를 표시 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->
<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Join us</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->
<!-- 본문내용 -->
<article>
<h1>Join Us</h1>
<form action="${pageContext.request.contextPath}/member/insertPro" id="join" method="post">
<!-- 비밀번호가 포함되어있으면 method를 post -->
<fieldset>
<legend>Basic Info</legend>
<label></label>
<div id="checkdiv"></div><br>
<label>User ID</label>
<input type="text" name="id" class="id">
<input type="button" value="dup.check" class="dup"><br>
<label></label>
<div id="dupdiv"></div><br>
<label>Password</label>
<input type="password" name="pw" class="pw"><br>
<label>Retype Password</label>
<input type="password" name="pw2" class="pw2"><br>
<label>Name</label>
<input type="text" name="name" class="name"><br>
<label>E-Mail</label>
<input type="email" name="email"><br>
<label>Retype E-Mail</label>
<input type="email" name="email2"><br>
</fieldset>

<fieldset>
<legend>Optional</legend>
<label>Address</label>
<input type="text" name="address"><br>
<label>Phone Number</label>
<input type="text" name="phone"><br>
<label>Mobile Phone Number</label>
<input type="text" name="mobile"><br>
</fieldset>
<div class="clear"></div>
<div id="buttons">
<input type="submit" value="Submit" class="submit">
<input type="reset" value="Cancel" class="cancel">
</div>
</form>
</article>
<!-- 본문내용 -->
<!-- 본문들어가는 곳 -->

<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>

<!-- Ajax(Asynchronous JavaScript and XML) 비동기적인 웹 애플리케이션의 제작을 위해 웹 개발 기법 -->
<script type="text/javascript">

//<input type="button" value="dup. check" class="dup">
	$(function() {
		//대상.함수()
		$(".dup").click(function(){
// 			alert("클릭");
			//$(대상).함수 이지만, ajax는 주소값
			//속성이 여러 개 있을 경우
			
			//alert($('.id').val()); //class="id" 아이디 상자 대상 => .val() value값
			//${pageContext.request.contextPath}/member/idCheck?id=값
			$.ajax({
				//속성 : 값, 속성 : 값,...
				url : '${pageContext.request.contextPath}/member/idCheck',
				data : {'id' : $('.id').val()}, //data : {이름(아이디):값, 이름: 값}
				success : function(result){
					//result 출력 결과값
					if(result=="iddup"){
						result = "사용불가능한 아이디입니다.";
					}else{
						result = "사용가능한 아이디입니다.";
					}
					
// 					alert(result);
// 					id="dupdiv" 결과값 넣기 => 대상에 html 문서를 넣기
					$('#dupdiv').html(result);
				}
			});
		
		});
		
		
// 		$(".dup").on("click",function(){
// 			alert("on클릭");			
// 		});
	});
	
//===================================================================================
	
	$(function (){
		// <input type="button" value="버튼" onClick="location.href='주소값'"> 버튼일 때는 onClick 이벤트 동작
		// <input type="submit" value="Submit" class="submit"> 클릭하면 
		// submit 전송 동작 => 폼 태그 전체가 submit
		// 폼 태그의 이름 id="join" 전송
		// 대상.함수()
		$('#join').submit(function(){
// 			alert("전송버튼 클릭");
			
			// class="id" value값 가져오기
			//alert(대상.함수);
// 			alert("아이디 " + $('.id').val());
			if($('.id').val()=== null || $('.id').val()=== undefined || $('.id').val() === ''){
// 				alert("아이디를 입력해주세요.");
				//id="checkdiv"에 "아이디를 입력해주세요." 내용 넣기
// 				$('#checkdiv').함수();
// 				$('#checkdiv').html("아이디를 입력해주세요.");
				//대상.함수().함수();
				$('#checkdiv').html("아이디를 입력해주세요.").css("color", "red");
				$('.id').focus();
				//전송 못하게(false 신호값) 함수 호출한 곳으로 이동(되돌아가기)
				return false;
			} 
			
			// class="pw" value값 가져오기
			if($('.pw').val() === null || $('.pw').val() === undefined || $('.pw').val() === ''){
// 				alert("비밀번호를 입력해주세요.");
				$('#checkdiv').html("비밀번호를 입력해주세요.").css("color", "red");
				$('.pw').focus();
				return false;
			}
			if($('.pw2').val() === null || $('.pw2').val() === undefined || $('.pw2').val() === ''){
// 				alert("비밀번호를 입력해주세요.");
				$('#checkdiv').html("비밀번호를 입력해주세요.").css("color", "red");
				$('.pw2').focus();
				return false;
			}			
			if($('.pw').val() !== $('.pw2').val()){
// 				alert("비밀번호를 확인해주세요.");
				$('#checkdiv').html("비밀번호를 확인해주세요.").css("color", "red");
				$('.pw').focus();
				return false;
			} 
			
			// class="name" value값 가져오기
			if($('.name').val() === null || $('.name') === undefined || $('.name').val() === ''){
// 				alert("이름을 입력해주세요.");
				$('#checkdiv').html("이름을 입력해주세요.").css("color", "red");
				$('.name').focus();
				return false;
			}
	
			
		});
	});
	
</script>


</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/resources/css/default.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/resources/css/subpage.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
 <script src="../script/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('#wrap');
   DD_belatedPNG.fix('#main_img');   

 </script>
 <![endif]-->
 <script src="${pageContext.request.contextPath}/resources/script/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp" />
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->
<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
<ul>
<li><a href="#">Join us</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</nav>
<!-- 왼쪽메뉴 -->
<!-- 본문내용 -->
<article>
<h1>Login</h1>
<form action="${pageContext.request.contextPath}/member/loginPro" id="join" method="post">
<fieldset>
<legend>Login Info</legend>
<label></label>
<div id="checkdiv"></div><br>
<label>User ID</label>
<input type="text" name="id" class="id"><br>
<label>Password</label>
<input type="password" name="pw" class="pw"><br>
</fieldset>
<div class="clear"></div>
<div id="buttons">
<input type="submit" value="Submit" class="submit">
<input type="reset" value="Cancel" class="cancel">
</div>
</form>
</article>
<!-- 본문내용 -->
<!-- 본문들어가는 곳 -->

<div class="clear"></div>
<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp" />
<!-- 푸터들어가는 곳 -->
</div>
<script>
$(function(){
	
	$('#join').submit(function(){
		
		if($('.id').val() === ''|| $('.id').val() === null){
// 			alert('아이디를 입력해주세요.');
			$('#checkdiv').html("아이디를 입력해주세요.").css("color", "red");
			return false;
		}
		
		if($('.pw').val() === '' || $('.pw').val() === null){
// 			alert('비밀번호를 입력해주세요.');
			$('#checkdiv').html("비밀번호를 입력해주세요.").css("color", "red");
			return false;
		}
		
	});
	
	
});


</script>
</body>
</html>

728x90

'KDT > WEB' 카테고리의 다른 글

240312 WEB - jQuery AJAX (0)	2024.03.12
240311 WEB - 로그인 제어 (0)	2024.03.11
240307 WEB - 정리 1, 보안 취약점 1 (0)	2024.03.07
240227 WEB - Map (0)	2024.02.27
240223 WEB 댓글,대댓글 (0)	2024.02.23

현재글240308 WEB - 정리 2, jQuery

001cloudid