小さな管理機能を作ってみよう 第３４話
初心者向け、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は以下のようになっています。
/* 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;
});
});
[/javascript]
ログインチェックを追加します。
/* ログインチェック */
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;
});
});
[/javascript]
部署のプルダウンを作成します。
/* ログインチェック */
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;
});
});
[/javascript]
登録又は更新処理を分岐するために、localStorageを参照し、データがあれば更新処理、なければ新規作成処理を行うよう処理分岐をさせます。
更新処理の場合は、user_idからデータを取得し、初期表示するように実装します。
/* ログインチェック */
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;
});
});
[/javascript]
最後に登録処理部分を修正します。新規or更新処理を分けるフラグ（isNew：新規の場合にtrue、更新の場合はfalse）を利用して、更新処理と登録処理を分岐します。
/* ログインチェック */
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]
これで、Javascriptの実装が終了しました。
機能の実装はこれで全て終了になります。
次回は、小さな管理機能を作ってみようの巻の最終回で、HTMLのすべてのソースを載せたいと思います。
これまでかなり長い連載部分を読み進めて頂いて、ありがとうございます。
