Spip et AMP utilisation de amp-form en xhr

Spip et AMP utilisation de amp-form en xhr pour squelettes AMP

Pour le second site Internet construit sur l’association de Spip et de Google AMP j’ai eu besoin de mettre en place un calculateur d’IMC (Indice de masse corporelle) à intégrer dans le contenu d’un article.

il sera prochainement disponible : https://www.chirurgie-viscero-nimes.fr/l-obesite.html

requis : amp-form & amp-mustache

<script async="" custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

<script async="" custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Création du formulaire dans le dossier "modeles"
nommez le comme vous voulez ex : formulaireimc.html
Notez l’appel à "calcul_imc.php"
Les classes css sont spécifiques à https://basscss.com/

 <form method="post" action-xhr="calcul_imc.php" target="_top">
      <div class="inline-block p1">
        <label>
          <input type="number" name="taille" maxlength="10" value="" placeholder="Taille en cm" class="p1" required>
          cm
        </label>
      </div>
      <div class="inline-block p1">
        <label>
          <input type="number" name="poids" maxlength="3" value="" placeholder="Poids en kg" class="p1" required>
          Kg
        </label>
      </div>
	  <div class="inline-block p1">
        <input type="submit" name="valider" value="Calculez votre IMC" class="button p1">
      </div>
	  <div class="p2">
      <div submit-success>
        <template type="amp-mustache">
          {{result_imc}}
        </template>
      </div>
      <div submit-error>
        <template type="amp-mustache">
          Erreur de saisie
        </template>
      </div>
	  </div>
    </form>

Mise en place dans l’article comme n’importe quel modèle Spip ici <formulaireimc|>

A la racine de votre site créez le fichier "calcul_imc.php"

<?php
// on définit les entêtes HTTP
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: https://'.$_SERVER['HTTP_HOST']);
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://'.$_SERVER['HTTP_HOST']);

if (isset($_POST['valider'])) {
// on peut traiter les données $_POST	
   $taille_cm=$_POST['taille'];
   $poids=$_POST['poids'];
   $taille_m = $taille_cm/100;
   $IMC=$poids/($taille_m*$taille_m);
   $IMC= round($IMC,1);

if ($IMC<=16.5) {
   $message = "êtes en dénutrition";
   }
   elseif ($IMC<=18.5) {
   $message = "êtes en état de maigreur";
   }
   elseif ($IMC<=25) {
   $message = "avez une corpulence normale";
   }
   elseif ($IMC<=30) {
   $message = "êtes en surpoids";
   }
   elseif ($IMC<=35) {
   $message ="êtes en état d'obèsité modérée";
   }
   elseif ($IMC<=40) {
   $message ="êtes en état d'obèsité sévère";
   }
   else {
   $message ="êtes en état d'obèsité morbide, consultez un médecin";
   }
   
   $result_imc = "Vous pesez ".$poids." kg et mesurez ".$taille_cm." cm - IMC de ".$IMC." = vous ".$message;
   
$data = array();
$data['result_imc'] = $result_imc;

// pour finir on renvoi le résultat au format JSON
echo json_encode($data);
}
?>

Important : les entêtes HTTP sont obligatoires et ça ne fonctionne qu’en https

Bon code
Natacha Courcelles