関連記事
【開発実況シリーズ】Web日報登録システムを作る「#6 ログイン機能開発編」
2020.12.22
2021.03.14
【開発実況シリーズ】Web日報登録システムを作る「#7 月別リスト機能開発編」
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第7回ということで、前回の続きを進めていきたいと思います。
Todoリスト確認
まずは、Todoリストを確認しておきましょう。
前回から、機能開発フェーズを進めています。
前回は、社員側の「ログイン／ログアウト機能」のプログラミングを行いました。
これで、userテーブルに登録されている社員だけがシステムにログイン出来る状態になりましたので、次はログインした後の画面をプログラミングしていきます。
今回は、ログインした社員の日報を月別に表示する「月別」リストの画面を作っていきましょう！
プログラミングする処理の流れ
では、プログラミングを進めていきましょう。
まずは、index.phpにPHPブロックを追加して、前回と同じように、プログラミングする処理の流れを先にコメントで書いていきましょう。
プログラミングする処理の流れとしては
手順①
ログインされているかどうかをチェックし、ログインしているユーザーの情報をセッションから取得します。
手順②
そのユーザーの今月の業務日報データをデータベースの「work」テーブルから取得します。
手順③
取得した業務日報データをテーブルにリスト表示します。
このような流れですね。
これを上から順番にプログラミングしていきます。
ログイン状態をチェック
まずは、セッションのログイン状態をチェックし、ログインされていない場合は、ログイン画面へ強制遷移します。
ログインされている場合は、セッションに保存されたユーザー情報を取得します。
正しく取得出来ているか確認してみましょう。
正しく取得出来ていますね。
ダミーデータを登録
次に、このユーザーの業務日報データをデータベースの「work」テーブルから取得します。
現在はデータが空なので、表示確認用にダミーデータを登録しておきましょう。
1件ずつ入力するのは面倒なので、Excelで作ってインポートします。
これで、ダミーデータが登録出来ました。
業務日報データを取得
では、取得処理を書いていきます。
DBのコネクションを張って…と
これは前回も書きましたが、これから毎回使う共通処理なので、共通関数化しておきましょう。
共通関数用のPHPファイルを作成して、その中にファンクションを定義します。
このファイルを各PHPで読み込むようにすれば、このファンクションを呼び出すだけで、DBコネクションを張るという一連の処理を行ってくれます。
各ソースにこれらの処理を毎回書かなくて済むので楽ですね。
もし、この処理に変更などがあった場合も、ファンクション側を直すだけで済みます。
こういった共通処理は、積極的に関数化しておきましょう。
関数について詳しくはこちら
では、このコネクションを使って、データベースにアクセスしていきます。
workテーブルからデータを取得するための、SELECT文を書きます。
抽出条件は、user_idが先ほどセッションから取得したユーザーIDと一致し、日付が今月のものだけが抽出されるようにします。
ちなみに、今僕が書いているような処理は、講座を学習して頂くと、自分で1から書けるようになりますので、良かったら是非ご参加ください。
※講座のご参加はバナーから
前回、ログイン時にuserテーブルからidを取得していなかったので、追加しておきます。
これでOKですね。
ちゃんと取得出来ているかどうか、デバッグコードを入れて確認してみましょう。
対象ユーザーの、今月のデータが取得出来ています。
データベースから取得したデータは、このように配列形式で取得されます。
配列について詳しくはこちら
現在は、取得される配列の形式は、デフォルトの設定となっており、このように「連番」と「カラム名」で重複して取得されています。
これは無駄なので、設定を微調整しましょう。
コネクションを張る際に、フェッチモードを指定します。
連番の方は使わないので、取得しないようにしました。
また、配列の各データにアクセスしやすいように、行自体のキーも「連番」ではなく「日付」に変更しておきましょう。
これでOKです。
フェッチモードの調整ついて詳しくはこちら
データをテーブルに表示
それでは、取得したデータをHTMLのテーブルに表示していきます。
月別リストは、1日から、月末までのリストを表示し、データが登録されている日については、そのデータも表示させるようにします。
データがまだ登録されていない日については、空白で表示させます。
まずは、for文を使って1日から月末までのループを書きます。
ループ処理について詳しくはこちら
次に、先ほど取得した配列から、対象日のデータを表示させるようにします。
確認してみましょう。
データがある場合は、そのデータが表示されるようになりました。
各データの表示形式を調整していきます。
標準関数には、日本語の曜日を表示するものが無いため、独自に作成します。
日付部分の表示調整が完了
時間部分の表示調整が完了
業務内容は、20文字以上の場合は残りを省略するようにします。
データが無い場合の挙動も確認しておきます。
わざとデータを削除して
エラーが出てしまったので、直していきましょう。
これでOKですね。
確認してみましょう。
各データが設計通りに表示され、データが登録されていない日は空白で表示されるようになりました。
これで、月別リストの表示部分は完了です。
次回予告
ということで、今回は社員側の「月別リスト」の基本表示部分を実装しました。
次回は、このプルダウンを変更すると、当月だけでなく別の月のデータを表示出来るように拡張してみましょう。
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
