✔ form 태그의 action 속성 : form 데이터가 도착할 URL 지정.
# Hap.jsp
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 01</h1>
<hr>
<p>Hap.jsp → HapOk.jsp</p>
</div>
<div>
<form action="/WebApp05/HapOk.jsp" method="post">
정수1 <input type="text" name="su1" class="txt"><br>
정수2 <input type="text" name="su2" class="txt"><br>
<br>
<input type="submit" value="결과 확인" class="btn control">
</form>
</div>
</body>➰ 체크할 내용들 ➰
1) form 태그의 액션 속성
- HapOk.jsp 또는 /WebApp05/HapOk.jsp 형태로 지정하는건 가능하지만 /HapOk.jps로 지정하는 것은 안된다.
- form 내부에 구성한 데이터들을 HapOk.jsp로 전송하겠다.
- 내가 보내는 데이터(su1, su2)를 받고 내가 그 페이지와 만날 수 있게 해줘!
# HapOk.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 스크립릿 영역
// 이전 페이지(Hap.jsp)로부터 넘어온 데이터 수신 → su1, su2
String str1 = request.getParameter("su1");
String str2 = request.getParameter("su2");
int sum = 0;
try
{
int n1 = Integer.parseInt(str1);
int n2 = Integer.parseInt(str2);
sum = n1 + n2;
}
catch(Exception e)
{
System.out.println(e.toString()); // 클라이언트에게 보여주는 것이 아닌 서버의 콘솔창에서만 보여짐
getServletContext().log("오류 : " + e.toString());
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HapOk.jsp</title>
</head>
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 01</h1>
<hr>
<p>Hap.jsp → HapOk.jsp</p>
</div>
<div>
<h2>결과 : <%=sum %></h2>
</div>
</body>
</html>➰ 체크할 내용들 ➰
1) try ~ catch에서 예외 발생 할 경우
- System.out.println(e.toString()) : 클라이언트의 브라우저에는 출력되지 않고 서버 콘솔창에만 보여짐
- getServletContext().log("오류 : " + e.toString()) : 해당 오류 내용을 서버 log 기록으로 남기는 처리
- Hap.jsp 페이지에서 정수1 또는 정수2 항목에 정수가 아닌 문자 / 공백을 입력했을 경우,
try ~ catch 블럭에 의해 항상 0으로 출력
# Gugudan.jsp
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 02</h1>
<hr>
<p>Gugudan.jsp → GugudanOk.jsp</p>
</div>
<div>
<form action="GugudanOk.jsp" method="post">
<table class="table">
<tr>
<th>원하는 단 입력</th>
<td>
<input type="text" name="dan" class="txt">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="결과 확인" class="btn control"
style="width: 100%">
</td>
</tr>
</table>
</form>
</div>
</body>
# GugudanOk.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 스크립릿 영역
// 이전 페이지(Gugudan.jsp)로부터 데이터 수신 → dan
String danStr = request.getParameter("dan");
int n = 0;
String result = "";
try
{
n = Integer.parseInt(danStr);
/* 내가 풀이한 부분
for(int i=1; i<10; i++)
{
result += n + " * " + i + "= " + (n * i) + "<br>";
}
*/
}
catch (Exception e)
{
System.out.println(e.toString());
getServletContext().log("오류 : " + e.toString());
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GugudanOk.jsp</title>
</head>
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 02</h1>
<hr>
<p>Gugudan.jsp → GugudanOk.jsp</p>
</div>
<div>
<%-- 내가 풀이한 부분 <h2><%=n %>단의 구구단 결과는<br>
↓ 아래를 확인해주세요~! ↓</h2>
<%=result %> --%>
</div>
<!-- html 주석문 -->
<%-- jsp 주석문 (서블릿 컨테이너가 인식할 수 없는 부분. 그러니 서블릿 컨테이터는 있는지도 모르고 실행. 따라서 소스코드 보기 하면 jsp 주석은 보이지 않음) --%>
<%--
<% // 강사님 풀이 ①
for (int i=1; i<=9; i++)
{
out.print(n + " * " + i + " = " + (n*i) + "<br>");
}
%>
--%>
<%
for (int i=1; i<=9; i++)
{
%>
<%=n %> * <%=i %> = <%=(n*i) %><br>
<%
}
%>
</body>
</html>➰ 체크할 내용들 ➰
1) 내가 풀이한 방식
- 스크립릿 영역에서 변수에 결과값을 담고 body 부분에서 표현식을 통해 페이지에서 결과를 보여줌.
2) 다른 풀이 방식
① body 부분에서 스크립릿 영역 생성 후 for문 돌리고, out.print 사용
② for 문을 분리!! 이렇게 쓸 수 있을 거라고는 생각을 못해서 너무 신기했음.
<% for (int i=0; i<10; i++) { %> <% } %> ← 이렇게 사용!!
# RadioSelect.jsp
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 03</h1>
<hr>
<p>RadioSelect.jsp → RadioSelectOk.jsp</p>
</div>
<div>
<h2>radio, select 데이터 전송</h2>
<form action="RadioSelectOk.jsp" method="post">
이름 <input type="text" name="name" class="txt">
<br><br>
성별
<label><input type="radio" name="gender" value="M">남자</label>
<label><input type="radio" name="gender" value="F">여자</label>
<br><br>
전공
<select name="major">
<option value="국문학">국문학</option>
<option value="영문학">영문학</option>
<option value="컴퓨터공학">컴퓨터공학</option>
<option value="수학">수학</option>
<option value="신문방송학">신문방송학</option>
<option value="경영학">경영학</option>
</select>
<br><br>
취미
<select name="hobby" size="7" multiple="multiple">
<option value="영화감상">영화감상</option>
<option value="음악감상">음악감상</option>
<option value="공원산책">공원산책</option>
<option value="배낭여행">배낭여행</option>
<option value="스노클링">스노클링</option>
<option value="암벽등반">암벽등반</option>
<option value="종이접기">종이접기</option>
</select>
<br><br>
<input type="submit" value="내용 전송" class="btn control">
</form>
</div>
</body>
# RadioSelectOk.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 스크립릿 영역
// 이전 페이지(RadioSelect.jsp)로부터 데이터 수신
// → name
// 한글 깨짐 방지 처리
request.setCharacterEncoding("UTF-8"); // check~!!!
String nameStr = request.getParameter("name"); //-- 텍스트박스... 단일값 수신
String genderStr = request.getParameter("gender"); //-- 라디오버튼... 단일값 수신
String majorStr = request.getParameter("major"); //-- 선택상자..... 단일값 수신
//String hobbyStr = request.getParameter("hobby"); //-- 선택상자... 다중 데이터 수신
String[] hobbyArr = request.getParameterValues("hobby");
//-- 다중 선택이 가능한 선택상자일 경우...\
// 『getParameterValues()』로 데이터 수신
// → 배열 반환
// name 수신 및 처리 → 특이사항 없음~!!!
// gender 수신 및 처리
String gender ="";
if(genderStr.equals("M"))
gender = "남자";
else if(genderStr.equals("F"))
gender = "여자";
else
gender = "확인불가";
// major 수신 및 처리 → 특이사항 없음~!!!
// hobby 수신 및 처리
String hobby = "";
if(hobbyArr != null)
{
for (String item : hobbyArr)
hobby += "[" + item + "]";
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RadioSelectOk.jsp</title>
</head>
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 03</h1>
<hr>
<p>RadioSelect.jsp → RadioSelectOk.jsp</p>
</div>
<div>
<h2>radio, select 데이터 수신 결과 확인</h2>
<div>
<p>이름 : <%=nameStr %>
<p>성별 : <%=genderStr %>(<%=gender %>)
<p>전공 : <%=majorStr %>
<p>취미 : <%=hobby %>
</div>
</div>
</body>
</html>➰ 체크할 내용들 ➰
1) 한글 입력 시 깨짐 문제
- 입력할 때 "UTF-8" 보여줄 때 "UTF-8" 이지만, 서블릿에서 처리할 때 동일하게 UTF-8을 사용하는가? 그건 모른다!
다른 인코딩 방식을 사용할 수 있기 때문에 한글 입력시 깨지는 것을 볼 수 있다.
그래서 request.setCharacterEncoding("UTF-8"); 인코딩 코드를 넣어줘야한다~!
2) 다중 데이터를 받아오는 경우
- 여러개의 데이터(다중 선택)를 받아올 경우에는 배열 사용!
- 다중 선택이 가능할 경우에는 request.getParameterValues(); 사용!
# CheckBox.jsp
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 04</h1>
<hr>
<p>CheckBox.jsp → CheckBoxOk.jsp</p>
</div>
<div>
<form action="CheckBoxOk.jsp" method="post">
이름 <input type="text" name="name" class="txt">
<br><br>
메모<br>
<textarea rows="5" cols="30" name="memo"></textarea>
<br><br>
이상형<br>
<label><input type="checkbox" name="type" value="조휴일">조휴일</label>
<label><input type="checkbox" name="type" value="유재석">유재석</label>
<label><input type="checkbox" name="type" value="류진">류진</label>
<label><input type="checkbox" name="type" value="윈터">윈터</label>
<label><input type="checkbox" name="type" value="정우성">정우성</label>
<br>
<label><input type="checkbox" name="type" value="차은우">차은우</label>
<label><input type="checkbox" name="type" value="카리나">카리나</label>
<label><input type="checkbox" name="type" value="서강준">서강준</label>
<label><input type="checkbox" name="type" value="박은빈">박은빈</label>
<label><input type="checkbox" name="type" value="고윤정">고윤정</label>
<br><br>
<input type="submit" value="전송하기" class="btn control">
</form>
</div>
</body>
# CheckBoxOk.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%-- 내가 작성!<%
// 스크립릿 영역
request.setCharacterEncoding("UTF-8");
String nameStr = request.getParameter("name");
String memoStr = request.getParameter("memo");
String[] typeArr = request.getParameterValues("type");
String typeStr = "";
for (int i=0; i<typeArr.length; i++)
typeStr += "[" + typeArr[i] + "]";
%> --%>
<%
// 스크립릿 영역
// 이전 페이지(CheckBox.jsp)로부터 데이터 수신
// → name, memo, checkGroup
// 한글 깨짐 방지 처리
request.setCharacterEncoding("UTF-8");
// 이름 데이터 수신
String name = request.getParameter("name");
// 메모 데이터 수신 check~!!!
String memo = request.getParameter("memo");
//memo = memo.replace("\n", "<br>"); // textarea 와 html에서 개행 처리하는 방식이 다르기 때문에 처리해줘야함!
memo = memo.replaceAll("\n", "<br>"); // 정규표현식 공부해봅시다~!
// 이상형 데이터 수신
//String type = request.getParameter("type"); // 다중 데이터이기 때문에 이렇게 처리하면 안됩니다!!
String[] type = request.getParameterValues("type");
String str = "";
if (type != null)
{
for (String item : type)
str += "[" + item + "]";
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CheckBoxOk.jsp</title>
</head>
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 04</h1>
<hr>
<p>CheckBox.jsp → CheckBoxOk.jsp</p>
</div>
<%-- <div> 내가 작성한 부분
당신의 이름은 "<%=nameStr %>" 입니다.<br><br>
당신의 남긴 메모는<br> <textarea rows="5" cols="30"><%=memoStr %></textarea><br> 입니다.<br><br>
당신의 남긴 메모는 "<%=memoStr %>" 입니다.<br>
당신의 이상형은<br> "<%=typeStr %>" <br>입니다.
</div> --%>
<div>
<h2>수신 데이터 확인</h2>
<h3>이름 : <%=name %></h3>
<h3>메모</h3>
<p><%=memo %></p>
<h3>이상형 : <%=str %></h3>
</div>
</body>
</html>➰ 체크할 내용들 ➰
1) 입력 받은 ENTER(개행)을 출력 화면에서 동일하게 적용하기
- JDK 1.5 이후부터 『replaceAll()』 메소드 사용 가능.
- text area 개행 : \n → HTML 공백 : <br>
2) 배열 데이터를 수신하여 처리할 경우
- 수신된 데이터가 전혀 없는 경우는 배열의 값 자체가 null 이 되어버리기 때문에 null 에 대한 확인 검사 과정이 필요함!
# Table.jsp
- 가로, 세로에 입력한 수에 맞춰 m x n 테이블 생성하기
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 05</h1>
<hr>
<p>Table.jsp → TableOk.jsp</p>
</div>
<div>
<form action="TableOk.jsp" method="post">
<table class="table">
<tr>
<th>가로</th>
<td>
<input type="text" name="su1" class="txt">
</td>
</tr>
<tr>
<th>세로</th>
<td>
<input type="text" name="su2" class="txt">
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" class="btn control" style="width: 300px;">
결과 확인
</button>
</td>
</tr>
</table>
</form>
</div>
</body>
# TableOk.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%
// 스크립릿 영역
// 이전 페이지(Table.jsp)로부터 전송된 데이터 수신
// → su1, su2
String s1 = request.getParameter("su1");
String s2 = request.getParameter("su2");
int n1 = 0;
int n2 = 0;
// 테이블 안에서 1씩 증가시켜 나갈 변수 선언 및 초기화
int n = 0;
try
{
// 수신된 데이터 형 변환 (문자열 → 정수)
n1 = Integer.parseInt(s1);
n2 = Integer.parseInt(s2);
}
catch(Exception e)
{
System.out.println(e.toString());
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TableOk.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>JSP를 이용한 데이터 송수신 실습 05</h1>
<hr>
<p>Table.jsp → TableOk.jsp</p>
</div>
<div>
<table border="1">
<%
for (int i=0; i<n2; i++)
{
%>
<tr>
<%
for (int j=0; j<n1; j++)
{
%>
<td style="width: 40px; text-align: right;"><%=++n %></td>
<%
}
%>
</tr>
<%
}
%>
</table>
</div>
</body>
</html>
- for문을 스크립릿 영역으로 쪼개서 사용하는 것이 너무 신기해서 그렇게 풀었는데 강사님도 그 방식으로 풀어주셨다.
for문 쪼개서 쓰는건 아직 신기방기~
