Le formulaire dans le web est le moyen le plus utilisé pour transmettre et/ou interagir avec [les données] utilisateurs. Cependant, PHP étant un langage permissif, les débutants en ce langage commettent des graves erreurs quant au traitement et la validation de formulaire.

Même si on peut valider les données avec HTML5 sans JavaScript, Never trust user input reste toujours l’expression utilisée pour dire simplement qu’il faut toujours valider les données provenant des utilisateurs hormis les traiter. Si vous demandez un numéro de téléphone, vous devriez vous rassurer à 100% que la donnée fournie correspond ou est un numéro de téléphone avant de l’enregistrer ou l’utiliser.

La logique dans la validation d’un formulaire coté serveur  reste simple :

  1. Récupération des données utilisateur
  2. Vérification des données utilisateurs
  3. Si les données sont valides, on effectue l’opération prévue sur celles-ci
  4. Si non, on le renvoie dans la page de formulaire avec l’affichage des erreurs

La plus part du temps, ce qui rend difficile tout ce processus pour un développeur PHP débutant, c’est le manque d’une structure homogène et cohérente de validation de ses données.

Découvrons dans la suite comment traiter et valider proprement un formulaire avec PHP tout en se servant de la programmation défensive d’abord en scratch pour mieux comprendre comment ça marche et après je vous montrerai les librairies à utiliser pour gagner en productivité.

Exemple de guide

Pour ce tuto, nous allons valider un formulaire qu’on rencontre fréquemment sur la toile, le formulaire d’un commentaire. Celui-ci a comme champ :

  • Nom : Qui ne peut être vide, peut contenir des chiffres et des lettres mais pas caractères spéciaux et est obligatoire.
  • Email : Qui est obligatoire et doit correspondre à un email valide
  • Url : Qui est facultatif mais quand c’est renseigné, il doit correspondre à un url valide
  • Message : Qui ne peut être vide et est donc obligatoire

Pour chaque invalidité d’un champ, la cause de cette invalidité doit être mentionnée.

Formulaire en HTML

Je valide mon formulaire dans le même fichier que mon formulaire pour rester simple. Voici pour l’instant juste le formulaire

 

Rien de bien compliquer ici si ce n’est que l’utilisation de la fonction show_error() que je veux expliquer quand je veux la créer.

Traitement PHP

Je veux placer mon script PHP juste avant la déclaration de DOCTYPE. La logique de mon traitement est tout de même aussi simple. J’ai une variable de type array $errors que j’aurais à remplir avec comme clé, l’attribut name du champ et comme valeur, le message d’erreur à chaque fois qu’il y a erreur. (Je veux revenir)

D’abord je crée la fonction show_error() qu’on a vu précédemment qui prend comme argument la valeur de l’attribut name de chaque input. Cela me permet de récupérer directement le message d’erreur depuis la variable $errors et de l’afficher.

Ma fonction n’est pas si compliqué que ça, une condition ternaire pour ne rien afficher si la clé $key n’existe pas dans le tableau $errors

Après je commence la validation des données.

Rien de bien compliqué non plus ici, juste des simples conditions mais au passage, j’ai utilisé la fonction filter_var pour valider l’url et l’email et preg_match à travers une expression régulière.

Et au final, je peux savoir facilement si les données sont valides qu’en vérifiant si la variable $errors est vide et je peux effectuer l’opération prévue pour celles-ci.

[Télécharger le code complet]

Allez plus loin

La manière qu’on a procédée est très loin d’être plus mieux. Voici les améliorations possibles que vous pouvez faire

  • Pré emplir le formulaire en cas d’erreur avec les données précédemment entrée.
  • Respecter l’architecture MVC, en subdivisant le formulaire avec un Controller et une Vue. Et si l’opération à effectuer après validation est de stocker ces données dans la base de données, disposez aussi d’un modèle, un fichier où vous allez déclarer les fonctions qui vont exécuter toutes les requêtes SQL pour la table X, que vous auriez à appeler depuis le Controller

Utilisation des librairies

Si vous avez compris la logique de validation d’un formulaire, inutile de gaspiller beaucoup de temps à écrire les contraintes des données, la grande communauté de PHP a fait quasi tout ce qu’il faut pour valider rapidement et efficacement les données issues d’un formulaire à travers différentes librairies

GUMP

Gump est une librairie très pratique pour valider les données issues d’un formulaire. Il peut aussi être chargé via composer. Voici une utilisation très basique (notre exemple précédent)

VALITRON

