つくるもの

タスクの追加
タスクの削除
タスクの一覧表示

ができるシンプルなtodoリストを作る。

学べること

ルーティング
DBマイグレーション
Eloquent ORM
バリデーション
Blade

注意点

Laravel5.3のドキュメントにはQuick Startがなくなっているので、ページ右上のプルタブで 5.2 を選択。
（ 実際に使うverは5.3 ）

アジェンダ

ドキュメントとは少し順番が前後するので注意。

インストール（Installation）
DB接続先の変更
ルート・画面の作り方（Routing / Building Layouts & Views）
マイグレーション（Prepping The Database > Database Migrations）
Eloquent ORM（Prepping The Database > Eloquent Models）
タスクの追加（Adding Tasks）
タスクの削除（Deleting Tasks）
完成済みソースコードのご案内

1. インストール

Composerのインストール

LaravelはComposerでインストールするので、まずは公式サイトでComposerをインストール。
インストール済みの場合はスキップ。

Laravelのインストール

ターミナルで次のコマンドを打てば「quickstart」という名前のプロジェクトが落ちてくる。

composer create-project laravel/laravel quickstart --prefer-dist

ターミナルでディレクトリ内に移動、Composerをインストールする。

cd ~/quickstart
composer install

サーバーを起動する。

php artisan serve

http://localhost:8000/にホーム画面が表示される。

2. DB接続先の変更

Homesteadを使ってもいいですが、さくっとつくりたいならsqliteで。

.envファイルの接続先を変更

初期状態ではMySQLになっているので.envファイル内のDB_CONNECTIONをsqliteに書き換える
DB_HOST DB_PORT DB_DATABASE DB_USERNAME DB_PASSWORDの前に#をつけてコメントアウト

SQLiteファイルの作成

databaseディレクトリ内にdatabase.sqliteをつくる。

touch database/database.sqlite

3. ルート・画面の作り方

ルート

アプリケーションのurlなどを書くところで、起点となるファイルはroutes/web.php。

タスクの一覧表示
タスクの追加
タスクの削除

の３つの操作についてのルートを書く。

web.php

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

Route::post('/task', function () {
    //
});

Route::delete('/task/{task}', function () {
    //
});

画面（ビュー）

Laravelでは Blade というテンプレートエンジンが使える（.phpも可）。
大きなメリットとして 子ビューが親ビューを継承できる、ヘッダーなどの共通部分を読み込める、などレイアウトの部品化が可能 である。

Bladeの特徴

拡張子は.blade.php
ビューの置き場所はresources/views
データの埋め込みは{{ $hoge }}
コメントの記法は{{--コメント--}}

エラービューの作成（共通部品）

resources/views/common/errors.blade.phpを作成し以下のコードを貼り付ける。

errors.blade.php

@if (count($errors) > 0)
        <!-- Form Error List -->
<div class="alert alert-danger">
    <strong>Whoops! Something went wrong!</strong>

    <br><br>

    <ul>
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

親ビューの作成

resources/views/layouts/app.blade.phpを作り以下のコードを貼り付ける。

app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Laravel Quickstart - Basic</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,700" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        body {
            font-family: 'Raleway';
            margin-top: 25px;
        }

        button .fa {
            margin-right: 6px;
        }

        .table-text div {
            padding-top: 6px;
        }
    </style>
    <script>
        $(function () {
            $('#task-name').focus();
        });
    </script>
</head>

<body>
<div class="container">
    <!-- Create Task Form... -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <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="#">Task List</a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    &nbsp;
                </ul>
            </div>
        </div>
    </nav>

    <!-- Current Tasks -->
</div>

@yield('content')

</body>
</html>

子ビューの作成

resources/views/task.blade.phpに以下のコードを貼り付ける。

@extendでレイアウトを継承する親ビューを指定
@includeで共通部品を読み込む
@section('content')に親ビューの@yield('content')に挿入したい内容を記述

task.blade.php

<!-- resources/views/tasks.blade.php -->

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="panel-body">
        <!-- Display Validation Errors -->
        @include('common.errors')

        <!-- New Task Form -->
        <form action="{{ url('task') }}" method="POST" class="form-horizontal">
            {{ csrf_field() }}

            <!-- Task Name -->
            <div class="form-group">
                <label for="task" class="col-sm-3 control-label">Task</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="task-name" class="form-control">
                </div>
            </div>

            <!-- Add Task Button -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> Add Task
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- TODO: Current Tasks -->
</div>
@endsection

画面を表示

routes/web.phpに以下を追記。

web.php

/** Show Task Dashboard **/
Route::get('/', function () {
    return view('task');
});

http://localhost:8000にアクセスするとtask.blade.phpの中身が表示される。
task.blade.phpは親ビューであるapp.blade.phpのレイアウトを継承している。

4. マイグレーション

マイグレーションファイルの作成

php artisan make:migration create_tasks_table --create=tasks

とするとdatabase/migrationsの中に☓☓☓☓_☓☓_☓☓_☓☓☓☓☓☓_create_tasks_table.phpができる。
これは マイグレーションファイル というDBの設計図のようなものである。

マイグレーションファイルの編集

up()にはDB作成時の命令、down()にはDB削除時の命令を書く。
デフォルトでidとtimestampsが設定されているので、nameという項目を追加することにする。

