JSP
<장바구니 만들기 예제 (나만의 )>
주석을 확인하고 코드 보시기 바랍니다.
4개의 jsp파일로 이뤄져있습니다.
1.login.jsp
2.setproduct.jsp
3.add.jsp
4.checkOut.jsp
주의할점
실행 결과를 보면 페이지가 3개 인것처럼 보일 수 있으나 속지말고 URL을 잘확인하길바란다
1.login.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% session.invalidate(); %> <!--로그인 버튼으로 setproduct.jsp.dptj에서 넘어와 session안에 소멸시킴 -->
<%
request.setCharacterEncoding("UTF-8"); //한글처리
%>
<html>
<head>
<script type="text/javascript">
function chkName() {//아이디 입력 유효성 검사
var idCheck = document.getElementById("sun");//아이디 찾아가기
//아이디 공백 확인
//alert(idCheck[0].value);
//아이디 공백 확인
if(idCheck.value == ""){
alert("아이디를 입력하세요");
idCheck[0].focus();
return false;
}
document.f.submit();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<center>
<body>
<h1>맛있는 음식 장바구니 로그인</h1>
<form name="f" action="setproduct.jsp"><!--"setproduct.jsp"로 보내준다 -->
<table border="3" bordercolor="red">
<tr>
<td >아이디 입력</td>
<td><input type="text" name="id" id="sun"></td>
<td><input type="button" name="login" value="로그인" onClick="chkName()"></td>
</tr>
</table>
</form>
</body>
</center>
</html> |
cs |
2.setproduct.jsp
|
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65 |
<%@ 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>
<center>
<body>
<%// 앞에서 아이디 유효성검사했지만 연습하는 겸 여기 에다가도 만들어 주었다 (필없는 코드)
if(session.getAttribute("id")==""){
%>
<script type="text/javascript">alert("아이뒤를 입력하세요 ")</script>
<script type="text/javascript"> history.back();</script>
<%
}
String id = request.getParameter("id");//request로 하여 name값을 받아옴
session.setAttribute("id", id);//값을 session에서 저장해 유지시켜준다
%>
<form action="add.jsp" ><!-- add.jspfh qhsownsek. -->
<table >
<h2 ><font color="red" >추가 하실 음식을 선택하시고 추가버튼을 눌러 주세요</font> </h2>
<hr>
<h3><font color="blue" > <%=id %></font>님이 로그인한 상태입니다.<font color="blue" ><%=id %></font></h3>
<hr>
<tr>
<td>
<select name="product"><!--음식 리스트 메뉴를 만들어 준다 -->
<option value="돈까스" name="food">돈까스</option>
<option value="치킨" name="food">치킨</option>
<option value="삼겹살" name="food">삼겹살</option>
<option value="갈비" name="food">갈비</option>
<option value="돈장찌게" name="food">된장찌게</option>
</select>
</td>
<td> <input type="submit" value="추가" style="background-color:red " ></td><!--alert()로 어떤것이 추가되었는 지 확인할수있다. -->
</tr>
<tr>
<td> <a href="checkOut.jsp"><font color="blue" size="10">계산</font> </td><!--추가 링크를 누르게되면 checkOut.jsp에서 합산을 볼수있다. -->
</tr>
</table>
</form>
<br>
<hr>
<form action="Login.jsp" ><!--버튼을 누르면 Login.jsp 창으로 넘어간다 -->
<tr>
<td> <input type="submit" value="로그아웃" style="background-color:red " ></td><!-- session안 데이터를 소멸시킴 -->
</tr>
</form>
</body>
</center>
</html> |
cs |
3.add.jsp
|
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 |
<%@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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%// 배열보단 ArrayListr기능이 좋다.
ArrayList<String> list ;//= null;// 배열보다 ArrayList의 기능이 간편하기때문에 사용
String productname = request.getParameter("product");//productname 안에 product에 request.getParameter("product")너어줌 (name값)
if(session.getAttribute("productlist")==null){// 만약 배열 할당이 이뤄지지않았다면
list= new ArrayList<String>(); //ArrayList를 만들어 준다 (새로운 )
}else{
list =(ArrayList<String>) session.getAttribute("productlist");//만약 아니라면 추가할 공간을 만들어 준다
}
list.add(productname);// 투가
session.setAttribute("productlist",list);//session에 올려둔다
%>
<script type="text/javascript" >
alert("<%=productname%>상품추가 ");/*선택한 상품을 확인해준다 */
history.back();// 그리고나서 다시 돌아간다
</script>
</body>
</html> |
cs |
4.checkOut.jsp
|
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 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
request.setCharacterEncoding("UTF-8"); //한글처리
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>계산 화면 </title>
</head>
<body>
<center>
<table>
<tr>
<td></td>
<%
if(session.getAttribute("productlist")==null){// 만약 아무것도 추가 하지않아 았다면
%>
<font size="30">아무 것도 없습니다.</font>
</td>
<td>
<%
}else{%>
<%=session.getAttribute("productlist")%><!--저장되는 갑을 보여준다. -->
<%
}
%>
</td>
</tr>
</table>
<br>
<hr>
<input type="button" value="뒤로가기 " style="background-color:red " onclick="history.back();"><!--뒤로가기를 하게되면 값이 저장된상태에서 setproduct.jdp로 돌아감 -->
</center>
</body>
</html> |
cs |
\------------------------------------------------------------------
실행결과 보기
1.로그인 기본/예외
2.음식 선택화면
추가=메뉴정하고 추가 버튼 누르면 (값 저장)
로그아웃= 첫페이지로 돌아감(session 소멸)
계산은 =지금까지 추가한 음식을 합친것
추가버튼 눌렸을때
아무것도 추가 하지않았을경우
저장된값보기
'JSP' 카테고리의 다른 글
| [JSP][sendRedirect( )] (0) | 2018.04.14 |
|---|---|
| [JSP][에러 페이지만들기] (0) | 2018.04.14 |
| [JSP][jsp, 스코프 예제] (0) | 2018.04.13 |
| [JSP][한글 깨짐 처리] (0) | 2018.04.12 |
| MVC (0) | 2018.04.11 |
