さて、、、、ポートフォリオ作りを進めていきます。
今回は登録したデータの一覧表示の実装となります。
vol4で作成したモックアップに機能を実装していきます。
前回の記事
Contorller処理の実装
まずはControllerの処理を確認してみましょう。
一覧画面の処理はindexメソッドになります。
<?php
namespace App\Http\Controllers;
use App\Models\Student;
use Illuminate\Http\Request;
class StudentController extends Controller
{
/**
* 一覧画面
*/
public function index()
{
// 複数人の生徒情報を格納するための配列を作成
$students = [];
// 生徒の情報を作成する
$student = [
'student_name' => '田中太郎', // 生徒名
'kikan_from' => '2023-01-01', // 期間（開始日）
'kikan_to' => '2023-04-01', // 期間（終了日）
'student_memo' => '田中太郎さんは、とても優秀な生徒です。', // 生徒メモ
'student_detail_url' => '', // 生徒詳細URL
'student_mendan_url' => '', // 面談URL
];
// 生徒情報を格納する
$students[] = $student;
// 変数を通さずに直接格納してもOK
$students[] = [
'student_name' => '山田花子', // 生徒名
'kikan_from' => '2023-02-01', // 期間（開始日）
'kikan_to' => '2023-08-01', // 期間（終了日）
'student_memo' => '山田さんは半年コースの申し込みです。', // 生徒メモ
'student_detail_url' => '', // 生徒詳細URL
'student_mendan_url' => '', // 面談URL
];
return view('student.index', [
'students' => $students,
]);
}
/**
* 登録画面
*/
public function create()
{
省略
}
/**
* 登録処理
*/
public function store(Request $req){
省略
}
}
現在は表示される情報がDB取得のものではなく、ソースコード上に直接記述されたものになっていますね。
これをDBから取得した値に変更していきます。
まずはDBからレコードを取得する処理を記述します。
前回と登録処理と同じく、DBからの取得処理もModelクラスを使用して実行します。
public function index()
{
// studentsテーブルからデータを取得
$db_students = Student::get();
// 生徒の情報を作成する
$student = [
'student_name' => '田中太郎', // 生徒名
'kikan_from' => '2023-01-01', // 期間（開始日）
'kikan_to' => '2023-04-01', // 期間（終了日）
'student_memo' => '田中太郎さんは、とても優秀な生徒です。', // 生徒メモ
'student_detail_url' => '', // 生徒詳細URL
'student_mendan_url' => '', // 面談URL
];
// 生徒情報を格納する
$students[] = $student;
// 変数を通さずに直接格納してもOK
$students[] = [
'student_name' => '山田花子', // 生徒名
'kikan_from' => '2023-02-01', // 期間（開始日）
'kikan_to' => '2023-08-01', // 期間（終了日）
'student_memo' => '山田さんは半年コースの申し込みです。', // 生徒メモ
'student_detail_url' => '', // 生徒詳細URL
'student_mendan_url' => '', // 面談URL
];
return view('student.index', [
'students' => $students,
]);
}続いて、DBから取得した情報を使用して画面表示用の変数に値を設定していきます。
DBから取得した情報はLaravelのCollectionという型で保存されています。これは配列と同じようにLoop文を使用して処理することが可能です。
※Collectionについてはこちら
それでは、DB取得値で画面表示の値を設定していきましょう。
public function index()
{
// studentsテーブルからデータを取得
$db_students = Student::get();
// 画面に返却する値を定義
$students = [];
foreach ($db_students as $db_student){
$students[] = [
'student_name' => $db_student->student_sei . $db_student->student_mei, // 生徒名
'kikan_from' => $db_student->student_from_date, // 期間（開始日）
'kikan_to' => $db_student->student_to_date, // 期間（終了日）
'student_memo' => $db_student->student_memo, // 生徒メモ
'student_detail_url' => '', // 生徒詳細URL
'student_mendan_url' => '', // 面談URL
];
}
return view('student.index', [
'students' => $students,
]);
}ソースがとてもすっきりしましたね。
生徒氏名(student_name)の部分に注目してみましょう。
画面に表示する際は「氏名」と1項目にしていますが、DB上では「姓」と「名」に分けて登録しています。
そのため、姓と名を結合して1つの項目に設定していますね。
このように、画面出力のの変数に対して、値の設定の仕方を変えていくことでbladeをいじらずに様々な表示に対応できます。
モックアップ作成時点でbladeに直接「田中太郎」と氏名を記述したり、カードを人数分記述しているとbladeの修正の手間も発生しますが、今回は先に変数化しておいたことでbladeの修正は発生しません。
一覧画面を確認してみましょう。
DBから取得した情報が表示されているはずです。
今回はここまで。
モデルのgetメソッドに条件を指定して取得することもできるので、表示するレコードの絞り込みも可能です。
モックアップを変数化して作成したおかげで、今回はあっさり終わりましたね。
