5월 18일 (목)

카테고리 없음

5월 18일 (목) - []

Crecok 2023. 5. 18. 17:49

이전 수업 개념

▶ jQuery Core → DOM + CSS + UI → UI + JS

▶ jQuery UI 종류 : Button / Checkboxradio / Progressbar / Slider / Spinner / Selectmenu ...

jQuery UI - Autocomplete ( 자동완성 )

- 일반적인 실행과 외부 JSON 파일 생성 후 불러오는 방식으로 실행

- 검색한 문자가 포함된 목록을 보여준다.

▶ 참고 코드 일부 : https://jqueryui.com/autocomplete → view source

▶ 다이나믹 프로젝트 jQueryUIEx02 그대로 사용

▶ autocomplete01.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		const availableTags = [
		      "ActionScript",
		      "AppleScript",
		      "Asp",
		      "BASIC",
		      "C",
		      "C++",
		      "Clojure",
		      "COBOL",
		      "ColdFusion",
		      "Erlang",
		      "Fortran",
		      "Groovy",
		      "Haskell",
		      "Java",
		      "JavaScript",
		      "Lisp",
		      "Perl",
		      "PHP",
		      "Python",
		      "Ruby",
		      "Scala",
		      "Scheme"
		    ];
		$( '#tags' ).autocomplete({ source : availableTags });
	});
</script>
</head>
<body>
	<div>
		<label for="">Program Language</label>
		<input type="text" id="tags">
	</div>
</body>
</html>

▶ data 라는 이름의 폴더 생성 후, 폴더 안에 json.jsp 파일 생성 및 코드 작성

- json 타입의 문서는 반드시 https://jsonlint.com 사이트에서 Valid JSON 이 나오는지 확인한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
{
	"data" : [ "ActionScript",
		          "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
                  "COBOL", "ColdFusion", "Erlang", "Fortran",
		          "Groovy", "Haskell", "Java", "JavaScript",
                  "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]
}

▶ autocomplete02.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$.ajax({ 
			url : './data/json.jsp',
			type : 'get',
			dataType : 'json',
			success : function( jsonData ) {
				$( '#tags' ).autocomplete({ source : jsonData.data });
			},
			error : function( e ) {
				alert( '[에러] ' + e.status );
			}
		});

	});
</script>
</head>
<body>
	<div>
		<label for="">Program Language</label>
		<input type="text" id="tags">
	</div>
</body>
</html>

jQuery UI - Accordion (1)

▶ 참고 코드 일부 : https://jqueryui.com/accordion → view source

▶ accordion01.jsp 생성 후 코드 작성 (실행)

- 참고 코드 붙여넣기 후 가독성을 위해 코드 정리를 진행한다.

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#accordion' ).accordion();
	});
</script>
</head>
<body>

<div id="accordion">
	<h3>Section 1</h3>
		<div>
			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
		</div>
	<h3>Section 2</h3>
		<div>
    		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit ametpurus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitorvelit, faucibus interdum tellus libero ac justo. Vivamus non quam. Insuscipit faucibus urna.</p>
		</div>
	<h3>Section 3</h3>
		<div>
			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac liberoac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quislacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
			<ul>
				<li>List item one</li>
				<li>List item two</li>
				<li>List item three</li>
		    </ul>
		</div>
	<h3>Section 4</h3>
		<div>
			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netuset malesuada fames ac turpis egestas. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p>
			<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos.</p>
		</div>
</div>

</body>
</html>

jQuery UI - Accordion (2) ( 데이터 추가 / 선택 )

▶ accordion02.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#accordion' ).accordion();
		
		$( '#btn1' ).button().on( 'click', function() {
			let html = '';
			html += '<h3>Section 5</h3>';
			html += '<div>';
			html += '<p>추가된 데이터</p>';
			html += '</div>';
			
			$( '#accordion' ).append( html );
			$( '#accordion' ).accordion( 'refresh' );
		});
		
		$( '#btn2' ).button().on( 'click', function() {
			// console.log( $( '#accordion' ).accordion( 'option', 'active' ) );
			$( '#accordion' ).accordion( 'option', 'active', 2 );
		});
	});
</script>
</head>
<body>

<button id="btn1">데이터 추가</button>
<button id="btn2">데이터 선택</button>
<br /><hr /><br />

<div id="accordion">
	<h3>Section 1</h3>
		<div>
			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
		</div>
	<h3>Section 2</h3>
		<div>
    		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit ametpurus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitorvelit, faucibus interdum tellus libero ac justo. Vivamus non quam. Insuscipit faucibus urna.</p>
		</div>
	<h3>Section 3</h3>
		<div>
			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac liberoac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quislacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
			<ul>
				<li>List item one</li>
				<li>List item two</li>
				<li>List item three</li>
		    </ul>
		</div>
	<h3>Section 4</h3>
		<div>
			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netuset malesuada fames ac turpis egestas. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p>
			<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos.</p>
		</div>
</div>

</body>
</html>

Spinner 와 Accordion 을 활용해 시작단, 끝단을 입력받아 구구단을 출력하는 프로그램

▶ accordion03_Gugudan.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		
		$( '#start' ).spinner({
			min : 1,
			max : 9,
			spin : function() {
				$( '#end' ).spinner( 'value', $( this ).spinner( 'value' ) + 1 );
			}
		});
		
		$( '#end' ).spinner({
			min:1,
			max:9,
			spin : function() {
				$( '#end' ).spinner( 'value', $( this ).spinner( 'value' ) - 1 );
			}
		});
		
		$( '#accordion' ).accordion();
		
		$( '#btn' ).button().on( 'click', function() {
			
			const startDan = $( '#start' ).spinner( 'value' );
			const endDan = $( '#end' ).spinner( 'value' );
		
			$( '#accordion' ).empty();
			
			for( let i=startDan; i<=endDan; i++ ) {
				let html = '<h3>' + i + '단</h3>';
				html += '<div>';
				html += '<ul>';
				for( let j=1; j<=9; j++ ) {
					html += '<li>' + i + 'X' + j + '=' + (i*j) + '</li>';
				}
				html += '</ul>';
				html += '</div>';
				
				$( '#accordion' ).append( html );
			}
			$( '#accordion' ).accordion( 'refresh' );
		});
	});
</script>
</head>
<body>

<fieldset>
	<legend>구구단 출력</legend>
	<label for="start">시작단</label>
	<input type="text" id="start" value="1" readonly="readonly" />
	~
	<label for="end">끝단</label>
	<input type="text" id="end" value="2" readonly="readonly" />
	<button id="btn">구구단 출력</button>
	
</fieldset>

<div id="accordion">
</div>

</body>
</html>

jQuery UI - Accordion (3) ( Fill space )

▶ accordion04_Fillspace.jsp 생성 후 코드 작성 (실행)

- https://jqueryui.com/accordion/#fillspace 사이트의 view source를 참고한다.

- style 태그 / javascript 태그 / body 태그 안의 코드를 복사해서 사용해본다.

jQuery UI - Datepicker (1)

▶ datePicker01.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#datepicker1' ).datepicker();
		$( '#datepicker2' ).datepicker();
	});
</script>
</head>
<body>

<div>
	Date : <input type="text" id="datepicker1" readonly="readonly" />
</div>

<br />

<div>
	Date : <input type="date" />
</div>
<br />
<div>
	Date : <div id="datepicker2"></div>
</div>

</body>
</html>

좌 : jQuery - datePicker 기능 / 우 : HTML input 태그 기능

jQuery UI - Datepicker (2) ( Animations )

▶ datePicker02_Animations.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#datepicker' ).datepicker();
		$( '#anim' ).on( 'change', function() {
			$( '#datepicker' ).datepicker( 'option', 'showAnim', $( this ).val() );
		});
	});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" size="30"></p>

<p>Animations:<br>
  <select id="anim">
    <option value="show">Show (default)</option>
    <option value="slideDown">Slide down</option>
    <option value="fadeIn">Fade in</option>
    <option value="blind">Blind (UI Effect)</option>
    <option value="bounce">Bounce (UI Effect)</option>
    <option value="clip">Clip (UI Effect)</option>
    <option value="drop">Drop (UI Effect)</option>
    <option value="fold">Fold (UI Effect)</option>
    <option value="slide">Slide (UI Effect)</option>
    <option value>None</option>
  </select>
</p>

</body>
</html>

jQuery UI - Datepicker (3) ( 기타 옵션 및 한글 라이브러리 )

- dateFormat 속성으로 날짜 출력 형태도 변경할 수 있다.

▶ 기존 jQueryUIEx01 프로젝트의 webapp - ui - i18n 폴더 - datepicker-ko.js 복사

▶ jQueryUIEx02 프로젝트의 webapp - js 폴더 안으로 붙여넣기

▶ datePicker02.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript" src="./js/datepicker-ko.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#datepicker1' ).datepicker({
			showOtherMonths : true,
			selectOtherMonths : true,
			showButtonPanel : true,
			changeMonth : true,
			changeYear : true,
			numberOfMonths : 3,
			dateFormat : 'yy-mm-dd'
		});
	});
</script>
</head>
<body>

<div>
	Date : <input type="text" id="datepicker1" readonly="readonly" />
</div>

</body>
</html>

jQuery UI - Datepicker (4) ( 날짜 값 출력 )

▶ datePicker03.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript" src="./js/datepicker-ko.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#datepicker1' ).datepicker({
			// 이벤트
			onClose : function( data ) {
				console.log( data );
			}
		});
		
		$( '#btn' ).button().on( 'click', function() {
			console.log( $( '#datepicker1' ).val() );
			console.log( $( '#datepicker1' ).datepicker( 'getDate' ) );
		});
	});
</script>
</head>
<body>

<div>
	Date : <input type="text" id="datepicker1" readonly="readonly" />
