반응형
# MVC01_2 Controller(Servlet)의 역할
## Servlet (Controller 역할을 한다.) 기본개념 습득을 위해 요청/응답 연습 예제 : su.html 생성
- su.html에 아래와 같이 입력.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습</title>
</head>
<body>
<table>
<tr>
<td>수1</td>
<td><input type="text" name="su1" /></td>
</tr>
<tr>
<td>수2</td>
<td><input type="text" name="su2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="전송" />
<input type="button" value="취소" />
</td>
</tr>
</table>
</body>
</html>### 파라미터
- 클라이언트가 웹에서 접근하여 su1, su2에 각각 값을 입력하여 전송 버튼 클릭 하게 되면 su1에 입력한 값은 su1, su2에 입력한 값은 su2 라는 파라미터에 담기게 된다. (현재는 버튼 동작하지 않음)
### form 태그
- 일반적으로 table을 하나의 form으로 묶어준다.
- 취소 버튼의 type을 button 에서 reset으로 변경. (reset의 경우 form 으로 되어있는 곳에서만 동작한다. -> form 안에 있는 파라미터 값을 초기화 해준다.)
- 전송 버튼의 type을 button 에서 submit으로 변경. (submit의 경우 form 으로 되어있는 곳에서만 동작한다. -> form 안에 있는 파라미터가 전송된다. 이를 위해서는 form 태그의 action에 요청을 받을 대상을 지정해 줘야한다.)
### 전송 버튼 클릭에 따른 요청 처리를 위한 form 태그 매핑
- kr.bit.controller > New 클릭 후 CalcController 이름의 Servlet 생성
- 그리고 /calc.do 로 매핑 설정
- 그리고 Next 후 Service만 체크하여 Finish.
package kr.bit.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/calc.do")
public class CalcController extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
- 생성된 CalcController 를 아래와 같이 입력.
package kr.bit.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/calc.do")
public class CalcController extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 1. 클라이언트에서 넘어오는 폼 파라미터 받기(파라미터 수집) -> 파라미터 : su1, su2
int su1 = Integer.parseInt(request.getParameter("su1"));
int su2 = Integer.parseInt(request.getParameter("su2"));
// 2. 비즈니스 로직 -> su1 ~ su2 = ?
int sum = 0;
for ( int i = su1; i <= su2; i++ ) {
sum += i;
}
// 3. 응답
PrintWriter out = response.getWriter();
out.println("total = " + sum);
}
}
### su1, su2 입력에 따른 응답 확인
아래와 같이 su1, su2 입력 후 결과 확인
### 유용한 탬플릿 사이트
- 부트스트랩 탬플릿 CSS 등 제공.
- https://www.w3schools.com/
- 위 사이트에서 부트스트랩3를 이용하여 위에서 만든 su.html을 작업하면 아주 간편하게 아래처럼 만들수 있다.
W3Schools Online Web Tutorials
HTML Example:
This is a heading
This is a paragraph.
Try it Yourself CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: cente
www.w3schools.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
<tr>
<td>수1</td>
<td><input type="text" name="su1" /></td>
</tr>
<tr>
<td>수2</td>
<td><input type="text" name="su2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="전송" class="btn btn-primary"/>
<input type="button" value="취소" class="btn btn-warning"/>
</td>
</tr>
</table>
</body>
</html>
반응형
'인프런 강의 학습 > MVC 프레임워크_나프1탄' 카테고리의 다른 글
| 인프런 MVC 프레임워크는 내손에 17일차 : MVC01_4 GET과 POST 요청 이해하기 (0) | 2021.06.05 |
|---|---|
| 인프런 MVC 프레임워크는 내손에 16일차 : MVC01_3 요청과 응답 이해하기 (0) | 2021.06.05 |
| 인프런 MVC 프레임워크는 내손에 14일차 : MVC01_1 Servlet과 Model 만을 이용한 회원관리 만들기 (0) | 2021.06.04 |
| 인프런 MVC 프레임워크는 내손에 13일차 : Project Export, Import 하기 (0) | 2021.06.03 |
| 인프런 MVC 프레임워크는 내손에 12일차 : Dynamic Web Project 만들기 (0) | 2021.06.03 |
