Developer

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

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

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

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

対象のスキルレベル

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

構築環境

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

ログイン機能の実装

前回に引き続き、ログイン画面の実装を行います。
ログイン機能の実装は、HTMLを修正後に、Auth.phpを作成し、最後にJavascriptの流れで実装しますが、最後のJavascriptの実装部分が残っております。
Auth.phpを動かすにあたり、Javascriptが少し複雑なので、どのように実装するのかの、おさらいをしたいと思います。

  1. processを指定
  2. methodを指定
  3. FORMパラメータのシリアライズ
  4. Validationの実行
  5. 非同期通信を実行
  6. エラーがある場合は、画面に表示
  7. エラーがない場合は、コールバックを実行

processmethodはそれぞれ、$process(process)$method(method) の関数を呼び出し指定します。
FORM要素のパラメータは、$xhr($form, callback) 関数内でシリアライズされます。この時に、指定したprocessmethod をパラメータに付加します。
エラー表示をクリアし、Validationを実行後、正常であれば、非同期通信を実行します。

Validationは、validation($forms) で実行。非同期通信は、_$xhr(data, callback) で実行します。
processmethod をパラメータに付加するのは、routeControl($param) で実行します。

ソースの内容は、小さな管理機能を作ってみようの巻 第19話 を参照してください。

Javascript共通部分の追加

Javascriptの共通部分で、足りない部分があります。Auth.phpを実装しましたので、実装可能となりました。先にそちらを実装していきたいと思います。
実装機能は2つあり、ログアウト機能と、ログインチェック機能の2点です。
Auth.phpにfunction logout(), function isLogin($con, $request) を作成しましたので、その機能を実装していきます。

/assets/js/script.js(抜粋)
/* ログインチェックを行います。ログインしていない場合は、login.htmlへ遷移 */
function isSignin(){
	/* $xhrではなく、直接_$xhrを呼び出し、非同期通信を行います。 */
	/* processはAuth, methodはisLoginを実行します。また、記憶するのパラメータも送信します(ローカルストレイジ) */
	_$xhr([
		{'name': 'process', 'value': 'Auth'},
		{'name': 'method', 'value': 'isLogin'},
		{'name': 're', 'value': localStorage.getItem('hash')}
	], (json, status, xhr) => {
		if(json.errors['*']){
			/* エラーがある場合は、ログイン画面へ遷移します */
			location.href	= './login.html';
		}else{
			/* エラーがない場合は、ユーザ名をヘッダに表示します */
			$('.username').text(json.list.login.name);
			$('.username').data('login-info', json.list.login);
			/* まだ実装していませんが、ローディングマスクを実装予定です */
			setTimeout(function(){
				/* 0.3秒したら、ローディングマスクを外します */
				$('.spinner').empty().animate({height: '0px', width: '0px'}, 300);
				$('.loading').animate({height: '0px'}, 500);
			}, 300);
		}
	});
}
/* ログアウト処理 */
function logout(){
	/* $xhrではなく、直接_$xhrを呼び出し、非同期通信を行います。 */
	/* processはAuth, methodはlogoutを実行します。また、記憶するのパラメータも削除します */
	_$xhr([
		{'name': 'process', 'value': 'Auth'},
		{'name': 'method', 'value': 'logout'}
	], (json, status, xhr) => {
		localStorage.removeItem('hash');
	});
}

isSignin() 直接パラメータを作成し、非同期通信(_$xhr)を実行しています。ローディングマスクはDashboard実装時に作成していく予定です。先に入れています。
logout() こちらも直接パラメータを作成し、非同期通信を実行しています。非同期通信成功時に、記憶するのパラメータを削除していますが、実際削除しなくてもOKです。このあたりは使い勝手が良いように実装していきますが、今回は削除しています。

※参考 Window.localStorage
※参考 ブラウザにデータを保存するlocalStorage(ローカルストレージ)の使い方
※参考 HTML5のLocal Storageを使ってはいけない(翻訳)

ログイン処理実装

共通処理を実装したので、ログイン処理の実装を行っていきます。
processAuth に設定し、ログアウトを行います。ボタンが押下されたら、ログイン処理を実行していきます。

login.html(抜粋)
$(function(){
	/* processをAuthに設定(Auth.phpを動かすため) */
	$process('Auth');
	/* login.htmlを呼ばれたら、ログアウトしておきます */
	logout();
	$('.signin').on('click', function(){
		/* class="signin" が指定してあるボタンが押下されたら */
		/* methodにloginを設定(Auth.php#loginを実行するため) */
		$method('login');
		/* 非同期通信を実行(実行前にValidationチェックが行われます) */
		$xhr($('form:first'), function(json, status, xhr){
			/* 非同期通信成功時のみここを実行します */
			if($('#remember-me').is(':checked')){
				/* 記憶するにチェックがある場合は、メールアドレスを保持しておきます */
				localStorage.setItem('hash', $('#mail').val());
			}
			/* index.htmlへ遷移します */
			location.href	= 'index.html';
		});
		/* ボタン押下時のイベントキャンセル */
		return false;
	});
});

共通処理をしっかり作っていると、各プログラムでは以外と簡単な実装で処理がかけるかと思います。processとmethodを一緒にセット出来ても良かったのですが、分割しておいた方が後々便利です。
localStorageには、hashというキーでメールアドレスを設定しておきます。ブラウザの開発者ツールで丸見えかつ編集可能なので、localStorageの扱いには注意してください。
実際のところは、hash関数などを利用してhash化して保存しておくことをお勧めします。

次回からDashboardの実装に、とり掛かっていきたいと思います。

魁!小野の塾