Personnaliser ses pages d'erreurs (403-404-500-...)

Nous allons voir ici comment personnaliser les pages d'erreurs de votre site afin de leur donner un aspect agéable et en accord avec le design général de votre site et ainsi préserver les yeux de vos visiteur de ces affreuses pages blanches avec pour seuls mots "Erreur xxx ... !"

Ces articles sont susceptibles de vous intéresser aussi :

Creer un site

Coder en HTML

Coder en CSS

Un exemple

Voici les liens directs vers quelques unes des pages d'erreurs de ce site afin que vous puissiez vous faire une opinion sur l'interet d'ameliorer le design de ces dernières.

 

Que sont les pages d'erreurs

Les pages d'erreurs sont un code http transmis par les serveurs lorsque ceux-ci ne peuvent faire aboutir la requete de l'utilisateur, par exemple lorsqu'une page demandée n'existe pas (la célèbre 404 Not Found) ou lorsque qu'un répertoire est interdit (erreur 403).

Il en existe plusieurs type dont voici la liste :

Code d'erreur Motif
100 OK pour continuer
101 le serveur a changé de protocole
200 requête effectuée avec succès
201 document créé (raison : nouvelle URI)
202 requête achevée de manière asynchrone (TBS)
203 requête achevée de manière incomplète
204 aucune information à renvoyer
205 requête terminée mais formulaire vide
206 requête GET incomplète
300 le serveur ne peut pas déterminer le code de retour
301 document déplacé de façon permanente
302 document déplacé de façon temporaire
303 redirection avec nouvelle méthode d'accès
304 le champ 'if-modified-since' n'était pas modifié
305 redirection vers un proxy spécifié par l'entête
307 HTTP/1.1
400 erreur de syntaxe dans l'adresse du document
401 pas d'autorisation d'accès au fichier (clic sur "annuler" lors d'une authentification par .htaccess)
402 accès au document soumis au paiement
403 l'accès au fichier requiet une autorisation
404 la page demandée n'existe pas
405 méthode de requête du formulaire non autorisée
406 requête non acceptée par le serveur
407 autorisation du proxy nécessaire
408 temps d'accès à la page demandée expiré
409 l'utilisateur doit soumettre à nouveau avec plus d'infos
410 cette ressource n'est plus disponible
411 le serveur a refusé la requête car elle n'a pas de longueur
412 la précondition donnée dans la requête a échoué
413 l'entité de la requête était trop grande
414 l'URI de la requête était trop longue
415 type de média non géré
500 erreur interne du serveur (mauvais identifiants saisis lors d'une authentification par .htaccess)
501 requête faite au serveur non supprimée
502 mauvaise passerelle d'accès
503 service non disponible
504 temps d'accès à la passerelle expiré
505 version HTTP non gérée

 

Création des pages d'erreurs personnalisées

De ce coté la, rien de plus simple !
Créez un nouveau document (vierge ou fille de votre template) et donnez lui le design attendu en fonction du type d'erreur.
Une fois votre page personnalisée, enregistrez la à la racine de votre site sous le code d'erreur visé au format .html. La page retravaillée de l'erreur 404 s'appelera donc "404.html" et le principe sera le meme pour les pages d'erreur 401, 402, ... .

Pour le design vous n'avez aucune limite puisqu'il s'agira au final d'une page .html classique.

 

Création de la redirection

Nous allons maintenant créer le fichier permettant à votre serveur de connaitre la page à afficher en fonction de l'erreur.
Pour cela ouvrez un nouveau document dans votre éditeur de code et créez les redirections en utilisant la syntaxe suivante :

ErrorDocument n°erreur URL-de-la-page-a-afficher

ce qui donne pour une erreur 404

ErrorDocument 404 http://www.nomdedomaine.extension/404.html

Ce document peut contenir plusieurs redirections mais aucune ligne de code du type HTML ou CSS, juste vos redirections.
Voici un exemple de fichier finalisé pour les erreurs 400 à 404 :

ErrorDocument 400 http://www.nomdedomaine.extension/400.html
ErrorDocument 401 http://www.nomdedomaine.extension/401.html
ErrorDocument 402 http://www.nomdedomaine.extension/402.html
ErrorDocument 403 http://www.nomdedomaine.extension/403.html
ErrorDocument 404 http://www.nomdedomaine.extension/404.html

Vos redirections écrites, enregistrez ce fichier à la racine de votre site au format .htaccess, sans autres extensions, pas de .htaccess.html ou .php, juste .htaccess !

 

Il ne vous reste plus maintenant qu'à créer un design pour chaque erreur que vous souhaitez personnaliser et à en inscrire la redirection dans le fichier.htaccess.