23.05.18

이준영·2023년 5월 18일

jQueryUI
jQuery Core로 만듦 => dom + css = UI
UI + JS

button / checkboxradio
progressbar / slider
spinner / selectmenu
selectmenu => 우편번호...
에러는 항상 시간이 필요한법 조급해하지 말자 ...

autocomplete

자동완성 기능

<%@ 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">
	/* 사용자 스타일 */
	body{font-size:80%;}
</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() {
    	// 홈페이지에 있는 view 소스를 가져옴
		 var 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>

a 입 력하면 밑에 a에 해당하는 옵션값들이 뜬다. (자동완성처럼)

원격으로 쓰기

webapp안에 data란 폴더를 만들어서 json.jsp 파일 생성

json.jsp

<%@ page language="java" contentType="text/plain; 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">
	/* 사용자 스타일 */
	body{font-size:80%;}
</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(json) {
				 $('#tags').autocomplete({
					 // json은 function의 매개변수로 있는 json
					 // data는 data폴더의 json파일의 {} 안에있는 "data"를 의미
					 source: json.data
				 })
			},
			error: function() {
				alert('[에러]' + e.status);
			}
		});
		 
	
		 $('#tags').autocomplete({
			 source: availableTags
		 })
	})
</script>
</head>
<body>

<div>
	<label for="">Program Language</label>
	<input type="text" id="tags">
</div>

</body>
</html>

똑같이 문자 입력하면 문자에 대한 json에 있는 옵션값들이 나온다.

accordion

제목과 내용 형식으로 구성이 된, 사용자 인터페이스 구성 요소

버튼 누를 시 accordion 추가하기

<link rel="stylesheet" href="./css/dark-hive/jquery-ui.css" /> <-- 테마 바꾼 것



<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');   <-- 새로고침으로 어코디언상태로 넣어주기!
		 });

		
	});
</script>

버튼 누를 시 accrodion 값 선택

선택 버튼 추가 후 console창에 아래 항목 띄워보기

$('#btn2').button().on('click',function() {
			console.log($('#accordion').accordion('option', 'active'));
		});
--------------------------------------------------------------------------

<button id="btn2">데이터 선택</button>

선택된 것의 상태를 출력해줌(0 기준, 섹션 5는 4 출력)

$('#btn2').button().on('click',function() {
			//console.log($('#accordion').accordion('option', 'active'));
			$('#accordion').accordion('option', 'active', 2); 
		});

버튼 클릭시 2(섹션3)이 자동으로 선택된다.

응용 : spinner 구구단 개량하여 accordion형식으로 구구단 만들기

accordion ui 만들어줘서 spinner형식에서 테이블 형식 -> accordion 형식으로 바꿔주면 된다.

<script type="text/javascript">
	$(document).ready(function() {
		 $('#start').spinner({
			min: 1,
		 	max: 8,
			spin: function() {
				 $('#end').spinner('value', $(this).spinner('value') + 1);
			 }
		 });
		 
		$('#end').spinner({
			min:2,
			max:9,
			 spin: function() {
				 $('#end').spinner('value', $(this).spinner('value') - 1);
			 }
		 });
		
		$('#result').accordion();

		
		 $('#btn').button().on('click', function() {
			let cols =  $('#start').spinner('value');
			let rows =  $('#end').spinner('value');
			
			$('#result').empty();  --> 새로 버튼 클릭시 기존 결과 초기화
            
			let html = '';
			 for(let i = cols; i <= rows; i++) {   <-- accordion형식으로 하기
				html += '<h3>'+ i +'단' +'</h3>';
				 html += '<div>';
				 for(let j = 1; j <= 9; j++) {
					 html += '<p>' + i + " * " + j + "=" + (i * j)  + '</p>'
				 }
				 html += '</div>'
				 }
			 
				$('#result').append(html);
				$('#result').accordion('refresh');
			 });
	});
</script>

특정 영역에 accordion 주기 (사이즈 조정 가능)

