Aller au menu - Aller au contenu

Icône Page d'erreur perso

Par Avatar Kakyokuu
Mise à jour : 07/12/2009
Difficulté : Facile Facile Creative Commons BY-NC-SA
123 visites depuis 7 jours, classé 524/795
Vous en avez marre de voir les pages habituelles de Mozilla Firefox ? Opera ? Ou encore… Internet Explorer ? :-°
404 Not Found ? 500 Internal error ?
Grâce à ce tutoriel, vous pourrez personnaliser ces pages !

Cela risque cependant de ne pas fonctionner sur certains hébergeurs : si c'est le cas, faites-le-moi savoir.
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Explications

Je vais vous expliquer ici comment créer une page d'erreur personnalisée, comme celle du Site du Zéro.
Rendez-vous par exemple sur http://www.siteduzero.com/dkljd : ça va vous afficher une erreur 404. Ou quand le site est saturé, c'est une erreur 500.
C'est un truc assez court, mais bien pratique !

Matériel nécessaire :
  • des ciseaux ;
  • un crayon ;
  • de la colle ;
  • une gomme ;
  • un hébergeur acceptant le PHP et les .htaccess.

Créez maintenant un fichier .htaccess que vous placerez à la racine de votre site, et insérez-y ceci (en remplaçant bien sûr « http://www.siteduzero.com » par l'adresse de votre site web) :

Code : Apache
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ErrorDocument 400 http://www.siteduzero.com/400.php
ErrorDocument 401 http://www.siteduzero.com/401.php
ErrorDocument 402 http://www.siteduzero.com/402.php
ErrorDocument 403 http://www.siteduzero.com/403.php
ErrorDocument 404 http://www.siteduzero.com/404.php
ErrorDocument 405 http://www.siteduzero.com/405.php
ErrorDocument 500 http://www.siteduzero.com/500.php
ErrorDocument 501 http://www.siteduzero.com/501.php
ErrorDocument 502 http://www.siteduzero.com/502.php
ErrorDocument 503 http://www.siteduzero.com/503.php
ErrorDocument 504 http://www.siteduzero.com/504.php
ErrorDocument 505 http://www.siteduzero.com/505.php

Mettez les liens en absolu pour l'instant, nous allons voir dans quel cas les utiliser en relatif.

C'est bien beau, les 400, 401, 402, 403, 404, 500… mais ça veut dire quoi ?

  • 400 : échec de l'analyse HTTP.
  • 401 : mauvais pseudo ou mot de passe dans le .htaccess.
  • 402 : le client doit reformuler sa demande avec les bonnes données de paiement.
  • 403 : requête interdite.
  • 404 : page non trouvée.
  • 405 : méthode non autorisée.
  • 500 : erreur interne au serveur ou serveur saturé.
  • 501 : le serveur ne supporte pas le service demandé.
  • 502 : mauvaise passerelle.
  • 503 : service indisponible.
  • 504 : trop de temps à la réponse.
  • 505 : version HTTP non supportée.

Maintenant, vous devez vous dire : « Je mets quoi dans 401.php ?… »

Vous y mettez ce que vous voulez.
Exemple pour 401.php : « Vous avez entré un mauvais pseudo ou mot de passe. »
Exemple pour 404.php : « Page non trouvée. »
Vous l'avez compris, les erreurs 400 sont des erreurs du client, et les 500 des erreurs du serveur ; je vous laisse mettre tout ça en forme ! :-°

Le problème, c'est que ça va renvoyer vers une autre erreur : l'erreur 200 (page qui s'est correctement chargée). Je ne sais donc pas si on peut l'appeler une « erreur ».

Ainsi, avec les sites de référencement ayant un robot, comme Google ou MSN Search, il y a un léger problème : le moteur de recherche n'est pas en mesure de distinguer si la page est une page d'erreur ou non. Il affichera alors des liens vers des pages d'erreur lors d'une recherche.

Code : Apache
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ErrorDocument 400 /400.php
ErrorDocument 401 /401.php
ErrorDocument 402 /402.php
ErrorDocument 403 /403.php
ErrorDocument 404 /404.php
ErrorDocument 405 /405.php
ErrorDocument 500 /500.php
ErrorDocument 501 /501.php
ErrorDocument 502 /502.php
ErrorDocument 503 /503.php
ErrorDocument 504 /504.php
ErrorDocument 505 /505.php

Vous pouvez également écrire un petit message sans créer de nouvelle page, comme ceci :

Code : Apache
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ErrorDocument 400 "Échec de l'analyse HTTP."
ErrorDocument 401 "Mauvais pseudo ou mot de passe."
ErrorDocument 402 "Le client doit reformuler sa demande avec les bonnes données de paiement."
ErrorDocument 403 "…"
ErrorDocument 404 ""
ErrorDocument 405 ""
ErrorDocument 500 ""
ErrorDocument 501 ""
ErrorDocument 502 ""
ErrorDocument 503 ""
ErrorDocument 504 ""
ErrorDocument 505 ""

Vous l'aurez compris : vous devez inscrire le message d'erreur entre les guillemets.

Mais il est énervant de devoir créer une nouvelle page à chaque fois ! Eh bien, grâce à du PHP, vous pouvez n'en créer qu'une contenant toutes les erreurs ; regardez :

Code : Apache
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ErrorDocument 400 /erreur.php?erreur=400
ErrorDocument 401 /erreur.php?erreur=401
ErrorDocument 402 /erreur.php?erreur=402
ErrorDocument 403 /erreur.php?erreur=403
ErrorDocument 404 /erreur.php?erreur=404
ErrorDocument 405 /erreur.php?erreur=405
ErrorDocument 500 /erreur.php?erreur=500
ErrorDocument 501 /erreur.php?erreur=501
ErrorDocument 502 /erreur.php?erreur=502
ErrorDocument 503 /erreur.php?erreur=503
ErrorDocument 504 /erreur.php?erreur=504
ErrorDocument 505 /erreur.php?erreur=505

On va ensuite savoir quelle erreur afficher dans la page erreur.php grâce à la valeur du GET erreur.

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
switch($_GET['erreur'])
{
   case '400':
   echo 'Échec de l\'analyse HTTP.';
   break;
   case '401':
   echo 'Le pseudo ou le mot de passe n\'est pas correct !';
   break;
   case '402':
   echo 'Le client doit reformuler sa demande avec les bonnes données de paiement.';
   break;
   case '403':
   echo 'Requête interdite !';
   break;
   case '404':
   echo 'La page n\'existe pas ou plus !';
   break;
   case '405':
   echo 'Méthode non autorisée.';
   break;
   case '500':
   echo 'Erreur interne au serveur ou serveur saturé.';
   break;
   case '501':
   echo 'Le serveur ne supporte pas le service demandé.';
   break;
   case '502':
   echo 'Mauvaise passerelle.';
   break;
   case '503':
   echo ' Service indisponible.';
   break;
   case '504':
   echo 'Trop de temps à la réponse.';
   break;
   case '505':
   echo 'Version HTTP non supportée.';
   break;
   default:
   echo 'Erreur !';
}
?>
Retour en haut

S'assurer que les robots ne viendront pas

Comme je l'ai dit plus haut, il y a un risque que vos pages d'erreur soient référencées dans les moteurs de recherche, nous allons donc leur interdire l'accès.

Méthode



Nous allons implanter un fichier robots.txt à la racine de notre site.
Il aura pour but d'indiquer à tel ou tel robot de ne pas visionner telle ou telle page.

Voici comment se présente ce fichier :

Code : Autre - robots.txt
1
2

User-Agent: 
Disallow:

À la suite de User-Agent, vous inscrirez la liste des robots dont vous souhaitez interdire l'accès. Nous allons toutefois utiliser ici l'étoile (*), qui va interdire l'accès à tous les robots.
Et après Disallow, vous indiquerez la liste des pages à bloquer, les unes après les autres, en réécrivant « Disallow » pour chaque page :

Code : Autre - robots.txt
1
2
3
4
5

User-Agent: *
Disallow: /400.php
Disallow: /401.php
Disallow: /402.php
Disallow: /403.php

Stop ! Je ne vais pas toutes les mettre alors qu'il existe une trentaine d'erreurs, si ?

Non, vous pouvez interdire l'accès à tout un dossier. Je vous conseille donc vivement d'enregistrer ces pages dans un dossier à part et de ne pas oublier de changer l'URI ou l'URL (c’est-à-dire l'adresse) que vous avez mise dans le fichier .htaccess.
Pour interdire l'accès à un dossier, pas de mystère, cela se passe comme pour les fichiers.

Code : Autre - robots.txt
1
2

User-Agent: *
Disallow: /nom_du_dossier_ou_se_trouvent_les_erreurs/

C'est tout de suite plus lisible, n'est-ce pas ?
Retour en haut

Annexes

Ces annexes vont vous permettre de comprendre quelques petites choses qui auraient pu être incomprises ou mal comprises.

Annexe 1 : racine du site



Explication


La racine du site est la base de la hiérarchie de votre site, c'est là où le visiteur arrive lorsqu'il entre l'adresse du site dans la barre d'adresse de son navigateur (ce qui suppose qu'il n'y ait au préalable aucune redirection).

Exemples d'arborescences



Si vous possédez un hébergement mutualisé, vous n'aurez accès qu'à une partie restreinte du serveur. Par exemple, sous Linux, vous pourriez avoir accès à la partie /home/www/heberg_id_674123/.
Seule la partie après heberg_id_674123 vous sera visible, aucun accès ne vous sera autorisé dans un dossier parent.

Les hébergeurs ont plusieurs solutions : soit il mettent le dossier heberg_id_674123 comme dossier racine du site, soit ils vont vous permettre de ne pas mettre de fichier dans la partie publique mais dans une partie privée.

Exemples :

/home/www/ [...]
................/heberg_id_674121/[...]
................/heberg_id_674122/[...]
................/heberg_id_674123/private
................................./public ← Racine du site

/home/www/ [...]
................/heberg_id_674121/[...]
................/heberg_id_674122/[...]
................/heberg_id_674123/
................................./www ← Racine du site

/home/www/ [...]
................/heberg_id_674121/[...]
................/heberg_id_674122/[...]
................/heberg_id_674123/ ← Racine du site

Annexe 2 : robots.txt



Le fichier robots.txt est un fichier présent à la racine du site qui contient des règles pour les robots (de Google, Yahoo, etc.) qui viendraient sur votre site. Ce fichier est vérifié et respecté par tous les robots dignes de ce nom (donc les plus connus), mais beaucoup ne respectent pas ces règles, voire ne les lisent même pas. Ne vous faites donc pas trop d'illusions concernant ce fichier : c'est respecté par une petite poignée de robots, mais pas par tous.
Retour en haut
Et voilà : ce n'est pas plus beau ainsi ?

Bien entendu, vous pouvez créer votre propre mise en page, avec du CSS par exemple ! Mais bon… que ça ne devienne pas une usine à gaz. :-°

Merci à tous les Zéros pour l'aide et le soutien qu'ils m'ont apportés dans l'élaboration de ce tutoriel.

Veuillez s'il vous plaît me signaler tout problème par MP.
Retour en haut

Partager

Retour en haut
132 commentaires pour "Page d'erreur perso"
Note moyenne : 3.56 / 4 (27 votes)
Pseudo Commentaire
Hors ligne lilian59480 # Posté le 14/01/2011 à 08:05:39
Attention...
Avatar

Avis : Très bon

Ville : La bassée
Pays : France métropolitaine

 Très bon tutoriel :)
Ça change des erreur de IE
La note: 19/20
2^{2011}=2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times2\times...=?
 
Hors ligne louisboss # Posté le 02/03/2011 à 14:59:48
Chrome VS Firefox

Avis : Très bon

Super tuto mais sur les serveur SFR sa marche pas :(


EDIT: En fait sa marche sur SFR c'etait juste un probleme car j'ai mal paramété
Hors ligne Lymk # Posté le 07/07/2011 à 13:09:29
Avatar

 Bonjour à tous!!!

Un très très bon tuto simple et efficace :)

Le seul hic est que pour ma part l'utilisation du code ci dessous ne fonctionnait pas (je suis sous free, je ne sais pas si ca vient de là ou pas...)

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ErrorDocument 400 /erreur.php?erreur=400
ErrorDocument 401 /erreur.php?erreur=401
ErrorDocument 402 /erreur.php?erreur=402
ErrorDocument 403 /erreur.php?erreur=403
ErrorDocument 404 /erreur.php?erreur=404
ErrorDocument 405 /erreur.php?erreur=405
ErrorDocument 500 /erreur.php?erreur=500
ErrorDocument 501 /erreur.php?erreur=501
ErrorDocument 502 /erreur.php?erreur=502
ErrorDocument 503 /erreur.php?erreur=503
ErrorDocument 504 /erreur.php?erreur=504
ErrorDocument 505 /erreur.php?erreur=505


Ca me mettait directement l'erreur free sans aller à ma page erreur... (oui j'ai bien vérifier les bons chemins etc...)

Donc j'ai trouvé une alternative et je pense qu'elle peut être utile si vous avez le même soucis que moi :

Code : PHP
1
ErrorDocument 404 "<meta http-equiv='Refresh' content='0;URL=./erreurs/erreur.php?erreur=404'>


Ainsi, on peut mettre du php dans le texte d'erreur et donc la balise meta de redirection! :p

Maintenant est-ce autorisé d'utiliser cette méthode? quels sont les inconvénients? Je ne sais pas et je compte sur ceux plus expérimentés que moi pour répondre à ces questions :-°

J'espère avoir ajouté une petit plus, sinon tant pis j'aurais essayé :pirate:
Rien n'est impossible tant qu'on abandonne pas ! (WILD ARM 5)

!!!^_^!!!
 
Hors ligne Kabidan # Posté le 21/11/2011 à 23:38:37
Avatar

 Bonjour
Merci pour ce bon tuto. Ca marche sauf lorsqu'on ajoute un répertoire fictif dans l'Url du type :

www.monsite.com/index.php/n'importe quoi

A ce moment là, ça recharge ma page sans la css.
Quelqu'un a une idée ?
Hors ligne zérOnet # Posté le 27/01/2012 à 23:01:04
Debian, Live young
Avatar

Avis : Très bon

J'avait déjà vu cette astuce sur un autre site, mais bon, c'est toujours bien de l'avoir sur le sdz.
PS: Si cela intéresse quelqu’un, ça marche très bien chez OVH.
  • Seul le geek comprend pourquoi la peugeot 404 n'existe pas
  • Tout le monde sait que si l'on passe un DVD de Windows à l'envers, on entend des chants sataniques...
    Mais il y a pire : si on le passe à l'endroit, ça installe windows !!


 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.