読者です 読者をやめる 読者になる 読者になる

Keep Coding!

A fearless adventure in knowing what to do when no one’s there telling you what to do.

laravel5.3のチュートリアルしてみた話。

PlayStation 4 ジェット・ブラック 500GB(CUH-2000AB01)

PlayStation 4 ジェット・ブラック 500GB(CUH-2000AB01)

買いました。

FIFA 17

FIFA 17

そして買いました。

そして、laravel入門しました(実は入門が約3ヶ月前で、気づいたら5.3がリリースされててチュートリアルやり直したのは内緒)。

チュートリアルをしたので、その手順です。

基本のタスクリスト 5.2 Laravel

composerのインストール

なにはなくともcomposerということで、導入します。

getcomposer.org

kohkimakimoto.github.io ページの通りにインストールします。

$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer

Laravelのインストール

ここは基本のタスクリストの通りに。

$ composer create-project laravel/laravel quickstart
$ ls quickstart
app      bootstrap      composer.lock  database     package.json  public     resources  server.php  tests
artisan  composer.json  config         gulpfile.js  phpunit.xml   readme.md  routes     storage     vendor

ぱっと見の5.2との違いは、routesが一番上にきていること。。。か?

DBの準備

DBを準備します。
今回は楽に、sqliteを使います。

## 初期設定で呼ばれる場所にファイルを作っておきます
$ touch database/database.sqlite
## 権限も変更しておきます。チュートリアルなのでフルオープンで。
$ chmod 777 database 
$ chmod 777 database/database.sqlite
## あわせてlogなどが書き込まれる storageの権限もかえておきます
$ chmod -R 777 storage 

## .envの設定をします。環境設定ファイルですね。
$ vim .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

↓

DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=homestead
#DB_USERNAME=homestead
#DB_PASSWORD=secret

データベースマイグレーションの実行

雑に言うと、phpでテーブルの定義作って実行すると、DBにテーブル作ってくれるやつ。

# artisanを使ってマイグレーションファイルを生成します
$ php artisan make:migration create_tasks_table
# database/migrationsの下に2016_09_28_034952_create_tasks_table.phpみたいな形式で生成されるので開きます
$ vim database/migrations/2016_09_28_034952_create_tasks_table.php

# 初期状態だとidとtimestampぐらいしかないので、nameを追加します。
### database/migrations/2016_09_28_034952_create_tasks_table.php
<?php

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

class CreateTasksTable extends Migration
{
    /**
     * マイグレーション実行
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * マイグレーション巻き戻し
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('tasks');
    }
}
### database/migrations/2016_09_28_034952_create_tasks_table.php
# ちなみに僕は、:x で閉じてます。

## migrate実行します
$ php artisan migrate

## DBの中を見ると、taskテーブルが生成されているはずです。
$ sqlite3 database/database.sqlite
SQLite version 3.7.17 2013-05-20 00:56:22
Enter ".help" for instructions
Enter SQL statements terminated with a ";"

## テーブルを確認
sqlite> .tables
migrations       password_resets  tasks            users

## create tableされてる
sqlite> .schema
CREATE TABLE "migrations" ("migration" varchar not null, "batch" integer not null);
CREATE TABLE "users" ("id" integer not null primary key autoincrement, "name" varchar not null, "email" varchar not null, "password" varchar not null, "remember_token" varchar null, "created_at" datetime null, "updated_at" datetime null);
CREATE UNIQUE INDEX "users_email_unique" on "users" ("email");
CREATE TABLE "password_resets" ("email" varchar not null, "token" varchar not null, "created_at" datetime null);
CREATE INDEX "password_resets_email_index" on "password_resets" ("email");
CREATE INDEX "password_resets_token_index" on "password_resets" ("token");
CREATE TABLE "tasks" ("id" integer not null primary key autoincrement, "name" varchar not null, "created_at" datetime null, "updated_at" datetime null);

ORMの生成

Laravelでは、Eloquentモデルと言われています。

# aritisanで作ります
$ php artisan make:model Task
# 生成されたものを確認します
$ vim app/Task.php

## app/Task.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}
## app/Task.php

中身は空ですが、DBのテーブル名(tasks)が、モデル(Task.php)の複数形であるという規則に通りであれば対応をとって解釈してくれます。

ルーティングの定義

雑に言うと、どのURLへのアクセスでどの処理を行うかの定義みたいです。

## laravel5.3 では routes/web.phpの下にあります。5.2とかは、app/Http/routes.phpでしたよね?
$ vim routes/web.php
を記入
<?php
use App\Task;
use Illuminate\Http\Request;

Route::get('/', function () {
  return view('tasks', [
    'tasks' => Task::orderBy('created_at', 'asc')->get()
  ]);
});

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('/');
});

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

今回は3つ定義しています。

"/" 一覧表示画面 "/task" タスク追加 "/task/{id}" タスクの削除

チュートリアルなので実行する処理を全部routes/web.phpに書いていますが、実際は分けるべき。。。か。。。?

Viewの作成

実際に見える部分のViewを作っていきます。

laravelではbladeが使われているみたいです。(bladeってなんだろう。。。?)

ちなみにviewは、resources/views/以下にあります。

laravel.com

## まずは、レイアウトの部分を作ります。
$ vim resources/views/layouts/app.blade.php

### resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel Quickstart - Basic</title>

    <!-- Fonts -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}

    <style>
        body {
            font-family: 'Lato';
        }
        .fa-btn {
            margin-right: 6px;
        }
    </style>
</head>
<body id="app-layout">
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">

                <!-- Branding Image -->
                <a class="navbar-brand" href="{{ url('/') }}">
                    Task List
                </a>
            </div>

        </div>
    </nav>

    @yield('content')

    <!-- JavaScripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    {{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
</body>
</html>
### resources/views/layouts/app.blade.php

## @yield('content')の部分に実際のページが入って行くわけですね

## では、その中身となるresources/views/tasks.blade.phpをみていきます。
$ vim resources/views/tasks.blade.php

### resources/views/tasks.blade.php
@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="col-sm-offset-2 col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    New Task
                </div>

                <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-name" class="col-sm-3 control-label">Task</label>

                            <div class="col-sm-6">
                                <input type="text" name="name" id="task-name" class="form-control" value="{{ old('task') }}">
                            </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-btn fa-plus"></i>Add Task
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 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">
                            <thead>
                                <th>Task</th>
                                <th>&nbsp;</th>
                            </thead>
                            <tbody>
                                @foreach ($tasks as $task)
                                    <tr>
                                        <td class="table-text"><div>{{ $task->name }}</div></td>

                                        <!-- Task 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-btn fa-trash"></i>Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection
### resources/views/tasks.blade.php

## @extends('layouts.app')で、対象のレイアウトを指定して、@section('content')から@endsectionまでを@yield('content')に入れて行く感じですね

## 蛇足ですが、エラーページなんかも準備してみます。
$ vim resources/views/common/errors.blade.php

### resources/views/common/errors.blade.php
<!-- resources/views/common/errors.blade.php -->

@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <strong>おや?何かがおかしいようです!</strong>

        <br><br>

        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
### resources/views/common/errors.blade.php

## レスポンスコードごとにページを作ったりもできます
$ ls resources/views/errors/
400.blade.php  404.blade.php  405.blade.php  500.blade.php  503.blade.php

実際の画面

こんな感じ。 f:id:her0m31:20161016115222p:plain

空で投稿しようとすると、、、、 f:id:her0m31:20161016115230p:plain

おうふ。

おわり

laravel公式のチュートリアルと同じじゃねえか!