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

Spip et AMP utilisation de amp-form en xhr Spip et AMP utilisation de amp-form en xhr -- notez cet article
4 votes

En cours de création

Imagin’eres nous a confié la refonte de leur site avec Prestashop 8.1 + Creative Elements

La mairie de Ladevèze Rivière (32) nous a confié la création de leur site avec Spip 4

Plantes et Cultures nous a confié la refonte de leur site avec WORDPRESS + Elementor

Le Docteur Fabre nous a confié la refonte de son site avec WORDPRESS + Elementor

Le CCVS nous a confié la refonte de leur site avec WORDPRESS + Elementor

Mobipro nous a confié la refonte de leur site avec Prestashop 1.7.xx + Creative Elements

Cartoscrap nous a confié l’hébergement de leur boutique Prestashop CartoScrap et de leur Blog Wordpress

Master Erasmus Mundus Chemoinformatics+ de la Faculté de Chimie de Strasbourg nous a confié la refonte de son site Internet avec Spip 4

Mourrejeau Immobilier nous a confié la refonte de leur site avec WORDPRESS + Elementor

Purefontaine nous a confié la refonte de leur site avec Prestashop 1.7.8

Le Laboratoire de (...)



Actus techniques

Actualités

Passage de tous les sites Spip en version 4.2.9

Mise à jour de sécurité sur tous les sites Internet créé avec le CMS Spip

Passage de tous les sites en version 3 à la dernière version 3.2.19

Passage de tous les sites en version 4 à la dernière version 4.2.3

Mise à jour de l’écran de sécurité


(Lire la suite..)

Courcelles Design

Courcelles Design
Agence de communication Web
Design & développement de site Internet

82 chemin de ronde
32230 - Marciac - Gers
31000 - Toulouse - Haute-Garonne

Je suis présente à Toulouse généralement en fin de semaine et disponible sur simple rendez-vous directement dans vos locaux.

Plan d’accès à Marciac

Fixe 05 62 09 33 21 - Portable 06 63 27 92 71

RCS Auch 403 195 209
N° Siret 403 195 209 00040
APE 6311 Z - TVA intra : FR04403195209

Contactez-nous.

RGPD (obligatoire)

En soumettant ce formulaire, j’accepte que les informations saisies et transmises soient exploitées par Courcelles Design dans le cadre de ma demande d’information.

Les champs marqués * sont obligatoires