1. データベーステーブルの作成
まずはログイン情報を格納するテーブルを作成します。パスワードはプレーンテキストですが、本番環境ではハッシュ化を推奨します。
CREATE TABLE user_credential (
identity_card VARCHAR(18) PRIMARY KEY,
pass_code VARCHAR(64) NOT NULL
);2. Javaエンティティクラス
テーブルに対応するPOJOクラスを定義します。フィールド名をテーブルカラムに合わせます。
package com.example.entity;
public class UserCredential {
private String identityCard;
private String passCode;
@Override
public String toString() {
return "UserCredential{" +
"identityCard='" + identityCard + '\'' +
", passCode='" + passCode + '\'' +
'}';
}
public String getIdentityCard() { return identityCard; }
public void setIdentityCard(String identityCard) { this.identityCard = identityCard; }
public String getPassCode() { return passCode; }
public void setPassCode(String passCode) { this.passCode = passCode; }
}3. ログイン画面（login.html）
ユーザーがID（身分証番号）とパスワードを入力するフォームです。CSSは青色系で統一し、レスポンシブに配慮しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ログイン</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
width: 350px;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1.2rem;
}
label {
display: block;
margin-bottom: 0.3rem;
color: #555;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
transition: border 0.2s;
}
input:focus {
border-color: #667eea;
outline: none;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background: #667eea;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background 0.2s;
}
input[type="submit"]:hover {
background: #5a67d8;
}
.register-link {
text-align: center;
margin-top: 1rem;
}
.register-link a {
color: #667eea;
text-decoration: none;
}
</style>
</head>
<body>
<div class="login-card">
<h2>ログイン</h2>
<form action="/eldersystem/login" method="post">
<div class="form-group">
<label for="idCard">身分証番号</label>
<input type="text" id="idCard" name="idCard" required>
</div>
<div class="form-group">
<label for="pass">パスワード</label>
<input type="password" id="pass" name="pass" required>
</div>
<input type="submit" value="ログイン">
</form>
<div class="register-link">
<a href="register.html">アカウントをお持ちでない方はこちら</a>
</div>
</div>
</body>
</html>4. ログイン処理サーブレット
MyBatisを使用してデータベース検証を行います。成功時・失敗時ともに3秒後にリダイレクトする簡単な画面を出力します。
package com.example.web;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import com.example.mapper.UserMapper;
import com.example.entity.UserCredential;
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 java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
String idCard = req.getParameter("idCard");
String pass = req.getParameter("pass");
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory factory = new SqlSessionFactoryBuilder().build(inputStream);
SqlSession session = factory.openSession();
UserMapper mapper = session.getMapper(UserMapper.class);
UserCredential credential = mapper.findUser(idCard, pass);
PrintWriter out = resp.getWriter();
session.close();
if (credential != null) {
out.println("<html><body>");
out.println("<h2>ログイン成功</h2>");
out.println("<p>3秒後にメイン画面へ遷移します...</p>");
out.println("<script>setTimeout(function(){ window.location='./main.html'; },3000);</script>");
out.println("</body></html>");
} else {
out.println("<html><body>");
out.println("<h2>ログイン失敗：IDまたはパスワードが間違っています</h2>");
out.println("<p>3秒後にログイン画面に戻ります...</p>");
out.println("<script>setTimeout(function(){ window.location='./login.html'; },3000);</script>");
out.println("</body></html>");
}
}
}5. メイン画面（main.html）
ログイン後のメインページです。各機能へのリンクと、右上に簡易検索ボックスを配置しています。色調はログイン画面のグラデーションに合わせ、青系で統一しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メイン画面 - 高齢者評価システム</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: 'Segoe UI', sans-serif;
background: #f0f4ff;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 2px solid #667eea;
margin-bottom: 30px;
}
.logo img {
height: 50px;
}
.search-box {
display: flex;
gap: 8px;
}
.search-box input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
}
.search-box button {
padding: 8px 16px;
background: #667eea;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
.search-box button:hover {
background: #5a67d8;
}
.nav-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.nav-item {
display: block;
background: white;
padding: 30px 20px;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
text-decoration: none;
color: #333;
font-size: 18px;
transition: transform 0.2s, box-shadow 0.2s;
}
.nav-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="https://www.jkheb2030.org.cn/Content/peixun/img/logo.png" alt="logo">
</div>
<div class="search-box">
<input type="text" placeholder="キーワード検索...">
<button>検索</button>
</div>
</div>
<div class="nav-grid">
<a href="info-import.html" class="nav-item">高齢者情報取込</a>
<a href="ability-assessment.html" class="nav-item">能力定期評価</a>
<a href="multi-query.html" class="nav-item">多条件検索</a>
<a href="statistics.html" class="nav-item">能力データ統計</a>
<a href="export.html" class="nav-item">データエクスポート</a>
</div>
</body>
</html>これでログイン機能とメイン画面の基本的な実装が完了しました。実際の運用ではパスワードの暗号化やセッション管理など、セキュリティ面の強化が必要です。