[스프링프로젝트연습 11] 스프링프로젝트 구현 - ajax사용/CRUD - INSERT

- 해당 문서에서는 ajax를 활용한 CRUD 테스트를 통해 사용법을 알아보고자 한다.

[데이터베이스 및 테이블 생성]

1. 테스트 CRUD를 위한 데티터베이스 및 테이블을 생성한다.

2. DBeaver 툴을 이용하여 데이터베이스 접속 및 신규 데이터베이스 인스턴스를 생성

- 마우스 우클릭 > Create New Database

 

 

- Database name을 입력 후 확인 버튼 클릭

 

 

- 생성된 데이터베이스의 Tables 마우스 우클릭 > Create New Table 을 하거나 

- 직접 create 구문을 이용하여 테이블을 생성한다.

 

-  테스트를 위한 테이블로 사용자 정보를 저장하고 관리하는 테이블을 생성한다.

테이블명을 입력하고

 - 테이블명 입력 시 대문자 사용을 권장

 

 

- 우측 하단에 컬럼 추가 버튼을 통해 컬럼 1개씩 추가하면 된다.

 

 

- 해당 버튼을 클릭하면 아래와 같이 창을 통해 컬럼을 추가할 수 있다.

 

 

- 컬럼 추가가 완료된 경우 Save 버튼 클릭을 하여 아래와 같이 창이 뜨는데 Persist를 클릭하여 완료한다.

 

 

- 다른 방법으로는 create 구문을 이용하여 직접 테이블 및 컬럼을 추가하는 방법이다.

 

CREATE TABLE TEL_USER_INFO (
	USER_ID varchar(20) NOT NULL PRIMARY KEY,
	USER_PWD varchar(100) NOT NULL,
	USER_NAME varchar(100),
	USER_AUTH char(1),
	USER_TEL varchar(20),
	USER_EMAIL varchar(50),
	INPUT_DATETIME datetime
);

 

< 컬럼 정보 >

•  USER_ID : 사용자 아이디
•  USER_PWD :  사용자 비밀번호
•  USER_NAME : 사용자명
•  USER_AUTH: 사용자 권한 (일반사용자 : 1, 관리자 : 2)
•  USER_TEL : 사용자 전화번호
•  USER_EMAIL: 사용자 이메일 주소

 

- 데이터베이스를 신규로 생성하였으니 접속 정보에도 아래와 같이 데이터베이스명을 변경한다.

 

 

테이블 생성 및 설정이 완료되어 사전 준비가 끝난 이후

해당 테이블에 INSERT / SELECT / UPDATE/ DELETE (CRUD)테스트를 순서대로 진행한다.

1. INSERT

- 생성한 테이블 컬럼 정보에 저장될 정보를 화면에서 입력 받도록 화면을 구성한다.

- JSP 페이지 home.jsp 페이지를 수정하여 정보를 입력 받고 버튼을 클릭한 경우 입력 받은 정보가 테이블에 저장되도록 처리한다.

- 테스트이므로 입력에 대한 validation check 및 예외처리는 생략하고 추후 공통화 작업을 진행할 때 다시 보는 것으로 한다.

 

ㄱ. 화면 뷰 수정 (JSP)

- home.jsp 파일에 사용자 아이디부터 이메일 정보까지 입력 받을 수 있도록 화면을 구성한다.

- "저장" 버튼을 아래에 배치하여 입력한 정보를 저장하도록 (컨트롤러를 호출하도록) 한다.

- 버튼에 대한 이벤트 처리 스크립트를 작성한다.

- Body 태그 안에 아래 내용을 추가

