LaravelでDBに入っている学年とユーザーが選択した学年が一致したときに科目を表示させたい

Question

実現したいこと

Laravel　MVC　を使用

１，ユーザーが学年を選択
２，選択した学年がDBの中に入っている学年と比較する
３，一致してればその対象の授業のタイトルを表示させる。

発生している問題・分からないこと

DBの値とユーザーが選択した値を一致させる方法を知りたい。
また、ユーザー選択画面では学年ごとに別々の科目が授業されるようにしたい。

該当のソースコード

<div class="container">
        <div class="buttons">
            <button onclick="showSubjects('grade1')">小学校1年生</button>
            <button onclick="showSubjects('grade2')">小学校2年生</button>
            <button onclick="showSubjects('grade3')">小学校3年生</button>
            <button onclick="showSubjects('grade4')">小学校4年生</button>
            <button onclick="showSubjects('grade5')">小学校5年生</button>
            <button onclick="showSubjects('grade6')">小学校6年生</button>
            <button onclick="showSubjects('grade7')">中学校1年生</button>
            <button onclick="showSubjects('grade8')">中学校2年生</button>
            <button onclick="showSubjects('grade9')">中学校3年生</button>
            <button onclick="showSubjects('grade10')">高校1年生</button>
            <button onclick="showSubjects('grade11')">高校2年生</button>
            <button onclick="showSubjects('grade12')">高校3年生</button>
        </div>
        
        <div id="subjects-container">
            <!-- 科目リストがここに表示されます -->
        </div>
    
    </div>

const subjects = ['国語', '数学', '社会', '理科', '英語', '体育'];

function showSubjects(grade) {
    const subjectsContainer = document.getElementById('subjects-container');
    subjectsContainer.innerHTML = '';

    // const gradeTitle = document.createElement('h2');
    // gradeTitle.textContent = gradeToTitle(grade);
    // subjectsContainer.appendChild(gradeTitle);

    const subjectsList = document.createElement('ul');
    subjectsList.className = 'subjects';

    subjects.forEach(subject => {
        const listItem = document.createElement('li');
        listItem.textContent = subject;
        subjectsList.appendChild(listItem);
    });

    subjectsContainer.appendChild(subjectsList);

    const p_title_id = document.getElementById('p_title');
    p_title_id.innerHTML = '';
    const p_title = document.createElement('p');
    p_title.textContent = gradeToTitle(grade);
    p_title_id.appendChild(p_title);
    p_title.classList.add('p_style');
}




function gradeToTitle(grade) {
    const titles = {
        grade1: '小学校1年生',
        grade2: '小学校2年生',
        grade3: '小学校3年生',
        grade4: '小学校4年生',
        grade5: '小学校5年生',
        grade6: '小学校6年生',
        grade7: '中学校1年生',
        grade8: '中学校2年生',
        grade9: '中学校3年生',
        grade10: '高校1年生',
        grade11: '高校2年生',
        grade12: '高校3年生',
    };
    return titles[grade];
}

class Curriculum extends Model
{
    use HasFactory;
    
    protected $fillable = [
        'title',
        'thumbnail',
        'description',
        'video_url',
        'alway_delivery_flg',
        'grade_id',
    ];
public function storeCurriculum($grade , $request)
    {
        //授業データを保存
        $curriculums = new Curriculum();
        $curriculums->title = $request->input('title');

        //ここにサムネイル画像を入れる
        // 商品画像を保存
        if ($request->hasFile('thumbnail_image')) {
            
            return back()->with('error', 'ファイルがアップロードされていません');
            $imagePath = $request->file('thumbnail_image')->store('images', 'public');
            $curriculums->thumbnail = $imagePath;
        }

        $curriculums->description = $request->input('description');
        $curriculums->video_url = $request->input('video_url');
        $curriculums->alway_delivery_flg = $request->boolean('alway_delivery_flg');
        $curriculums->grade_id = $request->input('grade_id');

        $curriculums->save();
        return $curriculums;
    }
}

