小さな管理機能を作ってみよう 第２２話
初心者向け、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が少し複雑なので、どのように実装するのかの、おさらいをしたいと思います。
- processを指定
- methodを指定
- FORMパラメータのシリアライズ
- Validationの実行
- 非同期通信を実行
- エラーがある場合は、画面に表示
- エラーがない場合は、コールバックを実行
process、methodはそれぞれ、$process(process)、$method(method) の関数を呼び出し指定します。
FORM要素のパラメータは、$xhr($form, callback) 関数内でシリアライズされます。この時に、指定したprocess、method をパラメータに付加します。
エラー表示をクリアし、Validationを実行後、正常であれば、非同期通信を実行します。
Validationは、validation($forms) で実行。非同期通信は、_$xhr(data, callback) で実行します。
process、method をパラメータに付加するのは、routeControl($param) で実行します。
ソースの内容は、小さな管理機能を作ってみようの巻 第１９話 を参照してください。
Javascript共通部分の追加
Javascriptの共通部分で、足りない部分があります。Auth.phpを実装しましたので、実装可能となりました。先にそちらを実装していきたいと思います。
実装機能は２つあり、ログアウト機能と、ログインチェック機能の２点です。
Auth.phpにfunction logout(), function isLogin($con, $request) を作成しましたので、その機能を実装していきます。
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’);
});
}
[/javascript]
isSignin() 直接パラメータを作成し、非同期通信(_$xhr)を実行しています。ローディングマスクはDashboard実装時に作成していく予定です。先に入れています。
logout() こちらも直接パラメータを作成し、非同期通信を実行しています。非同期通信成功時に、記憶するのパラメータを削除していますが、実際削除しなくてもOKです。このあたりは使い勝手が良いように実装していきますが、今回は削除しています。
※参考 Window.localStorage
※参考 ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方
※参考 HTML5のLocal Storageを使ってはいけない（翻訳）
ログイン処理実装
共通処理を実装したので、ログイン処理の実装を行っていきます。
process を Auth に設定し、ログアウトを行います。ボタンが押下されたら、ログイン処理を実行していきます。
/* 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;
});
});
[/javascript]
共通処理をしっかり作っていると、各プログラムでは以外と簡単な実装で処理がかけるかと思います。processとmethodを一緒にセット出来ても良かったのですが、分割しておいた方が後々便利です。
localStorageには、hashというキーでメールアドレスを設定しておきます。ブラウザの開発者ツールで丸見えかつ編集可能なので、localStorageの扱いには注意してください。
実際のところは、hash関数などを利用してhash化して保存しておくことをお勧めします。
次回からDashboardの実装に、とり掛かっていきたいと思います。
