TM4423 / kougi11

0 stars 0 forks source link

Laravel #01 (Laravel 9 on AWS) #1

Open TM4423 opened 2 years ago

TM4423 commented 2 years ago

今日の目標


環境構築

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

PHPのセットアップ

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

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

スクリーンショット 2022-02-27 20.36.24.png

↓これがターミナル

スクリーンショット 2022-02-25 23.37.47.png

  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

スクリーンショット 2022-02-26 3.06.55.png

スクリーンショット 2022-02-26 3.05.28.png

  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
  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キー
  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

スクリーンショット 2022-02-26 9.37.43.png

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

    スクリーンショット 2022-02-27 20.47.57.png

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

    スクリーンショット 2022-02-26 9.52.29.png

phpMyAdminのインストール

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

スクリーンショット 2022-02-27 20.51.08.png

  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. 隠しファイルを表示

    スクリーンショット 2022-02-26 1.16.52.png

  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

Laravelの初期設定(HTTPS設定)

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

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

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

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

}

ターミナル操作(参照用)

これがターミナル↓

スクリーンショット 2022-02-25 23.37.47.png

# **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 + Routing

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

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

https://i.imgur.com/4XmQdQn.png

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

https://i.imgur.com/tIWOZwn.png

©︎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テーブルとカラムが作成されているか確認しましょう

https://i.imgur.com/ch1Slxh.png

便利ツール(LaravelDB.com)

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

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

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

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 です

1. /resources/views/layouts/app.blade.php(View) を作成(省略)

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

④ルート定義(ルーティング)を作成

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

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

https://i.imgur.com/22UFzC5.png

⑤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で確認

https://i.imgur.com/pDEYukg.png

⑥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. プレビュー画面で、一覧表示できているか確認

https://i.imgur.com/s23MHGV.png

💡解説 / @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>

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 commented 2 years ago

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

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

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

④ルート定義(ルーティング)を作成

  1. /routes/web.php(ルート定義)に以下の記述を追加
TM4423 commented 2 years ago

今日の目標


環境構築(復習)

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

PHPのセットアップ

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

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

スクリーンショット 2022-02-27 20.36.24.png

↓これがターミナル

スクリーンショット 2022-02-25 23.37.47.png

  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

スクリーンショット 2022-02-26 3.06.55.png

スクリーンショット 2022-02-26 3.05.28.png

  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}
  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キー
  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

スクリーンショット 2022-02-26 9.37.43.png

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

    スクリーンショット 2022-02-27 20.47.57.png

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

    スクリーンショット 2022-02-26 9.52.29.png

phpMyAdminのインストール

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

スクリーンショット 2022-02-27 20.51.08.png

  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. 隠しファイルを表示

    スクリーンショット 2022-02-26 1.16.52.png

  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

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 登録やログインができるか試してみましょう

スクリーンショット 2022-02-27 21.00.43.png

👀 ターミナル操作

これがターミナル↓

スクリーンショット 2022-02-25 23.37.47.png

# **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コマンドを使用すると、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 BooksController --resource

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

👀 MVCモデル

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

MVC + Routing

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

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

https://i.imgur.com/4XmQdQn.png

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

https://i.imgur.com/tIWOZwn.png

©︎taroosg


CRUD実装(ブックマークアプリ)

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

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

(迷ったら参照しましょう)**

スクリーンショット 2022-03-01 15.11.17.png

①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テーブルとカラムが作成されているか確認しましょう

https://i.imgur.com/ch1Slxh.png

💡便利ツール(LaravelDB.com)

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

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

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

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

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

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

php artisan make:model Book

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

スクリーンショット 2022-03-01 15.07.52.png

💡解説 / 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 です

1. /resources/views/layouts/app.blade.php(View) を作成(省略)

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 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

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

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

④ルート定義を作成

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

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) {
    //
});

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

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

https://i.imgur.com/22UFzC5.png

⑤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で確認

https://i.imgur.com/pDEYukg.png

⑥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')); //も同じ意味
});

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. プレビュー画面で、一覧表示できているか確認

https://i.imgur.com/s23MHGV.png

💡解説 / @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>

プレビュー

スクリーンショット 2022-03-01 21.26.12.png

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>

プレビュー

スクリーンショット 2022-03-01 21.25.19.png

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('/');
});

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

プレビュー(更新画面)

スクリーンショット 2022-03-05 1.57.00.png

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

スクリーンショット 2022-03-01 21.30.29.png

⑨Controllerを作成

イントロ

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

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

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

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

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

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

https://i.imgur.com/zfEaxck.png

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

https://i.imgur.com/0lQJqQZ.png

1. BooksControllerを作成

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

php artisan make:controller BooksController --resource

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']);

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

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

完成コード

バリデーション

バリデーションとは入力チェック(検証)のことで、ルール通り正しい形式で書かれているか確認することです。この章では今まで作った画面に、バリデーションを追加しましょう。 (登録&更新画面 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モデル(登録処理)
    // ...
}

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を作成

    スクリーンショット 2022-03-05 10.00.31.png

  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')
<!-- バリデーションエラーの表示に使用-->

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

スクリーンショット 2022-03-05 10.07.34.png

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') ``` ## 👀 その他バリデーションの実装方法 --- # ページネーション さっそく実装してみましょう。 ## コントローラでpaginate()を使ってDBからデータを取得 ### 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. 確認 プレビュで確認するとこのようにページネーションボタンが表示されます ![https://i.imgur.com/2mOGVq8.png](https://i.imgur.com/2mOGVq8.png)