Laravel初心者がTodoアプリ作ってみた。MVC編

Laravel 5.5 LTSとBootstrap 4でTodoアプリ作ってみた。

前回の記事

Github https://github.com/Lara-Bell/todo

MIT License

お好きにどうぞ。

*Demo

https://todo.lara-bell.com/

Go Appからどうぞ。

遊んでみてください(*´∀｀*)

Laravel初心者がTodoアプリ作ってみた。MVC編

Model -> Controller -> Viewと作っていく。

php artisan make:model Task -r -m

1	php artisan make:model Task -r -m

作成されるファイル

app/Task.php モデル
app/Http/Controllers/TaskController.php コントローラーファイル [-r]
database/migrations/[timestamp]_create_tasks_table.php マイグレーションファイル [-m]

Schema::create('tasks', function (Blueprint $table) {
  $table->increments('id');
  $table->string('name'); # <- ここを追加
  $table->timestamps();
});

Schema::create('tasks', function (Blueprint $table) {

$table->increments('id');

$table->string('name'); # <- ここを追加

$table->timestamps();

});

MySQLにMigrationする

php artisan migrate

1	php artisan migrate

Todo Listを表示する

use Task;

public function index()
{
  $tasks = Task::orderBy('id','desc')->get(); # id番号逆順で表示する。

  return view('tasks.index', compact('tasks')); Views/tasks/index.blade.phpを表示
}

use Task;

public function index()

{

$tasks = Task::orderBy('id','desc')->get(); # id番号逆順で表示する。

return view('tasks.index', compact('tasks')); Views/tasks/index.blade.phpを表示

}

ルーティングを作成する

Route::resource('/tasks', 'TaskController');

1	Route::resource('/tasks', 'TaskController');

ルーティング一覧を見る。ちゃんと作れてます(*´∀｀*)

php artisan route:list

+--------+-----------+-------------------+---------------+---------------------------------------------+--------------+
| Domain | Method    | URI               | Name          | Action                                      | Middleware   |
+--------+-----------+-------------------+---------------+---------------------------------------------+--------------+
|        | GET|HEAD  | /                 |               | Closure                                     | web          |
|        | GET|HEAD  | api/user          |               | Closure                                     | api,auth:api |
|        | GET|HEAD  | tasks             | tasks.index   | App\Http\Controllers\TaskController@index   | web          |
|        | POST      | tasks             | tasks.store   | App\Http\Controllers\TaskController@store   | web          |
|        | GET|HEAD  | tasks/create      | tasks.create  | App\Http\Controllers\TaskController@create  | web          |
|        | GET|HEAD  | tasks/{task}      | tasks.show    | App\Http\Controllers\TaskController@show    | web          |
|        | PUT|PATCH | tasks/{task}      | tasks.update  | App\Http\Controllers\TaskController@update  | web          |
|        | DELETE    | tasks/{task}      | tasks.destroy | App\Http\Controllers\TaskController@destroy | web          |
|        | GET|HEAD  | tasks/{task}/edit | tasks.edit    | App\Http\Controllers\TaskController@edit    | web          |
+--------+-----------+-------------------+---------------+---------------------------------------------+--------------+

php artisan route:list

+--------+-----------+-------------------+---------------+---------------------------------------------+--------------+

+--------+-----------+-------------------+---------------+---------------------------------------------+--------------+

| | GET|HEAD | / | | Closure | web |

| | GET|HEAD | tasks/{task} | tasks.show | App\Http\Controllers\TaskController@show | web |

| | PUT|PATCH | tasks/{task} | tasks.update | App\Http\Controllers\TaskController@update | web |

| | DELETE | tasks/{task} | tasks.destroy | App\Http\Controllers\TaskController@destroy | web |

| | GET|HEAD | tasks/{task}/edit | tasks.edit | App\Http\Controllers\TaskController@edit | web |

+--------+-----------+-------------------+---------------+---------------------------------------------+--------------+

views/tasks/index.blade.phpを作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <title>Todo List App</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="offset-md-2 col-md-8">
            <h1 class="text-center">Todo List</h1>

            {{-- Table --}}
            @if(count($tasks) > 0)
                <div class="table-responsive">
                    <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Edit</th>
                            <th scope="col">Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($tasks as $task)
                        <tr>
                            <th scope="row">{{ $task->id }}</th>
                            <td>{{ $task->name }}</td>
                            <td>
                                <a href="{{ route('tasks.edit', ['tasks' => $task->id]) }}" class="btn btn-outline-secondary">Edit</a>
                            </td>
                            <td>
                                <form action="{{ route('tasks.destroy', ['tasks' => $task->id]) }}" method="POST">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="submit" class="btn btn-danger" value="Delete">
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>
<footer class="footer">
    <div class="container">
        <div class="text-center">Copyright © @php echo date('Y'); @endphp {{ config('app.name') }} All Rights Reserved.</div>
    </div>
</footer>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

@if(count($tasks) > 0)

<thead>

<tr>

<th scope="col">Delete</th>

</tr>

</thead>

<tbody>

@foreach($tasks as $task)

<tr>

<td>

<a href="{{ route('tasks.edit', ['tasks' => $task->id]) }}" class="btn btn-outline-secondary">Edit</a>

</td>

<td>

<form action="{{ route('tasks.destroy', ['tasks' => $task->id]) }}" method="POST">

</form>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

@endif

</div>

</div>

</footer>

</body>

</html>

解説

今回はviewsファイルが2つと少ないためincludeなどはしていません。

create/showなどのファイルが増えてくるようなプロジェクトであればMasterページ作成してincludeしたほうがいいかもしれません。

タグ

metaタグはBootstarap4サンプルとLaravelのCSRF関連。

Bootstrap4や個々の設定はSASSで操作した後コンパイル後のCSSファイルをlinkタグで読み込み

JavaScriptもコンパイル後Body閉じタグ直前に配置

{{asset('css/app.css')}} # public/css/app.css
{{asset('js/app.js')}} # public/js/app.js

1 2	{{asset('css/app.css')}} # public/css/app.css {{asset('js/app.js')}} # public/js/app.js

$tasksはTaskController@indexのcompact(‘tasks’)と一緒になる。

$tasksにデータ入っているか確認

@if(count($tasks) > 0)

1	@if(count($tasks) > 0)

$tasksがあったら$taskであるだけ表示してね。

@foreach($tasks as $task)

1	@foreach($tasks as $task)

$tasksの何を表示するのー？ idとnameを表示してね！

{{ $task->id }}
{{ $task->name }}

1 2	{{ $task->id }} {{ $task->name }}

すこし飛ばしてfooterのCopyright

<div class="text-center">Copyright © @php echo date('Y'); @endphp {{ config('app.name') }} All Rights Reserved.</div>

1	<div class="text-center">Copyright © @php echo date('Y'); @endphp {{ config('app.name') }} All Rights Reserved.</div>

Bladeファイル内は

<?php
?>

<?php

@php
@endphp

1 2	@php @endphp

どっちでも表現できる

まぁどっちでもいいかな(´・ω・｀)

{{ config('app.name') }}

1	{{ config('app.name') }}

.env APP_NAME が反映

見返したらこうしたほうがいいよねってことろ見つけてしまった。

まぁいいか。

<html lang="ja">
->
<html lang="{{ config('app.locale') }}">

EditとDeleteは次の記事で！

わからないところや質問ございましたらコメントください。

殴り書きしてるので誤字脱字がおおいかも＞＜

Laravel 5.5 LTSとBootstrap 4でTodoアプリ作ってみた。

Laravel初心者がTodoアプリ作ってみた。MVC編

解説

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル