はじめに
先日作成したプロジェクト(※以下記事)を用いて追加実装をしていこうと思います。
作りたい内容としてフォルダ階層の分かれているメモアプリ的な感じです。
正直1からプロジェクト作ったほうが良い気もしました。
ですが、その判断すらすぐにはできない初級者なのでとりあえず作ってみよう！って感じでやっていきます。
今回試したいこと
・モデルの追加
環境に関して
Laravel 6.8
PHP 7.3
Windows/XAMPP/MySQL
参考教材に関して
入門Laravelチュートリアル (1) イントロダクションと環境構築
(大変恐縮ですが、)当記事ではこちらの教材を以降、教材と記載させていただいてます。
※作成するアプリのイメージです。これをVue.jsで実装できないかなと思っています。
モデルの追加に伴う編集
DBは教材(3)を参考に1から作り直します。
※todosテーブル(教材ではtasks)は削除せずにfoldersテーブルに紐づけていこうと思います。
ざっくりですが1対多の関係で、users＞folders＞todosって感じです。
Folderモデル
①マイグレーションファイルの作成
php artisan make:migration create_folders_table --create=folders
②マイグレーションファイルの編集
$table->bigIncrements('id');
$table->integer('user_id'); // add
$table->string('title', 20); // add
$table->timestamps();
③Folderモデルの作成
php artisan make:model Folder
④Folderモデルの編集
class Folder extends Model
{
public function todos(){
return $this->hasMany('App\Todo');
}
}
⑤Userモデルの編集
public function todos(){
return $this->hasMany('App\Folder'); // TodoからFolderへ
}
Todoモデル
※以前作っていたものを編集
①todosテーブルのマイグレーションファイルの編集
$table->bigIncrements('id');
$table->integer('folder_id')->unsigned(); // 編集。符号は使わない。
$table->string('todo');
$table->string('status'); // 編集。
$table->timestamps();
②反映
php artisan migrate
一覧表示機能の作成
フォルダの表示
①web.phpの編集
Route::get('/folders/{id}/todos', 'TodoController@index')->name('todos.index');
※TodoControllerは以前からあるものを使っていきます。
②シーダーの導入
php artisan make:seeder FoldersTableSeeder
③マイグレーションファイルを編集
~~
use Carbon\Carbon;
use Illuminate\Support\Facades\DB;
~~省略
public function run()
{
$titles = ['プライベート', '仕事', '旅行'];
foreach ($titles as $title) {
DB::table('folders')->insert([
'user_id' => 1, // 教材に付け加えている部分
'title' => $title,
'created_at' => Carbon::now(),
'updated_at' => Carbon::now(),
]);
}
}
~~
④シーダーの実行
composer dump-autoload // シーダーを認識させる php artisan db:seed --class=FoldersTableSeeder
⑤コントローラの編集
TodoController.phpの編集
~~省略
use App\Folder; // add
~~省略(以下編集)
public function index()
{
$folders = Folder::all();
return view('todos/index', [
'folders' => $folders,
]);
}
~~省略
⑥ビューの生成
views/todos/index.blade.phpの作成
http://127.0.0.1:8000/folders/1/todosへアクセス。
Todoの表示
①シーダー作成
php artisan make:seeder TodosTableSeeder
②TodosTableSeederの編集(教材参考)
~~省略
use Carbon\Carbon; // add
use Illuminate\Database\Seeder; // add
use Illuminate\Support\Facades\DB; // add
~~省略
public function run()
{
foreach (range(1, 3) as $num) {
DB::table('todos')->insert([
'folder_id' => 1,
'todo' => "サンプルタスク {$num}",
'status' => $num,
'created_at' => Carbon::now(),
'updated_at' => Carbon::now(),
]);
}
}
~~省略
③シーダーの反映
php artisan db:seed --class=TodosTableSeeder
④コントローラの編集
⑤todos/index.blade.phpの編集
http://127.0.0.1:8000/folders/1/todosへアクセス。
アクセサの追加
アクセサを利用することで、モデルクラスが本来持つデータを加工した値を出力可能。(初知り)
①Todoモデルを編集
※ここは教材通り。
②todo/index.blade.phpを編集
{{ $todo->status_label }} // {{ $todo->status }}から編集
状態が変更されて表示されることが確認できます◎
CSS用にclassを追加したり、日付の表示形式変更もできます。
おわりに
モデル追加と簡易的ですがビューの生成まで終えました。(厳密にはVue.js側との連携は一切できていない。。。)
教材⑤の内容も参考に進めていこうと思ったのですが、教材ではフォルダ追加機能を別のビューを作って実装しています。
Vue.jsとの兼ね合いも含めどうしようか考えたいので今回の記事はここまでとします。次回に続きます。
参考
PHPフレームワーク｢composer dump-autoload｣の重要性について
PHPでいうrequireを不要にしてくれる。
composer dump-autoloadが面倒くさい Laravel
Bootflat – フラットUIで格好いいBootstrapテーマ！
教材で扱っているBootflat。記事の情報が古いものが多かったが少し気になる。
【Laravel】モデルクラスにgetアクセサを設定する方法
学習の備忘録
気になったこと
教材でもFoldersControllerは作らずTasksControllerでアクションを加えて処理してる。
割愛した部分
・選択中のフォルダの色付け(教材③)
・Tinker(教材④)
php artisan tinker // 起動(コマンドラインでDBの確認ができる)
>>> $folder = \App\Folder::find(1); // フォルダクラスでIDに合致するデータ
>>> \App\Todo::where('folder_id', $folder->id)->get(); // 更にフォルダの中のTodoデータ表示
・アクセサ
モデルのget〇〇Attributeメソッド
