ごみばこ

プログラムに関する備忘録などを書いています。

Laravel Note - todoリスト(Viewの作成)

前回はテーブルの作成等を行いました。
今回はページの見た目であるViewの作成と、todoの登録を行っていきます。

アジェンダ

  • モデルの作成
  • Viewの作成

作成に入る前に、ざっくり箇条書きでMVCを説明しておきます。

MVCとは

  • Model, View, Controllerの略称
    • ModelはDBの操作を扱う
    • Viewはページを指す(見た目 => HTML)
    • ControllerはModelからデータを受け取ったり、Viewに対して出力指示を行う
      • ModelとViewの仲介役的存在

Modelの作成

今回のtodoで使用するモデルを作成します。
以下のコマンドを実行して作成します。

# app/Models/にTasks.phpが作成されます。
# Modelsディレクトリが無ければ自動生成されます。
php artisan make:model Models/Tasks

作成されたTasks.phpに少しだけ設定を加えます。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Tasks extends Model
{
    // モデルと紐付けるテーブル名
    public $table = 'tasks';

    // created_at, updated_atを使用するかどうか
    public $timestamps = false;
}

今回のように、テーブル名とクラス名が一致していれば$tableは省略しても問題ありませんが、どのテーブルに紐付いているかが分かり易いので、記述しています。

Laravelではデフォルトでタイムスタンプのカラム(created_at, updated_at)を使用する設定になっていますが、$timestamps = falseとすることでタイムスタンプを使用しないようにも出来ます。

Viewの作成

次は見た目となるViewの作成を行っていきます。
完成図は以下。f:id:choco_0214:20171003234307p:plain

app.blade.phpを親テンプレートとして、tasks.blade.phpを子テンプレートとします。
Viewに関してはresources/viewsに配置します。

  • app.blade.php (views/layouts/app.blade.php)
<!DOCTYPE html>
<html lang="{{ $app->getLocale() }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>QuickStart</title>

    <!-- Bootstrap4 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>
<body>
    <nav class="navbar navbar-light bg-faded mb-3">
        <a href="#" class="navbar-brand">Quick Start</a>
    </nav>

    <div class="container">
        @yield('content')
    </div>
</body>
</html>
  • tasks.blade.php (views/tasks.blade.php)
@extends('layouts.app')

@section('content')
    <div class="col-md-8 offset-md-2">
        <div class="card mb-3">
            <div class="card-header">
                New Task
            </div>
            <div class="card-block">
                <form action="{{ url('task') }}" method="post">
                    {{ csrf_field() }}

                    <div class="form-group">
                        <label for="task" class="col-sm-3 control-label">Task</label>
                        <div class="col-sm-12">
                            <input type="text" name="name" id="task-name" class="form-control">
                        </div>
                    </div>
                    <div class="col">
                        <button type="submit" class="btn btn-primary">Add Task</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    @if (count($tasks) > 0)
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                Current Task
            </div>
            <div class="card-block">
                <table class="table table-hover">
                    <thead class="thead-inverse">
                        <th class="text-center">Task</th>
                        <th>&nbsp;</th>
                    </thead>
                    <tbody>
                        @foreach ($tasks as $task)
                            <tr>
                                <td class="text-center">{{ $task->name }}</td>
                                <td class="text-center">
                                    <form action="{{ url('task/' . $task->id) }}" method="post">
                                        {{ csrf_field() }}
                                        {{ method_field('DELETE') }}
                                        <button type="submit" class="btn btn-danger">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
@endsection

これでViewは完成です。

次は肝心のデータ登録を行います。