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.

WordPress est sans nul doute le CMS le plus utilisé actuellement. il gagne ce marché surtout pour sa facilité, sa flexibilité et surtout la possibilité de faire son développement localement.

Voici dans cet article comment installer wordpress de manière professionnelle en locale

Installation du serveur web

On va se servir de Apache, Php et MySQL et pour se simplifier la tâche en tous et pour tout, nous allons utiliser un All in One. Je préfère Xamp mais vous pouvez utiliser wamp ou EasyPHP

  1. Télécharger et installer Xamp

Configuration du serveur web

Création de projet

De manière professionnelle, on aura tendance à travailler sur plusieurs projets. Et donc, créons un dossier pour ce projet aussi.

  1. Aller dans C:\xampp\htdocs
  2. Et créer un répertoire avec le nom de votre projet. C:\xampp\htdocs\monprojet

Configuration système

L’environnement local doit chercher à tout pris se ressembler à celui de la production pour éviter les complications lors du déploiement. Nous allons enregistrer un nom de domaine locale correspondant au nom de domaine de production. bref, on évite à tout pris une adresse comme  http://localhost/monprojet. au lieu de ça, avoir un vrai url comme http://monprojet.com mais sans avoir besoin d’internet.

Pour cela :

    1. Copier le fichier C:\windows\system32\drivers\etc\hosts dans votre bureau
    2. Ouvrir le fichier hosts du bureau et ajouter à la fin à la ligne

      Où monprojet.com est à remplacer avec le nom de domaine de votre site en production
    3. Recopier le fichier modifié dans C:\windows\system32\drivers\etc\hosts

Apache

Après avoir développé un site wordpress localement, le plus dure revient à le rendre disponible en ligne. ça demande tant de configuration telle que :

  • Désactiver les plugins
  • Exporter la base de données locale
  • Modifier les urls pour l’adapter au nom de domaine

Bref, il y possibilité d’éviter tout ça dès l’installation locale de wordpress. Pour cela nous allons utiliser les hôtes virtuels d’apache.

  1. Avec Xampp, Ouvrir le fichier C:\xampp\apache\conf\extra\httpd-vhosts.conf
  2. Ajouter ces lignes à la fin

    Cela permet de configurer le serveur pour qu’il puisse, quand on essaye de se connecter sur le site avec nomdedomaine.com, amorcer directement les fichiers qui se trouvent dans le dossier C:\xampp\htdocs\monprojet comme localhost le fait avec C:\xampp\htdocs
    Rappel : Remplacer donc monprojet.com par le nom de domaine de votre site quand il sera en ligne
  3. Redémarrer le serveur web ou arrêter puis relancer celui ci

Téléchargement et installation WordPress en local

Création de la base de données

Pour créer la base de données, nous allons nous servir de Phpmyadmin. Depuis votre navigateur, si vous utilisez comme moi xampp, allez dans http://localhost/phpmyadmin

creation-bsae-données-wordpress

  1. Cliquez dans base de données
  2. Taper le nom de la base de données, généralement on tape le nom du projet comme étant le nom de la base de données
  3. Cliquez sur “créer” pour créer la base de données

Installation WordPress

Rendez-vous dans cette adresse et téléchargez la dernière version de WordPress et :

  1. Décompressez-le
  2. Placez les fichiers extraits dans le répertoire C\xampp\htdocs\monprojet. Faites en sorte que les fichiers et dossiers (wp-content, wp-includes, wp-admin…) soient directement dans le dossier monprojet et non dans le projet wordpress.
  3. Visitez directement http://monprojet.com (à remplacer à ce que vous avez mis dans le fichier hosts) et cliquez sur “C’est parti !”
  4. Complétez les informations en adaptant avec l’image ci-dessous et cliquez sur “Valider”. le nom de la base de données est la base de données que vous avez créée, l’identifiant, c’est l’identifiant du serveur de la base de données, par défaut c’est root et le mot de passe par défaut c’est vide !
    wordpress-local
  5. Dans la page suivante, cliquer sur “lancer l’installation”. WordPress procédera à la création des tables et configuration des paramètres par défaut !
  6. Et dans cette étape, configurez votre site et après vous n’avez qu’à cliquer sur “Installer wordpress”

