Laravel #01 (Laravel 9 on AWS)

[TM4423]

今日の目標

• MVCモデルがどういうものか感覚をつかむ
• Laravelの操作になれる
• Laravel Loveになる

---

環境構築

本章ではAWSのCloud9上で各種インストール、Laravelプロジェクトを作成、DBの作成と接続、そのほかのLaravelプロジェクトの初期設定を行います この章は「手を動かして体で覚える」ことがまず何より重要です。習うより慣れろ！

PHPのセットアップ

全てCloud9のターミナル上で操作をします ターミナル上で該当のコードをコピペしてEnterキーを押しましょう

0. cloud9上でターミナルを開く

↓これがターミナル

1. パッケージのアップデート

sudo yum update -y

1. PHPのパッケージをすべてアンインストール

sudo yum -y remove php-*

1. amazon-linux-extrasをアップデート

sudo yum update -y amazon-linux-extras

1. amazon-linux-extrasで使用中のパッケージと使えるパッケージを確認（スキップ可）

amazon-linux-extras

1. lamp-mariadb10.2-php7.2を使用停止

sudo amazon-linux-extras disable lamp-mariadb10.2-php7.2

1. PHP8.0を有効化

sudo amazon-linux-extras enable php8.0

1. インストールするパッケージの案内があったので、表示されたコマンドを実行

sudo yum clean metadata && sudo yum install php-cli php-pdo php-fpm php-mysqlnd

sudo yum install php-cli php-common php-devel php-fpm php-gd php-mysqlnd php-mbstring php-pdo php-xml

🚨 ここでは2つとも ```php Total download size: 〇〇 M Installed size: 〇〇 M Is this ok [y/d/N]: ``` と聞かれるので y → Enterキー

1. apacheなどを再起動

sudo systemctl restart httpd.service

sudo systemctl restart php-fpm.service

DBの準備(MariaDB)

1. MariaDBデフォルト確認

sudo yum list installed | grep mariadb

1. MariaDBのインストール

sudo amazon-linux-extras install mariadb10.5 -y

1. Apache, MariaDBの起動

sudo systemctl start mariadb

sudo mysql_secure_installation

※ 入力項目

Enter current password for root (enter for none):  [Enterキー]
Switch to unix_socket authentication [Y/n] y または Enterキー
Set root password? [Y/n] y または Enterキー
New password: root    ※パスワードは入力しても画面に表示されません
Re-enter new password: root
Remove anonymous users? [Y/n] y または Enterキー
Disallow root login remotely? [Y/n] y または Enterキー
Remove test database and access to it? [Y/n] y または Enterキー
Reload privilege tables now? [Y/n] y または Enterキー

• メモ：[Y/n]のYはなぜ大文字？

  大文字の選択肢がデフォルトで、Enterを押下すると選択されるオプション

• メモ：Maria DBインストール参考URL

  https://knowledge.rinpress.com/index.php/MariaDBのインストール

1. MaridaDBの自動起動を有効化

sudo systemctl enable mariadb

sudo systemctl is-enabled mariadb

composerのインストール

1. composerのインストール

curl -sS https://getcomposer.org/installer | php

sudo mv composer.phar /usr/bin/composer

composer

※ composerが最新版でない場合は下記を実行（今回は不要）

sudo composer update

Laravelプロジェクトの作成

2022/2/8にリリースされたばかりの最新版を使います

1. Laravelプロジェクトを作成

composer create-project laravel/laravel cms

cmsフォルダが作成されいればOK

1. プロジェクトディレクトリに移動

cd cms

1. BuiltInのLaravelサーバーを起動

php artisan serve --port=8080

1. 動作確認① - ターミナル 下記のように表示されていればOK

Starting Laravel development server: http://127.0.0.1:8080
[日時] PHP 8.0.13 Development Server (http://127.0.0.1:8080) started

• 🔥ここでエラーが出た場合

  下記を実行する

  sudo yum install php-cli php-common php-devel php-fpm php-gd php-mysqlnd php-mbstring php-pdo php-xml

  y → Enterキー

  sudo composer update

  php artisan key:generate

1. 動作確認② - プレビュー 画面上部メニューの preview > Preview Running Application

   

   こういう画面が出ればOK 右上の「別タブで開く」アイコンをクリックすると便利

   

🚨 重要：サーバーを立ち上げたterminalは閉じずにそのまま残す 閉じるとプレビューの画面が見れなくなります！ イメージはMAMPを立ち上げているのと一緒です

• メモ：cmsが今回作るプロジェクトのディレクトリ名

  💡 CMSとは「Contents Management System：コンテンツ・マネジメント・システム」の略 簡単にいうとWebサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのこと https://www.hitachi-solutions.co.jp/digitalmarketing/sp/column/cms_vol01/

• メモ：授業で使うPHPとLaravelのバージョン

  💡 PHP 8.0 Laravel 9 ググる時は参考にしているページがどのバージョンについて書かれているかも気にしてみましょう✨ 【応用】 今回はamazon-linux-extrasで標準で用意されているPHP8.0を利用しています。 Laravel 9 でEnum（列挙型）という型を使うためにはPHP8.1 が必要です。Enumは授業では扱いませんが、チャレンジしてみたい！という方は調べてみてくださいね^^

phpMyAdminのインストール

0. 新しいターミナル「New Terminal」を開く

1. public階層（ディレクトリ）に移動

cd cms/public

1. phpMyAdminをダウンロード(ターミナル上に入力→Enter)

wget https://files.phpmyadmin.net/phpMyAdmin/5.1.2/phpMyAdmin-5.1.2-all-languages.zip

1. 上記を解凍(ターミナル上に入力→Enter)

unzip phpMyAdmin-5.1.2-all-languages.zip

1. cms階層（ディレクトリ）に戻る

cd ..

1. phpMyAdminのフォルダ名を変更（長いので）

phpMyAdmin-5.1.2-all-languages -> phpMyAdmin　に変更する

1. phpMyAdminにアクセス

プレビュー画面を立ち上げ、URLの最後に　/phpMyAdmin/index.php を追加しEnter
いつもの見慣れた画面が表示されていれば成功！！

ユーザー名・パスワードは「DBの準備」で入力した 「root」 

DBの作成&Laravelと接続

データベースを作成 方法はいくつかありますが、今回はターミナルで作成にチャレンジしてみましょう！ でも基本はわかりやすいphpMyAdmin上での作成がおすすめです

1. データベースの作成

   • ターミナルでDB作成する場合

     mysql -u root -p
     root [Enterキー]
     create database c9;
     show databases;
     exit;

   • phpMyAdminで作成する場合

     PHPの授業でやったのと同じです^^

     phpMyAdminの管理画面で c9 というDBを作成
     ※照合順はutf8mb4_general_ciを選択

2. 隠しファイルを表示

   

3. .envファイルを編集 cms直下にあるenvファイル内の同じ箇所を上書き（11行目あたり）

   DB_CONNECTION=mysql
   DB_HOST=localhost
   DB_PORT=3306
   DB_DATABASE=c9
   DB_USERNAME=root
   DB_PASSWORD=root

   • ※メモ：env

     environment（環境）の略

4. Webサーバーを再起動

   1. 起動中のwebサーバーを停止 Ctrl + C
   2. cmsディレクトリにいることを確認後、サーバー起動 php artisan serve --port=8080

🚨 超重要！！！**`.env`を変更後はWebサーバーを再起動**する

Laravelの初期設定（HTTPS設定）

/app/Providers/AppServiceProvider.php ファイルを修正

// 冒頭6行目あたり
use Illuminate\Support\Facades\URL;     //この行を追加

// boot(){}内に追加
public function boot() {

   URL::forceScheme('https');           //この行を追加

}

ターミナル操作（参照用）

これがターミナル↓

# **L**i**S**t　ディレクトリ一覧を表示
ls

# **C**hange **D**irectory　ディレクトリを変更
cd　+ ディレクトリ名

# 一つ戻る場合は
cd ..

# 候補を見たいときは
cd + Tabキー

# ターミナルの画面をリセット
clear

# 実行中のコマンドを強制終了（例：Laravelのサーバーを停止）
Ctrl + C

# コマンドの履歴を選択
カーソルキー　「↑」　or 「↓」

# **P**rint **W**orking **D**irectory　現ディレクトリを表示
pwd

---

ログイン認証

この章ではログイン認証を実装して、Laravelの凄さを体験してみましょう！

1. マイグレーションを実行

php artisan migrate

2. laravel/ui パッケージをインストール

composer require laravel/ui

※Laravel UIは認証周りの機能の雛型を生成してくれるLaravel公式のライブラリ

3. artisan コマンドを実行

php artisan ui vue --auth

4. npmパッケージをインストール

npm install

5. パッケージをビルド（これを×2回叩く）

npm run dev

6. 確認

[]()

MVCモデル

この章では、Webフレームワークの設計モデル（アーキテクチャ）の一つであるMVCモデルを学びましょう Model, View, Controllerそれぞれの役割を理解することで、Laravelでのアプリ開発がよりスムーズになります

💡 【解説 / MVC】 MVCとは，役割分担の概念！ これまでは適当な PHP ファイルに処理を全部書いていた！ ファイル数が増える... あの処理，どのファイルに書いたっけ...？？ バグあったけど次の処理が他の人の書いたファイルに... （チーム開発） => いずれ詰む未来が見える... => せや，処理毎に別々のところに書いて管理や分類をしやすくしたろ！MVC の 3 つくらいでええやろ！ 引用元：taroosg先生

MVC + Routing

例として，DB から取り出したデータを一覧画面に表示する流れを考えてみる

リクエストからの処理の流れ リクエスト -> Route -> Controller の順で処理が実行される

DB から取り出したデータの流れ Model -> Controller -> View の順で処理が実行される

©︎taroosg

CRUD実装（ブックマークアプリ）

この章ではいよいよ本格的にブックマークアプリのCRUD処理を開発します どういう役割のコードを書いているのか、感覚をつかみながら開発しましょう

①booksテーブルを作成 (テーブル設計図-マイグレーションの作成と実行)

ここでは、本を登録するためのBDテーブルを作成します LaravelではMigrationというテーブル作成に便利な機能が備わっています

• 💡解説 / マイグレーション

  マイグレーションとは「マイグレーションファイル」を用いてテーブルを管理する仕組み 「マイグレーションファイル」にテーブル名やカラム名を記述し，指定されたコマンドを実行することで設定したテーブルが生成される

1. booksテーブルの設計書（マイグレーションファイル）を作成

php artisan make:migration create_books_table --create=books

※成功すると、database/migrationsの直下にbooks_table.phpが作成されます

2. database/migrationsの直下のbooks_table.phpに以下追記

public function up()
{
    Schema::create('books', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('item_name');
        $table->integer('item_number');
        $table->integer('item_amount');
        $table->date('published');
        $table->timestamps();
    });
}

