2026_09_5H_Spring_KIZAKI/sharebooks
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ADD]:トップメニューから各画面へ遷移する処理を実装

Browse Source
This commit is contained in:
h-seya
2026-09-17 14:20:34 +09:00
parent d002469a41
commit dc5c652d35
16 changed files with 7008 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

974
src/main/resources/templates/bookInsert.html Normal file
View File

@@ -0,0 +1,974 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【図書】登録内容入力</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Yu Gothic", "Meiryo", sans-serif;
}
body {
background: #f5f6fa;
color: #333;
}
/* =========================
Header
========================= */
.header {
height: 60px;
background: #fff;
border-bottom: 1px solid #d9dee5;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.logo {
font-size: 18px;
font-weight: bold;
color: #1d4075;
}
.header-right {
display: flex;
align-items: center;
gap: 18px;
}
/* 通知 */
.notification {
position: relative;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.notification:hover {
background-color: #f1f5fa;
transform: translateY(-1px);
}
.notification-badge {
position: absolute;
width: 7px;
height: 7px;
top: 2px;
right: 2px;
background: #d71920;
border-radius: 50%;
border: 1px solid #fff;
}
/* サインイン中アカウント */
.account {
font-size: 13px;
color: #555;
padding: 7px 9px;
border-radius: 4px;
cursor: default;
transition: background-color 0.2s ease, color 0.2s ease;
}
.account:hover {
background-color: #f1f5fa;
color: #1d4075;
}
/* ログアウト */
.logout-btn {
padding: 8px 16px;
border: 1px solid #d0d7de;
background: #fff;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.logout-btn:hover {
background-color: #f1f5fa;
border-color: #1d4075;
color: #1d4075;
}
.logout-btn:active {
background-color: #e5edf7;
}
/* =========================
Layout
========================= */
.wrapper {
display: flex;
min-height: calc(100vh - 60px);
}
/* =========================
Sidebar
========================= */
.sidebar {
width: 220px;
background: #002b66;
color: #fff;
}
.sidebar-title {
padding: 18px;
font-size: 14px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.menu {
list-style: none;
}
.menu li {
padding: 16px 20px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.menu li:hover {
background: #0c438f;
}
.menu li.active {
background: #1659d4;
}
/* =========================
Main
========================= */
.main {
flex: 1;
padding: 25px;
min-width: 0;
}
/* =========================
Breadcrumb
========================= */
.breadcrumb {
font-size: 12px;
color: #6d7b91;
margin-bottom: 15px;
}
/* =========================
Page title
========================= */
.page-title {
font-size: 42px;
color: #173a70;
margin-bottom: 8px;
}
.description {
font-size: 14px;
margin-bottom: 5px;
}
.required-text {
color: #d9534f;
font-size: 12px;
margin-bottom: 15px;
}
/* =========================
Card
========================= */
.card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 4px;
}
.card-header {
padding: 15px;
border-bottom: 1px solid #e2e8f0;
font-weight: bold;
}
.card-body {
padding: 20px;
}
/* =========================
Form
縦積み
========================= */
.form-fields {
display: flex;
flex-direction: column;
gap: 18px;
}
/* =========================
Form group
========================= */
.form-group {
display: flex;
align-items: flex-start;
width: 100%;
}
.form-group label {
width: 150px;
flex-shrink: 0;
font-size: 13px;
font-weight: bold;
padding-top: 10px;
}
.required {
color: #d9534f;
font-size: 11px;
}
.optional {
color: #555;
font-size: 11px;
}
.input-area {
flex: 1;
max-width: 700px;
}
/* =========================
Input
========================= */
input[type="text"],
input[type="date"],
select,
textarea {
width: 100%;
border: 1px solid #d9dee5;
border-radius: 4px;
padding: 10px;
font-size: 13px;
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #1659d4;
box-shadow: 0 0 0 2px rgba(22, 89, 212, .1);
}
input[readonly] {
background: #f3f5f8;
}
/* =========================
Help
========================= */
.help {
font-size: 11px;
color: #777;
margin-top: 4px;
}
/* =========================
Category
========================= */
.inline {
display: flex;
gap: 10px;
}
.inline select {
flex: 1;
}
.add-btn {
white-space: nowrap;
padding: 10px 16px;
border: 1px solid #d0d7de;
background: #fff;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.add-btn:hover {
background-color: #f1f5fa;
border-color: #1659d4;
color: #1659d4;
}
.add-btn:active {
background-color: #e5edf7;
}
/* =========================
Optional section
========================= */
.optional-section {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #e2e8f0;
}
.optional-title {
font-size: 14px;
font-weight: bold;
color: #333;
margin-bottom: 18px;
}
/* =========================
Textarea
========================= */
textarea {
resize: none;
height: 90px;
}
.counter {
text-align: right;
font-size: 11px;
color: #888;
margin-top: 3px;
}
/* =========================
Notice
========================= */
.notice {
margin-top: 20px;
padding: 18px;
background: #fffaf0;
border-top: 1px solid #efe2b5;
}
.notice-title {
font-weight: bold;
margin-bottom: 8px;
}
.notice ul {
margin-left: 20px;
font-size: 13px;
}
.notice li {
margin-bottom: 5px;
}
/* =========================
Buttons
========================= */
.button-area {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.btn {
min-width: 140px;
padding: 11px 20px;
border-radius: 4px;
border: 1px solid #d0d7de;
background: #fff;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
display: inline-block;
text-decoration: none;
color: #333;
text-align: center;
}
.btn:hover {
background-color: #f1f5fa;
border-color: #1d4075;
color: #1d4075;
}
.btn:active {
transform: translateY(1px);
background-color: #e5edf7;
}
.btn-primary {
background: #1659d4;
color: #fff;
border: none;
}
.btn-primary:hover {
background: #0f47ae;
border-color: #0f47ae;
color: #fff;
}
.btn-primary:active {
background: #0c3d96;
}
/* =========================
Responsive
========================= */
@media (max-width : 700px) {
.header {
padding: 0 12px;
}
.logo {
font-size: 15px;
}
.account {
display: none;
}
.sidebar {
width: 180px;
}
.main {
padding: 18px;
}
.page-title {
font-size: 30px;
}
.form-group {
flex-direction: column;
}
.form-group label {
width: 100%;
padding-top: 0;
margin-bottom: 6px;
}
.input-area {
width: 100%;
max-width: none;
}
.inline {
flex-direction: column;
}
.button-area {
flex-direction: column;
gap: 10px;
}
.right-buttons {
width: 100%;
}
.right-buttons .btn {
flex: 1;
}
}
</style>
</head>
<body>
<!-- =========================
Header
========================= -->
<header class="header">
<div class="logo">
📖 ShareBooks
</div>
<c:if test="${not empty errorMessage}">
<div style="color: red; margin-bottom: 15px;">${errorMessage}</div>
</c:if>
<div class="header-right">
<!-- サインイン中アカウント -->
<span class="account"> 山田 太郎 さん（管理者） </span>
<!-- ログアウト -->
<form method="post" action="${pageContext.request.contextPath}/logout" style="display: inline;">
<button type="submit" class="logout-btn" onclick="return confirmLogout()">ログアウト</button>
</form>
</div>
</header>
<div class="wrapper">
<!-- =========================
Sidebar
========================= -->
<aside class="sidebar">
<div class="sidebar-title">管理者画面</div>
<ul class="menu">
<li onclick="goTopMenu()">🏠 トップメニュー</li>
<li class="active">➕ 新規図書登録</li>
<li onclick="goToBook()">📚 社内図書一覧</li>
</ul>
</aside>
<!-- =========================
Main
========================= -->
<main class="main">
<div class="breadcrumb">トップメニュー ＞ 新規図書登録 ＞ 新規図書登録内容入力</div>
<h1 class="page-title">新規図書登録内容入力</h1>
<div class="description">新しく図書を登録します。
必要事項を入力し、「確認へ」ボタンを押してください。</div>
<div class="required-text">（※）は必須項目です。</div>
<!-- =========================
Form
========================= -->
<form method="post" action="${pageContext.request.contextPath}/insertBook">
<div class="card">
<div class="card-header">図書情報</div>
<div class="card-body">
<!-- =========================
必須項目
========================= -->
<div class="form-fields">
<!-- 図書管理ID -->
<div class="form-group">
<label> 図書管理ID <span class="required"> （※） </span>
</label>
<div class="input-area">
<input type="text" name="bookManageId" value="${bookManageId }" readonly>
<div class="help">※自動採番されます（例：BK0001、BK0002 ...）</div>
</div>
</div>
<!-- 登録日 -->
<div class="form-group">
<label> 登録日 </label>
<div class="input-area">
<input type="text" name="registeredAt" value="${registeredAt }" readonly>
<div class="help">※自動取得されます</div>
</div>
</div>
<!-- タイトル -->
<div class="form-group">
<label> タイトル <span class="required"> （※） </span>
</label>
<div class="input-area">
<input type="text" name="title" value="${title}" placeholder="タイトルを入力してください">
</div>
</div>
<!-- 著者名 -->
<div class="form-group">
<label> 著者名 <span class="required"> （※） </span>
</label>
<div class="input-area">
<input type="text" name="author" value="${author}" placeholder="著者名を入力してください">
</div>
</div>
<!-- カテゴリ -->
<div class="form-group">
<label> カテゴリ <span class="required"> （※） </span>
</label>
<div class="input-area">
<div class="inline">
<select name="categoryId">
<option value="">選択してください</option>
<c:forEach var="category" items="${categories}">
<option value="${category.bookCategoryId}" <c:if
test="${category.bookCategoryId == categoryId}">
selected
</c:if>>
${category.bookCategoryName}</option>
</c:forEach>
</select>
<!-- <button-->
<!-- type="button"-->
<!-- class="add-btn">-->
<!-- ＋ 新規カテゴリ追加-->
<!-- </button>-->
</div>
</div>
</div>
<!-- サブカテゴリ -->
<div class="form-group">
<label> サブカテゴリ <span class="required"> （※） </span>
</label>
<div class="input-area">
<select name="bookSubcategoryId" id="bookSubcategoryId">
<option value="">選択してください</option>
<c:forEach var="subcategory" items="${subcategories}">
<option value="${subcategory.bookSubcategoryId}"
data-category-id="${subcategory.bookCategoryId}" <c:if
test="${subcategory.bookSubcategoryId == bookSubcategoryId}">
selected
</c:if>>
${subcategory.bookSubcategoryName}</option>
</c:forEach>
</select>
</div>
</div>
<!-- ISBN -->
<div class="form-group">
<label> ISBN <span class="required"> （※） </span>
</label>
<div class="input-area">
<input type="text" name="isbn" value="${isbn}" placeholder="例：978-4-1234-5678-9">
<div class="help">※ハイフン（-）を含む形式で入力してください</div>
</div>
</div>
<!-- 保管場所 -->
<div class="form-group">
<label> 保管場所 <span class="required"> （※） </span>
</label>
<div class="input-area">
<select name="locationId">
<option value="">選択してください</option>
<c:forEach var="location" items="${locations}">
<option value="${location.locationId}" <c:if
test="${location.locationId == locationId}">
selected
</c:if>>
${location.locationName}</option>
</c:forEach>
</select>
</div>
</div>
<!-- 本の状態 -->
<div class="form-group">
<label> 本の状態 <span class="required"> （※） </span>
</label>
<div class="input-area">
<select name="condition">
<option value="">選択してください</option>
<option value="1">新品同様：ほぼ未使用</option>
<option value="2">良好：目立つ傷や汚れ無し</option>
<option value="3">使用感あり：多少の折れ、擦れあり</option>
<option value="4">傷みあり：目立つ傷、汚れ、書き込みあり</option>
</select>
</div>
</div>
</div>
<!-- =========================
任意項目
========================= -->
<div class="optional-section">
<div class="optional-title">任意項目</div>
<div class="form-fields">
<!-- 出版社 -->
<div class="form-group">
<label> 出版社 <span class="optional"> （任意） </span>
</label>
<div class="input-area">
<input type="text" name="publisher" value="${publisher}"
placeholder="出版社を入力してください">
</div>
</div>
<!-- 出版日 -->
<div class="form-group">
<label> 出版日 <span class="optional"> （任意） </span>
</label>
<div class="input-area">
<input type="date" name="publishDate" value="${publishDate}">
</div>
</div>
<!-- 寄贈者 -->
<div class="form-group">
<label> 寄贈者 <span class="optional"> （任意） </span>
</label>
<div class="input-area">
<input type="text" name="donorId" value="${donorId}"
placeholder="社員ID（半角）を入力してください">
<div class="help">※寄贈図書の場合に入力してください</div>
</div>
</div>
<!-- 備考 -->
<div class="form-group">
<label> 備考 <span class="optional"> （任意） </span>
</label>
<div class="input-area">
<textarea name="description" maxlength="200"
placeholder="備考を入力してください（例：付属品の有無、特記事項など）">${description}</textarea>
<div class="counter">0 / 200</div>
</div>
</div>
</div>
</div>
<!-- =========================
注意事項
========================= -->
<div class="notice">
<div class="notice-title">入力に関する注意</div>
<ul>
<li>図書一覧に表示する内容を入力してください。</li>
<li>ISBNはハイフン（-）を含む形式で入力してください。</li>
<li>登録日および図書管理IDは、 登録時に自動で設定されます。</li>
<li>出版日は任意項目のため、 不明な場合は空欄でも登録できます。</li>
</ul>
</div>
</div>
</div>
<!-- =========================
Buttons
========================= -->
<div class="button-area">
<a href="${pageContext.request.contextPath}/BookServlet" class="btn"
style="display: inline-flex; align-items: center; justify-content: center; text-decoration: none;">
図書一覧へ戻る </a>
<div class="right-buttons">
<button type="reset" class="btn">クリア</button>
<button type="submit" class="btn btn-primary">確認へ</button>
</div>
</div>
</form>
</main>
</div>
<script>
function confirmLogout() {
const result = window.confirm("本当にログアウトしてよろしいですか？");
return result;
}
function goTopMenu() {
location.href = "${pageContext.request.contextPath}/topmenu.jsp";
}
function goToBook() {
location.href = "${pageContext.request.contextPath}/book.jsp";
}
</script>
</body>
</html>