ITを学ぶなら
｢テックプロジン｣

Developer

魁！小野の塾　小さな管理機能を作ってみようの巻　第１０話
2021.03.23
Lv2

魁！小野の塾　小さな管理機能を作ってみようの巻　第１０話

ono

小さな管理機能を作ってみよう　第１０話

初心者向け、PHPプログラム構築講座です。
初心者といっても、PHPの勉強を少し行い、LAMP環境が自分で構築でき、少しアプリケーションを作成しているレベルを対象とします。
まったくの初心者の場合は、わからない部分が出てくると思います。
できるだけ細かく説明は入れていきますが、説明がわからない場合は、PHPやMySQLの初心者講座をご覧ください。

対象のスキルレベル

  • LAMP環境の構築
  • PHP言語が読める
  • HTML, CSS, Javascriptが少しわかる
  • Bootstrapのドキュメントをみて、HTMLが書ける
  • Ajax(非同期通信)を利用したことがある
  • SESSIONを利用したことがある

構築環境

  • Windows10
  • XAMPP(PHP7.3.2, MariaDB 10.1.38)

ユーザ管理　編集画面

一覧画面の作成が終了しましたので、編集画面を作成していきます。
編集画面は、入力項目があり、エラーチェックなども行います。ログインページと同様に、Floating labels を利用した入力項目になります。

まずは、users.html をコピーして、usersEdit.html を作成します。
不要な部分が多いので、削除していきます。

  • DatatablesCDNを削除
  • 一覧表の削除
  • 削除モーダルの削除
usersEdit.html（不要部分に網掛け）
<!doctype html>
<html lang="ja" >
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ユーザ管理 | tech.pjin.jp</title>

	<!-- Bootstrap core CSS -->
	<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">
	<!-- Font Awesome CSS -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
	<!-- Animate.css CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
	<!-- Sawarabi Gothic -->
	<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
	<!-- DataTables 1.10.24 -->
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.bootstrap4.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css">
	<!-- Custom styles for this template -->
	<link href="./assets/css/style.css" rel="stylesheet">
</head>
<body>
	<header>
		<nav class="navbar navbar-expand-lg navbar-light shadow bg-white fixed-top">
			<div class="container-fluid">
				<a class="navbar-brand" href="index.html"><i class="fas fa-paste"></i> BACK<span class="bland-red">OFFICE</span></a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavDropdown">
					<ul class="navbar-nav header-menu">
						<li class="nav-item">
							<a class="nav-link" href="index.html"><i class="fas fa-tachometer-alt"></i> DASHBOARD</a>
						</li>
						<li class="nav-item">
							<a class="nav-link active" href="users.html"><i class="fas fa-id-card-alt"></i> ユーザ管理</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="depts.html"><i class="far fa-building"></i> 部署管理</a>
						</li>
					</ul>
					<ul class="navbar-nav ms-auto me-3">
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle username" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
								管理者
							</a>
							<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								<li><a class="dropdown-item" href="login.html"><i class="fas fa-sign-out-alt"></i> ログアウト</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</header>

	<nav class="left-nav shadow d-none d-lg-block">
		<div class="list-group list-group-flush">
			<a href="index.html" class="list-group-item list-group-item-action"><i class="fas fa-tachometer-alt"></i> DASHBOARD</a>
			<a href="users.html" class="list-group-item list-group-item-action active"><i class="fas fa-id-card-alt"></i> ユーザ管理</a>
			<a href="depts.html" class="list-group-item list-group-item-action"><i class="far fa-building"></i> 部署管理</a>
		</div>
	</nav>

	<main class="contents">
		<section class="container-fluid">
			<header>
				<h1><i class="fas fa-id-card-alt"></i> ユーザ管理</h1>
			</header>

			<div class="row">
				<div class="col buttons">
				</div>
				<div class="col d-flex justify-content-end"><!-- d-flex + justify-content-end で右寄せ -->
					<button class="btn btn-success"><i class="fas fa-plus-square"></i> 新規登録</button>
				</div>
			</div>

			<div class="mt-3"></div>

			<table id="users" class="table">
				<thead>
					<tr>
						<th>#</th>
						<th>名前</th>
						<th>メールアドレス</th>
						<th>電話番号</th>
						<th>所属部署</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>ninomae</td>
						<td>ninomae@ssie.jp</td>
						<td>090-1234-5678</td>
						<td>第十三課</td>
						<td>
							<button class="btn btn-primary btn-sm me-3"><i class="fas fa-edit"></i> 編集</button>
							<button class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="far fa-trash-alt"></i> 削除</button>
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>ninomae</td>
						<td>ninomae@ssie.jp</td>
						<td>090-1234-5678</td>
						<td>第十三課</td>
						<td>
							<button class="btn btn-primary btn-sm me-3"><i class="fas fa-edit"></i> 編集</button>
							<button class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="far fa-trash-alt"></i> 削除</button>
						</td>
					</tr>
				</tbody>
			</table>

		</section>
	</main>

	<div class="modal fade" tabindex="-1" id="deleteModal">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header bg-danger text-white">
					<h5 class="modal-title"><i class="fas fa-exclamation-triangle"></i> 削除確認</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<p>削除致します。よろしいでしょうか。</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i> 削除</button>
				</div>
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
	<!-- DataTables 1.10.24 -->
	<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.bootstrap4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
	<script src="assets/js/vfs_fonts.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
	<script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
	<script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>
	<script src="assets/js/script.js"></script>
	<script>
	$(function(){
		/* 新規作成 */
		$('.btn-success,.btn-primary').on('click', function(){
			/*  */
			location.href = 'usersEdit.html';
		});

		var table	= $('#users').DataTable({
			buttons: [
				{
					extend: 'copy',
					text: '<i class="fas fa-clipboard"></i> Copy'
				},
				{
					extend: 'csv',
					text: '<i class="fas fa-file-alt"></i> Csv'
				},
				{
					extend: 'excel',
					text: '<i class="fas fa-file-excel"></i> Excel'
				},
				{
					extend: 'pdfHtml5',
					text: '<i class="fas fa-file-pdf"></i> PDF',
					customize: function(doc){
						doc.defaultStyle.font= 'GenShin';
					}
				}
			]
		});
		table.buttons().container().appendTo('.buttons');
	});
	</script>