3. マイグレーション（テーブル作成）を実行

ターミナル上でコマンド実行

php artisan migrate

4. booksテーブルが作成されているか確認

実行したら、phpMyAdminでbooksテーブルとカラムが作成されているか確認しましょう

便利ツール（LaravelDB.com）

山崎学校長のLaravelDB.comで簡単にMigrationファイルが作れる！ https://laraveldb.com/index.php

②Modelを作成（テーブルを簡単に扱えるようにする機能）

Modelはデータベースをうまく処理してくれる役割を担います。 ①で作ったbooksテーブルに対応するBookモデルをここでは作成しましょう。

• img

  

  ©︎山崎学校長

1. ターミナルでコマンドを実行しModelを作成

php artisan make:model Book

2. /app/Models/Book.php（Model） に作成されたことを確認

💡解説 / Eloquent Model

Eloquent Model は Laravel 標準の ORM（object-relational mapper）である．ORM とは，DB のレコードをオブジェクトとして直感的に扱えるようにしたもので，SQL を意識せずにプログラムで処理を記述することができる．

Eloquent Model は定義された「Model」を用いることで簡単に DB へのデータ保存・取得などを行える．

1 つのモデルが 1 つのテーブルに対応する．

例えば，booksテーブルに対してBookのようにモデルを定義すると自動的に対応する．モデル内に明示的に対応を記述することもできる．

テーブルに対してデータ操作を行う場合，対応するモデルに対して処理を実行することで DB 操作を行うことができる．

引用元：taroosg先生

💡+α / MigrationとModelは同時に作成できる

①のMigrationファイルと②のModelを同時に作成する-m のオプションを末尾につける

php artisan make:model Book -m

他にもControllerを同時に作れたりと、色々なオプションが用意されているので、慣れてきたら利用しましょう 参考：https://qiita.com/niisan-tokyo/items/9c799989cb535489f201

③Viewを作成（表示画面）

この項では実際に表示画面を作成していきましょう 扱うファイルは app.blade.php & books.blade.php です

• img

  

1. /resources/views/layouts/app.blade.php（View） を作成（省略）

app.blade.phpを未作成の場合、以下コードを貼り付けます。

🚨 *※今回はログイン認証をlaravel/uiを利用して作成した際にapp.blade.phpを自動で作成済みなので、このステップは行いません*

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Book List</title>
        <!-- CSS と JavaScript -->
    </head>
    <body>
        <div class="container">
            <nav class="navbar navbar-default">
            <!-- ナビバーの内容 -->
            </nav>
        </div>
        @yield('content')
    </body>
</html>

2. /resources/views/books.blade.php（View） を作成

@extends('layouts.app')
@section('content')
    <!-- Bootstrapの定形コード… -->
    <div class="card-body">
        <div class="card-title">
            ブックマーク
        </div>

        <!-- ↓バリデーションエラーの表示に使用-->

        <!-- ↑バリデーションエラーの表示に使用-->

        <!-- 本登録フォーム -->
        <form action="{{ url('books') }}" method="POST" class="form-horizontal">
            @csrf
            <!-- 本のタイトル -->
            <div class="form-group col-md-6">
                <label for="item_name" class="col-sm-3 control-label">タイトル</label>
                <input type="text" name="item_name" class="form-control" id="item_name">
            </div>

            <!-- 本 登録ボタン -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-primary">
                        Save
                    </button>
                </div>
            </div>
        </form>
    </div>
    <!-- Book: 既に登録されてる本のリスト -->

@endsection

🚨 【重要 / form actionは@csrfと一緒に使う】 クロス・サイト・リクエスト・フォージェリは悪意のあるエクスプロイトの一種 ```php @csrf // または {{ csrf_field()}} ``` はその攻撃から守ってくれる

• 💡 【コード解説 / @yieldと@sectionの部分は何している？】

  親のapp.blade.php

  @yield（'content')

  のところに、子のbooks.blade.php

  @secion('conten')

  から

  @endsection

  までの部分を挿入している

