Laravelの環境構築はどうにかできたので
次のステップに進もうと思っています。
Laravelの環境構築をクリアされたのですね！！
素晴らしい！！
では次は、ログイン機能を作ってみましょう！
この記事を読めばログイン機能が簡単にできますよ！
一緒に手を動かしながら学んでいきましょう！
この記事はシリーズものとなっていまして前回は環境構築を行いました。
今回の記事を読み進める前に、環境構築ができていない方は下の「合わせて読みたい」から環境構築編の記事を読んでみてください！
それでは実際にログイン機能を作っていきましょう！！
作業を確認する
ログイン機能は３ステップでできます。
- モデルとマイグレーションファイルの作成
- マイグレーションファイルにテーブル定義を実装
- ログイン機能の実装
上記の３ステップでログイン機能が完成します！
では順番にやっていきましょう。
モデルとマイグレーションファイルの作成
作業ディレクトリにターミナルで移動します。
私の場合今回は以下のような作業ディレクトリで作業しています。
/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
今回は同様の作業をもう２回繰り返します
理由としては、モデルとマイグレーションファイルを３つ作る必要があるからです。
1つは先ほど作りましたね。
2つ目は以下です。
php artisan make:model Tag -m3つ目は以下です。
php artisan make:model MemoTag -mこれで３つのModelファイルとmigrationファイルができました。
マイグレーションファイルにテーブル定義を実装
これから、migrationを実行して、データベースにテーブルを生成します。
テーブルはmigrationファイル内の設定に沿って作られます。
なので先にその設定を３ファイルそれぞれに記述します。
<?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が効いていませんね。。。
なので、次に以下のコマンドを実行します。
npm audit fix次に
npm audit fix --force次に
npm install次に
npm run dev以上が終わりましたら確かめのため
ログインページにアクセスします。
私の場合http://localhost:8888/loginです。
すると以下のようにきれいに表示されました！
では最後に動作確認をします。
Register画面で名前、メール、パスワードを登録してログインしてみましょう。
ログインできましたら以下の表示になります。
データベースにも登録されているか確認しにいきましょう。
phpMyAdminにいきます。
usersテーブルを見てみると自分の名前が登録されていると思います。
これでログイン機能の実装は終了です！！
お疲れ様でした！
まとめ
今回行った内容は基本的なログイン機能の実装でした。
うまくできましたでしょうか。
うまくいかなかった場合はもしかすると基礎的な知識がもう少し必要かもしれません。
近くにエンジニアがいる場合にはすぐに聞いてみましょう。
近くにエンジニアがいない場合は、一人で考え込んでしまって苦しむことになります。
なので、Udemyで関連した内容を学習するのも近道です。
Udemy
でもいきなりわからないこともあるかもしれませんので
その場合は人に聞くのが1番なのでプログラミングスクールをおすすめします。
1番確実です。
プログラミングの知識があれば楽しく仕事ができます。
人生で役立つこと間違いありませんので今すぐに習得しましょう！
下記おすすめの方法をまとめました！参考にしてください！
