SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano

274 Plugins, 192 contribs sur SPIP-Zone, 73 visiteurs en ce moment

Accueil > Outils pour plugins > Saisies > Un formulaire C.V.T avec Saisies par l’exemple

Un formulaire C.V.T avec Saisies par l’exemple

14 mars 2011 – par stefdn – 11 commentaires

7 votes

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Réalisation d’un formulaire SPIP type CVT avec le plugin Saisies

Pré-requis :

Réalisé avec SPIP 2.1.2 et les plugins suivants :

  • Saisies : Version : 1.8.12 [42956]
  • Bonux : Version : 2.2.14 [42736]
  • Verifier : Version : 0.1.6 [42959]
  • Yaml : Version : 1.4.1 [42112]

Avertissements

Cet article est

  • un « retour d’expérience » sur l’utilisation du plugin Saisies pour la mise en place d’un formulaire ;
  • un partage de réponses aux questions qui se sont posées à moi lors de ma découverte du plugin.

Cet article n’est pas

  • exhaustif : les descriptions qui suivent partent seulement d’un point de vue particulier (un des intérêts de Saisies étant sa pluralité d’approche en terme de développement) ;
  • une documentation développeur.

Le formulaire

Pour cet exemple, le formulaire à réaliser contient 4 champs et 1 fieldset :

  • Fieldset Le film :
    • titre,
    • année,
    • genre
  • Avis : c’est bien ?

Comme tous les formulaires C.V.T, créer un couple de fichiers HTML/PHP dans le dossier squelettes/formulaires :

  • film.html qui accueillera les balises gérées par SPIP et Saisies
  • film.php où sera paramétré le formulaire avec les fonctions C, V et T

Première étape : déclarer ces champs comme des saisies à l’aide d’un tableau PHP [1], dans film.php :

  1. $mes_saisies = array(
  2.   array( // le fieldset
  3.     'saisie' => 'fieldset',
  4.     'options' => array(
  5.       'nom' => 'le_film',
  6.       'label' => 'Le film'
  7.     ),
  8.     'saisies' => array( // les champs dans le fieldset
  9.       array( // champ titre : ligne de texte
  10.           'saisie' => 'input',
  11.           'options' => array(
  12.             'nom' => 'titre',
  13.             'label' => 'Son titre',
  14.             'obligatoire' => 'oui'
  15.           )
  16.       ),
  17.       array( // champ annee : 4 chiffres
  18.           'saisie' => 'input',
  19.           'options' => array(
  20.             'nom' => 'annee',
  21.             'label' => 'Année de réalisation',
  22.             'size' => 4,
  23.             'maxlength' => 4
  24.           )
  25.       ),
  26.       array( // champ genre : liste déroulante
  27.         'saisie' => 'selection',
  28.         'options' => array(
  29.           'nom' => 'genre',
  30.           'label' => 'Son genre',
  31.           'datas' => array(  // apparté : penser à ranger les choix par ordre alphabétique (ou numérique), c'est plus facile à trouver pour ceux qui utilisent le formulaire
  32.             'animation' => 'Animation',
  33.             'comedie' => 'Comédie',
  34.             'docu' => 'Documentaire',
  35.             'drame' => 'Drame',
  36.             'sf' => 'Science-fiction'
  37.           )
  38.         )
  39.       ),
  40.     )
  41.   ),
  42.   array( // hors fieldset : avis
  43.     'saisie' => 'oui_non',
  44.     'options' => array(
  45.       'nom' => 'c_bien',
  46.       'label' => 'C\'est bien ?'
  47.     )
  48.   ),
  49. )
  50. );

Tous les éléments de saisie du formulaire sont définis. Il reste cependant le bouton d’envoi du formulaire (submit) à créer.

Ici (et à l’heure actuelle), deux possibilités :

  1. écrire le bouton en HTML dans film.html :
    <input type="submit" value="envoyer" />
  2. créer son propre type de saisie pour cet élément

Créer son propre type de saisie