☓☓☓☓_☓☓_☓☓_☓☓☓☓☓☓_create_tasks_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTasksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name'); //追加
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('tasks');
    }
}

マイグレーションの実行

php artisan migrate

これでid name created_at updated_atの４項目を持つテーブルがDBにできている。

マイグレーションコマンド

php artisan migrate:install    // migrationsファイルだけ作成
php artisan migrate:rollback   // 直近のマイグレーションの巻き戻し
php artisan migrate:reset      // 全てのマイグレーションを巻き戻し
php artisan migrate:refresh   // migrate:reset後、マイグレーション実行
php artisan migrate:status     // マイグレーション実行状況の確認

この記事とかおすすめ。

5. Eloquent ORM

Laravelには Eloquent というORMがあり、これを使うと簡単にDBのデータを取得できたりする。

モデルの作成

php artisan make:model Task

appディレクトリ内にTask.phpができる（使用方法は後述）

6. タスクの追加

バリデーション

テーブルにつくったnameという項目についてが10文字以下になるようにバリデーションを追加する。

web.php

Route::post('/task', function (Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required|max:10',
    ]);

    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    // Create The Task...
});

もしバリデーションに引っかかればエラーメッセージを表示し、/にリダイレクトする。

タスクを追加する

Eloquent ModelであるTask.phpを使ってタスクを作成
saveメソッドで保存
作成後は/にリダイレクト

web.php

Route::post('/task', function (Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);

    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    $task = new Task;
    $task->name = $request->name;
    $task->save();

    return redirect('/');
});

タスクを一覧表示する

/のルートを以下のように書き換える。

web.php

Route::get('/', function () {
    $tasks = Task::orderBy('created_at', 'asc')->get();

    return view('task', [
        'tasks' => $tasks // このデータがtask.blade.phpで使えるようになる
    ]);
});

Eloquentを使ってDBのタスクを全て取得

$tasks = Task::orderBy('created_at', 'asc')->get();

orderByは並び替えるメソッド、最後にget( ) で呼び出すことでDBの値を全件取得。
第二引数のascは大きくなっていく順（昇順）、descにすれば小さくなっていく順（降順）になる。

取得したタスクを一覧表示

view関数の第二引数に配列でデータを渡すとビューで使えるようになる。

task.blade.php

<!-- resources/views/tasks.blade.php -->

@extends('layouts.app')

@section('content')
<div class="container">
    <!-- Create Task Form... -->

    <!-- Current Tasks -->
    @if (count($tasks) > 0)
        <div class="panel panel-default">
            <div class="panel-heading">
                Current Tasks
            </div>

            <div class="panel-body">
                <table class="table table-striped task-table">

                    <!-- Table Headings -->
                    <thead>
                    <tr>
                        <th>Task</th>
                        <th>&nbsp;</th>
                    </tr>
                    </thead>

                    <!-- Table Body -->
                    <tbody>
                    @foreach ($tasks as $task)
                        <tr>
                            <!-- Task Name -->
                            <td class="table-text">
                                <div>{{ $task->name }}</div>
                            </td>
                            <td>
                                <!-- TODO: Delete Button -->
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
</div>
@endsection

ビュー側でデータを表示するときは{{ $tasks }}という形で表示できる。
@ifで条件分岐、@foreachでループを回すことが可能。

7. タスクの削除

ビューに削除ボタンを追加

以下をtask.blade.phpに追加。
削除ボタンがクリックされるとDELETE /taskリクエストが送られる仕組み。

task.blade.php

<tr>
    <!-- Task Name -->
    <td class="table-text">
        <div>{{ $task->name }}</div>
    </td>

    <!-- Delete Button -->
    <td>
        <form action="{{ url('task/'.$task->id) }}" method="POST">
            {{ csrf_field() }}
            {{ method_field('DELETE') }}

            <button type="submit" class="btn btn-danger">
                <i class="fa fa-trash"></i> Delete
            </button>
        </form>
    </td>
</tr>

EloquentのdeleteメソッドでDBから削除する

web.php

Route::delete('/task/{task}', function (Task $task) {
    $task->delete();

    return redirect('/');
});

8. 完成済みソースコードのご案内

GitHubに公開しています。
https://github.com/sshono1210/laravel5.3-BasicTaskList

【初心者向け】Laravel5.3 で Laravel5.2のQuick Start にトライ！

つくるもの

学べること

注意点

アジェンダ

1. インストール

Composerのインストール

Laravelのインストール

2. DB接続先の変更

.envファイルの接続先を変更

SQLiteファイルの作成

3. ルート・画面の作り方

ルート

画面（ビュー）

Bladeの特徴

エラービューの作成（共通部品）

親ビューの作成

子ビューの作成

画面を表示

4. マイグレーション

マイグレーションファイルの作成

マイグレーションファイルの編集

マイグレーションの実行

マイグレーションコマンド

5. Eloquent ORM

モデルの作成

6. タスクの追加

バリデーション

タスクを追加する

タスクを一覧表示する

Eloquentを使ってDBのタスクを全て取得

取得したタスクを一覧表示

7. タスクの削除

ビューに削除ボタンを追加

EloquentのdeleteメソッドでDBから削除する

8. 完成済みソースコードのご案内