演習課題「Bootstrapを導入した共通テンプレートを利用する」
右の環境には、Laravelを使って「mydiary」アプリケーションディレクトリを作成してあります。
「ArticleController.php」の、記事一覧を表示するindex()メソッドがindex.blade.phpをビューとして呼び出します。また、共通テンプレートのlayout.blade.phpは、Bootsrapを利用できるようになっています。
この共通テンプレートを利用して表示するよう、記事一覧のビュー(index.blade.php)を修正してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
※ 採点時は、サーバを起動し、問題文に関するページにアクセスできる状態にしてください。
＃06:共通テンプレートにBootstrapを導入しよう
ここでは、Lunchmapアプリの共通テンプレートを追加します。HTMLフレームワークのBootstrapを導入して、ナビゲーションバーを追加します。
resources/views/layout.blade.php<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Lunchmap</title>
<style>body {padding: 80px;}</style>
</head>
<body>
@yield('content')
</body>
</html>
resources/views/index.blade.php@extends('layout')
@section('content')
<h1>お店一覧</h1>
@foreach ($shops as $shop)
<p>
{{ $shop->category->name }},
{{ $shop->name }},
{{ $shop->address }}
</p>
@endforeach
@endsection
resources/views/layout.blade.php<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' >
<title>Lunchmap</title>
<style>body {padding-top: 80px;}</style>
</head>
<body>
<nav class='navbar navbar-expand-md navbar-dark bg-dark fixed-top'>
<a class='navbar-brand' href={{route('shop.list')}}>Lunchmap</a>
</nav>
<div class='container'>
@yield('content')
</div>
</body>
</html>
### Bladeテンプレートエンジン
Bladeテンプレート 5.6 Laravel
https://readouble.com/laravel/5.7/ja/blade.html
【Laravel】Viewのbladeの書き方 - Qiita
https://qiita.com/sola-msr/items/a128f4e0900f3541690c
### ビューの共通化
LaravelのBladeテンプレートでレイアウト部分を共通にする | cly7796.net
http://cly7796.net/wp/php/to-a-common-layout-in-blade-template-of-laravel/
Blade テンプレートについて - Laravel学習帳
http://laraweb.net/knowledge/2174/
動画ではlaravel5.7を使用していますが、現在はより新しいLaravel5.8が公開されています。
`$ laravel new`で作成したプロジェクトはその時点で最新のLaravelがダウンロードされるため、時期によっては動画と全く同じコードでは無いかもしれませんが2019年3月現在大幅な変更はされていないので大きな影響はありません。
例えば、以下のような違いが見られる場合があります。
### artisan make:modelで作成したマイグレーションファイル
以前はidカラムがincrementsで定義されていましたが、新しくbigIncrementsで定義されるようになります。
これはデータベースのカラムの型に影響しincrements() : 符号なし4byte整数
bigIncrements() : 符号なし8byte整数
となります。
符号なし8byte整数(2\^64通り)は、符号なし4byte整数(2\^32通り)の2\^32倍 = 4,294,967,295倍もの空間を持っています。
bigIncrements()でIDを定義するとincrements()にくらべてこれだけの余裕ができ、より多くのデータを格納できるようになるというわけです。 public function up()
{
Schema::create('Shop', function (Blueprint $table) {
// ここがbigIncrementsになっている
$table->bigIncrements('id');
$table->timestamps();
});
}
### AppServiceProvider.phpの関数の順番が異なる
AppServiceProvider.phpの関数が動画と違う並び順になっている場合があります。
並び順が異なるだけでメソッドそのものは変わっていませんので、目的のメソッドの位置を確認してください。
paiza cloud向けのHTTPSの設定はboot()メソッドに記述します。class AppServiceProvider extends ServiceProvider
{
// メソッドの並び順が逆になっている
public function register()
{
//
}
public function boot()
{
//
}
}
### 404エラーのデザインが変わっている
404エラーが発生した場合（アクセス先のURLを間違えた場合など）に表示されてるエラーページのデザインがシンプルなものへ変更されました。
paizaラーニングの講座でも存在しないURLへアクセスすれば表示されますので、興味があれば確認してみましょう。
### laravelの更新情報（英語）
- [Release Notes - Laravel](https://laravel.com/docs/5.8/releases)
- [Laravel News](https://laravel-news.com/)