[50일] jsp (14) - 계산기

웹개발 교육/jsp

[50일] jsp (14) - 계산기

ewok 2022. 10. 7. 11:15

Frontend단과 backend단을 연결해볼 것이다. backend단은 Java Resources에서 관리하겠다.

이제부터 계산기를 한번 만들어 볼 것이다. JSP에서 메소드를 만들어서 하는 방법과 java에서 클래스를 만들어하는 방법(Frontend와 Backend 연결) 두 가지로 해보자

우선 JSP에서 메소드를 통해 만들어보자. 이 방법은 Frontend와 Backend단을 연결하는 것은 아니다.

Frontend단에 testbean이라는 폴더를 만들고 그 안에 computeForm.jsp를 만들자

computeForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>computeForm.jsp</title>
</head>
<body>
	<h3>* 계산기 *</h3>
	<!-- 1) JSP 메소드 -->
	<form action="computeok1.jsp">
	  <table border="1">
	  <tr>
	    <th>숫자1</th>
	    <td><input type="number" name="num1" size="5"></td>
	  </tr>
	  <tr>
	    <th>숫자2</th>
	    <td><input type="number" name="num2" size="5"></td>
	  </tr>
	  <tr>
	    <td colspan="2">
	       <input type="submit" value="계산">
	    </td>
	  </tr>  
	  </table>	
	</form>
</body>
</html>

form이 전송되면 computeok1.jps로 넘어가게 해 놨으므로 이제 computeok1.jsp를 만들자

computeok1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>computeok1.jsp</title>
</head>
<body>
	<h3>* 계산 결과 *</h3>
	<h4>1)JSP 메소드 호출</h4>
<%
	int num1 = Integer.parseInt(request.getParameter("num1").trim());
	int num2 = Integer.parseInt(request.getParameter("num2").trim());
	
	out.print(num1 + "+" + num2 + "=" + add(num1, num2));
	out.print("<hr>");
	out.print(num1 + "-" + num2 + "=" + sub(num1, num2));
	out.print("<hr>");
	out.print(num1 + "*" + num2 + "=" + mul(num1, num2));
	out.print("<hr>");
	out.print(num1 + "/" + num2 + "=" + div(num1, num2));
	out.print("<hr>");
	out.print(num1 + "%" + num2 + "=" + mod(num1, num2));
	out.print("<hr>");
	
%>

<%!
	//JSP 메소드 작성 영역
	public int add(int a, int b) {return a+b;}
	public int sub(int a, int b) {return a-b;}
	public int mul(int a, int b) {return a*b;}
	public int div(int a, int b) {return a/b;}
	public int mod(int a, int b) {return a%b;}
%>

</body>
</html>

이번에는 new 연산자를 통해 만들어보자

computeForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>computeForm.jsp</title>
</head>
<body>
	<h3>* 계산기 *</h3>
	<!-- 1) JSP 메소드
	<form action="computeok1.jsp">
	-->
	
	<!-- 2) new 연산자 -->
	<form action="computeok2.jsp">
	  <table border="1">
	  <tr>
	    <th>숫자1</th>
	    <td><input type="number" name="num1" size="5"></td>
	  </tr>
	  <tr>
	    <th>숫자2</th>
	    <td><input type="number" name="num2" size="5"></td>
	  </tr>
	  <tr>
	    <td colspan="2">
	       <input type="submit" value="계산">
	    </td>
	  </tr>  
	  </table>	
	</form>
</body>
</html>

computeok2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.testbean.*"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>computeok2.jsp</title>
</head>
<body>
	<h3>* 계산 결과 *</h3>
	<h4>2) new연산자를 이용해서 객체 생성 후 메소드 호출</h4>
<%
	int num1 = Integer.parseInt(request.getParameter("num1").trim());
	int num2 = Integer.parseInt(request.getParameter("num2").trim());
	
	//객체 생성 new Compute()
	//-> RAM의 heap 영역에 메모리가 할당되는 것
	Compute comp = new Compute();
	
	out.print(num1 + "+" + num2 + "=" + comp.add(num1, num2));
	out.print("<hr>");
	out.print(num1 + "-" + num2 + "=" + comp.sub(num1, num2));
	out.print("<hr>");
	out.print(num1 + "*" + num2 + "=" + comp.mul(num1, num2));
	out.print("<hr>");
	out.print(num1 + "/" + num2 + "=" + comp.div(num1, num2));
	out.print("<hr>");
	out.print(num1 + "%" + num2 + "=" + comp.mod(num1, num2));
	out.print("<hr>");
%>

</body>
</html>