Laravelでログイン画面までを作る(CRUD）


# WEBアプリケーションとは

インターネットで操作できるアプリのことを指します
具体例ではyoutube,amazon,楽天,Gmailなどが
挙げられます

アプリとはPCやスマホにインストールして使う
特定の目的のために設計されたソフトウェアを指します
具体例ではエクセル、ワード、ペイントなどが
挙げられます

WEBアプリとはインストールしなくとも
ブラウザから操作できるアプリの総称を指します

WEBサイトは閲覧のみを目的としたサイトを指すため
ブログのようなログイン、入力、編集機能を持ったサイトも
WEBアプリに分類されます

![スクリーンショット 2022-11-16 13.17.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/88bb093c-abe1-361c-7e2c-b8c6e67663b8.png)


## CRUD（クラッド）とは

`登録・変更・削除・参照機能`の
頭文字をつなげた名前になります

・登録機能（Create）
・閲覧機能（Read）
・編集機能（Update）
・削除機能（Delete）

CRUDはデータベースを使うWEBアプリにおいて
最低限必要な基礎機能を指します


## CRUDアプリとは

名簿管理システム、売上管理システムなど
ブラウザでデータを新規登録、閲覧、編集、削除
などができる`情報管理システム`を指します

CRUDには情報を蓄積させるための
データベース（以下、DBと略称）が必要です

正しくDBと接続するためにはLaravelなどの
`フレームワーク`を使用することが推奨されます

## 参照リンク

これからCRUDアプリを作成するには
開発環境の構築、DBの接続、プロジェクトの作成
DBのテーブル作成など様々な準備が必要です

次のリンク先に詳細の記述がございますので
次からの手順で不明点などがあれば
補足としてご参照いただければ幸いです。


### 【別ページ】Laravelの新規プロジェクトを作成する

https://qiita.com/Laravel-student/items/e44bbd7be3d850eedcff

### 【別ページ】DBと接続する

https://qiita.com/Laravel-student/items/d05afd0f19159319a0b9

### 【別ページ】DBのテーブルを作成する（マイグレーション）

https://qiita.com/Laravel-student/items/0d10c6598ee52968be9a


## プロジェクトを作成する

開発環境にプロジェクトを作成します
著者はMAMP環境にて作業を行なっておりますので
構築した環境が異なる場合は適宜対応してください

```:プロジェクトファイルを作成する
// カレントディレクトリを開発環境に設定します
$ cd /Applications/MAMP/htdocs

// composerコマンドでLaravelのプロジェクトを作成します
$ composer create-project laravel/laravel gakusyuu_sample --prefer-dist

```

## ブラウザに表示させる（サーバーを起動する）

作成したプロジェクトには
テスト用のページが配備されているため
表示確認をします

すでにターミナル、コマンドプロンプトを開いている場合は
もう一つ別窓で開いて以下のコマンドを実行してください


```
$ php artisan serve 
```

次のような実行結果になれば
サーバーが起動しています


![スクリーンショット 2023-04-08 16.17.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/693ca7c2-253f-b0ce-8b62-02d41bf0515a.png)

`127.0.0.1`は`自分のPC`を表す特別なIPアドレスです
`localhost`という名目でも参照できるため
次のURLが開けるか確認してください

http://127.0.0.1:8000/

http://localhost:8000/

インストールしたLaravelのバージョンによって
出力されるテストページが異なる場合があります

![スクリーンショット 2023-04-03 11.23.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/4ee7be2c-6814-2030-b3ea-daaddca805b6.png)

## DBを作成する

phpMyAdminが使用できる場合は
ブラウザからデータベースを作成してください

ブラウザから作成できない場合は
SQL言語を用いてデータベースを作成してください

![スクリーンショット 2023-04-04 16.21.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/59b1ffdd-0c76-9284-007b-0dbf62f16679.png)


## DBと接続する

Laravelのプロジェクトが作成できたならば
プロジェクトとDBを接続するため
`.envファイル`と`database.php`に
接続情報を設定しましょう

### .envファイル

参照元：[Laravelインストール先]直下

隠しファイルなので隠しファイルを表示させる
必要があります

### database.php

参照元：[Laravelインストール先]/config/database.php

#### 隠しファイルの表示方法
>（Macの場合）
「command」＋「shift」＋「.」

>（Windowsの場合）
 エクスプローラーを開く。
 [表示] >
 [オプション] >
 [フォルダーと検索のオプションの変更] の順に選択
 [表示] タブを選択
 [詳細設定] 
 [隠しファイル、隠しフォルダー、および隠しドライブを表示する] を選択し
 [OK] を選択

#### .envを設定する場合の見本

![スクリーンショット 2023-04-05 10.16.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/3a8cd3b7-6693-ea48-bb64-b0958620d79b.png)

![スクリーンショット 2023-04-05 10.48.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/967106eb-0995-e8c9-745e-82b87109a7ef.png)

### DBと接続するための情報

DBと接続する情報は
次の情報をLaravelの環境変数に
上書きする必要があります

環境変数は上述の`.envファイル`で
変更が可能です

- 接続先のホスト（サーバーの情報を確認）
- 接続先のポート番号（サーバーの情報を確認）
- データベース名（作成したDBの名前）
- ユーザー名 / パスワード（初期はroot/root)
- ソケット（必須ではありません）

