- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, on va voir comment créer un formulaire assez basiquequi va nous permettre de créer un nouvel utilisateur.On va voir comment créer ce formulaire à l'intérieur du fichier HTML ici.
00:00:11 :J'ai déjà écrit pas mal de codes pour que ça aille un peu plus vitepuisqu'il va y avoir pas mal de choses à l'intérieur de cette partieque l'on va voir ensemble.
00:00:19 :On va avoir un fichier HTML ici qui s'appelle signup.htmlque j'ai mis à l'intérieur du dossier templates icidans mon application Accounts.Quelque chose à noter également, dans le fichier de settings,j'ai changé la langue, donc language code ici,et j'ai mis fr-fr. Par défaut, c'est en-us.
00:00:36 :Ça va me permettre d'avoir automatiquement la traductiondes messages d'erreur et des messages du formulairequi vont être affichés dans mon interface.Également pour ce projet, j'ai un modèle d'utilisateur personnaliséque j'ai renseigné ici dans la variable AuthUserModelqui est égale à cette classe CustomUser.
00:00:54 :Cette classe est tout simplement une classe qui hérite de AbstractUserà laquelle j'ai rajouté tout simplement un champ zip codequi me permet de rentrer le code postal d'un utilisateur.
00:01:03 :On ne va pas l'utiliser, mais c'est juste pour vous montrer iciqu'on utilise un modèle à partir de AbstractUser.AbstractUser, c'est un modèle qui va contenir un nom d'utilisateuret qui va faire toute la vérification au niveau des mots de passeet donc qui va nous permettre de créer un utilisateur
00:01:18 :avec un nom d'utilisateur puisque vous voyez ici que c'estle nom d'utilisateur qui va être utilisé lors de la création d'un utilisateur.Voilà mon modèle custom que l'on va utiliseret j'ai dans ma vue ici une vue SignUpqui redirige grâce à mon URL.
00:01:33 :Si je vais voir dans mon URL ici, j'ai une URL compte nouveauqui redirige vers SignUp.Dans SignUp, on va tout simplement créer un formulairequi va nous permettre de créer un nouvel utilisateur.
00:01:44 :Je vais vous montrer deux façons de faire avec un formulairedirectement créé à l'intérieur du fichier HTML comme ceciavec un formulaire que l'on va créer à partir d'un formulaireque Django nous fournit.
00:01:55 :Voilà pour le préambule.On va voir tout ça en détail.Pour l'instant, on ne va pas regarder tout ça en détail.On va juste regarder ce qu'on retourne ici.
00:02:03 :On retourne notre fichier SignUp.htmlet dans ce fichier SignUp.html, j'ai ici un formulaireavec un label pour le nom d'utilisateurdonc username ici avec un input de type texteet ensuite on va avoir deux inputs pour les mots de passe.
00:02:17 :Un premier pour le mot de passeet un deuxième pour la confirmation du mot de passe.Là, vous voyez d'ailleurs que j'ai oublié de changer pour password2donc on a un label pour le deuxième mot de passeet on a ici des champs de type passwordqui vont masquer automatiquement ce qui est rentré à l'intérieur de ces inputs.
00:02:32 :On a ensuite ici une vérification avec la balisequi nous permet de vérifier si on va avoir des erreurs ou nonet si on a des erreurs, on va les afficher à la suitedans un petit tag ici avec une couleur rougepour indiquer qu'il s'agit bien d'erreurs.
00:02:45 :Et pour finir, on a notre bouton qui va nous permettre de soumettre ce formulaire.Également, on n'oublie pas de mettre le CSRF token ici pour la sécurité.
00:02:53 :Donc là, on a fait un formulaire à la main,on n'a pas utilisé de formulaire de Django,il faut juste s'assurer ici qu'on va avoir donc tout ce qu'il fautpour créer notre utilisateur.
00:03:02 :Donc si je reviens dans mon modèle,on utilise AbstractUser ici et AbstractUser,il va avoir besoin d'un champ Usernamepuisque vous voyez ici que c'est ce champ qui va être utilisédans notre base de données, donc pour UsernameFielddonc on est obligé ici d'avoir un nom d'utilisateurpuisque c'est ça qui va être utilisé
00:03:18 :lors de la création de notre utilisateur.Si on remonte un petit peu dans ce fichier,on va voir qu'on a ici nos deux fonctionsdonc la fonction CreateUserque l'on va utiliser pour créer un utilisateuret vous voyez ici qu'on doit absolument envoyerle nom d'utilisateur et également le mot de passe
00:03:32 :bien entendu, c'est normal pour un utilisateur.Donc à l'intérieur de ma vue, qu'est-ce que je fais ?Je vais vérifier si j'ai une requête de type Postet si c'est le cas, on va récupérerles informations à partir de Request.Post
00:03:43 :qui est un dictionnaire, on va donc récupérerle nom d'utilisateur, le mot de passe numéro 1et le mot de passe numéro 2.Donc là c'est Password1 et Password2 et Usernamec'est ce qui correspond au nom de nos inputs icidonc on a le Name qui est égal à Username
00:03:57 :le Name qui est égal à Password1 et Password2donc c'est exactement ça qu'on récupèreà l'intérieur de mon fichier HTML ici.Et ici comme on va passer par CreateUseron va faire une vérification pour s'assurerque le mot de passe n'est pas différent.
00:04:09 :Donc on va vérifier si Password1est différent de Password2 et si c'est le cason va retourner une erreur, on va dire tout simplementdonc les mots de passe ne correspondent pas.
00:04:17 :On retourne ici avec Renderle TemplateSignup et on fait juste ajoutercette erreur dans le contextedonc avec ce dictionnaire ici qui correspond au contexte.
00:04:25 :Donc si jamais les mots de passene correspondent pas, on va afficher cette erreurici grâce à la balise de la structureconditionnelle. Donc vous voyez ici qu'on fait
00:04:33 :tout à la main puisque dans CreateUsersi je retourne à l'intérieur de cette fonctionqu'est-ce qu'on fait dans cette fonction ?Eh bien on va tout simplement normaliserl'adresse email, normaliserle nom d'utilisateur et ensuite créerun nom d'utilisateur avec ce mot de passe.
00:04:47 :Donc on n'a pas de vérifications qui sont faites icila seule vérification qui est faite c'estsi on n'a pas de nom d'utilisateur qui est envoyémais dans ce cas-ci on a bien un nom d'utilisateurqui va être envoyé puisqu'on l'a à l'intérieurde notre formulaire ici. On pourrait également
00:04:59 :rajouter donc Required à l'intérieurde Input pour spécifier au niveau du HTMLque ce champ est absolumentnécessaire pour valider le formulaire.Donc là vous voyez qu'on n'a pasde vérifications qui sont faites donc on va fairenos vérifications directement à l'intérieurde notre vue ici. Donc ce n'est pas forcément
00:05:15 :la meilleure façon de faire mais on a quelque chosede très basique, de très personnalisé qui estfait ici juste à partir d'unfichier HTML de différents inputsque l'on récupère à l'intérieur de notre vueet qui nous permettent ensuite directementà partir de ma classe CustomUserde créer un utilisateur.
00:05:31 :Donc là je vais passer le nom d'utilisateuret le mot de passe donc je récupère le password1ici et je le passe à passworddans cette fonction que j'appelle pour créer monutilisateur. Et donc une fois que c'est fait
00:05:41 :on va rediriger tout simplement vers unHTTP response et on va mettre Bienvenueavec le nom d'utilisateur.Donc là la seule vérification qui est faite ici c'estsi le mot de passe correspond aumot de passe numéro 2. Donc on va aller voir ce que ça donne
00:05:53 :dans ma vue, je vais actualiserlà j'ai bien le champ pour le nom d'utilisateurdonc on va mettre n'importe quoi ici.Le mot de passe on va mettre 123456et pour la confirmation on va mettre123454321. Donc on n'a pas les mêmes mots de passe
00:06:05 :là on ne voit pas les mots de passe puisqu'on ades champs de type password donc c'est normalqu'on ne les voit pas. On va cliquer
00:06:11 :sur s'inscrire et là vous voyez qu'on a bien notremessage d'erreur qui s'affiche puisque les motsde passe ne correspondent pas. Je vais essayer maintenant
00:06:17 :avec un nom d'utilisateur encore une fois aléatoiremais cette fois-ci avec des mots de passequi correspondent donc je vais mettre 123456dans les deux inputs, je clique surs'inscrire et là on est bien redirigédonc avec le HTTP response qui nous ditBienvenue et le nom d'utilisateur.
00:06:31 :Donc ça fonctionne, on a récupéréles données de notre formulaire,on a juste effectué cette vérification iciqui fonctionnait également et si les mots de passecorrespondent on crée l'utilisateuret on renvoie vers un HTTP responseavec Bienvenue et le nom d'utilisateur.
00:06:45 :Donc vous voyez ici que c'est très simplemais on a très peu de vérifications qui sont faitesici. On préférait à la placeavoir des vérifications pour s'assurerpar exemple que le nom d'utilisateur est correctdonc qu'il ne contient pas par exempledes symboles spécifiques. On aimerait bien
00:06:59 :également vérifier que les mots de passe contiennentsuffisamment de caractères, qu'ils ne sont pastrop communs et qu'ils ne contiennent paspar exemple que des chiffres.
00:07:07 :Donc tout ça, ça va être possible grâce à un formulairequ'on va pouvoir utiliser qui nous est fournidirectement par Django. Donc ce formulaireil se trouve à l'intérieur de Django.
00:07:15 :contrib.auth.formset on va utiliser donc ceUserCreationForm qui estun formulaire de Django qui va nous permettre defaire la même chose mais avec un peu plusde vérifications. Donc à l'intérieur
00:07:27 :de signup ici, plutôt que ce formulairepersonnalisé, je vais envoyer monformulaire UserCreationForm.Donc ici dans signup, je vais enlevertout ça et à la place je vaiscréer un formulaire donc à partir deUserCreationForm et on varetourner ce formulaire à l'intérieurde notre contexte. Donc dans contexte ici
00:07:45 :on va créer une clé form qui estégale à notre formulaire donc notre instanceici et à l'intérieur de notre fichier HTMLici on va enlever notre formulaire personnaliséet à la place on va mettre notre formulaireet on va le mettre asPpour qu'on ait en fait les différents
00:07:59 :éléments qui soient sur une ligneséparée à chaque fois donc avec des paragraphes.Donc là normalement on a tout qui est bonje vais revenir donc ici dansma vue, on a juste le formulaire qui est crééet on l'envoie à notre vue donc normalement ça devraitafficher le formulaire ici. Donc je vais
00:08:13 :actualiser ma page et là j'aibien le formulaire qui est affiché et vous voyezqu'on a écrit en français iciles différents messages qui vont nous permettrede savoir comment on peut créer un utilisateurqui va être valide et ces messages sonten français donc ça c'est vraiment parce que
00:08:27 :dans le fichier de settings ici j'ai changéle language code pour mettre fr-frsinon ces messages seraient affichéspar défaut en anglais. Donc là on a
00:08:35 :différents éléments qui sont affichés, on nous indiqueque le nom d'utilisateur est requisqu'on doit avoir 150 caractères maximumet qu'on ne peut avoir que des lettresdes nombres et ces caractères ici dans le nomd'utilisateur. On a également différentes
00:08:47 :indications pour le mot de passe et donc vous allezvoir ici si je fais un clic droit et que je vais danspage source qu'on a tout notre formulaireici qui est créé automatiquement pour nousavec différentes vérifications qui vont être faitesdirectement au niveau du htmldonc par exemple la longueur maximale du champ
00:09:01 :ici qui est à 150, on voit qu'il estégalement requis donc required icidonc ça veut dire que si on ne spécifiepas un nom d'utilisateur donc si je mets par exemplejuste un mot de passe ici et que j'essaie de validerle formulaire ici, on nous indiqueque ce champ est nécessaire donc on est
00:09:15 :obligé de le remplir. Donc làpour l'instant on a rien qui se passe si je metsun nom d'utilisateur, que je clique surm'inscrire, on va juste rafraîchir la pagemais on n'a aucun utilisateur qui est créédonc pour ça il va falloir aller dans notre vuegérer la création de l'utilisateur
00:09:29 :quand on soumet le formulairedonc pour ça on va vérifier si la méthodeest de type post donc on va mettreif request.methodégale post et on va créernotre formulaire mais cette fois-ci en lui passantles données du formulaire donc on vadonner les données de request.post
00:09:45 :donc si vous n'êtes pas à l'aise avec lesformulaires donc la création et la validationde formulaire, je vous conseille d'aller voirles parties concernant les formulaires dansles formations Django. Donc là on crée
00:09:55 :notre formulaire, on lui passe request.postdonc les données que l'on va récupérer de notreformulaire HTML, si notreformulaire est valide donc if form.isValidon va tout simplement sauvegarderle formulaire et donc ça va sauvegardernotre modèle d'utilisateur dansla base de données et on va ici retournerun HTTP response en disant
00:10:13 :bienvenue.Si ce n'est pas le cas et bien on va récupérerles erreurs. Donc les erreurs on va les ajouterau contexte donc le contexte pour l'instantil est ici donc je vais le déplacer un petit peuje vais à la place en fait créer ici uncontexte vide donc un dictionnaire
00:10:27 :vide et on va ajouter à notrecontexte donc si on passe ici dans le elseça veut dire que notre formulaire n'est pas valide eton va ajouter à notre contexte deserreurs. Donc je vais créer une clé errors
00:10:37 :ici qui va être égale aux erreurs de notreformulaire et ensuite ici on va ajouterà notre contexte le formulairedonc on va dire qu'on a une clé from quiva être égale à notre instance duformulaire que l'on a créé ici et donc iciplutôt que de retourner un dictionnaire je vais retourner
00:10:51 :directement ma variable contexte quiest égale au dictionnaire que l'on aura rempliau fur et à mesure de la vue.Donc si on a une requête de type poston va essayer de valider le formulairesi le formulaire est valide on le sauvegardeet on crée ainsi notre utilisateur dans la base de
00:11:05 :données et on redirige ici versun HTTP response qui nous dit bienvenue.Si ce n'est pas le cas on ajoute les erreurs à notrecontexte, on crée notre formulairevide, on le passe à notre contexteet on affiche la vue signup. Donc la vue signup
00:11:17 :qui dans ce cas-ci condamnera les erreurs de notreformulaire. Si on n'a pas une requêtede type post on ne passera pas à l'intérieur de tout çaet on va tout simplement afficher notreformulaire et les erreurs ne seront pas affichéespuisqu'on n'aura pas d'erreurs à l'intérieur de notre
00:11:29 :contexte. Donc là normalement on a tout ce quifaut, on a notre formulaire qui est affichéon envoie les données dans la vueici et on les traite avec request.post
00:11:37 :et si on a des erreurs on les affiche. Donc on vaaller tester tout ça ici, je reviens sur mon sitej'actualise. Donc là je vais mettre
00:11:43 :un nom d'utilisateur, je vais mettre test user1. On va mettre un mot de passequi va être trop court donc je vais mettre justetest ici dans les deux mots de passe, jeclique sur s'inscrire et là vous voyez qu'ona une erreur puisqu'on ne va pas pouvoir utiliser
00:11:55 :directement la classe vu qu'on aun utilisateur custom qui est utilisépour créer nos utilisateurs. Donclà en fait le manager il va s'attendre à avoirAuth.user donc qui est la classe par défaut
00:12:05 :utilisée par Django pour créer lesutilisateurs et nous à la place on autilisé CustomUser donc c'est la classe qu'on a définiedans notre fichier de settings icidans Auth.user.models. Donc là
00:12:15 :il va falloir rajouter une petite étape supplémentaireil va falloir en fait faire notre propreformulaire à partir de ce formulairedonc vous allez voir c'est très rapide et on aura justebesoin de spécifier en fait qu'on veut utilisernotre modèle custom donc le modèleCustomUser ici qui est défini dans
00:12:29 :models.py à la place du modèled'utilisateur de base de Django.Donc je vais faire une classe CustomSignupForm qui va hériter de cetteclasse UserCreationFormet ici on va créer une classe Metaqui va spécifier que pour le modèle je veux utiliserCustomUser donc CustomUser que j'aiimporté ici à partir de
00:12:47 :Auth.models. On va égalementspécifier les champs que l'on doit utiliserdonc les champs pour notre formulairelà dans ce cas-ci on pourrait les spécifier à la maince qu'on peut faire c'est également aller chercherdirectement pour être un peu plus efficaceles fields qui sont définisdans UserCreationForm. Donc si je vais à l'intérieur de
00:13:03 :cette classe vous allez voir que dans Metaici j'ai déjà un field qui estdéfini avec le username donc on va allerrécupérer en fait cet attribut dela classe Meta directement à la placede fields. Donc ce que je vais faire ici c'est
00:13:15 :UserCreationForm.Meta.Fieldsdonc on va tout simplement récupérer cette valeurici plutôt que de la mettre donc comme çasi jamais Django change et rajoute desvaleurs ici et bien notre formulaireva automatiquement aller les récupérer.
00:13:28 :Donc là la dernière chose qu'il reste à faire c'est derécupérer donc cette classe et de l'utiliserà la place de UserCreationFormet donc dans ce cas-ci on va bienspécifier à Django qu'on veut utilisernotre modèle personnalisé àla place du modèle de base. Donc si je reviens
00:13:42 :dans ma vue je vais actualiserje vais remettre donc testUser1je mets test pour le mot de passe et je confirmeavec test. Et là dans ce cas-ci
00:13:50 :alors on a quelque chose d'un peu bizarre puisqu'on étaitcensé avoir des messages d'erreur et je pense que c'estvoilà tout simplement parce que je ne les ai pas ajoutésdans mon fichier HTML. Donc ici en fait
00:13:58 :ce que je vais faire c'est tout simplement rajouterune boucle. Donc si vous vous souvenezbien ici on a rajouté form.errorsdonc ça c'est un dictionnairequi va contenir des erreurs. Et donc
00:14:08 :ces erreurs je les ai récupérées dans cette variable errorsici qui va donc être un dictionnaire.Donc ici je boucle tout simplement sur error.itemsje récupère les erreurset les messages. Donc là error
00:14:18 :je ne l'utilise pas donc à la place on pourrait justerécupérer le message et faire valuesça fonctionnerait de la même façon.Et j'affiche ici le message de l'erreur à l'intérieurd'un h3 avec un style en rougedonc color red ici pour que ce soit un peu plusvisible qu'il s'agit d'erreurs ici.
00:14:32 :Donc je reviens à l'intérieur de ma vueje vais actualiser, je réessayetestuser1, je mets un mot de passe qui esttrop court et qui n'est pas valide, je clique surs'inscrire et là on a bien nos messages d'erreur quis'affichent. Donc ce mot de passe est trop court
00:14:44 :il doit contenir au minimum 8 caractères et cemot de passe est trop courant. Donc là je vais essayercette fois-ci en validant avec un mot de passequi va fonctionner.
00:14:52 :Donc avec au moins 8 caractèresavec des nombres qui n'est pas tropcourant etc et qui ne contient pas que des chiffresdonc toutes ces règles ici, je clique surs'inscrire et là on a bien bienvenuqui est affiché. Donc ça veut dire que notre
00:15:04 :formulaire a été validé. Donc on est passéici dans request.method==à poste, on a créé notre formulairele formulaire était valide donc on l'a sauvegardédans la base de données et on afficheici bienvenu. Donc pour vérifier que notre
00:15:16 :utilisateur a bien été créé dans la base de donnéesje vais revenir sur cette page et on vaessayer de créer un nouvel utilisateuravec le même nom d'utilisateur. Donc je vais
00:15:24 :remettre un mot de passe valideet cette fois-ci donc l'erreur qu'on devraitavoir d'afficher, voilà c'est que un utilisateuravec ce nom existe déjà.Et le nom d'utilisateur si on va voir à l'intérieurde notre class abstract userce nom d'utilisateur il est absolumentunique. Donc ça c'est obligatoire puisque
00:15:40 :ici c'est le nom d'utilisateurdonc le username ici, le champ usernamequi va être utilisé pour distinguerles différents utilisateurs dans notre base de données.
00:15:48 :Donc il est obligatoire que ce champ soit uniqueet donc quand on va essayer de créerdans notre vue ici un utilisateuravec un nom d'utilisateur qui existe déjàon aura donc cette erreur qui nous dit qu'un utilisateuravec ce nom existe déjà.
00:16:00 :Donc là vous voyez qu'on a quelque chose d'unpeu plus complexe que ce qu'on avait avantavec beaucoup de validations d'erreurs qui sontfaites à notre place. Si vous souhaitez
00:16:08 :aller voir un peu plus en détail ce que ce formulairefait vous pouvez bien entendu aller voirà l'intérieur des fichiers de Django. Donc là
00:16:14 :on voit qu'on a les différents champs donc password1password2. On voit quepar défaut vous voyez ici c'est la classe d'utilisateurqui est utilisée donc c'est pour ça qu'on a du modifierlégèrement ceformulaire donc comme on l'a fait ici dans notrevue en spécifiant notre propreclasse méta et en spécifiant notre utilisateur
00:16:30 :custom à la place dumodèle ici qui par défaut est le modèled'utilisateur de Django. Et donc à la suitede ce fichier vous allez voir les différentes vérificationsqui sont faites. Donc par exemple ici
00:16:40 :une vérification pour s'assurer que lemot de passe 1 et le mot de passe 2 sont bien définiset qu'ils sont équivalents. Donc làs'ils sont différents on a une erreur de validationqui est levée et on aplein d'autres choses ici. On a le save donc si ça
00:16:52 :vous intéresse d'aller voir un peu plus en détail tout ce qui sepasse avec ce formulaire vous pouvez aller le voirbien entendu dans les fichiers de Django.
00:16:58 :Donc voilà pour les deux façons de faireavec déjà du HTML toutsimple sans passer par un formulaire et ensuiteen passant par ce user creationfrom. Donc vous voyez que ce qu'il faut
00:17:08 :retenir dans tout ça c'est vraiment que c'estdu Django pur. On a des choses quisont faites automatiquement pour nous mais c'estvraiment de la logique de formulaire donc sivous n'êtes pas au point avec tout ça je vous conseille d'aller revoirles parties sur les formulaires deDjango. Si vous n'êtes pas au point
00:17:22 :non plus avec les vues donc tout ce qu'on fait dans la vueici et bien là encore il faut aller revoirtout ce qui concerne le traitement des données àl'intérieur des vues avec les différents typesde requêtes etc. Donc on n'a rien ici de
00:17:32 :spécifique vraiment au modèle d'utilisateurc'est vraiment que du Djangoavec la création de formulaire,la récupération des données et le traitement de ces donnéespour ensuite créer des données à l'intérieurde notre base de données donc dans ce cas-cic'est vraiment un modèle pour créerdes utilisateurs.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.