- 사용자 정보를 input 태그를 이용하여 입력 받고 저장을 위한 버튼을 배치한다.

 

	<!-- CRUD -->
	
	<h2> CRUD TEST </h2>
	<hr/>
	
	<p>1.DATA INSERT</p>
		<div style="width: 50%; border: 1px solid gray; padding:15px; display: grid">
		<label>ID</label>
		<input type="text" id="txtUserId">
		<br/>
		<label>Password</label>
		<input type="password" id="txtUserPwd">
		<br/>
		<label>Name</label>
		<input type="text" id="txtUserName">
		<br/>
		<label>Tel</label>
		<input type="text" id="txtUserTel">
		<br/>
		<label>Email</label>
		<input type="text" id="txtUserEmail">
		<br/>
		<button id="btnInsert">Insert</button>
	</div>

 

ㄴ. 버튼 이벤트 처리 (javaScript/ jQuery/ Ajax)

- 위에서 작성한 button 을 클릭하는 경우 ID~ Email까지의 정보를 컨트롤러로 전달하여 데이터를 저장할 수 있도록 ajax 호출 부분을 작성한다.

 

//1.DATA INSERT
	$("#btnInsert").on("click", function(){
		var obj = {
				userId : $("#txtUserId").val(),
				userPwd : $("#txtUserPwd").val(),
				userName : $("#txtUserName").val(),
				userTel : $("#txtUserTel").val(),
				userEmail : $("#txtUserEmail").val(),
				userAuth : "1"
				
		}
		console.log(obj);
		
		$.ajax({
			type: "POST",
			url : "/main/addList.do",
			contentType: "application/json;charset=UTF-8",
			data: JSON.stringify(obj), //JSON형태로 말아서 전달함!!!
			dataType: "json",
			success: function(data) {
				console.log("save success!!");
				console.log(data);
			},
			error: function(){
				console.log("save통신실패!!");
			}
		});
	});

 

ㄷ. 컨트롤러 메서드 작성 (JAVA)

- Ajax 를 통해 호출될 컨트롤러 메서드 작성을 위해 MainController.java 파일을 수정한다.

- @RequestBody : POST 형태의 파라미터를 전달 받기 위함

   Map 형태의 파라미터 정보를 전달받아 쿼리 호출 시 전달하여 준다.

 

//DATA INSERT
	@RequestMapping("/main/addList.do")
	@ResponseBody
	public Map<String, Object> addList(@RequestBody Map<String, Object> params){
		System.out.println("1. DATA INSERT");
		
		// SERVICE 트랜잭션 쪽은 추후에 따로 넣을 예정! 지금은 일단 바로 Mapper로 호출함.
		mainMapper.addList(params);
		
		Map<String, Object> result = new HashMap<String, Object>();
		result.put("result", true);
		return result;
	}

 

ㄹ. 매퍼 인터페이스 및 쿼리 XML 작성 (JAVA/ XML)

- insert 쿼리문 작성을 위한 쿼리 XML 파일 및 매퍼 인터페이스를 작성한다.

- MainMapper.java 파일 내에 아래 내용을 추가

 

// 1.DATA INSERT
	public void addList(Map<String, Object> map);

 

- MainMapper.xml 파일 내 insert 쿼리 구문을 작성한다.

 

	<!--  1. DATA INSERT -->
	<insert id="addList" parameterType="hashmap">
		INSERT INTO TEL_USER_INFO (
			USER_ID,
			USER_PWD,
			USER_NAME,
			USER_AUTH,
			USER_TEL,
			USER_EMAIL,
			INPUT_DATETIME
		) 
		VALUES (
			#{userId},
			#{userPwd},
			#{userName},
			#{userAuth},
			#{userTel},
			#{userEmail},
			NOW()
		)
	</insert>

 

<참고>

- 문자 형태의 파라미터를 전달받아 매핑할 경우에는 #{} 태그를 사용

- 숫자 형태의 파라미터를 전달받아 매핑할 경우에는 ${} 태그를 사용

 

- 프론트단에서 입력한 스크립트 중 파라미터 이름과 XML 쿼리 내 매핑 파라미터 이름을 아래와 같이 일치시켜주어야함.

 

 

[INSERT 기능 테스트]

 

- 화면에 정보를 입력하고 Insert 버튼을 클릭한다.

- 데이터베이스 테이블에 입력 정보가 정상 저장되었는지 확인한다.