본문 바로가기
Programming/HTML&JAVASCRIPT&JQuery

<JSP>아... 장바구니 페이지가 필요한데.. 어떻게 만들더라..?

청정코딩샘물 2018. 4. 13. 17:00
728x90
반응형

어떻게 만드는지 궁금하다면 대답해 드리는게 인지상정!

이 세계의 장바구니 페이지를 위해 제가! 만들어 보았습니다.


(로그인화면)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% session.invalidate(); %> <!--세션 초기화 -->
 
<!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=UTF-8">
<title>쇼핑몰 로그인</title>
</head>
<body>
<center>
<form action = setProduct.jsp method=post>
<h1>로그인</h1>
<input type="text" name = "ID" placeholder="아이디 입력"> <!--아이디 입력공간-->
 
<input type="submit" value="로그인"><!--정보 넘기기 -->
</form>
</center>
</body>
</html>
cs

(쇼핑몰에 들어가기 위해 아이디만 입력하여 로그인을 하게 만들었습니다.)



(장바구니 화면)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<%@page import="javafx.scene.control.Alert"%>
<%@ 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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<form action="add.jsp" method="post">
 
 
<%
if( request.getParameter("ID") == ""){
    out.println("<script>alert('아이디를 입력해주세요!')</script>");
    out.println("<script>history.back();</script>");
    
}/*만약 ID가 ""(공백)이라면 알림창을 띄우고 전 페이지로 돌아간다.*/
else{ 
 
if(request.getParameter("ID") != null){ //다른 창에서 이 창으로 돌아왔을 때 ID가 공백이 아니면 
    //세션 애트리뷰트를 셋해준다.
    session.setAttribute("login", request.getParameter("ID"));
}
 
 
%>
<h1>상품선택</h1>
<hr  style="border: ridge 5px green;">
<h3> <%= session.getAttribute("login")%>님이 로그인 한 상태입니다</h3>
<hr style="border: outset 10px red;">
<select name="product">
<option value = "BreadCrumbs">BreadCrumbs</option>
<option value = "BusinessContinutiyPlanning">BusinessContinutiyPlanning</option>
<option value = "BalancedScoreCard">BalancedScoreCard</option>
<option value = "웜">웜</option>
<option value = "살라미">살라미</option>
</select>
<input type="submit" value="추가"><!--정보를 넘겨준다.-->
<input type="button" onclick="location.href='login.jsp'" value="로그아웃"> <!--로그인화면으로 돌아간다-->
<br>
<br>
<a href="checkOut.jsp">계산</a>
</form>
</center><% 
}%>
</body>
</html>
cs

(원하는 아이템을 선택하여 추가를 누르면 add화면에 들어갑니다.)


(추가 화면)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@page import="javax.websocket.Session"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.sun.xml.internal.bind.v2.runtime.Location"%>
<%@page import="javafx.scene.control.Alert"%>
<%@ 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=UTF-8">
 
<title>Insert title here</title>
</head>
<body>
<form>
    <% 
    String productname = request.getParameter("product");
    //productname 에 product의 값을 넣어줌
    ArrayList<String> productlist = (ArrayList<String>)session.getAttribute("ArrayList");
    //ArrayList타입 참조변수에 productlist를 넣어줌
    if(productlist==null){ //만약 productlist가 널값이면
       productlist = new ArrayList<String>(); //ArrayList를 만들어줌
    }
       productlist.add(productname); //productlist에 값을 넣어준다.
    session.setAttribute("ArrayList", productlist); //ArrayList 세션에 productlist를 넣어줌 
    
    %>
    <script>alert("<%=request.getParameter("product")%>상품이 추가되었습니다")</script>
    <% //알람을 넣어줌
    out.println("<script>history.back();</script>");%> <!--이전화면으로 돌아감-->
    </form>
</body>
</html>
cs

(ArrayList에 받아온 데이터들을 넣어줍니다.)



(확인(구매) 화면)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<%@page import="java.util.*"%>
<%@ 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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<center>
 
<h1>계산</h1>
<h2><%= session.getAttribute("login")%>님이 선택한 상품 목록</h2>
<hr style="border: outset 10px red;">
    <%
    if(session.getAttribute("ArrayList")==null){
        out.println("상품이 없습니다");
    }//ArrayList가 비어있으면 상품이 없습니다를 출력함.
    else{
    out.println(session.getAttribute("ArrayList"));
    }//아니면 ArrayList에 있는 내용을 출력해라
    %>
    <br>
    <a href="#" onClick="location.href='setProduct.jsp'">뒤로가기</a>
    <!--이전화면으로 돌아가기.-->
</center>
</form>
</body>
</html>
cs

(ArrayList에 있는 데이터들을 모두 출력합니다.)


(실행 화면)


반응형
저작자표시

'Programming > HTML&JAVASCRIPT&JQuery' 카테고리의 다른 글

<JSP> 한글이 자꾸 깨지네 왜이러지??  (2) 2018.04.15
<JSP>기존 에러페이지가 보기 싫어? 나만의 에러 페이지를 새로 만들어보자!  (0) 2018.04.15
<JAVASCRIPT>회원가입양식을 JQUERY로!  (0) 2018.04.08
<JAVASCRIPT> 회원가입 양식 만들기!  (1) 2018.04.06
<JAVASCRIPT>만년달력 만들기  (5) 2018.04.06

'Programming/HTML&JAVASCRIPT&JQuery' Related Articles

티스토리툴바