前提

PHPを使ったWebアプリケーションの開発知識が必要になったので、開発過程の備忘録、知識のインプット・アウトプットを目的としている。

環境

macOS Catalina 10.15.3
Laravel 7.10.3
PHP 7.3.11

備忘録5　目次

HTML/CSSで作成した画面をBladeを使って表示
- Bladeを使ってテンプレートを作る
- コントローラーの作成
- 表示

HTML/CSSで作成した画面をBlade構文を使って表示

Bladeを使ってテンプレートを作る

Laravelには標準で独自のテンプレートエンジン「Blade」なるものが搭載されている。

Bladeに関して詳しく載っているサイト→「Laravel 7.x Bladeテンプレート」

今回はBladeの効率的にレイアウトを作成する機能を使って、テンプレートを作成する。
ディレクトリ　resources/views/layouts/nanaita.blade.php

nanaita.blade.php

<!DOCTYPE html>
<html lang="ja">
<html>

<head>
  <meta charset="utf-8">
  <link rel="icon" typ="image/png" href="images/ball.png">
  <title>@yield('title')</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="なないちスケジュール共有アプリ">
  <!--css-->
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
</head>

<body>
  <header class="page-header">
    <h1>
      <a href="index.html"><img class="logo" src="images/ball.png" alt="なないち"></a>
      <a class="logo-font" href="index.html">なな板</a>
    </h1>
    <nav>
      <ul class="main-nav">
        <li><a href="boad.html">掲示板</a></li>
        <li><a href="sche.html">スケジュール</a></li>
        <li><a href="list.html">メンバー</a></li>
        <li><a href="mypage.html">マイページ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div class="page-title">
        <h1>@yield('headline')</h1>
    </div>
    @yield('content')
  </main>

  <footer>
      <div class="wrapper">
          <p><small>&copy; 2020 oritanien</small></p>
      </div>
  </footer>
</body>

</html>

このレイアウト用のテンプレートを継承して、実際にWebページに使うテンプレートを作成する。
ディレクトリ　resource/views/nanaita/topmenu.blade.php

topmenu.blade.php

@extends('layouts.nanaita')

@section('title','なな板　メニュー')

@section('content')
<div class="wrapper grid">
  <div class="item">
    <a href="boad.html">
    <img src="images/boad.png" alt="">
    <p>掲示板</p>
    </a>
  </div>
  <div class="item">
    <a href="sche.html">
    <img src="images/sche.png" alt="">
    <p>スケジュール</p>
    </a>
  </div>
  <div class="item">
    <a href="list.html">
    <img src="images/list.png" alt="">
    <p>メンバー</p>
    </a>
  </div>
  <div class="item">
    <a href="mypage.html">
    <img src="images/mypage.png" alt="">
    <p>マイページ</p>
    </a>
  </div>
</div>
@endsection

@extends('フォルダ名.ファイル名')でレイアウト用のテンプレートを継承。
@yield('名前')で指定したところに、@section('名前','内容')、もしくは、@section('名前')内容@endsectionで、表示させたい内容をはめ込む。

cssと画像を適用するには、publicの下にファイルを置く。

これでテンプレートは完成

コントローラーの作成

ターミナルからコントローラーを作成。

php artisan make:controller NanaitaContoroller

app/Http/ControllersにNanaitaController.phpが作成されている。
表示するためのアクションを追加

NanaitaController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class NanaitaController extends Controller
{
    public function topmenu()
    {
      return view('nanaita.topmenu');
    }
}

最後に、routes/web.phpにルート情報を記述

web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('topmenu', 'NanaitaController@topmenu');

画面の表示

ターミナルからサーバーを起動

php artisan serve

http://localhost8000/topmenu
にアクセス。

特にエラーも無く表示できた。

おわりに

今回はテンプレートを作成し、画面表示まで行った。また、コントローラーを作成し、コントローラーを使って画面を表示した。
次回はデーターベースであるMySQLに接続する。

PHPで初めてのWebアプリケーション開発 Bladeで画面表示 備忘録5

前提

環境

備忘録5 目次