Valitron est aussi une librairie de validation des données PHP qui a l’ère d’être très pratique aussi. En quelque ligne de code, vous validez beaucoup de données.

Finalement, chacun cultive sa manière de faire les choses, si vous n’avez pas encore une manière stricte de valider vos formulaire sans doute celle ci, mais si vous en avez déjà, faites le pour et le contre.

Composer est un outil écrit en PHP qui permet de gérer les dépendances d’un projet. Ce qu’il faut comprendre par dépendance, c’est toute librairie ou bibliothèque PHP qu’un projet en dépend.

Pour mieux comprendre une dépendance, je l’illustre pour le cas de HTML et CSS que j’en suis sûr tous ceux qui me lisent maitrisent mieux.

Vous voulez par exemple utiliser bootstrap pour designer votre site web, vous auriez besoin de bootstrap dans votre projet, donc, bootstrap est une dépendance car votre projet en dépende. Donc, sans bootstrap vu que votre document HTML a été interfacé avec l’utilisation de ses classes, votre projet ne peut pas mieux fonctionner à son absence.

Alors avec bootstrap, le plus simple serait de télécharger la librairie, et de l’inclure avec la balise link; devinez maintenant un outil qui permettrait de télécharger et inclure bootstrap dans votre projet de manière automatique dont la seule chose que vous auriez à faire c’est de le déclarer dans un fichier de configuration ? Et puis ça ne se limite pas qu’à une seule dépendance, Vous pourriez avoir besoin de plusieurs dépendances qui eux même dépendent d’autres dépendances.

C’est exactement ce que composer résout dans l’eco-système de PHP, Composer est exactement cet outil. Il permet de gérer toutes les dépendances d’un projet mais si composer restait juste avec les fonctionnalités que je viens d’illustrer dans cet exemple, il n’aurait que peu d’intérêt. Il va plus loin en gérant les versions de dépendances, les mises à jour de ses dépendances et bien plus encore. Découvrons dans la suite comment Composer gère les dépendances d’un projet PHP.

 

Composer, Installation et configuration

Quoi de mieux à faire avant d’installer un outil comme composer que de savoir comment l’installer ? Alors, Deux manières existent pour installer et utiliser composer, soit vous l’installez directement dans votre projet en téléchargeant son archive (composer.phar) ou l’installez sous Windows globalement où vous auriez à l’utiliser dans tous vos projets.

Exécuter composer

Si vous l’aviez installé globalement sous Windows, en ouvrant l’invite de commande vous avez la commande composer

Si vous l’aviez bien évidement ajouté via l’archive composer.phar, depuis le dossier de votre projet, vous auriez à faire php composer.phar (Rassurez-vous que php a été ajouté dans la variable d’environnement de votre système)

Pour s’assurer que tout est bon, cette commande devrait vous afficher la version de composer

 

Utilisation de composer

A partir du fichier composer.json que vous aurez à créer ou générer dans la racine de votre projet, vous allez spécifier les différentes dépendances de votre projet de la manière suivante :

Où nom_dependance* est le nom de la dépendance qui est constitué du nom de l’auteur et le nom du package (plus d’information ici). Tous les packages sont hébergés dans http://packagist.org

Vous pouvez profiter pour spécifier les informations en rapport avec le projet.

Pour l’exemple, on va utiliser la librairie CustomAi que j’ai parlé sur la customisation de l’auto incrément. Vu qu’il est hébergé dans github et non dans packagist.org, on va devoir le spécifier dans le fichier composer.json

J’ai défini dev-master comme contrainte de version vu que le projet CustomAI n’a qu’une seule branche, la branche master.  Après avoir défini ces informations, vous n’avez qu’à exécuter la commande :

Cette commande dit à composer d’installer toutes les dépendances définies dans le fichier composer.json et composer téléchargera toutes les dépendances et leurs dépendances de manière récursive et un dossier vendor sera créé s’il n’existe pas où toutes les dépendances seront téléchargées.

En gros, cette commande réalise ces tâches

  1. Télécharges les dépendances et les dépendances de ces dépendances dans leurs liens respectifs
  2. Crée un dossier à partir vendor/ où il stocke les dépendances
  3. Génère un autoloader qui permettra l’inclusion automatique des fichiers
  4. Crée un fichier composer.lock où il enregistre l’état de votre projet actuel. cela lui permet de savoir quand faire la MAJ pour quelle dépendance.

Au final, mes dépendances sont chargées, pour utiliser ma librairie, je n’ai qu’à inclure l’autoloader dans le fichier où je veux l’utiliser.

