如何实现预约满额判断？Laravel预约系统时段限流与满额提示功能开发

后端核心校验逻辑（必做，防止绕过前端校验） #

你需要在创建预约记录前先统计对应日期、对应时段的已预约人数，超过上限3人则直接返回错误提示，不执行创建操作。修改后的store方法代码如下：

public function store(Request $request)
{
    // 先统计指定日期+时段的已预约人数
    $reservedCount = Pengunjung::where('tanggal', $request->tanggal)
        ->where('jam_id', $request->jam_id)
        ->count();
    
    // 达到上限直接返回错误
    if ($reservedCount >= 3) {
        return back()->withInput()->with('error', '该时段已约满，请选择其他时段');
    }

    Pengunjung::create([
        'nik'=> $request->nik,
        'nama'=> $request->nama,
        'status'=> $request->status,
        'email'=> $request->email,
        'notelp'=> $request->notelp,
        'jenis'=> $request->jenis,
        'kec'=> $request->kec,
        'nop'=> $request->nop,
        'namaobjek'=> $request->namaobjek,
        'tanggal'=> $request->tanggal,
        'jam_id'=> $request->jam_id,
    ]);

    return redirect()->route('formsukses', $request);
}

前端提示逻辑适配 #

你需要在Blade模板中添加错误提示的渲染逻辑，也可以额外添加选前校验提升用户体验：

1. 基础错误提示适配（配合后端校验） #

在Blade模板任意位置添加以下代码，后端返回约满错误时会自动弹出提示：

@if(session('error'))
<script>
    alert("{{ session('error') }}");
</script>
@endif

2. 进阶：选定时段即时校验（无需提交即可提示） #

如果要实现用户选完日期、时段后立刻判断是否满员，可以新增一个简易校验接口，前端监听输入变化发起异步校验：
首先在路由文件新增校验路由：

Route::post('/check-reserve', function (Request $request) {
    $count = Pengunjung::where('tanggal', $request->tanggal)
        ->where('jam_id', $request->jam_id)
        ->count();
    return response()->json(['full' => $count >=3]);
})->name('check.reserve');

然后在Blade模板底部添加JS监听逻辑（确保模板head区域存在默认的csrf-token meta标签）：

document.querySelector('input[name="tanggal"]').addEventListener('change', checkReserve);
document.querySelector('select[name="jam_id"]').addEventListener('change', checkReserve);

function checkReserve() {
    const tanggal = document.querySelector('input[name="tanggal"]').value;
    const jamId = document.querySelector('select[name="jam_id"]').value;
    if (!tanggal || !jamId) return;

    fetch("{{ route('check.reserve') }}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            tanggal: tanggal,
            jam_id: jamId
        })
    })
    .then(res => res.json())
    .then(data => {
        if (data.full) {
            alert('该时段已约满，请选择其他时段');
            // 可选：自动清空选中的时段
            document.querySelector('select[name="jam_id"]').value = '';
        }
    })
}

内容的提问来源于stack exchange，提问作者aji setiawan