quickstart-create-form.xml 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- Reviewed: no -->
  3. <sect1 id="learning.quickstart.create-form">
  4. <title>Créer un formulaire</title>
  5. <para>
  6. Pour que notre livre d'or soit utile, nous allons avoir besoin d'un formulaire permettant de
  7. le remplir.
  8. </para>
  9. <para>
  10. Nous devons donc créer un formulaire. Pour créer un formulaire vierge, exécutez la commande:
  11. </para>
  12. <programlisting language="shell"><![CDATA[
  13. % zf create form Guestbook
  14. Creating a form at application/forms/Guestbook.php
  15. Updating project profile '.zfproject.xml'
  16. ]]></programlisting>
  17. <para>
  18. Ceci créera le dossier <filename>application/forms/</filename> avec un fichier de classe
  19. <filename>Guestbook.php</filename>. Ouvrez ce fichier et mettez le à jour comme suit:
  20. </para>
  21. <programlisting language="php"><![CDATA[
  22. // application/forms/Guestbook.php
  23. class Application_Form_Guestbook extends Zend_Form
  24. {
  25. public function init()
  26. {
  27. // La méthode HTTP d'envoi du formulaire
  28. $this->setMethod('post');
  29. // Un élément Email
  30. $this->addElement('text', 'email', array(
  31. 'label' => 'Your email address:',
  32. 'required' => true,
  33. 'filters' => array('StringTrim'),
  34. 'validators' => array(
  35. 'EmailAddress',
  36. )
  37. ));
  38. // Un élément pour le commentaire
  39. $this->addElement('textarea', 'comment', array(
  40. 'label' => 'Please Comment:',
  41. 'required' => true,
  42. 'validators' => array(
  43. array('validator' => 'StringLength', 'options' => array(0, 20))
  44. )
  45. ));
  46. // Un captcha
  47. $this->addElement('captcha', 'captcha', array(
  48. 'label' => 'Please enter the 5 letters displayed below:',
  49. 'required' => true,
  50. 'captcha' => array(
  51. 'captcha' => 'Figlet',
  52. 'wordLen' => 5,
  53. 'timeout' => 300
  54. )
  55. ));
  56. // Un bouton d'envoi
  57. $this->addElement('submit', 'submit', array(
  58. 'ignore' => true,
  59. 'label' => 'Sign Guestbook',
  60. ));
  61. // Et une protection anti CSRF
  62. $this->addElement('hash', 'csrf', array(
  63. 'ignore' => true,
  64. ));
  65. }
  66. }
  67. ]]></programlisting>
  68. <para>
  69. Le formulaire ci-dessus définit cinq éléments: une adresse email, un champ commentaire, un
  70. <acronym>CAPTCHA</acronym> anti spam, un bouton d'envoi et une protection anti
  71. <acronym>CSRF</acronym>.
  72. </para>
  73. <para>
  74. Maintenant nous allons ajouter une action <methodname>signAction()</methodname> à notre
  75. <classname>GuestbookController</classname> qui va s'occuper de la soumission du formulaire. Pour
  76. créer cette action et son script de vue, éxécutez:
  77. </para>
  78. <programlisting language="shell"><![CDATA[
  79. % zf create action sign Guestbook
  80. Creating an action named sign inside controller
  81. at application/controllers/GuestbookController.php
  82. Updating project profile '.zfproject.xml'
  83. Creating a view script for the sign action method
  84. at application/views/scripts/guestbook/sign.phtml
  85. Updating project profile '.zfproject.xml'
  86. ]]></programlisting>
  87. <para>
  88. Comme vous le voyez d'après l'affichage, ceci va créer une méthode <methodname>signAction()</methodname>
  89. dans notre contrôleur, ainsi que le script de vue approprié.
  90. </para>
  91. <para>
  92. Ajoutons de la logique dans notre action. Nous devons d'abord vérifier le type de requête HTTP
  93. <acronym>POST</acronym> ou <acronym>GET</acronym>; dans ce dernier cas nous affichons simplement
  94. le formulaire. Cependant, si nous possédons une requête <acronym>POST</acronym>, nous allons vouloir
  95. valider le formulaire par rapport aux données postées, et s'il est valide, créer une nouvelle entrée
  96. et la sauvegarder. La logique ressemble à ceci:
  97. </para>
  98. <programlisting language="php"><![CDATA[
  99. // application/controllers/GuestbookController.php
  100. class GuestbookController extends Zend_Controller_Action
  101. {
  102. // indexAction() ici ...
  103. public function signAction()
  104. {
  105. $request = $this->getRequest();
  106. $form = new Application_Form_Guestbook();
  107. if ($this->getRequest()->isPost()) {
  108. if ($form->isValid($request->getPost())) {
  109. $comment = new Application_Model_Guestbook($form->getValues());
  110. $mapper = new Application_Model_GuestbookMapper();
  111. $mapper->save($comment);
  112. return $this->_helper->redirector('index');
  113. }
  114. }
  115. $this->view->form = $form;
  116. }
  117. }
  118. ]]></programlisting>
  119. <para>
  120. Bien sur, nous devons aussi éditer le script de vue. Editez
  121. <filename>application/views/scripts/guestbook/sign.phtml</filename> avec ceci:
  122. </para>
  123. <programlisting language="php"><![CDATA[
  124. <!-- application/views/scripts/guestbook/sign.phtml -->
  125. Utilisez le formulaire ci-après pour signer notre livre d'or!
  126. <?php
  127. $this->form->setAction($this->url());
  128. echo $this->form;
  129. ]]></programlisting>
  130. <note>
  131. <title>Améliorer le rendu visuel du formulaire</title>
  132. <para>
  133. Ce formulaire n'a pas un look terrible, peu importe : l'apparence d'un formulaire est entièrement
  134. personnalisable! Voyez la <link
  135. linkend="zend.form.decorators">section sur les décorateurs dans le guide de réference</link>
  136. pour plus de détails.
  137. </para>
  138. <para>
  139. Aussi, vous pouvez être intéréssés par <link
  140. linkend="learning.form.decorators.intro">notre tutoriel sur les décorateurs de formulaires</link>.
  141. </para>
  142. </note>
  143. <note>
  144. <title>Checkpoint</title>
  145. <para>
  146. Naviguez maintenant sur "http://localhost/guestbook/sign". Vous devriez voir ceci dans votre navigateur:
  147. </para>
  148. <para>
  149. <inlinegraphic width="421" scale="100" align="center" valign="middle"
  150. fileref="figures/learning.quickstart.create-form.png" format="PNG" />
  151. </para>
  152. </note>
  153. </sect1>