Laravel

【Laravel8】初心者のメモアプリ作成2|ログイン機能作成3ステップ

初心者のメモアプリ作成2|ログイン機能作成3ステップ

Laravel初心者

Laravelの環境構築はどうにかできたので

次のステップに進もうと思っています。

スガワヤ

Laravelの環境構築をクリアされたのですね!!

素晴らしい!!

では次は、ログイン機能を作ってみましょう!

この記事を読めばログイン機能が簡単にできますよ!

一緒に手を動かしながら学んでいきましょう!

この記事はシリーズものとなっていまして前回は環境構築を行いました。

今回の記事を読み進める前に、環境構築ができていない方は下の「合わせて読みたい」から環境構築編の記事を読んでみてください!

それでは実際にログイン機能を作っていきましょう!!

作業を確認する

ログイン機能は3ステップでできます。

  1. モデルとマイグレーションファイルの作成
  2. マイグレーションファイルにテーブル定義を実装
  3. ログイン機能の実装

上記の3ステップでログイン機能が完成します!

では順番にやっていきましょう。

モデルとマイグレーションファイルの作成

作業ディレクトリにターミナルで移動します。

私の場合今回は以下のような作業ディレクトリで作業しています。

/Applications/MAMP/htdocs/Laravel/laravel-simple-memo

なので、ターミナルを開いたら以下のコマンドを実行します。

cd /Applications/MAMP/htdocs/Laravel/laravel-simple-memo

これで作業ディレクトリまできました。

ここから、モデルとマイグレーションファイルを同時に作成するために、作成コマンドを実行していきます。

php artisan make:model Memo -m

上記のコマンドの「Memo」は単数形となっています。

上記のコマンドでモデルとマイグレーションファイルを同時に作成する場合は必ず単数形の英単語を使ってください。これはLaravelのルールです。守らないとうまく動作しない場合があります。

上記のコマンドを実行すると以下の2ファイルができます。

app/Models/Memo.php

database/migrations/2022_02_06_060706_create_memos_table.php

今回は同様の作業をもう2回繰り返します

理由としては、モデルとマイグレーションファイルを3つ作る必要があるからです。

1つは先ほど作りましたね。

2つ目は以下です。

php artisan make:model Tag -m

3つ目は以下です。

php artisan make:model MemoTag -m

これで3つのModelファイルとmigrationファイルができました。

マイグレーションファイルにテーブル定義を実装

これから、migrationを実行して、データベースにテーブルを生成します。

テーブルはmigrationファイル内の設定に沿って作られます。

なので先にその設定を3ファイルそれぞれに記述します。

<?php

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

class CreateMemosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('memos', function (Blueprint $table) {
            $table->unsignedBigInteger('id', true);
            $table->longText('nontent');
            $table->unsignedBigInteger('user_id');
            $table->softDeletes();
            $table->timestamp('updated_at')->default(\DB::raw('CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP'));
            $table->timestamp('created_at')->default(\DB::raw('CURRENT_TIMESTAMP'));
            $table->foreign('user_id')->references('id')->on('users');
        });
    }

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

<?php

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

class CreateTagsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tags', function (Blueprint $table) {
            $table->unsignedBigInteger('id', true);
            $table->string('name');
            $table->unsignedBigInteger('user_id');
            $table->softDeletes();
            $table->timestamp('updated_at')->default(\DB::raw('CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP'));
            $table->timestamp('created_at')->default(\DB::raw('CURRENT_TIMESTAMP'));
            $table->foreign('user_id')->references('id')->on('users');
        });
    }

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

<?php

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

class CreateMemoTagsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('memo_tags', function (Blueprint $table) {
            $table->unsignedBigInteger('memo_id');
            $table->unsignedBigInteger('tag_id');

            $table->foreign('memo_id')->references('id')->on('memos');
            $table->foreign('tag_id')->references('id')->on('tags');
        });
    }

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

そして、Laravel標準装備の2014_10_12_000000_create_users_table.phpにも変更を加えます。

<?php

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

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->unsignedBigInteger('id',true);
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

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

各ファイルが準備できましたらmigrationを実行します。

下記のコマンドを実行してください。

php artisan migrate

すると以下のような表示が出ます

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (33.07ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (40.22ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (33.20ms)
Migrating: 2022_02_06_060706_create_memos_table
Migrated:  2022_02_06_060706_create_memos_table (46.75ms)
Migrating: 2022_02_06_182646_create_tags_table
Migrated:  2022_02_06_182646_create_tags_table (38.98ms)
Migrating: 2022_02_06_183455_create_memo_tags_table
Migrated:  2022_02_06_183455_create_memo_tags_table (61.68ms)

確認できましたら、テーブルができているかどうかを確かめるため

phpMyAdminにいきます。

以下のように7つテーブルができていることが確認できます。

テーブル作成後

ログイン機能の実装

ここから、ログイン機能の実装に入っていこうと思います。

まずは、LaravelUiを使えるようにします。

LaravelUiは表示を整える機能です(CSSを導入するようなものです)

LaravelUi導入はcomposerを使います。

以下のコマンドを実行してください。

composer require laravel/ui

次に以下のコマンドを実行します。

php artisan ui bootstrap --auth

次に、

Please run "npm install && npm run dev" to compile your fresh scaffolding.

とでますので、以下を実行します。

npm install && npm run dev

次にloginページにアクセスしてください。私の場合以下です。

http://localhost:8888/login

すると、まだCSSが効いていませんね。。。

CSSが効いていないLOGIN

なので、次に以下のコマンドを実行します。

npm audit fix

次に

npm audit fix --force

次に

npm install

次に

npm run dev

以上が終わりましたら確かめのため

ログインページにアクセスします。

私の場合http://localhost:8888/loginです。

すると以下のようにきれいに表示されました!

Ui適用後

では最後に動作確認をします。

Register画面で名前、メール、パスワードを登録してログインしてみましょう。

レジスター画面

ログインできましたら以下の表示になります。

ログイン成功

データベースにも登録されているか確認しにいきましょう。

phpMyAdminにいきます。

DBに登録されたか確認

usersテーブルを見てみると自分の名前が登録されていると思います。

これでログイン機能の実装は終了です!!

お疲れ様でした!

まとめ

今回行った内容は基本的なログイン機能の実装でした。

うまくできましたでしょうか。

うまくいかなかった場合はもしかすると基礎的な知識がもう少し必要かもしれません。

近くにエンジニアがいる場合にはすぐに聞いてみましょう。

近くにエンジニアがいない場合は、一人で考え込んでしまって苦しむことになります。

なので、Udemyで関連した内容を学習するのも近道です。

Udemy でもいきなりわからないこともあるかもしれませんので

その場合は人に聞くのが1番なのでプログラミングスクールをおすすめします。

1番確実です。

プログラミングの知識があれば楽しく仕事ができます。

人生で役立つこと間違いありませんので今すぐに習得しましょう!

下記おすすめの方法をまとめました!参考にしてください!