[0004]レイアウト(layouts)を利用してViewを作成

■前提

この例では、Lalavelフレームワークのバージョンは5.5、ルートディレクトリのURLが[http://XXXX.jp/sample]、プロジェクト名は[sample]です。

ビュー(View)の場所は[プロジェクト名/resources/views/]ですので、この例では、[http://XXXX.jp/sample/tenant]で表示するViewのディレクトリはsample/resources/views/user/tenant/index.blade.phpとしています。

ここでは、HTMLファイルをLalavelの機能を活かしてViewにしていきたいと思います。元のHTMLファイル↓

index.html

              
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Failibere</title>
</head>

<body>
  <!--header S-->
  <div>
    <h1>Failibere</h1>
    <nav>
      <div>
        <ul>
          <li><a href="//www.failibere.com/greeting">代表者ごあいさつ</a></li>
          <li><a href="//www.failibere.com/vision">理念</a></li>
        </ul>
      </div>
    </nav>
  </div>
  <!--header E-->

  <main class="mainContent">
    <section>
      <div id="title" class="mainTitle01">
        <h2 class="lowTitle">会員登録<span class="en">registration</span></h2>
      </div>

      <div class="headerInArea01">
        <div class="lowArea">
          <div class="container">
            <ul class="breadcrumb">
              <li><a href="../">TOP</a></li>
              <li>会員登録</li>
            </ul>

            <div class="formArea01">
              <p class="topText">会員登録は下記フォームからお願いいたします<br>
              必須の項目は必ずご入力のうえ、「登録内容を確認」ボタンを押してください。</p>
              <form action="./conf.html" method="get">
                <table class="form01">
                  <tbody>
                    <tr>
                      <th>担当者氏名<span class="required">必須</span></th>
                      <td>
                        <input type="text" name="name" class="medium">
                      </td>
                    </tr>
                    <tr>
                      <th>電話番号<span class="required">必須</span></th>
                      <td>
                        <input type="tel" name="tel" placeholder="012-345-6789" class="medium">
                      </td>
                    </tr>
                  </tbody>
                </table>
                <p class="btn01">
                  <button type="submit" name="searchSubmit" value="conf">登録内容を確認</button>
                </p>
              </div>
            </form>

          </div>
        </div>
      </div>
    </section>
  </main>
  <!--footer S-->
  <div>
	<p class="copyright">Copyright(C) 2020 SYSTEM Failibere All Rights Reserved.</p>
  </div>
  <!--footer E-->

  <script src="/jquery.min.js"></script>

</body>
</html>

■layouts作成

レイアウト(layouts)はViewと同じ場所に配置します。レイアウトファイルを配置するフォルダlayoutsを作成します。この例ではsample/resources/views/layoutsです。layoutsにuser.blade.phpを作成します。layoutsファイル名は任意で決めてください。この例ではlayouts名を[user]にしています。

user.blade.php

              
<!DOCTYPE html>
<html lang="ja">
    <head>
  		<meta charset="UTF-8">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  		<meta name="description" content="">
  		<link rel="stylesheet" type="text/css" href="style.css">
  		<title>@yield('title')</title>
		@yield('original_script')
	</head>
<body>
  @include('layouts.user_header')

  <main class="mainContent">
    <section>
      <div id="title" class="mainTitle01">
        <h2 class="lowTitle">@yield('h2')<span class="en">@yield('h2_en')</span></h2>
      </div>

      <div class="headerInArea01">
        <div class="lowArea">
          <div class="container">
            <ul class="breadcrumb">
              <li><a href="../">TOP</a></li>
              <li>@yield('h2')</li>
            </ul>
			@yield('content')
          </div>
        </div>
      </div>
    </section>
  </main>

  @include('layouts.user_footer')
  @yield('after_script')
  <script>
    @yield('script')
  </script>
</body>
</html>

layouts(共通テンプレート)を作成しました。@include('layouts.user_header')や@include('layouts.user_footer')も共通テンプレートですが、ヘッダーとフッターは後から修正しやすいように別ファイルにし、@includeしています。

各Viewごとに違う文字やデザインを入れる場所は[@yield('呼び出す名前')]で設定します。@yield('content')など複数個所にyieldの記述があります。

@includeと@yieldの使い方はこれでOKです！！

ヘッダーとフッターのレイアウトも掲載します。HTMLのときと全く一緒ですね。

user_header.blade.php

              
  <!--header S-->
  <div>
    <h1>Failibere</h1>
    <nav>
      <div>
        <ul>
          <li><a href="//www.failibere.com/greeting">代表者ごあいさつ</a></li>
          <li><a href="//www.failibere.com/vision">理念</a></li>
        </ul>
      </div>
    </nav>
  </div>
  <!--header E-->

user_footer.blade.php

              
  <!--footer S-->
  <div>
	<p class="copyright">Copyright(C) 2020 SYSTEM Failibere All Rights Reserved.</p>
  </div>
  <!--footer E-->

■View修正

先ほど作成した共通テンプレートのレイアウト(layouts)をView側で利用します。

index.blade.php

              
@extends('layouts.user')

@section('title')
Failibere
@endsection

@section('h2')
会員登録
@endsection

@section('h2_en')
registration
@endsection


@section('content')
		<form action="./conf.html" method="get">
            <div class="formArea01">
              <p class="topText">会員登録は下記フォームからお願いいたします<br>
              必須の項目は必ずご入力のうえ、「登録内容を確認」ボタンを押してください。</p>

                <table class="form01">
                  <tbody>
                    <tr>
                      <th>担当者氏名<span class="required">必須</span></th>
                      <td>
                        <input type="text" name="name" class="medium">
                      </td>
                    </tr>
                    <tr>
                      <th>電話番号<span class="required">必須</span></th>
                      <td>
                        <input type="tel" name="tel" placeholder="012-345-6789" class="medium">
                      </td>
                    </tr>
                  </tbody>
                </table>

                <p class="btn01">
                  <button type="submit" name="searchSubmit" value="conf">登録内容を確認</button>
                </p>
              </div>
            </form>
@endsection

@section('after_script')
<script src="/jquery.min.js"></script>
@endsection

レイアウトの読込は@extends('レイアウトの配置場所＆ファイル名')です。@extends('layouts.user')でlayoutsフォルダに作成したuser_header.blade.phpを呼び出しています。レイアウトで各Viewごとに違う文字やデザインを入れる場所は[@yield('呼び出す名前')]で設定しています。@yieldにした場所は@section('呼び出す名前')で設定します。@yield('title')にセットしたいものは@section('title')と@endsectionで囲みます。

これにより@yield('title')には[Failibere]と入り表示されます。@extendsと@sectionの使い方はこれでOKです！！次はもっとLalavelを利用するため、Formファザードを利用したいと思います。[0005]Formファザードを利用してViewを作成 ページへ