④ルート定義（ルーティング）を作成

これまでにDB+Model（データの操作を担当）、View(表示を担当)を作成しました ここでは、Webアプリの玄関口（受付）となるRoutingを作成していきましょう

• img

  

💡 【解説 / ルーティング】 アクセスしたアドレスを元に処理を割り振るための機能

1. /routes/web.php（ルート定義）に以下の記述を追加

先頭部

use App\Models\Book;
use Illuminate\Http\Request;

中間

// 本のダッシュボード表示(books.blade.php)
Route::get('/', function () {
        return view('books');  //＊＊ ここを修正 ＊＊
});

// ** ここから追加 **
// 新「本」を追加
Route::post('/books', function (Request $request) {
    //
});

// 本を削除
Route::delete('/book/{book}', function (Book $book) {
    //
});

2. プレビュー画面で確認

無事に本のタイトルを入力するフォームが表示されていればOK

⑤CRUD機能実装（登録）

1. /routes/web.php（ルート定義）を編集

// 新「本」を追加
Route::post('/books', function (Request $request) {
    $books = new Book;
    $books->item_name = $request->item_name;
    $books->item_number = '1'; // 今は固定値で登録
    $books->item_amount = '1000'; //今は固定値で登録
    $books->published = '2017-03-07 00:00:00'; //今は固定値で登録
    $books->save();
    return redirect('/');
});

2. formを送信した後にDBに登録処理ができているか、phpMyAdminで確認

⑥CRUD機能実装（表示）

本項では、登録したデータの一覧を取得し表示する機能を実装していきましょう

1. /routes/web.php（ルート定義）を編集

Route::get('/', function () {
    $books = Book::orderBy('created_at', 'asc')->get();
    return view('books', [
        'books' => $books
    ]);
    //return view('books',compact('books')); //も同じ意味
});

2. /resources/views/books.blade.php（View）

< !-- Book: 既に登録されてる本のリスト -->の下に追加

<!-- 現在の本 -->
@if (count($books) > 0)
    <div class="card-body">
        <table class="table table-striped task-table">
            <!-- テーブルヘッダ -->
            <thead>
                <th>本一覧</th>
                <th>&nbsp;</th>
            </thead>
            <!-- テーブル本体 -->
            <tbody>
                @foreach ($books as $book)
                    <tr>
                        <!-- 本タイトル -->
                        <td class="table-text">
                            <div>{{ $book->item_name }}</div>
                        </td>

                        <!-- 本: 削除ボタン -->
                        <td>

                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

3. プレビュー画面で、一覧表示できているか確認

💡解説 / @foreach

Bladeテンプレートエンジンに備わっている便利な繰り返し処理をしてくれる機能 PHPの foreach と同じ感じで書ける

💡+α / デバッグ

viewで$booksに値が入っているか確かめたい時は {{ddd($books)}} を仕込んでみよう ※Controllerで ddd($books); をするのもGOOD

---

⑦CRUD機能実装（削除)

1. books.blade.php（View）に削除ボタンを追加

< !-- 本: 削除ボタン -->下の要素内に追加

<form action="{{ url('book/'.$book->id) }}" method="POST">
    @csrf
    @method('delete')
    <button type="submit" class="btn btn-danger">
        削除
    </button>
</form>

💡 【解説】 削除ボタンクリック時には，コントローラのdestroy()関数にリクエストが送られる． 削除の処理を行うにはDELETEメソッドでリクエストを送る必要があるが，form からは GET または POST でしか送れない． `@method('delete')`を記述することで，DELETEメソッドで送信できる． ※`{{ method_field('delete') }}` も同じ意味 引用：taroosg先生

2. web.phpに「本を削除」のルート定義を追加編集

Route::delete('/book/{book}', function (Book $book) {
    $book->delete();       //追加
    return redirect('/');  //追加
});

⑧CRUD機能実装（更新）

1. books.blade.php（View）に更新ボタンを追加

削除ボタンのタグの下

<!-- 本: 更新ボタン -->
<td>
    <a href="{{ url('booksedit/'.$book->id) }}">
        <button type="submit" class="btn btn-primary">更新</button>
    </a>
</td>

2. booksedit.blade.phpをview配下に新規作成し、以下コードを貼り付け

@extends('layouts.app')
@section('content')
<div class="row container">
    <div class="col-md-12">
        <!-- ↓バリデーションエラーの表示に使用-->

        <!-- ↑バリデーションエラーの表示に使用-->
        <form action="{{ url('books/update') }}" method="POST">
            <!-- item_name -->
            <div class="form-group">
                <label for="item_name">本のタイトル</label>
                <input type="text" name="item_name" class="form-control" id="item_name" value="{{$book->item_name}}">
            </div>
            <!--/ item_name -->
            <!-- Save ボタン/Back ボタン -->
            <div class="well well-sm">
                <button type="submit" class="btn btn-primary">Save</button>
                <a class="btn btn-link pull-right" href="{{ url('/') }}"> Back</a>
            </div>
            <!--/ Save ボタン/Back ボタン -->
            <!-- id 値を送信 -->
            <input type="hidden" name="id" value="{{$book->id}}" /> <!--/ id 値を送信 -->
            <!-- CSRF -->
            @csrf
            <!--/ CSRF -->
        </form>
    </div>
</div>
@endsection

3. web.php（ルート定義）に更新画面表示と更新処理を追加

//「本」の更新画面表示
Route::get('/booksedit/{book}',function(Book $book){
    return view('booksedit', ['book' => $book]);
});

//「本」の更新処理
Route::post('books/update',function(Request $request){
        // Eloquent モデル
    $books = Book::find($request->id);
    $books->item_name = $request->item_name;
    $books->item_number = '1';
    $books->item_amount = '1000';
    $books->published = '2017-03-07 00:00:00';
    $books->save(); 
    return redirect('/');
});

[TM4423]

間違えやすいところ　2ヶ所

①booksテーブルを作成 (テーブル設計図-マイグレーションの作成と実行)

2. database/migrationsの直下のbooks_table.phpに以下追記

④ルート定義（ルーティング）を作成

1. /routes/web.php（ルート定義）に以下の記述を追加

[TM4423]

今日の目標

• MVCモデルの役割・流れを意識しながら開発できる
• CRUDの処理の書き方がわかる
• Laravel Loveになる

---

環境構築（復習）

本章ではAWSのCloud9上で各種インストール、Laravelプロジェクトを作成、DBの作成と接続、そのほかのLaravelプロジェクトの初期設定を行います この章は「手を動かして体で覚える」ことがまず何より重要です。習うより慣れろ！

PHPのセットアップ

全てCloud9のターミナル上で操作をします ターミナル上で該当のコードをコピペしてEnterキーを押しましょう

0. cloud9上でターミナルを開く

↓これがターミナル

1. パッケージのアップデート

sudo yum update -y

1. PHPのパッケージをすべてアンインストール

sudo yum -y remove php-*

1. amazon-linux-extrasをアップデート

sudo yum update -y amazon-linux-extras

1. amazon-linux-extrasで使用中のパッケージと使えるパッケージを確認（スキップ可）

amazon-linux-extras

1. lamp-mariadb10.2-php7.2を使用停止

sudo amazon-linux-extras disable lamp-mariadb10.2-php7.2

1. PHP8.0を有効化

sudo amazon-linux-extras enable php8.0

1. インストールするパッケージの案内があったので、表示されたコマンドを実行

