実施したのは、以下。
2018年の記事だが、少しの読み替えで問題なく稼働するTodoアプリを作成することができた。
Laravelの概観を掴むことができたので、筆者のMasahiro Haradaさんには感謝しかない。
自身の備忘とこれからLaravelを学んでいきたいというかたの参考になればと思い、ここに記す。
入門Laravelチュートリアル (1) イントロダクション
環境構築について。参考にしつつ、今回は以下の環境で実施した。
■実施環境
OS : macOS Montery (M1)
Laravel : Version 8.83.4
DB : PostgreSQL 14.2
エディタ : VSCode
※仮想環境(HomesteadやValet)は使用せず、ローカルで開発
実施期間 : 2022/03/09 ~ 2022/03/16
入門Laravelチュートリアル (2) ToDoアプリケーションの設計
設計について。熟読。
以下について、後ほど使うのでメモ。
- 機能一覧
- 画面設計
- URL設計
- テーブル定義
WAFのパターン図も保存。
入門Laravelチュートリアル (3) ToDoアプリのフォルダ一覧表示機能を作る
いよいよ実際に実装を進めていく。まずはフォルダ一覧表示機能。
①ルーティング設定(web.php)
Route::get('/folders/{id}/tasks', 'TaskController@index')->name('tasks.index');
→getで/folders/{id}/tasksにリクエストがきたら、TaskControllerのindexメソッドを呼び出す。
これを'tasks.index'と名づける。
②コントローラーの作成・記載
php artisan make:controller (コントローラーの名前)
→/app/Http/Controllers/(コントローラーの名前).phpにコントローラーが生成される。
(※DB接続設定)←最初だけ
③マイグレーションファイルの作成・記載
php artisan make:migration create_(テーブル名)_table --create=(テーブル名)
→database/migrations ディレクトリに YYYY_MM_DD_hhmmss_create_folders_table.phpが生成される。生成されたファイルに、作成するテーブルのテーブル定義を記載する。
④マイグレーションの実行
php artisan migrate
→テーブルが作成される。
⑤モデルクラスの作成
php artisan make:model (モデル名)
→モデルクラスとテーブルは基本的に1対1になるようにする。
⑥テストデータの挿入
シーダー(Seeder)を用いてテーブルにデータを挿入。
⑦コントローラーの追記・修正
$folders = Folder::all();
return view('tasks/index', [
'folders' => $folders,
]);
↑はテーブルから情報を全て取得して、view関数でテンプレート(/resources/views/tasks/index.blade.php)に'folders'として渡した結果を返却している。
テンプレート側で、渡された引数を$foldersとして使用できる。
■View関数:
public function index ()
{
$var = 'XXX';
return view('aaa', ['varvar' => $var]);
}
上記のコードのように書けば「resources/views/aaa.blade.php」ビューへ、'varvar'という変数名で$varを渡すことができます。第二引数は"['渡す先での変数名' => 今回渡す変数]"。
⑧テンプレートの作成
HTML形式で記載していく。
ポイントは以下の箇所。
@foreach($folders as $folder)
<a href="{{ route('tasks.index', ['id' => $folder->id]) }}" class="list-group-item">
{{ $folder->title }}
</a>
@endforeach
引数で渡された$foldersの分だけforループを回している。
route関数を用いて、href属性にURLを渡している。
route関数の第一引数はルート名、第二引数は、ルート URL のうち変数になっている部分(ここでは {id})に実際の値を埋める)。
'tasks.index'は以下のルートで、{id}にはループで回しているfolderのidが入る。
Route::get('/folders/{id}/tasks', 'TaskController@index')->name('tasks.index');
ケースバイケースではあるが、ざっくり上記①〜⑧が開発の流れとなる。
このあと、アクセスされているフォルダ名だけ選択表示(水色背景)するように少しブラッシュアップして、第3回は終了。