</div>
<br />
<button id="btn">읽기</button>

</body>
</html>

jQuery UI - Dialog (1)

▶ dialog01.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript" src="./js/datepicker-ko.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		// 새 창
		// window.open - mpa ( Multi Page Application )
		$( '#btn1' ).button().on( 'click', function() {
			open( 'https://m.daum.net', 'winopen', 'width=640, height=960' );
		});
		// jQuery
		// dialog - spa ( Single Page Application )
		
		$( '#dialog' ).dialog({
			autoOpen : false,
			modal : true,
			width : 500,
			height : 300,
			resizable : false,
			buttons : {
				'취소' : function() {
					alert( '취소' );
					$( this ).dialog( 'close' );
				},
				'확인' : function() {
					alert( '확인' );
					$( this ).dialog( 'close' );
				}
			},
			show : {
				effect : 'blind',
				duration : 1000
			},
			hide : {
				effect : 'explode',
				duration : 1000
			}
		});
		
		$( '#btn2' ).button().on( 'click', function() {
			$( '#dialog' ).dialog( 'open' );
		});
	});
</script>
</head>
<body>

<button id="btn1">새 창 열기</button>
<button id="btn2">다이얼로그 열기</button>

<br /><hr /><br />

<div id="dialog" title="jQuery 다이얼로그">
	<h1>Hello 다이얼로그</h1>
</div>

</body>
</html>

jQuery UI - Dialog (2) ( Modal form )

▶ 참고 코드 일부 : https://jqueryui.com/dialog/#modal-form → view source

▶ dialog02.jsp 생성 후 코드 작성 (실행)

<%@ 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 rel="stylesheet" href="./css/base/jquery-ui.css" />
<style type="text/css">
	label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 700px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript" src="./js/datepicker-ko.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#dialog-form' ).dialog({
			autoOpen : false,
			modal : true,
			width : 350,
			height : 400,
			resizable : false,
			buttons : {
				'취소' : function() {
					$( this ).dialog( 'close' );
				},
				'추가' : function() {
					let html = '<tr>';
					html += '<td>' + 1 + '</td>';
					html += '<td>' + $( '#name' ).val() + '</td>';
					html += '<td>' + $( '#email' ).val() + '</td>';
					html += '<td>' + $( '#password' ).val() + '</td>';
					html += '</tr>';
					
					$( '#users tbody' ).append( html );
				
					$( this ).dialog( 'close' );
				}
			}
		});	
	
		$( '#btn1' ).button().on( 'click', function() {
			$( '#dialog-form' ).dialog( 'open' );
		});
	});
</script>
</head>
<body>

<button id="btn1">추가</button>
<br /><hr /><br />

<div id="users-contain" class="ui-widget">
	<h1>Existing Users:</h1>
	<table id="users" class="ui-widget ui-widget-content">
    <thead>
		<tr class="ui-widget-header ">
			<th>Seq</th>
			<th>Name</th>
			<th>Email</th>
			<th>Password</th>
		</tr>
	</thead>
    <tbody>
		<tr>
			<td>1</td>
			<td>John Doe</td>
			<td>john.doe@example.com</td>
			<td>johndoe1</td>
		</tr>
	</tbody>
	</table>
</div>

<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>
 
	<form>
		<fieldset>
			<label for="name">Name</label>
			<input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
			<label for="email">Email</label>
			<input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
			<label for="password">Password</label>
			<input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
			<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
		</fieldset>
	</form>
</div>

</body>
</html>

jQuery UI - Dialog (3) ( Modal form )

▶ 참고 자료 : 아래에 첨부

member01.jsp

0.00MB

▶ 다이나믹 프로젝트 jQueryUIEx04 생성

▶ webapp 폴더에 css, js 폴더 붙여넣기

▶ webapp 폴더에 member01.jsp 붙여넣기

▶ mysql DB project 계정으로 접속 → project DB에서 테이블 생성

create table users (
seq int not null primary key auto_increment,
name varchar(20) not null,
password varchar(20) not null,
email varchar(100),
address varchar(150),
wdate datetime
);

▶ users 테이블에 샘플 데이터 넣기

insert into users values ( 0, '홍길동', '1234', 'test@test.com', '서울시 서초구', now() );

▶ 프로토콜 만들기

회원목록 → x → user_list.jsp

<users>

<data>

</data>

...

</users>

회원추가 → name, password, email, address → user_write.jsp

회원삭제 → seq, password → user_delete.jsp

회원수정 → seq, password, email, address → user_modify.jsp

step 1.

MemberTO

MemberDAO

listUser()

user_list.jsp

2. ajax 디자인화

3. 회원추가

대부분의 기능에서 동기화를 위한 user_list.jsp 호출이 필요하다.

입력 화면 팝업 → 추가 버튼 클릭 → user_write.jsp 호출 → 정상 → user_list.jsp 호출 → 화면 출력

MemberDAO

userWrite();

user_write.jsp

저작자표시 비영리 변경금지 (새창열림)