sudo yum clean metadata && sudo yum install php-{pear,cgi,pdo,common,curl,mbstring,gd,mysqlnd,gettext,bcmath,json,xml,fpm,intl,zip,cli,devel}

🚨 ここで ``` Total download size: 〇〇 M Installed size: 〇〇 M Is this ok [y/d/N]: ``` と聞かれるので y → Enterキー

1. xdebugをuninstall & install

sudo pecl uninstall xdebug & sudo pecl install xdebug

1. apacheなどを再起動

sudo systemctl restart httpd.service

sudo systemctl restart php-fpm.service

DBの準備(MariaDB)

1. MariaDBデフォルト確認

sudo yum list installed | grep mariadb

1. MariaDBのインストール

sudo amazon-linux-extras install mariadb10.5 -y

1. Apache, MariaDBの起動

sudo systemctl start mariadb

sudo mysql_secure_installation

※ 入力項目

Enter current password for root (enter for none):  [Enterキー]
Switch to unix_socket authentication [Y/n] y または Enterキー
Set root password? [Y/n] y または Enterキー
New password: root    ※パスワードは入力しても画面に表示されません
Re-enter new password: root
Remove anonymous users? [Y/n] y または Enterキー
Disallow root login remotely? [Y/n] y または Enterキー
Remove test database and access to it? [Y/n] y または Enterキー
Reload privilege tables now? [Y/n] y または Enterキー

• メモ：[Y/n]のYはなぜ大文字？

  大文字の選択肢がデフォルトで、Enterを押下すると選択されるオプション

• メモ：Maria DBインストール参考URL

  https://knowledge.rinpress.com/index.php/MariaDBのインストール

1. MaridaDBの自動起動を有効化

sudo systemctl enable mariadb

sudo systemctl is-enabled mariadb

composerのインストール

1. composerのインストール

curl -sS https://getcomposer.org/installer | php

sudo mv composer.phar /usr/bin/composer

composer

※ composerが最新版でない場合は下記を実行（今回は不要）

sudo composer update

Laravelプロジェクトの作成

2022/2/8にリリースされたばかりの最新版を使います

1. Laravelプロジェクトを作成

composer create-project laravel/laravel cms

cmsフォルダが作成されいればOK

1. プロジェクトディレクトリに移動

cd cms

1. BuiltInのLaravelサーバーを起動

php artisan serve --port=8080

1. 動作確認① - ターミナル 下記のように表示されていればOK

Starting Laravel development server: http://127.0.0.1:8080
[日時] PHP 8.0.13 Development Server (http://127.0.0.1:8080) started

• 🔥ここでエラーが出た場合

  下記を実行する

  sudo yum install php-cli php-common php-devel php-fpm php-gd php-mysqlnd php-mbstring php-pdo php-xml

  y → Enterキー

  sudo composer update

  php artisan key:generate

1. 動作確認② - プレビュー 画面上部メニューの preview > Preview Running Application

   

   こういう画面が出ればOK 右上の「別タブで開く」アイコンをクリックすると便利

   

🚨 重要：サーバーを立ち上げたterminalは閉じずにそのまま残す 閉じるとプレビューの画面が見れなくなります！ イメージはMAMPを立ち上げているのと一緒です

• メモ：cmsが今回作るプロジェクトのディレクトリ名

  💡 CMSとは「Contents Management System：コンテンツ・マネジメント・システム」の略 簡単にいうとWebサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのこと https://www.hitachi-solutions.co.jp/digitalmarketing/sp/column/cms_vol01/

• メモ：授業で使うPHPとLaravelのバージョン

  💡 PHP 8.0 Laravel 9 ググる時は参考にしているページがどのバージョンについて書かれているかも気にしてみましょう✨ 【応用】 今回はamazon-linux-extrasで標準で用意されているPHP8.0を利用しています。 Laravel 9 でEnum（列挙型）という型を使うためにはPHP8.1 が必要です。Enumは授業では扱いませんが、チャレンジしてみたい！という方は調べてみてくださいね^^

phpMyAdminのインストール

0. 新しいターミナル「New Terminal」を開く

1. public階層（ディレクトリ）に移動

cd cms/public

1. phpMyAdminをダウンロード(ターミナル上に入力→Enter)

wget https://files.phpmyadmin.net/phpMyAdmin/5.1.2/phpMyAdmin-5.1.2-all-languages.zip

1. 上記を解凍(ターミナル上に入力→Enter)

unzip phpMyAdmin-5.1.2-all-languages.zip

cms/public内にphpMyAdmin-5.1.2-all-languagesのフォルダが解凍されているか確認しましょう

1. cms階層（ディレクトリ）に戻る

cd ..

1. phpMyAdminのフォルダ名を変更（長いので）

 -> phpMyAdmin　に変更する

1. phpMyAdminにアクセス

プレビュー画面を立ち上げ、URLの最後に　/phpMyAdmin/index.php を追加しEnter
いつもの見慣れた画面が表示されていれば成功！！

ユーザー名・パスワードは「DBの準備」で入力した 「root」 

DBの作成&Laravelと接続

データベースを作成 方法はいくつかありますが、今回はターミナルで作成にチャレンジしてみましょう！ でも基本はわかりやすいphpMyAdmin上での作成がおすすめです

1. データベースの作成

   • ターミナルでDB作成する場合

     mysql -u root -p
     root [Enterキー]
     create database c9;
     show databases;
     exit;

   • phpMyAdminで作成する場合

     PHPの授業でやったのと同じです^^

     phpMyAdminの管理画面で c9 というDBを作成
     ※照合順はutf8mb4_general_ciを選択

2. 隠しファイルを表示

   

3. .envファイルを編集 cms直下にあるenvファイル内の同じ箇所を上書き（11行目あたり）

   DB_CONNECTION=mysql
   DB_HOST=localhost
   DB_PORT=3306
   DB_DATABASE=c9
   DB_USERNAME=root
   DB_PASSWORD=root

   • ※メモ：env

     environment（環境）の略

4. Webサーバーを再起動

   1. ターミナルで起動中のwebサーバーを停止 Ctrl + C
   2. cmsディレクトリにいることを確認後、サーバー起動 php artisan serve --port=8080

🚨 超重要！！！**`.env`を変更後はターミナルで起動中のWebサーバーを再起動**する

Laravelの初期設定（HTTPS設定）

/app/Providers/AppServiceProvider.php ファイルを修正

// 冒頭6行目あたり
use Illuminate\Support\Facades\URL;     //この行を追加

// boot(){}内に追加
public function boot() {
   URL::forceScheme('https');           //この行を追加
}

ログイン認証（復習）

この章ではログイン認証を実装して、Laravelの凄さを体験してみましょう！

1. マイグレーションを実行

php artisan migrate

2. laravel/ui パッケージをインストール

composer require laravel/ui

※Laravel UIは認証周りの機能の雛型を生成してくれるLaravel公式のライブラリ

3. artisan コマンドを実行

php artisan ui vue --auth

4. npmパッケージをインストール

npm install

5. パッケージをビルド（これを×2回叩く）

npm run dev

6. 確認

こうなっていればOK 登録やログインができるか試してみましょう

👀 ターミナル操作

これがターミナル↓

# **L**i**S**t　ディレクトリ一覧を表示
ls

# **C**hange **D**irectory　ディレクトリを変更
cd　+ ディレクトリ名

# 一つ戻る場合は
cd ..

# 候補を見たいときは
cd + Tabキー

# ターミナルの画面をリセット
clear

# 実行中のコマンドを強制終了（例：Laravelのサーバーを停止）
Ctrl + C

# コマンドの履歴を選択
カーソルキー　「↑」　or 「↓」

# **P**rint **W**orking **D**irectory　現ディレクトリを表示
pwd

👀 Laravelの便利ツール（artisanコマンド）

ArtisanはLaravelが標準で搭載しているコマンドラインインターフェース（CLI）です。 （CLIとはキーボードで操作する画面のこと。ターミナルで php artisan ~~~ と入力したあれです）

🚨 artisan コマンドは必ず cms階層で行いましょう！ artisan ファイルがある階層でのみ php artisan ~~ は実行できます ※今回はcmsという名前でプロジェクトを作成しているので、cms階層にartisanファイルがあります 

artisanコマンドを使用すると、Model作成、Controller作成、マイグレーションファイル作成&実行（そのほか色々！）などの、Laravelでよく使う機能を簡単に実行することができます

全てのartisanコマンドを表示

php artisan list

マイグレーションファイル（テーブル）作成

php artisan make:migration create_{テーブル名（複数形の名詞)}_table --create_{テーブル名（複数形）}

