--- title: Laravel でベーシックなWEBサイトを作る tags: laravel5.5 Laravel blade author: Takahisa1984 slide: false --- 前提条件: composer、PHP >= 7.0.0 且つ、Mysql5.7*が使用可能な状態のMacであること まずはどこかにディレクトリを作って、そこに移動しましょう。 ``` $ mkdir larabasicweb $ cd larabasicweb ``` 移動したら、新規にlaravelプロジェクトを作ります。 バージョンに5.5を指定して最新版をインストールします。 ``` $ composer create-project laravel/laravel larabasicweb "5.5.*" Application key XXXXXXXXXうにゃうにゃでます set successfully. ``` set successfully. と出ていたらインストールが完了です。インストールが終わりましたら、今作成したプロジェクトのディレクトリへ移動しておきましょう。 また、エディタでもプロジェクトを開いておきます。 ``` $ cd larabasicweb ``` リポジトリの初期化とコミットをしておいても良いでしょう。 ``` $ git init $ git add . $ git commit -m "init Laravel Project" ``` それでは、下記のコマンドを入力し、早速サーバーを起動して確認してみましょう。 ``` $ php artisan serve ``` http://localhost:8000/ にアクセスします。 スクリーンショット 2018-08-25 13.49.26.png この画面が出ていたら成功です。 次にビューファイルを作成しましょう。 カレントディレクトリから、resources ディレクトリを探して、その中にある、viewsというディレクトリの中を見てみましょう。 welcome.blade.phpというファイルがひとつだけあるかと思います。それが今表示に使われている、bladeと呼ばれるテンプレートエンジンのファイルになります。 Laravel では、Blade と呼ばれるテンプレートエンジンが使われています。 早速、このビューファイルを作成して行きます。 viewsディレクトリ以下に、下記の3つのファイルを作成しましょう。 ※コマンドではなく手動で作成します。 home.blade.php about.blade.php contact.blade.php ここまでできたら、それぞれのビューファイル(bladeテンプレート)を表示する作業に移ります。 下記のコマンドを入力して Controller を作りましょう。 クライアントがアクセスすると、呼び出されたコントローラからテンプレートが読み込まれて、テンプレートエンジン(balde)によって、レンダリングされるイメージです。 ``` $ php artisan make:controller PagesController ``` Controller created successfully.と表示されれば完了です。 Controller は、appディレクトリの中の、Httpの中にある、Conttollersディレクトリに作成されます。 app/Http/Controllers/PagesController.php という構成ですね。 PagesController.php が作成できたら、そのファイルを開いてましょう。 ```PagesController.php あああ ``` でも良いので、入力して上書き保存し、ブラウザから確認してみましょう。表示されておりますでしょうか。 簡単にこのルーティングファイルの説明をしておきますと、'/'や'/about'へ、getリクエストをしたときに、PagesController.phpが動き、@以下にあります、先ほどPagesControllerに記載した、getHomeメソッドや、getAboutメソッドが対応してデータをビューに受け渡すという処理の流れをしています。 ここからは、bladeテンプレートについて、もう少し見ていきましょう。 まずは、resources/views/に、新たに layouts ディレクトリを作成しましょう。 そこには、下記のファイルを作成しておきます。 app.blade.php ファイルを開き、下記のように書いて保存しましょう。 ```app.blade.php larabasicweb @include('inc.navbar')
@yield('content')
``` それが済んだら、今度は、 resources/views/に、新しく inc ディレクトリを作成し、以下のbladeファイルを作成しましょう。 navbar.blade.php ```navbar.blade.php ``` それでは、ブラウザから確認してみましょう! bootstrap が適用されて割と綺麗に表示されているかと思います。 あれ? とお思いかもしれませんが、Laravel には、標準でbootstrapが組み込まれてるからなんですね。 それは、app.blade.php の中の下記のコードを書くことで適用されます。 ```app.blade.php ``` ここまで確認できたところで、少しbladeの説明をします。 home.blade.phpや、about.blade.phpの中に、 ```home.blade.php extends('layouts.app') ``` という箇所があるかと思います。これは、layoutsディレクトリの中のapp.balde.phpを継承しているということです。 そのため、app.blade.phpを各ページ共通のファイルとして使いまわすことができています。 そして、app.blade.php の中に、 ```app.blade.php @yield('content') ``` という箇所があるかと思います。これは、home.blade.php や about.blade.php の中の、 ```home.blade.php @section('content') @endsection ``` の中の内容に、それぞれ対応しています。そうして各ページのコンテンツを表示させています。 次回は、お問い合わせの処理のところについて解説を書く予定です。 コード全体を見たい方は以下のリンクからどうぞ! https://github.com/thousandbeach/laravelbasicweb はい、その次回がやってまいりました!  約1ヶ月が過ぎようとしておりますが、いかがお過ごしでしょうか。 月日が経つのは早いものですね〜 さて、第2回目の今回は、お問い合わせの画面・処理についての解説です。 お問い合わせのところに入る前に、前回では触れなかったところに触れておこうと思います。 ( githubの方に上がっているコードの本体からは、bladeファイルのCDNを除き※、実装部分に関しまして新たな変更はございません。 ここのお話は最初にやっておくことが多いので、既に終えられている方は読み飛ばしていただいてかまいません。 ※ app.blade.php のハンバーガーメニューが開いておりませんでした。大変申し訳ございません。開くようにBootstrapのJavaScript, jQueryのCDNを追加させていただきました。本稿の app.blade.php にも反映済みでございます。 ) まず、App\Providersの中の、AppServiceProvider.php を開きましょう。その中のbootメソッドに、下記のコードのように追記します。 5.4以降のLaravelでは、migration時に、カラムの最大値を変更しなかった場合、255文字まで入るように設計されています。しかしながら、MySQLではPRIMARY_KEYおよびUNIQUE_KEYを付けたカラムには最大767bytesまでしか入らないこの問題を放置したままmigrationしますと、当然、コケます。そうならないように、下記の設定をしておきましょう。 (https://qiita.com/beer_geek/items/6e4264db142745ea666f) >1. Laravel5.4から標準charasetがutf8mb4に変わった 標準charasetがutf8mb4となったことで1文字あたりの最大byte数が4bytesに増えた。 2. MySQLではユニーク制約を付けたカラムには767bytesまでしか入らない MySQLではPRIMARY_KEYおよびUNIQUE_KEYを付けたカラムには最大767bytesまでしか入らないらしい。 ver5.7.7以降だと解消されている模様。 以下 公式ドキュメント日本語訳より抜粋 >インデックス長とMySQL/MariaDB Laravelはデータベース中への「絵文字」保存をサポートするため、デフォルトでutf8mb4文字セットを使っています。バージョン5.7.7より古いMySQLや、バージョン10.2.2より古いMariaDBを使用している場合、マイグレーションにより生成されるデフォルトのインデックス用文字列長を明示的に設定する必要があります。AppServiceProvider中でSchema::defaultStringLengthを呼び出してください。 ```AppServiceProvider.php use Illuminate\Support\Facades\Schema; /** * 全アプリケーションサービスの初期起動処理 * * @return void */ public function boot() { Schema::defaultStringLength(191); } ``` 続いて、前回作成しました、以下の3つのbladeファイルに、それぞれ追記してしまいましょう。 home.blade.php about.blade.php contact.blade.php 先に、home.blade.php と about.blade.php から見てみます。この2つのファイルは同様のことをしています。 ```home.blade.php @extends('layouts.app') @section('content')

