Laravelでイベントの出席管理システムを作成してみる！③プログラミング
こんばんは！Keitaです。
また時間が空いてしまいましたね。。すいません！
PHPのフレームワーク「Laravel」を使用した複数人体制のプロジェクトがあり、そのアウトプットとして、開発工程を記事にまとめていきたいと思います。
これまでの道筋としては、
①に作成物の紹介と開発環境を構築して、
②に設計の部分であるデータベースの設計と画面の設計を行っていきました。
今回はその続きのプログラミングを行っていこうと思います！
その前にMVCについて知っておく！
プログラミングのフレームワークといえばModel・Veiw・Controllerですね！
ModelはDBやデータの処理を行い、Veiwは画面を表示し、Controllerは制御してるんだよ～と知っておけばOKなのではないでしょうか！
下画面のような感じですね。
詳しく知りたい方は他サイトや書籍等で調べてみてください～
それを前提にプログラムに移っていきます！
（１）まずはルーティング！！
人それぞれ書き方はあると思いますが、自分はルーティングを決めることから始めていきます。
ファイルは「route/web.php」の中に書いていき、「このURLが要求させたらこの処理を動かすよ」というものを書いていきます。
今回はテンプレートを作成する処理のルーティングにフォーカスを当てて記載していきます！
Route::controller(TempleteController::class)->prefix('templete')->name('templete')->group(function() {
Route::get('/', 'list');
Route::get('/create', 'create')->name('.create');
Route::post('/create', 'store')->name('.store');
Route::get('/edit/{templete_id}', 'edit')->name('.edit');
Route::get('/delete/{templete_id}', 'delete')->name('.delete');
Route::post('/update/{templete_id}', 'update')->name('.update');
});
私はグループ化して記載する方法を採用してますが、色々書き方あるのでお好みのやつを採用してみてください。
参照:ルーティング 9.x Laravel
（２）次はController！！
ルーティングを決めたら次はControllerを作成していきましょう♪
コントローラーは下記のコマンドを入力することで自動的に作成されます！
今回はTempleteControllerとして作成していきます。
入力したら「App\Http\Controllers\TempleteController」と作成されているはずです。
このファイルにルーティングで指定した関数を記載していきます。
※すべて書くとキリがないのでlistのみ処理を書いていきます。
class TempleteController extends Controller
{//一覧表示
public function list(){
//データベースのデータ読み出し
$templete = Templete::all();
//Veiwに値を渡して表示
return view(
'templete.list',
['templete' => $templete]
);
}
//作成画面に遷移
public function create(){}
//作成画面にて作成ボタン押下
//引数は入力された値
public function store(Request $request){}
//編集画面
public function edit($templete_id){}
//編集画面にて編集ボタン押下
//引数は入力値、指定ID、データベース値
public function update(Request $request,$templete_id, Templete $templete){}
//削除処理
public function delete($templete_id){}}
こんな感じでしょうか。
これでルーティングされたら実行される処理の型を作ることができました。
これも書き方が分かれるみたいなので、お好みなやつを選択してください～
参考：コントローラ 9.x Laravel
（３）いざModelへ！！
次はデータを司るModelの処理を書いていこうと思います。
これも下記のコマンドを打ってファイルを作成しちゃいましょう！
ちなみにマイグレートファイルを一緒に作成しちゃます！
マイグレートファイルはテーブルの定義を記載するファイルです。
「database\migrations」配下に作成されてるはずです！
upは作成したいことをdownは変更したいことを記載するという認識でいいのではないでしょうか。
return new class extends Migration
{public function up()
{
Schema::create('templetes', function (Blueprint $table) {
$table->id('templete_id');
$table->string('name');
$table->integer('start_hour');
$table->integer('start_minute');
$table->integer('end_hour');
$table->integer('end_minute');
$table->integer('late_minute');
});
}
public function down()
{
Schema::dropIfExists('templetes');
}
}
書けたら下記コマンドでデータベースのテーブルを作成します！
php artisan migrate
次にModelの処理です。
ここは作成したテーブルの制約について記載するファイルです。
「app/Models」配下に作成されてるはずです！
class Templete extends Model
{
protected $primaryKey = 'templete_id';
protected $fillable = ['name'];
use HasFactory;
}
ここも書き方色々あるので、好みのものを探してみてください！
これでデータの処理はOKです！
（３）最後はVeiw！！
最後に表示画面を作成していきます。
LaravelのテンプレートエンジンはBlade.phpというものを採用されています。
ファイルは「resources\views」配下に作成していきます。
※Templeteの場合は「templete\list.blade.php」と作成しました！
ここは本当に書き方それぞれなので、こちらを参考にしてください
参考：ビュー 9.x Laravel
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Templete') }}
</h2>
</x-slot>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
<a href="{{ route('templete.create') }}">
<button>create</button>
</a>
<table class="table table-borderless">
<colgroup span="4"></colgroup>
<tr>
<th>ID</th>
<th>名前</th>
<th>開始時</th>
<th>開始分</th>
<th>終了時</th>
<th>終了分</th>
<th>遅刻許容分</th>
<th>アクション</th>
</tr>
@foreach ($templete as $temp)
<tr>
<td>
<span class="text-xs text-gray-800">{{ $temp->templete_id }}</span>
</td>
<td>
<span class="text-xs text-gray-800">{{ $temp->name }}</span>
</td>
<td>
<span class="text-xs text-gray-800">{{ $temp->start_hour }}</span>
</td>
<td>
<span class="text-xs text-gray-800">{{ $temp->start_minute }}</span>
</td>
<td>
<span class="text-xs text-gray-800">{{ $temp->end_hour }}</span>
</td>
<td>
<span class="text-xs text-gray-800">{{ $temp->end_minute }}</span>
</td>
<td>
<span class="text-xs text-gray-800">{{ $temp->late_minute }}</span>
</td>
<td>
<a href="{{ route('templete.edit', ['templete_id' => $temp->templete_id]) }}">
<i class="bi bi-check2-square">
</i><button>修正</button>
</a>
<a href="{{ route('templete.delete', ['templete_id' => $temp->templete_id]) }}">
<i class="bi bi-trash"></i>
<button>削除</button>
</a>
</td>
</tr>
@endforeach
</table>
</x-app-layout>
とこんな感じです！
さてちゃんと表示されているでしょうか。。(テスト用に事前にテーブルにはデータを追加しておきました！)
やった～成功ですね！
今回、すべての処理を紹介するとめっちゃくちゃ長くなるので超絞って紹介しましたが、この処理を他のテーブルでも同様に行いそれをつなげて完成させることができました！！
完成したもの
さてプロジェクトにおけるシナリオを実行してみましょう！
【シナリオ】7/16に一日中セキュリティイベントを開催することとなりました。このイベントの出席をWEBで管理したいと依頼が来ました！
さてこれを解決していきます♪
まず、イベントの時間設定(Templete)を作成します！(遅刻は考えないものとします)
これを元にイベントの日にちを作成します！
ちなみに今日は7/16なのでイベント開催日になっていますので出席登録可能な状態になっています！
ここまででイベント出席の開設は完了です！
あとは参加者が本当に出席登録ができるか見ていきましょう！
画面的にはできてますね！
では、受講者はこれを確認できるのでしょうか！！
確認できましたね！
これでゴールを達成することができました！
まだまだ改善点はたくさんありますが、ひとまず完成です！
今回の開発は大変でしたが、色々な事を学ぶことができました。。
あと、めちゃくちゃ雑になったし、長くなってしまいました。。もしここまで見てくれている人がいたら感謝です！！
ここまで読んでいただきありがとうございました！
