Créer la vue de profile et le formulaire d'édition

00:00:00 :Dans cette partie, on va rajouter une vue qui va nous permettre d'afficher une vue à l'utilisateur pour qu'il puisse modifier par exemple son nom ou son prénom et toute autre information qu'on pourrait rajouter par la suite à notre modèle utilisateur.
00:00:13 :Donc en gros, une vue de profil avec un formulaire.Ce qu'on va faire, c'est déjà créer cette vue.Pour ça, on va rajouter dans le fichier d'URL un chemin d'URL.
00:00:22 :Je vais aller dans shop.urls.py et ici, on va rajouter une vue.Je vais dupliquer cette ligne.Je vais l'appeler profile. Je vais la remonter juste après le sign up ou même juste après l'admin.
00:00:33 :On va faire une vue qui va s'appeler profil et on va l'appeler profil également.Là, je le mets en anglais. Si je ne me trompe pas, en français, il n'y a pas de E à profil
00:00:42 :mais là, je mets des noms anglais donc je mets profile avec un E.On va faire cette vue dans account.views. Je vais mettre l'import ici
00:00:50 :et on va aller créer cette vue dans account.views.Après logout user, tout à la fin, je rajoute la vue profil qui va récupérer une requête et on va retourner un template que là encore, on n'a pas créé mais qu'on va créer tout de suite qu'on va mettre dans accounts et qui va s'appeler profil.html.
00:01:05 :On va également rajouter un décorateur ici qui va être le décorateur logging required.On va devoir importer. Là encore, option entrée où vous cliquez sur la petite ampoule.
00:01:15 :Import Django contrib hot. Là encore, un truc assez à rallonge.Il se trouve dans Django contrib hot decorators.On a ce décorateur et en fait, ce que ça va faire, c'est qu'on ne pourra pas accéder à cette page si on n'est pas connecté.
00:01:28 :Ce qu'on va faire, c'est créer ensuite ce fichier html, profil.html.Dans mon projet, je vais le mettre à l'intérieur du template de accounts.Dans templates ici, dans accounts, on va dupliquer la vue de login,donc ctrl C, ctrl V. On va l'appeler profil.
00:01:44 :Refactor et dans cette vue qu'on a dupliquée, là on a le formulaire de connexion.Je vais sélectionner et supprimer tout ça. On va juste garder le extend de la base
00:01:52 :et notre bloc de contenu ici.Ensuite, qu'est-ce qu'on va faire ? On va créer un formulaire à partir de notre utilisateur.Les formulaires, c'est quelque chose de spécial dans Django qui va vous permettre à partir d'un modèle de créer un formulaire html qu'on va pouvoir afficher dans le template
00:02:08 :qui va automatiquement contenir les bons champs.Par exemple, dans notre cas, on aura un champ pour le prénom, le nom de famille, l'email, etc.Ça, on va le faire à l'intérieur d'un nouveau fichier qui n'existe pas par défaut et ce fichier, on va l'appeler forms.py. Dans accounts, je crée un nouveau fichier,
00:02:24 :un fichier python que j'appelle forms et c'est à l'intérieur de ce fichier qu'on va créer notre formulaire.Là, on n'a pas les imports qui sont faits par défaut, donc on va devoir faire from Django import forms qui est le module qui va nous permettre de créer des formulaires et on va également importer depuis accounts.models notre modèle d'utilisateur,
00:02:42 :donc le shopper.On va créer une classe pour notre formulaire, donc on va l'appeler userform et elle va hériter de forms.modelform, donc avec une majuscule,
00:02:52 :modelform comme ceci. Donc on a différents types de formulaires,on a des formulaires qui ne sont pas reliés forcément à un modèle et on a des formulaires qui vont être reliés à un modèle.
00:03:00 :Donc vous l'avez compris, modelform, ça va être relié à un modèle et dans notre cas, ça va être relié à notre modèle shopper.Pour ça, on va créer une classe meta, donc c'est une classe à l'intérieur de notre classe et on va spécifier que pour le modèle, on souhaite utiliser notre classe shopper.
00:03:15 :Par défaut, il va utiliser tous les champs qui sont définis dans notre modèle et pour restreindre les champs qui sont affichés, on peut utiliser l'attribut fields ici et spécifier les fields que l'on souhaite.
00:03:26 :On pourrait mettre la chaîne de caractère all comme ceci pour récupérer tous les champs du modèle puisque dans notre cas, on aurait par exemple les champs qui nous permettent de modifier si l'utilisateur est actif, si c'est un super utilisateur, etc.
00:03:38 :Donc on ne veut pas afficher ces options à l'utilisateur et donc on ne va pas les inclure.Dans la liste ici, je vais mettre les champs qu'on souhaite inclure,donc on va avoir le first name, le last name, on va avoir également l'email et on va avoir le password puisqu'on va vérifier que l'utilisateur rentre bien son mot de passe
00:03:53 :pour qu'il puisse modifier son profil.Donc c'est une sécurité supplémentaire qu'on va implémenter pour ne pas que l'utilisateur puisse modifier des informations potentiellement sensibles de son profil sans ré-entrer une nouvelle fois son mot de passe.
00:04:06 :Pour l'instant on a juste first name, last name, ce ne sont pas des informations très sensibles mais on pourrait en rajouter par la suite comme le moyen de paiement ou des choses du genre.
00:04:12 :Donc on va vouloir récupérer le mot de passe.Donc une fois qu'on a fait ça, on va pouvoir créer une instance de ce formulaire dans notre vue et le passer à notre fichier HTML.
00:04:21 :Donc dans views.py ici, je vais faire une instance de UserForm,donc on va l'importer, option entrée, import depuis AccountFromUserForm,on va le récupérer dans une variable que je vais appeler form et on va lui passer des valeurs par défaut.
00:04:35 :Puisque pour l'instant, si je passe ce formulaire à mon contexte,donc on va le passer dans le paramètre contexte ici,on va faire un dictionnaire avec une clé form auquel on passe ce formulaire et dans mon fichier HTML, je vais afficher ce formulaire.
00:04:47 :Donc si je mets ici entre double accolade form,vous allez voir que par défaut il y a des petites choses qui manquent.On va aller afficher notre boutique pour que je puisse vous montrer.
00:04:55 :Donc j'actualise, je vais me rendre sur la vue de profil puisque pour l'instant on n'a pas encore mis deux boutons qui nous permettent d'y accéder.
00:05:01 :Donc je me rends et là vous voyez qu'on a bien automatiquement les différents champs qui sont renseignés pour le prénom, le nom, l'email et le mot de passe.
00:05:07 :Par contre, si je vais inspecter le code source,donc clic droit inspect, vous allez voir que ces informations ici ne sont pas contenues à l'intérieur d'un formulaire.
00:05:16 :On a un label, on a les inputs, mais on n'a pas le tag formulaire.Donc on va devoir le rajouter nous-mêmes.Donc on va mettre au-dessus ici form et on va encadrer notre variable ici de ce tag HTML.
00:05:28 :Pour l'action, on ne va rien mettre puisqu'on va rediriger vers la même page.Donc l'action, c'est l'endroit vers lequel on va diriger le formulaire quand on va cliquer sur le bouton pour le soumettre.
00:05:36 :Dans l'autre cas, on ne va pas en mettre puisqu'on va traiter ces informations sur cette même vue de profil, donc sur cette même adresse slash profile slash.
00:05:44 :Ce qu'on va faire par contre, c'est modifier la méthode puisqu'on va envoyer des informations avec le formulaire.Donc on va mettre une méthode de type post qui va nous permettre d'envoyer des informations du formulaire qui sont contenues dans les différents champs.
00:05:55 :Et pour finir, on va mettre un bouton qui va être de type submit.Donc type égale submit.C'est le bouton qui va nous permettre de sauvegarder notre formulaire et de l'envoyer.
00:06:03 :Donc voilà pour le formulaire de base.On va finir avec une petite méthode ici qui est pratique qui s'appelle asP qui va entourer tous les éléments de notre formulaire d'un bloc de paragraphes.
00:06:13 :Comme ça, ça va nous éviter d'avoir tout sur la même ligne et on aura la place, si j'actualise la vue,vous voyez des éléments qui sont les uns à la suite des autres.
00:06:20 :Donc voilà pour notre formulaire.On l'a créé à partir de notre modèle.On a indiqué les champs que l'on souhaitait afficher et tout ça est donc très versatile puisque si maintenant je retourne dans mon formulaire et que je souhaite finalement de ne pas permettre de changer,par exemple, ce paramètre lastName,
00:06:34 :il suffit de modifier dans cette classe les champs qui sont disponibles.J'actualise et là vous voyez qu'automatiquement mon formulaire réagit en conséquence.Donc très pratique les formulaires.
00:06:43 :Pour faire tout ça, vous voyez là encore avec uniquement quelques lignes de code sans avoir besoin de s'embêter avec l'écriture de tout le code HTML.

Deviens membre Premium magic_button

Premium

Rechercher sur le site

Formulaire de contact

Inscris-toi à Docstring