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 – 22

14 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 :

La documentation officielle sur les formulaires de SPIP.
La documentation du plugin Saisies

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 :

$mes_saisies = array(
  array( // le fieldset 
    'saisie' => 'fieldset',
    'options' => array(
      'nom' => 'le_film',
      'label' => 'Le film'
    ),
    'saisies' => array( // les champs dans le fieldset 
      array( // champ titre : ligne de texte
          'saisie' => 'input',
          'options' => array(
            'nom' => 'titre',
            'label' => 'Son titre',
            'obligatoire' => 'oui'
          )
      ),
      array( // champ annee : 4 chiffres
          'saisie' => 'input',
          'options' => array(
            'nom' => 'annee',
            'label' => 'Année de réalisation',
            'size' => 4,
            'maxlength' => 4
          )
      ),
      array( // champ genre : liste déroulante
        'saisie' => 'selection',
        'options' => array(
          'nom' => 'genre',
          'label' => 'Son genre',
          '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
            'animation' => 'Animation',
            'comedie' => 'Comédie',
            'docu' => 'Documentaire',
            'drame' => 'Drame',
            'sf' => 'Science-fiction'
          )
        )
      ),
    )
  ),
  array( // hors fieldset : avis 
    'saisie' => 'oui_non',
    'options' => array(
      'nom' => 'c_bien',
      'label' => 'C\'est bien ?'
    )
  ),
)
);

Télécharger

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 :

écrire le bouton en HTML dans film.html :
<input type="submit" value="envoyer" />
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 :

[(#REM)   
  Parametres :
  -* nom (obligatoire) : attributs name et id du bouton
  -* texte (optionnel) : attribut value, par défaut Envoyer
  -* class (optionnel) : attribut class, par défaut submit
 
  Exemple d'appel :
	[(#SAISIE{mon_submit, envoyer,
    texte=Ok
	})]
][
<input type="submit" name="(#ENV{nom})" class="#ENV{class, submit}" id="bouton_#ENV{nom}" value="#ENV{texte,Envoyer}" />]

Télécharger

(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) :

array(
  'saisie' => 'mon_submit',
  'options' => array (
    'nom' => 'envoyer',
    'texte' => 'Ok'
  )
)

Télécharger

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 :

[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV**{message_ok})</p>]
[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV**{message_erreur})</p>]
 
