Zenn
💨

Laravel8.xとVue.js3でToDoアプリを作成 3 ~DB作成~

2022/03/14に公開
Laravel
MySQL
PHP
tech

はじめに

Laravel8.xとVue.js3を使用してToDoアプリを作成の第三弾です！

Laravelの環境構築
https://zenn.dev/tasuya/articles/7d7c90f6ba2f1e
LaravelとVue.jsの連携
https://zenn.dev/tasuya/articles/c559e49ed210c6
今回はDBにテーブルの作成とLaravelでのデータ取得までを行いたいと思います！
ここまで終わればやっとコードが書けます！

構築

LaravelのView部分をVue.jsに置き換えて作成をしていきます。

フロントエンド

Vue.js3
TypeScript

バックエンド

PHP7.4.1
Laravel8.x

データベース

MYSQL8.0

インフラ

Docker
docker-compose
Nginx

テーブル作成

テーブルイメージ

こういった形式のテーブルを作りたいと思います。

todosに複数のtodo_detailsが紐付いているイメージです！！
phpのトランザクションもやりたいのでこういった形にしました。

作成

migratationのファイルを作成していきますが、先に不要なファイルを削除しましょう。

cd src/database/
m -rf migrations 
mkdir migrations

次に下記コマンドでmigrationファイルを作成していきます。

docker-compose run app php artisan make:migration create_todos_table
docker-compose run app php artisan make:migration create_todoDetails_table

migrationsフォルダにmigrationファイルが作成されました！
そこに記述をしていきます。
まずはtodosテーブルを記述します。

src/datavase/migration/yyyy_MM_dd_hhmmss_create_todos_table.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTodosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('todos');
    }
}

次にtodoDetailsテーブルを記述します。

src/datavase/migration/yyyy_MM_dd_hhmmss_create_todo_details_table.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTodoDetailsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('todo_details', function (Blueprint $table) {
            $table->id();
            $table -> string('detail');
            $table->timestamps();
            $table->foreignId('todo_id')->constrained();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('todo_details');
    }
}

$table->foreign('todo_id')->references('id')->on('todos');の所でTodosテーブルのIdとの紐付けを行っております。

ここまでできたらmigrateしたいと思います。

docker-compose run app php artisan migrate

確認

mysqlに接続してみて下記のように作成されていれば、成功です！

+------------------------+
| Tables_in_db_todo      |
+------------------------+
| migrations             |
| personal_access_tokens |
| todo_details           |
| todos                  |
+------------------------+

終わり

今回はここまでです！！
次回は登録・表示をしていきたいと思います！

ぜひZennとTwitterのフォローをよろしくお願いします！！

Discussion