小さな管理機能を作ってみよう 第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.phpのlistを呼び出します。
$(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.phpのlist関数を実行した結果が描画されます。
Datatablesとデータ、ボタンが描画されていれば成功です。
新規作成の実装
新規作成は、引き継ぐデータもなく、そのままusersEdit.htmlへ遷移します。
/* Users.phpを実行するためにprocessにはUsersを指定します */ $process('Users'); /* 新規作成 */ $('.btn-success').on('click', function(){ /* そのまま編集画面へ遷移します */ location.href = 'usersEdit.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のセットは更新ボタンも同様になるので、一緒に実装していきます。
/* ダウンロードなどのボタンを描画します */ 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を削除する実装を行います。
ここで削除しないと、いつまでも残ってしまう場合がありますので、注意しましょう。
/* ログインチェック */ isSignin(); /* 連携用ID削除 */ localStorage.removeItem('user_id'); /* Users.phpを実行するためにprocessにはUsersを指定します */ $process('Users');
これで、一覧画面の一通りの機能実装が終了しました。お疲れ様です。
次回は、最後の機能になりますが、ユーザの編集機能を実装していきます。