[SpringBoot] 1-4. 메뉴 검색, 메뉴 수정 - PUT 방식

1. 메뉴 검색

 

▶ index.jsp

			<!-- 3. PUT
				/menu/9
			 -->
			<div class="menu-test">
                <h4>메뉴 수정하기(PUT)</h4>
                <p>메뉴번호를 사용해 해당메뉴정보를 수정함.</p>
                <form id="menuSearchFrm">
                    <input type="text" name="id" placeholder="메뉴번호" class="form-control" /><br />
                    <input type="submit" class="btn btn-block btn-outline-primary btn-send" value="검색" >
                </form>
                <hr />
                <form id="menuUpdateFrm">
                    <input type="hidden" name="id" />
                    <input type="text" name="restaurant" placeholder="음식점" class="form-control" />
                    <br />
                    <input type="text" name="name" placeholder="메뉴" class="form-control" />
                    <br />
                    <input type="number" name="price" placeholder="가격" step="1000" class="form-control" />
                    <br />
                    <div class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" name="type" id="put-kr" value="kr" checked>
                        <label for="put-kr" class="form-check-label">한식</label>&nbsp;
                        <input type="radio" class="form-check-input" name="type" id="put-ch" value="ch">
                        <label for="put-ch" class="form-check-label">중식</label>&nbsp;
                        <input type="radio" class="form-check-input" name="type" id="put-jp" value="jp">
                        <label for="put-jp" class="form-check-label">일식</label>&nbsp;
                    </div>
                    <br />
                    <div class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" name="taste" id="put-hot" value="hot" checked>
                        <label for="put-hot" class="form-check-label">매운맛</label>&nbsp;
                        <input type="radio" class="form-check-input" name="taste" id="put-mild" value="mild">
                        <label for="put-mild" class="form-check-label">순한맛</label>
                    </div>
                    <br />
                    <input type="submit" class="btn btn-block btn-outline-success btn-send" value="수정" >
                </form>
            </div>
            
            <script>
            	$("#menuSearchFrm").submit(function(e){
            		e.preventDefault();
            		
            		const id = $("[name=id]", e.target).val(); // e.target하위의 요소 선택
            		if(!id) return;
            		
            		// id는 현재 js변수이기 때문에 \ 붙힘
            		// 우리가 위에서 썼던 display는 사용못함. 
            		$.ajax({
            			url : `${contextPath}/menu/\${id}`,
            			success : function(data){
            				
            				const frm = $("#menuUpdateFrm");
            				
            				const {id, restaurant, name, price, type, taste} = data;
            				
            				frm.find("[name=id]").val(id);
            				frm.find("[name=restaurant]").val(restaurant);
            				frm.find("[name=name]").val(name);
            				frm.find("[name=price]").val(price);
            				// raido 태그의 경우는 다르게 해야함
            				frm.find(`[name=type][value=\${type}]`).prop("checked", true); // jp, kr, ch 값이 들어있음
            				frm.find(`[name=taste][value=\${taste}]`).prop("checked", true);
            				
            			},
            			error : function(xhr){
            				const {status} = xhr; // 404 200 400 500 에러코드 값들이 담김
            				if(status == 404){
            					alert("해당메뉴가 존재하지 않습니다.");
            				}
            			}
            		})
            	})

            </script>

 

 

 

▶ MenuController.java

//	메뉴 검색
	@GetMapping("/menu/{id}")
	public ResponseEntity<Menu> selectOneMenu(@PathVariable int id){
		
		Menu menu = menuService.selectOneMenu(id);
		ResponseEntity<Menu> res = null;
		
		if(menu == null) {
			res = ResponseEntity.notFound().build();   // 404에러가 있었음 ← notFound // 404 반환
			
		}else {
			res = ResponseEntity.ok().body(menu);
		}
		return res;
	}

 

 

▶ MenuService.java

//	메뉴 검색
	Menu selectOneMenu(int id);

 

 

▶ MenuServiceImpl.java

//	메뉴 검색
	@Override
	public Menu selectOneMenu(int id) {
		return menuDao.selectOneMenu(id);
	}

 

 

▶ MenuDao.java

//	메뉴 검색
	public Menu selectOneMenu(int id) {
		return session.selectOne("menuMapper.selectOneMenu", id);
	}

 

 

▶ menu-mapper.xml

	<!-- 메뉴 검색 -->
	<select id="selectOneMenu" resultType="menu">
		SELECT *
		FROM MENU
		WHERE ID = #{id}
	</select>

 

 

▶ 결과

 

=> 1 검색하면 해당하는 값이 나타나는 것 확인!

 

 

 

---

2. 메뉴 수정

 

 

▶ index.jsp

 

=> 위에 작성했던 코드 바로 밑에 추가

 

            	// 메뉴 수정 폼
            	$("#menuUpdateFrm").submit( e => {
            		e.preventDefault();
            		
            		const frm = $(e.target);
            		
            		// js로 form 객체 만들어줄것
            		const frmData = new FormData(e.target);
            		const menu = {};
            		
            		// from은 이번엔 value가 먼저옴 index보다
            		frmData.forEach((value, key) => {
            			// key ==> id, price, type, taste 각 인풋태그의 name 속성값이 담겨있음
            			menu[key] = value;
            		})
            		
            		// complete 재정의
            		$.ajax({
            			url : `${contextPath}/menu/\${menu.id}`,
            			method : 'PUT', // UPDATE를 의미
            			data : JSON.stringify(menu),
            			contentType : "application/json; charset=UTF-8",
            			success(data) {
            				const {msg} = data;
            				alert(msg);
            			},
            			error : console.log,
            			complete(){
            				$("#menuUpdateFrm")[0].reset();
            			}
            		})
            	})

 

 

▶ MenuController.java

//	메뉴 수정
	// RequestBody 를 꼭 써야한다!!
	// @RequestBody 요청시 전달한 값중 body에 작성된 "JSON"문자열을 JAVA의 객체로 변환시켜주는 어노테이션
	@PutMapping("/menu/{id}")
	public Map<String, Object> updateMenu(@RequestBody Menu menu){
		
		int result = menuService.updateMenu(menu);
		Map<String, Object> map = new HashMap();
		
		if(result > 0) {
			map.put("msg", "수정 성공했습니다 !");
		}else {
			map.put("msg", "수정 실패했습니다.");
		}
		
		return map;
	}

 

 

 

▶ MenuService.java

//	메뉴 수정
	int updateMenu(Menu menu);

 

 

▶ MenuServiceImpl.java

//	메뉴 수정
	@Override
	public int updateMenu(Menu menu) {
		return menuDao.updateMenu(menu);
	}

 

 

 

▶ MenuDao.java

//	메뉴 수정
	public int updateMenu(Menu menu) {
		return session.update("menuMapper.updateMenu", menu);
	}

 

 

▶ menu-mapper.xml

	<!-- 메뉴 수정 -->
	<update id="updateMenu">
		UPDATE MENU
		   SET RESTAURANT = #{restaurant},
		  NAME = #{name},
		  price = #{price},
		  type = #{type, typeHandler=menuTypeHandler},
		  taste = #{taste}
		WHERE ID = #{id}
	</update>

 

 

 

▶ 결과

 

 

=> 검색후, 진가와를 진가로 수정한 결과, 다음과 같이 수정이 된 것을 확인할 수 있다.