[ Laravel 5.2 ドキュメント ] 初心者ガイド -- シンプルなタスク管理システム

1. はじめに

クイックスタートガイドでは、データベース移行、Eloquent ORM、ルーティング、検証、ビュー、Blade テンプレートなどを含む、Laravel フレームワークの基本的な概要を説明します。 Laravel を初めて使用する場合、または以前に PHP フレームワークを使用したことがない場合は、これが良い出発点になります。すでに他の PHP フレームワークで Laravel を使用している場合は、上級ガイド (翻訳中) にジャンプすることを検討してください。

Laravel 機能の基本的な使用法を示すために、完了するすべてのタスクを追跡するための簡単なタスク リスト (To-Do リスト) を作成します。このチュートリアルの完全なコードは Github で公開されています: https:// github.com/laravel/quickstart-basic 。

2. インストール

Laravel をインストールする

もちろん、始める前に最初にしなければならないことは、新しい Laravel アプリケーションをインストールすることです。 Homestead 仮想マシンまたはローカル PHP 開発環境を使用して、アプリケーションを実行できます。開発環境をセットアップした後、次の Composer コマンドを使用してアプリケーションをインストールできます:

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

Quickstart プロジェクトをインストールする

もちろん、GitHub リポジトリをローカルに複製してインストールすることもできます:

git clone https://github.com/laravel/quickstart-basic quickstartcd quickstartcomposer installphp artisan migrate

ローカル開発環境を構築する方法がまだわかりません。Homestead とインストールのドキュメントを参照してください。

3. データベースの準備

3.1 データベースの移行

まず、移行を使用して、すべてのタスクを処理するデータ テーブルを定義しましょう。 Laravel のデータベース移行機能は、データ テーブル構造を定義および変更するための簡単な方法を提供します。チームの各メンバーにローカル データベースに列を追加するよう依頼する代わりに、ソース管理に送信した移行を実行するだけで済みます。 。

それでは、すべてのタスクを処理するこのデータ テーブルを作成しましょう。 Artisan コマンドを使用して複数のカテゴリを生成し、繰り返しの労力を節約できます。この例では、make:migration コマンドを使用して、タスクに対応するデータ テーブルの移行を生成します。

php artisan make:migration create_tasks_table --create=tasks

このコマンドによって生成された移行ファイルは、次の場所にあります。プロジェクトのルート ディレクトリの database/ にある migration ディレクトリでは、make:migration コマンドによって自動インクリメント ID とタイムスタンプが移行ファイルに追加されていることに気づいたかもしれません。次に、ファイルを編集して列を追加する必要があります。データ テーブルへのタスク:

<?phpuse 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::drop('tasks');    }}

To 移行を実行するには、Artisan コマンド mitig を使用できます。 Homestead を使用している場合は、仮想マシンで次のコマンドを実行する必要があります:

php artisan migrate

このコマンドは、移行ファイルに定義されているすべてのデータ テーブルを作成します。データベース クライアント ソフトウェアを使用してデータベースを表示すると、次のことがわかります。作成されたこと。移行で定義した列を含む新しいタスク テーブル。次に、このデータ テーブルの Eloquent ORM モデルを定義する準備が整います。

3.2 Eloquent モデル

Laravel で使用されるデフォルトの ORM は Eloquent です。通常、Eloquent はデータ アクセスを簡単にするためにモデルを使用します。

したがって、作成したばかりのタスク テーブルに対応するタスク モデルを定義する必要があります。また、Artisan コマンドを使用してこのモデルを生成します。

php artisan make:model Task

デフォルトでは、モデル クラスはアプリ ディレクトリにあります。 Eloquent のドキュメントで説明したように、空のモデル クラスは次のとおりです:

