Fiche méthode 1ère NSI – Interaction client-serveur sur le Web 1/8
Protocole http : protocole de transfert d’hypertexte (HyperText Transfer Protocol). C’est le protocole qui définit les règles que doit suivre un navigateur pour obtenir une page d’un serveur.
Protocole https : (http Secure) est un protocole qui protège l’intégrité et la confidentialité des données lors des transfert d’informations entre le client et le serveur
Objectifs :
✓ Connaitre les différentes interactions possibles sur le Web entre les serveurs et les postes clients.
✓ Savoir créer un formulaire Web et gérer l’affichage retour grâce à l’utilisation d’un script en langage PHP.
Créée en 1994 par Rasmus Lerdorf, la toute première incarnation de PHP était un simple jeu de binaires CGI écrits en langage C. Originairement utilisée pour suivre les visiteurs de son curriculum vitae en ligne, il nomme cette suite de scripts "Personal Home Page Tools" (ndt : Outils pour page personnelle), plus fréquemment appelée "PHP Tools". Au fil du temps, de plus en plus de fonctionnalités sont demandées, et Rasmus ré-écrit les outils PHP, produisant ainsi une implémentation plus large et plus riche. Aujourd’hui à sa version 7, le langage PHP est le plus répendu pour la création de site web interactif (en 2018, près de 80 % des sites web utilisent le langage PHP sous ses différentes versions).
Comment « naviguer » sur le Web ?
Internet est un réseau de réseaux de machines dans lequel circulent des données (plusieurs centaines de téraoctets par mois). Les machines échangent des informations à l’aide de requêtes. Un ordinateur qui émet une requête est un client, celui qui y répond est un serveur.
Document 1 : architecture client/serveur
Le protocole http
Protocole : ensemble des règles permettant à différents périphériques informatiques de dialoguer entre eux.
Interaction
client-serveur sur le Web
URL : adresse uniforme de localisation d’une ressource (Uniform Ressource Locator). Cette adresse unique doit comporter le nom du protocole, le nom de la machine qui héberge la ressource, de nom de la ressource et des paramètre optionnels.
Message d’erreur défini par le protocole http : (erreur 404 – Page non trouvé sous Wikipédia)
D’après www.wikipedia.fr
Document 2 : exemple d’erreur du protocole http
Pour pouvoir « naviguer » sur le Web, il faut disposer d’un programme spécifique nommé navigateur (client web), chargé de communiquer avec les serveurs du Web.
Les serveurs du Web hébergent deux types de sites :
✓ Les sites statiques : ils diffusent les mêmes informations à tous les internautes, ce sont les sites les plus simples.
✓ Les sites dynamiques : ils sont capables de personnaliser le contenu affiché en fonction de la demande de l’utilisateur, leur fonctionnement est basé sur la communication entre plusieurs serveurs.
Communication entre serveurs et clients – Sites statiques
Cas d’un site statique : la communication entre le client et le serveur est alors réduite à une demande de page suivi d’un retour d’informations permettant l’affichage.
Document 3 : sites statiques
Envoi de la page index.html
Demande de la page index.html
Affichage par le client Poste client
Communication entre serveurs et clients – Sites dynamiques
Document 4 : sites dynamiques
Création et utilisation d'un formulaire
Comment passer des paramètres à une page Web ?
On crée un formulaire dont les valeurs seront transmises automatiquement après avoir cliqué sur le bouton de type submit.Dans la page de destination, un script va recevoir les valeurs transmises.
Document 5 : formulaire HTML
Cela se fait en insérant les balises <form> et </form> dans la section <body> de la page HTML.
On place ensuite les objets de formulaire à l'intérieur de la balise form.
La structure générale d’un document HTML prend la forme suivante pour un formulaire :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<title>Un exemple</title>
</head>
<body>
<form action = "fichier_appele.php" method="get" target="blank" >
<section>
<h1>Un titre</h1>
<h2>Un sous-titre</h2>
<input type= Saisir votre nom />
<input type="submit" name="Mon bouton" value="Validez" id="valid" >
</section>
</form>
</body>
</html>
Remarque : l’ensemble des balises Html vues lors du cours précédent sont utilisables pour la mise en page du formulaire dans la balise <form>
Envoi de la page html
Demande de la page index.php?var=1
Serveur Web Serveur Base
de données
Affichage par le client Poste client
Demande de gestion de var = 1
Le serveur de base de données retourne les données relatives à var = 1
au serveur Web
Fabrication de la page de réponse par
le serveur Web
La balise form a des attributs pour l'accès dynamique et pour l'envoi des données :
✓ id : identifiant unique.
✓ name : le nom, son rôle est équivalent à celui de l' identifiant sauf pour les fonctions JS, car la méthode getElementById se base sur l'id.
✓ action : le nom d'un script à charger lorsque l'on soumet le formulaire, avec le bouton du type submit.
✓ onSubmit : évènement déclenché lorsque le formulaire est soumis et avant l'exécution de l'action. Elle peut permettre de déterminer si l'action doit être exécutée ou non.
✓ method : permet de spécifier la méthode de transmission des informations
✓ target : mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire.
_blank (ouvrir une nouvelle fenêtre), _top (remplace la fenêtre en cours) sont des exemples de mots-clés utilisés avec cet attribut.
Activité 1 : préparer une page Web avec formulaire
1. Préparer une page Html simple contenant un formulaire de saisie : a. d’un nom et d’un prénom sous forme de saisie libre de texte b. du choix d’un sport dans une liste déroulante
c. d’une coche « je suis déjà un grand sportif »
d. d’un bouton « submit » permettant de transmettre les informations à une page de gestion des données, page nommé traitement.php
Enregistrer cette page sous le nom mapage.html et penser à utiliser des noms de variables simples mais ayant un sens.
2. Dans le code du fichier traitement.php, compléter les lignes de commentaires pour expliquer ce que fait ce script écrit en langage PHP. Vous pouvez vous aider des éléments de PHP présentés dans les deux dernières pages de ce document.
Transmission de paramètres par les requêtes POST ou GET
Il existe deux méthodes d'accès définies dans le protocole HTTP pour transmettre les données d’une page HTML d’un formulaire vers un fichier de traitement :
✓ La méthode GET
✓ La méthode POST
Faut-il plutôt utiliser la méthode GET ou la méthode POST pour envoyer les données d'un formulaire HTML à une autre page ?
Le choix de la méthode dépend de la façon dont les données sont reçues, de la taille et la nature des données.
La méthode GET ajoute les données à l'URL
Dans un formulaire, elle est spécifiée avec l’écriture :
<form method="get" action="mapage.html">
...
</form>
Avec cette méthode, les données du formulaire seront encodées dans une URL. Celle-ci est composée du nom de la page ou du script à charger avec les données de formulaire empaquetées dans une chaîne.
Les données sont séparées de l'adresse de la page pas le code ? et entre elles par le code &.
Ainsi si on envoie à mapage.html les valeurs "basket" à la variable sport et "débutant" à la variable niveau, l'URL construite par le navigateur sera :
https://www.monsite.fr/mapage.html?sport=basket&niveau=débutant
La spécification HTML demande que l'on utilise GET quand la requête ne cause pas de changement dans les données, donc opère une simple lecture.
Les données de formulaire doivent être uniquement des codes ASCII. La taille d'une URL est limitée à par le serveur, souvent un peu plus de 2000 caractères, en comprenant les codes d'échappement.
Noter que lorsqu'on utilise le bouton retour du navigateur, les requêtes GET sont exécutées à nouveau.
La méthode POST n'a pas de taille limite
Dans un formulaire, elle est spécifiée avec l’écriture :
<form method="post" action="mapage.php">
...
</form>
Elle envoie un en-tête et un corps de message au serveur. Le corps est généralement constitué des données entrées dans le champ de formulaire par l'utilisateur.
Les données du formulaire n'apparaissent pas dans l'URL. En conséquence, il n'est pas possible de récupérer directement les données en JavaScript , il faut ajouter, par exemple, du code PHP dans la page :
<?php
$sport = $_POST['sport'];
$niveau = $_POST['niveau'];
?>
... code HTML éventuel ...
On peut cependant assigner les données récupérées en PHP à un script JavaScript si l’on souhaite les utiliser pour différentes actions :
<script>
var sport = <?php echo $ sport;?>;
var niveau = <?php echo $ niveau;?>;
</script>
Choix entre POST et GET
La méthode GET est la valeur de méthode par défaut. On l'utilise de préférence sauf si on ne veut pas que les paramètres soient ajoutés à l'URL.Elle permet de récupérer les données passées à la page avec du code JavaScript.
La méthode POST est indispensable pour des codes non ASCII, des données de taille importante, et elle est recommandée pour modifier les données sur le serveur, et pour les données sensibles (confidentielles)
Si l'on utilise POST, on doit intégrer du code PHP (ou un autre langage) dans la page où les données seront utilisées.
Exemple
Si le script mapage.html contient le formulaire suivant :
<form method="post" action="mapage.php">
<input type= Saisir votre nom />
<input type="submit" name="Mon bouton" value="Validez" id="valid" >
</form>
On peut alors utiliser le fichier mapage.php pour afficher le nom de la personne (et bien sûr tout ce que l’on veut, en Html ou en PHP)
<?php
$nom = $_POST['Nom'];
echo '<div>Bonjour ' . $nom . ' !</div>';
?>
Activité 2 : adapter une page Web avec un formulaire POST avec du PHP
1. Adapter le code Html du fichier mapage.html de l’activité 1 pour permettre le passage en POST 2. Adapter le code PHP du fichier traitement.php de l’activité 1 pour permettre la récupération et le
traitement des données à la suite du passage en POST
3. Ajouter au fichier html une liste déroulante sur le niveau du sportif (débutant/confirmé/expert), ainsi qu’une puce « sexe » permettant de choisir « Femme/Homme »
4. Adapter le code PHP afin qu’il affiche suivant les sélections effectuées (en tenant compte du niveau et du genre) :
✓ Vous êtes une sportive experte
✓ Vous êtes un sportif confirmé
Quelques éléments sur le langage PHP
✓ Pour écrire du PHP dans une page HTML, il faut ouvrir une balise <?php puis écrire les instructions séparées par des ; en enfin fermer la partie par la balise ?>
✓ Le fichier de la page doit avoir l’extension .php
✓ On déclare les variables avec le symbole $ de la manière suivante
$nomvariable = contenu ;
✓ PHP est un langage au typage dynamique (comme en Python) : nul besoin de définir le type de la variable au préalable.
✓ Le langage PHP est un langage orienté objet très proche du C/C++
✓ Pour transmettre un résultat sous forme HTML, on peut utiliser la commande echo (similaire au print() de Python). Par exemple echo ’<b>Bonjour !</b>’ ;
✓ Au sein du code PHP, on peut ajouter une ligne de commantaire en la débutant par //
✓ Il n’y a pas d’indentations obligatoires (conseillées cependant pour aider à la lisibilité) mais les blocs d’instructions sont compris en accolades { }
✓ Des tutoriels sont disponibles ici : https://w3schools.com/php
✓ L’aide officielle permettant de détailler chaque fonction est ici : https://www.php.net/manual/fr
En PHP les structures conditionnelles s’écrivent : if ($condition)
{
// A exécuter si condition est vraie }
elseif ($condition2) {
// A exécuter si condition est fausse et condition2 est vraie }
else {
// A exécuter si condition et condition2 sont fausses }
En PHP la boucle for s’écrit :
for ($index = 0; $index < count($ar_Tableau); $index++) {
// Affiche l’élément d’indice $index du tableau $ar_Tableau echo $ar_Tableau[$index] . ’<br/>’ ;
}
En PHP la boucle foreach permet de parcourir un tableau simplement : foreach ($ar_Tableau as $key => $value)
{
// Affiche la clé $key suivi de la valeur $value
echo ’Clé : ’ . $key . ’- Valeur : ’ . $value . ’<br/>’ ; }
En PHP la boucle while s’écrit : while ($condition) {
// s’exécute tant que $condition est vraie (true en PHP)
}
En PHP les fonctions s’écrivent :
function ma_fonction($parametre) {
// s’exécute lors de l’appel de la fonction $retour = true ;
return $retour ;
}
Quelques exemples de gestion des tableaux :
Action Syntaxe PHP
Création $tableau = array();
Ajout $tableau[] = "valeur";
Ajout sur un index $tableau[4] = "valeur";
Ajout sur une clé $tableau["cle"] = "valeur";
Création numérique $tableau = array('valeur1', 'valeur2');
Création associative $tableau = array('cle1' => 'valeur1', 'cle2' => 'valeur2');
Ecriture depuis numérique echo $tableau[4];
Ecriture depuis association echo $tableau['cle1'];
Tableaux numériques Les clés sont des chiffres
Tableaux associatifs Les clés sont des chaînes de caractères Matrice (tableau multi-dimensions) $matrice[2][3] = "valeur";
PHP va permettre de récupérer les informations transmisses par un formulaire HTML et d’en faire le traitement : enregistrement dans un fichier ou une base de données, génération d’une nouvelle page, envoi de mail…
Le langage PHP est l’outil principal de développement des sites Web dynamiques.
