Jquery를 활용한 예제

https://jqueryui.com/

jQuery UI

 

jqeury를 지원하는 다양한 라이브러리를 볼 수 있는데 ui에 들어가면 다양한 기능들이 있어요!

---

값을 담을 vo 작성

test.vo

//발급기관에 대한 변수 선언 home.jsp에 선언된 명칭과 같아야 함
	private String licenseName;
	private String licenseOrg;
	private String licenseDate;

작동해야하는 controller에 일을 시키자! vo에 담아서 보내야 할 곳에는 vo에 담긴 이름과 같아야 해요! 

	test. controller 
    @RequestMapping("/test.do")
	public String test(@ModelAttribute("testVo") TestVo vo,Map map){
		//TestVo.vo 안에는 int x 값과 int y값이 들어가있음
		//파라미터가 여러개여도 vo에 담아서 코드가 간단해짐

		
		
		System.out.println(vo.getLicenseDate());
		System.out.println(vo.getLicenseName());
		System.out.println(vo.getLicenseOrg());

작성 후 전송버튼을 누르면 콘솔에 찍힘

controller에 작성한 문장 순서대로 나와요!

 

    String에서 Data 타입으로 변경했을 시 아래와 같이 작성해준다.

    private String licenseName;
	private String licenseOrg;
	//어떻게 바꿔야하는지 알려주는 어노테이션이 필요함("날짜/시간문자열을 자바의 날짜/시간 타입으로 변환하는 방식을 지정");
	@DateTimeFormat(pattern = "yyyy-MM-dd" )
	private Date licenseDate;
    
    //숫자문자열을 숫자타입으로 변환하는 방식을 지정하는 경우,
	//@NumberFormat(pattern = "#,##")사용가능

 

자격증을 여러개 받을 때, 하나의 vo객체로 만들어서 분리를 해준다. 

LicenseVO 클래스 생성

이 클래스에 get.set이 필요하니 lombok 어노테이션을 이용하자

파라미터를 받을 떄는 라이센스브이오를 testVO를 아래와 같이  작성해준다.

 

get.name 정보를 빼오고 싶은데 get.name은  License에 담겨있으니까

먼저 License를 먼저 불러오고 그다음에 이름을 빼온다.

 

컨트롤러에서 아래와같이 수정해준다.

System.out.println("test");
		LicenseVO lvo=vo.getLicense();
		System.out.println(lvo.getLicenseDate());
		System.out.println(lvo.getLicenseName());
		System.out.println(lvo.getLicenseOrg());

home.jsp

실행결과

 

작동 원리

여러개 값을 입력받을 수 있게 테이블형태로 바꿈

 

입력받고 싶은 정보갯수 만큼 <tr>을 늘려준다.

정보를 여러개 받으려면 vo에서 list나 배열을 사용해서 여러개 저장할 수 있게 만든다.

test.vo
private List<LicenseVO> license;

controller 수정

 

 

값을 입력후에 실행했을 때, 콘솔에 입력한 값이 뜨지 않아서 아래와 같이 home.jsp를 고쳐준다.

 리스트의 이름에 인덱스를 넣어준다.

입력하는 값을 고정으로 두지 않고 자유롭게 줄였다가 늘렸다가 할 수 있도록 수정해보자! 

먼저 자동완성을 할 수 있도록 해당 프로젝트 우클릭해서 configure을 눌러준다.

Jquery와 browser를 체크해준다.

추가눌렀을 시, 여러개를 입력받을 수 있도록 하며 삭제를 누르면 값을 입력한 한 줄이 사라지도록 jquery를 작성해본다.

#jqery에서 테이블 행 추가/삭제 검색해서 공부하기

그전에 jquery를 사용할 수 있도록 <script> 태그를 이용해 작성한다. 

1. 추가버튼을 클릭하면, 자격증 1개 정보를 입력할 수 있는 <tr>을 <tbody>에 추가

 

	<p>자격증</p>
		<table id="licTable" border="1">
			<thead>
				<tr><th>자격이름</th><th>발급기관</th><th>발급일</th><th></th></tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" name="license[0].licenseName"/></td>
					<td><input type="text" name="license[0].licenseOrg"/></td>
					<td><input type="date" name="license[0].licenseDate"/></td>
					<td><button class="delBtn" type="button">삭제</button></td>
					
				</tr>
			</tbody>
				
			<tfoot>
				<tr>
					<td colspan="4"><button id="addBtn" type="button">추가</button></td>
				</tr>
			</tfoot>	
			
		</table>		
		
		<input type="submit" value="전송" />		
	</form>
	
	<!-- <template>태그는 태그는 화면에 출력되지 않지만, 이후 동적으로 화면에 추가할 엘리먼트를 정의하기 위하여 사용
    	구 버전의 브라우저에서는 지원하지 않으며, 자바스크립트에서 템플릿 내용은 template 엘리먼트의 content 속성을
	    통해서 사용-->
        
	<template id="rowTemp">
		<tr>
			<td><input type="text" name="license[0].licenseName"/></td>
			<td><input type="text" name="license[0].licenseOrg"/></td>
			<td><input type="date" name="license[0].licenseDate"/></td>
			<td><button class="delBtn" type="button">삭제</button></td>
		</tr>
	</template>
	
	<script type="text/javascript">
			//추가버튼을 클릭하면, 자격증 1개 정보를 입력할 수 있는 <tr>을 <tbody>에 추가
			// $('#addBtn').on('click', function() {}); == $('#addBtn').on('click', function)

		var $row =$(document.querySelector('#rowTemp').content);
		$('#addBtn').click(function() {			
	    var row = $row.clone();
	    $('#licTable > tbody').append(row);
	  });
	  	
</script>

 

 

2.삭제버튼을 클릭하면, 클릭한 삭제버튼이 속한 <tr>을 삭제

         $('#licTable').on("click",".delBtn",function() {
	     $(this).closest("tr").remove();	   
		  });

 

 

3.전송버튼을 클릭하면, 입력한 자격증 정보들이 올바른 파라미터명으로 전송

	$('#testForm').on('submit',function(ev){
		 ev.preventDefault();
		 $('#licTable > tbody > tr').each(function(idx,elm){
			 console.log(idx,elm);
		 });
	});

 

 

---

[ ] 대괄호 삭제 
     <tbody>
		<tr>
				<td><input type="text" name="licenseName"/></td>
				<td><input type="text" name="licenseOrg"/></td>
				<td><input type="date" name="licenseDate"/></td>
				<td><button class="delBtn" type="button">삭제</button></td>
					
		</tr>
      </tbody>

                  .
                  .
                  .
[ ] 대괄호 삭제 
    <template id="rowTemp">
		<tr>
			<td><input type="text" name="licenseName"/></td>
			<td><input type="text" name="licenseOrg"/></td>
			<td><input type="date" name="licenseDate"/></td>
			<td><button class="delBtn" type="button">삭제</button></td>
		</tr>
	</template>
    
                  .
                  .
                  .


	$('#testForm').on('submit',function(ev){ //testForm에 submit이번트가 발생하면 실행
//	 ev.preventDefault(); //submit 이벤트에 대한 브라우저 기본동작(폼제출)취소      
		 $('#licTable > tbody > tr').each(function(idx,elm){ //tobdy가 tr마다 한번씩 함수 실행
			 console.log(idx,elm);
			 $(elm).find('input').each(function(i, e) { //tr내부의 각 input 마다 한번씩 함수 실행
				 var n = $(e).prop('name'); //input의 원래 name 속성값 읽기
			 	$(e).prop('name', 'license['+idx+'].' + n); //input의 원래 name 속성값 변경
			 })
			 
		 });
	});
</script>

---

member 새로운 클래스 생성

예제1

http://localhost:8000/myapp/memeber/list.do로 요청을 보내면
memberController 클래스의 list()메서드가 실행되고 브라우저 화면에 "회원목록"이라고 출력되도록 구현

 1.컨트롤러 작성하기

@Controller
public class MemeberController {
	
	@RequestMapping(path = "/member/list.do", method = RequestMethod.GET)
	public String list() {
		return "member/list";
	}
}

2. 보여질 뷰 설정하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원관리</title>
</head>
<body>
 	<h1>회원목록</h1>
 	
</body>
</html>

3. 실행결과

jstl 태그를 잘 지원해주는 관련 설정을 해주려고 한다.

 <!--JSTL 메세지 관련 태그가 스프링의 메시지 소스를 사용하도록 지원해주는JstlView 사용 -->
		<beans:property name="viewClass" value="org.springframework.web.servlet.view.JstlView"></beans:property>

설정 후 실행하면 잘 나오는 것을 확인 할 수 있다.

 

디비에서 셀렉트 한 결과를 jsp에 보여질 수 있게 하도록 하려고 한다.

jdbc드라이버 포함 등등을 추가해야함 

 

사이트가 먹통이여서 지난번 프로젝트 pom.xml에 있는 내용을 복사해서 가져온다. 아래 내용을 myapp/pom.xml에 넣어준다.

	<!-- 데이터베이스 입출력 기능을 위한 라이브러리들 추가-->
	<!-- 스프링의 orm(object(java) Relation(db table) mappping ) 기능관련 모듈  -->
		
		<!-- spring-orm 기능 관련 모듈-->
		<dependency>
		    <groupId>org.springframework</groupId>
		    <artifactId>spring-orm</artifactId>
		    <version>${org.springframework-version}</version>
		</dependency>
		
		<!-- mybatis -->
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis</artifactId>
		    <version>3.4.6</version>
		</dependency>
		
		<!-- mybatis와 spring연동을 위한 라이브러리 -->
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis-spring</artifactId>
		    <version>1.3.3</version>
		</dependency>

		<!-- 오라클 JDBC 라이브러리 -->
		<dependency>
		    <groupId>com.oracle.database.jdbc</groupId>
		    <artifactId>ojdbc8</artifactId>
		    <version>21.5.0.0</version>
		</dependency>

		<!-- 데이터베이스 커넥션 풀 라이브러리 -->
		<dependency>
		    <groupId>org.apache.commons</groupId>
		    <artifactId>commons-dbcp2</artifactId>
		    <version>2.9.0</version>
		</dependency>