小さな管理機能を作ってみよう 第28話
初心者向け、PHPプログラム構築講座です。
初心者といっても、PHPの勉強を少し行い、LAMP環境が自分で構築でき、少しアプリケーションを作成しているレベルを対象とします。
まったくの初心者の場合は、わからない部分が出てくると思います。
できるだけ細かく説明は入れていきますが、説明がわからない場合は、PHPやMySQLの初心者講座をご覧ください。
対象のスキルレベル
- LAMP環境の構築
- PHP言語が読める
- HTML, CSS, Javascriptが少しわかる
- Bootstrapのドキュメントをみて、HTMLが書ける
- Ajax(非同期通信)を利用したことがある
- SESSIONを利用したことがある
構築環境
- Windows10
- XAMPP(PHP7.3.2, MariaDB 10.1.38)
部署管理の実装
PHPのコーディングが終了しましたので、②HTML修正と③Javascript修正を行います。
一覧画面(depts.html)と、編集画面(deptsEdit.html)がありますが、それぞれ作業を行います。
まずは一覧画面から実装を始めていきます。一覧画面はDatatables.jsを利用するため、少し難易度が高めです。
image
depts.html
まずは非同期通信を利用できるようにHEAD要素にMETA要素を入れていきます。
depts.html(抜粋)
<!doctype html> <html lang="ja" > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="process"> <meta name="method"> <title>部署管理 | tech.pjin.jp</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <!-- Font Awesome CSS --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <!-- Animate.css CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <!-- Sawarabi Gothic --> <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet"> <!-- DataTables 1.10.24 --> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.bootstrap4.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css"> <link rel="stylesheet" href="assets/css/style.css" /> </head>
続いて、BODY要素直下にローディングマスクを準備します。
depts.html(抜粋)
<body> <section class="loading d-flex justify-content-center align-items-center bg-light"> <div class="spinner shadow rounded d-flex justify-content-center align-items-center"> <p class="h4 text-secondary"><i class="fas fa-spinner fa-spin"></i> Loading...</p> </div> </section> <header> <nav class="navbar navbar-expand-lg navbar-light shadow bg-white fixed-top">
最後に表示するテーブルは、非同期で取得することになりますので、余分なデータをTABLE要素から削除します。
depts.html(抜粋)
<main class="contents"> <section class="container-fluid"> <header> <h1><i class="far fa-building"></i> 部署管理</h1> </header> <div class="row"> <div class="col buttons"> </div> <div class="col d-flex justify-content-end"> <button class="btn btn-success"><i class="fas fa-plus-square"></i> 新規登録</button> </div> </div> <table id="depts" class="table dt-responsive nowrap" style="width:100%"> <thead> <tr> <th>#</th> <th>部署名</th> <th>電話番号</th> <th>操作</th> </tr> </thead> </table> </section> </main>
ひとまずこれで、HTMLの修正は終了です。
Javascript実装
非同期通信用設定、ログインチェック、datatablesの非同期通信設定などを行っていきます。
depts.html(抜粋)
<script> $(function(){ /* ログインチェック */ isSignin(); $process('Depts'); /* 新規作成 */ $('.btn-success,.btn-primary').on('click', function(){ /* */ location.href = 'deptsEdit.html'; }); var table = $('#depts').DataTable({ 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'); }); </script>
少し長くなりましたので、Datatablesの実装は次回にしたいと思います。