Les vues fondées sur les classes avec Django

00:00:00 :Dans cette partie, on va voir la classe UpdateView qui va nous permettre de mettre à jour un article de notre base de données.Donc ici, j'ai le chemin qui me permet d'accéder à un article en particulier avec le slug à l'intérieur de l'URL.
00:00:14 :Donc je vais rajouter ici une ligne et je vais rajouter à la fin, on va mettre Edit tout simplement, qui va me permettre de modifier cet article de blog.
00:00:23 :Donc là, pour l'instant, on a la vue de détail, donc je vais modifier cette vue. Je vais également en profiter ici pour modifier le nom.
00:00:30 :Je vais mettre Edit et on va aller dans notre fichier views.py pour créer notre vue d'édition.Donc on va faire classe BlogPostUpdateView et elle va hériter de UpdateView.
00:00:41 :Et à l'intérieur de cette classe, on va là encore spécifier qu'on souhaite lier cette classe à notre modèle BlogPost.On va également changer le template, encore une fois, puisque là encore, par défaut, Django va nous proposer un template par défaut.
00:00:55 :Avant ça, donc je vais juste reprendre cette classe et la mettre dans mon fichier urs.py, donc à la place de BlogPostDetailView.Donc là, on va l'importer ici, BlogPostUpdateView, on la met AsView dans notre URL ici.
00:01:07 :Et ce qu'on va faire également, c'est ajouter un bouton sur les articles pour nous permettre de les modifier.Donc par exemple ici, quand je vais sur un article, je vais rajouter un lien qui va nous permettre d'accéder à cette vue d'édition.
00:01:18 :Donc là, ce que je vais faire, c'est que je vais aller dans mon fichier de template, donc le fichier post.html qui répertorie un article en particulier.
00:01:26 :Et en dessous du titre, on va le mettre directement ici.On va le mettre là, on va faire un lien et dans ce lien, on va utiliser la balise URL qui va rediriger vers BlogPostEdit avec post.slug.
00:01:39 :Donc ça, on peut spécifier ou non, on peut mettre slug égal pour que ce soit plus explicite.Et on va mettre ici éditer ou modifier l'article.
00:01:48 :Donc ça, ça va nous permettre d'accéder à notre vue d'édition.Donc là, on a modifié l'article, je vais le mettre tout ça dans un P pour que ce soit un bloc.
00:01:59 :Voilà, donc modifier l'article.Donc je clique dessus et donc là, j'arrive sur une erreur qui me dit que Fields n'est pas défini.Donc là, on a exactement la même chose que dans notre CreateView.
00:02:08 :Soit il va falloir définir un formulaire, soit il va falloir définir des champs que l'on souhaite utiliser pour notre formulaire.Donc moi, je vais reprendre mon FormClass ici.
00:02:16 :On va le mettre donc FormClass égal à BlogPostForm.Donc BlogPostForm qui est égal à ce formulaire ici avec le titre, la description et le contenu.
00:02:24 :Donc j'actualise et là, on va avoir cette fois-ci l'erreur de template.Donc dans le cas d'une vue UpdateView, donc UpdateView ici, ma classe UpdateView,on a le même template qui va être cherché par Django, donc le même template que ce qu'on avait dans CreateView,c'est-à-dire le nom du modèle suivi de "-from".
00:02:41 :Donc nous, on va reprendre en fait ce même fichier HTML, le fichier CreatePost.html.Donc là, le nom n'est plus forcément très explicite puisqu'on l'a appelé CreatePost,mais on va l'utiliser également pour nous permettre de modifier le formulaire.
00:02:53 :Donc si je vais voir dans CreatePost, qu'est-ce que j'ai dans CreatePost ?J'ai tout simplement mon formulaire qui est affiché avec le bouton qui me permet de créer le formulaire.
00:03:01 :Donc là, je vais actualiser et cette fois-ci, j'ai bien mon formulaire.Mais vous voyez qu'à la différence donc de la vue CreateView,cette fois-ci, le formulaire est automatiquement rempli avec les informations de mon article.
00:03:13 :Donc là, dans la vue, on est bien sur Blogslash 5 raisons d'apprendre Python en 2020.Donc ça, c'est tout simplement le slog de mon article et on a le edit à la fin.
00:03:21 :Et on arrive donc sur cette page qui est donc la page CreatePost.html avec déjà les données de rempli.Et je vais pouvoir donc modifier ce formulaire, donc modifier les informations et les soumettre.
00:03:31 :Donc par exemple ici, on pourrait dire dans la description, on pourrait modifier,on pourrait dire découvre finalement 10 raisons d'apprendre Python en 2020.Je vais cliquer sur Créer et là, automatiquement, on est redirigé vers notre article.
00:03:43 :Donc là, on ne voit pas les modifications puisque la description n'est pas affichée.Donc je vais revenir en arrière, je vais remettre ça là ici et à la place,on va changer, on va dire JavaScript à la place de Python.
00:03:52 :Je clique sur Créer et là, on a bien JavaScript qui est indiqué ici.Donc vous voyez qu'avec cette vue, là encore, très rapide, très facile à implémenter.
00:03:59 :On spécifie le modèle, le template, le form qu'on souhaite utiliser et automatiquement,on peut modifier notre article dans la base de données avec vraiment trois lignes de code.
00:04:08 :Donc là, je vais juste remettre Python.Et pour l'instant, vous vous dites que bon ok, c'est sympa, on a le même fichier HTML.Donc là, on pourrait le renommer pour par exemple mettre Create or Edit Post pour que ce soit un peu plus explicite.
00:04:21 :Mais le problème surtout à l'intérieur de ce template, c'est qu'on a ici le bouton qui est indiqué Créer.Donc là, on aimerait bien que ce soit Modifier dans le cas de la modification de l'article et Créer dans le cas où on crée un article.
00:04:33 :Donc là, je vais juste finir la modification.Je vais cliquer sur Créer pour remettre Python ici à la place de JavaScript.Et je vais vous montrer comment on peut très facilement modifier le contexte pour changer le texte qui est affiché sur le bouton.
00:04:45 :Donc pour modifier le contexte, là encore, on va passer par une méthode.Donc on va utiliser GetContextData.Vous voyez que Python me propose là encore l'autocomplétion.
00:04:54 :On a les quarks ici qui sont des paramètres qui pourraient être envoyés à notre contexte.Et on va récupérer donc le contexte à partir de cette même méthode grâce à la fonction super.
00:05:04 :Donc on va dire que contexte est égal à super de GetContextData.Donc on récupère les mêmes données.On va lui passer les quarks au cas où on ait des arguments qui soient envoyés à cette méthode.
00:05:15 :Et on va tout simplement modifier notre contexte ici avant de le retourner.Donc contexte ici, c'est un dictionnaire comme tous les contextes en général.Et on va par exemple ajouter une variable qu'on va appeler SubmitText qui dans ce cas-ci, donc dans le cas de mon UpdateView, va être égal à Modifier.
00:05:32 :Et ensuite, on va retourner le contexte.Donc ça, ça va me permettre d'avoir accès à cette variable SubmitText à l'intérieur de mon fichier HTML.Donc dans CreatePost ici, à la place de cette value qui est égale à Créer,je vais mettre donc ma variable SubmitText.
00:05:47 :Et donc là normalement, si je reviens dans Modifier l'article,vous voyez que j'ai bien le texte du bouton qui est indiqué comme Modifier.Si je vais par contre maintenant sur mon formulaire pour ajouter un article,là on n'a rien qui est indiqué sur le bouton.
00:05:59 :Et c'est normal puisqu'on n'a pas modifié le contexte dans la vue de création.Donc là, je vais revenir dans mes vues.Je vais copier tout ça ici, donc tout le contexte data.
00:06:07 :Et on va dans notre vue CreateView l'ajouter.Donc je vais le mettre à la suite ici.Et à la place de Modifier, ici on va mettre Créer.
00:06:14 :Donc vous voyez que c'est vraiment très facile.On fait juste rajouter cette variable et on y a accès donc à l'intérieur de notre fichier HTML pour la vue de création et pour la vue d'édition.
00:06:25 :Donc là, si j'actualise ma page, cette fois-ci j'ai bien le bouton Créer qui est affiché.Donc vous voyez que vraiment avec ces deux vues,là on a je ne sais pas combien de lignes de code,on en a peut-être une vingtaine en tout, 30 au maximum.
00:06:36 :Eh bien, on a tout ça qui est affiché.On a le formulaire, on peut créer un nouvel article.Alors je vais mettre quelque chose d'un peu plus explicite.
00:06:42 :On va mettre un nouveau article.Un nouvel article, plutôt.Génial.On va mettre une description, un super contenu.Donc là, je crée mon article.Voilà, mon article est disponible ici.
00:06:55 :Je l'affiche.Je veux le modifier.Je clique sur Modifier.J'ai bien tous les champs qui sont automatiquement remplis.Je veux dire finalement une super description et un super contenu.
00:07:04 :Génial.Je clique sur Modifier et automatiquement je suis redirigé après l'édition vers cet article.On pourrait là encore modifier le success URL pour renvoyer vers une autre page.
00:07:14 :Dans ce cas-ci, je trouve ça assez intéressant de revenir sur la page même de l'article après l'avoir modifié.Donc voilà pour la vue Update View avec là encore pas mal de choses qui sont similaires par rapport à cette vue de création et juste donc l'édition du contexte dans ce cas-ci qui me permet de modifier mon fichier HTML.

La classe UpdateView

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

De716

model=BlogPost : obligatoire?

Rechercher sur le site