</body>
</html>

削除が終わったファイルが以下になります。

usersEdit.html
<!doctype html>
<html lang="ja" >
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ユーザ管理 | tech.pjin.jp</title>

	<!-- Bootstrap core CSS -->
	<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">
	<!-- Font Awesome CSS -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
	<!-- Animate.css CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
	<!-- Sawarabi Gothic -->
	<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
	<!-- DataTables 1.10.24 -->
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.bootstrap4.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css">
	<!-- Custom styles for this template -->
	<link href="./assets/css/style.css" rel="stylesheet">
</head>
<body>
	<header>
		<nav class="navbar navbar-expand-lg navbar-light shadow bg-white fixed-top">
			<div class="container-fluid">
				<a class="navbar-brand" href="index.html"><i class="fas fa-paste"></i> BACK<span class="bland-red">OFFICE</span></a>
				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavDropdown">
					<ul class="navbar-nav header-menu">
						<li class="nav-item">
							<a class="nav-link" href="index.html"><i class="fas fa-tachometer-alt"></i> DASHBOARD</a>
						</li>
						<li class="nav-item">
							<a class="nav-link active" href="users.html"><i class="fas fa-id-card-alt"></i> ユーザ管理</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="depts.html"><i class="far fa-building"></i> 部署管理</a>
						</li>
					</ul>
					<ul class="navbar-nav ms-auto me-3">
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle username" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
								管理者
							</a>
							<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								<li><a class="dropdown-item" href="login.html"><i class="fas fa-sign-out-alt"></i> ログアウト</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</header>

	<nav class="left-nav shadow d-none d-lg-block">
		<div class="list-group list-group-flush">
			<a href="index.html" class="list-group-item list-group-item-action"><i class="fas fa-tachometer-alt"></i> DASHBOARD</a>
			<a href="users.html" class="list-group-item list-group-item-action active"><i class="fas fa-id-card-alt"></i> ユーザ管理</a>
			<a href="depts.html" class="list-group-item list-group-item-action"><i class="far fa-building"></i> 部署管理</a>
		</div>
	</nav>

	<main class="contents">
		<section class="container-fluid">
			<header>
				<h1><i class="fas fa-id-card-alt"></i> ユーザ管理</h1>
			</header>

		</section>
	</main>

	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
	<script src="assets/js/script.js"></script>
	<script>
	$(function(){
	});
	</script>
</body>
</html>

ユーザ管理の一覧ページを作る際の一番最初と同じになりました。
詳細ページは、フォームを利用しますので、まずBootstrapのForm部分を見てみましょう。
かなり分割されていて、少し難しく感じるかも知れませんが、一通り見てみて下さい。

※参考 Forms (フォーム)

さまざまな Forms (フォーム) を作成するための control styles (フォームコントロールスタイル)、layout options (レイアウトオプション)、custom components (カスタムコンポーネント) の例と使用ガイドラインです。

※参考 Form controls (フォームコントロール)

Formのテキストフォームやスタイル、サイズ、フォーカスの状態の調整

※参考 Select (セレクトメニュー)

セレクト要素 (select) のためのCSSです。

※参考 Checks and radios(チェックとラジオ)

完全に書き換えられたチェックコンポーネントを使用して、クロスブラウザとクロスデバイスの一貫性のあるチェックボックスとラジオを作成します。

※参考 Range (レンジ)

Range (レンジ) はカスタムの範囲入力です。

※参考 Input group (インプットグループ)

フォームコントロールを拡張できます。

※参考 Floating labels(フローティングラベル)

入力フィールドの上に浮かんでいる美しいシンプルなフォームラベルを作成します。

※参考 Layout (レイアウト)

インラインから水平方向、カスタムグリッドまで、フォームのLayout (レイアウト) でフォームに構造を与えます。

※参考 Validation (バリデーション)

ブラウザのデフォルトの動作、カスタムスタイルと JavaScript、HTML5 フォーム検証などを使用して、実用的なフィードバックをユーザーに提供します。

一通り見終わったら、どんなフォームにするかをイメージして、次に進んでいきます。
今回は、Floating labelsを利用したフォームを作成します。

レイアウトでは、グリッドシステムも利用しますので、一列ではなく、複数列になるイメージを持ってください。
今回は、ソースもあり、長くなりましたので、次回から、ユーザ管理の編集画面を作成していきたいと思います。

魁！小野の塾

目次

魁！小野の塾　小さな管理機能を作ってみようの巻　第９話
【PHP応用】 オブジェクト指向とは
一覧へ戻る