class Curriculum_List extends Controller
{
    //授業一覧-画面
    public function showCurriculum_List(Request $request)
    {
        $deliverytimes = Delivery_time::all();
        $model = new Curriculum();
        $curriculums = $model->getCurriculum();
        return view('curriculums_list\curriculums_list' , compact('curriculums' , 'deliverytimes'));
    }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

イメージ
授業入力フォームで登録→DBに保存
授業一覧画面でユーザーが学年を選択
選択された学年とDBに入っている学年を比較する。
一致していればDBのテーブルの授業タイトルを授業一覧画面のユーザーが選択した学年の画面で表示。

チャットGPTより
ファイルを二つ作成
１，入力フォーム専用のファイル→授業一覧画面の学年を選択するファイル
２，出力専用のファイル→比較した結果を表示させるファイル

ただ、ファイルが複雑になることが懸念点。

補足

Answer 1

サーバサイド、フロントエンドで絞る２通りの方法がありますが、この場合はサーバサイド(コントローラ)でやるのが良いと思います。

サーバサイドで絞る

まずフロントはButtonの箇所をaタグに変更します。

<div class="buttons">
    <a href="{{ route('kono.page', ['grade_id'=>1]) }}">小学校1年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>2]) }}">小学校2年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>3]) }}">小学校3年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>4]) }}">小学校4年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>5]) }}">小学校5年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>6]) }}">小学校6年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>7]) }}">中学校1年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>8]) }}">中学校2年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>9]) }}">中学校3年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>10]) }}">高校1年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>11]) }}">高校2年生</a>
    <a href="{{ route('kono.page', ['grade_id'=>12]) }}">高校3年生</a>
</div>

route('')の中身はweb.phpで定義してるnameに置き換えてください。

そうするとクリックしたとき、 example.com/hogehoge?grade_id=1 に飛ぶようになるので、このgrade_idをコントローラで取得します。

コントローラは次のように変更します。
$requestの中身に、?grade_idのパラメータが格納されているのでそれを利用して、
DBからカリキュラムを取得する際に絞り込みます。

class Curriculum_List extends Controller
{
    //授業一覧-画面
    public function showCurriculum_List(Request $request)
    {
        $deliverytimes = Delivery_time::all();

        $query = Curriculm::query();
        // 学年で絞り込み
        if($request->input('grade_id')){
            $query->where('grade_id', $request->input('grade_id'));
        }
        $curriculums = $query->get();

        return view('curriculums_list\curriculums_list' , compact('curriculums' , 'deliverytimes'));
    }
}

↓この箇所で、DBにあるカリキュラムのgrade_idと、クリックされてURLに追加された grade_id=*** の部分が一致するもののみに絞ります。
$query->where('grade_id', $request->input('grade_id'));

フロントで絞る

深く考えていないので手法だけ書くと

• 科目のリスト要素に適当なクラスかdata属性をつける

<div class="curriculum grade1">授業1</div>
<div class="curriculum grade1">授業2</div>
<div class="curriculum grade2">授業3</div>

• ボタンがクリックされた時、全て非表示にし、選択されたgrade*のみ表示する

$('.curriculum').hide();
$('.grade2').show();

これで選択されたものだけ残ります。

さらに改善するには

ボタンの箇所もDBから引っ張ります。

<!-- コントローラで$gradesを取得しておいて -->
<div class="buttons">
    @foreach($grades as $grade)
           <a href="{{ route('kono.page', ['grade_id'=> $grade->id]) }}">{{ $grade->name }}</a>
    @endforeach
</div>

この方が不整合が出にくく、考慮しておくエラーが少なく済みます。

サーバサイドで絞るように実施できれば、主に以下のようなメリットがあります。

• (JSに比べ)PCに読み込むデータ数が減る
• データ数が大量になった場合にページネーションが使える

上記フロントで絞る方法のような、フロントで表示・非表示を切り替えることもできますが、
DB(sql)やPHPで絞る方が何倍も早いというのがPHPの基本的な考え方になります。