Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. title: Rédaction de votre première appli Django, partie 4 : Conception d'un formulaire et vues génériques
  2. slug: redaction-de-votre-premiere-appli-django-partie-4-conception-d-un-formulaire-et-vues-generiques
  3. date: 2006-06-17 19:50:21
  4. type: post
  5. vignette: images/logos/django.png
  6. contextual_title1: Le langage de template Django : Pour les auteurs de templates
  7. contextual_url1: 20060815-le-langage-de-template-django-pour-les-auteurs-de-templates
  8. contextual_title2: Comparaison de TurboGears et Django, deux frameworks web Python
  9. contextual_url2: 20060715-comparaison-de-turbogears-et-django-deux-frameworks-web-python
  10. contextual_title3: Rédaction de votre première appli Django, partie 3 : Création des vues de l'interface publique
  11. contextual_url3: 20060617-redaction-de-votre-premiere-appli-django-partie-3-creation-des-vues-de-l-interface-publique
  12. <p>Ce tutoriel commence là où le <a class="reference" href="https://larlet.fr/david/biologeek/archives/20060617-redaction-de-votre-premiere-appli-django-partie-3-creation-des-vues-de-l-interface-publique/">Tutoriel 3</a> s'est achevé. Nous continuons notre
  13. application de sondage en ligne et allons nous intéresser à la génération d'un
  14. formulaire simple et au ré-arrangement de notre code.</p>
  15. <div class="section">
  16. <h1><a id="g-n-rer-un-formulaire-simple" name="g-n-rer-un-formulaire-simple">Générer un formulaire simple</a></h1>
  17. <p>Commençons par mettre à jour notre template de détail de sondage issu du dernier
  18. tutoriel de façon à ce que le template contienne un élement HTML <tt class="docutils literal"><span class="pre">&lt;form&gt;</span></tt>:</p>
  19. <pre class="literal-block">
  20. &lt;h1&gt;{{ poll.question }}&lt;/h1&gt;
  21. {% if error_message %}&lt;p&gt;&lt;strong&gt;{{ error_message }}&lt;/strong&gt;&lt;/p&gt;{% endif %}
  22. &lt;form action=&quot;/polls/{{ poll.id }}/vote/&quot; method=&quot;post&quot;&gt;
  23. {% for choice in poll.choice_set.all %}
  24. &lt;input type=&quot;radio&quot; name=&quot;choice&quot; id=&quot;choice{{ forloop.counter }}&quot; value=&quot;{{ choice.id }}&quot; /&gt;
  25. &lt;label for=&quot;choice{{ forloop.counter }}&quot;&gt;{{ choice.choice }}&lt;/label&gt;&lt;br /&gt;
  26. {% endfor %}
  27. &lt;input type=&quot;submit&quot; value=&quot;Voter&quot; /&gt;
  28. &lt;/form&gt;
  29. </pre>
  30. <p>Un bref rappel :</p>
  31. <blockquote>
  32. <ul class="simple">
  33. <li>Le template ci-dessus affiche un bouton radio pour chaque choix du sondage.
  34. La valeur <tt class="docutils literal"><span class="pre">value</span></tt> de chaque bouton radio est associée à l'ID de chaque choix.
  35. Le nom <tt class="docutils literal"><span class="pre">name</span></tt> de chaque bouton radio est <tt class="docutils literal"><span class="pre">&quot;choice&quot;</span></tt>. Cela signifie que
  36. lorsque quelqu'un sélectionne l'un des boutons radio et soumet
  37. le formulaire, il envoie la donnée de type POST <tt class="docutils literal"><span class="pre">choice=3</span></tt>. C'est un
  38. formulaire HTML 101.</li>
  39. <li>Nous avons assigné l'<tt class="docutils literal"><span class="pre">action</span></tt> du formulaire à
  40. <tt class="docutils literal"><span class="pre">/polls/{{</span> <span class="pre">poll.id</span> <span class="pre">}}/vote/</span></tt>, et nous avons mis <tt class="docutils literal"><span class="pre">method=&quot;post&quot;</span></tt>.
  41. L'utilisation de <tt class="docutils literal"><span class="pre">method=&quot;post&quot;</span></tt> (au contraire de <tt class="docutils literal"><span class="pre">method=&quot;get&quot;</span></tt>) est
  42. très importante, car le fait de soumettre ce formulaire va être à l'origine
  43. d'une modification des données du côté du serveur. À chaque fois que vous
  44. créez un formulaire qui modifie des données sur le serveur, utilisez
  45. <tt class="docutils literal"><span class="pre">method=&quot;post&quot;</span></tt>. Cet adage n'est pas spécifique à Django, ce sont juste
  46. de bonnes pratiques de développement web.</li>
  47. </ul>
  48. </blockquote>
  49. <p>À présent, créons une vue Django qui récupère les données soumises et fait
  50. quelque chose avec. Rappelez-vous, dans le <a class="reference" href="https://larlet.fr/david/biologeek/archives/20060617-redaction-de-votre-premiere-appli-django-partie-3-creation-des-vues-de-l-interface-publique/">Tutoriel 3</a>, nous avons créé une
  51. URLconf pour l'application de sondage qui incluait cette ligne:</p>
  52. <pre class="literal-block">
  53. (r'^(?P&lt;poll_id&gt;\d+)/vote/$', 'monsite.polls.views.vote'),
  54. </pre>
  55. <p>Donc créons une fonction <tt class="docutils literal"><span class="pre">vote()</span></tt> dans <tt class="docutils literal"><span class="pre">monsite/polls/views.py</span></tt>:</p>
  56. <pre class="literal-block">
  57. from django.shortcuts import get_object_or_404, render_to_response
  58. from django.http import HttpResponseRedirect
  59. from monsite.polls.models import Choice, Poll
  60. # ...
  61. def vote(request, poll_id):
  62. p = get_object_or_404(Poll, pk=poll_id)
  63. try:
  64. selected_choice = p.choice_set.get(pk=request.POST['choice'])
  65. except (KeyError, Choice.DoesNotExist):
  66. # Réaffiche le formulaire de vote.
  67. return render_to_response('polls/detail.html', {
  68. 'poll': p,
  69. 'error_message': &quot;Vous n'avez pas sélectionné de choix.&quot;,
  70. })
  71. else:
  72. selected_choice.votes += 1
  73. selected_choice.save()
  74. # Retourne toujours un HttpResponseRedirect après validation
  75. # des données POST. Ceci empèche que les données soient postées
  76. # deux fois si l'utilisateur clique sur le bouton Précédent.
  77. return HttpResponseRedirect('/polls/%s/results/' % p.id)
  78. </pre>
  79. <p>Ce code inclus des parties que nous n'avons pas encore étudiées dans ce tutoriel :</p>
  80. <blockquote>
  81. <ul>
  82. <li><p class="first"><tt class="docutils literal"><span class="pre">request.POST</span></tt> est un objet de type dictionnaire qui vous laisse accéder
  83. aux données soumises avec les mots-clé. Dans notre cas,
  84. <tt class="docutils literal"><span class="pre">request.POST['choice']</span></tt> retourne l'ID du choix sélectionné, sous forme
  85. de chaîne de caractères. Les valeurs issues de <tt class="docutils literal"><span class="pre">request.POST</span></tt> sont
  86. toujours des chaînes de caractères.</p>
  87. <p>Notez que Django vous permet aussi d'accéder via <tt class="docutils literal"><span class="pre">request.GET</span></tt> aux
  88. données de type GET de la même façon -- mais nous utilisons explicitement
  89. <tt class="docutils literal"><span class="pre">request.POST</span></tt> dans notre code, pour nous assurer que la modification des
  90. données se fasse uniquement par un appel à POST.</p>
  91. </li>
  92. <li><p class="first"><tt class="docutils literal"><span class="pre">request.POST['choice']</span></tt> déclenchera une <tt class="docutils literal"><span class="pre">KeyError</span></tt> si <tt class="docutils literal"><span class="pre">choice</span></tt> n'a pas
  93. été obtenu par des données de type POST. Le code ci-dessus vérifie les
  94. <tt class="docutils literal"><span class="pre">KeyError</span></tt> et réaffiche le formulaire de sondage avec un message
  95. d'erreur si <tt class="docutils literal"><span class="pre">choice</span></tt> n'a pas été donné.</p>
  96. </li>
  97. <li><p class="first">Après avoir incrémenté le compteur associé au choix soumis, le script
  98. retourne une <tt class="docutils literal"><span class="pre">HttpResponseRedirect</span></tt> à la place du <tt class="docutils literal"><span class="pre">HttpResponse</span></tt>
  99. habituel. <tt class="docutils literal"><span class="pre">HttpResponseRedirect</span></tt> prend un seul argument : l'URL
  100. vers laquelle l'utilisateur va être redirigé. Vous pouvez omettre de
  101. mentionner le « <a class="reference" href="http://">http://</a> » et le nom de domaine quand cela est possible.
  102. Cela permet à votre appli d'être portable sur différents domaines.</p>
  103. <p>Comme le commentaire Python le souligne, vous devez toujours retourner une
  104. <tt class="docutils literal"><span class="pre">HttpResponseRedirect</span></tt> après avoir traité une donnée de type POST avec
  105. succès. Cet adage n'est pas spécifique à Django, c'est juste une bonne
  106. pratique de développement web.</p>
  107. </li>
  108. </ul>
  109. </blockquote>
  110. <p>Comme il est mentionné dans le Tutoriel 3, <tt class="docutils literal"><span class="pre">request</span></tt> est un objet
  111. <tt class="docutils literal"><span class="pre">HTTPRequest</span></tt>. Pour en savoir plus au sujet des objets <tt class="docutils literal"><span class="pre">HTTPRequest</span></tt>, lisez
  112. la <a class="reference" href="http://www.djangoproject.com/documentation/request_response/">documentation sur les requêtes et réponses</a>.</p>
  113. <p>Après qu'un vote ait été effectué dans un sondage, la vue <tt class="docutils literal"><span class="pre">vote()</span></tt> redirige
  114. vers la page de résultats du sondage. Écrivons cette vue:</p>
  115. <pre class="literal-block">
  116. def results(request, poll_id):
  117. p = get_object_or_404(Poll, pk=poll_id)
  118. return render_to_response('polls/results.html', {'poll': p})
  119. </pre>
  120. <p>C'est presque la même que la vue <tt class="docutils literal"><span class="pre">detail()</span></tt> du <a class="reference" href="https://larlet.fr/david/biologeek/archives/20060617-redaction-de-votre-premiere-appli-django-partie-3-creation-des-vues-de-l-interface-publique/">Tutoriel 3</a>. La seule
  121. différence est le nom du template. Nous nous occuperons de la redondance plus
  122. tard.</p>
  123. <p>Maintenant, créons un template <tt class="docutils literal"><span class="pre">results.html</span></tt>:</p>
  124. <pre class="literal-block">
  125. &lt;h1&gt;{{ poll.question }}&lt;/h1&gt;
  126. &lt;ul&gt;
  127. {% for choice in poll.choice_set.all %}
  128. &lt;li&gt;{{ choice.choice }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}&lt;/li&gt;
  129. {% endfor %}
  130. &lt;/ul&gt;
  131. </pre>
  132. <p>À présent, rendez vous à l'adresse <tt class="docutils literal"><span class="pre">/polls/1/</span></tt> dans votre navigateur et
  133. soumettez un vote. Vous devriez voir une page de résultats qui est mise à
  134. jour à chacun de vos votes. Si vous soumettez le formulaire sans avoir spécifié
  135. de choix, vous devriez observer le message d'erreur.</p>
  136. </div>
  137. <div class="section">
  138. <h1><a id="utilisez-les-vues-g-n-riques-moins-il-y-a-de-code-mieux-c-est" name="utilisez-les-vues-g-n-riques-moins-il-y-a-de-code-mieux-c-est">Utilisez les vues génériques : Moins il y a de code mieux c'est</a></h1>
  139. <p>Les vues <tt class="docutils literal"><span class="pre">detail()</span></tt> (du <a class="reference" href="https://larlet.fr/david/biologeek/archives/20060617-redaction-de-votre-premiere-appli-django-partie-3-creation-des-vues-de-l-interface-publique/">Tutoriel 3</a>) et <tt class="docutils literal"><span class="pre">results()</span></tt> sont ridiculeusement
  140. simples -- et, comme nous l'avons signalé plus haut, redondantes. La vue
  141. <tt class="docutils literal"><span class="pre">index()</span></tt> (du <a class="reference" href="https://larlet.fr/david/biologeek/archives/20060617-redaction-de-votre-premiere-appli-django-partie-3-creation-des-vues-de-l-interface-publique/">Tutoriel 3</a> aussi), qui affiche une liste de sondages, est
  142. similaire.</p>
  143. <p>Ces vues correspondent à des cas courants de développement Web basic : récupérer
  144. des données de la base de données en fonction d'un paramètre passé dans l'URL,
  145. charger un template et retourner le template complété. Comme c'est si courant,
  146. Django dispose d'un raccourci, baptisé le système des « vues génériques ».</p>
  147. <p>Les vues génériques fournissent une couche d'abstraction tellement importante que
  148. vous n'avez même pas besoin de rédiger du code Python pour écrire votre appli.</p>
  149. <p>Convertissons notre application de sondage en utilisant le système des vues
  150. génériques, nous allons ainsi pouvoir supprimer une bonne partie du code que
  151. nous avons écrit précédemment. Il suffit de quelques étapes pour réaliser la
  152. conversion.</p>
  153. <div class="admonition-pourquoi-ce-r-arrangement-du-code admonition">
  154. <p class="first admonition-title">Pourquoi ce ré-arrangement du code ?</p>
  155. <p class="last">Géneralement, quand vous allez écrire une application Django, vous allez
  156. évaluer si les vues génériques sont une bonne solution à votre problème, et
  157. vous allez les utiliser dès le début sans avoir à refactoriser votre code en
  158. plein développement. Mais ce tutoriel s'est intentionnellement focalisé sur
  159. l'écriture de vues « de manière hardue » jusqu'à présent, de façon à ce que
  160. vous preniez conscience des concepts généraux.</p>
  161. </div>
  162. <p>Premièrement, éditez votre fichier d'URLconf polls/urls.py. Il
  163. devrait ressembler à ça, d'après les tutoriaux précédents:</p>
  164. <pre class="literal-block">
  165. from django.conf.urls.defaults import *
  166. urlpatterns = patterns('monsite.polls.views',
  167. (r'^$', 'index'),
  168. (r'^(?P&lt;poll_id&gt;\d+)/$', 'detail'),
  169. (r'^(?P&lt;poll_id&gt;\d+)/results/$', 'results'),
  170. (r'^(?P&lt;poll_id&gt;\d+)/vote/$', 'vote'),
  171. )
  172. </pre>
  173. <p>Faites le ressembler à:</p>
  174. <pre class="literal-block">
  175. from django.conf.urls.defaults import *
  176. from monsite.polls.models import Poll
  177. info_dict = {
  178. 'queryset': Poll.objects.all(),
  179. }
  180. urlpatterns = patterns('',
  181. (r'^$', 'django.views.generic.list_detail.object_list', info_dict),
  182. (r'^(?P&lt;object_id&gt;\d+)/$', 'django.views.generic.list_detail.object_detail', info_dict),
  183. (r'^(?P&lt;object_id&gt;\d+)/results/$', 'django.views.generic.list_detail.object_detail', dict(info_dict, template_name='polls/results.html')),
  184. (r'^(?P&lt;poll_id&gt;\d+)/vote/$', 'monsite.polls.views.vote'),
  185. )
  186. </pre>
  187. <p>Nous utilisons ici deux vues génériques : <tt class="docutils literal"><span class="pre">object_list</span></tt> et <tt class="docutils literal"><span class="pre">object_detail</span></tt>.
  188. Respectivement, ces deux vues rendent abstraits les concepts « d'affichage d'une
  189. liste d'objets » et « d'affichage d'une page de détails pour un type particulier
  190. d'objet ».</p>
  191. <blockquote>
  192. <ul class="simple">
  193. <li>Chaque vue générique a besoin de connaître sur quelles données est-ce
  194. qu'elle va agir. Ces données sont fournies grâce à un dictionnaire. La
  195. clé <tt class="docutils literal"><span class="pre">queryset</span></tt> de ce dictionnaire pointe sur la liste d'objets qui doit
  196. être manipulée par la vue générique.</li>
  197. <li>La vue générique <tt class="docutils literal"><span class="pre">object_detail</span></tt> attend la valeur ID issue de l'URL qui
  198. doit être appelée <tt class="docutils literal"><span class="pre">&quot;object_id&quot;</span></tt>, nous avons donc changé <tt class="docutils literal"><span class="pre">poll_id</span></tt> en
  199. <tt class="docutils literal"><span class="pre">object_id</span></tt> pour la vue générique.</li>
  200. </ul>
  201. </blockquote>
  202. <p>Par défaut, la vue générique <tt class="docutils literal"><span class="pre">object_detail</span></tt> utilise un template appelé
  203. <tt class="docutils literal"><span class="pre">&lt;nom_appli&gt;/&lt;nom_module&gt;_detail.html</span></tt>. Dans notre cas, ce sera le template
  204. appelé <tt class="docutils literal"><span class="pre">&quot;polls/poll_detail.html&quot;</span></tt>. Donc, renommons <tt class="docutils literal"><span class="pre">polls/detail.html</span></tt> en
  205. <tt class="docutils literal"><span class="pre">polls/poll_detail.html</span></tt>, et changeons la ligne <tt class="docutils literal"><span class="pre">render_to_response()</span></tt> en
  206. <tt class="docutils literal"><span class="pre">vote()</span></tt>.</p>
  207. <p>De façon similaire, la vue générique <tt class="docutils literal"><span class="pre">object_list</span></tt> utilise un template appelé
  208. <tt class="docutils literal"><span class="pre">&lt;nom_appli&gt;/&lt;nom_module&gt;_list.html</span></tt>. Donc, renommons <tt class="docutils literal"><span class="pre">polls/index.html</span></tt> en
  209. <tt class="docutils literal"><span class="pre">polls/poll_list.html</span></tt>.</p>
  210. <p>Puisque nous avons plus d'une entrée dans l'URLconf qui
  211. utilisent <tt class="docutils literal"><span class="pre">object_detail</span></tt> pour l'application de sondage, nous spécifions
  212. manuellement un nom de template pour la vue des résultats :
  213. <tt class="docutils literal"><span class="pre">template_name='polls/results.html'</span></tt>. Sinon, les deux vues auraient utilisé le
  214. même template. Notez l'utilisation de <tt class="docutils literal"><span class="pre">dict()</span></tt> pour retourner un dictionnaire
  215. modifié à la place.</p>
  216. <p>Dans les tutoriels précédents, les templates sont utilisés dans un contexte
  217. contenant les variables <tt class="docutils literal"><span class="pre">poll</span></tt> et <tt class="docutils literal"><span class="pre">latest_poll_list</span></tt>. Ici, les vues
  218. génériques nécessitent d'avoir les variables contextuelles <tt class="docutils literal"><span class="pre">object</span></tt> et
  219. <tt class="docutils literal"><span class="pre">object_list</span></tt>. Éditez vos templates et modifiez chaque référence à
  220. <tt class="docutils literal"><span class="pre">latest_poll_list</span></tt> par <tt class="docutils literal"><span class="pre">object_list</span></tt>, et chaque référence à <tt class="docutils literal"><span class="pre">poll</span></tt> par
  221. <tt class="docutils literal"><span class="pre">object</span></tt>.</p>
  222. <p>Vous pouvez maintenant supprimer les vues <tt class="docutils literal"><span class="pre">index()</span></tt>, <tt class="docutils literal"><span class="pre">detail()</span></tt> et
  223. <tt class="docutils literal"><span class="pre">results()</span></tt> de <tt class="docutils literal"><span class="pre">polls/views.py</span></tt>. Nous n'en avons plus besoin -- elles ont
  224. été remplacées par les vues génériques.</p>
  225. <p>La vue <tt class="docutils literal"><span class="pre">vote()</span></tt> est toujours requise. Néanmoins, elle doit être modifiée pour
  226. être utilisée dans les nouveaux templates et les nouvelles variables
  227. contextuelles.
  228. Changez l'appel au template <tt class="docutils literal"><span class="pre">polls/detail.html</span></tt> par <tt class="docutils literal"><span class="pre">polls/poll_detail.html</span></tt>,
  229. et passez <tt class="docutils literal"><span class="pre">object</span></tt> dans le contexte au lieu de <tt class="docutils literal"><span class="pre">poll</span></tt>.</p>
  230. <p>Lancez le serveur et utilisez votre nouvelle appli de sondage avec les vues
  231. génériques.</p>
  232. <p>Pour davantage de détails quant aux vues génériques, lisez la <a class="reference" href="http://www.djangoproject.com/documentation/generic_views/">documentation
  233. sur les vues génériques</a>.</p>
  234. </div>
  235. <div class="section">
  236. <h1><a id="venir" name="venir">À venir</a></h1>
  237. <p>Les tutoriels s'arrêtent ici pour le moment. Mais revenez prochainement pour la
  238. suite des réjouissances :</p>
  239. <blockquote>
  240. <ul class="simple">
  241. <li>Utilisation avancée des formulaires</li>
  242. <li>Utilisation du framework RSS</li>
  243. <li>Utilisation du framework de cache</li>
  244. <li>Utilisation du framework de commentaires</li>
  245. <li>Fonctionnalités avancées d'administration : Permissions</li>
  246. <li>Fonctionnalités avancées d'administration : Javascript</li>
  247. </ul>
  248. </blockquote>
  249. <p>Vous pouvez maintenant retourner à la <a class="reference" href="https://larlet.fr/david/biologeek/archives/20060617-traduction-francaise-de-la-documentation-de-django-le-framework-web-python/">page d'accueil des traductions de la
  250. documentation de Django</a>.</p>
  251. <p>Cette traduction correspond à la révision 3589 (post 0.95).</p>
  252. </div>