私のWEBサイトへ
ようこそ!

来てくれてありがとう!


@endsection ``` ```about.blade.php @extends('layouts.app') @section('content')

私について


遅れてきた新人 Laravel好き 筋肉ララベラー目指したい!


@endsection ``` 前回、説明しました、@extendsの中に、layousts.app を書き、 app.blade.php の内容を継承していますし、@yield の中身に、@section の内容を当てています。 ここまでできましたら、3つ目の contact.blade.php に入りましょう。 contact.blade.php は、お問い合わせページですね! 早速作っていきましょう。 まずは、下準備から行います。Laravel本体には入っておりませんが、便利なライブラリがあるので、それを使用してみましょう。laravelcollectiveというものです。 これは、Laravel本体から外されたパッケージを有志の方々がメンテナンスしているプロジェクトです。 https://laravelcollective.com/ リンク先のドキュメントには、5.5 の記載がありませんが、ファイル自体は存在します。 ルートディレクトリの、composer.json の require の項目の中に "laravelcollective/html": "5.5.*" を追加しましょう。 下記のように書きます。 ```composer.json "require": { "php": ">=7.0.0", "fideloper/proxy": "~3.3", "laravel/framework": "5.5.*", "laravel/tinker": "~1.0", "laravelcollective/html": "5.5.*" }, ``` 追記できたら、下記のコマンドを打ちます。 ``` $ composer update ``` これで、使用する準備が整いました。 早速実装していきましょう。 ```contact.blade.php @extends('layouts.app') @section('content')

お問い合わせ

{!! Form::open(['url' => 'contact/submit']) !!}
{{Form::label('name', 'お名前')}} {{Form::text('name', '', ['class' => 'form-control', 'placeholder' => 'お名前'])}}
{{Form::label('email', 'メールアドレス')}} {{Form::text('email', '', ['class' => 'form-control', 'placeholder' => 'メールアドレス'])}}
{{Form::label('message', 'メッセージ')}} {{Form::textarea('message', '', ['class' => 'form-control', 'placeholder' => 'メッセージ'])}}
{{Form::submit('送 信', ['class'=> 'btn btn-primary'])}}
{!! Form::close() !!} @endsection ``` Form::open() でフォームを開始して、 Form::close() でフォームを終了しています。これは
フォーム内
に対応しており、実際に
タグが生成されていきます。 尚、フォームを作成時は、デフォルトの状態で POST メソッドとなります。 Form::label() は第一引数に、後に作ります、 Message モデルのインスタンスである $messages のカラムを持ってきます。尚、第二引数は