// 例
php artisan make:migration create_books_table --create=books

マイグレーション実行

php artisan migrate

モデル作成

php artisan make:model {Xxx（単数系・先頭は大文字）}

// 例
php artisan make:model Book

コントローラ作成

php artisan make:controller {Xxx}Controller

// 例
php artisan make:controller BookｓController --resource

// ※ --resourceオプションは後ほど学びます。今は「全部入り」のコントローラ（監督）を召喚すると思ってください

👀 MVCモデル

この章では、Webフレームワークの設計モデル（アーキテクチャ）の一つであるMVCモデルを学びましょう Model, View, Controllerそれぞれの役割を理解することで、Laravelでのアプリ開発がよりスムーズになります

💡 【解説 / MVC】 MVCとは，役割分担の概念！ これまでは適当な PHP ファイルに処理を全部書いていた！ ファイル数が増える... あの処理，どのファイルに書いたっけ...？？ バグあったけど次の処理が他の人の書いたファイルに... （チーム開発） => いずれ詰む未来が見える... => せや，処理毎に別々のところに書いて管理や分類をしやすくしたろ！MVC の 3 つくらいでええやろ！ 引用元：taroosg先生

MVC + Routing

例として，DB から取り出したデータを一覧画面に表示する流れを考えてみる

リクエストからの処理の流れ リクエスト -> Route -> Controller の順で処理が実行される

DB から取り出したデータの流れ Model -> Controller -> View の順で処理が実行される

©︎taroosg

---

CRUD実装（ブックマークアプリ）

この章ではいよいよ本格的にブックマークアプリのCRUD処理を開発します どういう役割のコードを書いているのか、感覚をつかみながら開発しましょう

**💡 Laravelでよく使うディレクトリはこれ！

（迷ったら参照しましょう）**

①booksテーブルを作成 (テーブル設計図-マイグレーションの作成と実行)

ここでは、本を登録するためのBDテーブルを作成します LaravelではMigrationというテーブル作成に便利な機能が備わっています

💡 解説 / マイグレーション マイグレーションとは「マイグレーションファイル」を用いてテーブルを管理する仕組み 「マイグレーションファイル」にテーブル名やカラム名を記述し，指定されたコマンドを実行することで設定したテーブルが生成される

1. booksテーブルの設計書（マイグレーションファイル）を作成

php artisan make:migration create_books_table --create=books

※成功すると、database/migrationsの直下にYYYY_MM_DD_xxxxxx_create_books_table.phpが作成されます

2. database/migrationsの直下のbooks_table.phpに以下追記

public function up()
{
    Schema::create('books', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('item_name');
        $table->integer('item_number');
        $table->integer('item_amount');
        $table->date('published');
        $table->timestamps();
    });
}

3. マイグレーション（テーブル作成）を実行

ターミナル上でコマンド実行

php artisan migrate

4. booksテーブルが作成されているか確認

実行したら、phpMyAdminでbooksテーブルとカラムが作成されているか確認しましょう

💡便利ツール（LaravelDB.com）

山崎学校長のLaravelDB.comで簡単にMigrationファイルが作れる！ サイト：https://laraveldb.com/index.php デモ動画：https://www.youtube.com/watch?v=sHt5v4XOWbc

💡マイグレーションのカラム

基本的に使うのはstring integer などの決まったものです。 必要に応じてカラムを作成しましょう 参考ページ（公式<日本語>）

②Modelを作成（テーブルを簡単に扱えるようにする機能）

Modelはデータベースをうまく処理してくれる役割を担います。 ①で作ったbooksテーブルに対応するBookモデルをここでは作成しましょう。

• img

  

  ©︎山崎学校長

1. ターミナルでコマンドを実行しModelを作成

php artisan make:model Book

2. /app/Models/Book.php（Model） が作成されたことを確認

💡解説 / Eloquent Model

Eloquent Model は Laravel 標準の ORM（object-relational mapper）である．ORM とは，DB のレコードをオブジェクトとして直感的に扱えるようにしたもので，SQL を意識せずにプログラムで処理を記述することができる．

Eloquent Model は定義された「Model」を用いることで簡単に DB へのデータ保存・取得などを行える．

1 つのモデルが 1 つのテーブルに対応する．

例えば，booksテーブルに対してBookのようにモデルを定義すると自動的に対応する．モデル内に明示的に対応を記述することもできる．

テーブルに対してデータ操作を行う場合，対応するモデルに対して処理を実行することで DB 操作を行うことができる．

引用元：taroosg先生

💡+α / MigrationとModelは同時に作成できる

①のMigrationファイルと②のModelを同時に作成する-m のオプションを末尾につける

php artisan make:model Book -m

他にもControllerを同時に作れたりと、色々なオプションが用意されているので、慣れてきたら利用しましょう 参考：https://qiita.com/niisan-tokyo/items/9c799989cb535489f201

③Viewを作成（表示画面）

この項では実際に表示画面を作成していきましょう 扱うファイルは app.blade.php & books.blade.php です

• img

  

1. /resources/views/layouts/app.blade.php（View） を作成（省略）

app.blade.phpを未作成の場合、以下コードを貼り付けます。

🚨 *※今回はログイン認証をlaravel/uiを利用して作成した際にapp.blade.phpを自動で作成済みなので、このステップは行いません*

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Book List</title>
        <!-- CSS と JavaScript -->
    </head>
    <body>
        <div class="container">
            <nav class="navbar navbar-default">
            <!-- ナビバーの内容 -->
            </nav>
        </div>
        @yield('content')
    </body>
</html>

2. /resources/views/books.blade.php（View） を作成

• img

  

