Portfolio Stachowiak Vivian

Présentation du TP

Ce travail pratique portait sur la mise en place de contrôles de validation sur des formulaires pour la Maison des Ligues (M2L). L'objectif était d'améliorer la qualité des données saisies par les utilisateurs en implémentant différents types de validation, à la fois côté client et côté serveur.

Informations sur le TP

Nom du TP : TP-M2L - Contrôles sur les Formulaires
Date de réalisation : Février 2023
Contexte : Amélioration de la sécurité et de l'expérience utilisateur des formulaires de la Maison des Ligues
Technologies utilisées : JavaScript, PHP, HTML, CSS

Compétences et Outils Utilisés

Durant ce TP, j'ai utilisé plusieurs technologies et techniques pour mettre en place des validations de formulaire efficaces :

Validation côté client : JavaScript, expressions régulières, HTML5 form validation
Validation côté serveur : PHP (filter_var, preg_match)
Sécurité des données : Protection contre les injections SQL et XSS
Expérience utilisateur : Feedback instantané lors de la saisie

Étapes de Réalisation

Analyse des besoins

Avant de commencer l'implémentation, j'ai identifié les types de données à valider et les règles à appliquer :

Champs texte : longueur minimale et maximale, caractères autorisés
Adresses email : format valide selon les normes RFC
Numéros de téléphone : format selon les standards français
Dates : format et cohérence (ex: date de naissance dans le passé)
Mots de passe : règles de complexité (longueur, caractères spéciaux, etc.)

Validation côté client

J'ai mis en place plusieurs mécanismes de validation côté client pour améliorer l'expérience utilisateur :

Utilisation des attributs HTML5 (required, pattern, min, max, etc.)
Création de fonctions JavaScript pour la validation en temps réel
Affichage de messages d'erreur personnalisés à côté des champs concernés
Désactivation du bouton d'envoi jusqu'à ce que tous les champs soient valides

Validation côté serveur

Pour garantir la sécurité des données, j'ai également implémenté une validation côté serveur :

Vérification des données reçues avec les fonctions PHP de filtrage (filter_var)
Utilisation d'expressions régulières pour valider les formats complexes
Protection contre les attaques par injection en échappant les caractères spéciaux
Redirection vers le formulaire avec conservation des données valides en cas d'erreur

Tests et optimisation

Une fois les validations implémentées, j'ai effectué plusieurs tests pour vérifier leur efficacité :

Tests avec des données valides pour confirmer le bon fonctionnement
Tests avec des données invalides pour vérifier la détection des erreurs
Tests de désactivation de JavaScript pour vérifier la robustesse du système
Optimisation des performances et de l'expérience utilisateur

Galerie du projet

Voici quelques captures d'écran des formulaires et des validations implémentées :

Résultats et Bilan

La mise en place de ces validations a permis d'améliorer considérablement la qualité des données collectées par les formulaires de la Maison des Ligues. Les utilisateurs bénéficient maintenant d'un retour immédiat sur leurs saisies, ce qui réduit les frustrations et les abandons de formulaires. Du côté serveur, la sécurité est renforcée grâce à une validation rigoureuse qui empêche l'injection de données malveillantes.

Ce TP m'a permis d'approfondir mes connaissances en matière de validation de données, à la fois côté client et côté serveur, et de mieux comprendre l'importance d'une approche double pour garantir à la fois une bonne expérience utilisateur et une sécurité optimale.

Compétences utilisées dans ce TP

JavaScript PHP HTML5 CSS Validation de formulaires Expressions régulières Sécurité web UX Design Filtrage de données

TP-M2L: Contrôles sur les Formulaires

Compte Rendu de Travaux Pratiques