<?phpnamespace App;use Illuminate\Database\Eloquent\Model;class Task extends Model{    //}

Eloquent の詳細を参照してください。モデル クラス 詳細については、Eloquent の完全なドキュメントを参照してください。

4. ルーティング

4.1 ルーティング スタブ

次に、アプリケーションのルートをいくつか定義する必要があります。ルーティングの機能は、ユーザーが指定されたページにアクセスしたときに、ページの URL を実行されるコントローラーまたは匿名関数と照合することです。デフォルトでは、すべての Laravel ルートは app/Http/routes.php で定義されます。

このアプリケーションでは、すべてのタスクを表示するルート、新しいタスクを追加するルート、既存のタスクを削除するルートの少なくとも 3 つのルートが必要です。次に、app/Http/routes.php ファイルに次の 3 つのルートを作成しましょう:

<?phpuse App\Task;use Illuminate\Http\Request;/** * Display All Tasks */Route::get('/', function () {   //});/** * Add A New Task */Route::post('/task', function (Request $request) {    //});/** * Delete An Existing Task */Route::delete('/task/{id}', function ($id) {    //});

4.2 表示ビュー

次に、このルートに HTML テンプレートをレンダリングします。テンプレートには次の内容が含まれます。新しいタスクを追加したり、タスクのリストを表示したりするためのフォーム。

Laravel では、すべての HTML テンプレートは resource/views ディレクトリに保存されます。 view 関数を使用してルートからテンプレートの 1 つを返すことができます:

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

)

return view('tasks');

});

タスクを view 関数に渡すと、ビュー テンプレートの resource/views/tasks.blade.php に対応する View オブジェクトが作成されます。次に、このビュー ファイルを作成する必要があります。

5. レイアウトとビューの作成

簡単な処理のため、このアプリケーションにはビューが 1 つだけ含まれており、そのビューには新しいタスクを追加するためのフォームとすべてのタスクのリストが含まれています。誰にでも直感的な視覚効果を与えるために、ビューのスクリーンショットを投稿します。ビューで基本的な Bootstrap CSS スタイルを使用していることがわかります。

5.1 定义布局

几乎所有的web应用都是在不同页面中共享同一个布局，例如，本应用在视图顶部有一个导航条，该导航条在每个页面都会出现。Laravel通过在每个页面中使用Blade布局让共享这些公共特性变得简单。

正如我们之前讨论的，所有Laravel视图都存放在 resources/views 中，因此，我们在 resources/views/layouts/app.blade.php 中定义一个新的布局视图， .blade.php 扩展表明框架使用Blade模板引擎来渲染视图，当然，你可以使用原生的PHP模板，然而，Blade提供了的标签语法可以帮助我们编写更加清爽、简短的模板。

编辑 app.blade.php 内容如下：

// resources/views/layouts/app.blade.php<!DOCTYPE html><html lang="en">    <head>        <title>Laravel Quickstart - Basic</title>        <!-- CSS And JavaScript -->    </head>    <body>        <div class="container">            <nav class="navbar navbar-default">                <!-- Navbar Contents -->            </nav>        </div>        @yield('content')    </body></html>

注意布局中的 @yield('content') 部分，这是一个Blade指令，用于指定继承布局的子页面在这里可以注入自己的内容。接下来，我们来定义使用该布局的子视图来提供主体内容。

5.2 定义子视图

好了，我们已经创建了应用的布局视图，下面我们需要定义一个包含创建新任务的表单和已存在任务列表的视图，该视图文件存放在 resources/views/tasks.blade.php 。

我们将跳过Bootstrap CSS的样板文件而只专注在我们所关注的事情上，不要忘了，你可以从 GitHub 下载本应用的所有资源：

//resources/views/tasks.blade.php@extends('layouts.app')@section('content')    <!-- Bootstrap Boilerplate... -->    <div class="panel-body">        <!-- Display Validation Errors -->        @include('common.errors')        <!-- New Task Form -->        <form action="/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 -->@endsection

一些需要注意的事项

在继续往下之前，让我们简单谈谈这个模板。首先，我们使用 @extends 指令告诉Blade我们要使用定义在 resources/views/layouts/app.blade.php 的布局，所有 @section('content') 和 @endsection 之间的内容将会被注入到 app.blade.php 布局的 @yield('contents') 指令位置。