<script type="text/javascript">
	$(document).ready(function() {
		
		$('#accordion').accordion({
			heightStyple: "fill"   <-- fill 적용
		});


		$('#accordion-resizer').resizable({
			minHeight: 140,
			minWidth: 200,    <-- 크기 지정
			resize: function() {
				$('#accordion').accordion('refresh');
			}
		});
	 });
</script>

------------------------------------------------------------------------------------------------

<h3 class="docs">Resize the outer container:</h3>
 
<div id="accordion-resizer" class="ui-widget-content">
  <div id="accordion">
    <h3>Section 1</h3>
    <div>
      <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. 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 amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit 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 libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia 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 netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus 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, per inceptos himenaeos. </p>
    </div>
  </div>
</div>

특정 영역(자세히 보면 네모칸 보임)에 들어있는 모습, 사이즈도 조정 가능하다!

sortable - 섹션들의 순서를 바꿀 수 있음(알아만 두기!)

datepicker

기본형식

<script type="text/javascript">
	$(document).ready(function() {
		
		$('#datePicker1').datepicker();
	 });
</script>

-------------------------------------------------------------------------

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

밑은 html의 date형식이다.

<div>
	Date : <input type="date" /> 
</div>

클릭시 나오는 게 아닌 처음부터 박혀나오게 하기

<script type="text/javascript">
	$(document).ready(function() {
		
		$('#datePicker1').datepicker();
		
		$('#datePicker2').datepicker();

	 });
</script>

-------------------------------------------------------------------------

<body>
<h3 class="docs">Resize the outer container:</h3>
 
<div>
	Date : <input type="text" id="datePicker1" readonly="readonly" /> 
</div>

<div>
	Date : <div id="datePicker2"></div>  <-- 바로 나옴
</div>

datePicker에 애니메이션 주기

<script type="text/javascript">
	$(document).ready(function() {
		
		$('#datePicker1').datepicker();
		
		$('#anim').on('change', function() {
			$('#datePicker1').datepicker('option', 'showAnim', $(this).val());  
            <-- 옵션에서 선택하면 그에 맞는 애니메이션 보여주게 끔 설계
			
		});

	 });
</script>

-------------------------------------------------------------------------

<body>
<h3 class="docs">Resize the outer container:</h3>
 
<div>
	Date : <input type="text" id="datePicker1" size="30" readonly="readonly" /> 
</div>

<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>

선택한 애니메이션 옵션에 따라 데이트 클릭시 나오는 효과가 다름

추가 옵션들

	$(document).ready(function() {
		
		$('#datePicker1').datepicker({
			showOtherMonths: true,
			selectOhterMonths: true,   <--- 전, 후 달의 일수도 보여줌
			showButtonPanel: true,   <-- today, done 같은 버튼 생성
			changeMonth: true,
			changeYear: true,    <--- 년, 월 바꾸는 옵션창 생성
			numberOfMonths: 3    <--- n달 한번에 보여줌(예에서는 3이니까 3달치)
		});
		
	 });

showOtherMonths / selectOhterMonths 사용 모습

showButtonPanel / changeMonth/Year 사용 모습

3.numberOfMonths : 3 사용 모습

달력 한글로 변경하기

i18n(datepicker 나라별 언어로 저장되어 있는 폴더) -> datepicker-ko 복사(한국어), js 폴더 안에 넣기 -> 해당jsp에 가져오기

<script type="text/javascript" src="./js/datepicker-ko.js"></script>

$(document).ready(function() {
		
		$('#datePicker1').datepicker({
			showOtherMonths: true,
			selectOhterMonths: true,
			showButtonPanel: true,
			changeMonth: true,
			changeYear: true,
			numberOfMonths: 3,
			//dateFormat: 'yy-mm-dd'  <-- 해당 일 클릭시 이런 형식으로 텍스트박스에 보여줌
		});
		
	 });