wordpress local

Félicitation ! Vous venez professionnellement d’installer WordPress localement ! Il ne vous reste plus qu’à vous connecter http://monprojet.com/wp-admin dans votre tableau de bord dans  avec les identifiants que vous venez de choisir ci-dessus.

Conclusion

Très subtile ce qu’on a fait de spécial, mais en réalité, Installer WordPress de cette manière vous fait gagner un gain quand vous voudriez déployer le site ! Vous n’auriez qu”à utiliser votre client ftp et envoyez les fichiers du site chez votre hébergeur et importer la base de données telle qu’elle est localement chez votre hébergeur sans travail additionnel !

Une clé primaire, dans la notion de base de données est systématiquement une colonne qui contient pour chaque enregistrement une valeur non redondante que doit avoir une table. Cela doit identifier chaque enregistrement de manière unique.

phpmyadmin

Vous avez peut-être marre d’utiliser l’auto_increment de MySQL ou tout autre alternative pour d’autres SGBD qui a une forme un peu restreinte et pas sémantique, nous allons écrire notre script en PHP pour customiser cette colonne qui généralement est nommée « id » mais libre de le nommer comme on le veut.

Admettons que vous informatisez une école, un identifiant d’un élève « ELE01 » ou d’un enseignant « ENS01 » serait mieux que d’être simplement « 1 »

On va faire une chose assez simple, nous allons avoir une logique ETUDIANT_ID où

  • ID : est le numéro unique de l’étudiant

Donc, on aura une suite comme ETUDIANT_1, ETUDIANT_2…. ETUDIANT_n…

Concept

Coté logique de notre code aussi on ferra très simple :

Lors de l’enregistrement dans la table, on vérifie d’abord s’il y a une donnée dans la table. Si non, on enregistrement sans problème la donnée avec le numéro unique qu’on aura par default, soit ETUDIANT_1. S’il y a un ou plusieurs enregistrements, on récupère l’id du dernier enregistrement et on l’incrémente.

ETUDIANT_1 n’est pas de type numérique mais bel et bien alphanumérique. Pensez bien à mettre le type de l’id en VARCHAR sinon ça ne va pas bien fonctionner

Schématiquement, cela peut se résumer en ceci :

ordinogramme

Code

Je pense que je n’ai pas à expliquer car le code est commenté et au final, on voit bien que notre système fonctionne très bien et aussi que la requête sql est évidente.

Après vous n’avez qu’à utiliser la variable $increment lors de l’enregistrement comme ceci :

customAI

Cette implémentation n’est pas si mal mais si vous voulez changer la structure de votre clé primaire (par exemple ELEVE01), vous devriez écrire à chaque fois le code correspondant. pas très idéal.

Librairie CustomAI

Raison pour laquelle j’ai développé la librairie CustomAI qui va vous permettre de gagner en rapidité. La librairie n’a fait qu’implémenter la logique qu’on a vue ci-haut.

Exemple d’implémentation de la même chose qu’on a fait mais avec la librairie

Explications :

  1. Dans la ligne 1, rien de compliqué qu’en requirent le fichier de la librairie
  2. J’ai customisé mon masque pour qu’elle prenne une forme à souhait. (plus d’infos)
  3. J’ai instancié la librairie CustomAI avec le premier paramètre, la connexion PDO de la base de données et le second paramètre c’est le nom de ma table, le troisième paramètre qui est la colonne clé primaire de ma table et le 5ème argument, j’ai customisé mon masque pour qu’elle prenne une forme à souhait. (Plus d’infos)

 

L’avantage c’est qu’on a un code réutilisable. Et si on veut pour les élèves, on a simplement qu’à modifier le 4ème paramètre avec « ELEVE(0) ». Pour plus d’informations.