@extends('layouts.app')
@section('content')
    <!-- Bootstrapの定形コード… -->
    <div class="card-body">
        <div class="card-title">
            ブックマーク
        </div>

        <!-- ↓バリデーションエラーの表示に使用-->

        <!-- ↑バリデーションエラーの表示に使用-->

        <!-- 本登録フォーム -->
        <form action="{{ url('books') }}" method="POST" class="form-horizontal">
            @csrf
            <!-- 本のタイトル -->
            <div class="form-group col-md-6 p-2">
                <label for="item_name" class="col-sm-3 control-label">タイトル</label>
                <input type="text" name="item_name" class="form-control" id="item_name">
            </div>
            <!-- 冊数 -->
            <div class="form-group col-md-6 p-2">
                <label for="item_number" class="col-sm-3 control-label">冊数</label>
                <input type="text" name="item_number" class="form-control" id="item_number">
            </div>
            <!-- 金額 -->
            <div class="form-group col-md-6 p-2">
                <label for="item_amount" class="col-sm-3 control-label">金額</label>
                <input type="text" name="item_amount" class="form-control" id="item_amount">
            </div>
            <!-- 公開日 -->
            <div class="form-group col-md-6 p-2">
                <label for="published" class="col-sm-3 control-label">公開日</label>
                <input type="date" name="published" class="form-control" id="published">
            </div>

            <!-- 本 登録ボタン -->
            <div class="form-group p-2">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-primary">
                        Save
                    </button>
                </div>
            </div>
        </form>
    </div>
    <!-- Book: 既に登録されてる本のリスト -->

@endsection

🚨 【重要 / form actionは@csrfと一緒に使う】 クロス・サイト・リクエスト・フォージェリは悪意のある攻撃（エクスプロイト）の一種 ```php @csrf // または {{ csrf_field()}} ``` はその攻撃から守ってくれる [https://readouble.com/laravel/9.x/ja/csrf.html](https://readouble.com/laravel/9.x/ja/csrf.html)

• 💡 【コード解説 / @yieldと@sectionの部分は何している？】

  親のapp.blade.php

  @yield（'content')

  のところに、子のbooks.blade.php

  @secion('content')

  から

  @endsection

  までの部分を挿入している

💡解説 / LaravelのViewとは(blade.php)

Viewは画面に表示する役割でした。 Laravelではresources/views/のディレクトリ下に {ファイル名}.blade.phpとして保存します

💡 解説 / blade.phpってなに？ blade（ブレード）はLaravelのテンプレートエンジンです。 テンプレートエンジンとは、Modelから受け取ったデータをテンプレート（ひな型）に渡し、Viewを作成する工場のような役割をします。 `@if` ~ `@endif`　のようにPHP風の書き方 `{{ }}`エコー文で`htmlspecialchars`関数を自動で適応したXSS攻撃（覚えてない人は復習！） など、さまざまな機能が詰まっています！

④ルート定義を作成

これまでにDB+Model（データの操作を担当）、View(表示を担当)を作成しました ここでは、Webアプリの玄関口（受付）となるRoutingを作成していきましょう

💡 解説 / ルーティング アクセスしたアドレスを元に処理を割り振るための機能

• img

  

1. /routes/web.php（ルート定義）に以下の記述を追加

先頭部

use App\Models\Book;
use Illuminate\Http\Request;

中間

// 本のダッシュボード表示(books.blade.php)
Route::get('/', function () {
        return view('books');  //＊＊ ここを修正 ＊＊
});

// ** ここから追加 **
// 新「本」を追加
Route::post('/books', function (Request $request) {
    //
});

// 「本」の更新画面表示
Route::get('/booksedit/{book}',function(Book $book){
    //
});

// 「本」の更新処理
Route::post('books/update',function(Request $request){
        // 
});

// 本を削除
Route::delete('/book/{book}', function (Book $book) {
    //
});

🚨 ※ Route::get(’/’, function(){ (省略)});　 このルート部分は、web.php内にすでに書かれているものがある。 なので↓ここを削除し、上の「中間」のコードをコピペする ```php Route::get('/', function () { return view('welcome'); }); ```

2. プレビュー画面で確認

プレビュー画面で/にアクセス（URLは https://(中略).amazonaws.com/ ）。 無事に本のタイトルを入力するフォームが表示されていればOK

⑤CRUD機能実装（登録）

1. /routes/web.php（ルート定義）を編集

// 新「本」を追加
Route::post('/books', function (Request $request) {
    $book = new Book;
    $book->item_name =    $request->item_name;
    $book->item_number =  $request->item_number;
    $book->item_amount =  $request->item_amount;
    $book->published =    $request->published;
    $book->save();
    return redirect('/');
});

2. formを送信した後にDBに登録処理ができているか、phpMyAdminで確認

⑥CRUD機能実装（表示）

本項では、登録したデータの一覧を取得し表示する機能を実装していきましょう

1. /routes/web.php（ルート定義）を編集

Route::get('/', function () {}の中身を編集しましょう

Route::get('/', function () {
    $books = Book::orderBy('created_at', 'asc')->get();
    return view('books', ['books' => $books]);
    //return view('books',compact('books')); //も同じ意味
});

💡 コード解説 ここでは以下のことをしています ①Bookモデルを使ってbooksテーブルからデータを取得する ②View(books.blade.php)にそのデータを`$books` として渡す

2. /resources/views/books.blade.php（View）

< !-- Book: 既に登録されてる本のリスト -->の下に追加

<!-- Book: 既に登録されてる本のリスト -->
@if (count($books) > 0)
    <div class="card-body">
        <table class="table table-striped task-table">
            <!-- テーブルヘッダ -->
            <thead>
                <th>本一覧</th>
                <th>&nbsp;</th>
            </thead>
            <!-- テーブル本体 -->
            <tbody>
                @foreach ($books as $book)
                    <tr>
                        <!-- 本タイトル -->
                        <td class="table-text">
                            <div>{{ $book->item_name }}</div>
                        </td>
                        <!-- 本: 削除ボタン -->
                        <td>

                        </td>
                        <!-- 本: 更新ボタン -->
                        <td>

                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

3. プレビュー画面で、一覧表示できているか確認

💡解説 / @foreach

Bladeテンプレートエンジンに備わっている便利な繰り返し処理をしてくれる機能 PHPの foreach と同じ感じで書ける

💡+α / デバッグ

viewで$booksに値が入っているか確かめたい時は {{dd($books)}} を仕込んでみよう ※Controllerで dd($books); をするのもGOOD

⑦CRUD機能実装（削除)

1. books.blade.php（View）に削除ボタンを追加

< !-- 本: 削除ボタン -->下の要素内に追加

<form action="{{ url('book/'.$book->id) }}" method="POST">
    @csrf
    @method('delete')
    <button type="submit" class="btn btn-danger">
        削除
    </button>
</form>

プレビュー

💡 【解説】 削除ボタンクリック時には，コントローラのdestroy()関数にリクエストが送られる． 削除の処理を行うにはDELETEメソッドでリクエストを送る必要があるが，form からは GET または POST でしか送れない． `@method('delete')`を記述することで，DELETEメソッドで送信できる． ※`{{ method_field('delete') }}` も同じ意味 引用：taroosg先生

💡 【コード解説：`url()` 】 アプリケーションの任意のURLを自動で生成してくれる関数 例：https://example.co.jp/book/1 `'book/'.$book->id`　の部分 `$book->id`の部分には、booksテーブルに保存されている各本のidが入る `$book->id` は上の例で「1」の部分にあたる より詳しく知りたい方→[Laravel 9.x URL生成](https://readouble.com/laravel/9.x/ja/urls.html)

2. web.phpに「本を削除」のルート定義を追加編集

Route::delete('/book/{book}', function (Book $book) {
    $book->delete();       //追加
    return redirect('/');  //追加
});

⑧CRUD機能実装（更新）

更新処理では、2つのRouteが必要になります i. 更新をするための画面を表示する用のRoute ii. 実際にbooksテーブルを更新する用のRoute

