이전 글들이 HTML, JSP 기초/응용이라면
이번 글은 본격적인 MVC 패턴 시작이다.
- 뷰 구현 : calcForm.html, calcResult.jsp
- 모델 구현 : Calculator.java
- 컨트롤러 구현 : CalcController.java
1️⃣ 뷰 구현: calcForm
[webapp] 폴더에 [ch08] 폴더를 만든 후
[ch07]의 calcForm.html을 복붙해주자.
그리고 html 내용을 다음과 같이 수정해주자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산기-컨트롤러</title>
</head>
<body>
<h2>계산기-컨트롤러</h2>
<hr>
<form method="post" action="/calcControl">
<input type="text" name="n1" size="10"> <select name="op">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select> <input type="text" name="n2" size="10">
<input type="submit" value="실행">
</form>
</body>
</html>다음으로 계산 처리 결과를 보여주는 화면 구현을 위해
calcResult.jsp파일을 만든후 아래와 같이 코딩해주자.
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산기-컨트롤러</title>
</head>
<body>
<h2>계산 결과-컨트롤러</h2>
<hr>
결과 : ${result}
</body>
</html>- 별도의 useBean이나 스크립트 요소없이 EL을 사용해 결과값을 출력.
2️⃣ 모델 구현: Calculator
모델 영역은 DAO, DO 등으로 구성할수있으나 여기선 DB를 사용하지 않는다.
따라서 ch07에 만들었던 Calculator 클래스를 복사해 사용할것이다.
[src/main/java]에서 ch08 패키지를 생성한 다음 [ch07]패키지의 Calculator 클래스를 복사해 ch08에 붙여넣어주자.
코드는 변경사항이 없으므로 패스.
3️⃣ 컨트롤러 구현: CalcController
[ch08]패키지에 새로운 서블릿을 추가해주자.
서블릿 생성에 필요한 정보는 다음과 같다.
- Java Package : ch08
- Class name : CalcController
- URL mapping : calcControl
핵심이 되는 doGet() 부분을 변경하는데 기본적인 코드 구조는
이전에 만든 CalcServlet과 동일하다.
다만 계산 결과를 request에 저장하고 calcResult.jsp로 포워딩하는 차이가 있다.
우선 이전에 만들었던 [src/main/java]의 [ch05]에 CalcServlet 클래스를
[ch08]패키지에 복붙을 해줌과 동시에 이름을 CalcController로 바꿔주자.
기존 코드
@WebServlet("/calc")변경 후
@WebServlet("/calcControl")
그리고 스위치 아래부분의 이 내용은 지워주자.
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
out.append("<html><body><h2>계산기 서블릿</h2><hr>")
.append("계산 결과 :"+result+"</body></html>");그리고 아래와 같이 코드를 작성해주자.
request.setAttribute("result", result);
getServletContext().getRequestDispatcher("/ch08/calcResult.jsp")
.forward(request, response);계산 결과를 result라는 이름으로 request scope에 저장하고 결과를 보여주는 calcResult.jsp 페이지로 포워딩됬다.
컨트롤러의 기본기능인 클라이언트 요청처리, 입력값 핸들링, 페이지 이동이 모두 반영되어있다.
이제 톰캣 서버를 실행해보자.
http://localhost:8081/ch08/calcForm.html 에 들어간후 계산기를 사용해보자.
위처럼 결과가 뜨면 성공이다.
[메인으로 돌아가기]
'Java Spring > JSP와 스프링' 카테고리의 다른 글
| 15. SQL : 학생정보 목록 생성 (0) | 2022.07.12 |
|---|---|
| 14. 고급 컨트롤러 서블릿 구현 (0) | 2022.07.11 |
| 12. JSTL과 EL 종합 예제 (0) | 2022.07.11 |
| 11. 액션 종합: 계산기 구현 (0) | 2022.07.09 |
| 10. JSP 프로그래밍: 계산기 구현 (0) | 2022.07.09 |