【Laravelメニュー】Laravelでサイトの共通メニューをDBから取得して表示する方法を解説！初心者の方向けに詳しく説明します

2025年6月30日

LaravelでDBから情報を取得する方法を紹介します。

DBは「MariaDB」です。

MariaDBの使用

今回はヘッダーとフッターに表示するメニューを管理するテーブルを用意して表示していきます。

データの表示

テーブルの作成→PHPの実装という順で解説しています。

テーブルの作成

PHPMyAdminにてメニューテーブルを作成します。

このように設定しました。

テーブルの作成自体はお好みで大丈夫です。

後でmenu_idを主キーに設定しました。

INSERT文を実行してデータを入れます。

INSERT INTO `menu`(`menu_id`, `parent_menu_id`, `menu_name`, `menu_type`, `root`, `ordinal`, `visible`)
	VALUES
    	(1,NULL,'自己紹介','01','profile',1,1)
        ,(2,NULL,'サービス','01','service',2,1)
        ,(3,NULL,'お問い合わせ','01','inquiry',3,1)
        ,(4,NULL,'自己紹介','02','profile',1,1)
        ,(5,NULL,'サイトマップ','02','sitemap',2,1)
        ,(6,NULL,'プライバシーポリシー','02','privacy-policy',3,1)
        ,(7,NULL,'お問い合わせ','02','inquiry',3,1)

データの解説をしておくと、menu_idは連番で主キーになります。

parent_menu_idは親のメニューがいる場合に使用します。
（今回は使用しません）

menu_nameは名称、menu_typeは「01」がヘッダーで「02」がフッターとしています。

ordinalは順序、visibleは表示の可否です。

PHPの実装

下記コマンドでモデルクラスを作成します。

「menu」の部分は作成したテーブル名を記載してください。

sail artisan make:model menu

下記のように編集していきます。

<?php

namespace App\Models\Master;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\DB;

// メニューモデル
class Menu extends Model
{
    // テーブル名
    protected $table = 'menu';

    protected $guarded = array('id');

    // 自動タイムスタンプの挿入
    // created_at
    // updated_at
    // 上記に挿入する
    public $timestamps = true;

    public function getData($menuType)
    {
        error_log ("*** getData() *** start ***");

        $data = DB::table($this->table)->get()->where('menu_type', $menuType);

        error_log ("*** getData() *** end ***");

        return $data;
    }
}

コントローラーを作成します。

sail artisan make:controller IndexController

今回はホーム画面のメニューに表示するのでweb.phpには下記を追加します。

Route::get('/', [IndexController::class, 'index']);

ヘッダーとフッターで表示するメニューを分けるために新しくクラスを作成します。

App\Libs\Codes\MenuType

<?php

namespace App\Libs\Codes;

class MenuType
{
    public static $headerType = '01';
    public static $footerType = '02';
}

IndexController.phpを下記のように編集します。

<?php

namespace App\Http\Controllers;

use App\Libs\Codes\MenuType;
use Illuminate\Http\Request;
use App\Models\Master\Menu;

// ホームページコントローラー
class extends Controller
{
    public function index()
    {
        // Menuモデルのインスタンス化
        $md = new Menu();
        // データ取得
        $headerData = $md->getData(MenuType::$headerType);
        $footerData = $md->getData(MenuType::$footerType);

        return view('index', ['headerData' => $headerData], ['footerData' => $footerData]);
    }
}

ビューを編集していきます。
（私の場合はヘッダーとフッターでbladeを分けているので2つのファイルを編集します。

header.blade.php

<h1 class="header-logo">Hachi System</h1>

    <nav class="header-nav">
        <ul class="header-list">
            @foreach ($headerData as $d)
                <li class="header-item"><a href={{$d->root}} style="text-decoration:none;">{{$d->menu_name}}</a></li>
            @endforeach
        </ul>
    </nav>

footer.blade.php

<nav class="footer-nav">
    <ul class="footer-list">
        @foreach ($footerData as $d)
            <li class="footer-item"><a href={{$d->root}} style="text-decoration:none;">{{$d->menu_name}}</a></li>
        @endforeach
    </ul>
</nav>
  <p class="copyright">© Hachi System</p>

結果↓↓↓

ヘッダー。

フッター。

カテゴリごとにカード型で一覧を表示

必要なファイルを作成

下記コマンドでコントローラーを作成します。
（○○部分は任意の名前を入れてください）

sail artisan make:controller ○○Controller

コントローラーを下記のように編集します。

<?php

namespace App\Http\Controllers\○○;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class ○○Controller extends Controller
{
    public function index()
    {
        return view('○○.○○');
    }
}

次にViewsフォルダにbladeを追加します。

@extends('Layouts.layout')

@section('title', 'サービス一覧')

@section('contents')
    <a href="" style="text-decoration:none;">
        <div class="l-wrapper card-radius">
            <p class="card_title">タイトル</p>
            <article class="card">
                <div class="card_header">
                    <figure class="card_thumbnail">
                        <img src="画像のURL" alt="画像の説明" class="card_image">
                    </figure>
                </div>
                <div class="card_body">
                    <p class="card_text2">
                        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </article>
        </div>
    </a>
@endsection

cssは下記のようにします。

/* ブログカード */
/*--------------------------------------
  カード型
--------------------------------------*/
.l-wrapper {
    margin: 1rem auto;
    width: 600px;
  }
  .card-radius{
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
  }

  .card {
    background-color: #fff;
    box-shadow: 0 0 0px rgba(0, 0, 0, .16);
    color: #212121;
    text-decoration: none;
  }

  .card_header {
    display: flex;
    flex-wrap: wrap;
  }

  .card_title {
    padding: 1rem 1.5rem 0;
    font-size: 1.6rem;
    order: 1;
    font-weight: bold;
    text-decoration: none;
    /*線の種類（実線） 太さ 色*/
    border-bottom: solid 3px black;

  }

  .card_thumbnail {
    margin: 0;
    order: 0;
  }

  .card_image {
    width: 100%;
  }

  .card_body {
    padding: 0 1.5rem;
  }

  .card_text {
    font-size: .8rem;
    text-align:center;
    text-decoration: none;
  }

  .card_text2 {
    font-size: .8rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    width: 300px;
  }
/* ブログカード */

web.phpには下記を追加します。

Route::get('/○○', [○○Controller::class, 'index'])->name('index');

まとめ

今回は「MariaDB」からデータを取得して表示する方法を解説しました。

サイトを構築するうえで、DBは必須だと思います。

LaravelでDBを使用する際はぜひ「MariaDB」で構築してみてください。

Hachi System

【LaravelでPDF出力】LaravelでPDFを出力する方法を紹介！laravel-dompdfを利用します | Hachi System PDFを出力したい場合が業務などであると思います。お客様の要望でも多いでしょう。 PDF出力ができればそれを紙として印刷して使用できるので非常に便利です。今回はLarav…

よかったらシェアしてね！