JSP
실습
39일차 (전날) 진행한 문제 풀이 비교
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 요청이 여러 번 들어와도 유지할 값을 선언할 부분 -->
<%!
ArrayList<String> party = new ArrayList<>();
ArrayList<Integer> jobIndex = new ArrayList<>();
Random rnd = new Random();
String[] jobs = {"전사", "도적", "사냥꾼", "마법사", "사제"};
%>
<!-- 요청이 들어올 때 마다 실행할 부분 -->
<%
// jobs의 배열 크기를 고정적으로 넘기지 말고 .length로 전달
int rn = rnd.nextInt(jobs.length);
String job = jobs[rn];
if (party.size() == 10) {
party.clear();
jobIndex.clear();
}
party.add(job);
jobIndex.add(rn);
int cnt = 0;
for (String player : party) {
if (job.equals(player)) cnt++;
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>당신의 역할</h1>
<p>
<img alt="pic" src="img/<%=rn%>.png" width="40px" height="40px">
당신에게 부여된 역할은 <strong><%=job%></strong>입니다. <br>
현재 파티에 당신과 같은 역할을 가진 플레이어는 당신 포함 <%=cnt %>명 입니다.
</p>
<p>
현재 파티 구성 <br>
<% for(int idx : jobIndex) { %>
<img alt="pic2" src="img/<%=idx%>.png " width="20px" height="20px">
<% } %>
(<%=party.size() %>명 참가 중)
</p>
</body>
</html>어제와 구성이 좀 다른 부분을 꼽자면,
for문의 순환시 향상된 for문 순환법으로 진행하는 부분이라던가, 특히 <body> 태그 부분에서 HTML 코드를 전부 out.print() 로 때려박지 말고, 중간중간 동적인 값들을 표현하기 위해 <%= %> 표현식을 사용하여 작성하는게 좋다는 부분이다.
사용자 입력값 전달하기
req_user_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%--
사용자의 입력값을 서버로 전달하는 방법.
1. 사용자의 입력 데이터를 서버로 전송하려면 HTML의 form 태그를 사용한다.
2. form 태그의 action 속성에 데이터를 전달받을 페이지의 URL 주소를 사용한다.
3. input 태그의 name 속성으로 요청 파라미터의 이름을 지정할 수 있다.
이름을 지정할 때는 입력값과 관련있는 이름으로 지정하는 것이 좋다.
--%>
<form action="req_user_info.jsp">
아이디: <input type="text" name="id" value="메롱메롱"> <br>
비밀번호: <input type="password" name="pw" required> <br>
# 성별 <br>
<input type="radio" name="gender" value="male"> 남
<input type="radio" name="gender" value="female"> 여 <br>
# 취미 <br>
<input type="checkbox" name="hobby" value="read"> 독서
<input type="checkbox" name="hobby" value="sleep"> 수면
<input type="checkbox" name="hobby" value="soccer"> 축구
<input type="checkbox" name="hobby" value="game"> 게임 <br>
# 지역 <br>
<select name="region">
<option>서울</option>
<option>대전</option>
<option>대구</option>
<option>부산</option>
</select>
# 자기소개 <br>
<textarea name="introduce" cols="30" rows="10"></textarea> <br>
<input type="email" name="email" placeholder="이메일을 입력하세요."> <br>
<input type="submit" value="회원가입">
</form>
</body>
</html>
req_user_info.jsp
<%@page import="java.util.Arrays"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String gender = request.getParameter("gender");
/*
String hobby = request.getParameter("hobby"); 이대로 작성하면
취미가 여러개 체크되었더라도 다 넘어올 수가 없음.
String[] hobby = request.getParameterValues("hobby");
그래서 이렇게 작성해야 하는데, Values는 배열로 넘어오므로 String[]으로 자료형을 지정해야 한다.
*/
String[] hobby = request.getParameterValues("hobby");
String region = request.getParameter("region");
String intro = request.getParameter("introduce");
String email = request.getParameter("email");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>
# ID : <%=id %> <br>
# PW : <%=pw %> <br>
# 성별 : <%=gender %> <br>
<!-- List의 경우 그냥 찍으면 되는데, 배열의 경우 내부를 확인하기 위해서는 Arrays 클래스의 toString 함수를 통해 출력해야 한다. -->
# 취미 : <%=Arrays.toString(hobby) %> <br>
# 지역 : <%=region %> <br>
# 자기소개 : <%=intro %> <br>
# 이메일 : <%=email %> <br>
</p>
</body>
</html>
<form> 태그로 폼을 만들고, 내부의 입력 값의 경우 타입을 이름은 text, 비밀번호는 password 로 주고 태그는 <input> 를 사용했다. 그리고 다른 페이지에 전송할 때는 name 에 입력한 값이 구분 용도로 전송된다.
checkbox 의 경우 name 속성으로 그룹을 묶고, value 속성에 속성값을 줌으로써 다른 페이지에 어떤 항목이 체크되었는지 전달할 수 있다.
참고로 라디오 버튼이 아닌 체크박스의 경우 문자열 배열의 형태로 전달되므로 받는 쪽에서는 getParameter() 함수로 받아오기 위해 String[] 형태의 자료형을 선언해 줄 필요가 있다.
그리고 현재의 경우 GET 방식을 사용하고 있으므로 URL 뒤에 모든 데이터가 붙어서 전달되는데, 이러한 경우 민감한 정보 (패스워드) 등이 그대로 노출되므로 POST 방식을 사용하는 것이 좋다.
POST 방식으로 전송하기
req_post_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%--
- 전송방식을 post 로 사용하기 위해서는 form 태그가 반드시 필요하다.
- form 태그의 method 라는 속성을 "post"로 설정하면,
요청 방식이 post 방식으로 전송된다. (기본값은 get)
--%>
<form action="req_post_take.jsp" method="post">
- 아이디 : <input type="text" name="id" size="10"> <br>
- 비밀번호 : <input type="password" name="pw" size="10"> <br>
- 이름 : <input type="text" name="name" size="10>"> <br>
<input type="submit" value="확인">
</form>
</body>
</html>
req_post_take.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// post 방식을 통해 전달된 데이터의 한글 처리는 메서드를 사용해 처리해야 한다.
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String name = request.getParameter("name");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
아이디 : <%= id%> <br>
비밀번호 : <%= pw%> <br>
이름 : <%= name%>
</body>
</html>
POST 방식은 form 태그가 반드시 필요하고, method="post" 와 같이 속성을 반드시 지정해 주어야 한다. 이렇게 지정하는 경우 더 이상 전달하려는 값이 URL 뒤에 붙어서 전달되지 않는다.
그리고 POST 방식으로 전달된 데이터의 한글 처리를 따로 하지 않으면, 글씨가 깨져서 나오므로 setCharacterEncoding() 함수를 사용해 출력 전에 미리 처리를 해 주어야 한다.
연습 문제
req_album.jsp 페이지를 다음과 같이 구성한다.
라디오 버튼을 선택하고 확인 버튼을 누르는 경우 req_album_result.jsp 페이지로 연결되며, ?title=sel1 혹은 ?title=sel2 (sel값의 경우 다른 값으로 대체해도 됨) 에 페이지에 보이는 내용을 바꾼다.
req_album.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table {
width: 800px;
}
tr {
text-align: center;
}
img {
display:block;
margin:auto;
}
</style>
</head>
<body>
<form action="req_album_result.jsp">
<table border="1">
<tr>
<th></th>
<th>앨범 커버</th>
<th>가수</th>
<th>앨범 제목</th>
<th>발매일</th>
</tr>
<tr>
<td><input type="radio" name="title" value="album1"></td>
<td><img alt="album1" src="img/broken.png" width="100px" height="100px"></td>
<td>dj TAKA feat.AiMEE</td>
<td>Reflec Beat Original SoundTrack</td>
<td>2011</td>
</tr>
<tr>
<td><input type="radio" name="title" value="album2"></td>
<td><img alt="album2" src="img/wuv_u.png" width="100px" height="100px"></td>
<td>Kors K</td>
<td>Reflec Beat Original SoundTrack</td>
<td>2011</td>
</tr>
<tr>
<td colspan="5"><input type="submit" value="확인"></td>
</tr>
</table>
</form>
</body>
</html>
req_album_result.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String title = request.getParameter("title");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
</style>
</head>
<body>
<% if (title.equals("album1")) { %>
<div align=center>
<h2>선택하신 앨범 정보</h2>
<hr>
<p>당신이 선택하신 앨범은 dj TAKA feat.AiMEE 의 <strong>Broken</strong>입니다.</p>
<hr>
<h3>타이틀 곡 뮤직 비디오</h3>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/C50aAanukdY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<% } else if (title.equals("album2")) { %>
<div align=center>
<h2>선택하신 앨범 정보</h2>
<hr>
<p>당신이 선택하신 앨범은 Kors K 의 <strong>Wuv U</strong>입니다.</p>
<hr>
<h3>타이틀 곡 뮤직 비디오</h3>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/hl8JiXj8f30" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<% } %>
</body>
</html>
submit 버튼 말고도, <a href="req_album_result.jsp?title=sel1"> 과 같이, 텍스트에다 링크를 닮으로서 클릭만으로 해당 페이지로 연결되도록 할 수도 있다.
Response 객체의 이해
- 웹 브라우저의 요청에 응답하는 것을 response 라고 한다.
- 이러한 응답의 정보를 가지고 있는 객체를 response 객체라 한다.
| 메서드 | 기능 |
|---|---|
| getCharacterEncoding() | 응답할 때의 문자의 인코딩 형태를 구합니다. |
| addCookie(Cookie c) | 쿠키를 지정합니다. |
| sendRedirect(URL) | 지정한 URL로 이동합니다. |
sendRedirect() 함수를 알기 전에는, getParameter() 함수를 사용해서 한 페이지에 (연습문제를 기준으로 한다면) 모든 가수에 대한 정보를 때려박은 후 판단해야 한다.
그렇게 되면 한 페이지 내의 내용이 방대해지는데다가, 혹여 여러 항목 중 하나만 문제를 일으켜도 문제가 없는 나머지 항목 전체를 이용하지 못하게 되는 문제가 생길 수 있다.
따라서 check.jsp 와 같은 java 코드만 적혀 있는 요청만 판단하는 파일을 만들고, sendRedirect() 함수를 통해 다른 페이지로 보내게 만들 수 있다.
지금은 아직 배우지 않았지만 나중엔 MVC 패턴 (Model, View, Controller) 을 통해서 Java 코드와 HTML 코드를 완전히 분리해 줄 것이다.
HTML 과 Java 코드를 분리하여 작성하기
아래와 같은 jsp 파일을 생성한다.
res_login_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#login-btn {
width: 60px;
height: 50px;
padding: 2px;
}
</style>
</head>
<body>
<div align="center" style="border: 2px dotted red; padding:30px; width: 700px">
<h3>sendRedirect 연습!</h3>
<form action="res_login_con.jsp" method="post">
<table border="1">
<tr>
<td>
<input type="text" name="id" size="10" placeholder="ID를 입력">
</td>
<td rowspan="2">
<input id="login-btn" type="submit" value="로그인">
</td>
</tr>
<tr>
<td>
<input type="password" name="pw" size="10" placeholder="PW를 입력">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>그리고 아래와 같은 요구사항을 구현하고, 필요한 페이지도 구현한다.
res_login_con.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%--
- 이 페이지는 form에서 넘어온 아이디와 비밀번호값을
받아서 처리하는 페이지입니다.
- 아이디가 'abc1234', 비밀번호는 'aaa1111'이라고 가정합니다.
- 아이디가 일치하지 않는 경우 "res_id_fail.jsp"로 리다이렉팅해서
"존재하지 않는 회원입니다." 를 브라우저에 출력하시고 다시 로그인 폼으로 돌아갈 수 있는
링크를 제공하세요.
- 아이디가 일치할 경우, 비밀번호도 확인해서 비밀번호가 틀렸을 경우
"res_pw_fail.jsp"로 리다이렉팅해서, "비밀번호가 틀렸습니다." 를 출력 후
폼으로 돌아갈 수 있는 링크를 제공하세요.
- 아이디, 비밀번호가 모두 일치하는 경우 "res_welcome.jsp"로 리다이렉팅해서
"회원님 반갑습니다!" 를 출력하세요.
--%>
<%
String id = request.getParameter("id");
String pw = request.getParameter("pw");
if (id.equals("abc1234")) {
if (pw.equals("aaa1111")) {
response.sendRedirect("res_welcome.jsp");
} else {
response.sendRedirect("res_pw_fail.jsp");
}
} else {
response.sendRedirect("res_id_fail.jsp");
}
%>res_id_fail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>존재하지 않는 회원입니다.</h1>
<a href="res_login_form.jsp">로그인 화면으로 돌아가기</a>
</body>
</html>res_pw_fail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>비밀번호가 틀렸습니다.</h1>
<a href="res_login_form.jsp">로그인 화면으로 돌아가기</a>
</body>
</html>res_welcome.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>회원님 반갑습니다!</h1> </body> </html>
쿠키 세션
쿠키
-
웹 브라우저에서 서버로 어떤 데이터를 요청하면, 서버 측에서는 알맞은 로직을 수행한 후 데이터를 웹 브라우저에 응답한다.
-
그리고 http 프로토콜은 응답 후에 웹 브라우저와의 관계를 종료한다.
-
연결이 끊겼을 때, 어떤 정보를 지속적으로 유지하기 위한 수단으로 쿠키라는 방식을 사용한다.
-
쿠키는 서버에서 생성하며, 서버가 아닌 클라이언트측(local)에 정보를 저장한다.
-
서버에서 요청할 때 마다 쿠키의 속성값을 참조 또는 변경할 수 있다.
-
쿠키는 개당 4kb로 용량이 제한적이며, 300개까지(1.2MB) 데이터 정보를 가질 수 있다.
-
쿠키 문법 : 쿠키 클래스에서 쿠키 생성 -> setter 메서드로 쿠키의 속성 설정 -> response 객체에 쿠키 탑재 -> 로컬 환경에 저장
타 페이지로 리다이렉트 되면서 기존의 response 객체는 소멸되기 때문에, 다른 페이지에서 이전 페이지의 어떠한 정보 (예. 아이디, 비밀번호) 등을 가져오려고 해도 가져올 수 없다.
쿠키를 브라우저에서 아예 사용하지 못 하도록 해 보면, Naver 등의 사이트에 접속하여 로그인 시도를 하려고 하면 로그인이 불가능해진다.
타 페이지를 이동하면서도 로그인 상태를 유지해 주고 싶어도, 유지가 불가능해지기 때문이다.
