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

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

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

対象のスキルレベル

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

構築環境

Windows10
XAMPP(PHP7.3.2, MariaDB 10.1.38)

部署管理の実装

PHPのコーディングが終了しましたので、②HTML修正と③Javascript修正を行います。
一覧画面（depts.html）と、編集画面（deptsEdit.html）がありますが、それぞれ作業を行います。
まずは一覧画面から実装を始めていきます。一覧画面はDatatables.jsを利用するため、少し難易度が高めです。

image

depts.html

まずは非同期通信を利用できるようにHEAD要素にMETA要素を入れていきます。

depts.html（抜粋）

<!doctype html>
<html lang="ja" >
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="process">
	<meta name="method">
	<title>部署管理 | tech.pjin.jp</title>

	<!-- Bootstrap 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">

	<link rel="stylesheet" href="assets/css/style.css" />
</head>

続いて、BODY要素直下にローディングマスクを準備します。

depts.html（抜粋）

<body>
	<section class="loading d-flex justify-content-center align-items-center bg-light">
		<div class="spinner shadow rounded d-flex justify-content-center align-items-center">
			<p class="h4 text-secondary"><i class="fas fa-spinner fa-spin"></i> Loading...</p>
		</div>
	</section>

	<header>
		<nav class="navbar navbar-expand-lg navbar-light shadow bg-white fixed-top">

最後に表示するテーブルは、非同期で取得することになりますので、余分なデータをTABLE要素から削除します。

depts.html（抜粋）

	<main class="contents">
		<section class="container-fluid">
			<header>
				<h1><i class="far fa-building"></i> 部署管理</h1>
			</header>

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

			<table id="depts" class="table dt-responsive nowrap" style="width:100%">
				<thead>
					<tr>
						<th>#</th>
						<th>部署名</th>
						<th>電話番号</th>
						<th>操作</th>
					</tr>
				</thead>
			</table>
		</section>
	</main>

ひとまずこれで、HTMLの修正は終了です。

Javascript実装

非同期通信用設定、ログインチェック、datatablesの非同期通信設定などを行っていきます。

depts.html（抜粋）

<script>
$(function(){
	/* ログインチェック */
	isSignin();

	$process('Depts');

	/* 新規作成 */
	$('.btn-success,.btn-primary').on('click', function(){
		/*  */
		location.href = 'deptsEdit.html';
	});

	var table	= $('#depts').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>

少し長くなりましたので、Datatablesの実装は次回にしたいと思います。