Une fois que votre application sera en ligne, vous travaillerez parfois sur le site en développement pour tester vos fonctionnalités et parfois sur le site en production pour entrer de vraies données.
Dans un tel contexte, une erreur peut rapidement arriver, par exemple vous ajoutez des données détaillées sur le site en développement alors que vous pensez que vous êtes en production (quelle perte de temps...) ou, pire encore, vous supprimez des données en croyant être sur le site en développement alors que vous êtes en production. Ouch !
Pour éviter de telles erreurs, je vous proppose deux ajustements visuels qui vous avertiront que vous êtes sur le site en développement :
L'URL du site en production pourra être lu à différents endroits selon vos préférences :
Personnellement, j'aime travailler avec une table de configuration. Mais pour les besoins de la cause, je vais coder l'URL en dur ici.
Pour griser le favicon, nous allons travailler avec un outil en ligne : https://www.befunky.com/create/.
Décompressez le fichier .zip qui contient les fichiers pour votre favicon grisé. Placez ces fichiers dans un sous-dossier de public. Dans cet exemple, je les ai placés dans un sous-dossier nommé sitetest.
Ouvrez maintenant le gabarit que vous utilisez dans votre application (app.blade.php) puis localisez l'endroit où le favicon est ajouté au site.
Modifiez le code pour qu'il affiche l'une ou l'autre des séries de fichiers selon que vous êtes en développement ou en production. Notez que vos données seront différentes de cet extrait, notamment pour le nom de domaine et pour les codes de couleurs à utiliser.
@if (parse_url(url('/'), PHP_URL_HOST) == 'mondomaine.com')
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon-16x16.png') }}">
<link rel="manifest" href="{{ asset('site.webmanifest') }}">
<link rel="mask-icon" href="{{ asset('safari-pinned-tab.svg" color="#5bbad5') }}">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
@else
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('sitetest/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('sitetest/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('sitetest/favicon-16x16.png') }}">
<link rel="manifest" href="{{ asset('sitetest/site.webmanifest') }}">
<link rel="mask-icon" href="{{ asset('sitetest/safari-pinned-tab.svg') }}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
@endif
Pour compléter le tout, voici comment ajouter un message d'avertissement, toujours en modifiant le gabarit.
@if (parse_url(url('/'), PHP_URL_HOST) != 'mondomaine.com')
<div class="messageserveurdev">
Attention : Vous êtes présentement sur une ancienne version du site (...) hébergée sur un serveur de développement. Pour accéder à la bonne version, rendez-vous à cette adresse : <a href="https://mondomaine.com">https://mondomaine.com</a>.
</div>
@endif
Avec un peu de CSS pour styliser le message, nous obtenons le visuel souhaité :
▼Publicité
