JSP를 이용한 form 태그로 글 입력 및 수 연산을 처리하기

JAVA/웹 프로그래밍 - JSP

JSP를 이용한 form 태그로 글 입력 및 수 연산을 처리하기

DesignatedRoom 2020. 11. 4. 19:34

form태그로 글의 제목과 내용을 입력받아 처리해보자.

memo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<form action="memo_proc.jsp">
		제목 : <input type="text" name="title"><br>
		내용 : <input type="text" name="content"><br>
	<input type="submit" value="전송">
	</form>

</body>
</html>

memo_proc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	제목 : <%=request.getParameter("title") %>
	내용 : <%=request.getParameter("content") %>
	
</body>
</html>

memo.jsp를 실행해보자. 아래와 같이 memo_proc.jsp에서 처리가 된다.

두 수 입력 공간과 결과 버튼을 클릭해서 결과를 출력하는 내용 만들기

add.jsp에서는 두 수의 입력을 처리하고 두 수의 합에 대한 처리는 add_proc.jsp에서 한다.

add.jsp 내용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="add_proc.jsp">
		<input type="text" name="num1"> + <input type="text" name="num2"> = 
		<input type="submit" value="결과">
	</form>
</body>
</html>

add_proc.jsp 내용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="add_proc.jsp">
</form>
<!-- 주석처리
<%=request.getParameter("num1") %>+<%=request.getParameter("num2") %>=
<%=Integer.parseInt(request.getParameter("num1"))+Integer.parseInt(request.getParameter("num2")) %>
 -->
<% 
 int num1 = Integer.parseInt(request.getParameter("num1"));
 int num2 = Integer.parseInt(request.getParameter("num2"));
 int sum = num1 + num2;
%>

<%=num1%> + <%=num2%> = <%=sum%>
 
</body>
</html>

add.jsp를 실행하고 수를 입력하면 add_proc.jsp에서 다음과 같이 처리 된다.

위의 내용에서 라디오 버튼을 활용해서 두 수를 입력받아 사칙연산을 해보자.

cal.jsp에서는 두 수의 입력과 연산자를 입력받고 cal_proc.jsp에서 이에 대한 처리를 하고 결과를 보여준다.

cal.jsp 전체 내용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<form action="cal_proc.jsp" method="post">
	x : <input type="text" name="x">y : <input type="text" name="y"><br>
	<input name="operator" type="radio" value="1">더하기<br>
	<input name="operator" type="radio" value="2">빼기<br>
	<input name="operator" type="radio" value="3">곱하기<br>
	<input name="operator" type="radio" value="4">나누기<br>
	<input type="submit" value="계산하기">
	</form>
	
</body>
</html>

cal_proc.jsp 전체 내용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
	int x = Integer.parseInt(request.getParameter("x"));
	int y = Integer.parseInt(request.getParameter("y"));
	int op = Integer.parseInt(request.getParameter("operator"));
	float result = 0;
%>
<!-- operator를 받고
switch()문으로 결과를 계산하고 결과를 출력하세요.
 -->
<%
	switch(op)
	{
	case 1:
	{
		result = (float)(x + y);
		break;
	}
	case 2:
	{
		result = (float)(x - y);
		break;
	}
	case 3:
	{
		result = (float)(x * y);
		break;
	}
	case 4:
	{
		result = (float)x / (float)y;
		break;
	}
	default:{break;}
	}
%>

결과 출력 : <%=result%>

</body>
</html>

아래에서 두 수에 대한 나눗셈에 대한 결과이다.