前回までの内容はこちら
【JavaWebアプリケーション#1】概要と学べること
※内容名は略称しています。
【JavaWebアプリケーション#2】基本的なログイン機能
【JavaWebアプリケーション#3】登録データをブラウザで表示
【JavaWebアプリケーション#4】データの登録機能
【JavaWebアプリケーション#5】データの更新機能
【JavaWebアプリケーション#6】データの削除機能
今回はログアウト機能を作成していきます。
機能的には難しく考える必要はなく、ログイン成功時に生成していた管理者のセッションを破棄（無効化）すれば良いというシンプルなものになります。
また、ログアウトはどの画面でも行える方が効率的です。そのため、全画面（ログイン画面を除く）に「ログアウト」リンクを作成しますが、全画面にいちいちログアウト用のリンクを作成するのは面倒です。
そのため、全画面のヘッダー部分（各画面の一番上の位置）に「ログアウト」リンクが表示されたヘッダー画面を作成します。それを全画面で使い回すようにします。ここではその仕様を「画面の部品化」とでも呼び名をつけておきます。
ヘッダー画面の作成
「ヘッダー画面」のイメージ図
ではヘッダー画面を作成していきます（画面の部品化）。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-5">
<div class="collapse navbar-collapse justify-content-end" id="navbarNav4">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<%= request.getContextPath() %>/Logout" onclick="return Logout_Dialog()">ログアウト</a>
</li>
</ul>
</div>
</nav>
</body>
<script type="text/javascript">
function Logout_Dialog(){
var res = confirm("ログアウトします。よろしいですか?");
if(res){
return true;
} else {
return false;
};
};
</script>
</html>13行目：「ログアウト」リンクを押下し確認ダイアログを表示させ、「OK」を選択すると、セッションを破棄する「Logout.java」に処理を移します。
ログアウト機能の作成
ではログアウト機能を作成していきます。
パッケージ名：servlet / クラス名：Logout.java
package servlet;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* Servlet implementation class Logout
*/
@WebServlet("/Logout")
public class Logout extends HttpServlet {
private static final long serialVersionUID = 1L;
// ログアウト処理の実装
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 文字コードの設定
response.setContentType("text/html; charset=UTF-8");
request.setCharacterEncoding("UTF-8");
// セッションオブジェクトを作成
// 引数(false) → セッションがなければnullを返す
HttpSession admin_session = request.getSession(false);
if(admin_session != null) {
System.out.println("セッションが存在しています。そのため、セッションを破棄します。");
// セッションを破棄する
admin_session.invalidate();
} else {
System.out.println("セッションが存在していません。");
}
admin_session = request.getSession(false);
if(admin_session == null) {
System.out.println("セッションが破棄されました。");
};
RequestDispatcher dispatcher =
request.getRequestDispatcher("WEB-INF/jsp/login.jsp");
dispatcher.forward(request, response);
}
// 使用しません
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}28行目：セッションオブジェクト（admin_session）を作成し、セッションが存在すればadmin_session.invalidate()で、セッションを破棄します。またセッションが存在している状態と破棄された状態をコンソール上に表示させるようにしています。
これでログアウト機能は作成できました。
ヘッダー画面の追加
最後にヘッダー画面を全画面（ログイン画面を除く）に追加していきます。
これは「画面の部品化」で実現でき、「includeアクション」タグを使用します。
追記：17行目（customer_list.jsp）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.lang.*" %>
<%@ page import="java.util.List" %>
<%@ page import="object.Customer" %>
<% List<Customer> customer_list = (List<Customer>)request.getAttribute("customer"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顧客一覧画面</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<jsp:include page="header.jsp"/>
<div class="mx-auto text-center" style="width: 70%;">
<h2 class="text-center mb-3">顧客一覧</h2>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">顧客ID</th>
<th scope="col">お客様名</th>
<th scope="col">住所</th>
<th scope="col">登録日</th>
<th scope="col">更新日</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<% for(Customer cus : customer_list) { %>
<tr>
<td><%= cus.getCustomer_id() %></td>
<td><%= cus.getName() %></td>
<td><%= cus.getAddress() %></td>
<td><%= cus.getRegistered_time() %></td>
<td><%= cus.getUpdated_time() %></td>
<!-- JSTLを使用して顧客IDのデータをリンクの -->
<!-- パラメーターに設定してサーブレットで取得する -->
<c:url var="update" value="/CustomerUpdateServlet">
<c:param name="id" value="<%= String.valueOf(cus.getCustomer_id()) %>"></c:param>
</c:url>
<c:url var="delete" value="/CustomerDeleteServlet">
<c:param name="id" value="<%= String.valueOf(cus.getCustomer_id()) %>"></c:param>
</c:url>
<td><a href="${update}" >編集</a> | <a href="${delete}" onclick="return Delete_Dialog()">削除</a></td>
</tr>
<% } %>
</tbody>
</table>
<a href="<%= request.getContextPath() %>/CustomerRegisterServlet">顧客登録画面へ</a>
</div>
</body>
<script type="text/javascript">
function Delete_Dialog(){
var res = confirm("選択した顧客データを削除します。よろしいですか?");
if(res){
return true;
} else {
return false;
};
};
</script>
</html>追記：12行目（customer_register.jsp）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>顧客登録</title>
</head>
<body>
<jsp:include page="header.jsp"/>
<div class="mx-auto" style="width: 300px;">
<h1 class="mb-3" style="text-align: center">顧客登録画面</h1>
<form action="/CustomerManagement/CustomerRegisterServlet" method="post">
<div class="mb-3">
<label for="customerName" class="form-label">お客様名</label>
<input type="text" class="form-control" id="customerName" name="customer_name" required>
</div>
<div class="mb-3">
<label for="address" class="form-label">住所</label>
<input type="text" class="form-control" id="address" name="customer_address" required>
</div>
<button type="submit" class="btn btn-primary">登録する</button>
</form>
<a href="#" onclick="window.history.back(); return false;" class="btn btn-primary mt-3">顧客一覧画面へ</a>
</div>
</body>
</html>追記：14行目（customer_update.jsp）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="object.Customer" %>
<% Customer customer = (Customer)request.getAttribute("customer"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>顧客編集</title>
</head>
<body>
<jsp:include page="header.jsp"/>
<div class="mx-auto" style="width: 300px;">
<h1 class="mb-3" style="text-align: center">顧客編集画面</h1>
<form action="/CustomerManagement/CustomerUpdateServlet" method="post">
<input type="hidden" name="id" value="<%= customer.getCustomer_id() %>">
<div class="mb-3">
<label for="name" class="form-label">お客様名</label>
<input type="text" class="form-control" id="name" name="name" value="<%= customer.getName() %>" required>
</div>
<div class="mb-3">
<label for="address" class="form-label">住所</label>
<input type="text" class="form-control" id="address" name="address" value="<%= customer.getAddress() %>" required>
</div>
<button type="submit" class="btn btn-primary">編集する</button>
</form>
<a href="#" onclick="window.history.back(); return false;" class="btn btn-primary mt-3">顧客一覧画面へ</a>
</div>
</body>
</html>これで全画面にヘッダー画面が作成できました。「ログアウト」リンク押下後、ログアウト機能が実行されます。
ブラウザ上で確認
実際に確認してみましょう。
「顧客一覧画面」にて「ログアウト」リンクをクリック
確認ダイアログの「OK」を選択
ログイン画面に遷移する
セッションが破棄されたかは、Eclipse上のコンソールを確認
これでログアウト機能の作成ができました。今回は以上となります。
コメント