1️⃣ 계산기 화면 구현
이번에 만들 계산기는 2개의 숫자와 연산자를 선택 후 계산 버튼을 누르면 입력값을 JSP로 전달한다.
JSP는 브라우저로부터 전달된 입력값을 가져와 계산후 결과를 포함한 화면을 출력하는 구조이다.
입력 파라미터
- n1, n2 : 숫자 입력으로 HTML <input> 으로 구현
- op : 연산자 선택 드롭다운 리스트로 HTML <select>로 구현되며 연산자 종류는 [ +, -. *, / ] 로 구성됨.
우선 ch05 폴더의 calcForm.html 파일을 복사해 ch06에 붙여 넣자.
그리고 다음과 같이 10번째 줄을 수정해주자.
<form method="post" action="calc.jsp">
2️⃣ 계산기 JSP 구현
계산기 기본 코드는 서블릿과 동일하다.
따라서 CalcServlet.java의 서블릿 계산기 구현부분인 doGet() 메서드의 내용을 스크립트릿 영역에 넣어주면된다.
다만 HTML부분에 결과를 출력해야 하므로 코드는 앞쪽에 배치해야한다.
여기서는 page 지시어 바로 아래에 코딩하도록 하겠다.
우선 계산기 JSP는 ch06폴더에 calc.jsp로 생성해주자.
생성된 코드는 다음과 같다.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>
맨윗 줄을 다음과 같이 바꿔주자.
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>그리고 바로 아래에 다음 코드를 작성한다.
<%
int n1 = Integer.parseInt(request.getParameter("n1"));
int n2 = Integer.parseInt(request.getParameter("n2"));
long result = 0;
switch(request.getParameter("op")) {
case "+": result = n1+n2; break;
case "-": result = n1-n2; break;
case "/": result = n1/n2; break;
case "*": result = n1*n2; break;
}
%>
그리고 <body> 바로 아래에 출력을 위해 다음 코드를 작성한다.
<h2>계산 결과-JSP</h2>
<hr>
결과: <%=result %>
이제 톰캣 서버를 실행한다.
http://localhost:8081/ch06/calcForm.html 에 들어가서 계산기를 이용해보자.
여기까지 오면 성공이다.
최종 코드는 다음과 같다.
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%
int n1 = Integer.parseInt(request.getParameter("n1"));
int n2 = Integer.parseInt(request.getParameter("n2"));
long result = 0;
switch(request.getParameter("op")) {
case "+": result = n1+n2; break;
case "-": result = n1-n2; break;
case "/": result = n1/n2; break;
case "*": result = n1*n2; break;
}
%>
<html>
<head>
<meta charset="UTF-8">
<title>계산기 JSP</title>
</head>
<body>
<h2>계산 결과-JSP</h2>
<hr>
결과: <%=result %>
</body>
</html>
[메인으로 돌아가기]
'Java Spring > JSP와 스프링' 카테고리의 다른 글
| 12. JSTL과 EL 종합 예제 (0) | 2022.07.11 |
|---|---|
| 11. 액션 종합: 계산기 구현 (0) | 2022.07.09 |
| 9. JSP 기초 종합 예제 (0) | 2022.07.09 |
| 8. 계산기 구현 (0) | 2022.07.08 |
| 7. Hello World! (0) | 2022.07.08 |