1. NewFile3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쇼핑몰 예제</title>
</head>
<body>
<form action="NewFile4.jsp" method="POST">
<input type="radio" name="product" value="사과" checked>사과 1000원 <br>
<input type="radio" name="product" value="바나나">바나나 2000원 <br>
<input type="radio" name="product" value="키위">키위 500원 <br>
<input type="text" name="cnt" value="1">개 <input type="submit" value="결제">
</form>
<hr>
<form action="NewFile5.jsp" method="POST">
<input type="checkbox" name="product" value="사과">사과 1000원 <br>
<input type="checkbox" name="product" value="바나나">바나나 2000원 <br>
<input type="checkbox" name="product" value="키위">키위 500원 <br>
<input type="text" name="cnt" value="1">개 <input type="submit" value="결제">
</form>
</body>
</html>단지 HTML 폼의 형태.
NewFile4.jsp에서는 한 가지만 선택할 수 있는 radio 속성을 넣었고,
NewFile5.jsp에서는 여러 가지를 선택할 수 있는 checkbox 속성을 넣었다.
여기서는 사용자가 입력한 후 결제 요청을 보낸다.
NewFile4.jsp로 데이터 전송 (product, cnt)
NewFile5.jsp로 데이터 전송 (product[], cnt)
<input type="text" name="cnt" value="1">개기본 개수는 1개이다.
<input type="radio" name="product" value="사과" checked>사과 1000원 <br>
<input type="radio" name="product" value="바나나">바나나 2000원 <br>
<input type="radio" name="product" value="키위">키위 500원 <br>동일한 name을 설정하면 같은 범위 내에 들어가 저 중 하나만 선택할 수 있게 된다.
value는 각각 버튼이 갖는 값.
| name="product" | 동일한 name을 가지는 버튼들은 하나만 선택 가능 |
| value="사과" | 사용자가 선택할 경우 서버로 전송되는 값 (사과, 바나나, 키위) |
2. NewFile4.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쇼핑몰 예제 - 결과 01</title>
</head>
<body>
<%
String product=request.getParameter("product");
int cnt=Integer.parseInt(request.getParameter("cnt"));
int price=0;
if(product.equals("사과")){
price=1000;
}
else if(product.equals("바나나")){
price=2000;
}
else if(product.equals("키위")){
price=500;
}
int total = price * cnt;
%>
<%=product%> 를 <%=cnt%> 개 구매하셨습니다. <br>
총 금액 <%=total%> 원
</body>
</html>결과 화면을 보여주는 화면.
String product=request.getParameter("product");
int cnt=Integer.parseInt(request.getParameter("cnt"));
int price=0;사용자가 입력한 상품과 갯수를 받아와서 저장한다. 당연히 웹에서 모든 정보는 문자열로 저장되므로 cnt는 정수로 변환!
가격도 출력해줄 것이므로 price라는 변수도 하나 선언한다.
if(product.equals("사과")){
price=1000;
}
else if(product.equals("바나나")){
price=2000;
}
else if(product.equals("키위")){
price=500;
}
int total = price * cnt;만약 받아온 문자열이 사과이면 사과 출력, 그 외 등등..
마지막으로 해당하는 가격과 갯수를 곱해서 total 변수에 저장해준다.
<%=product%> 를 <%=cnt%> 개 구매하셨습니다. <br>
총 금액 <%=total%> 원이 부분만이 화면에 보이게 된다.
해당 코드로 화면에 결과 출력.
3. NewFile5.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" errorPage="error/error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쇼핑몰 예제 - 결과 02</title>
</head>
<body>
<%
String[] products=request.getParameterValues("product");
int cnt=Integer.parseInt(request.getParameter("cnt"));
int price=0;
int total=0;
for(String product:products){
if(product.equals("사과")){
price=1000;
}
else if(product.equals("바나나")){
price=2000;
}
else if(product.equals("키위")){
price=500;
}
total += price * cnt;
out.println(product+" 를 "+cnt+" 개 구매하셨습니다. <br>");
}
%>
총 금액 <%=total%> 원
</body>
</html>
String[] products=request.getParameterValues("product");
int cnt=Integer.parseInt(request.getParameter("cnt"));
int price=0;
int total=0;여기서는 체크박스로 여러개의 값을 고를 수 있으므로 문자열 배열을 선언해서 입력된 값들을 받아온다.
또, 이번에는 total을 위에 미리 선언했는데 scope 이슈가 있으므로 미리 선언해준다.
for(String product:products){
if(product.equals("사과")){
price=1000;
}
else if(product.equals("바나나")){
price=2000;
}
else if(product.equals("키위")){
price=500;
}
total += price * cnt;
out.println(product+" 를 "+cnt+" 개 구매하셨습니다. <br>");
}반복문으로 배열을 순회하면서 배열에 들어있는 값들을 모두 찾고 그 값에 가격을 설정해준다.
마지막으로 가격과 개수를 곱해서 total에 저장해주고
out 내장객체를 통해서 출력해준다.
총 금액 <%=total%> 원해당 구문으로 화면에 출력된다.
공부하면서 추가로 찾아본 것
1. System.out.println과 out.println() 의 차이점
1. System.out.println() → 서버 콘솔 출력
2. out.println() → 클라이언트(웹 브라우저)로 출력System.out.println은 콘솔에 출력되며 클라이언트(웹 브라우저)에는 보이지 않는다. 그래서 보통 디버깅용으로 사용하며, 서블릿이나 JSP에서 실행되더라도 브라우저 화면이 아닌 콘솔에만 출력된다.
그에 비해 out.println()은 HTML로 웹 페이지에 출력하므로 사용자가 볼 수 있다.
2. out 내장객체
: JSP에서 클라이언트에게 데이터를 출력할 때 사용.
- JSP에서 제공되는 PrintWriter 객체를 사용
- 서버에서 클라이언트로 데이터를 전송하는 역할
- HTML 코드 및 텍스트를 웹 브라우저에 출력할 때 사용
- 자바 코드에 해당하므로 반드시 <% %> 스크립트릿 안에서 사용할 것
- out 객체 사용 시 JSP에서 HTML 페이지를 동적으로 생성해 응답할 수 있음
'IT > Backend' 카테고리의 다른 글
| JSP + Servlet (0) | 2025.03.02 |
|---|---|
| Session + Application으로 회원가입, 로그인 구현하기 (0) | 2025.02.23 |