Mencegah Duplikasi Submit Form di Laravel: Masalah dan Solusi Lengkap

🎯 Masalah yang Sering Terjadi

Dalam aplikasi Laravel (atau aplikasi web pada umumnya), kadang-kadang user tanpa sadar menekan tombol “Simpan” lebih dari satu kali karena proses masih loading atau internet lambat. Akibatnya:

• Data terkirim dua kali atau lebih ke database.
• Bisa terjadi duplikasi data.
• Performa dan integritas data bisa terganggu.

✅ Tujuan Tutorial Ini

Anda akan belajar:

1. Mengapa form bisa terkirim lebih dari satu kali.
2. Solusi frontend (Blade + JavaScript) untuk mencegahnya.
3. Solusi tambahan dari backend (Controller dan Database).
4. Contoh kasus sederhana.

🛠️ Solusi 1: Nonaktifkan Tombol Submit Setelah Diklik (Frontend)

✅ Langkah 1: Modifikasi Tombol Submit

Ganti tombol submit Anda seperti ini:

<button type="submit" onclick="disableButton(this)">Simpan</button>

✅ Langkah 2: Tambahkan Script JavaScript Letakkan di bagian bawah Blade:

<script>
    function disableButton(btn) {
        btn.disabled = true; // tombol jadi tidak bisa diklik
        btn.innerText = 'Menyimpan...'; // bisa ubah teks sesuai kebutuhan
        btn.form.submit(); // kirim form
    }
</script>

🧪 Contoh Form Lengkap:

<form action="{{ route('data.store') }}" method="POST">
    @csrf

    <input type="text" name="nama" required>
    <input type="email" name="email" required>

    <button type="submit" onclick="disableButton(this)">Simpan</button>
</form>

<script>
    function disableButton(btn) {
        btn.disabled = true;
        btn.innerText = 'Menyimpan...';
        btn.form.submit();
    }
</script>

🛡️ Solusi 2: Cek Duplikasi di Controller (Backend)

Untuk perlindungan tambahan, tambahkan logika pengecekan data ganda sebelum simpan:

✅ Contoh di Controller:

public function store(Request $request)
{
    $request->validate([
        'email' => 'required|email|unique:users,email',
    ]);

    // Cek apakah data serupa sudah ada (contoh: berdasarkan email)
    $existing = User::where('email', $request->email)->first();

    if ($existing) {
        return redirect()->back()->with('warning', 'Data sudah pernah disimpan.');
    }

    User::create([
        'nama' => $request->nama,
        'email' => $request->email,
    ]);

    return redirect()->route('users.index')->with('success', 'Data berhasil disimpan.');
}

🔒 Solusi 3: Tambahkan Validasi Unik di Database

Tambahkan constraint unik di migrasi database untuk jaga-jaga:

$table->unique(['email']);

🧠 Tips Tambahan (Opsional): Gunakan Session Token Anti-Submit

Jika ingin sistem hanya mengizinkan 1 submit per session, bisa gunakan session:

if (session('submitted')) {
    return back()->with('warning', 'Proses sedang berjalan, jangan klik dua kali.');
}

session(['submitted' => true]);

// Proses simpan...

session()->forget('submitted');

📌 Kesimpulan

SolusiTujuanKapan digunakan✅ Disable tombol submit (JavaScript)Cegah klik ulangWAJIB (frontend)✅ Validasi duplikat di ControllerHindari simpan gandaWAJIB (backend)✅ Unique constraint di DBBackup keamananJika data harus unikOpsional: Session TokenCegah submit ulang via refreshTambahan keamanan

📂 Penutup

Dengan menerapkan solusi-solusi di atas, Anda bisa menjaga agar aplikasi Laravel Anda:

• Lebih aman terhadap double submit,
• Menyediakan pengalaman pengguna yang baik, dan
• Terhindar dari duplikasi data yang merugikan.

Assalamualaikum! Jika Anda menikmati konten saya, dukungan dari Anda sangat berarti bagi saya. Setiap kontribusi melalui Saweria membantu saya untuk terus berkarya dan memberikan konten yang bermanfaat. Terima kasih atas dukungan dan apresiasi Anda. Kunjungi link Saweria saya di **https://saweria.co/azwar2001**. Semoga Allah membalas kebaikan Anda!

https://saweria.co/azwar2001