MAMP（ローカルサーバー）の場合
MAMPのWEBサイトから情報を確認できますが
レンタルサーバーなどの場合は
提供者に確認が必要です

使用しているデータベース管理システムが
`MySQL`ではない場合は
`DB_CONNECTION`の値も異なりますので
適宜変更をしてください

![スクリーンショット 2023-04-04 11.27.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/ac037d1c-2248-8392-fe46-be67f50a1db6.png)

#### database.phpを設定する場合の見本

MySQLを使用する場合は
mysqlの関数から該当する引数を変更します

```php:database.php
'mysql' => [

            ~~~~~~省略~~~~
            'host' => 'DB_DATABASE','ホスト名',
            'port' =>  'DB_HOST','ポート番号',
            'database' => env('DB_DATABASE', 'データベース名'),
            'username' => env('DB_USERNAME', 'ユーザー名'),
            'password' => env('DB_PASSWORD', 'パスワード'),
            'unix_socket' => env('DB_SOCKET', '/Applications/MAMP/tmp/mysql/mysql.sock'),
            ~~~~~~省略~~~~

```

![スクリーンショット 2023-04-08 14.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/f6b562fd-dc08-c08b-c5cd-1deb3350ebcb.png)

## DBと接続されているか確認する

DBと接続がされていなければ
次のテーブル作成ができないため
接続されているか確認します

```実行するコマンド手順.

① カレントディレクトリをLaravelのプロジェクトに設定します

$ cd /Applications/MAMP/htdocs/gakusyuu_sample 

② tinkerコマンドを実行してLaravelの対話型シェルを起動します

$ php artisan tinker 


```

```
次のコマンドを実行します
> DB::connection()->getPdo();


-----以下解説------

・DBファザードとはDBに関する関数、プログラム群を指します
・connectionメソッドでデータベースに接続を行います
・getPdoで接続されたDBのサーバー情報を取得します

```
### 接続が成功した場合

接続先のサーバー情報が取得できていれば
接続成功です

確認完了後はtinkerコマンドを
`exitコマンド`で終了してください

![スクリーンショット 2023-04-05 16.18.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/5c8ad771-c389-32eb-2198-b96b00588538.png)


### 正しく接続されていない場合

`DB::connection()->getPdo();`
失敗した場合は接続が拒否されます

tinkerコマンドは`exit`で終了することが
できるため、一度終了した後に接続に必要な
設定値を見直してもう一度実行してください


## DBにテーブルを作成する

LaravelではSQL言語を使わずに
DBを操作できます

テーブルを作成する場合は
マイグレーションファイルを作成し
マイグレーションを実行します

