Les pages d’erreur sont courantes dans les applications web. Les contributeurs de Django ont fourni des pages par défaut pour certaines de ces erreurs, comme l’erreur 404 (Not Found). Mais en tant que développeur, il est préférable d’avoir une page d’erreur qui suit les principes de conception du reste de votre application web.
Création d’une page 404 personnalisée dans Django
L’erreur 404 fait partie des différents codes d’état HTTP utilisés par le navigateur pour indiquer la réponse du serveur aux requêtes du navigateur effectuées par un utilisateur. Django fournit des modèles par défaut pour certains de ces codes d’état, et la page d’erreur 404 par défaut dans Django ressemble à ceci :
L’image ci-dessus n’est pas très belle, et la plupart des entreprises ne l’accepteront pas volontiers sur leur site web. Pour changer cette page en une page 404 personnalisée de votre choix, vous devez suivre les étapes ci-dessous.
Étape 1 : Créer une vue pour gérer l’erreur 404
Ouvrez votre views.py et créez une vue pour la page d’erreur 404. Cette vue doit renvoyer un modèle contenant le design de votre page d’erreur 404 personnalisée. Voici une vue Django simple que vous pouvez utiliser dans votre projet :
from django.shortcuts import render
# custom 404 view
def custom_404(request, exception):
return render(request, '404.html', status=404)
L’extrait de code ci-dessus est une fonction Python (appelée de préférence vue Django dans ce cas) qui prend deux arguments de fonction ; demandeet exception. Le deuxième argument –exception-permet d’accéder à l’objet d’exception qui a déclenché l’erreur 404.
Vous devez remplacer l’élément ‘404.html’ dans la vue ci-dessus avec le chemin d’accès correct à votre page modèle HTML d’erreur 404.
Étape 2 : Créer un modèle pour votre erreur 404
Créez un nouveau fichier HTML qui contiendra votre design personnalisé pour la page d’erreur 404. Le design doit être cohérent avec le reste de votre application. Voici un modèle HTML simple que vous pouvez utiliser dans votre projet. Vous pouvez modifier ce modèle comme bon vous semble :
<!-- 404.html template -->
<!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
<!-- import Bootstrap -->
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<!-- custom css -->
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
max-width: 600px;
}
.emoji {
font-size: 8rem;
margin-bottom: 20px;
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
p {
font-size: 1.5rem;
margin-bottom: 20px;
}
.btn {
font-size: 1.25rem;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="emoji">????</div>
<h1>Oops! Page Not Found</h1>
<p>We couldn't find the page you were looking for.</p>
<a class="btn btn-primary" href="https://www.makeuseof.com/">Go back to Home</a>
</div>
</body>
</html>
Étape 3 : Modifier le fichier URL de votre projet
Au niveau de votre projet (là où votre settings.py est), ouvrez votre fichier urls.py et faites pointer le gestionnaire d’erreur 404 vers la vue que vous avez créée pour gérer l’erreur 404. Le gestionnaire d’erreur 404 s’appelle gestionnaire404. Pour pointer gestionnaire404 pour votre vue, vous devriez suivre ce format :
handler404 = 'app_name.views.custom_404_view_name'
Si votre application s’appelle recetteet la vue s’appelle custom_404vous devez alors modifier le format ci-dessus comme suit :
handler404 = 'recipe.views.custom_404'
Assurez-vous de faire cela au niveau de votre projet et non de votre application. Il existe des différences entre un projet et une application dans Django.
Étape 4 : tester votre nouvelle page d’erreur 404
Pour tester votre nouvelle page d’erreur, démarrez votre serveur de développement et naviguez vers une page inexistante de votre application. Vous pouvez démarrer votre serveur en exécutant cette commande dans votre outil de ligne de commande (CLI) :
python manage.py runserver
Pour que la commande ci-dessus fonctionne, vous devez vous trouver dans le répertoire racine de votre projet, c’est-à-dire dans le dossier où se trouvent vos fichiers manage.py file lives.
Une fois votre serveur démarré, testez votre page 404 personnalisée en naviguant vers une page inexistante telle que http://127.0.0.1:8000/hello. Si vous avez tout fait correctement, vous devriez voir votre page d’erreur 404 personnalisée.
Si votre page d’erreur 404 personnalisée n’apparaît pas, vous devriez envisager de vérifier vos vues pour vous assurer que vous avez écrit le bon chemin vers votre modèle HTML dans le fichier render() car il s’agit d’un problème courant.
Des pages d’erreur personnalisées pour une meilleure expérience utilisateur
La présence d’une page d’erreur personnalisée dans votre application améliorera l’expérience de vos utilisateurs lorsqu’ils rencontrent des erreurs. Au lieu de voir un message d’erreur générique, une page d’erreur personnalisée peut fournir des informations plus spécifiques sur l’erreur et suggérer des solutions possibles.
Cela peut aider les utilisateurs à comprendre ce qui n’a pas fonctionné et comment y remédier, réduisant ainsi la frustration et augmentant leur confiance dans votre application. Vous pourrez également rendre la page inclusive en y ajoutant des fonctions d’accessibilité.