Et après, je n’ai qu’à utiliser simplement ma bibliothèque

Initialiser un projet avec composer

Généralement, on fork un projet, mais il se pourrait que vous ayez envie de commencer un nouveau projet en scratch, composer a une commande qui permet d’initialiser un projet en interactivité et au final il générera le fichier composer.json. vous n’avez qu’à faire

Où vous aurez à remplir les informations concernant votre projet et définir une par une les dépendances de ses dépendances en ligne de commande. (plus d’infos)

Retrouvez toutes les commandes possible de composer ou carrément lisez sa docs pour plus d’informations

Enfin, Vous auriez compris que composer est largement utilisé au sein de la communauté PHP, le connaitre est à ce jour vraiment indispensable pour un développeur PHP professionnel. Tout le framework populaires PHP comme Symfony ou Laravel utilise de facto composer dans leur eco-système.

Jetbrains PHPStorm est un environnement de développement intégré spécialisé pour le développement Web. Initialement conçu pour le développement PHP avec tout le support de Webstorm, grâce à son extensibilité, plusieurs plugins existent pour étendre ses fonctionnalités. Il supporte nativement les langages PHP, HTML, CSS et JavaScript.

AVANTAGES ET FONCTIONNALITES

Si plusieurs développeurs Web se penchent vers cet IDE, c’est grâce aux nombreux avantages et fonctionnalités que possède PHPStorm qui rendent vraiment facile la vie des développeurs en occurrence :

  1. Le support de la coloration syntaxique
  2. Un générateur de code
  3. L’auto complétion intelligent du code
  4. Une documentation du langage PHP intégré
  5. La factorisation du code
  6. File watcher, un outil qui fait la surveillance des fichiers surtout pour la transpilation des codes pour ceux qui utilisent des préprocesseurs comme SASS ou Webpack
  7. Un support de gestion de version (GIT, SVN) intégré
  8. Les supports des framework (Symfony) PHP intégré
  9. Les supports des moteurs de templates comme blade, twig intégré.

Et on est loin d’atteindre la moitié des fonctionnalités qu’offre cet IDE nativement… Il est quasi entièrement customisable et est très extensibles grâce aux nombreux plugins disponibles sur le web.

INCONVENANTS

Et que pensez-vous ? Que dans toutes ces features, il ne manquera pas de point faible ? Détrompez-vous ! PhpStorm est génial avec ces fonctionnalités mais cela lui rend gourmand en ressource mémoire. Il peut consommer jusqu’à 700Mo de mémoire vive.

Télécharger PhpStorm

PhpStorm n’est malheureusement pas gratuit, mais ils sont une version d’essaye d’une durée de 30 jours à voir dans le site officiel

SI vous avez commencé le développement web avec notepad++ comme c’est le cas de la plus part, c’est le moment de voir un peu plus grand et professionnel en migrant vers PHPStorm. Si vous ne voulez pas PhpStorm en raison de sa gourmandise, pensez à SublimText.

La librairie CSS d’animation animate.css est une excellente solution quant aux animations courantes. Tout un tas d’animations prédéfinies existent mais le problème avec est que les animations avec cette librairie sont un peu incontrôlable.

Généralement, on peut avoir besoin d’exécuter une animation selon une condition donnée. Par exemple, lors d’un clic, d’un scrolling, etc… Découvrons WOW.js, une librairie JQuery qui en mélangeant avec animate.css, déclenche les animations au scroll de la page.

WOW.Js est une librairie JavasScript qui permet de déclencher les animations lors d’un scroll. L’animation est lancée seulement après que l’élément HTML apparaisse à l’écran, et avec l’avantage que tout cela soit configurable. Il est par défaut configurer pour être utilisé avec animate.css, mais vous pouvez utiliser une autre librairie d’animation qu’animate.css.