#### マイグレーションファイルとは

マイグレーションファイルとは
テーブルの構造を記した設計図です

ファイルに作成したいテーブル名や
カラム（列）のデータ型、などを記述し
マイグレーションを実行することで
連携するDBにテーブルを一括で作成します


### マイグレーションファイルを作る


マイグレーションファイルは
まずコマンドで雛形を作成します
ファイル名は命名規則に従い作成してください

#### マイグレーションファイルの命名規則
```テーブル命名規則（例1）.
・テーブルを新規で追加する場合のファイル名の例

create_#####_table

-----解説-----
・「テーブルを作成する」意味なのでテーブル名の前後に"create"と”table”付与します
・単語をつなぐ際はアンダーラインを用いてスネークケースで繋ぎます

```
```テーブル命名規則（例2）.
・実際に実行するコマンド

$ php artisan make:migration create_#####_table --create=tests

```

```:マイグレーションファイル作成
① カレントディレクトリをプロジェクトファイルにします

$ cd /Applications/MAMP/htdocs/①*******


② マイグレーションファイルを生成するコマンドを実行します
php artisan make:migration create_②#####_table --create=②#####


-----解説-----

・"①*******"は作成したプロジェクト名を記述します
・"create_②#####_table"は作成したい任意のテーブル名を記述します
・"②#####"は作成したい任意のテーブル名を記述します
・createオプションにテーブル名を追加することで雛形にテーブル名が反映されます

```

### マイグレーションファイルを編集する

作成したマイグレーションファイルの雛形が
次の階層に生成されています

`database/migrations`

マイグレーションファイルを開き必要なカラムを
増やしてください。

#### テーブルに'ID'と'timestamps'は必須
`ID`と`timestamps`はテーブルには必須なカラム（列）
なので、削除するとマイグレーション実行時に
エラーを起こすため削除しないよう注意してください

```php
   Schema::create('テーブル名', function (Blueprint $table) {
            $table->bigIncrements('id');
            // 以下のようにカラム（列）を追加する
            $table->string('カラム名');
            $table->text('カラム名');

            $table->timestamps();
        });

 -----解説-----
// ファイル生成の際にオプションを設定するとテーブル名雛形に反映されています
// "id"は主キーのため必須項目であり削除するとエラーが発生します
// bigIncrementsメソッドは、自動増分を示します
// "timestamps"も必須項目であり削除するとエラーが発生します
// "text"や"string"などのデータ型は任意の型を設定します



```
### テーブルに設定するデータ型

|データ型|種類|
|:---:|:---:|
integer|数値（整数）|
decimal|数値（精度の高い小数）|
float|数値（浮動小数）|
string|文字（短い文字列）|
text|文字（長い文字列）|
date|日付|
datetime|日時|
time|時刻|
timestamp|タイムスタンプ|
|binary|バイナリ|
|boolean|真偽|

#### マイグレーションファイル見本
```php
<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('company_id');
            $table->string('product_name');
            $table->integer('price');
            $table->integer('stock');
            $table->text('comment');
            $table->string('img_path');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};
```


## マイグレーションを実行する

マイグレーションファイルを作成した段階で
マイグレーションを実行すると
連携するDBにテーブルを作成できます

```:マイグレーションを実行する
$ php artisan migrate
```
phpMyAdminが使用できる環境の場合は
実際にテーブルが反映されたか
ブラウザから確認してください



http://localhost:8888/phpMyAdmin5/

![スクリーンショット 2023-04-07 9.17.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/39155bce-54da-98ac-5230-7af162d41f35.png)


## 認証機能を実装する

Laravelでは認証機能の雛型を自動で生成することができ
雛形を作る機能のことを`スキャッフォルド`と言います
>scaffold : スキャッフォルド

作成される認証機能の雛形は次のとおりです

- ログイン機能
- ログアウト機能
- ログイン状態の維持とチェック
- ユーザー登録機能
- パスワードを忘れた場合のパスワードリセットURLのメール送信

