준비중..
07 로그인/로그아웃 구현하기
# 로그인/로그아웃 페이지 만들기
request, response, 그리고 form 태그 사용한 로그인/로그아웃 페이지만들기!!
---
<a name="flow-design"></a>
### 흐름 설계
먼저 페이지의 흐름 설계 입니다. 페이지는 아래와 같이 구성됩니다.
+ **form.jsp**: 사용자 정보를 입력받는 페이지
+ **authentication.jsp**: 사용자 인증과정을 처리하는 페이지
+ **welcome.jsp**: 인증 성공시 보여지는 월컴 페이지
진행흐름은 다음과 같습니다. **form.jsp**에서 사용자 정보를 입력하면, 입력 데이터가 **authentication.jsp**로 넘겨집니다. 넘겨진 데이터를 토대로 사용자 인증여부가 결정됩니다. 인증 성공시 **welcome.jsp**로 이동이 되고, 인증 실패시 **form.jsp**로 되돌아가게 됩니다.
---
<a name="ui-design"></a>
### 화면 설계
다음으로 화면을 설계합니다.**authentication.jsp**의 경우 보여지는 화면이 없기 때문에 설계하지 않습니다.
---
<a name="ui-implements"></a>
### 화면 구현
form.jsp
```jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<% if (request.getParameter("error") == null) { %>
<h1>Please Login..</h1>
<% } else { %>
<h1><%= request.getParameter("error") %></h1>
<% } %>
<form action="authentication.jsp" method="post">
<label>ID: </label>
<input name="id" type="text"><br>
<label>PW: </label>
<input name="pw" type="password"><br>
<input type="submit" value="로그인">
</form>
</body>
</html>
```
authentication.jsp
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 0: 인증 가능 사용자 및 비밀번호 목록.
String[] users = {"ninja", "knight", "elf"};
String[] passwords = {"ak74", "m4", "pgs11"};
// 1: form 으로부터 전달된 데이터를 변수에 저장.
String id = request.getParameter("id");
String pw = request.getParameter("pw");
// 2: 사용자 인증
String redirectUrl = "form.jsp?error=login-failed.."; // 인증 실패시 요청 될 url
for (int i = 0; i < users.length; i++) {
if (users[i].equals(id) && passwords[i].equals(pw))
redirectUrl = "welcome.jsp?id=" + id; // 인증 성공 시 재 요청 url
}
response.sendRedirect(redirectUrl);
%>
```
welcome.jsp
```
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1><%= request.getParameter("id") %>님 <small>반갑습니다.</small></h1>
<a href="form.jsp">로그아웃</a>
</body>
</html>
```
---
<a name="result"></a>
### 결과 화면
로그인 성공
로그인 실패
로그아웃
---
### 핵심 키워드
+ [흐름 설계](#flow-design)
+ [화면 설계](#ui-design)
+ [화면 구현](#ui-implements)
+ [결과 화면](#result)
---
### Next..
session 객체를 사용한 로그인/로그아웃 보완