[(#EDITABLE|oui) 
  <form id="film_form" name="film_form" action="#ENV{action}" method="post">
    #ACTION_FORMULAIRE{#ENV{action}}
    <ul>
      #GENERER_SAISIES{#ENV{mes_saisies}}
    </ul>
  </form>]

Télécharger

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 :

Charger les données de Saisies et les champs à manipuler par ces fonctions
Vérifier les valeurs envoyées par le formulaire
Traiter ces données vérifiées
Ainsi qu’une fonction qui permettra d’envoyer à ce trio la structure des saisies (tableau $mes_saisies). Appelons-la mes_saisies_film().

function mes_saisies_film() {
  $mes_saisies = array (
    ...
  );
  return $mes_saisies;
}
 
function formulaires_film_charger_dist() {
// on charge les saisies et les champs qui nécessitent un accès par les fonctions
  $valeurs = array(
    'titre' => '',
    'genre' => '',
    'annee' => '',
    'c_bien' => '',
    'mes_saisies' => mes_saisies_film()
  );
  return $valeurs;
}

Télécharger

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

$mes_saisies = array(
    ...
      array(
        'saisie' => 'input',
        'options' => array(
          'nom' => 'annee',
          'label' => 'Année de réalisation',
          'size' => 4,
          'maxlength' => 4
        ),
        'verifier' => array(
          'type' => 'entier',
          'options' => array (min => 1895, max => (date('Y')+1))
        )
      ),
    ...
  );

Télécharger

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 :

function formulaires_film_verifier_dist() {
 
  // on va chercher le pipeline saisies_verifier() dans son fichier
  include_spip('inc/saisies');
 
  // on charge les saisies
  $mes_saisies = mes_saisies_film();
 
  // saisies_verifier retourne un tableau des erreurs s'il y en a, sinon traiter() prend le relais
  return saisies_verifier($mes_saisies);
}

Télécharger

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.

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

Télécharger

Notes

[1] Voir la documentation de Saisies

[2] Les 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

Dernière modification de cette page le 8 septembre 2011

Vos commentaires

# Le 29 janvier à 12:57, par richard En réponse à : Un formulaire C.V.T avec Saisies par l’exemple

Bonjour,

dans votre cours, vous avez créé un formulaire pour saisie de données

mais après, qu’est-ce qu’on fait des données

dans article y a pas de place pour ces types de données ?

merci
- # ^ Le 30 janvier à 08:57, par stefdn En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  Salut,
  
  Le traitement des données n’est pas abordé ici, c’est juste un exemple pour essayer de comprendre comment fonctionnent les « saisies ». Tu peux les enregistrer dans la base, les faire traiter par un plugin (pipeline) ou autre...
  
  Pour le 2è point, je ne comprends pas la question (o:
- # ^ Le 30 janvier à 20:13, par richard1 En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  merci,
  
  je voulais dire : les données titre, année, genre ne sont pas des colonnes de la table articles
  
  je suppose qu’il faut créer une nouvelle table ...
  là, c’est difficile, j’ai trouvé de la vielle doc (art de marcilla ...) avec une vieille version de spip
  
  en v3, ca à changé ... si tu connais une bonne doc pour ajouter un champ dans la table articles (exemple no tél) alors merci d’avance
- # ^ Le 31 janvier à 08:53, par stefdn En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  C’est tout l’intérêt des Saisies et le plugin Champs Extra devrait répondre à ta problématique
Répondre à ce message
# Le 6 octobre 2013 à 05:49, par Orinasa En réponse à : Un formulaire C.V.T avec Saisies par l’exemple

Bonjour à vous

J’ai un soucis avec 2 champs de formulaire, checkbox et selection_multiple
Voici la réponse à l’enregistrement :
Warning : md5() expects parameter 1 to be string, array given in /Users/christophevandewalle/Sites/kisetou/ecrire/inc/editer.php on line 355

Warning : md5() expects parameter 1 to be string, array given in /Users/christophevandewalle/Sites/kisetou/ecrire/inc/editer.php on line 355

Warning : addslashes() expects parameter 1 to be string, array given in /Users/christophevandewalle/Sites/kisetou/ecrire/req/mysql.php on line 1186

Warning : Cannot modify header information - headers already sent by (output started at /Users/christophevandewalle/Sites/kisetou/ecrire/inc/editer.php:355) in /Users/christophevandewalle/Sites/kisetou/ecrire/inc/actions.php on line 89

Quelqu’un aurai une idée ?
Merci

Spip 3.0.11
Saisies 1.35.0
Yaml 1.5.1
- # ^ Le 8 février 2014 à 13:58, par Spipmalion En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  As-tu trouvé la réponse à ta question ? J’ai le même problème avec selecteur_article et la Fabrique
- # ^ Le 21 mars 2014 à 21:34, par Sylv En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  Une question vue ici aussi : La fabrique/forum469283
  J’utilise aussi le selecteur d’article. Dans mon cas, l ’erreur md5 est générée par la fonction vérifier() de CVT.
  La transformation :
  set_request('champ', implode(",", _request('champ')));
  
  doit donc être appliquée dans la fonction
  formulaires_editer_Nom_de_l_Objet_vérifier()
  
  avant l’appel à la fonction générique
  formulaires_editer_objet_verifier()
  
  cause : controler_md5() n’accepte pas de tableau pour la valeur d’un champ, il y a peut-être une autre fonction plus adaptée.
Répondre à ce message
# Le 23 août 2013 à 11:12, par RéTo En réponse à : Un formulaire C.V.T avec Saisies par l’exemple

Bonjour à tous,
4 jours que moi et mon collègues essayons de faire quelque chose qui conceptuellement est basique mais en vain : afficher dans le .html les résultats d’un formulaire de choix après traitement par le .php associé.

En clair nous avons créé un formulaire de choix qui, après sélection des critères choisis par l’ utilisateur, va générer la requête SQL à notre banque de données.
les fonctions charger() et verifier() marchent (tests avec return() et autres messages d’erreurs qui s affichent aux moments attendus). traiter() fonctionne aussi (là aussi vérifié grâce a des return).
Ce que nous souhaiterions faire c’est retourner sur notre page de formulaire après traitement des données et afficher nos résultats qui sont tous stockés dans un tableau ’resultats’.
En bref il faudrait que depuis le html, SPIP recupère le tableau ’resultats’, le parcourt et affiche tous ses éléments.
Nous avons déjà tenté les pistes :
#ENV (sur le modèle de l’affichage des erreurs dans le formulaire tel que présenté dans le tuto (http://programmer3.spip.net/Gerer-le-retour-d-erreurs)
#SET et #GET mais on a un peu de mal avec la syntaxe pour que SPIP comprenne où sont les éléments de notre tableau ’resultats’.

Merci d’avance. Espérons que le problème soit réglé avant le week-end. :))
- # ^ Le 23 août 2013 à 11:17, par Maïeul En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  bonjour,
  
  il faudrait voir un peu votre état actuel de cvt + html. Je vous conseille par ailleurs de passer sur l’irc de spip : il y aura sans doute des gens très compétence pour vous répondre.
- # ^ Le 23 août 2013 à 11:21, par RéTo En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  heu question encore plus bête : c est quoi l’irc ??
- # ^ Le 23 août 2013 à 11:26, par Maïeul En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  c’est une sorte de chat autour de spip. En général il y a tjr des gens pour répondre. http://webchat.freenode.net/?channels=%23spip
Répondre à ce message
# 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
- # ^ Le 11 mai 2011 à 17:45, par stefdn En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  Bonjour,
  
  Pour l’insertion des valeurs dans la BDD, j’utilise cette fonction : http://doc.spip.org/@sql_insertq
  comme ça :
  
  $id = sql_insertq($table, $champs_valeurs);