### Laravel 6 以降には専用ライブラリが必要

認証機能に関する雛形のファイルを自動で
作成する機能はartisanのuiコマンドで
authオプションを実行する必要があります

> Auth(オース）
略称：authenticationの略
読み方：オーセンティケーション
意味：認証

> ui
略称/User Interface
読み方：ユーザーインターフェース
意味：ユーザーが操作する画面のこと

`Laravel 6 以降`では
authを実装するライブラリが標準パッケージに
含まれていないため必要な時は`laravel/ui`という
ライブラリをインストールする必要があります

#### laravel/ui ライブラリをインストールする

laravel/uiのインストールには
`composer`を使用します

```laravel/uiインストール
$ composer require laravel/ui --dev

---説明---

・requireコマンド
パッケージを後から追加するコマンド
インストール済の他のライブラリが更新されることを防ぐことができます

・laravel/ui
読み：Laravel UI（ユーザーインターフェース）
認証機能の雛型を生成してくれるLaravel公式のライブラリです


・devオプション
開発環境向けにインストールするライブラリを自動選択します
付与しない場合は本番環境向けのライブラリをインストールします

・バージョンを指定
コマンドの途中にバージョンを記述すれば
インストールするライブラリのバージョンを
指定することができ、指定がなければ最新バージョンが
インストールされます
例：composer require laravel/ui "^1.0" --dev


```
#### Auth（認証）ファイルを生成する

laravel/uiがあればuiコマンドの
authオプションを使用することができます

authオプションを使用できるコマンドは
複数存在します
- vue.js (JavaScriptのフレームワーク）
- React(JavaScriptのライブラリ）
- Bootstrap(Twitter社が開発したフレームワーク）

どのサービスを使用しても結果として
雛形の作成が可能です

今回はvue.jsからauthオプションで
コマンドを実行し雛形を作成します

```
① カレントディレクトリをLaravelのプロジェクトに設定します

$ cd /Applications/MAMP/htdocs/gakusyuu_sample 

② vue（ビュー）で認証画面に必要なファイルを揃えます

$ php artisan ui vue --auth

--解説---
// vueとはUIを作るためのJavaScriptのフレームワークです
```

![スクリーンショット 2023-04-10 8.46.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/df1861b5-e751-79ed-5538-d552c0eb88ad.png)

Laravelの初期ページを閲覧すると
`ログイン` `新規登録`　のリンクが右上に
追加されています

![スクリーンショット 2023-04-10 8.49.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/8d18d3e5-666a-6e19-c3ce-a2dd37e4e89a.png)

#### 認証画面が開けない場合

右上のログイン用リンクを
開いてもエラーが発生する場合があります

![スクリーンショット 2023-04-10 8.54.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/e629675f-bee4-dd30-1020-805e830be02e.png)

#### npmの実行が必要

ブラウザに原因と解決方法が記してありますが
結論、用意したページを表示させるために必要な
ファイルが足りていないことを指しています

解決するためには`npm`という名の
パッケージ管理システムを実行して
`依存関係にあるパッケージを参照`
できるように準備してから
ページを更新するように説明されています

#### npmとは何か

`Node Package Manager`
npmとは`Node.js`のパッケージを
管理するシステムです

蛇足ですが類似ツールとして
`yarn（ヤーン）`というFacebook社が開発した
非公式パッケージ管理ツールがあります。

npmとの互換性がありyarnの方が動きが早く
セキュリティの安全性が高いため、yarnの方が
優秀なソフトウェアであるとの評価もあります

`Node.js`のパッケージを管理するシステムとして
インストールする場合、どちらを選択しても
問題ありません


#### Node.jsとは何か

サーバーサイドでJavaScriptを使うための
実行環境です

JavaScriptの用途はブラウザ上で使用できる言語
という認識でありHTMLにアニメーション風の動きを
付けることができるなど使われましたが
Node.jsをインストールすることでサーバー側でも
JavaScriptを使用できるようになりました

### npmをインストールする

使用するPCにnpmがあるか確認します
```
$ npm -v

// npmがインストールされている場合はバージョン情報が表示されます
```
npmがインストールされていない場合は
次のコマンドでインストールを実行します

```
① カレントディレクトリをプロジェクトファイルにします

$ cd /Applications/MAMP/htdocs/①*******

② npmをインストールします 

$ npm install
```

### npmでスタイルを適用させる

次のコマンドを実行することで管理ツールが
起動し、認証画面のサイトを開いた際に
適切なファイルがライブラリより参照されることで
サイトの閲覧が可能になります

```
※すでにコマンド画面を開いている場合は、別窓でコマンドの画面を用意する

① カレントディレクトリをプロジェクトファイルにします

$ cd /Applications/MAMP/htdocs/①*******

② 開発環境用のviteを起動します

$ npm run dev

---解説---

・npm run <スクリプト名>でスクリプトを実行します
・devは開発者の意味（developの略）
・開発環境用とは専門的な操作および編集を行うことを指します
・開発環境用のツールをON・OFFすることにより誤った一般ユーザーが誤った操作をしないように保護します
・Vite(ヴィート）は必要な時に必要なファイルだけをコンパイルしてブラウザーに送るAPIです
```

### 開発環境のnpmそして本番環境のnpm

`npm run dev`のコマンドが成功すると
次のような表示が画面になります

![スクリーンショット 2023-04-11 11.02.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/152e0092-6bdb-fad9-3aa7-b741403a5f59.png)




"Ctrl"+"C"　で停止しない限りauthコマンドで
実装したサイトはviteにより足りないファイルが
補完されて閲覧可能な状態になります


![スクリーンショット 2023-04-11 14.29.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/c5d2d775-1d08-971f-a699-359d01193709.png)

#### 認証画面のphpファイル

出力されている文字を変更したい場合は
次の階より`login.blade.php`のコードを
編集してください

![1681191672.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/59c7e491-4d7c-90b1-7551-44c88a1e01a8.png)

#### 本番環境のVite

`npm run dev`は開発環境用であるため
停止すればブラウザ側も必要なファイルを
参照できないためエラー画面に戻ります

ブラウザのエラー画面にヒントが掲載されておりますが
本番用のViteを準備することで
永続的に必要なファイルを参照できるようになります

① カレントディレクトリをプロジェクトファイルにします


```
① カレントディレクトリをプロジェクトファイルにします

$ cd /Applications/MAMP/htdocs/①*******

② 本番環境用にviteをデプロイ（配置）します

$ npm run build
```

![1681198661.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/1b4ffa96-4648-0209-d22c-6867fccc5ce4.png)

本番環境用に`buildフォルダ`が配置されたことで
認証画面が閲覧できるようになります

### ログイン情報のテーブルを構築する

見本の通りログインには
`メールアドレス`と`パスワード`が必要です

DBに`users`というテーブルを作成し
そこにログイン情報を保存を用意する
必要があります

またパスワードを忘れた場合のトークン情報を
保存できるテーブルも必要です

#### usersテーブルをマイグレーション

プロジェクトを作成時に
マイグレーションフォルダにはusersを含む
マイグレーションファイルが存在するため
マイグレーションを実行すればテーブルは用意できます

マイグレーションを実行する際
連携するデータベースが作成されていない場合は
`.envファイル`の`DB_DATABASE`に入力されている
値でデータベース名を作ることができます

![スクリーンショット 2023-04-08 23.12.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/4ff877c7-ca8d-4ace-1e08-3142c5c2ad1a.png)

![スクリーンショット 2023-04-05 10.48.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/967106eb-0995-e8c9-745e-82b87109a7ef.png)

### 完成したログイン画面

データベースのテーブル作成まで
完全に完了させればログイン操作が
可能になります

![スクリーンショット 2023-04-11 15.28.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/f848af84-e367-5d3a-f7c6-c78aa1d62a1c.png)