Berikut adalah tutorial lengkap tentang bagaimana membuat custom 404 Page Not Found di Laravel, serta desain 404 page yang elegan.

1. Menyiapkan Custom Error Page di Laravel

Laravel secara default menggunakan file error yang ada di dalam folder resources/views/errors. Kita bisa membuat custom error page di sini.

Langkah-langkahnya:

Buat Custom View untuk 404 Error Buat file baru dengan nama 404.blade.php di dalam folder resources/views/errors.

resources/views/errors/404.blade.php

Kita akan membuat tampilan custom 404 yang elegan. Berikut adalah contoh desain 404 page menggunakan Bootstrap 5 untuk membuatnya responsive dan elegan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Not Found</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa;
        }
        .error-page {
            text-align: center;
            color: #333;
        }
        .error-page h1 {
            font-size: 8rem;
            margin-bottom: 1rem;
            font-weight: bold;
            color: #ff6b6b;
        }
        .error-page h2 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        .error-page p {
            font-size: 1rem;
            margin-bottom: 2rem;
        }
        .btn-home {
            padding: 0.75rem 2rem;
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
        .btn-home:hover {
            background-color: #d9534f;
        }
    </style>
</head>
<body>

<div class="error-page">
    <h1>404</h1>
    <h2>Oops! Page Not Found</h2>
    <p>Sorry, the page you are looking for does not exist or has been moved.</p>
    <a href="{{ url('/') }}" class="btn-home">Go Back Home</a>
</div>

</body>
</html>

2. Mengatur Layout dan Style Global

Pada contoh di atas, kita menggunakan Bootstrap 5 yang di-load dari CDN agar halaman responsif dan mudah digunakan. Anda bisa menyesuaikan tampilan lebih lanjut dengan menambahkan logo atau gambar yang lebih menarik.

3. Tambahkan Fallback untuk Semua Halaman Tidak Ditemukan

Untuk memastikan bahwa semua URL yang tidak ada akan mengarah ke halaman 404, Anda bisa menambahkan fallback route di routes/web.php:

use Illuminate\Support\Facades\Route;

Route::fallback(function() {
    return response()->view('errors.404', [], 404);
});

Ini akan memastikan bahwa jika route tidak ditemukan, Laravel akan mengarahkan pengguna ke halaman 404.

4. Testing Custom 404 Page

Untuk memastikan custom 404 page ini bekerja, Anda bisa menambahkan route yang tidak ada di dalam routes/web.php atau mengakses URL yang tidak valid di browser:

http://localhost:8000/error

Hal ini akan menampilkan halaman 404 custom yang baru saja Anda buat.

5. Mengatur Halaman Error Lainnya (Opsional)

Selain 404, Laravel juga menyediakan halaman error lain seperti 500 (Internal Server Error). Anda dapat menyesuaikan halaman error lain dengan cara yang sama seperti 404. Cukup buat file seperti berikut di folder errors:

resources/views/errors/500.blade.php
resources/views/errors/403.blade.php

Jika langkah-langkah ini berhasil, maka akan menghasilkan result seperti berikut: