Comment Créer une Page 404 Personnalisée dans Laravel

La personnalisation de la page d'erreur 404 est une excellente manière d'améliorer l'expérience utilisateur et de maintenir la cohérence de votre marque. Une page 404 bien conçue peut guider les visiteurs perdus vers des contenus pertinents de votre site, réduisant ainsi leur frustration. Voici comment procéder dans Laravel.

Étape 1 : Créer la vue d'erreur 404

Contrairement à la création d'une route générique, la méthode la plus simple et la plus robuste dans Laravel est de créer un fichier de vue dans un répertoire spécifique. Laravel détectera automatiquement ce fichier lorsque l'erreur 404 se produira.

1. Créez le dossier errors dans resources/views/.

2. Créez un nouveau fichier nommé 404.blade.php à l'intérieur de ce dossier errors.

3. Ajoutez le code suivant pour structurer la page. Vous pouvez utiliser le layout de votre site pour maintenir un style uniforme.

@extends('layouts.website.layout-website')

@section('content')
<div class="notfound-body">
    <div class="notfound-container">
        <div class='notfound-card'>
            <h1>404</h1>
            <h2>Oops! Page Not Found!</h2>
            <p>
                Il semble que la page que vous recherchez <br />
                n'existe pas ou a peut-être été supprimée.
            </p>
            <div class="mt-4">
                <a href="/" class="btn-link">Retour à l'accueil</a>
            </div>
        </div>
    </div>
</div>
@endsection

Étape 2 : Ajouter le style CSS

Pour rendre votre page 404 attrayante, vous pouvez ajouter des styles personnalisés. Il est recommandé d'utiliser une approche modulaire en incluant le CSS dans un fichier de style global ou dédié.

.notfound-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f8f9fa;
    font-family: 'Arial', sans-serif;
}

.notfound-container {
    text-align: center;
}

.notfound-card {
    background: white;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    animation: fadeIn 1s ease-in-out;
}

h1 {
    font-size: 8rem;
    color: #dc3545;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

h2 {
    font-size: 2.5rem;
    color: #343a40;
    margin-bottom: 1rem;
}

p {
    font-size: 1.2rem;
    color: #6c757d;
    line-height: 1.5;
}

.btn-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: #fff;
    background-color: #007bff;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-link:hover {
    background-color: #0056b3;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Pourquoi ne pas utiliser une route générique ?

Bien qu'une route générique (Route::get('/{any}', ...)), comme proposé dans votre brouillon, puisse fonctionner, elle n'est pas la méthode recommandée dans Laravel. Le framework a un mécanisme intégré pour la gestion des erreurs qui est plus propre et plus efficace.

• Routage explicite : Le système de routage de Laravel est conçu pour des routes explicites. L'utilisation de ->where('any', '.*') peut masquer d'autres erreurs et rendre le débogage plus difficile.

• Performance : Laravel gère les exceptions d'erreur (comme HttpException pour une 404) de manière optimisée. Utiliser une route générique contourne ce système et peut impacter la performance de votre application.

• Standardisation : La création d'un fichier resources/views/errors/404.blade.php est la pratique standard de Laravel et rend votre code plus facile à comprendre pour d'autres développeurs.

En suivant ces étapes, vous aurez une page 404 robuste et bien intégrée qui s'affichera automatiquement chaque fois qu'une URL non existante est demandée.