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

Bastide la Rouvière

Producteur de plantes pour jardins secs et naturels nous a confié la création de leur site avec Prestashop 8 + Creative Elements

Jazz In Balagna nous a confié la création de son site avec WORDPRESS + Elementor

SBS Design Contemporain nous a confié la refonte de son site avec WORDPRESS + Elementor

Imagin’eres nous a confié la refonte de leur site avec Prestashop 8.1.3 + Creative Elements Modules de synchronisation ebay + Store Commander

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 Toulouse 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 (…)



Actus techniques

Actualités

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

Passage de tous les sites Spip en version 4.3.2 + Mise à jour de l’écran de sécurité 1.6.3


(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