社内サイト構築勉強⑤(さくらのレンタルサーバ+Laravel)：新規画面の作成

前提・概要

プロジェクトは前回記事にて作成したものを想定。

本日の完成形

カスタマイズした画面を表示できるようにする。

1.新規画面の作成

新規画面を作成する。ディレクトリ構成は下記を想定。
（名称の想定としては、受注した案件データを表示できる画面を想定。）

app
　└　Http
　　　└　Controllers
　　　　　　└　OrderController.php　・・・3
resources
　└　views
　　├　welcome.blade.php (topページ)・・・1
　　└　daily
　　　　└　order
　　　　　　　└　index.blade.php・・・4
routes
　└　web.php　・・・2

①topページからのhref設定

topページから新規ページへの画面遷移する設定を行う。

welcome.blade.php のメニュー部分

    ・・・
    <a class="collapse-item" href="/order">受注データ一覧</a>
    ・・・

②web.phpでのルーティング設定

業務ロジックになるためコントローラー経由にする。

web.php

    //追加
    Route::get('/order', [App\Http\Controllers\OrderController::class, 'index'])->name('order');

③コントローラーの作成

HomeController.php をコピーし、OrderController.phpを作成。
将来的には、indexメソッド以外に諸々作成すると思われる。

OrderController.php

// mod start
// class HomeController extends Controller
class OrderController extends Controller
// mod end
・・・
    public function index()
    {
        // mod start 
        // return view('home');
        return view('daily.order.index');
        // mod end
    }
}

④index.blade.phpの作成

テスト用にとりあえずの作成。

index.blade.php

test

⑤疎通確認

ローカルサーバを起動しておきメニューで設定した部分をクリック。
「test」と表示されるか確認する。

2.画面を共通化

画面追加の際の手順は共通であるため、追加方法を一般化できるようにする。
（メニューバーはそのままだったり、タイトル部分を変えたりとかは同じなので）

イメージとしては、topページのメニューバー以外の部分をコンテンツとしておき、
各ページ内容を埋め込むイメージ。

①トップページにコンテンツが共通部分であることを定義する

• タイトルの部分を埋め込みに変更
• コンテンツの部分を埋め込みに変更

welcome.blade.php のメニュー部分

welcome.blade.phpのContent Wrapperの部分を全て削除し、yieldに置き換える。

    // mod start
        <!-- <title>SB Admin 2 - Dashboard</title> --> // ←　削除する
        <title>@yield('title')</title>
    // mod end

    // mod start
    <!-- Content Wrapper -->
        <!-- ・・・ --> // ←　削除する
        @yield('content')
    <!-- End of Content Wrapper -->
    // mod end

②index.blade.php

先程作成した、index.blade.phpにて、title・contentの内容を作成する。

index.blade.php

@extends('welcome')
@section('title', '受注データ一覧')
@section('content')

受注データ一覧

@endsection

③動作確認

サーバ起動し、ブラウザにてアクセス。
タイトルおよびコンテンツの部分が変わっていることを確認する。
今後、画面を追加する際には、同様の手順で変更される部分だけを実装していく。