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

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

初心者向け、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の実装を開始していきます。
前回と同様に、重複する部分に関しては、読み飛ばしてください。

ユーザの登録機能部分は、小さな管理機能を作ってみようの巻　第２０話を見直してください。
PHP部分（Contoller）は、小さな管理機能を作ってみようの巻　第３０話を見直してください。
User.phpに関しては、登録部分を省いた説明になっています。

Javascript実装

前回の実装では、新規登録のみの実装でしたが、今回は、登録と更新を分ける必要があります。
少しずつ実装していきたいと思います。

まず、現状のユーザ編集のJavascriptは以下のようになっています。

usersEdit.html（抜粋）

$(function(){
	/* processをUsersに設定します。（/api/Users.phpを読み込むため） */
	$process('Users');

	/* class="btn-success" を指定してある要素をクリックしたら */
	$('.btn-success').on('click', function(){
		/* 登録処理を実行（insertを実行します） */
		$method('insert');
		/* 非同期通信を呼び出し、成功したらusers.htmlへ遷移します */
		$xhr($('form:first'), function(data, status, xhr){
			location.href	= 'users.html';
		});
		/* ボタンを押下した際の戻り値にfalseを返すと、submitしません */
		return false;
	});
});

ログインチェックを追加します。

usersEdit.html（抜粋）

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

	/* processをUsersに設定します。（/api/Users.phpを読み込むため） */
	$process('Users');

	/* class="btn-success" を指定してある要素をクリックしたら */
	$('.btn-success').on('click', function(){
		/* 登録処理を実行（insertを実行します） */
		$method('insert');
		/* 非同期通信を呼び出し、成功したらusers.htmlへ遷移します */
		$xhr($('form:first'), function(data, status, xhr){
			location.href	= 'users.html';
		});
		/* ボタンを押下した際の戻り値にfalseを返すと、submitしません */
		return false;
	});
});

部署のプルダウンを作成します。

usersEdit.html（抜粋）

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

	/* 部署プルダウン作成 */
	$process('Depts');
	$method('list');
	$('#dept_id').append($('<option>').text('選択してください').val(''));
	$xhrNoValidate([], function(data, status, xhr){
		var rs	= data.list.rs;
		$.each(rs, function(idx, el){
			$('#dept_id').append($('<option>').text(el.name).val(el.dept_id));
		});
	});

	/* processをUsersに設定します。（/api/Users.phpを読み込むため） */
	$process('Users');

	/* class="btn-success" を指定してある要素をクリックしたら */
	$('.btn-success').on('click', function(){
		/* 登録処理を実行（insertを実行します） */
		$method('insert');
		/* 非同期通信を呼び出し、成功したらusers.htmlへ遷移します */
		$xhr($('form:first'), function(data, status, xhr){
			location.href	= 'users.html';
		});
		/* ボタンを押下した際の戻り値にfalseを返すと、submitしません */
		return false;
	});
});

登録又は更新処理を分岐するために、localStorageを参照し、データがあれば更新処理、なければ新規作成処理を行うよう処理分岐をさせます。
更新処理の場合は、user_idからデータを取得し、初期表示するように実装します。

usersEdit.html（抜粋）

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

	/* 部署プルダウン作成 */
	$process('Depts');
	$method('list');
	$('#dept_id').append($('<option>').text('選択してください').val(''));
	$xhrNoValidate([], function(data, status, xhr){
		var rs	= data.list.rs;
		$.each(rs, function(idx, el){
			$('#dept_id').append($('<option>').text(el.name).val(el.dept_id));
		});
	});

	/* processをUsersに設定します。（/api/Users.phpを読み込むため） */
	$process('Users');

	/* 新規or更新処理を実施するための処理分岐用フラグ */
	var isNew	= true;
	if(localStorage.getItem('user_id') != null){
		/* localStorageのuser_idがセットされていれば、更新処理 */
		isNew	= false;
		/* methodをgetに変更し、user_idよりデータを取得 */
		$method('get');
		/* validationを実行せずにデータを取得（非同期処理） */
		$xhrNoValidate([{name: 'user_id', value: localStorage.getItem('user_id')}], function(data, status, xhr){
			/* 取得したデータをセット */
			var rs	= data.list.rs;
			/* 選択セレクターにて項目名が指定されている要素に値を設定します */
			$.each(rs, function(key, value){
				if($('[name='+key+']').get(0)){
					$('[name='+key+']').val(value);
				}
			});
			/* パスワードハッシュは未入力とします */
			$('[name=passwd]').val('');
		});
	}

	/* class="btn-success" を指定してある要素をクリックしたら */
	$('.btn-success').on('click', function(){
		/* 登録処理を実行（insertを実行します） */
		$method('insert');
		/* 非同期通信を呼び出し、成功したらusers.htmlへ遷移します */
		$xhr($('form:first'), function(data, status, xhr){
			location.href	= 'users.html';
		});
		/* ボタンを押下した際の戻り値にfalseを返すと、submitしません */
		return false;
	});
});

最後に登録処理部分を修正します。新規or更新処理を分けるフラグ（isNew：新規の場合にtrue、更新の場合はfalse）を利用して、更新処理と登録処理を分岐します。

usersEdit.html（抜粋）

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

	/* 部署プルダウン作成 */
	$process('Depts');
	$method('list');
	$('#dept_id').append($('<option>').text('選択してください').val(''));
	$xhrNoValidate([], function(data, status, xhr){
		var rs	= data.list.rs;
		$.each(rs, function(idx, el){
			$('#dept_id').append($('<option>').text(el.name).val(el.dept_id));
		});
	});

	/* processをUsersに設定します。（/api/Users.phpを読み込むため） */
	$process('Users');

	/* 新規or更新処理を実施するための処理分岐用フラグ */
	var isNew	= true;
	if(localStorage.getItem('user_id') != null){
		/* localStorageのuser_idがセットされていれば、更新処理 */
		isNew	= false;
		/* methodをgetに変更し、user_idよりデータを取得 */
		$method('get');
		/* validationを実行せずにデータを取得（非同期処理） */
		$xhrNoValidate([{name: 'user_id', value: localStorage.getItem('user_id')}], function(data, status, xhr){
			/* 取得したデータをセット */
			var rs	= data.list.rs;
			/* 選択セレクターにて項目名が指定されている要素に値を設定します */
			$.each(rs, function(key, value){
				if($('[name='+key+']').get(0)){
					$('[name='+key+']').val(value);
				}
			});
			/* パスワードハッシュは未入力とします */
			$('[name=passwd]').val('');
		});
	}

	/* class="btn-success" を指定してある要素をクリックしたら */
	$('.btn-success').on('click', function(){
		/* isNew:新規登録の場合はtrue、更新処理の場合はfalse */
		isNew ? $method('insert') : $method('update');
		/* 非同期通信を呼び出し、成功したらusers.htmlへ遷移します */
		$xhr($('form:first'), function(data, status, xhr){
			location.href	= 'users.html';
		});
		/* ボタンを押下した際の戻り値にfalseを返すと、submitしません */
		return false;
	});
});

これで、Javascriptの実装が終了しました。
機能の実装はこれで全て終了になります。

次回は、小さな管理機能を作ってみようの巻の最終回で、HTMLのすべてのソースを載せたいと思います。
これまでかなり長い連載部分を読み進めて頂いて、ありがとうございます。