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

Nos actualités

  • En cours de création

    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

    Lire la suite..
  • Second site Google AMP en cours

    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) à

    Lire la suite..
  • Premier site Google AMP

    Bonjour à tous Vendredi 4 janvier 2019 : livraison du premier site réalisé avec le CMS Spip 3.2 et un jeux de squelettes écrit pour Google AMP le temps de chargement

    Lire la suite..
  • Changement de serveur

    Cher Client, chère cliente Fin de la migration de 93 sites Internet de différente taille Afin d'améliorer nos services et dans le cadre de la mise à niveau de mes

    Lire la suite..
  • IMPORTANT - Alerte phishing messagerie

    Cher Client, chère cliente Si vous recevez un mail vous demandant de confirmer vous identifiants de messagerie, n'y répondez surtout pas. Il s'agit d'un phishing

    Lire la suite..

Actus techniques

IMPORTANT - Alerte phishing messagerie

Cher Client, chère cliente
Si vous recevez un mail vous demandant de confirmer
vous identifiants de messagerie, n’y répondez surtout pas.
Il s’agit d’un phishing (hameçonnage). Une fois en possession
de vos identifiants le pirate les utiliserait pour envoyer du spam.
En aucun cas nous vous (...)


(Lire la suite..)

Changement de serveur

Cher Client, chère cliente
Fin de la migration de 93 sites Internet de différente taille
Afin d’améliorer nos services et dans le cadre de la mise à niveau de mes infrastructures d’hébergement, les anciens comptes sont en cours de déplacement sur un nouveau serveur plus puissant et plus rapide. Ce (...)


(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.

En soumettant ce formulaire, j'accepte que les informations saisies et transmises soit exploitées par Courcelles Design
dans le cadre de ma demande de devis ou d'information.
J'accepte
Je confirme ne pas être un robot :-)