- # ^ Le 12 mai 2011 à 17:04, par rburton En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  Bonjour,
  
  merci, j’avais trouvé ça aussi. Ce que je sais pas c’est comment utiliser cette valeur pour la retourner dans ma page web après validation du formulaire .... j’arrive à retourner message_ok mais pas ça .... ????
  
  Merci d’avance.
  RB
- # ^ Le 12 mai 2011 à 18:13, par stefdn En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  as-tu essayé set_request('champ','valeur') ?
  
  à définir avant le retour de Traiter, avec :
  
  champ = un champ qui va recevoir ton ID (doit être déclaré dans Charger)
  valeur = l’ID retourné par sql_insertq
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.
- # ^ Le 15 mars 2011 à 00:32, par RastaPopoulos En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  Il y a déjà une fonction pour ça dans Saisies. :)
  
  Mais surtout je rappelle que depuis la version 1.9 Saisies permets même de faire un CVT sans ni la fonction charger() ni la fonction verifier() !
  
  Uniquement en déclarant une fonction « formulaires_montruc_saisies() » cf la doc et l’exemple.
- # ^ Le 16 avril 2011 à 15:04, par Yffic En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  
  Pour compléter le message de Rastapopoulos et pour ceux qui cherchent, la doc, c’est par là pour l’instant : http://www.spip-contrib.net/Doc-Saisies-complementaire
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;
}
Télécharger
- # ^ Le 15 mars 2011 à 21:47, par RastaPopoulos En réponse à : Un formulaire C.V.T avec Saisies par l’exemple
  Nan nan :
  
  function formulaires_film_saisies_dist(){
  return array(
  // le tableau de saisies
  );
  }
  Télécharger
  
  Ç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 ?

function formulaires_voter_traiter_dist($id_article,$id_auteur) {
 
	$matable = array(`id_vote`, `id_article`, `id_auteur`, `real`, `image`, `jeu`, `scenar`, `amour`, `total`, `commentaire`, `date`);
	$where = array('id_article = '.$id_article ,'id_auteur = '.$id_auteur);
 
	$real = _request('real');
	$image = _request('image');
	$jeu = _request('jeu');
	$scenar = _request('scenar');
	$amour = _request('amour');
	$commentaire = _request('commentaire');
	$total = $real + $image + $jeu + $scenar + $amour;
 
 
	if (!sql_countsel("spip_votes_films", $where)) {
			$res = sql_select('id_vote','spip_votes_films');
			$id_vote = sql_countsel('spip_votes_films') +1;
			$champs = array(
				'id_vote'=>$id_vote,
				'id_article'=>$id_article,
				'id_auteur'=>$id_auteur,
				'real'=>$real,
				'image'=>$image,
				'jeu'=>$jeu,
				'scenar'=>$scenar,
				'amour'=>$amour,
				'total'=>$total,
				'commentaire'=>sql_quote($commentaire),
				'date'=> date('Y-m-d H:i:s')
			);
			sql_insertq("spip_votes_films",$champs);		
		} else {
			$id_vote = sql_select($matable,'spip_votes_films', $where);
			$champs = array(
				'id_vote'=>$id_vote,
				'id_article'=>$id_article,
				'id_auteur'=>$id_auteur,
				'real'=>$real,
				'image'=>$image,
				'jeu'=>$jeu,
				'scenar'=>$scenar,
				'amour'=>$amour,
				'total'=>$total,
				'commentaire'=>sql_quote($commentaire),
				'date'=> date('Y-m-d H:i:s')
			);
 
			sql_updateq('spip_votes_films',$champs,$where);
	}
 
 
//	return array('message_ok'=>'Votre message a bien été pris en compte. Vous recevrez prochainement une réponse !');

Télécharger

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 ?

Nom [Se connecter]
Courriel (non publié)

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

Texte de votre message
Veuillez laisser ce champ vide :
Prévenez-moi de tous les nouveaux commentaires de cette discussion par email

Ajouter un document

gif, jpg, png

SPIP-Contrib

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

Avertissements

Le formulaire

Créer son propre type de saisie

Générer et Charger le formulaire

Vérifier les saisies

Traiter le formulaire

Notes

Rubriques

Derniers commentaires

Compatibilité

Téléchargements

Saisies

Sur le Web

Vos commentaires

Répondre à cet article

Ça discute par ici

Enluminures typographiques V3

Refonte de l’identité graphique

En travaux 2.0

ScolaSPIP 4

Agenda Fullcalendar facile

Ça spipe par là

SPIP Blog

SPIP - Seenthis

SPIP Forums

SPIP-Zone

SPIP SVN