1. books.blade.php（View）に更新ボタンを追加

削除ボタンのタグの下

<!-- 本: 更新ボタン -->
<td>
    <a href="{{ url('booksedit/'.$book->id) }}">
        <button type="submit" class="btn btn-primary">更新</button>
    </a>
</td>

プレビュー

2. booksedit.blade.phpをview配下に新規作成し、以下コードを貼り付け

@extends('layouts.app')
@section('content')
    <div class="row container">
        <div class="col-md-12">
            <!-- ↓バリデーションエラーの表示に使用-->

            <!-- ↑バリデーションエラーの表示に使用-->
            <form action="{{ url('books/update') }}" method="POST">
                <!-- item_name -->
                <div class="form-group p-2">
                    <label for="item_name">タイトル</label>
                    <input type="text" name="item_name" class="form-control" id="item_name" value="{{$book->item_name}}">
                </div>
                <!--/ item_name -->

                <!-- item_number -->
                <div class="form-group p-2">
                    <label for="item_number">冊数</label>
                    <input type="text" name="item_number" class="form-control" id="item_number" value="{{$book->item_number}}">
                </div>
                <!--/ item_number -->

                <!-- item_amount -->
                <div class="form-group p-2">
                    <label for="item_amount">金額</label>
                    <input type="text" name="item_amount" class="form-control" id="item_amount" value="{{$book->item_amount}}">
                </div>
                <!--/ item_amount -->

                <!-- published -->
                <div class="form-group p-2">
                    <label for="published">公開日</label>
                    <input type="date" name="published" class="form-control" id="published" value="{{$book->published}}">
                </div>
                <!--/ published -->

                <!-- Save ボタン/Back ボタン -->
                <div class="form-group p-2">
                    <div class="well well-sm">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <a class="btn btn-link pull-right" href="{{ url('/') }}"> Back</a>
                    </div>
                </div>
                <!--/ Save ボタン/Back ボタン -->

                <!-- id 値を送信 -->
                <input type="hidden" name="id" value="{{$book->id}}" />
                <!--/ id 値を送信 -->

                <!-- CSRF -->
                @csrf
                <!--/ CSRF -->
            </form>
        </div>
    </div>
@endsection

3. web.php（ルート定義）に更新画面表示と更新処理を追加

// 「本」の更新画面表示
Route::get('/booksedit/{book}',function(Book $book){
    return view('booksedit', ['book' => $book]);
});

// 「本」の更新処理
Route::post('books/update',function(Request $request){
    // Eloquent モデル
    $books = Book::find($request->id);
    $books->item_name =    $request->item_name;
    $books->item_number =  $request->item_number;
    $books->item_amount =  $request->item_amount;
    $books->published =    $request->published;
    $books->save(); 
    return redirect('/');
});

実際に「タイトル」など変更できるか確認してみましょう！

プレビュー（更新画面）

プレビュー（一覧画面<タイトル更新後>） ※ここでは「テスト本（更新しました）」というタイトルに変更しています↓

⑨Controllerを作成

イントロ

今まではルート定義(web.php)に、とあるURLが呼ばれた時の処理を書いていましたね。※例：↓function(){}の部分

Route::get('/', function () {
    $books = Book::orderBy('created_at', 'asc')->get();
    return view('books', ['books' => $books]);
});

あれ、コントローラ（司令官）がなくてもアプリ作れちゃった・・・。コントローラいらなくね？

ちょっと待ってください！確かに機能が限られているサービスなら、ルート定義にfunction()部分を直接書いても一つのファイルで完結するのでわかりやすい面も。

でも、一般的なサービスでは数十~数百のルート定義があるのはあたりまえ。そうなるとルート定義が肥大化して逆にわかりにくいコードになってしまいます。

この章ではルート定義に持たせていた処理の役割をコントローラに移行しましょう。

左が・・・右になります！どちらが見通しがいいですか？

1. BooksControllerを作成

ControllerもMigrationやModelと同じでartisanコマンド一発で作成できます!!

php artisan make:controller BooksController --resource

