Laravel9でミニ受注入力システムを作成しました。これから学習される方が挫折しないように必要最低限の知識でシステムを作成しました。全編は、マスターの作成です。文房具の登録・変更・削除・一覧表示をまずは作成。いわゆるCRUDです。YouTubeでチュートリアル動画を作成してありますので、その補足ページになります。
YouTubeはこちらです。
環境設定
Windows10 HOMEにXAMPPやComposerやNodeのインストールはこちらの通りにインストールしました。
データベース bunbougu_dbの作成
文房具を表すデータベース bunbougu_db をphpMyAdminで作成します。
laravelプロジェクトの作成
コマンドプロンプトでlaravelのプロジェクト bunbougu を作成します。
bunbougu プロジェクトを c:\xampp\laravel デイレクトリ下に作成するものとします。
以下 c:\xampp\laravel は環境に合わせて変更してください。
c:\xampp\laravel>composer create-project laravel/laravel bunbougu –prefer-dist
プロジェクトの作成までに数分かかります。
コマンドプロンプトで、作成されたデイレクトリ bunbougu に移動します。
開発用サーバの起動
c:\xampp\laravel\bunbougu>php artisan serve
このコマンドで開発用サーバが起動します。
ブラウザに http://127.0.0.1:8000/ こちらのURLでアクセスすると laravelの初期画面が表示されます。
以後 phparitsanコマンドを実行するために別のコマンドプロンプトを立ち上げます。
データベース bunbougu_db をLaravelで利用するための準備
envファイルを編集します。
C:\xampp\laravel\bunbougu\.env を編集します。
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=bunbougu_db ①
DB_USERNAME=root ②
DB_PASSWORD= ③
①を作成したデータベース名にします。
②root 以外のユーザーの場合は変更します。学習用ですので、rootのまま進めます。
③パスワード欄です。
マイグレーションファイルの作成、テーブルの作成
文房具情報を格納するテーブル bunbougus を作成
文房具情報を格納するテーブル bunbougus を作成する準備をするファイルを作成します。
コマンドプロンプトで
c:\xampp\laravel\bunbougu>php artisan make:migration create_bunbougus_table
Created Migration: 2022_07_08_143632_create_bunbougus_table
マイグレーションファイル 2022_07_08_143632_create_bunbougus_table.php が作成されます。
C:\xampp\laravel\bunbougu\database\migrations\2022_07_08_143632_create_bunbougus_table.php
2022_07_08_143632_create_bunbougus_table.php内の
Schema::create(‘bunbougus’, function (Blueprint $table) {
$table->id();
$table->timestamps();
});
スキーマを拡張します（テーブルのフィールドを追加します）。
$table->id();の下に追加します。それぞれ、文房具の名前、価格、分類、詳細情報をいれるためのフィールドです。
$table->string(‘name’);
$table->integer(‘kakaku’);
$table->integer(‘bunrui’);
$table->text(‘shosai’);
HB鉛筆、120円、鉛筆等の情報を入れるためのテーブルとなります。
コマンドプロンプトでマイグレーションを実行し、実際にテーブルを作成します。
c:\xampp\laravel\bunbougu>php artisan migrate
Migration table created successfully.
テーブル: bunbougusの生成をphpMyAdminで確認しました。
分類情報を格納するテーブル bunruis を作成
同様にして、文房具がペンに属するのか、鉛筆に属するのか、消しゴムに属するのか識別するためのテーブル bunruis を作成します。c:\xampp\laravel\bunbougu>php artisan make:migration create_bunruis_table
C:\xampp\laravel\bunbougu\database\migrations\2022_07_08_145448_create_bunruis_table.phpの編集
$table->string(‘str’);を追加
c:\xampp\laravel\bunbougu>php artisan migrate
テーブル: bunruisの生成をphpMyAdminで確認しました。
データの挿入
分類情報を格納するテーブル bunruis にデータ挿入
bunruisテーブルに初期データを挿入するために、コマンドプロンプトでシーダーを作成します。
c:\xampp\laravel\bunbougu>php artisan make:seeder BunruisSeeder
Seeder created successfully.
生成されたシーダー BunruisSeeder.php の編集をします。
C:\xampp\laravel\bunbougu\database\seeders\BunruisSeeder.php
run内を以下のように編集します。
シーダーを実行します。
c:\xampp\laravel\bunbougu>php artisan db:seed –class=BunruisSeeder
Database seeding completed successfully.
データが挿入されたことをphpMyAdminで確認しました。
文房具情報を格納するテーブル bunbougus にデータ挿入
c:\xampp\laravel\bunbougu>php artisan make:seeder BunbougusSeeder
Seeder created successfully.
生成されたシーダーに初期データを入力します。
C:\xampp\laravel\bunbougu\database\seeders\BunbougusSeeder.php
シーダーを実行しますと、データが挿入されます。
c:\xampp\laravel\bunbougu>php artisan db:seed –class=BunbougusSeeder
Database seeding completed successfully.
文房具情報を格納するテーブル bunbougus にダミーデータを大量に挿入
ページングを簡易に確認するためには、大量のデータが必要になります。そこでダミーデータを大量に挿入します。
コマンドプロンプトで Bunbougu モデルを作成します。
c:\xampp\laravel\bunbougu>php artisan make:model Bunbougu
Model created successfully.
BunbouguFactoryを作成します。
c:\xampp\laravel\bunbougu>php artisan make:factory BunbouguFactory
Factory created successfully.
C:\xampp\laravel\bunbougu\database\factories\BunbouguFactory.php が生成されますので、
これのreturn内を編集します。
‘name’ => $this->faker->realText(10),
‘kakaku’ => $this->faker->numberBetween($min = 50, $max = 999),
‘bunrui’ => $this->faker->numberBetween($min = 1, $max = 3),
‘shosai’ => $this->faker->realText(50),
‘created_at’ => date(‘Y-m-d H:i:s’),
‘updated_at’ => null,
config/app.php内を日本語対応に変更
‘fallback_locale’ => ‘ja’,
‘faker_locale’ => ‘ja_JP’,
‘locale’ => ‘ja’,
BunbougusSeederシーダーを再編集します。
C:\xampp\laravel\bunbougu\database\seeders\BunbougusSeeder.php
use App\Models\Bunbougu;を追記して、
run内を書き換えます。
Bunbougu::factory()->count(10)->create();
シーダーを実行します。
c:\xampp\laravel\bunbougu>php artisan db:seed –class=BunbougusSeeder
Database seeding completed successfully.
10件のダミーデータの登録を確認しました。
コントローラの作成
コマンドプロンプトで BunbouguController を作成します。
c:\xampp\laravel\bunbougu>php artisan make:controller BunbouguController –resource –model=Bunbougu
Controller created successfully.
BunbouguController.php が生成されます。
C:\xampp\laravel\bunbougu\app\Http\Controllers\BunbouguController.php
BunbouguController.php には、
index()
create()
store(Request $request)
show(Bunbougu $bunbougu)
edit(Bunbougu $bunbougu)
update(Request $request, Bunbougu $bunbougu)
destroy(Bunbougu $bunbougu)
の７つのメソッドが最初から用意されています
ここに処理を上書きしていきます。
BunbouguController.php indexメソッド内に記載
indexメソッド内に記載します。
$bunbougus = Bunbougu::latest()->paginate(5);
return view(‘index’,compact(‘bunbougus’))
->with(‘i’, (request()->input(‘page’, 1) – 1) * 5);
後ほど作成する index.blade.phpに $bunbougus と $page を渡します。
ルーティングの編集
C:\xampp\laravel\bunbougu\routes\web.php に
Route::get(‘/bunbougus’, ‘App\Http\Controllers\BunbouguController@index’)->name(‘bunbougus.index’);
と追記します。
/bunbougus へのGETアクセスは bunbougus.index と命名されたことになります。
テンプレートファイルの作成
C:\xampp\laravel\bunbougu\resources\views\app.blade.php としてapp.blade.phpファイルを以下作成します。Bootstrapのテンプレートを変えたものです。
C:\xampp\laravel\bunbougu\resources\views\index.blade.php を作成します。
index.blade.phpは、 app.blade.phpを拡張します。
@extends(‘app’) app.blade.php を拡張
@section(‘content’) が app.blade.php内 @yield(‘content’)の元になります。
http://127.0.0.1:8000/bunbougusブラウザでの表示を確認しました。
一覧表示
C:\xampp\laravel\bunbougu\resources\views\index.blade.php に
コントローラから受け取った $bunbougus と $page を使って
テーブル bunbougus の内容を表示と ページングを組み込みます。
@section(‘content’)内に下記追記します。
foreachでテーブル情報を１レコードづつ所得して表示します。
$bunbougus->links(‘pagination::bootstrap-5’)
この記述だけでページングが実現できています。
登録
web.phpに追記します。
Route::get(‘/bunbougus/create’, ‘App\Http\Controllers\BunbouguController@create’)->name(‘bunbougu.create’);
Route::post(‘/bunbougus/store/’, ‘App\Http\Controllers\BunbouguController@store’)->name(‘bunbougu.store’);
http://127.0.0.1:8000/bunbougus/create
にアクセスすると、登録画面が表示されるようにします。
※index.blade.php 内の新規登録リンクは href=”{{ route(‘bunbougu.create’) }}” としておきます。
C:\xampp\laravel\bunbougu\app\Http\Controllers\BunbouguController.php
コントローラの create メソッド内に以下 追加します。
return view(‘create’);
C:\xampp\laravel\bunbougu\resources\views\create.blade.php として
create.blade.php ファイルを以下の内容で作成します。
ブラウザで
http://127.0.0.1:8000/bunbougus/create
登録画面を確認できます。
文房具の分類処理を選択できるようにする。
コマンドプロンプトで モデル Bunrui を作成します。
c:\xampp\laravel\bunbougu>php artisan make:model Bunrui
Model created successfully.
C:\xampp\laravel\bunbougu\app\Http\Controllers\BunbouguController.php の上部に追記
use App\Models\Bunrui; ← 追記
コントローラのcreateメソッド内を書き換えます。変数 bunruis に $bunruis を渡します
$bunruis = Bunrui::all();
return view(‘create’)
->with(‘bunruiss’,$bunruis);
create.blade.php に分類選択を追記します。
ブラウザでURLを打ちますと、分類を選択できることが確認できます。
バリデーション処理
コントローラのstoreメソッドを書き換えます。
$request->validate([
‘name’ => ‘required|max:20’,
‘kakaku’ => ‘required|integer’,
‘bunrui’ => ‘required|integer’,
‘shosai’ => ‘required|max:140’,
]);
create.blade.phpのフォーム部品の下部に以下のように追記します。nameの箇所が部品名になります。
@error(‘name’)
<span style=”color:red;”>名前を20文字以内で入力してください</span>
@enderror
ブラウザで何も登録せずに「登録」ボタンをクリックすると以下のようにバリデーション処理が効いていることが確認できます。
C:\xampp\laravel\bunbougu\app\Models\Bunbougu.php に追記します。
use HasFactory; の下に追記します。
書き込みを許可するフィールド名をあらかじめホワイトリストに入れておきます。
protected $fillable = [
‘name’,
‘kakaku’,
‘bunrui’,
‘shosai’,
‘created_at’,
‘updated_at’,
];
※動画では解説していません。
登録処理
コントローラのstoreメソッドに追記します。
この方法の場合、すべてのリクエストを$inputに格納するため、テーブルの書き込みにおいて、
更新を許可するフィールドをホワイトリストにいれておかないとエラーが出ます。
$input = $request->all();
Bunbougu::create($input);
return redirect()->route(‘bunbougus.index’)
->with(‘success’,’文房具を登録しました’);
$input = $request->all();
Bunbougu::create($input);
の箇所は、下のようにも記入することができます。この場合は、protected $fillableの記載は不要です。動画ではこのように解説しています。
$bunbougu = new Bunbougu;
$bunbougu->name = $request->input([“name”]);
$bunbougu->kakaku = $request->input([“kakaku”]);
$bunbougu->bunrui = $request->input([“bunrui”]);
$bunbougu->shosai = $request->input([“shosai”]);
$bunbougu->save();
ブラウザでhttp://127.0.0.1:8000/bunbougus/create 文房具情報を登録します。
登録を確認しました。
分類情報を結合して一覧表示する
折角なので、分類番号に分類情報を結合して、さらにIDの並び順通りに表示させてみます。
コントローラのindexメソッドを書き換えます。
$bunbougus = Bunbougu::latest()->paginate(5);
を以下のように書き換えます。生のSQL文に近いです。
$bunbougus = Bunbougu::select([
‘b.id’,
‘b.name’,
‘b.kakaku’,
‘b.shosai’,
‘r.str as bunrui’,
])
->from(‘bunbougus as b’)
->join(‘bunruis as r’, function($join) {
$join->on(‘b.bunrui’, ‘=’, ‘r.id’);
})
->orderBy(‘b.id’, ‘DESC’)
->paginate(5);
http://127.0.0.1:8000/bunbougus で意図した結果が得られていることを確認しました。
変更
web.phpに追記します。
Route::get(‘/bunbougus/edit/{bunbougu}’, ‘App\Http\Controllers\BunbouguController@edit’)->name(‘bunbougu.edit’);
Route::put(‘/bunbougus/edit/{bunbougu}’,’App\Http\Controllers\BunbouguController@update’)->name(‘bunbougu.update’);
http://127.0.0.1:8000/bunbougus/edit/13
にGETアクセスすると、更新画面が表示されるようにします。
※index.blade.php 内の更新リンクは <a class=”btn btn-primary” href=”{{ route(‘bunbougu.edit’,$bunbougu->id) }}”>変更</a> として追記しておきます。
コントローラのeditメソッド内に以下追記します。
$bunruis = Bunrui::all();
return view(‘edit’,compact(‘bunbougu’))
->with(‘bunruis’,$bunruis);
C:\xampp\laravel\bunbougu\resources\views\edit.blade.php としてedit.blade.php ファイルを作成します。
form以外はcreate.blade.phpと同じです。@method(‘PUT’)と指定します。
ページ遷移先が route(‘bunbougu.update’,$bunbougu->id) となります。
各フィールド値は、$bunbougu->name のようにして取得します。
Select要素については、工夫が必要です。
@if($bunrui->id==$bunbougu->bunrui) selected @endifのようにすることにより、登録値を選択することができます。
http://127.0.0.1:8000/edit/13 として変更画面を確認しました。
コントローラのupdateメソッドです。
public function update(Request $request, Bunbougu $bunbougu)
{
$request->validate([
‘name’ => ‘required|max:20’,
‘kakaku’ => ‘required|integer’,
‘bunrui’ => ‘required|integer’,
‘shosai’ => ‘required|max:140’,
]);
$bunbougu->name = $request->input([“name”]);
$bunbougu->kakaku = $request->input([“kakaku”]);
$bunbougu->bunrui = $request->input([“bunrui”]);
$bunbougu->shosai = $request->input([“shosai”]);
$bunbougu->user_id = \Auth::user()->id;
$bunbougu->save();
return redirect()->route(‘bunbougus.index’)->with(‘success’,’文房具を更新しました’);
}
詳細表示
どうせなら詳細表示画面も作ってみます。
<a href=”{{ route(‘bunbougu.show’,$bunbougu->id) }}”>{{ $bunbougu->name }}</a>
として文房具名をクリックしたら、詳細画面が表示されるようにします。
web.phpに追記します。
Route::get(‘/bunbougus/show/{bunbougu}’, ‘App\Http\Controllers\BunbouguController@show’)->name(‘bunbougu.show’);
コントローラのshowメソッド内に以下記載します。editメソッドと同じです。
$bunruis = Bunrui::all();
return view(‘show’,compact(‘bunbougu’))
->with(‘bunruis’,$bunruis);
C:\xampp\laravel\bunbougu\resources\views\show.blade.php として
show.blade.php ファイルを作成します。edit.blade.phpのform部分を以下に差し替えればよいです。
ブラウザで確認します。http://127.0.0.1:8000/bunbougus?page=3
一つ困ったことが発生しました ページングで３ページ目を参照していたのに、
詳細画面の「戻る」をクリックしますと、１ページ目に戻ってしまいます。
?page=3に戻りたいものです。
コントローラのindexメソッドの引数箇所が空白であったところをindex(Request $request)とします。
index.blade.phpを参照する際に、変数page_idにページ番号を示すパラメータpageを渡します。
return view(‘index’,compact(‘bunbougus’))
->with(‘page_id’,request()->page)
->with(‘i’, (request()->input(‘page’, 1) – 1) * 5);
index.blade.phpの文房具名のリンクにパラメターを?page_id={{ $page_id }}として追加します。
<a href=”{{ route(‘bunbougu.show’,$bunbougu->id) }}?page_id={{ $page_id }}”>{{ $bunbougu->name }}</a>
コントローラのshowメソッド内 return 部分を以下のように page_id 部分を追加します。
return view(‘show’,compact(‘bunbougu’))
->with(‘page_id’,request()->page_id)
->with(‘bunruis’,$bunruis);
show.blade.phpの戻るリンク部分にパラメータを?page={{ $page_id }}として追加します。
href=”{{ url(‘/bunbougus’) }}?page={{ $page_id }}”
ブラウザで動作を確認します。3ページ目でクリックした文房具の詳細画面の「戻る」ボタンをクリックすると、3ページ目に戻ることができました。
削除
web.phpに追記します。
Route::delete(‘/bunbougus/{bunbougu}’,’App\Http\Controllers\BunbouguController@destroy’)->name(‘bunbougu.destroy’);
index.blade.phpに削除フォームを以下のように追記します。
<td style=”text-align:center”>
<form action=”{{ route(‘bunbougu.destroy’,$bunbougu->id) }}” method=”POST”>
@csrf
@method(‘DELETE’)
<button type=”submit” class=”btn btn-sm btn-danger” onclick=’return confirm(“削除しますか？”);’>削除</button>
</form>
</td>
一覧表示画面はこのようになります。
コントローラのdestroyメソッドを以下のように上書きします。
$bunbougu->delete();
return redirect()->route(‘bunbougus.index’)
->with(‘success’,’文房具’.$bunbougu->name.’を削除しました’);
黒ボールペン0.5を削除します。
削除を確認しました。
Laravel面白いですね！
後編に続きます。