现在，我们已经为应用定义了基本的布局和视图，接下来，我们准备添加代码到 POST /task 路由来处理添加新任务到数据库。

@include('common.errors') 指令将会加载 resources/views/common/errors.blade.php 模板中的内容，我们还没有定义这个模板，但很快就会了！

现在我们为应用定义了基本布局和视图文件，现在我们回到/路由：

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

接下来，我们准备添加代码到 POST /task 路由以便处理输入并添加新任务到数据库。

6、添加任务

6.1 验证

现在我们已经在视图中定义了表单，接下来需要在POST /task路由中编写代码处理表单请求，我们需要验证表单输入，然后才能创建一个新任务。

对这个表单而言，我们将 name 字段设置为必填项，而且长度不能超过255个字符。如果表单验证失败，将会跳转到前一个页面，并且将错误信息存放到一次性Session中：

Route::post('/task', function (Request $request) {    $validator = Validator::make($request->all(), [        'name' => 'required|max:255',    ]);    if ($validator->fails()) {        return redirect('/')            ->withInput()            ->withErrors($validator);    }    // Create The Task...});

$errors变量

让我们停下来讨论下上述代码中的 ->withErrors($validator) 部分， ->withErrors($validator) 会将验证错误信息存放到一次性session中，以便在视图中可以通过 $errors 变量访问。

我们在视图中使用了 @include('common.errors') 指令来渲染表单验证错误信息， common.errors 允许我们在所有页面以统一格式显示错误信息。我们定义 common.errors 内容如下：

// resources/views/common/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

注： $errors 变量在每个Laravel视图中都可以访问，如果没有错误信息的话它就是一个空的 ViewErrorBag 实例。

6.2 创建任务

现在输入验证已经做好了，接下来正式开始创建一个新任务。一旦新任务创建成功，页面会跳转到 / 。要创建任务，可以使用Eloquent模型提供的 save 方法：

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

好了，到了这里，我们已经可以成功创建任务，接下来，我们继续添加代码到视图来显示所有任务列表。

6.3 显示已存在的任务

首先，我们需要编辑 / 路由传递所有已存在任务到视图。 view 函数接收一个数组作为第二个参数，我们可以将数据通过该数组传递到视图中：

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

数据被传递到视图后，我们可以在 tasks.blade.php 中以表格形式显示所有任务。Blade中使用 @foreach 处理循环数据：

@extends('layouts.app')@section('content')    <!-- 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>                        <th>Task</th>                        <th> </th>                    </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@endsection

至此，本应用基本完成。但是，当任务完成时我们还没有途径删除该任务，接下来我们就来处理这件事。

7、删除任务

7.1 添加删除按钮

我们在 tasks.blade.php 视图中留了一个“TODO”注释用于放置删除按钮。当删除按钮被点击时， DELETE /task 请求被发送到应用后台：

<tr>    <!-- Task Name -->    <td class="table-text">        <div>{{ $task->name }}</div>    </td>    <!-- Delete Button -->    <td>        <form action="/task/{{ $task->id }}" method="POST">            {{ csrf_field() }}            {{ method_field('DELETE') }}            <button>Delete Task</button>        </form>    </td></tr>

关于方法伪造

尽管我们使用的路由是 Route::delete ，但我们在删除按钮表单中使用的请求方法为 POST ，HTML表单只支持 GET 和 POST 两种请求方式，因此我们需要使用某种方式来伪造 DELETE 请求。

我们可以在表单中通过输出 method_field('DELETE') 来伪造 DELETE 请求，该函数生成一个隐藏的表单输入框，然后Laravel识别出该输入并使用其值覆盖实际的HTTP请求方法。生成的输入框如下：

<input type="hidden" name="_method" value="DELETE">

7.2 删除任务

最后，让我们添加业务逻辑到路由中执行删除操作，我们可以使用Eloquent提供的 findOrFail 方法从数据库通过ID获取模型实例，如果不存在则抛出404异常。获取到模型后，我们使用模型的 delete 方法删除该模型在数据库中对应的记录。记录被删除后，跳转到 / 页面：

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