💡 【+α / --resourceってなに?】 コントローラで行う処理は大体決まっています。あらかじめよく使う処理のテンプレートを用意し簡潔に書けるようにしてくれるのが**リソースコントローラ**です(全部入りのコントローラ)。 Controllerを作るときに `--resource`のオプションを付けると作成できます もっと詳しく学びたい方は[こちら](https://readouble.com/laravel/9.x/ja/controllers.html)

• BooksControllerが作成されたか確認

  

2. BooksControllerとModelを関連付け

BooksController.php

// 6行目に追加
use App\Models\Book; //Book モデルを使えるようにする

3. ルート定義の処理の部分をControllerに移行

まずは表示処理の部分をやってみましょう

web.php

// 本のダッシュボード表示(books.blade.php)
Route::get('/', function () {
    // ↓ここから
    $books = Book::orderBy('created_at', 'asc')->get();
    return view('books', ['books' => $books]);
    // ↑ここまでをBooksControllerの index()に移行
});

BooksController.php

public function index()
{
    // ↓ここから
    $books = Book::orderBy('created_at', 'asc')->get();
    return view('books', ['books' => $books]);
    // ↑ここまでを貼り付け
}

4. ルート定義とBooksControllerを関連付け

web.php

// 6行目
use App\Http\Controllers\BooksController; //追加

5. ルート定義に、移行したControllerの場所を記述

web.phpの表示処理のルート / に、BooksControllerの表示処理のfunction（ index）を紐付けましょう

Route::get('/', [BooksController::class, 'index']);

🚨 移行後もCRUD処理に問題がないか必ず確認しましょう

6. 他のルート定義も同様に、3と4を繰り返す

ルート定義と対応するリソースコントローラのfunction名

🚨 重要 functionの引数がある場合は、それも移行しましょう 例： `function (Request $request){}` ← (括弧内)もControllerに移行

完成コード

• web.php（該当部分）

  // 本のダッシュボード表示(books.blade.php)
  Route::get('/', [BooksController::class, 'index']);
  
  // 新「本」を追加
  Route::post('/books', [BooksController::class, 'store']);
  
  //「本」の更新画面表示
  Route::get('/booksedit/{book}',[BooksController::class, 'edit']);
  
  //「本」の更新処理
  Route::post('books/update',[BooksController::class, 'update']);
  
  // 本を削除
  Route::delete('/book/{book}', [BooksController::class, 'destroy']);

• BooksController.php

  <?php
  
  namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  use App\Models\Book;
  
  class BooksController extends Controller
  {
      /**
       * Display a listing of the resource.
       *
       * @return \Illuminate\Http\Response
       */
      public function index()
      {
          $books = Book::orderBy('created_at', 'asc')->get();
          return view('books', ['books' => $books]);
          //return view('books',compact('books')); //も同じ意味
      }
  
      /**
       * Show the form for creating a new resource.
       *
       * @return \Illuminate\Http\Response
       */
      public function create()
      {
          //
      }
  
      /**
       * Store a newly created resource in storage.
       *
       * @param  \Illuminate\Http\Request  $request
       * @return \Illuminate\Http\Response
       */
      public function store(Request $request)
      {
          $book = new Book;
          $book->item_name =    $request->item_name;
          $book->item_number =  $request->item_number;
          $book->item_amount =  $request->item_amount;
          $book->published =    $request->published;
          $book->save();
          return redirect('/');
      }
  
      /**
       * Display the specified resource.
       *
       * @param  int  $id
       * @return \Illuminate\Http\Response
       */
      public function show($id)
      {
          //
      }
  
      /**
       * Show the form for editing the specified resource.
       *
       * @param  int  $id
       * @return \Illuminate\Http\Response
       */
      public function edit(Book $book)
      {
          return view('booksedit', ['book' => $book]);
      }
  
      /**
       * Update the specified resource in storage.
       *
       * @param  \Illuminate\Http\Request  $request
       * @param  int  $id
       * @return \Illuminate\Http\Response
       */
      public function update(Request $request)
      {
          // Eloquent モデル
          $books = Book::find($request->id);
          $books->item_name =    $request->item_name;
          $books->item_number =  $request->item_number;
          $books->item_amount =  $request->item_amount;
          $books->published =    $request->published;
          $books->save(); 
          return redirect('/');
      }
  
      /**
       * Remove the specified resource from storage.
       *
       * @param  int  $id
       * @return \Illuminate\Http\Response
       */
      public function destroy(Book $book)
      {
          $book->delete();       //追加
          return redirect('/');  //追加
      }
  }

バリデーション

バリデーションとは入力チェック（検証）のことで、ルール通り正しい形式で書かれているか確認することです。この章では今まで作った画面に、バリデーションを追加しましょう。 （登録&更新画面 books.blade.php booksedit.blade.php）

今回はValidatorファサードというLaravelに備わっている機能を使用し、バリデーションを実装していきます

• 💡 この部分を作ります

  

1. コントローラでValidatorを使えるようにする

<BooksController.php 7行目>

<?php

namespace App\\Http\\Controllers;

use Illuminate\\Http\\Request;
use App\Models\Book;
use Validator; // 追加

2. コントローラにバリデーションのルールを記述

public function store (Request $request)
{
    // バリデーション（ここを追加）
    $validator = Validator::make($request->all(), [
        'item_name'   => 'required | min:3 | max:255',
        'item_number' => 'required | min:1 | max:3',
        'item_amount' => 'required | max:6',
        'published'   => 'required',
    ]);

    // Eloquentモデル（登録処理）
    // ...
}

💡 利用可能なバリデーションルール required. min, maxのほかにも色々なルールをLaravelは用意してくれています（すごい！） [ここ](https://readouble.com/laravel/9.x/ja/validation.html#:~:text=is%20credit%20card.-,%E4%BD%BF%E7%94%A8%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%AB%E3%83%BC%E3%83%AB,-%E4%BD%BF%E7%94%A8%E5%8F%AF%E8%83%BD%E3%81%AA)でチェックしてみましょう

💡 【解説 / Validatorのmakeメソッド】 makeメソッドの第１引数は、バリデーションを行うデータが入ります。 ここでは`$request->all()`になっているので、formで送られた全データをチェックしています。 第２引数はそのデータに適用するバリデーションルールです。 `['item_name'=> 'required | min:3 | max:255',(以下略)]`の部分がルールです。

3. コントローラにバリデーションが失敗した時の処理を記述

public function store (Request $request)
{
    // バリデーション
    $validator = Validator::make($request->all(), [
        // 省略
    ]);

    // バリデーション:エラー （ここを追加）
    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    // Eloquentモデル（登録処理）
    // ...
}

4. エラー表示のViewを作成

/resources/views/common/errors.blade.php を作成します

1. /resources/views/の配下にcommonというフォルダを作り、そこにerrors.blade.phpを作成

   

2. 下記を貼り付け resources/views/common/errors.blade.php

@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <div><strong>入力した文字を修正してください。</strong></div>
        <div>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

5. エラー表示のViewを読み込み(@include)

books.blade.php の該当部分（9行目あたり）

<!-- バリデーションエラーの表示に使用-->
    @include('common.errors')
<!-- バリデーションエラーの表示に使用-->

ここまでできたら、エラーが表示されるか確認してみましょう

6. エラーの場合、入力した値をViewで再表示

入力した値がバリデーションに引っかかりました→今まで入力した値が全消しになっているとイラッとしませんか？

そんな時のために、inputに下記の oldヘルパーを記述すると、前に入力した値が保持されます！！

1. 各inputタグに下記を追記

value="{{ old(変数名) }}"

例)本のタイトルのinputタグ value="{{old('item_name')}}"　ここが該当部分

<!-- 本のタイトル -->
<div class="form-group col-md-6">
    <label for="item_name" class="col-sm-3 control-label">タイトル</label>
    <input type="text" name="item_name" class="form-control" id="item_name" value="{{old('item_name')}}">
</div>

7. 更新処理のバリデーション（Controller + View)

新規登録のバリデーションとエラー表示の機能は実装できました。 もう一つ、更新処理を同様に仕上げましょう。

updateメソッドの先頭に追加 ```php public function update(Request $request) { // バリデーション $validator = Validator::make($request->all(), [ 'id' => 'required', // storeに対しての追加分 'item_name' => 'required|min:3|max:255', 'item_number' => 'required|min:1|max:3', 'item_amount' => 'required|max:6', 'published' => 'required', ]); // バリデーション:エラー if ($validator->fails()) { return redirect('/booksedit/'.$request->id) ->withInput() ->withErrors($validator); } // Eloquentモデル　（以下略） ``` ```php @include('common.errors') ``` ## 👀 その他バリデーションの実装方法

💡 【+α / バリデーションの種類は他にも！】 Laravelでのバリデーションの実装方法は数種類あります。興味のある人は`ValidateRequests`や`FormRequest`など、探求してみましょう。 > [https://readouble.com/laravel/9.x/ja/validation.html](https://readouble.com/laravel/9.x/ja/validation.html) >

--- # ページネーション

💡 ページネーションでは１ページに表示する制限数を定めることができます。表示制限を設定した場合に「表示できないページ」がでてきますが、「２ページ」「３ページ」とリンクが自動で生成されます。この機能を「ページネーション」と呼んでいます。 出典：「はじめてのLaravel6 入門」（著：山崎学校長）

さっそく実装してみましょう。 ## コントローラでpaginate()を使ってDBからデータを取得

💡 記述式）　モデル名::paginate(１ページあたりの表示数) 記述例）　$books = Book::paginate(3); ※ get(); all(); の データ取得メソッドに代えて使います 参考：[ページネーション](https://readouble.com/laravel/9.x/ja/pagination.html)

### 1. BooksControllerのindexの、`get()`の部分を`paginate(数字)`に変更 ```php public function index() { $books = Book::orderBy('created_at', 'asc')->paginate(3);　// ここを変更 // 略 } ``` ### 2. ページネーションをテンプレートに埋め込む `{{$変数->links()}}` をview（blade.php)に記述する必要があります。 books.blade.phpの`@endif`の下、`@endsection`の上にコードを追加 ```php

{{ $books->links() }}

``` ### 3. Bootstrapの使用 App\Providers\AppServiceProvider 7行目あたりに追加 ```php use Illuminate\Pagination\Paginator; // 追加 ``` 27行目あたりに追加 ```php public function boot() { URL::forceScheme('https'); Paginator::useBootstrapFour(); // 追加 } ``` ※useBootstrapFive()にするとページ総数なども表示されます ### 4. エラーが出る場合（その他：プロキシ設定） 1. App\Http\Middleware\TrustProxiesを変更 変更前 ``` protected $proxies; ``` 変更後 ``` protected $proxies = '*'; ``` ### 5. 確認 プレビュで確認するとこのようにページネーションボタンが表示されます