PHP

Laravel ToDoアプリ作成#01

  /

Laravel入門用としてToDoアプリを作成してみました。

PHP/Laravelを学習する上でおすすめな方法（本、プログラミングスクールや動画学習等）人気フレームワークLaravelを学習しよう PHPは、JavaやC#などのプログラミング言語と比べて簡単に使えるWebプログラミング...

環境

  • PHP 7.2.7
  • Laravel 5.6
  • Composer 1.6.5
  • SQLite 3.19.3

Laravelインストール

Composerを使用してLaravelフレームワークをインストールします。

$ composer create-project laravel/laravel todo_app --prefer-dist

Taskモデル作成

次にタスク用のモデルを定義します。
「-m」でマイグレーションファイルを、「-c」でコントローラも一緒に作成します。

$ php artisan make:model Task -cm

Sqlite設定

次にsqliteのデーターベースファイル作成と、Laravelで接続するための設定を行います。

データベースファイル作成

Sqliteのデータベースファイルを作成します。

$ touch database/database_todo_app.sqlite

envファイル編集

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

データベース設定ファイル編集

config/database.php
<?php

'connections' => [
        'sqlite' => [
            'driver' => 'sqlite',
            'database' => env('DB_DATABASE', database_path('database_todo_app.sqlite')),
            'prefix' => '',
        ],

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

database/migrations/2018_06_23_181611_create_tasks_table.php
<?php
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
Migrating: 2018_06_23_181611_create_tasks_table
Migrated:  2018_06_23_181611_create_tasks_table

ルーティング設定

タスクの一覧画面、登録、削除を行うためのルーティングを定義します。

app/Http/routes.php
<?php
/**
 * タスクダッシュボード表示
 */
Route::get('/','TaskController@index');
/**
 * 新タスク追加
 */
Route::post('/task','TaskController@store');
/**
 * タスク削除
 */
Route::delete('/task/{task}','TaskController@destroy');

コントローラ実装

以下はコントローラの設定になります。
一覧、登録、削除を実装します。

app/Http/Controllers/TaskController.php
<?php
namespace App\Http\Controllers;
use App\Task;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
class TaskController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $tasks = Task::latest()->get();
        return view('tasks.index', [
            'tasks' => $tasks
        ]);
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'task_name' => 'required|max:255',
        ]);
        if ($validator->fails()) {
            return redirect('/')
                ->withInput()
                ->withErrors($validator);
        }
        $task = new Task;
        $task->name = $request-> task_name;
        $task->save();
        return redirect('/');
    }
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Task  $task
     * @return \Illuminate\Http\Response
     */
    public function destroy(Task $task)
    {
        $task->delete();
        return redirect('/');
    }
}

ビュー実装

共通レイアウト

resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Laravel Quickstart - Basic</title>

    <!-- CSSとJavaScript -->
</head>

<body>
<div class="container">
    <nav class="navbar navbar-default">
        <!-- ナビバーの内容 -->
    </nav>
</div>

@yield('content')
</body>
</html>

共通エラーメッセージ

resources/views/common/errors.blade.php
@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

タスク画面

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

@section('content')
    <div class="panel-body">
    @include('common.errors')

        <form action="{{ url('task') }}" method="POST" class="form-horizontal">
        {{ csrf_field() }}
            <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>

            <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
                    </button>
                </div>
            </div>
        </form>
    </div>

    @if (count($tasks) > 0)
        <div class="panel panel-default">
            <div class="panel-heading">
                Task List
            </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>
                            <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>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection

ここまで作成終わったら、ブラウザで確認してみましょう。

$ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

上記のコマンドでサーバが起動しましたので、ブラウザのアドレスバーに「http://127.0.0.1:8000」と打ってアクセスしてみましょう。

表示されました！！
こちら登録、削除が行える試してみてください！

RuntimeException
No application encryption key has been specified.
と表示された場合、「php artisan key:generate」と実行し、再度表示してみてください。

Laravel ToDoアプリ作成#02(Bootstrap4使用)前回、ToDoアプリを作成しましたが、 あまりにもデザインを考慮してなかったので、少し手を入れてみました...！ 環境 Node....
RELATED POST