달력 일 클릭시 클릭한 요일 값 콘솔에 출력

<script type="text/javascript">
	$(document).ready(function() {
		
		$('#datepicker1').datepicker({
        1.
			//이벤트 = 달력이 닫힐 시 해당 클릭한 데이터 가져오기
			onClose: function(data) {
				console.log(data);
			}
		});
		
        
        2.
		$('#btn1').button().on('click', function() {
        	//클릭한 달력 값 출력
			console.log($('#datepicker1').val() ); 
			// datepicker 안쪽에서 date 객체 형식으로 가져오기
			console.log($('#datepicker1').datepicker('getDate') ); 
		});
		
	 });
</script>

Dialog : 서브창

기본 mpa 형식

<script type="text/javascript">
	$(document).ready(function() {
		// 새창
		// window.open -mpa
		$('#btn1').button().on('click', function() {
			open('https://m.daum.net', 'winopen', 'width=640, height=960');
		});
		// jQuery
		// dialog - spa
		
	 });
</script>

-------------------------------------------------------------------------

<body>
<button id="btn1">새창 열기</button>
</body>

다이얼로그 형식

$(document).ready(function() {
		// dialog - spa
		
		$('#dialog').dialog();  <-- 실행시 바로 실행


		
	 });

<script type="text/javascript">
	$(document).ready(function() {
		// 새창
		// window.open -mpa
		$('#btn1').button().on('click', function() {
			open('https://m.daum.net', 'winopen', 'width=640, height=960');
		});
		// jQuery
		// dialog - spa
		
		//$('#dialog').dialog();  <-- 실행시 바로 실행
		$('#dialog').dialog({
			autoOpen: false,   // 만들어졌으나 보여주지 말라는 뜻
			modal: true,      <-- modal효과, 다이얼로그 보일 시 다른 거 못 누름
			width:500,
			height:300,
			resizable:false         //<-- 창 크기 변경 막음
		});
		
		$('#btn2').button().on('click', function() {
			$('#dialog').dialog('open'); //버튼 클릭시 숨겨진 다이얼로그 오픈
		});

		
	 });
</script>

다이얼로그 버튼 클릭시 보여줌

modal 효과가 추가된 모습

다이얼로그 확인창 만들기

		$('#dialog').dialog({
			autoOpen: false,   // 만들어졌으나 보여주지 말라는 뜻
			modal: true,
			width:500,
			height:300,
			resizable:false,         //<-- 창 크기 변경 막음
			
			buttons : {       // <-- 다이얼로그 밑에 버튼 생성
				'취소': function() {
					alert('취소');
                    $(this).dialog('close');   <-- 취소 알림창 뜨고 창이 닫힘
				},
			
				'확인': function() {
					alert('확인');
					$(this).dialog('close');   <-- 확인 알림창 뜨고 창이 닫힘

				}
			}
		});
		
		$('#btn2').button().on('click', function() {
			$('#dialog').dialog('open'); //버튼 클릭시 숨겨진 다이얼로그 오픈
		});

애니메이션 효과 주기

$('#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
			}
		});

다이얼로그 입력창 누르고 확인시 데이터 추가

<%@ 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/redmond/jquery-ui.css" />
<style type="text/css">
	body {font-size:80%}
    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">
	$(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);  <--- users에 tbody 뒤에 생성하기

					$(this).dialog('close');
						
				}
			}
			
		});
		
		$('#btn1').button().on('click',function() {
			$('#dialog-form').dialog('open');
		});
	 });
</script>
</head>
<body>
<button id="btn1">추가</button>

<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">
 
			<!-- Allow form submission with keyboard without duplicating the dialog button -->
			<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
		</fieldset>
	</form>
</div>

</body>
</html>

유저 입력창 만들어보기

1. 테이블 만들기

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
);

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

2. protocol 만들기

흐름도

페이지 흐름
1. 회원목록 to / dao -> userList() 메서드 만들기
user_list.jsp만들기(xml)

