副業におすすめなサイトを見る→

Laravelで別ファイルを読み込む方法!@include

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

Laravelで別ファイルを読み込ませたい場合はどうすればいいんだろう…

こんな疑問を解決します。

結論、@includeを使ってヘッダーやフッター、そのほかのファイルも読み込めます。

記事の中で@yield、@section、@extends、@includeとか出てきますが、

詳しい利用方法はLaravelの公式ドキュメント(blade)を参照ください。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

Contents

継承する親ファイルを作成する

共通のbladeファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    @yield('header')

    <div class="wrapper">
        <div class="main">
            @yield('content')
        </div>
    </div>

    @yield('footer')
    
</body>
</html>

読み込ませるファイルを作成する

まずはヘッダーやフッターを読み込ませるためにファイルを作成します。

ヘッダー

@section('header')
<div class="header">
    <h3>ヘッダー</h3>
</div>
@endsection

フッター

@section('footer')
<div class="footer">
    <h3>フッター</h3>
</div>
@endsection

@includeでヘッダーやフッターを読み込む

先ほどcommon > header, common > footerで定義した内容を@includeで読み込ませます。

@include(”)で指定するファイル名は、resources > viewsの後のファイル名を記載します。

@include(‘resources.views.layout.default’)ではなく、
@include(‘layout.default’)でOKです。

@extends('layout.default')

@include('common.header')

@section('content')
<h1>Post一覧画面</h1>
@endsection

@include('common.footer')

@includeでヘッダーとフッターを読み込んだので、以下のように表示できました。

@include

ヘッダーやフッターの読み込みができましたが、@section(‘content’)内で別のファイルを読み込むことも同様にできます。

ファイル名はなんでもいいですがわかりやすいように、resource > views > post配下にcomponentsディレクトリを作成し、main.blade.phpを作成します。

<p>main</p>

上記を呼び出しましょう。

@extends('layout.default')

@include('common.header')

@section('content')
<h1>Post一覧画面</h1>
@include('post.components.main')
@endsection

@include('common.footer')

@includeで変数を渡したい場合

@includeで指定したファイルに変数を渡したい場合もあるでしょう。

そのような時は、以下のように変数を渡せます。

@extends('layout.default')

@include('common.header')

@section('content')
<h1>Post一覧画面</h1>
@include('post.components.main', ['posts' => $posts])
@endsection

@include('common.footer')

渡す変数は、コントローラーで定義します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::get();
        return view('post.index', compact('posts'));
    }
}

渡された変数を表示させます。

<p>main</p>

@foreach ($posts as $post)
    {{ $post->id }}
    {{ $post->title }}
    {{ $post->content }}
@endforeach

渡された変数を表示できました。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

スキルを売り買いするならココナラ

コメント

コメントする

CAPTCHA


Contents
閉じる