【モデルの追加】Laravel+Vue.jsでのDB連携【備忘録①】

はじめに

先日作成したプロジェクト(※以下記事)を用いて追加実装をしていこうと思います。

作りたい内容としてフォルダ階層の分かれているメモアプリ的な感じです。

正直1からプロジェクト作ったほうが良い気もしました。

ですが、その判断すらすぐにはできない初級者なのでとりあえず作ってみよう!って感じでやっていきます。

【Axiosの実装】Laravel+Vue.jsでのDB連携【超ミニマムチュートリアル】

今回試したいこと

・モデルの追加

環境に関して

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の作成

まさる
教材を基に必要最低限にそぎ落としました。まあ、本来はVue.jsとがっちゃんこしないといけない部分だと思いますがとりあえず全体像を掴むために作ってます。

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モデルを編集

※ここは教材通り。

②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アクセサを設定する方法

Laravel Whereの使い方をケース別にまとめ

学習の備忘録

気になったこと

教材でもFoldersControllerは作らずTasksControllerでアクションを加えて処理してる。

割愛した部分

・選択中のフォルダの色付け(教材③)

・Tinker(教材④)

php artisan tinker // 起動(コマンドラインでDBの確認ができる)
>>> $folder = \App\Folder::find(1); // フォルダクラスでIDに合致するデータ
>>> \App\Todo::where('folder_id', $folder->id)->get(); // 更にフォルダの中のTodoデータ表示

・アクセサ

モデルのget〇〇Attributeメソッド

コメントを残す