ajax - > 디자인

3.회원추가 : 회면->추가->user_write.jsp(memberDAO안에 userWrite()메서드 하나 생성후 정보 가져와야함)->정상일때 -> user_list.jsp -> 화면 출력

수정/ 삭제 : 추가와 비슷, seq를 가져와야 함

3. to / dao 만들기

dao는 순차적으로 만들어도 좋다(list만들때 list, write 때 write, 처음이니까 순차적으로 만들기)

4. user_list.jsp(xml) 만들고 member01.jsp에서 가져온 디비 출력해보기

user.list.jsp(xml)

<%@page import="model1.MemberTO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="model1.MemberDAO"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	MemberDAO dao = new MemberDAO();

	ArrayList<MemberTO> members = dao.userList();
	
	StringBuilder sbXml = new StringBuilder();
	
	for(MemberTO to : members) {
		String seq = to.getSeq();
		String name = to.getName();
		String email = to.getEmail();
		String address = to.getAddress();
		String wdate = to.getWdate();
		
		sbXml.append("<user>");
		sbXml.append("<seq>" + seq + "</seq>");
		sbXml.append("<name>" + name + "</name>");
		sbXml.append("<email>" + email + "</email>");
		sbXml.append("<address>" + address + "</address>");
		sbXml.append("<wdate>" + wdate + "</wdate>");
		sbXml.append("</user>");
	}
%>


<users>
<%=sbXml %>
</users>

member01.jsp

위에 있는 기존 소스에서 ajax위한 구문만 추가하기(많이 불릴 것 같아서 함수로 선언)

...
...

listServer();  <-- 마지막 부분에 호출하는 구문 쓰기
});

//리스트가 여러번 불릴 것 대비하여 함수로 만들기
	const listServer = function() {
		$.ajax({
			url:'./data/user_list.jsp',
			type: 'get',
			dataType:'xml',
			success: function(xml) {
				//
				let html = '';
				$(xml).find('user').each(function() {
					console.log($(this).find('name').text()); <-- 하나 호출해보기(검사용)
                    
                    html += '<tr>';
					html += '<td>' + $(this).find('seq').text() + '</td>';
					html += '<td>' + $(this).find('name').text() + '</td>';
					html += '<td>' + $(this).find('email').text() + '</td>';
					html += '<td>' + $(this).find('address').text() + '</td>';
					html += '</tr>';
					
				})
				$('#users tbody').append(html); <-- 만들어진 테이블에 붙여넣기
			},
			
			error: function(err) {
				alert('에러' + err.status);
			}
		});
	};

5. 회원추가 하기 (write)

5.1 - dao에 userWrite() 메서드 추가 (db 정보 가져와서 flag 넘겨주기 위함)

5.2 - user_write.jsp 만들기

5.3 - member02에 추가하는 작업 하기

user_write.jsp


<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="model1.MemberTO"%>
<%@page import="model1.MemberDAO"%>

<%

	request.setCharacterEncoding("utf-8");


	MemberTO to = new MemberTO();
	
	to.setName(request.getParameter("name"));
	to.setPassword(request.getParameter("password"));
	to.setEmail(request.getParameter("email"));
	to.setAddress(request.getParameter("address"));
	
	MemberDAO dao = new MemberDAO();
	
	int flag = dao.userWrite(to);  <-- flag로 받아서

	//http://localhost:8080/jQueryUIEx4/data/user_write.jsp?name=tester2&password=1234&email=test1@test.com&address=addresses <-- 실행테스트 하기, 0이 나오면 db에 추가됨

%>


<users>
<flag><%=flag %></flag>  <--- xml형식으로 flag 확인(0일시 db에 해당 정보 추가됨)
</users>

정상 처리되어 db에 추가된 모습

member02.jsp

(member는 결국 결과물이 다 합쳐진 하나의 상태로 나올 건데, 아직 처음이라 하나씩 하나씩 점차적으로 만들어서 무엇이 바뀌는지 비교하기 위하여 이렇게 만드는 것)

