Laravel9でミニ受注入力システムを作成しました。これから学習される方が挫折しないように必要最低限の知識でシステムを作成しました。前編は、マスターの作成で、文房具の登録・変更・削除・一覧表示をまずは作成しました。本編では、ログイン、受注入力フォームを作成します。
ログイン機能
bunbouguデイレクトリ上でcomposerでインストールします。
c:\xampp\laravel\bunbougu>composer require laravel/breeze –dev
c:\xampp\laravel\bunbougu>php artisan breeze:install
c:\xampp\laravel\bunbougu>npm install
c:\xampp\laravel\bunbougu>npm run dev
http://127.0.0.1:8000/
右上にregisterリンクをクリックします。
Name Email Password を入力します。
Passwordは８文字以上でないとダメです。
「register」ボタンをクリックすると、入力に問題なければ、You’re logged in!が表示され、ログイン状態となります。
C:\xampp\laravel\bunbougu\routes\web.php の内容は書き換えられてしまいますので、
web.phpに 再度 ルーティング情報を書き込んでください。
未ログインユーザーは、登録、変更、削除をできないようにする
ログインしていないと、一覧表示と詳細画面だけを閲覧できて、登録、変更、削除をできないようにするには、
それぞれのルーティングに->middleware(‘auth’)を追記します。
Route::get(‘/bunbougus/create’, ‘App\Http\Controllers\BunbouguController@create’)->name(‘bunbougu.create’)->middleware(‘auth’);
Route::post(‘/bunbougus/store/’, ‘App\Http\Controllers\BunbouguController@store’)->name(‘bunbougu.store’)->middleware(‘auth’);
Route::get(‘/bunbougus/edit/{bunbougu}’, ‘App\Http\Controllers\BunbouguController@edit’)->name(‘bunbougu.edit’)->middleware(‘auth’);
Route::put(‘/bunbougus/edit/{bunbougu}’,’App\Http\Controllers\BunbouguController@update’)->name(‘bunbougu.update’)->middleware(‘auth’);
Route::delete(‘/bunbougus/{bunbougu}’,’App\Http\Controllers\BunbouguController@destroy’)->name(‘bunbougu.destroy’)->middleware(‘auth’);
未ログインユーザーは、一覧表示画面の登録、変更、削除ボタンを非表示とする
一覧表示と詳細画面はそのままです。
Route::get(‘/bunbougus’, ‘App\Http\Controllers\BunbouguController@index’)->name(‘bunbougus.index’);
Route::get(‘/bunbougus/show/{bunbougu}’, ‘App\Http\Controllers\BunbouguController@show’)->name(‘bunbougu.show’);
ログインしていても、ログインしていなくても、一覧表示画面には、「新規登録」「変更」「削除」ボタンが表示されていますので、
ログインしていないユーザーには、これらボタンを非表示にする必要があります。
ログインしているユーザーだけに表示させたい記述は、@auth～@endauthで囲みます。
@auth
<a class=”btn btn-success” href=”{{ route(‘bunbougu.create’) }}”>新規登録</a>
@endauth
ログインしないユーザは、「新規登録」「変更」「削除」ボタンが非表示となりました。
bunbougusテーブルにユーザーIDを追加
誰が登録・更新したのかわかるように bunbougusテーブルに ユーザーIDを追加します。
コマンドプロンプトでマイグレーションを作成します。
c:\xampp\laravel\bunbougu>php artisan make:migration add_user_id_to_bunbougus –table=bunbougus
Created Migration: 2022_07_18_041554_add_user_id_to_bunbougus
C:\xampp\laravel\bunbougu\database\migrations\2022_07_18_041554_add_user_id_to_bunbougus.php を編集します。
public function up()
{
Schema::table(‘bunbougus’, function (Blueprint $table) {
$table->integer(‘user_id’)->unsigned();
$table->foreign(‘user_id’)->references(‘id’)->on(‘users’);
});
}
public function down()
{
Schema::table(‘bunbougus’, function (Blueprint $table) {
$table->dropforeign(‘bunbougus_user_id_foreign’);
$table->dropColumn(‘user_id’);
});
}
コマンドプロンプトでマイグレーションを実行します。
c:\xampp\laravel\bunbougu>php artisan migrate
コントローラ C:\xampp\laravel\bunbougu\app\Http\Controllers\BunbouguController.php
こちらのstore と update メソッドに いつ更新したのかわかるように 下記追加します。
$bunbougu->updated_at = date(“Y-m-d H:i:s”);
ログイン中のユーザーIDの取得は \Auth::user()->id で取得できますので、store と update メソッドに追加します。
$bunbougu->user_id = \Auth::user()->id;
C:\xampp\laravel\bunbougu\app\Models\User.php
ユーザーモデルを編集します。
public function bunbougus(){
return $this->hasMany(Bunbougu::class);
}
C:\xampp\laravel\bunbougu\app\Models\Bunbougu.php
あわせて 文房具 モデルも編集します。
public function user(){
return $this->belongsTo(User::class, ‘user_id’);
}
文房具とユーザーが結合されます。
コントローラのindex メソッドに b.user_id を追加します。
$bunbougus = Bunbougu::select([
‘b.id’,
‘b.name’,
‘b.kakaku’,
‘b.shosai’,
‘b.user_id’,
‘r.str as bunrui’,
])
index.blade.phpに編集者がわかるように {{ $bunbougu->user->name }} と追記します。
編集者が分かるようになりました。
ログイン者名前の表示
ログイン者名前を表示します。
コントローラー
indexメソッドの return view 部分に
->with(‘user_name’,\Auth::user()->name)
を追加します。\Auth::user()->nameでログイン者名前を取得できますので、index.blade.phpに渡します。
index.blade.php内の任意の場所に、下記記述を追記します。
ログイン者：{{ $user_name }}
ログイン者名前を確認しました。
|
1 2 3 4 5 6 7 8 9 10 11 |
ログインしていない場合、エラーが出ますので、以下のように処理を分けます。 if(isset(\Auth::user()->name)){ return view('index',compact('bunbougus')) ->with('page_id',request()->page) ->with('i', (request()->input('page', 1) - 1) * 5) ->with('user_name',\Auth::user()->name); }else{ return view('index',compact('bunbougus')) ->with('page_id',request()->page) ->with('i', (request()->input('page', 1) - 1) * 5); } |
客先テーブルの作成
客先テーブル kyakusaki を作成します
c:\xampp\laravel\bunbougu>php artisan make:migration create_kyakusakis_table
Created Migration: 2022_07_18_084132_create_kyakusakis_table
C:\xampp\laravel\bunbougu\database\migrations\2022_07_18_084132_create_kyakusakis_table.phpの編集
$table->string(‘name’);を追加
マイグレーションを実行します。
c:\xampp\laravel\bunbougu>php artisan migrate:refresh –step=1 –path=/database/migrations/2022_07_18_084132_create_kyakusakis_table.php
テーブル: kyakusakisの生成をphpMyAdminで確認しました。
データを挿入するために、コマンドプロンプトでシーダーを作成します。
c:\xampp\laravel\bunbougu>php artisan make:seeder KyakusakisSeeder
Seeder created successfully.
生成されたシーダー KyakusakisSeeder.php を編集します。
C:\xampp\laravel\bunbougu\database\seeders\KyakusakisSeeder.php
run内を以下のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
\DB::table('kyakusakis')->insert([ [ 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => null, 'name'=> 'Ａ株式会社', ], [ 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => null, 'name'=> 'Ｂ株式会社', ], [ 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => null, 'name'=> 'Ｃ株式会社', ], ]); |
シーダーを実行します。
c:\xampp\laravel\bunbougu>php artisan db:seed –class=KyakusakisSeeder
Database seeding completed successfully.
phpMyAdminでデータの挿入を確認しました。
コマンドプロンプトで Kyakusaki モデルを作成します。
c:\xampp\laravel\bunbougu>php artisan make:model Kyakusaki
Model created successfully.
受注テーブルを作成
いよいよ受注テーブルを作成します。
c:\xampp\laravel\bunbougu>php artisan make:migration create_juchus_table
Created Migration: 2022_07_18_105044_create_juchus_table
C:\xampp\laravel\bunbougu\database\migrations\2022_07_18_105044_create_juchus_table.php を編集します。
以下追加します。
$table->integer(‘kyakusaki_id’);
$table->integer(‘bunbougu_id’);
$table->integer(‘kosu’);
$table->integer(‘joutai’);
$table->integer(‘user_id’);
マイグレーションを実行します。
c:\xampp\laravel\bunbougu>php artisan migrate:refresh –step=1 –path=/database/migrations/2022_07_18_105044_create_juchus_table.php
受注テーブルの生成をphpMyAdminで確認しました。
データを挿入するために、コマンドプロンプトでシーダーを作成します。
c:\xampp\laravel\bunbougu>php artisan make:seeder JuchusSeeder
Seeder created successfully.
シーダーを編集します。C:\xampp\laravel\bunbougu\database\seeders\JuchusSeeder.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
\DB::table('Juchus')->insert([ [ 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => null, 'kyakusaki_id' => 1, 'bunbougu_id' => 21, 'kosu' => 5, 'joutai' => 0, 'user_id' => 1 ], [ 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => null, 'kyakusaki_id' => 2, 'bunbougu_id' => 22, 'kosu' => 8, 'joutai' => 0, 'user_id' => 2 ], ]); |
シーダーを実行します。
c:\xampp\laravel\bunbougu>php artisan db:seed –class=JuchusSeeder
Database seeding completed successfully.
phpMyAdminでデータの挿入を確認しました。
JuchuControllerコントローラの作成
コマンドプロンプトで JuchuController を作成します。
c:\xampp\laravel\bunbougu>php artisan make:controller JuchuController –resource –model=Juchu
Controller created successfully.
Juchuコントローラーが生成されるので、Bunbouguコントローラーのときと同じように各メソッドを上書きしていきます。
C:\xampp\laravel\bunbougu\app\Http\Controllers\JuchuController.php
JuchuController.php indexメソッド内に記載
indexメソッド内に記載
$juchus = Juchu::latest()->paginate(5);
return view(‘juchu.index’,compact(‘juchus’))
->with(‘i’, (request()->input(‘page’, 1) – 1) * 5);
ルーティングの編集
C:\xampp\laravel\bunbougu\routes\web.php に
Route::get(‘/juchus’, ‘App\Http\Controllers\JuchuController@index’)->name(‘juchus.index’);
と追記します。
Juchuコントローラーの編集
C:\xampp\laravel\bunbougu\app\Http\Controllers\JuchuController.php
indexメソッドに記入します。
$juchus = Juchu::latest()->paginate(5);
return view(‘juchu.index’,compact(‘juchus’))
->with(‘user_name’,\Auth::user()->name)
->with(‘page_id’,request()->page)
->with(‘i’, (request()->input(‘page’, 1) – 1) * 5);
return view(‘juchu.index’ としているのは、
indexだと C:\xampp\laravel\bunbougu\resources\views\index.blade.php を参照してしまうので、
C:\xampp\laravel\bunbougu\resources\views\Juchu\index.blade.php を参照するように juchu.index としています。
受注テーブルを文房具テーブル、会社テーブル、ユーザーテーブルと外部結合する。
Juchuコントローラindexメソッド内を以下 書き換えます。生のSQLにほぼ近いですね。外部結合しまくっています。
//$juchus = Juchu::latest()->paginate(5);
$juchus = Juchu::select([
‘j.id’,
‘j.kyakusaki_id’,
‘j.bunbougu_id’,
‘j.kosu’,
‘j.joutai’,
‘j.user_id’,
‘k.name as kyakusaki_name’,
‘b.name as bunbougu_name’,
‘u.name as user_name’,
])
->from(‘juchus as j’)
->join(‘kyakusakis as k’, function($join) {
$join->on(‘j.kyakusaki_id’, ‘=’, ‘k.id’);
})
->join(‘bunbougus as b’, function($join) {
$join->on(‘j.bunbougu_id’, ‘=’, ‘b.id’);
})
->join(‘users as u’, function($join) {
$join->on(‘j.user_id’, ‘=’, ‘u.id’);
})
->orderBy(‘j.id’, ‘DESC’)
->paginate(5);
juchu/index.blade.phpを書き換えます。
<td style=”text-align:right”>{{ $juchu->id }}</td>
<td>{{ $juchu->kyakusaki_name }}</td>
<td>{{ $juchu->bunbougu_name }}</td>
<td style=”text-align:center”>{{ $juchu->kosu }}個</td>
<td>{{ $juchu->joutai }}</td>
<td>{{ $juchu->user_name }}</td>
ブラウザでhttp://127.0.0.1:8000/juchus確認します。なかなか良い感じになってきましたね。
状態テーブル Joutai を作成
c:\xampp\laravel\bunbougu>php artisan make:migration create_joutais_table
Created Migration: 2022_07_19_141202_create_joutais_table
C:\xampp\laravel\bunbougu\database\migrations\2022_07_19_141202_create_joutais_table.php
$table->string(‘name’);を追加
マイグレーションを実行します。
c:\xampp\laravel\bunbougu>php artisan migrate:refresh –step=1 –path=/database/migrations/2022_07_19_141202_create_joutais_table.php
テーブル: joutaisの生成をphpMyAdminで確認しました。
データを挿入するために、コマンドプロンプトでシーダーを作成します。
c:\xampp\laravel\bunbougu>php artisan make:seeder JoutaisSeeder
Seeder created successfully.
生成されたシーダー JoutaisSeeder.php を編集します。
C:\xampp\laravel\bunbougu\database\seeders\JoutaisSeeder.php
run内を以下のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
\DB::table('joutais')->insert([ [ 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => null, 'name'=> '納期調整中', ], [ 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => null, 'name'=> '出荷済', ], [ 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => null, 'name'=> 'キャンセル', ], ]); |
シーダーを実行します。
c:\xampp\laravel\bunbougu>php artisan db:seed –class=JoutaisSeeder
Database seeding completed successfully.
juchusテーブルのjoutaiフィールドを”1″か”2″か”3″にします。
Juchuコントローラindexメソッド内を以下のように書き換えます。
$juchus = Juchu::select([
‘j.id’,
‘j.kyakusaki_id’,
‘j.bunbougu_id’,
‘j.kosu’,
‘j.joutai’,
‘j.user_id’,
‘k.name as kyakusaki_name’,
‘b.name as bunbougu_name’,
‘u.name as user_name’,
‘g.name as joutai’,
])
->from(‘juchus as j’)
->join(‘kyakusakis as k’, function($join) {
$join->on(‘j.kyakusaki_id’, ‘=’, ‘k.id’);
})
->join(‘bunbougus as b’, function($join) {
$join->on(‘j.bunbougu_id’, ‘=’, ‘b.id’);
})
->join(‘users as u’, function($join) {
$join->on(‘j.user_id’, ‘=’, ‘u.id’);
})
->join(‘joutais as g’, function($join) {
$join->on(‘j.joutai’, ‘=’, ‘g.id’);
})
->orderBy(‘j.id’, ‘DESC’)
->paginate(5);
http://127.0.0.1:8000/juchus ブラウザで確認します。良い感じになってきましたね。
登録
web.phpに追記します。
Route::get(‘/juchus/create’, ‘App\Http\Controllers\JuchuController@create’)->name(‘juchu.create’)->middleware(‘auth’);
Route::post(‘/juchus/store/’, ‘App\Http\Controllers\JuchuController@store’)->name(‘juchu.store’)->middleware(‘auth’);
※index.blade.php 内の新規登録リンクは href=”{{ route(‘juchu.create’) }}” としておきます。
http://127.0.0.1:8000/juchus/
にアクセスすると、新規登録ボタンが表示されます。
C:\xampp\laravel\bunbougu\app\Http\Controllers\JuchuController.php
コントローラの上部に追加します。
use App\Models\Bunbougu;
use App\Models\Kaisha;
コントローラの create メソッド内に以下 追加します。
$bunbougus = Bunbougu::all();
$kyakusakis = Kyakusaki::all();
return view(‘juchu.create’)
->with(‘bunbougus’,$bunbougus)
->with(‘kyakusakis’,$kyakusakis);
C:\xampp\laravel\bunbougu\resources\views\Juchu\create.blade.php として
create.blade.php ファイルを以下の内容で作成します。
文房具マスターのcreate.blade.phpとほぼ同じですので、form 部分を抜粋します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<form action="{{ route('juchu.store') }}" method="POST"> @csrf <div class="row"> <div class="col-12 mb-2 mt-2 mb-2"> <div class="form-group"> <select name="kyakusaki_id" class="form-select"> <option>客先を選択してください</otion> @foreach ($kyakusakis as $kyakusaki) <option value="{{ $kyakusaki->id }}">{{ $kyakusaki->name }}</otion> @endforeach </select> @error('kyakusaki_id') <span style="color:red;">客先を選択してください</span> @enderror </div> </div> <div class="col-12 mb-2 mt-2 mb-2"> <div class="form-group"> <select name="bunbougu_id" class="form-select"> <option>文房具を選択してください</otion> @foreach ($bunbougus as $bunbougu) <option value="{{ $bunbougu->id }}">{{ $bunbougu->name }}</otion> @endforeach </select> @error('bunbougu_id') <span style="color:red;">文房具を選択してください</span> @enderror </div> </div> <div class="col-12 mb-2 mt-2"> <div class="form-group"> <input type="text" name="kosu" class="form-control" placeholder="個数"> @error('kosu') <span style="color:red;">個数を1～12までの数値で入力してください</span> @enderror </div> </div> <div class="col-12 mb-2 mt-2"> <button type="submit" class="btn btn-primary w-100">登録</button> </div> </div> </form> |
登録画面 http://127.0.0.1:8000/juchus/create を確認します。
客先と 文房具を選択できることが確認できます。
Juchuコントローラのstoreメソッドには以下のように記載します。Bunbouguコントローラとフィールド名は違えどやっていることは、ほぼ同じですね。
$request->validate([
‘kyakusaki_id’ => ‘required|integer’,
‘bunbougu_id’ => ‘required|integer’,
‘kosu’ => ‘required|integer|min:1|max:12’,
]);
$juchu = new Juchu;
$juchu->kyakusaki_id = $request->input([“kyakusaki_id”]);
$juchu->bunbougu_id = $request->input([“bunbougu_id”]);
$juchu->kosu = $request->input([“kosu”]);
$juchu->joutai = 1;
$juchu->user_id = \Auth::user()->id;
$juchu->save();
return redirect()->route(‘juchus.index’)
->with(‘success’,’受注登録しました’);
注文を登録してみます。
はい！登録できました！
ヘッダーにメニューをつくる
app.blade.phpに下記追加します。
<div>
<ul style=”display: flex;”>
<li style=”margin-right: 30px;”><a href=”{{ url(‘/dashboard’) }}”>TOP</a></li>
<li style=”margin-right: 30px;”><a href=”{{ url(‘/juchus’) }}”>受注入力</a></li>
<li><a href=”{{ url(‘/bunbougus’) }}”>文房具マスター</a></li>
</ul>
</div>
システムっぽくなって参りました！
更新及び削除
web.phpに記載
Route::get(‘/juchus/edit/{juchu}’, ‘App\Http\Controllers\JuchuController@edit’)->name(‘juchu.edit’)->middleware(‘auth’);
Route::put(‘/juchus/edit/{juchu}’,’App\Http\Controllers\JuchuController@update’)->name(‘juchu.update’)->middleware(‘auth’);
Route::delete(‘/juchus/{juchu}’,’App\Http\Controllers\JuchuController@destroy’)->name(‘juchu.destroy’)->middleware(‘auth’);
/views/juchu/index.blade.php を変更します。抜粋です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<td style="text-align:center"> @auth <a class="btn btn-sm btn-primary" href="{{ route('juchu.edit',$juchu->id) }}"> 変更 </a> @endauth </td> <td style="text-align:center"> @auth <form action="{{ route('juchu.destroy',$juchu->id) }}" method="POST"> @csrf @method('DELETE') <button type="submit" class="btn btn-sm btn-danger" onclick='return confirm("削除しますか？");'>削除</button> </form> @endauth </td> |
/views/juchu/edit.blade.phpのform部分抜粋です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<form action="{{ route('juchu.update',$juchu->id) }}" method="POST"> @method('PUT') @csrf <div class="row"> <div class="col-12 mb-2 mt-2 mb-2"> <div class="form-group"> <select name="kyakusaki_id" class="form-select"> <option>客先を選択してください</otion> @foreach ($kyakusakis as $kyakusaki) <option value="{{ $kyakusaki->id }}"@if($kyakusaki->id==$juchu->kyakusaki_id) selected @endif>{{ $kyakusaki->name }}</otion> @endforeach </select> @error('kyakusaki_id') <span style="color:red;">客先を選択してください</span> @enderror </div> </div> <div class="col-12 mb-2 mt-2 mb-2"> <div class="form-group"> <select name="bunbougu_id" class="form-select"> <option>文房具を選択してください</otion> @foreach ($bunbougus as $bunbougu) <option value="{{ $bunbougu->id }}"@if($bunbougu->id==$juchu->bunbougu_id) selected @endif>{{ $bunbougu->name }}</otion> @endforeach </select> @error('bunbougu_id') <span style="color:red;">文房具を選択してください</span> @enderror </div> </div> <div class="col-12 mb-2 mt-2"> <div class="form-group"> <input type="text" name="kosu" value="{{ $juchu->kosu }}" class="form-control" placeholder="個数"> @error('kosu') <span style="color:red;">個数を1～12までの数値で入力してください</span> @enderror </div> </div> <div class="col-12 mb-2 mt-2"> <button type="submit" class="btn btn-primary w-100">変更</button> </div> </div> </form> |
コントローラの上書きです。
以下editメソッド内です。
$bunbougus = Bunbougu::all();
$kyakusakis = Kyakusaki::all();
return view(‘juchu.edit’,compact(‘juchu’))
->with(‘bunbougus’,$bunbougus)
->with(‘kyakusakis’,$kyakusakis);
以下updateメソッド内です。
$request->validate([
‘kyakusaki_id’ => ‘required|integer’,
‘bunbougu_id’ => ‘required|integer’,
‘kosu’ => ‘required|integer|min:1|max:12’,
]);
$juchu->kyakusaki_id = $request->input([“kyakusaki_id”]);
$juchu->bunbougu_id = $request->input([“bunbougu_id”]);
$juchu->kosu = $request->input([“kosu”]);
$juchu->joutai = 1;
$juchu->user_id = \Auth::user()->id;
$juchu->save();
return redirect()->route(‘juchus.index’)
->with(‘success’,’受注入力を変更しました’);
以下destroyメソッド内です。
$juchu->delete();
return redirect()->route(‘juchus.index’)
->with(‘success’,’受注ID’.$juchu->id.’を削除しました’);
更新・削除を確認しました。
いやー、ララベル楽しいですね！
それでは良いLaravel Lifeを！
