[ jsp / html ] 정보 수정 페이지에서 성공/실패 페이지로

환경 : DBeaver, Spring Tool Suite4

 

 

(참고) 해당 실습에 사용된 데이터 베이스 코드 :  https://ggingggang05.tistory.com/109

(참고) 해당 실습에 대한 Dto / Dao / Mapper 클래스 코드 및 기타 추가 설정 관련 : https://ggingggang05.tistory.com/110

---

[ 수정 페이지의 기본구성 ]  

 

• 수정 받을 것에 대한 정보가 표시된다. 
      (예) 제품 명 : [ 입력 받을 칸 ]
• 수정 받을 대상을 알기 위해 기본키(PK) 등 최소 한 개의 데이터는 사전에 전달받아 페이지가 알고 있어야 한다.
• 무언가를 화면으로 전달하고 싶다면 매개변수에 Model 객체를 선언 (Model이 매개체 역할을 하게 된다!!!)
   

---

[ 코드 ]

  - ProductContoller.java

@Controller
@RequestMapping("/product")
public class ProductController {

	@Autowired
	private ProductDao dao;
	
    @GetMapping("/edit")
	public String edit(@RequestParam int productId, Model model) {
		ProductDto dto = dao.selectOne(productId);
		//model.addAllAttribute("이름", 데이터);
		model.addAttribute("dto", dto);
		return "/WEB-INF/views/product/edit.jsp";
	}
	
	@PostMapping("/edit")
	public String edit(@ModelAttribute ProductDto dto) {
		if(dao.update(dto))
			return "redirect:editSuccess";
		else
			return "redirect:editFail";
	}
	
	@RequestMapping("/editSuccess")
	public String editSuccess() {
		return "/WEB-INF/views/product/editSuccess.jsp";
	}
	
	@RequestMapping("/editFail")
	public String editFail() {
		return "/WEB-INF/views/product/editFail.jsp";
	}
}

 

  - edit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%-- ${dto}  --%>
<%-- ${dto.getProductName()}, ${dto.productName} --%>

<h1>제품 정보 변경</h1>

<form action="edit" method="post">
	<input type="hidden" name="productId" required value="${dto.productId}">
	제품명 <input type="text" name="productName" required value="${dto.productName}"> <br><br>	
	제품종류 <input type="text" name="productCategory" required value="${dto.productCategory}"> <br><br>
	출시일 <input type="date" name="productReleaseDate" required value="${dto.productReleaseDate}"> <br><br>
	가격 <input type="number" name="productPrice" required value="${dto.productPrice}"> <br><br>
	<button>수정</button>
</form>

 

   - editFail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<h1>제품 정보를 찾을 수 없습니다.</h1>

 

   - editSuccess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<h1>제품 수정 성공</h1>

 

---

 

 - ProductController.java

 - Get 방식으로 사용자가 접속한 경우

@GetMapping("/edit")
public String edit(@RequestParam int productId, Model model) {
	ProductDto dto = dao.selectOne(productId);
	//model.addAllAttribute("이름", 데이터);
	model.addAttribute("dto", dto);
	return "/WEB-INF/views/product/edit.jsp";
}

    (+) ① Model 객체를 활용하여 ProductDto에 있는 데이터를 불러올 수 있다. 

           └ Model model : 파라미터에 Model 타입의 객체 선언

    (+) ② dao의 selectOne()메소드를 불러와 데이터베이스의 productId에 대한 값을 dto 객체에 넣는다.

    (+) ③ productId에 대한 정보가 담긴 dto객체를 "dto"라는 이름으로 model 객체에게 넘겨주고, ④ model 객체는 이 데이터를 addAttribute() 메소드를 통해 리턴 주소에 전달해준다. 

           └ addAttribute() 메소드로 전달

 

 - Post 방식으로 사용자가 접속한 경우

    == 사용자가 수정할 데이터를 전부 입력한 경우, 데이터가 있는 경우

@PostMapping("/edit")
public String edit(@ModelAttribute ProductDto dto) {
	if(dao.update(dto))
		return "redirect:editSuccess";
	else
		return "redirect:editFail";
}

    (+) dto 객체에 데이터가 들어있고, 이를 dao의 update() 메소드를 통해 데이터 정보 수정이 가능하다면, 

         → editSuccess 페이지로 이동.

             (현재 간단하게 구현 하였음. 단순히  "정보 수정 성공" 텍스트를 보여주는 페이지)

    (+) 데이터 수정이 불가능한 모든 경우라면,

         → editFail 페이지로 이동. 

             (현재 간단하게 구현 하였음. 단순히  "제품 정보를 찾을 수 없습니다" 텍스트를 보여주는 페이지)

 

     + 이렇게 매핑 방식을 분류하는 경우는 사용자가 한 번에 페이지를 들어오게 되는 경우를 방지하기 위해서다. 

 

 

  - edit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<h1>제품 정보 변경</h1>

<form action="edit" method="post">
	<input type="hidden" name="productId" required value="${dto.productId}">
	제품명 <input type="text" name="productName" required value="${dto.productName}"> <br><br>	
	제품종류 <input type="text" name="productCategory" required value="${dto.productCategory}"> <br><br>
	출시일 <input type="date" name="productReleaseDate" required value="${dto.productReleaseDate}"> <br><br>
	가격 <input type="number" name="productPrice" required value="${dto.productPrice}"> <br><br>
	<button>수정</button>
</form>

     (+) name 속성을 사용하여 데이터베이스의 해당 컬럼에 접근할 수 있는 변수명을 알려준다.

     (+) value 속성을 사용하여 dto 객체에 있는 해당 변수의 값을 지정해준다.

     (+) required 속성을 사용하여 필수 입력 받도록 설정한다. 

     (+) <br> 태그는 한 줄 띄는 태그이다.

     (+) ${variableName(변수이름)} : 변수에 있는 값을 가져와 적용해주는 역할 

           위 코드에선 ${dto.getProductName()}, ${dto.productName} 와 같이 두 가지 방법으로 데이터 값을 불러올 수 있다

                                    └  getter 메서드 불러오기     └ 변수명으로 불러오기

      (+) <input> 태그의 type속성 값을 hidden으로 주면 페이지에서 보이지 않게 된다.

           이를 활용하여 수정할 데이터의 pk 값을 조용히(사용자에게 보이지 않도록) 데이터베이스에게 값을 전달할 수 있다.

 

 

 

 

 

 

 

개인 공부 기록용입니다:)