laravel5.3のチュートリアルしてみた話。
PlayStation 4 ジェット・ブラック 500GB(CUH-2000AB01)
- 出版社/メーカー: ソニー・インタラクティブエンタテインメント
- 発売日: 2016/09/15
- メディア: Video Game
- この商品を含むブログ (3件) を見る
- 出版社/メーカー: エレクトロニック・アーツ
- 発売日: 2016/09/29
- メディア: Video Game
- この商品を含むブログを見る
そして、laravel入門しました(実は入門が約3ヶ月前で、気づいたら5.3がリリースされててチュートリアルやり直したのは内緒)。
チュートリアルをしたので、その手順です。
composerのインストール
なにはなくともcomposerということで、導入します。
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/以下にあります。
## まずは、レイアウトの部分を作ります。 $ 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> </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
実際の画面
こんな感じ。
空で投稿しようとすると、、、、
おうふ。
おわり
laravel公式のチュートリアルと同じじゃねえか!