[TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Vous créez ou partagez un tutorial, postez-le ici !
Répondre
Avatar du membre
Ghostfly
Administrateur
Administrateur
Messages : 1241
Enregistré le : 10 oct. 2009 13:11
Localisation : Localhost

[TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Ghostfly » 22 nov. 2016 00:03

Plutôt que de créer un tuto traitant d'un formulaire de contact, j'ai préféré vous faire une petite compilation (non exhaustive bien sûr) de différentes astuces et bonnes pratiques.. Et d'un formulaire de contact complet.

J'éditerai ce message au fur et à mesure de vos demandes ! Le code ci-dessous est volontairement très simple ;)

Donc, pour commencer cette série en beauté et ne pas déprimer les quelques développeurs du site qui savent déjà faire un formulaire :

Bonnes pratiques :
HTML :
On sépare au maximum son CSS de son HTML.
On veille toujours à respecter un minimum les validations (Vous n'êtes pas seuls sur le web)
On pense aux aveugles et à l'accessibilité (Madame michu ne comprendra pas forcément comme vous)
Les scripts sont à la FIN du body (donc juste avant la fermeture) pour éviter de bloquer le rendu de la page
Les CSS sont mis à la fin du body avec un chemin critique défini afin d'optimiser le rendu sur les mobiles

CSS:
Utilisation des pré-processeurs très recommandée
Utilisation des normes BEM (Block Element Modifier), ou autre, mais on reste constant !
On laisse les identifiants au Javascript ! Les classes sont là pour tout le reste.
On fait du Mobile First ! (Les mobiles représentent 80% de vos visiteurs !)
Rien n'est impossible ! Vous avez juste à repenser toutes vos positions ^^

JS
On évite au maximum les "repaint" et "reflows", donc on déclare une variable plutôt que de refaire 3 fois le même traitement.
jQuery n'est pas la solution pour tout, si vous avez 2 animations à faire, préférez lui le Javascript.

Quelques outils géniaux :
Des blogs utiles ?
  • FrontEndFront : Des news à propos du front-end recense un paquet de sources
  • Codrops : Un blog génial proposant des tutoriaux front
  • Alsacreations : Blog front axé HTML/CSS standards
  • Grafikart : Des tutoriaux / formations géniales accessibles à tous
Lectures indispensables : Des ressources gratuites ?
  • Pexels : Collection d'images gratuites (utilisables dans les projets en créditant ou non)
  • Pond5 : Collection d'images, vidéos, photos gratuites
  • Fribbble : Site qui recense l'ensemble des freebies de Dribbble
  • Behance : Réseau social de designers, une intarissable source d'inspiration (tout comme Dribbble)
Écrire du CSS plus rapidement et simplement ?
Les pré-processeurs tels que SASS, LESS ou Stylus sont là pour vous aider ! Ils utilisent une syntaxe directement dérivée de CSS, en ajoutant des fonctions géniales, comme les variables ou fonctions (appelées Mixins)
C'est un vrai bonheur, les essayer c'est adopter ! Combiné à des outils de task-running comme Gulp ou Grunt, vous allez développer à la vitesse éclair :lol:

Un formulaire avec validation Javascript ?
JS pur, sans jQuery ou autre, un petit PHP pour envoyer l'email et appel Ajax

Rendu : Formulaire de contact avec validation sur Codepen

Téléchargement :

Code : Tout sélectionner

TWL2.376E6B476247557945516348556167544B65433D23364148427771617556 4D66335B48744451303649453E6123453A403656525461232F2A7E6E2167656D6 F2F2A33707474786
Archive zippée prête à l'emploi (nécessite un peu de style tout de même)
Adresse mail à changer en haut du fichier send.php (remplacer les valeurs de test)
** Pour les questions => Bouton répondre ou MP **

Un formulaire de contact moderne (sans validation ni AJAX, voir plus haut si besoin) ?

Prenons ce formulaire pour exemple :
http://codepen.io/erlenmasson/pen/azVZXQ

Son rendu est le suivant :
Image

En bas de CodePen, vous pouvez exporter les sources en .zip, ce qui va vous donner un dossier contenant un fichier index.html, un dossier js, et un dossier css.
Maintenant rapprochons nous un instant du code HTML propre au formulaire :

Code : Tout sélectionner

<form id="contact-form">
  <p>Dear Erlen,</p>
  <p>My
    <label for="your-name">name</label> is
    <input type="text" name="your-name" id="your-name" minlength="3" placeholder="(your name here)" required> and</p>
    <!-- Un input de type text, qui est le nom de notre utilisateur -->

  <p>my
    <label for="email">email address</label> is
    <input type="email" name="your-email" id="email" placeholder="(your email address)" required>
    <!-- Un Input de type email -->
  </p>

  <p> I have a
    <label for="your-message">message</label> for you,</p>

  <p>
    <!-- Textarea (une zone de texte plus grande qu'un input et réglable) -->
    <textarea name="your-message" id="your-message" placeholder="(your msg here)" class="expanding" required></textarea>
  </p>
  <p>
    <button type="submit">
      <!-- SVG du bouton d'envoi -->
      <svg version="1.1" class="send-icn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="36px" viewBox="0 0 100 36" enable-background="new 0 0 100 36" xml:space="preserve">
        <path d="M100,0L100,0 M23.8,7.1L100,0L40.9,36l-4.7-7.5L22,34.8l-4-11L0,30.5L16.4,8.7l5.4,15L23,7L23.8,7.1z M16.8,20.4l-1.5-4.3
	l-5.1,6.7L16.8,20.4z M34.4,25.4l-8.1-13.1L25,29.6L34.4,25.4z M35.2,13.2l8.1,13.1L70,9.9L35.2,13.2z" />
      </svg>
      <small>send</small>
    </button>
  </p>
</form>
Imaginons que nous voulons rendre ce formulaire dynamique, càd, qu'il envoie les mails, ou renvoie une erreur si l'envoi a échoué.

Je vais pour cet exemple utiliser le langage PHP, étant le plus répandu.
On va commencer par déterminer comment nous voulons que les utilisateurs envoient le formulaire, pour cela il existe deux types de méthodes.

Le GET, et le POST

Le GET est une méthode directement affichée dans l'URL, imaginons que le formulaire soit dans une page appelée contact.php, le formulaire soumis, nous aurions, pour le cas de ce formulaire à peu près cette sortie :

contact.php?your-name=monnom&your-email=contact@monmail.fr&your-message=monmessage

En gros, le GET transmet "en clair" les informations, donc dans la barre d'adresse de l'utilisateur.

Maintenant passons à l'autre méthode :

Le POST est une méthode de soumission masquée à l'utilisateur. Elle est donc bien plus indiquée dans la majorité des cas, sauf besoin particulier de modifier via l'URL.
C'est cette méthode que je détaillerais au long de ce tutoriel.

Bon, maintenant, nous avons une page html statique, des feuilles de style, et toi tu nous expliques des méthodes obscures ? Non, ne pensez pas que je manque de sommeil, les formulaires sont intimement lié à ces notions.

Reprenons donc le code du formulaire cité plus haut, plus précisément, la première ligne :

Code : Tout sélectionner

<form id="contact-form">
On voit que dans ce cas précis (le formulaire n'étant pas codé niveau back), le designer n'a pas jugé utile de préciser la méthode.

Modifions cette ligne par :

Code : Tout sélectionner

<form id="contact-form" method="POST">
Et notre formulaire est maintenant en mode POST (par défaut, le mode est GET, mais veillez à le préciser dans une optique de clarté, ça ne coûte pas plus cher..)

Ajoutons maintenant un nouvel attribut à cette même ligne, j'ai nommé action :

Code : Tout sélectionner

<form id="contact-form" action="traitement.php" method="POST">
L'ajout de cette action, va en fait demander au formulaire de poster ces informations non pas sur la page courante (par défaut si non précisé), mais de les envoyer à la page intitulée "traitement.php".

Pour cela, avant, un micro rappel du langage PHP afin de faciliter la compréhension du code suivant :
  • On commence toujours avec <?php au début (fermeture facultative)
  • && permet de faire des conditions de type ET logique, || permet de faire des conditions OU logique.
  • \n est un caractère permettant de retourner à la ligne.
  • empty() ou isset() sont des fonctions statiques, isset($maVariable) permet de vérifier si la variable est définie, empty($mavariable) si la variable est vide.
  • Un point d'exclamation (!) permet d'inverser une condition.
  • mail() prend plusieurs paramètres, donc mail($votreMail, $sujet, $message, $headers)
  • echo $maVariable permet d'afficher le contenu de $maVariable.
Commençons par coder cette page de traitement, ouvrez le dossier extrait de Codepen dans votre éditeur préféré, et c'est parti pour quelques lignes (rien de méchant, c'est promis).

Pour cela, commencez par créer un fichier "traitement.php" (ou ce que vous voulez) puis collez ce code :

Code : Tout sélectionner

<?php

/* On vérifie si le formulaire a été posté, et si tous les champs sont remplis */
if(isset($_POST['your-name']) && isset($_POST['your-email']) && isset($_POST['your-message'])){
  /* On vérifie si les champs ne sont pas vides (le point d'exclamation !) inverse la condition, donc si différent de vide */
  if(!empty($_POST['your-name']) && !empty($_POST['your-email']) && !empty($_POST['your-message'])){
    /* Les valeurs ne sont pas vides, on peut envoyer le mail */
    /* On prépare le message => */
    $message = "Un mail a été envoyé depuis le formulaire sur le site internet\n
                Le nom de l'émétteur est :".$_POST['your-name']."\n
                Son e-mail est : ".$_POST['your-email']."\n
                Le contenu du message est :".$_POST['your-message']."\n";
    /* et on envoie avec la fonction mail() de PHP */
    if(mail('monemail@monmail.com', "Contact depuis le site internet", $message)){
     /* Portion à améliorer */
      echo "Le mail a été envoyé avec succès";
    } else {
      /* Une erreur s'est produite pendant l'envoi (mail renvoie un booléen FALSE en cas d'erreur)
      echo "Une erreur est survenue";
    }
  } else {
   /* Si on a pas passé le !empty, donc que l'un des info soumise est vide */
    echo "Vérifiez votre saisie";
  }
} else {
  /* Les champs ne sont pas tous remplis, on renvoie une erreur à l'utilisateur */
  echo "Vérifiez votre saisie";
}
Pour récupérer les informations passées en POST, on utilise le variable superglobale PHP : $_POST['monchamp'], où monchamp est le "name" de l'input (quel que soit son type) donc :

<input type="text" name="your-name" id="your-name" minlength="3" placeholder="(your name here)" required>

Le code est commenté pour la majorité des actions, n'oubliez pas de modifier cette ligne afin de rediriger les mails vers votre adresse :

if(mail('monemail@monmail.com', "Contact depuis le site internet", $message)){

Ce code est volontairement très simple (mais parfaitement fonctionnel) afin de vous donner l'envie d'aller régler les différents problèmes d'apparence, retour par vous même. Si vous voulez des précisions, n'hésitez pas à m'envoyer un MP et je vous répondrais directement !

J'envisage d'expliquer comment faire le formulaire en utilisant AJAX (histoire de pouvoir avoir un rendu fluide).. A voir vos retours !

Protéger rapidement un site avec un .htaccess (& un .htpasswd)

On va tout d'abord créer un fichier .htaccess avec ce contenu à la racine du dossier à protéger
AuthName "Protected"
AuthType Basic
AuthUserFile "/var/www/.htpasswd"
Require valid-user
Donc jusqu'à là rien de bien compliqué :
- on a un AuthName "Protected" donc le formulaire dira "Protected"
- AuthType Basic : le type d'auth
- AuthUserFile : Fichier contenant les users/mdp (cryptés), il s'agit d'un chemin ABSOLU. Par exemple sur un Linux basique avec un LAMP installé, le dossier est le plus souvent /var/www/votresite/votredirectory
- Require valid-user : si l'utilisateur n'est pas identifié, il se prend un forbidden

On continue par la création d'un .htpasswd, créez ce fichier où vous voulez, l'essentiel étant que le chemin absolu soit correct.
Le contenu ?
test:$apr1$jvitcbaz$0ys8Lfchvy360Dworhxwt.
ghostfly:$apr1$5GqaKZXe$V1ovKhkeiXP/2q72me1lt0
Soit test:testeur (car on crypte le mdp), pour cela, je vous recommande l'utilisation d'un générateur online : Générateur HTPasswd

Ensuite, copiez la sortie du générateur directement dans le fichier, si vous voulez plusieurs utilisateurs, ajoutez une seconde ligne, comme je l'ai fait ;)

Envoyez les deux fichiers sur votre serveur Web, faites un F5 sur la page, et vous voilà protégé, en sachant que ce type d'authentification peut se bruteforce si le serveur n'est pas correctement configuré. Donc pensez toujours à le combiner avec Fail2Ban au minimum, et à choisir des mots de passes (très) aléatoires.
Vous pouvez sur certains générateurs changer d'algorithme de cryptage, vérifiez avant qu'il est bien supporté par votre version d'Apache / Nginx ;)

A bientôt sur le forum et bon code !

Mis à jour le 09/12 : Ajout formulaire contact avec validation
Image

Avatar du membre
Calimero
Habitué
Habitué
Messages : 256
Enregistré le : 21 nov. 2012 12:10
Localisation : Chti 59

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Calimero » 22 nov. 2016 21:14

Bonsoir,

Tutoriel intéressant, à suivre.

Avatar du membre
Raphael
Ultra VIP
Ultra VIP
Messages : 1663
Enregistré le : 10 août 2015 13:09

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Raphael » 23 nov. 2016 16:47

Dans la foulée, un petit tuto pour fabriquer un HTAcces?

Pour ceux qui souhaitent protéger l'administration de leur site de manière basique mais correcte. ;)
Les Tutos du Forum | Bookthèque + Formathèque |

Marty
Petit Nouveau
Petit Nouveau
Messages : 38
Enregistré le : 06 juil. 2013 18:19

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Marty » 23 nov. 2016 17:29

Merci Ghostfly
Beau et bon tutoriel qui touche un peu à tout, je vais bien le lire et ensuite je posterai sans doute quelques questions, il faut d’abord que j’intègre tout ce que tu as développé.
Un de mes problèmes, c’est de savoir comment faire pour envoyer en une seule fois un formulaire à deux ou trois personnes différentes.

En effet parfois il est nécessaire d’envoyer un formulaire à un patron de société par exemple, mais aussi au responsable du secrétariat, et même parfois aussi au responsable d’une autre agence du groupe.

Super initiative de ta part que ce tutoriel. :lol:

Marty.

Avatar du membre
Ghostfly
Administrateur
Administrateur
Messages : 1241
Enregistré le : 10 oct. 2009 13:11
Localisation : Localhost

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Ghostfly » 24 nov. 2016 09:14

Très simple, il suffit de rajouter à l'appel de mail() les adresses de cette façon :
On déclare une variable destinataires :
$destinataires = "monmail1@mail.com,monmail2@mail.com,mail3@mail.com"; // Donc chaque adresse, séparée par une virgule

et ensuite on reprend le mail() de :
if(mail('monemail@monmail.com', "Contact depuis le site internet", $message)){

à :
if(mail($destinataires, "Contact depuis le site internet", $message)){

On aurait pu aussi faire : (mais moins lisible)

if(mail('monemail@monmail.com, mail2@mail.com,mail3@mail.com', "Contact depuis le site internet", $message)){

Et hop ;)

N'oubliez pas que dans la majorité des cas, une simple recherche Google ou La doc PHP sur mail() suffisent à régler les problèmes !
Image

Marty
Petit Nouveau
Petit Nouveau
Messages : 38
Enregistré le : 06 juil. 2013 18:19

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Marty » 24 nov. 2016 10:28

Ghostfly a écrit :Très simple, il suffit de rajouter à l'appel de mail() les adresses de cette façon :
On déclare une variable destinataires :
$destinataires = "monmail1@mail.com,monmail2@mail.com,mail3@mail.com"; // Donc chaque adresse, séparée par une virgule

et ensuite on reprend le mail() de :
if(mail('monemail@monmail.com', "Contact depuis le site internet", $message)){

à :
if(mail($destinataires, "Contact depuis le site internet", $message)){
Merci pour ce bout de code effectivement très simple, je cherchais les complications comme ci dessous

$config["email_de_contact"] = 'f_vandexxxx@hotmail.com';
$config["email_de_contact_2"] = 'guy.leurxxxx@skynet.be';

Merci encore :lol:
Marty

Avatar du membre
Ghostfly
Administrateur
Administrateur
Messages : 1241
Enregistré le : 10 oct. 2009 13:11
Localisation : Localhost

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Ghostfly » 24 nov. 2016 18:38

Raphael a écrit :Dans la foulée, un petit tuto pour fabriquer un HTAcces?

Pour ceux qui souhaitent protéger l'administration de leur site de manière basique mais correcte. ;)
Une sécurisation par htaccess peut se révéler dangereuse.. si mal réalisée, et ça peut se bypass par quelques subterfuges (Owasp Testing for Bruteforce)

Après, pour le temps que ça prend, j'édite mon message dans la soirée en l'ajoutant ;) ajouté au post principal
Mais rien ne vaut un vrai formulaire de connexion, correctement codé et pour ce genre de choses, mieux vaut éviter de réinventer la roue. Sauf expert en sécurisation (on sait jamais :d )

@Marty :
Tu aurais pu aussi en faisant :
$destinataires = $config["email_de_contact"] . "," . $config["email_de_contact2"];
// Le . permet de concaténer les chaines, donc on concatène les deux, et on ajoute une petite virgule au milieu comme ça mail est content ;)

Mais utiliser un tableau associatif pour ça, je trouve ça overkill, genre complètement ;)

Quand aux noms de tes variables.. Franchement évite ce genre de trucs, reste simple !

Du style :
$config (ce nom peut prêter à confusion sur un code plus évolué) => $adresses ou $destinataires

Quand à ton index du tableau, n'oublie pas que tu peux aussi faire un :
$destinataires[0] = "test@mail.com";
$destinataires[1] = "test2@mail.com";
Et ensuite les concaténer de la même façon que plus haut ;)

Ce qui permet d'éviter de se taper 3 mots.. Et mine de rien, on y gagne en lisibilité !
Image

Marty
Petit Nouveau
Petit Nouveau
Messages : 38
Enregistré le : 06 juil. 2013 18:19

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Marty » 25 nov. 2016 15:28

@Ghostfly

Merci pour ce complément bien utile, mais quand tu dis :

Quand aux noms de tes variables.. Franchement évite ce genre de trucs, reste simple !

Ben on reproche tellement aux apprentis (en entreprise et aux cours de formation développeurs) leur manque de « SEMANTIQUE », j’ai voulu essayer que mon code le soit…

Mais tu as raison ces variables ne le sont pas tellement, par contre le tableau associatif ne me paraissait pas illogique, mais d'accord pour les indices les miens ne sont pas corrects.

Avatar du membre
Ghostfly
Administrateur
Administrateur
Messages : 1241
Enregistré le : 10 oct. 2009 13:11
Localisation : Localhost

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Ghostfly » 25 nov. 2016 18:36

C'est surtout les indices que je critiquais en somme, et comme déjà dit, ce n'est en aucun cas invalide, mais un peu chiant à lire (et écrire).. Après c'est clair hein, mais .. Moche quoi.. Va au plus simple ;) Sinon oui, l'idée du tableau n'est pas dénuée d'intérêt, mais bon si t'as que deux mails à gérer.. Autant les écrire ensemble ^^

Manque de sémantique.. Bof. Travaillant sur des projets en entreprise (sauf très grosses boites, et encore, ça dépend lesquelles), je peux te dire que les variables sont au choix du développeur, (en suivant les pratiques de l'entreprise bien sûr).
Je rappelle la définition, à tout hasard (trouvée sur Google, premier résultat) :
Apprendre PHP a écrit :Une sémantique (un sens) après les opérations effectuées sur cette variable. Plus concrètement, la valeur de la variable est-elle logique par rapport à son contexte initial ?
L'essentiel c'est que le nom de la variable reflète simplement, et rapidement sur quoi tu agis/ ce que tu fais, et de rester constant sur ton nommage.
(Pour t'y retrouver, mais surtout en cas de collaboration, pour ne pas perdre les autres développeurs, mais aussi toi, si tu te remets à travailler sur un projet 6 mois après par exemple ;) )

Si tu cherches à aller plus loin, suivant le langage que tu utilises, certaines normes et pratiques sont recommandées. (PHP the Right Way est ton ami, je l'ai mis dans le premier Post, c'est très bien écrit, et ça va t'en apprendre beaucoup, surtout si le PHP t'intéresse.).

Sinon, tu as aussi PHPDoc, qui te permet de dire un peu plus précisément ce que fait une variable, exemple :
/**
* @var Categorie $categorie : Catégorie courante
*/
private $categorie;
ou encore une fonction :
/**
* Effectue une recherche au sein des articles (sur leur contenu)
* @param string $recherche
* @return array $art : Tab contenant les articles trouvés
*/
public function search($recherche){
$art = [];
...
return $art;
}
En attendant, si tu me trouve un prof de "développement" qui te demande de donner des noms d'indice pareil, merci de le frapper de ma part ;)
Image

Marty
Petit Nouveau
Petit Nouveau
Messages : 38
Enregistré le : 06 juil. 2013 18:19

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Marty » 27 nov. 2016 17:19

Oups Erreur désolé Thiweb

Avatar du membre
ThiWeb
Administrateur
Administrateur
Messages : 8238
Enregistré le : 09 oct. 2009 02:35
Localisation : On earth
Contact :

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par ThiWeb » 27 nov. 2016 17:37

@Marty : Si tu postes du code, mets le entre des balises CODE. ;)

ThiWeb
Image
Image

Avatar du membre
Ghostfly
Administrateur
Administrateur
Messages : 1241
Enregistré le : 10 oct. 2009 13:11
Localisation : Localhost

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Ghostfly » 27 nov. 2016 21:24

Pour tout envoi de bout de code, pensez à Pastebin/0bin les gars ! Épargnez mes yeux ^^

Sinon tout chaud, un formulaire de contact (HTML/CSS/JS) fait pour un utilisateur du forum : (JS Pur, pas de jQuery ou autre, et un petit PHP pour envoyer l'email)
Rendu : Formulaire de contact avec validation sur Codepen

Code : Tout sélectionner

TWL2.376E6B476247557945516348556167544B65433D23364148427771617556 4D66335B48744451303649453E6123453A403656525461232F2A7E6E2167656D6 F2F2A33707474786
Image

Avatar du membre
Jojo48
Nouveau
Nouveau
Messages : 56
Enregistré le : 22 avr. 2013 19:51

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Jojo48 » 23 déc. 2016 11:47

Merci Ghostfly pour ce tuto :d

J'ai fait plusieurs formulaires différents avec envois de mail,
que ce soit en direct ou avec PhpMailer,
et le principal problème, dans tous les cas, est la mise en spam des emails chez le réceptionniste :@
Il doit sûrement être possible de le faire sans tomber dans les indésirables, ...mais je n'ai pas trouvé la parade... :?:

Je suis preneur de toutes solutions 8) 8) 8)

Amitiés,
Jojo48
Image

Avatar du membre
Ghostfly
Administrateur
Administrateur
Messages : 1241
Enregistré le : 10 oct. 2009 13:11
Localisation : Localhost

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Ghostfly » 23 déc. 2016 11:51

Le problème viendrait pas plutôt du serveur ? Aucun soucis d'indésirables avec la fonction mail() en général, mais avec PHPMailer, tu devrais avoir encore moins de soucis..

Les mails sont placés en indésirables à cause de leur contenu, ou de leur expéditeur.. Si l'IP est mise sur une blacklist ça peut être très chiant
Donc essaye de peaufiner peut être le contenu, et de check si ton serveur n'est pas blacklist : http://mxtoolbox.com/blacklists.aspx
Image

Avatar du membre
Jojo48
Nouveau
Nouveau
Messages : 56
Enregistré le : 22 avr. 2013 19:51

Re: [TUTORIAL]Dev Web - Bonnes pratiques et bouts de codes

Message par Jojo48 » 23 déc. 2016 12:34

Effectivement, un serveur de mes serveurs est blacklisté
mais pas les autres...

Je vais continuer de creuser...

Merci pour l'adresse de vérif des blacklists

Amitiés,
Jojo48
Image

Avatar du membre
Ghostfly
Administrateur
Administrateur
Messages : 1241
Enregistré le : 10 oct. 2009 13:11
Localisation : Localhost

[TUTORIAL] Dev Web - Bonnes pratiques et bouts de codes

Message par Ghostfly » 03 mai 2017 03:40

Image

J'étais en train de faire mon nouveau portfolio quand m'est venue la fatidique question "Comment je vais traduire tout ça ?"

Vu qu'un portfolio est un site plutôt simple, j'ai codé un petit bout de JS qui se charge de tout traduire depuis un JSON, autant éviter d'utiliser Twig ou autre pour une tâche aussi simple

jsLang

Utilisation :
Définir ces variables dans le fichier jslang.js
Le mettre dans le répertoire du site, dans le dossier contenant vos autres fichiers javascript

Code : Tout sélectionner

var url = "https://www.myawesome.site/data/site-"; //  URL de votre site puis le répertoire / nom du fichier JSON sans langue ni extension
var defaultLang = "en"; // Langue par défaut
var switches = "#en, #fr"; // Boutons de changement de langue (sélecteurs CSS)
var siteTitle = "t-siteTitle"; // Nom de la clé référençant le nom du site dans le JSON
var elems = getVars('dfn'); // Sélecteur CSS (ici j'utilise le tag dfn, vu qu'il est quand même très peu utilisé, ça permet d'identifier plus vite)
Sur la page HTML, on remplace le texte statique par quelque chose de ce type (l'identifiant est la clé dans le JSON) :

Code : Tout sélectionner

<dfn id="t-siteTitle"></dfn>
<dfn id="t-slogan"></dfn>
Et un petit exemple du JSON qui va avec (à placer dans un répertoire data (par exemple) et un fichier par langue, exemple : site-fr.json, site-en.json )

Code : Tout sélectionner

{
  "t-siteTitle": "ThiWeb.com",
  "t-slogan": "Welcome to the human network"
}
Ensuite, ne vous reste plus qu'à intégrer jsLang la fin de votre body

Code : Tout sélectionner

<script async type="text/javascript" src="js/jslang.js"></script>
(En asynchrone pour la rapidité de la page ;) )

Et hop, un site traduit en quelques minutes (bon ça dépend de la taille, certes ^^ )

Si vous avez des idées d'améliorations / bugs / autres, vous pouvez me les remonter sur ce fil ou faire une issue / Pull request sur le repository ! ;)
Image

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité