Developer

魁!小野の塾 小さな管理機能を作ってみようの巻 第32話
2021.12.15
Lv2

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

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

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

対象のスキルレベル

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

構築環境

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

ユーザ管理実装

HTMLの修正が終了しましたので、Javascriptの実装を行います。
Datatablesを利用することから、少しソースが長くなりますが、Datatablesの実装に慣れてくると、どれをどう実装すれば良いか分かるようになり、それほど長くないことに気が付くはずです。

部署管理側の実装の際に、更新する場合の連携IDをlocalStorageに保存する方法で行いましたが、今回は前回やっていることは、先に実装していきたいと思います。
localStorageに関しては、小さな管理機能を作ってみようの巻 第29話をもう一度、参照してみて下さい。

Datatables部分の実装

先にDatatables部分の実装を行ってきます。APIはUsers.phplistを呼び出します。

users.html(抜粋)
$(function(){
	/* ログインチェック */
	isSignin();

	/* Users.phpを実行するためにprocessにはUsersを指定します */
	$process('Users');

	var table	= $('#users').DataTable({
		ajax: {
			url: './api/',
			type: 'POST',
			data: {'process': 'Users', 'method': 'list'},	// Users.phpのlistを呼び出します
			dataSrc: 'list.rs'								// 戻り値のjsonからlist.rs部分がデータの対象として設定します
		},
		columnDefs: [{
			targets : 5,
			data: null,
			defaultContent: [
				'<button class="btn btn-primary btn-sm me-3 act-update"><i class="fas fa-edit"></i> 編集</button>',
				'<button class="btn btn-outline-danger btn-sm act-delete" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="far fa-trash-alt"></i> 削除</button>'
			].join('')
		}],
		columns: [
			{data: "user_id"},
			{data: "name"},
			{data: "mail"},
			{data: "tel"},
			{data: "dept_name"}
		],
		dom: 'Btp',
		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');
});

上記を実行することで、Users.phplist関数を実行した結果が描画されます。
Datatablesとデータ、ボタンが描画されていれば成功です。

新規作成の実装

新規作成は、引き継ぐデータもなく、そのままusersEdit.htmlへ遷移します。

users.html(抜粋)
	/* Users.phpを実行するためにprocessにはUsersを指定します */
	$process('Users');

	/* 新規作成 */
	$('.btn-success').on('click', function(){
		/* そのまま編集画面へ遷移します */
		location.href = 'usersEdit.html';
	});

削除処理の実装

削除処理は、リスト部分のボタンを押下すると、モーダルが描画され、モーダルの削除ボタンを押下すると削除するという流れになります。
まずは、モーダル内の削除ボタンを押下した場合の処理を追加していきます。

users.html(抜粋)
	/* 新規作成 */
	$('.btn-success').on('click', function(){
		/* そのまま編集画面へ遷移します */
		location.href = 'usersEdit.html';
	});

	/* 削除実行 */
	$('.act-exec-delete').on('click', function(e){
		/* Users.php#deleteを呼び出します */
		$method('delete');
		/* Validationチェックは行わないで、非同期通信します */
		$xhrNoValidate([{name: 'user_id', value: $('.act-exec-delete').data('id')}], function(data, status, xhr){
			location.href	= 'users.html';
		});
		/* ボタン押下時のイベントを通知しない為、falseを返します */
		return false;
	});

リストに描画された削除ボタンを押下時に、モーダル内の.act-exec-deleteのdata属性(data-id)に、usersのidをセットしておき、そのidを送信し削除します。

続いて、モーダルにidをセットする部分の実装ですが、idのセットは更新ボタンも同様になるので、一緒に実装していきます。

users.html(抜粋)
	/* ダウンロードなどのボタンを描画します */
	table.buttons().container().appendTo('.buttons');
	/* Datatablesのデータ部分の描画終了時に、コールバックされます */
	table.on('draw', function(){
		/* 更新 */
		$('.act-update').on('click', function(e){
			var tr	= $(this).closest('tr');
			/* localStorageにuser_idをセットします */
			localStorage.setItem('user_id', $('td:first', tr).text());
			/* 編集画面へ遷移 */
			location.href	= 'usersEdit.html';
		});

		/* 削除確認 */
		$('.act-delete').on('click', function(e){
			var tr	= $(this).closest('tr');
			/* モーダルを表示する際に削除するidをモーダル側へ設定します */
			$('.act-exec-delete').data('id', $('td:first', tr).text());
		});
	});

更新処理の実装

先ほどリスト内のボタン押下(更新・削除)を実装したので、更新処理への遷移は完了しています。
ここでは、更新処理を行う上で、localStorageに保存したuser_idを削除する実装を行います。

ここで削除しないと、いつまでも残ってしまう場合がありますので、注意しましょう。

users.html(抜粋)
	/* ログインチェック */
	isSignin();

	/* 連携用ID削除 */
	localStorage.removeItem('user_id');

	/* Users.phpを実行するためにprocessにはUsersを指定します */
	$process('Users');

これで、一覧画面の一通りの機能実装が終了しました。お疲れ様です。
次回は、最後の機能になりますが、ユーザの編集機能を実装していきます。

魁!小野の塾