s05_registerForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[실습]회원가입</title>
<script type="text/javascript">
window.onload = function(){
const myForm = document.getElementById('myForm');
//폼 이벤트 연결
myForm.onsubmit = function(){
//반복문을 이용한 유효성 체크
const items = document.querySelectorAll('.input-check');
for(let i=0; i<items.length;i++){
//입력을 하지 않았거나 공백 입력한 경우
if(items[i].value.trim()==''){
const label = document.querySelector('label[for="'+items[i].id+'"]');
const label_text = label.textContent;
alert(label_text + ' 항목은 필수 입력');
items[i].value = '';
items[i].focus();
return false;
}
if (items[i].id == 'id' && !/^[A-Za-z0-9]{4,12}$/.test(items[i].value)) {
alert('영문 또는 숫자 사용, 최소 4자 최대 12자 입력가능');
items[i].value = '';
items[i].focus();
return false;
}
}
};
};
</script>
</head>
<body>
<%--
이름(name), 아이디(id),비밀번호(password),전화번호(phone),
취미(hobby)-영화보기,음악감상,등산,낚시, 춤 => checkbox 사용
자기소개(content) => textarea 사용
s06_register.jsp로 전송, 전송 방식 post
출력예시
(유효성 체크 -> 필수입력,영문,숫자 등 비밀번호 몇자리까지인지 스스로 정하기)
이름:홍길동 *필수
아이디:dragon *필수
비밀번호:1234 *필수
전화번호:010-1234-5678
자기소개:서울에서 태어나서 계속 서울 거주
--%>
<form action="s06_register.jsp" method="post" id="myForm">
<ul>
<li>
<label for ="name">이름</label>
<input type="text" name="name" id="name" class="input-check">
</li>
<li>
<label for ="id">아이디</label>
<input type="text" name="id" id="id" class="input-check">
</li>
<li>
<label for ="password">비밀번호</label>
<input type="password" name="password" id="password" class="input-check">
</li>
<li>
<label for ="phone">전화번호</label>
<input type="text" name="phone" id="phone">
</li>
<li>
<label for ="content">자기소개</label>
<textarea rows="5" cols="50" name="content"></textarea><br>
</li>
<li>
<label>취미</label>
<input type="checkbox" name="hobby" value="movie"> 영화보기
<input type="checkbox" name="hobby" value="music"> 음악감상
<input type="checkbox" name="hobby" value="climbing"> 등산
<input type="checkbox" name="hobby" value="fishing"> 낚시
<input type="checkbox" name="hobby" value="dance"> 춤
<br>
<input type="submit" value="전송">
</li>
</ul>
</form>
</body>
</html>
s06_register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//post방식
request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
이름: <%= request.getParameter("name") %><br>
아이디: <%= request.getParameter("id") %><br>
비밀번호: <%= request.getParameter("password") %><br>
전화번호: <%= request.getParameter("phone") %><br>
자기소개: <%= request.getParameter("content") %><br>
<%
String[] hobbies = request.getParameterValues("hobby");
if(hobbies != null) { //체크박스를 체크 하지않으면 values가 null값이기 때문에 null값이 아닐 때만 돌려줌
%>
취미:
<%
for(int i=0;i<hobbies.length;i++){
if(i>0) out.print(",");
%>
<%= hobbies[i] %>
<%
}
out.println("<br>");
}
%>
</body>
</html>
s07_orderForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품구매</title>
<script type="text/javascript">
window.onload = function(){
const myForm = document.getElementById('myForm');
myForm.onsubmit = function(){
const input = document.querySelectorAll('.input-check');
for(let i=0;i<input.length;i++){
if(input[i].value.trim()==''){
const label = document.querySelector('label[for="'+input[i].id+'"]');
const label_text = label.textContent;
alert(label_text + ' 항목은 필수 입력');
input[i].value = '';
input[i].focus();
return false;
}
}
const items = document.getElementsByName('item');
let check = false;
for(let i=0;i<items.length;i++){
if(items[i].checked){
check =true;
break;
}
}
if(!check){
alert('상품은 하나 이상 꼭 선택하세요!!!');
return false;
}
};
};
</script>
</head>
<body>
<%--
이름,배송희망일 필수 입력, 상품은 하나 이상 꼭 선택
[출력예시]
구매 금액이 30만원 미만이면 배송비 5천원 추가
이름:홍길동
배송희망일:2024-04-23
구입 내용 : 가방,옷
배송비 : 5,000원
총구매비용(배송비포함) : 255,000원
--%>
<form action="s08_order.jsp" method="post" id="myForm">
<ul>
<li>
<label for="name">이름</label>
<input type="text" name="name" id="name" class="input-check">
</li>
<li>
<label for="order_date">배송희망일</label>
<input type="date" name="order_date" id="order_date" class="input-check">
</li>
<li>
<label>상품(30만원 미만 배송비 5천원 추가)</label>
<br>
<input id = "c0" type="checkbox" name="item" value="가방">가방(20만원)
<input id = "c1" type="checkbox" name="item" value="신발">신발(10만원)
<input id = "c2" type="checkbox" name="item" value="옷">옷(5만원)
<input id = "c3" type="checkbox" name="item" value="식사권">식사권(15만원)
</li>
</ul>
<input type="submit" value="전송">
</form>
</body>
</html>
s08_order.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import ="java.util.HashMap" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주문 내역</title>
</head>
<body>
<%
//post방식으로 전송된 데이터 인코딩 타입 지정
request.setCharacterEncoding("utf-8");
//가격정보
HashMap<String,Integer> map = new HashMap<String,Integer>();
map.put("가방",200000);
map.put("신발",100000);
map.put("옷",50000);
map.put("식사권",150000);
//배송비
int delivery_fee = 5000;
//총구매비용
int sum = 0;
%>
이름: <%= request.getParameter("name") %><br>
배송희망일: <%= request.getParameter("order_date") %><br>
구입내용:
<%
String[] items = request.getParameterValues("item");
if(items != null) { //체크박스를 체크 하지않으면 values가 null값이기 때문에 null값이 아닐 때만 돌려줌
for(int i=0;i<items.length;i++){
sum+=map.get(items[i]);
if(i>0) out.print(",");
%>
<%= items[i] %>
<%
}//end of for
if(sum<300000)
sum += delivery_fee;
else
delivery_fee = 0;
%>
<br>
배송비 : <%= String.format("%,d원",delivery_fee) %> <br>
총구매비용(배송비포함) : <%= String.format("%,d원",sum) %>
<%
}//end of if
%>
</body>
</html>
s09_responseA.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 주석을 하든 안하든 어차피 결과로 출력되지않음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>response.sendRedirect() 테스트</title>
</head>
<body>
현재 페이지는 s09_responseA.jsp 입니다.
화면에 보여지지 않습니다.
</body>
</html>
-->
<%
response.sendRedirect("s10_responseB.jsp");
%>
s10_responseB.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>s10_responseB.jsp</title>
</head>
<body>
현재 페이지는 s10_responseB.jsp 입니다.
</body>
</html>
s09와 s10 둘다 같은 화면이 출력된다.
s11_autoFlushFalse.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page buffer = "1kb" autoFlush = "false" %> <!-- 고의적으로 오류가 나게함. 작동이 되는 것을 보기위해 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>autoFlush 속성값 false 예제</title>
</head>
<body>
<%
for(int i=0; i<1000;i++){
%>
1234
<%
}
%>
</body>
</html>
s12_autoFlushTrue.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page buffer = "1kb" autoFlush = "true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>autoFlush 속성값 true 예제</title>
</head>
<body>
<%
for(int i=0; i<1000;i++){
%>
1234
<%
}
%>
</body>
</html>
