PHP+MySQLで家計簿システム開発#34【プロジェクト全体のリファクタリング】

前回はヘッダーメニューをハンバーガーメニューへ切り替えた後、年間レポートページを実装しました。
そして前回までで機能の開発は一旦終了しています。

PHP+MySQLで家計簿システム開発#33【メニュー切替と年間レポートページ実装】

前回はデータ一覧を、カテゴリーや選択項目などで絞り込んで検索する機能を開発しました。今回はまずヘッダーメニューをハンバーガーメニューへ修正したあと、収入や支出の月ごとの合計金額の推移グラフを表示する年間レポートページを作成します。ハンバ...

今回からは開発したプログラムのリファクタリングを行っていきます。

共通ファイルを移動
footerの共通化
最後に

共通ファイルを移動

現在、header.phpやdbconnect.phpなどの共通ファイルはディレクトリ直下に保管していますが、これらを読み込みファイル専用フォルダの中に移動させます。

まず「component」というフォルダを作り、更にその中に「common」フォルダを作成します。

フォルダの作成ができたら以下のファイルをcommonフォルダの中に移動させます。

・dbconnect.php
・functions.php
・header.php
・session.php

移動が完了したら、これらのファイルを読み込ませているプログラムのルートを書き換えます。

include_once('./component/common/session.php');
require_once('./component/common/dbconnect.php');
include_once('./component/common/functions.php');
include_once('./component/common/header.php'); //ディレクトリ直下のみ

//joinディレクトリ内、password-resetディレクトリ内は以下(header.php部分は据え置き)
include_once('../component/common/session.php');
require_once('../component/common/dbconnect.php');
include_once('../component/common/functions.php');

以上で共通ファイルの移動は完了です。

footerの共通化

以前headerの共通化は行いましたが、footerの共通化を行っていなかったのでパーツ化します。

component/common内にfooter.phpを作成し以下を記述します。

<footer id="footer" class="l-footer">
  <p>家計簿アプリ｜2022</p>
</footer>

<section class="l-footer__sp-lower-page">
  <?php if ($footer_back === 'on') : ?>
    <a href="./index.php"><i class="fa-solid fa-angle-left"></i></a>
  <?php endif; ?>
  <p>家計簿アプリ｜2022</p>
</section>

スマホ用のフッターを追加しました。これはスマホ時にタブメニュー切り替えをするとフッターが画面中央付近に表示されることを防ぐためです。

PC用のフッターはタブレットサイズになったら透明度0％にして見えないようにします。

.l-footer{
  height: 6rem;
  background-color: g.$main-blue;

  @include m.mq(tab){
    //background-color: inherit;削除
    opacity: 0; //追加
  }

そして各ファイルのfooter部分を以下に書き換えます。

<?php
//ディレクトリ直下の場合
$footer_back = 'on'; //login.php以外に記述
include_once('./component/common/footer.php');
?>

<?php
//joinディレクトリ、password-resetディレクトリ内ファイルの場合
$footer_back = 'off';
include_once('../component/common/footer.php');
?>

以上でfooterの共通化は完了です。