前提条件：
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/ にアクセスします。
この画面が出ていたら成功です。
次にビューファイルを作成しましょう。
カレントディレクトリから、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 が作成できたら、そのファイルを開いてましょう。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
//
}
開いたら、この中の、PagesControllerクラスの中に、先ほど作ったbladeファイルへデータを受け渡すためのコードを書いていきます。
class PagesController extends Controller
{
// Homeを表示
public function getHome(){
return view('home');
}
// Aboutを表示
public function getAbout(){
return view('about');
}
// Contactを表示
public function getContact(){
return view('contact');
}
}
これで、先ほどの3つのbladeファイルへ、データが受け渡されるようになりました。
次に、ルーティングの設定をしておきましょう。
routes/web.php のファイルを開いて、下記のように記載すればOKです。
ルーティングの設定をすることで、いよいよ、ビューが表示されるようになります。
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
// 必要ないのでコメントアウト
/*Route::get('/', function () {
return view('welcome');
});*/
Route::get('/', 'PagesController@getHome');
Route::get('/about', 'PagesController@getAbout');
Route::get('/contact', 'PagesController@getContact');
ファイルを上書き保存したら、http://localhost:8000/about, /homeでも良いので確認してみましょう。
すると、ブラウザの画面上にはまだ何も表示されていませんが（bladeファイルに何も書いていないため）、ビュー自体は出力できているはずです。
試しに、about.blade.php へ、
<h1>あああ</h1>
でも良いので、入力して上書き保存し、ブラウザから確認してみましょう。表示されておりますでしょうか。
簡単にこのルーティングファイルの説明をしておきますと、'/'や'/about'へ、getリクエストをしたときに、PagesController.phpが動き、@以下にあります、先ほどPagesControllerに記載した、getHomeメソッドや、getAboutメソッドが対応してデータをビューに受け渡すという処理の流れをしています。
ここからは、bladeテンプレートについて、もう少し見ていきましょう。
まずは、resources/views/に、新たに layouts ディレクトリを作成しましょう。
そこには、下記のファイルを作成しておきます。
app.blade.php
ファイルを開き、下記のように書いて保存しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<head>
<meta charset="utf-8">
<title>larabasicweb</title>
<link rel="stylesheet" type="text/css" href="/css/app.css">
<!-- Bootstrap CSS 今回は使いません -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
@include('inc.navbar')
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8 col-lg-8">
@yield('content')
</div>
</div>
</div>
<footer id="footer" class="text-center">
<p>Copyright 2018 © takabo </p>
</footer>
</body>
</html>
それが済んだら、今度は、
resources/views/に、新しく inc ディレクトリを作成し、以下のbladeファイルを作成しましょう。
navbar.blade.php
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">larabasicweb</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="{{Request::is('about') ? 'active' : ''}}"><a href="/about">私について</a></li>
<li class="{{Request::is('contact') ? 'active' : ''}}"><a href="/contact">お問い合わせ</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
それでは、ブラウザから確認してみましょう！
bootstrap が適用されて割と綺麗に表示されているかと思います。
あれ？ とお思いかもしれませんが、Laravel には、標準でbootstrapが組み込まれてるからなんですね。
それは、app.blade.php の中の下記のコードを書くことで適用されます。
<link rel="stylesheet" type="text/css" href="/css/app.css">
ここまで確認できたところで、少しbladeの説明をします。
home.blade.phpや、about.blade.phpの中に、
extends('layouts.app')
という箇所があるかと思います。これは、layoutsディレクトリの中のapp.balde.phpを継承しているということです。
そのため、app.blade.phpを各ページ共通のファイルとして使いまわすことができています。
そして、app.blade.php の中に、
@yield('content')
という箇所があるかと思います。これは、home.blade.php や about.blade.php の中の、
@section('content')
@endsection
の中の内容に、それぞれ対応しています。そうして各ページのコンテンツを表示させています。
次回は、お問い合わせの処理のところについて解説を書く予定です。
コード全体を見たい方は以下のリンクからどうぞ！
https://github.com/thousandbeach/laravelbasicweb
はい、その次回がやってまいりました！ 約１ヶ月が過ぎようとしておりますが、いかがお過ごしでしょうか。
月日が経つのは早いものですね〜
さて、第２回目の今回は、お問い合わせの画面・処理についての解説です。
お問い合わせのところに入る前に、前回では触れなかったところに触れておこうと思います。
（ 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)
- Laravel5.4から標準charasetがutf8mb4に変わった
標準charasetがutf8mb4となったことで1文字あたりの最大byte数が4bytesに増えた。
- 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を呼び出してください。
use Illuminate\Support\Facades\Schema;
/**
* 全アプリケーションサービスの初期起動処理
*
* @return void
*/
public function boot()
{
Schema::defaultStringLength(191);
}
続いて、前回作成しました、以下の３つのbladeファイルに、それぞれ追記してしまいましょう。
home.blade.php
about.blade.php
contact.blade.php
先に、home.blade.php と about.blade.php から見てみます。この２つのファイルは同様のことをしています。
@extends('layouts.app')
@section('content')
<div class="jumbotron text-center">
<div class="container">
<h1>私のWEBサイトへ<br>ようこそ!</h1>
</div>
</div>
<div>
<h2 class="text-center">来てくれてありがとう！</h2><br>
</div>
@endsection
@extends('layouts.app')
@section('content')
<h1 class="text-center">私について</h1><br>
<p class="text-center">遅れてきた新人 Laravel好き 筋肉ララベラー目指したい！</p><br>
@endsection
前回、説明しました、@extendsの中に、layousts.app を書き、 app.blade.php の内容を継承していますし、@yield の中身に、@section の内容を当てています。
ここまでできましたら、３つ目の contact.blade.php に入りましょう。
contact.blade.php は、お問い合わせページですね！
早速作っていきましょう。
まずは、下準備から行います。Laravel本体には入っておりませんが、便利なライブラリがあるので、それを使用してみましょう。laravelcollectiveというものです。 これは、Laravel本体から外されたパッケージを有志の方々がメンテナンスしているプロジェクトです。
リンク先のドキュメントには、5.5 の記載がありませんが、ファイル自体は存在します。
ルートディレクトリの、composer.json の require の項目の中に "laravelcollective/html": "5.5.*" を追加しましょう。 下記のように書きます。
"require": {
"php": ">=7.0.0",
"fideloper/proxy": "~3.3",
"laravel/framework": "5.5.*",
"laravel/tinker": "~1.0",
"laravelcollective/html": "5.5.*"
},
追記できたら、下記のコマンドを打ちます。
$ composer update
これで、使用する準備が整いました。 早速実装していきましょう。
@extends('layouts.app')
@section('content')
<h1>お問い合わせ</h1>
{!! Form::open(['url' => 'contact/submit']) !!}
<div class="form-group">
{{Form::label('name', 'お名前')}}
{{Form::text('name', '', ['class' => 'form-control', 'placeholder' => 'お名前'])}}
</div>
<div class="form-group">
{{Form::label('email', 'メールアドレス')}}
{{Form::text('email', '', ['class' => 'form-control', 'placeholder' => 'メールアドレス'])}}
</div>
<div class="form-group">
{{Form::label('message', 'メッセージ')}}
{{Form::textarea('message', '', ['class' => 'form-control', 'placeholder' => 'メッセージ'])}}
</div>
<div>
{{Form::submit('送 信', ['class'=> 'btn btn-primary'])}}
</div>
{!! Form::close() !!}
@endsection
Form::open() でフォームを開始して、 Form::close() でフォームを終了しています。これは
フォーム内 に対応しており、実際にタグが生成されていきます。 尚、フォームを作成時は、デフォルトの状態で POST メソッドとなります。Form::label() は第一引数に、後に作ります、 Message モデルのインスタンスである $messages のカラムを持ってきます。尚、第二引数はタグの中身となります。
Form::text() の第一引数は Form::label() と同じく $messages の カラムを持ってきます。 それにより、 が生成され、 Form::textarea() には、が生成されます。
Form::submit('送 信') はを生成する関数で、第一引数に書いた名前で表示されます。 送信しますと、 Form::open($messages, ['url' => 'contact/submit']) の指定されたURLへ、フォームの入力内容が送信されていきます。
ここまでできたところで、永続化の作業に移ります。
と、その前に、細かい設定をやってしまいましょう。
config/app.php(一部抜粋) を下記のように設定します。デフォルトのローカルを指定します。
'timezone' => 'Asia/Tokyo',
/*
|--------------------------------------------------------------------------
| Application Locale Configuration
|--------------------------------------------------------------------------
|
| The application locale determines the default locale that will be used
| by the translation service provider. You are free to set this value
| to any of the locales which will be supported by the application.
|
*/
'locale' => 'ja',
/*
|--------------------------------------------------------------------------
| Application Fallback Locale
|--------------------------------------------------------------------------
|
| The fallback locale determines the locale to use when the current one
| is not available. You may change the value to correspond to any of
| the language folders that are provided through your application.
|
*/
'fallback_locale' => 'ja',
続いて、アプリケーションの環境設定を行います
.envファイルを開きましょう。（隠しファイルになっていますので注意）
ルートディレクトリで 下記のコマンドを叩いてコマンドの下のように、一部を書き換えましょう。
$ vim .env
DB_DATABASE=laravelbasicweb
DB_USERNAME=root
DB_PASSWORD=
データベース名 laravelbasicweb に、 root ユーザでパスワード無しでログイン（ mysql -uroot ）して、 実行する（ use laravelbasicweb ) ということになりますね。
ここまでできたら、データベースの作成に入ります。
データベースの起動確認・起動
$ mysql.server status
$ mysql.server start
データベースへログイン
$ mysql -u root
データベースの作成（.envと合わせます）
mysql> CREATE DATABASE laravelbasicweb;
ここまでできたら、モデルと一緒にマイグレーションファイルも作成してしまいましょう。
下記のコマンドを叩きましょう。
$ php artisan make:model Message --migration
入力後、app/Message.php と config/xxxxx_create_messages_table.php が出来上がります。
xxxxx_create_messages_table.php から見ていきましょう 。 // 追加 というところを追記してみてください。
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateMessagesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('messages', function (Blueprint $table) {
$table->increments('id');
$table->string('name'); // 追加
$table->string('email'); // 追加
$table->mediumText('message'); // 追加
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('messages');
}
}
// 追加 と書かれたこのカラムが、先ほど作成しました contact.blade.php のフォームの部分と重なってきます。