Créer un sous-répertoire saisies dans /squelettes, y placer un nouveau fichier qui prendra pour nom le type de la saisie : mon_submit.html et y écrire le code HTML/SPIP du bouton :

  1. [(#REM)  
  2.   Parametres :
  3.   -* nom (obligatoire) : attributs name et id du bouton
  4.   -* texte (optionnel) : attribut value, par défaut Envoyer
  5.   -* class (optionnel) : attribut class, par défaut submit
  6.  
  7.   Exemple d'appel :
  8.         [(#SAISIE{mon_submit, envoyer,
  9.    texte=Ok
  10.         })]
  11. ][
  12. <input type="submit" name="(#ENV{nom})" class="#ENV{class, submit}" id="bouton_#ENV{nom}" value="#ENV{texte,Envoyer}" />]

(prendre pour exemple un des fichiers de saisie du plugin dans /plugins/saisies/saisies/)

Ajouter la déclaration du bouton à la fin du tableau $mes_saisies (l’ordre de déclaration définit l’ordre d’affichage) :

  1.   'saisie' => 'mon_submit',
  2.   'options' => array (
  3.     'nom' => 'envoyer',
  4.     'texte' => 'Ok'
  5.   )
  6. )

Générer et Charger le formulaire

Les saisies sont prêtes, on peut les appeler avec #GENERER_SAISIES{#ENV{mes_saisies}} dans film.html

