業務アプリ開発講座

トップページのナビゲーション

トップページのナビゲーションを作成します。

これまで各要素の生成をclass化、関数化して示してきました。ですが、このトップページのボディメニューの生成はclass化しません。その理由は、

  • ボディメニューはこのトップページにしかない。

    • class化、関数化したところで使いまわしできない。するとことがない。
  • 機能が追加していった場合に、どのようになレイアウトになるかわからない。

    • データから自動生成するように作っておいても、そのままで良いかどうかわからない。例えば、親メニューが7つに増えたら、単に横並びでは入りきらないし、トップページに表示したいメニューの階層が深くなってきたら、そもそもレイアウトを再考しなければならない

だからです。

ですので、index.phpのソースを下記のようにします。

<?php
require_once('../includes/Init.php');

$navData = AppData::sitemap(JsonDecodeType::TYPE_OBJECT);

function navColumn($menu){

	$tempLabel	= "<label class=\"list-group-item active text-center\">%s</label>";
	$tempLink	= "<a href=\"%s\" class=\"list-group-item\">%s</a>";
	$menuList	= [];

	$menuList[]	= sprintf($tempLabel, $menu->name);

	if(isset($menu->child)){
		foreach($menu->child as $child){
			$menuList[]	= sprintf($tempLink, $child->url, $child->name);
		}
	}
	return implode("\n", $menuList);
}
?>
<?= AppMasterHtml::header() ?>

<!-- MainContents -->
<div class="container-fluid">
	<div class="row">
		<div class="col-xs-1"> </div>
		<div class="col-xs-3">
			<div class="list-group">
				<?= navColumn($navData[1]) ?>
			</div>
		</div>
		<div class="col-xs-3">
			<div class="list-group">
				<?= navColumn($navData[2]) ?>
			</div>
		</div>
		<div class="col-xs-3">
			<div class="list-group">
				<?= navColumn($navData[3]) ?>
			</div>
		</div>
		<div class="col-xs-1"> </div>
	</div><!-- /MainContents -->
</div>
<?= AppMasterHtml::externalJs() ?>
</body>
</html>
$navData = AppData::sitemap(JsonDecodeType::TYPE_OBJECT);

sitemapデータをオブジェクト形式で取得しています。次に出現する関数navColumn()は解説する必要はないでしょう。それよりMainContents内の<?= navColumn($navData[1]) ?>がポイントでしょう。引数の$navData[1]に中身は、下記のオブジェクト形式に連想配列です。

stdClass Object
(
    [name] => 売上管理
    [child] => Array
        (
            [0] => stdClass Object
                (
                    [name] => 日次売上集計
                    [url] => sales/daily-summary.php
                )
            [1] => stdClass Object
                (
                    [name] => 日次売上明細
                    [url] => sales/daily-details.php
                )
            [2] => stdClass Object
                (
                    [name] => 書籍分類別集計
                    [url] => sales/analysis.php
                )
        )
)

変数$navDataの添字が1の場合売上管理メニュー情報となり、2の場合は、在庫管理メニュー情報となります。関数navColumn()には、sitemap情報全てではなく、各メニュー情報を渡すようにしています。

このような「作り」をすることで、逆に変更に対し柔軟に対応できるようになります。プログラミングは最終結果が同じだとしても、そこに至る方法はたくさんあります。それぞれの方法は一長一短あります。適材適期適所で、柔軟にプログラミングできるスキルを身につけることがとても大切です。

さて、やっとindex.phpが出来上がりました。次回はスタッフ一覧を作成します


Leave a Comment