member01에서 변경점 - 추가 버튼을 누를시에 데이터를 추가하는 구문, 추가하기 위하여 ajax로 가져오는 구문을 추가

<script type="text/javascript">
	$( document ).ready( function() {	
		$( '#write-form' ).dialog({
			autoOpen: false,
			modal: true,
			width: 350,
			height: 400,
			resizable: false,
			buttons: {
				'취소': function() {
					$( this ).dialog( 'close' );
				},
				'추가': function() {
					writeServer(
					$( '#w_name' ).val(), 
					$( '#w_password' ).val(),	
					$( '#w_email' ).val(), 
					$( '#w_address' ).val());
				}
			}
		});
		
		$( '#btn1' ).button().on( 'click', function() {
			$( '#write-form' ).dialog( 'open' ); 
		});
		
		listServer();
	});
	
	//user_write.jsp 가져오기 위한 ajax 서버
	const writeServer = function(name, password, email, address) {
		$.ajax({
			url:'./data/user_write.jsp',
			type:'get',
			data: {
				name: name,
				password: password,
				email: email,
				address: address
			},
			dataType:'xml',
			success: function(xml) {
				//정상일 때
				if($(xml).find('flag').text() == '0') {
					alert('추가 성공');
					
					//갱신 데이터를 가져오기 위해 리스트 서버 다시 호출
					listServer();
					
					//데이터를 추가하고 나면 데이터가 그대로 남아있어서(객체가 새로 만들어 지는 게 아닌 숨긴 것을 보여주는 식이라) 추가하고 나서
					//안에 있는 데이터를 청소해주기 위해 사용
					$( '#w_name' ).val('');
					$( '#w_password' ).val('');	
					$( '#w_email' ).val('');
					$( '#w_address' ).val('');
					
					$('#write-form').dialog('close');
				}
				else {
					alert('에러');
				}
			},
			
			error: function(err) {
				alert('에러' + err.status);
			}
		})
	}
	
	//리스트가 여러번 불릴 것 대비하여 함수로 만들기(리스트용 ajax)
	const listServer = function() {
		$.ajax({
			url:'./data/user_list.jsp',
			type: 'get',
			dataType:'xml',
			success: function(xml) {
				//
				$('#users tbody').empty();

				let html = '';
				$(xml).find('user').each(function() {
					html += '<tr>';
					html += '<td>' + $(this).find('seq').text() + '</td>';
					html += '<td>' + $(this).find('name').text() + '</td>';
					html += '<td>' + $(this).find('email').text() + '</td>';
					html += '<td>' + $(this).find('address').text() + '</td>';
					html += '  <td>';
					html += '<button>수정</button>';
					html += '<button>삭제</button>';
					html += '  </td>';
					html += '</tr>';
					
					console.log($(this).find('name').text());
				})
				$('#users tbody').append(html);
			},
			
			error: function(err) {
				alert('에러' + err.status);
			}
		});
	};
</script>

-----------------------------------------------------------------------------------------------

<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>Address</th>
			<th>비고</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
</div>

<div id="write-form" title="Insert new user">
	<p class="validateTips">All form fields are required.</p>
 	<form>
		<fieldset>
			<label for="w_name">Name</label>
			<input type="text" id="w_name" value="" class="text ui-widget-content ui-corner-all" />
			<label for="w_password">Password</label>
			<input type="password" id="w_password" value="" class="text ui-widget-content ui-corner-all" />
			<label for="w_email">Email</label>
			<input type="text" id="w_email" value="" class="text ui-widget-content ui-corner-all" />
			<label for="w_address">Address</label>
			<input type="text" id="w_address" value="" class="text ui-widget-content ui-corner-all" />
			<input type="submit" tabindex="-1" style="position:absolute; top:-1000px" />
		</fieldset>
	</form>
</div>

</body>

