Le schéma client-serveur désigne un mode de communication entre programmes : l’un, qualifié de client, envoie des requêtes ; l’autre, le serveur, y répond. Dans le cas du Web, le client est le navigateur et le protocole utilisé est HTTP.
I Client-Serveur – Dialogue HTTP
1 Le côté client ou front-end
Centré sur le navigateur, il est constitué par des pages HTML, les feuilles de style CSS et les codes JavaScript qui les accompagnent. Les métiers concernés sont, par exemple, web designer, intégrateur CSS ou développeur front-end.
Certaines vérifications de formulaires sont faites dans le navigateur via des attributs HTML spécialisés comme pattern ou en invoquant du code JS.
2 Le côté serveur ou back-end
Il assure la réponse à une demande faite lors de la soumission du formulaire par validation (submit) ou lors d’un appel ajax en JS.
Les technologies employées sont très variées : PHP, Python, .NET, Java, ainsi que des bases de données relationnelles.
Ces programmes s’exécutent le plus souvent sur des serveurs distants, sur Internet. Des vérifications sur les données sont également effectuées côté serveur pour assurer la sécurité de l’application.
3 Le dialogue entre client et serveur : HTTP
HTTP signifie HyperText Transfer Protocol, c’est le protocole de « haut niveau » permettant les échanges entre un navigateur et un serveur sur Internet. La transmission de paramètres (champs saisis dans le formulaire) se fait grâce à ce protocole.
Dans le cas de sites sécurisés, le protocole HTTPS ajoute une couche SSL (Secure Socket Layer) à HTTP, assurant le chiffrement et la confidentialité des échanges.
4 Méthodes GET et POST
Avec la méthode GET, les paramètres sont transmis dans la variable d’environnement QUERY_STRING et visibles sur l’URL.
Avec la méthode POST, les paramètres sont transmis au programme externe dans son entrée standard et sont invisibles sur l’URL.
II Un exemple de formulaire en HTML
Voici un formulaire complet avec différents types d’input dotés de plusieurs attributs comme :
– required qui indique les champs obligatoires ;
– placeholder qui donne un exemple ;
– pattern qui précise la valeur attendue à l’aide d’une expression régulière.
Repère
Mot cléLes expressions régulières représentent des motifs, comme ici un numéro de téléphone comprenant uniquement des chiffres, d’où la plage de caractères [0-9], et de taille contrainte : {10,14} signifiant entre 10 et 14 éléments. Pour un email, l’expression régulière est étonnamment complexe et il vaut mieux laisser faire le navigateur avec sa valeur par défaut.
Nous verrons une réponse en PHP à un formulaire.