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>
'웹개발 교육 > jsp' 카테고리의 다른 글
| [50일] jsp (16) - 성적 데이터베이스 관련 비즈니스 로직 구현 (0) | 2022.10.07 |
|---|---|
| [50일] jsp (15) - Java Bean (0) | 2022.10.07 |
| [49일] jsp (13) - 성적 페이지 (0) | 2022.10.06 |
| [48일] jsp (12) - request 내부 객체의 다양한 메소드 (0) | 2022.10.05 |
| [48일] jsp (11) - 다양한 컨트롤 요소 (0) | 2022.10.05 |