쓰기 다이얼로그에서 추가할 거 작성

추가 성공 후 테이블 리스트에 추가됨

추가시 데이터 찌꺼기 청소되어있는 모습

6. 수정 / 삭제 작업

마찬가지로 dao에 연동해주고 각각 xml.jsp 만든다.

리스트 추가되는 것 안에 버튼도 같이 담겨 있으므로, 각각 onclick을 줘서 버튼을 활성화 시켜주고, 각각 함수를 만들어줘야 한다.

html += '<buttontoken operator">+ $(this).find('seq').text() + ')">수정</button>';
html += '<buttontoken operator">+ $(this).find('seq').text() + ')">삭제</button>';

리스트 생성시에 각각 onclick 부여하고 그것에 대한 각각의 함수를 만든다


//각각 함수 생성 후 seq를 안에 담은 다이얼로그 생성
const deleteBtn = function(seq) {
        $('#d_seq').val(seq);    <-- 다이얼로그 seq안에 선택한 seq가 담김
		$('#delete-form').dialog('open');
	}
    
const modifyBtn = function(seq) {
		$('#m_seq').val(seq);
		$( '#modify-form' ).dialog( 'open' );
	}

그 후 다이얼로그 각 요소에 클릭을 하면 해당 행의 열 정보를 각각 가져오게끔 정보를 넣는다.

modifyBtn 함수

	const modifyBtn = function(seq) {
		
		$('#m_seq').val(seq);
        
		$('#m_name').val($('tbody > tr > td:contains(' + seq + ')').parent().children().eq(1).text());
        <-- tbody안의 tr안의 td를 contains하여 seq검색하고, 
        eq(1) 즉 인덱스 두번째 요소를 가져와서 m_name val에 넣어줌
        
		$('#m_email').val($('tbody > tr > td:contains(' + seq + ')').parent().children().eq(2).text());
        
		$('#m_address').val($('tbody > tr > td:contains(' + seq + ')').parent().children().eq(3).text());
        
       	$( '#modify-form' ).dialog( 'open' );
				
	}

deleteBtn 함수

const deleteBtn = function(seq) {		
		$('#d_seq').val(seq);
		
		$('#delete-form').dialog('open');
		
	}

다이얼로그 수정 / 삭제시에 해당 작업을 수행하는 Server를 만들면 끝!

$('#delete-form').dialog({
			autoOpen: false,
			modal: true,
			width: 350,
			height: 400,
			resizable: false,
			buttons: {
				'취소': function() {
					$( this ).dialog( 'close' );
				},
				'삭제': function() {    <-- deleteServer로 해당 정보 보낸다.
					deleteServer(
					$('#d_seq').val(),
					$('#d_password').val()			
							)
					
				}
			}
		});
		
		//
		$('#modify-form').dialog({
			autoOpen: false,
			modal: true,
			width: 350,
			height: 400,
			resizable: false,
			buttons: {
				'취소': function() {
					$( this ).dialog( 'close' );
				},
				'수정': function() {  <-- modifyServer로 해당 정보 보낸다.
					modifyServer(
					$('#m_seq').val(),
					$('#m_name').val(),
					$('#m_password').val(),					
					$('#m_email').val(),
					$('#m_address').val()
							)
					
				}
			}
		});

deleteServer / modifyServer : ajax 연결후 작업(구성은 writeServer와 유사)