Installation

  1. Télécharger animate.css
  2. Télécharger WOW.js
  3. Incluez animate.css dans l’entête du document
  4. Incluez WOW.js (avant la fermeture de la balise body est l’une de meilleurs habitudes
  5. Instancier WOW.js (après avoir inclus WOW.js

Utilisation

Quelques classes suffisent pour animer un élément quand il se voie à l’écran

  • wow : Signale qu’il faut animer cet élément lors d’un scroll
  • bounce : Le nom de l’animation (toutes les animations ici)

Exemple complet

Configuration de WOW.js

WOW.js comme dit dans le début est entièrement configurable. Voyons en détail quelques configurations essentielles.

Et puis il y a les attributs data-wow-* qui permettent de configurer aux plus fines les détails des animations de chaque animation.

  • data-wow-duration : La durée de l’animation. L’équivalent de animation-duration en CSS
  • data-wow-iteration : Le nombre de fois que l’animation va se répéter. L’équivalent de animation-iteration-count en CSS
  • data-wow-offset : La distance entre le bas de la page et l’élément lui seul, avant le lancement de l’animation.
  • data-wow-delay : Le temps avant que l’animation soit lancée. L’équivalent de animation-delay en CSS

Exemple

Pour plus d’informations, allez sur WOW.JS , Animate.css et dans l’utilisation de Animate.css

Au moins une fois dans votre parcourt de programmation web, vous avez eu à faire face à cette balise; la balise meta qui sans doute semble être différent de la plus part d’autres balises. Certains se posent même des questions sur son importance. découvrons le ensemble dans la suite de ce tuto.

C’est quoi la balise meta

Une balise meta est une balise orpheline qui se place dans la partie head (entre <head> et </head>) du document HTML. La balise meta comme toutes les autres balises d’entête (head), permet de fournir les informations concernant le document HTML. Ces informations sont celles qu’on appelle les métadonnées d’où le nom de la balise meta.

Quelle est son utilité ?

Les métadonnées sont destinées à des outils comme le moteur de recherche, le navigateur, etc… Ce qui veut dire qu’il n’est vraiment utile qu’à l’outil qui l’exploite et le comprenne. L’outil qui n’a pas été fait pour une métadonnées quelconque ne fait que l’ignorer.

Exemple :

Dit au navigateur d’utiliser l’encodage UTF-8 qui en HTML5 est simplifié par l’utilisation de l’attribut charset.

Dit aux moteurs de recherches de ne pas indexer ce document HTML.

Pour vous donner vraiment son utilité, prenez cet exemple :

Vous utilisez notepad++, devinez alors que les concepteurs du logiciel notepad++ aimeraient savoir le nombre de site en ligne créés en utilisant notepad++. Il peuvent simplement créer un bot qui aura comme mission de parcourir tous le web à la recherche des sites dont par exemple cette métadonnée existe.

Du coup, si vous mettez cela dans votre site, les concepteurs du logiciel sauront que vous avez utilisé notepad++ comme éditeur texte pour créer le site.

Utilisation de la balise meta

La balise meta se défini comme suit :

  1. Il doit avoir au moins un de ses attributs name, http-equiv ou charset
  2. S’il a l’attribut name ou http-equiv, il doit aussi avoir l’attribut content

Vous connaissez sans doute déjà son utilisation avec l’attribut charset concentrons plutôt sur son utilisation avec name ou http-equiv

L’attribut name ou http-equiv fourni le l’intitulé de l’information et content fourni l’information elle même.

Exemple :

La balise meta ci-dessous fournie l’information que l’auteur (author) du site est Mbungu Ngoma

Information au navigateur

Les informations données au navigateur utilisent toutes l’attribut http-equiv. Exemple :

Qui dit au navigateur qu’après 10 seconde, de rediriger l’utilisateur sur informagenie.com

Vous pouvez retrouver les informations concernant d’autres http-equiv sur Internet.

Information sur la page

Les balises metas fournissent les informations sur le document HTML vis-à-vis des moteurs de recherches, des robots de reconnaissances vocales, etc… voici ses utilisations courantes

Fournie cette description dans les moteurs de recherches notamment dans Google

meta description

Voici une liste non exhaustive des utilisations possibles

  • author : Définie l’auteur de la page
  • keywords: Mettre les mots clés de la page
  • robots : Donnes les instructions aux moteurs de recherches vis-à-vis de la page. index pour permettre d’indexer la page, nonindex pour le contraire (Plus d’infos)
  • application-name : Donner le nom de l’application

Pour plus d’information, allez dans la spécs W3

Open Graph

Open graph est un protocole utilisé par Facebook pour permettre à n’importe quelle page web de devenir un objet social riche. cela étant dit, Facebook à travers open graph arrive par exemple à représenter un lien comme suit au sein de sa plateforme :

open-graph meta

Exemple d’utilisation :

Comme vous pouvez bien le deviner, c’est le titre dans l’objet social.

Voici quelques autres éléments :

  • og:description : PLa description de la page. (“Qu’est ce que c’est agaçant, acheter…“)
  • og:url : L’URL de la page
  • og:type : Le type de l’objet. par ex:  article
  • og:image : L’image de l’url

Pour plus d’informations