[JSP] 쇼핑몰 예제

JSP/Practice

[JSP] 쇼핑몰 예제

ITs Min 2024. 1. 7. 23:15

🔍 로그인 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쇼핑몰 예제</title>
</head>
<body>

<h1>로그인 페이지</h1>

<form method="POST" action="test10.jsp">
	ID <input type="text" name="mid" placeholder="ID를 입력하세요." required> <br><br>
	<input type="submit" value="로그인">
</form>

</body>
</html>

form 태그를 보면 메서드는 POST 액션은 test10.jsp로 되어있다.

jsp는 서버 프로그래밍 언어이기 때문에 데이터를 주고 받을 수밖에 없는데
사용자가 데이터를 전송할 때는 form태그를 사용한다.
대부분 form에서 method는 POST를 사용한다.

요청 정보는 request라는 객체에 저장된다. 파라미터를 받아온다. (request.Parameter)

ID만 입력을 받는 로그인 창을 띄운다. required 코드가 작성되어 있기 때문에 반드시 입력해야 한다.

입력을 하고 로그인 버튼을 누른다면 test10.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>

<%
	String mid=request.getParameter("mid");
	session.setAttribute("mid", mid);
%>

<h1>상품목록</h1>
<hr>
<%=session.getAttribute("mid")%>님, 안녕하세요! :D
<hr>
<form action="test12.jsp" method="POST">
	<select name="product">
		<option>메인보드</option>
		<option>CPU</option>
		<option>그래픽카드</option>
		<option>램</option>
		<option>파워</option>
	</select>
	<input type="submit" value="장바구니에 추가">
</form>
<hr>
<a href="test11.jsp">최종 결제하기</a>

</body>
</html>

로그인 페이지의 코드처럼 form태그를 사용하여 입력을 받는데 태그 안쪽을 보면 select 태그가 있다.

<select> 태그는 HTML 양식(form)에서 드롭다운 목록을 만들 때 사용되는 요소이다.

위의 코드에서는 장바구니에 추가 버튼을 눌렀을 때 해당 선택이 서버로 제출된다.

장바구니에 하나를 담는다고 해서 바로 다음 창으로 넘어가는 것이 아닌 최종결제하기 버튼을 눌러야 이동한다.

💡 select 태그

<select>: 드롭다운 목록을 생성하는데 사용되는 태그이다.
id 및 name: <select> 요소의 고유 식별자 및 서버로 전송되는 이름이다. id는 CSS 스타일링이나 JavaScript에서 요소를 참조할 때 사용되고, name은 서버로 전송되는 양식 데이터의 이름을 나타낸다.
<option>: 드롭다운 목록 내에서 각 항목을 나타내는 태그이다. value 속성은 서버로 전송되는 값이며, 태그 내부의 텍스트는 사용자에게 표시되는 내용이다.

🔍 장바구니에 상품 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.ArrayList" %>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>장바구니에 상품을 추가</title>
</head>
<body>

<%
	ArrayList<String> cart=(ArrayList<String>)session.getAttribute("cart");

	if(cart == null){ // 첫구매라서 장바구니가 없었다면
		cart=new ArrayList<String>();
		session.setAttribute("cart",cart);
	}

	String product=request.getParameter("product");
	cart.add(product);
%>

<script>
	alert('<%=product%>이(가) 추가되었습니다! :D');
	history.go(-1);
</script>

</body>
</html>

장바구니에 상품들을 넣는 코드이다. 입력하는 값을 저장하는 방식으로는 session을 선택했다.

따라서 .getAttribute("값 이름") 으로 값을 받아왔다.

그 다음 request 객체를 통해 매개변수 product의 값을 가져와서 cart 배열에 추가한다.

history.go(-1)은 현재 페이지의 이전 페이지로 이동하라는 명령이다.

장바구니에 추가를 했다면 이전 페이지로 돌아가는 것이다.

🔍 결제 페이지

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

<h1>결제 페이지</h1>

<%
	ArrayList<String> cart=(ArrayList<String>)session.getAttribute("cart");

	if(cart == null){
		out.println("결제할 상품이 없습니다!");
	}
	else{
		for(String data:cart){
			out.println(data+"<br>");
		}
	}
%>

</body>
</html>

실제 결제를 구현하지는 않고 간단하게 장바구니에 있는 물건을 출력하는 형식만 사용했다.

여기에서도 cart라는 배열리스트를 가져와서 활용하는데 만약 배열리스트가 비어있다면

결제할 상품이 없다는 글을 출력시킨다.