Personnaliser les pages d'erreurs classiques (404, 403 etc.)

Statut
N'est pas ouverte pour d'autres réponses.

Rivals

Ancien staff
Inscription
27 Août 2016
Messages
1 705
Réactions
895
Points
13 104
404.png

PERSONNALISER LES PAGES D'ERREURS CLASSIQUES (404, 403 etc.)


Nous allons voir aujourd'hui comment personnaliser toutes nos pages d'erreurs classiques facilement sans avoir des connaissances avancées en programmation. ;)

[tabs]
[tab=Informations concernant ce tutoriel]▪ Temps de lecture : 15 minutes
Difficulté : 2 / 5
▪ Tutoriel proposé par Rivals
[/tab]
[/tabs]

- La page d'erreur 404 et les autres pages d'erreur ressemblent à ceci :

not-found.png

- Mais en suivant ce tutoriel vous pourrez opter pour de belles pages de ce style :

404-dayli.png

404-rg.png


Passons au tutoriel. :)

http://induste.com/images/ligne-rg.png

Pour personnaliser nos pages nous allons tout simplement utiliser le fichier .htaccess et lui indiquer une page que nous stockerons sur notre serveur FTP qui aura pour rôle d'être la page d'erreur.

CCM.net a dit:
Les fichiers .htaccess sont des fichiers de configuration d'Apache, permettant de définir des règles dans un répertoire et dans tous ses sous-répertoires (qui n'ont pas de tel fichier à l'intérieur). On peut les utiliser pour protéger un répertoire par mot de passe, ou pour changer le nom ou l'extension de la page index, ou encore pour interdire l'accès au répertoire.


▪ Tout d'abord si vous n'avez pas de fichier .htaccess présent sur votre serveur il va falloir en créer un, rien de plus simple : il suffit de créer un fichier .txt et de le renommer en .htaccess. Mais avant de le renommer nous allons y mettre des commandes (en l'occurrence celles-ci permettront à la page d'être utilisé comme page d'erreur).

Code:
ErrorDocument 404 /erreur404.html

Cette ligne de code permet d'associer la page "erreur404.html" à l'erreur 404 elle même. :nerd:

fichier.png
Vous n'avez donc plus qu'à dupliquer cette ligne pour toutes les autres erreurs que vous jugez utile de personnaliser.

    • 100 : OK pour continuer
    • 101 : le serveur a changé de protocoles
    • 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 document
    • 402 : accès au document soumis au paiement
    • 403 : pas d'autorisation d'accès au serveur
    • 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 server 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
    • 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

▪ Puis hébergez votre .htaccess sur votre serveur FTP, normalement le fichier devrait être caché, vous ne devriez plus le voir.

▪ La dernière étape sera de créer votre propre page "erreur404.html". :)

Un site a répertorier des pages d'erreur (404) de nombreux sites internet, je vous conseille de vous en inspirer. :p

Rivals
 
Dernière édition par un modérateur:

Lyrix

Student ✦ UX/UI Design
Ancien staff
Inscription
20 Août 2012
Messages
22 670
Réactions
8 150
Points
36 866
J'ai vite fait feuilleté pour le moment, très bon tutorial et présentation Mr.Rivals RGPC. ;)
 

FuLiiX

Co-Fondateur de la RMK.
Premium
Inscription
31 Mars 2013
Messages
3 260
Réactions
773
Points
3 521
Grace à toi, je vais m'amuser !
 

Djamel SEC

Ancien staff
Inscription
24 Août 2012
Messages
19 693
Réactions
10 387
Points
27 570
C'est assez fun à faire, puis c'est toujours plus jolie que celle de base. :D
 

Grégory

Développeur
Ancien staff
Inscription
14 Novembre 2011
Messages
2 798
Réactions
2 221
Points
25 358
Tutoriel très bien présenter, je vais en faire un aussi sur les htaccess :D
 

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 842
Réactions
3 146
Points
17 331
Tutoriel très connu mais pratique et bien présenté.
Je connaissais cette technique depuis bien longtemps, le .htaccess permet aussi de mettre des mots de passe. :)
 

Lckd

Uniti Viceremu... FORZA BASTIA !
Premium
Inscription
16 Juillet 2012
Messages
2 537
Réactions
879
Points
4 786
Très bon tuto merci <3
 

BEK.

Ancien staff
Inscription
25 Novembre 2011
Messages
10 785
Réactions
3 746
Points
29 505
Pas bête du tout, c'est sympa pour ceux qui veulent approfondir leur sites ;)
 

Assos Parisienne

Tu joue le gars stock mais t'es tout léger !
Premium
Inscription
27 Décembre 2013
Messages
3 939
Réactions
1 282
Points
19 126
Merci du tuto sa peut toujours servir :)
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut