반응형
쉽고 재미있게 배우는 JSP 장바구니 만들기
1. 로그인 페이지 구현하기
Login.jsp: 로그인 화면 생성 및 사용자 검증
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>장바구니</title>
</head>
<% session.invalidate(); %> <!-- 세션 무효화 -->
<body>
<h2 align="center">로그인</h2>
<hr>
<form action="setProduct.jsp" method="post" onsubmit="return validate()">
<table align="center" border="0" cellpadding="1" cellspacing="0">
<tr align="center">
<td>이름:<input type="text" name="username" id="username"></td>
</tr>
</table>
<div align="center">
<input type="submit" value="LOGIN">
</div>
</form>
<script type="text/javascript">
function validate() {
var checkname = /^[가-힣]{2,4}$/; // 이름 유효성 검사 정규식
var username = document.getElementById("username");
if (username.value == '') {
alert("Input username"); // 이름 입력 확인
return false;
}
if (!checkname.test(username.value)) {
alert("Worng:"); // 이름 형식 확인
return false;
}
}
</script>
</body>
</html>
2. 상품 페이지 설정하기
setProduct.jsp: 사용자 서택 상품을 세션에 저장하기
더보기
<%@ page import="java.util.ArrayList" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<% request.setCharacterEncoding("UTF-8"); %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>장바구니</title>
</head>
<body onload="add()">
<%
String product = request.getParameter("product"); // 전달된 상품 이름 가져오기
String username = request.getSession().getAttribute("username").toString(); // 세션에서 사용자 이름 가져오기
ArrayList<String> pro = (ArrayList<String>) session.getAttribute("pro"); // 세션에서 상품 목록 가져오기
if (pro == null) {
pro = new ArrayList<String>(); // 상품 목록이 없으면 새로 생성
}
pro.add(product); // 상품 목록에 추가
session.setAttribute("pro", pro); // 세션에 상품 목록 저장
%>
<script>
var value = "<%= product %>";
function add() {
alert("장바구니에 " + value + " 추가"); // 알림 메시지
history.back(); // 이전 페이지로 돌아가기
}
</script>
</body>
</html>
3. 장바구니 확인 페이지 만들기
checkOut.jsp: 세션에 저장된 상품 목록 출력
더보기
<%@ page import="java.util.ArrayList" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>장바구니</title>
</head>
<body>
<%
ArrayList<String> pro = (ArrayList<String>) session.getAttribute("pro"); // 세션에서 상품 목록 가져오기
String username = request.getSession().getAttribute("username").toString(); // 세션에서 사용자 이름 가져오기
%>
<center>
<%= username %>님의 상품 목록<br>
<% for (String i : pro) { %>
<%= i %><br> <!-- 상품 목록 출력 -->
<% } %>
<br>
<form action="Login.jsp" method="post">
<input type="button" value="돌아가기" onClick="history.back()"> <!-- 돌아가기 버튼 -->
</form>
</center>
</body>
</html>
여기까지 읽어주셔서 진심으로 감사드립니다.
이 글이 마음에 드셨다면, 우측 아래 하트(공감)를 눌러 응원의 표시를 부탁드려요.
여러분의 소중한 관심과 사랑이 큰 힘이 됩니다. 감사합니다!
반응형