# 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>

저작자표시 (새창열림)