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キー
今日の目標
環境構築(復習)
本章ではAWSのCloud9上で各種インストール、Laravelプロジェクトを作成、DBの作成と接続、そのほかのLaravelプロジェクトの初期設定を行います この章は「手を動かして体で覚える」ことがまず何より重要です。習うより慣れろ!
PHPのセットアップ
全てCloud9のターミナル上で操作をします ターミナル上で該当のコードをコピペしてEnterキーを押しましょう
↓これがターミナル
DBの準備(MariaDB)
※ 入力項目
メモ:[Y/n]のYはなぜ大文字?
大文字の選択肢がデフォルトで、Enterを押下すると選択されるオプション
メモ:Maria DBインストール参考URL
https://knowledge.rinpress.com/index.php/MariaDBのインストール
composerのインストール
※ composerが最新版でない場合は下記を実行(今回は不要)
Laravelプロジェクトの作成
2022/2/8にリリースされたばかりの最新版を使います
cmsフォルダが作成されいればOK
🔥ここでエラーが出た場合
下記を実行する
y → Enterキー
動作確認② - プレビュー 画面上部メニューの
preview
>Preview Running Application
こういう画面が出ればOK 右上の「別タブで開く」アイコンをクリックすると便利
メモ:
cms
が今回作るプロジェクトのディレクトリ名メモ:授業で使うPHPとLaravelのバージョン
phpMyAdminのインストール
cms/public内にphpMyAdmin-5.1.2-all-languagesのフォルダが解凍されているか確認しましょう
DBの作成&Laravelと接続
データベースを作成 方法はいくつかありますが、今回はターミナルで作成にチャレンジしてみましょう! でも基本はわかりやすいphpMyAdmin上での作成がおすすめです
データベースの作成
ターミナルでDB作成する場合
phpMyAdminで作成する場合
PHPの授業でやったのと同じです^^
隠しファイルを表示
.envファイルを編集 cms直下にあるenvファイル内の同じ箇所を上書き(11行目あたり)
※メモ:
env
environment(環境)の略
Webサーバーを再起動
Ctrl + C
php artisan serve --port=8080
Laravelの初期設定(HTTPS設定)
/app/Providers/AppServiceProvider.php ファイルを修正
ログイン認証(復習)
この章ではログイン認証を実装して、Laravelの凄さを体験してみましょう!
1. マイグレーションを実行
2. laravel/ui パッケージをインストール
※Laravel UIは認証周りの機能の雛型を生成してくれるLaravel公式のライブラリ
3. artisan コマンドを実行
4. npmパッケージをインストール
5. パッケージをビルド(これを×2回叩く)
6. 確認
こうなっていればOK 登録やログインができるか試してみましょう
👀 ターミナル操作
これがターミナル↓
👀 Laravelの便利ツール(artisanコマンド)
ArtisanはLaravelが標準で搭載しているコマンドラインインターフェース(CLI)です。 (CLIとはキーボードで操作する画面のこと。ターミナルで php artisan ~~~ と入力したあれです)
artisanコマンドを使用すると、Model作成、Controller作成、マイグレーションファイル作成&実行(そのほか色々!)などの、Laravelでよく使う機能を簡単に実行することができます
全てのartisanコマンドを表示
マイグレーションファイル(テーブル)作成
マイグレーション実行
モデル作成
コントローラ作成
👀 MVCモデル
この章では、Webフレームワークの設計モデル(アーキテクチャ)の一つであるMVCモデルを学びましょう Model, View, Controllerそれぞれの役割を理解することで、Laravelでのアプリ開発がよりスムーズになります
例として,DB から取り出したデータを一覧画面に表示する流れを考えてみる
リクエストからの処理の流れ リクエスト -> Route -> Controller の順で処理が実行される
DB から取り出したデータの流れ Model -> Controller -> View の順で処理が実行される
©︎taroosg
CRUD実装(ブックマークアプリ)
この章ではいよいよ本格的にブックマークアプリのCRUD処理を開発します どういう役割のコードを書いているのか、感覚をつかみながら開発しましょう
**💡 Laravelでよく使うディレクトリはこれ!
(迷ったら参照しましょう)**
①booksテーブルを作成 (テーブル設計図-マイグレーションの作成と実行)
ここでは、本を登録するためのBDテーブルを作成します LaravelではMigrationというテーブル作成に便利な機能が備わっています
1. booksテーブルの設計書(マイグレーションファイル)を作成
※成功すると、database/migrationsの直下にYYYY_MM_DD_xxxxxx_create_books_table.phpが作成されます
2. database/migrationsの直下のbooks_table.phpに以下追記
3. マイグレーション(テーブル作成)を実行
ターミナル上でコマンド実行
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を作成
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 のオプションを末尾につける
他にも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を未作成の場合、以下コードを貼り付けます。
2. /resources/views/books.blade.php(View) を作成
img
💡 【コード解説 / @yieldと@sectionの部分は何している?】
親のapp.blade.php
のところに、子のbooks.blade.php
から
までの部分を挿入している
💡解説 / LaravelのViewとは(blade.php)
Viewは画面に表示する役割でした。 Laravelでは
resources/views/
のディレクトリ下に{ファイル名}.blade.php
として保存します④ルート定義を作成
これまでにDB+Model(データの操作を担当)、View(表示を担当)を作成しました ここでは、Webアプリの玄関口(受付)となるRoutingを作成していきましょう
img
1. /routes/web.php(ルート定義)に以下の記述を追加
先頭部
中間
2. プレビュー画面で確認
プレビュー画面で
/
にアクセス(URLはhttps://(中略).amazonaws.com/
)。 無事に本のタイトルを入力するフォームが表示されていればOK⑤CRUD機能実装(登録)
1. /routes/web.php(ルート定義)を編集
2. formを送信した後にDBに登録処理ができているか、phpMyAdminで確認
⑥CRUD機能実装(表示)
本項では、登録したデータの一覧を取得し表示する機能を実装していきましょう
1. /routes/web.php(ルート定義)を編集
Route::get('/', function () {}
の中身を編集しましょう2. /resources/views/books.blade.php(View)
< !-- Book: 既に登録されてる本のリスト -->の下に追加
3. プレビュー画面で、一覧表示できているか確認
💡解説 / @foreach
Bladeテンプレートエンジンに備わっている便利な繰り返し処理をしてくれる機能 PHPの
foreach
と同じ感じで書ける💡+α / デバッグ
viewで
$books
に値が入っているか確かめたい時は{{dd($books)}}
を仕込んでみよう ※Controllerでdd($books);
をするのもGOOD⑦CRUD機能実装(削除)
1. books.blade.php(View)に削除ボタンを追加
< !-- 本: 削除ボタン -->下の
プレビュー
2. web.phpに「本を削除」のルート定義を追加編集
⑧CRUD機能実装(更新)
更新処理では、2つのRouteが必要になります i. 更新をするための画面を表示する用のRoute ii. 実際にbooksテーブルを更新する用のRoute
1. books.blade.php(View)に更新ボタンを追加
削除ボタンの
プレビュー
2. booksedit.blade.phpをview配下に新規作成し、以下コードを貼り付け
3. web.php(ルート定義)に更新画面表示と更新処理を追加
実際に「タイトル」など変更できるか確認してみましょう!
プレビュー(更新画面)
プレビュー(一覧画面<タイトル更新後>) ※ここでは「テスト本(更新しました)」というタイトルに変更しています↓
⑨Controllerを作成
イントロ
今まではルート定義(web.php)に、とあるURLが呼ばれた時の処理を書いていましたね。※例:↓
function(){}
の部分あれ、コントローラ(司令官)がなくてもアプリ作れちゃった・・・。コントローラいらなくね?
ちょっと待ってください!確かに機能が限られているサービスなら、ルート定義にfunction()部分を直接書いても一つのファイルで完結するのでわかりやすい面も。
でも、一般的なサービスでは数十~数百のルート定義があるのはあたりまえ。そうなるとルート定義が肥大化して逆にわかりにくいコードになってしまいます。
この章ではルート定義に持たせていた処理の役割をコントローラに移行しましょう。
左が・・・右になります!どちらが見通しがいいですか?
1. BooksControllerを作成
ControllerもMigrationやModelと同じでartisanコマンド一発で作成できます!!
BooksControllerが作成されたか確認
2. BooksControllerとModelを関連付け
BooksController.php
3. ルート定義の処理の部分をControllerに移行
まずは表示処理の部分をやってみましょう
web.php
BooksController.php
4. ルート定義とBooksControllerを関連付け
web.php
5. ルート定義に、移行したControllerの場所を記述
web.phpの表示処理のルート
/
に、BooksControllerの表示処理のfunction(index
)を紐付けましょう6. 他のルート定義も同様に、3と4を繰り返す
ルート定義と対応するリソースコントローラのfunction名
Route - Controller対応表
Routing / Controller 登録処理(ダッシュボード表示) - index 登録処理(「本」をを追加) - store 更新処理(「本」の更新画面表示) - edit 更新処理(「本」の更新処理) - update 削除処理(「本」を削除) - destroy完成コード
web.php(該当部分)
BooksController.php
バリデーション
バリデーションとは入力チェック(検証)のことで、ルール通り正しい形式で書かれているか確認することです。 この章では今まで作った画面に、バリデーションを追加しましょう。 (登録&更新画面
books.blade.php
booksedit.blade.php
) 今回はValidatorファサード
というLaravelに備わっている機能を使用し、バリデーションを実装していきます💡 この部分を作ります
1. コントローラでValidatorを使えるようにする
<BooksController.php 7行目>
2. コントローラにバリデーションのルールを記述
3. コントローラにバリデーションが失敗した時の処理を記述
4. エラー表示のViewを作成
/resources/views/common/errors.blade.php を作成します
/resources/views/
の配下にcommon
というフォルダを作り、そこにerrors.blade.php
を作成下記を貼り付け resources/views/common/errors.blade.php
5. エラー表示のViewを読み込み(@include)
books.blade.php の該当部分(9行目あたり)
ここまでできたら、エラーが表示されるか確認してみましょう
6. エラーの場合、入力した値をViewで再表示
入力した値がバリデーションに引っかかりました→今まで入力した値が全消しになっているとイラッとしませんか?
そんな時のために、inputに下記の
oldヘルパー
を記述すると、前に入力した値が保持されます!!例)本のタイトルのinputタグ
value="{{old('item_name')}}"
ここが該当部分変数名をシングルクォートで囲むのを忘れないこと
7. 更新処理のバリデーション(Controller + View)
新規登録のバリデーションとエラー表示の機能は実装できました。 もう一つ、更新処理を同様に仕上げましょう。