副業におすすめなサイトを見る→

Laravel8でTodoアプリを作成しよう①【全4記事】

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

Laravel8でTodoアプリを作成してみましょう。

Laravel8をDockerで環境構築し、Todoアプリを作成していきます。

環境構築の手順については、【簡単】Laravel8・php8・mysql8のDocker環境構築で詳しく解説しています。

上記の記事で環境構築・コンテナを起動し、PHPのコンテナに入っておきましょう。
※コンテナの入り方は、上記の記事で詳しく解説しています。

PHPコンテナの入り方
laravel_todo % docker-compose start
または、docker Desktopからコンテナを起動させる。

コンテナが起動したら、laravel_todo % docker psでコンテナの情報を確認する。
laravel_todo % docker exec -it コンテナIDまたはNAMES bash
で、PHPのコンテナに入る。
例)
laravel_todo % docker exec -it laravel_todo_php_1 bash

/var/www#
とかになればOK

すでに既存のusersテーブルなどはマイグレーション済みです。

/var/www# php artisan migrate:status
+------+-------------------------------------------------------+-------+
| Ran? | Migration                                             | Batch |
+------+-------------------------------------------------------+-------+
| Yes  | 2014_10_12_000000_create_users_table                  | 1     |
| Yes  | 2014_10_12_100000_create_password_resets_table        | 1     |
| Yes  | 2019_08_19_000000_create_failed_jobs_table            | 1     |
| Yes  | 2019_12_14_000001_create_personal_access_tokens_table | 1     |
+------+-------------------------------------------------------+-------+

【動作環境】
Mac intel
PHP8
Laravel8
apache2.4
Mysql8
phpmyadmin
Composer 2.2.6
node 12系

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

Contents

Todoアプリの概要

今回作成していくTodoアプリの機能を紹介します。

機能は、

  • タスク一覧
  • タスク追加
  • タスク詳細
  • タスク編集
  • タスク削除

と基本的なCRUD処理になっているので、ぜひLaravelの基本を身につけていきましょう。

また、詳しくは解説しないので、Laravelの機能でわからないことがあればLaravelの公式ドキュメントや紹介した記事を参照する、それでもわからない場合はコメントでお知らせください。

タスク一覧

タスク詳細

タスク追加

バリデーションも実装します。

タスク編集

タスク削除

タスク一覧、詳細画面の削除ボタン押下したら、タスクを削除する。

タスクテーブルを作成-マイグレーション

Todoアプリのタスクを保存するTasksテーブルを作成していきましょう。

Tasksテーブルの構造はこんな感じです。

TasksテーブルNULLカラムの名称
idbigint unsigned×タスクID
namevarchar(30)×タスク名
contenttext×タスク内容
created_attimestamp作成日時
updated_attimestamp更新日時

以下のようにマイグレーションファイルを作成します。

マイグレーションについて詳しく知りたい方は、Laravel8マイグレーションをマスターの記事を参考にしてください。

/var/www# php artisan make:migration create_tasks_table

以下のようにマイグレーションファイルが作成されます。

<?php

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

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

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

マイグレーションファイルを編集しましょう。

(変更後)

<?php

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

class CreateTasksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('name', 30);
            $table->text('content');
            $table->timestamps(); // これでcreated_atとupdated_atが作成されます。
        });
    }

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

変更できたら、マイグレーションを実行します。

/var/www# php artisan migrate
Migrating: 2022_02_11_203905_create_tasks_table
Migrated:  2022_02_11_203905_create_tasks_table (217.47ms)

データベースを確認すると、tasksテーブルが作成されていることが確認できます。

Tasksテーブルにデータを挿入する-シーダーファイルの作成

シーダーファイルの作成については、Laravelでシーダーを扱おう!実務で使える方法の記事で詳しく解説しています。

以下のようにtaskシーダーファイルを作成しましょう。

/var/www# php artisan make:seeder TaskSeeder

以下のファイルが作成されます。

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class TaskSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        //
    }
}

Tasksテーブルにデータを挿入するために、シーダーファイルを編集します。

(変更後)

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB; // 追加する

class TaskSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        // テーブルの中身を削除
        DB::table('tasks')->truncate();

        // テーブルにデータを挿入
        DB::table('tasks')->insert([
            [
                'id' => 1,
                'name' => 'パンを買う',
                'content' => 'ふわふわした食感のパンが新しくでた!',
                'created_at' => '2022-02-11 12:11:11',
                'updated_at' => '2022-02-13 14:22:33'
            ],
            [
                'id' => 2,
                'name' => 'Laravelを勉強',
                'content' => 'Laravel9が出たので、3時間勉強する',
                'created_at' => '2022-02-11 12:11:11',
                'updated_at' => '2022-02-13 14:22:33'
            ],
            [
                'id' => 3,
                'name' => 'ランニング',
                'content' => '新しいコースで10kmを目標に走る',
                'created_at' => '2022-02-11 12:11:11',
                'updated_at' => '2022-02-13 14:22:33'
            ],
            [
                'id' => 4,
                'name' => '犬の散歩',
                'content' => '新しいリールで、近所の公園を散歩しよう',
                'created_at' => '2022-02-11 12:11:11',
                'updated_at' => '2022-02-13 14:22:33'
            ],
            [
                'id' => 5,
                'name' => 'アニメを見る',
                'content' => '王様ランキングを忘れずに見る',
                'created_at' => '2022-02-11 12:11:11',
                'updated_at' => '2022-02-13 14:22:33'
            ]
        ]);
    }
}

ファイルの修正ができたら、シーダーを実行します。

/var/www# php artisan db:seed --class=TaskSeeder
Database seeding completed successfully.

データベースを確認すると、tasksテーブルにデータが5件入っていることが確認できます。

次回からは、一覧表示などを実装していきましょう。

疑問点などがあればお気軽にページ下部にあるコメントやお問合せよりご質問ください。

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

スキルを売り買いするならココナラ

コメント

コメントする

CAPTCHA


Contents
閉じる