Cette balise ne produit que les éléments contenus dans le formulaire. Il reste donc un peu de travail pour terminer ce formulaire :

  1. [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV**{message_ok})</p>]
  2. [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV**{message_erreur})</p>]
  3. [(#EDITABLE|oui)
  4.   <form id="film_form" name="film_form" action="#ENV{action}" method="post">
  5.     #ACTION_FORMULAIRE{#ENV{action}}
  6.     <ul>
  7.       #GENERER_SAISIES{#ENV{mes_saisies}}
  8.     </ul>
  9.   </form>]

Maintenant, le formulaire peut être appelé avec la balise #FORMULAIRE_FILM dans un squelette ou avec le raccourci typographique <formulaire|film> à l’intérieur d’un article par exemple.

En prenant ce dernier exemple et en affichant l’article dans la partie publique, rien ne se passe ...c’est normal.

#ENV{mes_saisies} « n’existe pas » encore dans le contexte de la page affichée. Pour ce faire, il faut d’abord mettre en œuvre les fonctions C, V et T qui vont gérer toutes les variables :

  1. Charger les données de Saisies et les champs à manipuler par ces fonctions
  2. Vérifier les valeurs envoyées par le formulaire
  3. Traiter ces données vérifiées
  4. Ainsi qu’une fonction qui permettra d’envoyer à ce trio la structure des saisies (tableau $mes_saisies). Appelons-la mes_saisies_film().
  1. function mes_saisies_film() {
  2.   $mes_saisies = array (
  3.     ...
  4.   );
  5.   return $mes_saisies;
  6. }
  7. function formulaires_film_charger_dist() {
  8. // on charge les saisies et les champs qui nécessitent un accès par les fonctions
  9.   $valeurs = array(
  10.     'titre' => '',
  11.     'genre' => '',
  12.     'annee' => '',
  13.     'c_bien' => '',
  14.     'mes_saisies' => mes_saisies_film()
  15.   );
  16.   return $valeurs;
  17. }

En recalculant l’article contenant le formulaire, il doit maintenant s’afficher.

Vérifier les saisies

Le plugin Verifier entre en scène. Saisies utilise un pipeline pour s’y « brancher ». Il est toutefois nécessaire de déclarer dans la structure des saisies les vérifications souhaitées : ajouter un tableau verifier dans le tableau de la saisie à... vérifier.

Ici, le champ annee doit être un nombre (type entier) compris entre 1895 et l’année en cours + 1 (on pourrait anticiper une sortie) :

  1. $mes_saisies = array(
  2.     ...
  3.       array(
  4.         'saisie' => 'input',
  5.         'options' => array(
  6.           'nom' => 'annee',
  7.           'label' => 'Année de réalisation',
  8.           'size' => 4,
  9.           'maxlength' => 4
  10.         ),
  11.         'verifier' => array(
  12.           'type' => 'entier',
  13.           'options' => array (min => 1895, max => (date('Y')+1))
  14.         )
  15.       ),
  16.     ...
  17.   );

Le tableau verifier peut prendre plusieurs options, selon son type
 [2]. Se reporter aux fichiers de vérification du plugin dans /plugins/verifier/verifier/.

Il suffit ensuite de compléter la fonction formulaires_film_verifier dans film.php :

  1. function formulaires_film_verifier_dist() {
  2.   // on va chercher le pipeline saisies_verifier() dans son fichier
  3.   include_spip('inc/saisies');
  4.  
  5.   // on charge les saisies
  6.   $mes_saisies = mes_saisies_film();
  7.  
  8.   // saisies_verifier retourne un tableau des erreurs s'il y en a, sinon traiter() prend le relais
  9.   return saisies_verifier($mes_saisies);
  10. }

Traiter le formulaire

La fonction « T » dans film.php est appelée après la fonction « V », si celle-ci ne retourne pas d’erreurs.

  1. function formulaires_film_traiter_dist() {
  2.   // on charge les saisies, si besoin
  3.   $mes_saisies = mes_saisies_film();
  4.  
  5.   // Traitement des données reçues du formulaire,
  6.   // par mail par ex ou insertion dans une base
  7.     ...
  8.    
  9.   // S'il y a des erreurs, elles sont retournées au formulaire
  10.   return array('message_erreur'=>'Le film n\'a pas été enregistré');
  11.  
  12.   // Sinon, le message de confirmation est envoyé
  13.   return array('message_ok'=>'Le film a été enregistré');
  14. }

Notes

[1Voir la documentation de Saisies

[2Les types de vérification fournies par le plugin Verifier :

  • code_postal : code postal français, composé de 5 chiffres
  • date  : date au format JJ/MM/AAAA (avec séparateurs souples : espace / - .)
  • decimal  : un entier cohérent peut être extrait de la valeur
  • email  : validité d’une adresse de courriel
  • entier  : un entier cohérent peut être extrait de la valeur
  • id_document : la valeur correspond à un id_document valide
  • regex  : une valeur suivant une expression régulière.
  • siren_siret : SIREN (9 caractères) ou SIRET (14 caractères)
  • taille  : taille minimale/maximale, pour un mot de passe par exemple
  • telephone  : numéro de téléphone. Pour l’instant seulement avec le schéma français.
  • url  : URL format web

Références des vérifications

Retour en haut de la page

Vos commentaires

  • Le 11 mai 2011 à 15:38, par rburton En réponse à : Un formulaire C.V.T avec Saisies par l’exemple

    Bonjour,
    après validation du formulaire et insertion en bdd, comment récupérer dans la page publique l’id de l’enregistrement créé ?

    Merci,
    RB

    Répondre à ce message

  • Le 14 mars 2011 à 21:03, par Matthieu Marcillaud En réponse à : Un formulaire C.V.T avec Saisies par l’exemple

    Autre chose, sachant que tu peux passer une valeur par défaut dans une saisie, tu pourrais lister tous les champs à utiliser et leurs valeurs par défaut également dans le charger(). Je me demande si Rastapopoulos a fait une fonction pour cela dans saisies.

    Répondre à ce message

  • Le 15 mars 2011 à 01:03, par Joseph En réponse à : Un formulaire C.V.T avec Saisies par l’exemple

    On peut encore améliorer les choses pour la partie charger du formulaire. En effet, saisies fournit une fonction saisies_charger_champs(). Dès lors, la fonction charger peut devenir :

    function mes_saisies_film() {
      $mes_saisies = array (
        ...
      );
      return $mes_saisies;
    }
    function formulaires_film_charger_dist() {
    // on charge les saisies et les champs
      include_spip('inc/saisies');
      $mes_saisies = mes_saisies_film();
      $contexte = saisies_charger_champs($mes_saisies);
      $contexte['mes_saisies'] = $mes_saisies;
      return $contexte;
    }
    • Le 15 mars 2011 à 21:47, par RastaPopoulos En réponse à : Un formulaire C.V.T avec Saisies par l’exemple

      Nan nan :

      1. function formulaires_film_saisies_dist(){
      2.         return array(
      3.                 // le tableau de saisies
      4.         );
      5. }

      Ça c’est LA bonne méthode propre depuis la 1.9.0. :)

      À tester/améliorer si besoin, mais normalement ça fait tout charger() et tout verfier() tout seul. En tout cas les besoins de base. Et à documenter ensuite... :)

    Répondre à ce message

  • Le 15 mars 2011 à 19:37, par charles En réponse à : Un formulaire C.V.T avec Saisies par l’exemple

    Salut et merci pour cette note.

    Je suis super embêter j’ai fait un peu la même chose mais je n’arrive pas à insérer en bdd.
    Tout est bon sauf ma fonction _traiter, pourriez vous m’aider ? Auriez vous une idée ?

    1. function formulaires_voter_traiter_dist($id_article,$id_auteur) {
    2.         $matable = array(`id_vote`, `id_article`, `id_auteur`, `real`, `image`, `jeu`, `scenar`, `amour`, `total`, `commentaire`, `date`);
    3.         $where = array('id_article = '.$id_article ,'id_auteur = '.$id_auteur);
    4.        
    5.         $real = _request('real');
    6.         $image = _request('image');
    7.         $jeu = _request('jeu');
    8.         $scenar = _request('scenar');
    9.         $amour = _request('amour');
    10.         $commentaire = _request('commentaire');
    11.         $total = $real + $image + $jeu + $scenar + $amour;
    12.         if (!sql_countsel("spip_votes_films", $where)) {
    13.                         $res = sql_select('id_vote','spip_votes_films');
    14.                         $id_vote = sql_countsel('spip_votes_films') +1;
    15.                         $champs = array(
    16.                                 'id_vote'=>$id_vote,
    17.                                 'id_article'=>$id_article,
    18.                                 'id_auteur'=>$id_auteur,
    19.                                 'real'=>$real,
    20.                                 'image'=>$image,
    21.                                 'jeu'=>$jeu,
    22.                                 'scenar'=>$scenar,
    23.                                 'amour'=>$amour,
    24.                                 'total'=>$total,
    25.                                 'commentaire'=>sql_quote($commentaire),
    26.                                 'date'=> date('Y-m-d H:i:s')
    27.                         );
    28.                         sql_insertq("spip_votes_films",$champs);               
    29.                 } else {
    30.                         $id_vote = sql_select($matable,'spip_votes_films', $where);
    31.                         $champs = array(
    32.                                 'id_vote'=>$id_vote,
    33.                                 'id_article'=>$id_article,
    34.                                 'id_auteur'=>$id_auteur,
    35.                                 'real'=>$real,
    36.                                 'image'=>$image,
    37.                                 'jeu'=>$jeu,
    38.                                 'scenar'=>$scenar,
    39.                                 'amour'=>$amour,
    40.                                 'total'=>$total,
    41.                                 'commentaire'=>sql_quote($commentaire),
    42.                                 'date'=> date('Y-m-d H:i:s')
    43.                         );
    44.        
    45.                         sql_updateq('spip_votes_films',$champs,$where);
    46.         }
    47.        
    48. //      return array('message_ok'=>'Votre message a bien été pris en compte. Vous recevrez prochainement une réponse !');

    Répondre à ce message

  • Le 14 mars 2011 à 20:56, par Matthieu Marcillaud En réponse à : Un formulaire C.V.T avec Saisies par l’exemple

    Sympa. D’autant plus que je ne connaissais pas saisies_verifier($mes_saisies);

    Je pense par contre qu’il vaudrait mieux passer dans charger() « _saisies » ou « _mes_saisies » plutôt que « saisies » ou « mes_saisies » : le souligné en premier indique à SPIP de ne pas effectuer de traitements automatiques sur les données (http://programmer.spip.org/Charger-les-valeurs-du-formulaire).

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Calendrier Mini 2.0

    19 mai – commentaires

    Ce plugin ajoute la balise #CALENDRIER_MINI qui insère un petit widget de navigation par mois dans les dates des évènements. Fonctionnement du mini calendrier Le mini calendrier présente un mois à la fois. Les jours du mois comportant des (...)

  • SPIP Zen Garden

    12 novembre 2009 – 135 commentaires

    Le plugin Zen Garden, ou Jardin Zen, vous permet de gérer une galerie de thèmes pour votre site, et de changer très facilement de thèmes parmi les thèmes disponibles. Pré-requis Le jardin Zen nécessite d’utiliser un squelette comme le squelette Zpip (...)

  • Le Couteau Suisse

    4 mai 2007 – 1363 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

  • Pagination_simple

    5 août 2009 – commentaires

    Un modèle de pagination ultra simple pour vos éléments SPIP.

  • Plugin GMap : géolocalisation et cartographie paramétrable

    16 octobre 2011 – 56 commentaires

    À quoi sert ce plugin ? Compatibilité et installation Configuration Géolocalisation Cartographie Boucles, balises et modèles Extensions et personnalisations [introhttp://www.spip-contrib.net/Mediatheque] pour avoir accès à l’interface de (...)