const deleteServer = function(seq, password) {
		$.ajax({
			url:'./data/user_delete.jsp',
			type:'get',
			data: {
				seq : seq,
				password: password
			},
			dataType:'xml',
			success: function(xml) {

				//정상일 때
				if($(xml).find('flag').text() == '0') {
					alert('삭제 성공');
					
					//갱신 데이터를 가져오기 위해 리스트 서버 다시 호출
					listServer();
					
					$( '#d_password' ).val('');
					
					$('#delete-form').dialog('close');
				}
				else {
					alert('에러');
				}
			},
			
			error: function(err) {
				alert('에러' + err.status);
			}
		});
	}
	
    
	const modifyServer = function(seq, name, password, email, address) {
		$.ajax({
			url:'./data/user_modify.jsp',
			type:'get',
			data: {
				seq : seq,
				name: name,
				password: password,
				email: email,
				address: address
			},
			dataType:'xml',
			success: function(xml) {

				//정상일 때
				if($(xml).find('flag').text() == '0') {
					alert('수정 성공');
					
					//갱신 데이터를 가져오기 위해 리스트 서버 다시 호출
					listServer();
					
					//데이터를 추가하고 나면 데이터가 그대로 남아있어서(객체가 새로 만들어 지는 게 아닌 숨긴 것을 보여주는 식이라) 추가하고 나서
					//안에 있는 데이터를 청소해주기 위해 사용
					$( '#m_name' ).val('');
					$( '#m_password' ).val('');	
					$( '#m_email' ).val('');
					$( '#m_address' ).val('');
					
					$('#modify-form').dialog('close');
				}
				else {
					alert('에러');
				}
			},
			
			error: function(err) {
				alert('에러' + err.status);
			}
		});
	}

이준영

끄적끄적

이전 포스트

23.05.17

다음 포스트

23.05.18

autocomplete

원격으로 쓰기

json.jsp

autocomplete02.jsp

accordion

버튼 누를 시 accordion 추가하기

버튼 누를 시 accrodion 값 선택

응용 : spinner 구구단 개량하여 accordion형식으로 구구단 만들기

특정 영역에 accordion 주기 (사이즈 조정 가능)

datepicker

기본형식

클릭시 나오는 게 아닌 처음부터 박혀나오게 하기

datePicker에 애니메이션 주기

추가 옵션들

달력 한글로 변경하기

달력 일 클릭시 클릭한 요일 값 콘솔에 출력

Dialog : 서브창

기본 mpa 형식

다이얼로그 형식

다이얼로그 확인창 만들기

애니메이션 효과 주기

다이얼로그 입력창 누르고 확인시 데이터 추가

유저 입력창 만들어보기

1. 테이블 만들기

2. protocol 만들기

3. to / dao 만들기

4. user_list.jsp(xml) 만들고 member01.jsp에서 가져온 디비 출력해보기

user.list.jsp(xml)

member01.jsp

5. 회원추가 하기 (write)

user_write.jsp

member02.jsp

6. 수정 / 삭제 작업

modifyBtn 함수

deleteBtn 함수

23.05.17

23.05.19

0개의 댓글

23.05.18

autocomplete

원격으로 쓰기

json.jsp

autocomplete02.jsp

accordion

버튼 누를 시 accordion 추가하기

버튼 누를 시 accrodion 값 선택

응용 : spinner 구구단 개량하여 accordion형식으로 구구단 만들기

특정 영역에 accordion 주기 (사이즈 조정 가능)

datepicker

기본형식

클릭시 나오는 게 아닌 처음부터 박혀나오게 하기

datePicker에 애니메이션 주기

추가 옵션들

달력 한글로 변경하기

달력 일 클릭시 클릭한 요일 값 콘솔에 출력

Dialog : 서브창

기본 mpa 형식

다이얼로그 형식

클릭시 다이얼로그 보이기 ( + modal 효과 주기)

다이얼로그 확인창 만들기

애니메이션 효과 주기

다이얼로그 입력창 누르고 확인시 데이터 추가

유저 입력창 만들어보기

1. 테이블 만들기

2. protocol 만들기

3. to / dao 만들기

4. user_list.jsp(xml) 만들고 member01.jsp에서 가져온 디비 출력해보기

user.list.jsp(xml)

member01.jsp

5. 회원추가 하기 (write)

user_write.jsp

member02.jsp

6. 수정 / 삭제 작업

modifyBtn 함수

deleteBtn 함수

23.05.17

23.05.19

0개의 댓글