- 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
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte personlive_helpToutes les questions
Jean-Philippe MOLL HEGER
27 janvier 2024 - 27 janvier 2024 à 17:28
checkConversation résolue
4 réponses
Salut
00:00:00 :Pour créer un formulaire, on va déjà créer un fichier qui va s'appeler forms.py.On n'est pas obligé de l'appeler comme ça, là c'est plus quelque chose qui est assez courant,que vous allez retrouver dans la plupart des sites sur lesquels vous risquez de travailler.
00:00:15 :Ce n'est pas une obligation, mais moi j'aime bien les appeler comme ça pour suivre cette nomenclature.A l'intérieur de Website ici, je vais faire un clic droit New,et on va créer un nouveau fichier Python qui va s'appeler forms.
00:00:27 :Un fichier de type Python, on clique ici pour valider, et on a notre fichier qui a été créé.A l'intérieur de ce fichier, on va importer depuis Django le module Forms,qui va nous permettre de créer des formulaires.
00:00:39 :On va créer une classe, et cette classe va hériter de la classe Forms qui est contenue dans le module Forms ici.Je vais l'appeler dans ce cas-ci signupForm, puisque c'est un formulaire qui va me permettre de créer un utilisateur.
00:00:52 :SignupForm, et on va hériter de forms.form.Comme ceci, n'oubliez pas la majuscule à form, puisqu'il s'agit bien d'une classe ici,donc la classe à l'intérieur du module.
00:01:02 :A l'intérieur de cette classe, on va créer des champs qui vont correspondre à des champs dans le formulaire HTML.C'est à peu près comme ce qu'on fait avec les modèles,quand on crée des champs dans les modèles pour notre base de données,sauf que là ça va être des champs qui vont être utilisés pour le formulaire HTML.
00:01:19 :On a plein de champs disponibles, vous pouvez les retrouver dans la documentation de Django,dans classe de champs fields intégrés,et vous allez voir qu'on a des fields là encore assez similaires à ce qu'on pourrait avoir dans les modèles.
00:01:31 :On a par exemple un champ pour les booléens, pour les charFields, donc les chaînes de caractère,les choice, donc ça va nous permettre d'avoir un différent choix,de pouvoir choisir entre différents éléments,et on a pas mal d'autres choses ici pour choisir des dates, pour choisir des nombres, etc.
00:01:46 :Je vous laisse explorer tous les fields qui sont ici,on va en utiliser quelques-uns pour les mettre à l'intérieur de notre classe SignUpForm.La documentation est très intéressante puisqu'elle vous permet également de voirle comportement par défaut pour chacun de ces champs.
00:02:00 :Par exemple pour le charField, donc si on revient sur le charField ici,vous allez voir le composant par défaut qui est utilisé,donc dans ce cas-ci on est avec un textInput,donc ça c'est le composant HTML qui va être utilisé.
00:02:12 :Ça nous dit également dans quel type de données va être normaliséela donnée qui est envoyée avec le formulaire,donc dans ce cas-ci ça nous dit bien que c'est normalisé en une chaîne de caractère,et ça c'est très important puisque vous allez voir que pour certains champs,on va avoir des objets qui peuvent être intéressants avec Python,
00:02:28 :comme par exemple DateField,donc si on entre une date dans un formulaire HTML,ça va être normalisé dans un objet Python DateTime.Date.Donc c'est très pratique puisque cette validation,cette normalisation va être faite automatiquement par Django.
00:02:43 :On voit ici par exemple que le composant par défaut pour les dates,c'est un DateInput,donc vous pouvez cliquer dessus pour aller voir à quoi ça ressemble,et si on va voir ici, vous voyez qu'on a toute la documentationqui nous indique déjà le type d'input,donc dans ce cas-ci le DateInput ça va être un input de type texte,
00:03:00 :on a également un aperçu du HTML qui est produit,et du template HTML qui va être utilisé.Donc vraiment, je vous conseille de passer un petit peu de tempsdans cette documentation pour voir tout ce qui est disponible.
00:03:11 :Donc nous dans ce cas-ci, on va utiliser quelques champs assez basiquespour créer un formulaire qui va permettre à quelqu'un de s'inscrire sur un site.
00:03:19 :Donc dans Créer mon compte ici,vous voyez qu'actuellement j'ai juste une page sign up avec ce texte ici,et donc sur cette page on va vouloir ajouter un formulaire pour s'enregistrer.
00:03:28 :Donc je vais rajouter un premier champ qui va être pseudoet qui va être égal à forms.charField.Donc tous ces champs ici sont contenus à l'intérieur du module Forms.
00:03:37 :Donc ici à l'intérieur de ce charField,je peux spécifier différentes choses.Je peux par exemple spécifier le maxLength,la longueur maximale que ce champ va accepter.
00:03:46 :Donc par exemple, je pourrais mettre 8 pour un pseudo,donc 8 caractères maximaux qui sont acceptés pour ce champ.Et on peut également spécifier d'autres choses comme par exemple required.
00:03:55 :Donc on va spécifier si ce champ est nécessaire ou pas à la validation du formulaire.Donc dans ce cas-ci, je vais dire que ce n'est pas nécessaire,et donc on va pouvoir valider le formulaire même si on ne rentre aucun pseudo.
00:04:06 :Donc là encore, je vous renvoie vers la documentation.Si vous souhaitez voir plus d'informations qui sont disponibles,donc par exemple sur le charField, vous voyez qu'on a le maxLength que l'on vient d'utiliser,mais on a aussi le minLength.
00:04:17 :On a également par exemple le strip qui par défaut est atchou.Ce strip, ça va permettre d'enlever les espaces au départ ou à la fin de notre chaîne de caractères.
00:04:25 :Donc si jamais vous avez une chaîne de caractères qui est entrée par l'utilisateur dans le formulaireet que cette chaîne de caractères commence par un espace,donc si par exemple je rentre un pseudo comme ça,automatiquement le formulaire va enlever les espaces au début et à la fin.
00:04:39 :Si jamais vous souhaitez que ce comportement n'ait pas lieu,donc si vous souhaitez garder les espaces, dans ce cas-ci,il va falloir spécifier que strip doit être égal à false.
00:04:47 :Donc là, c'est juste pour vous montrer l'exemple que selon les champs que vous allez intégrer à l'intérieur de votre classe,vous pouvez avoir différents éléments qui vont être disponibles quand vous allez créer votre champ.
00:04:57 :Donc dans ce cas-ci, je vais juste laisser le maxLength et le required à false.Ensuite, on va créer un champ pour rentrer une adresse e-mail.
00:05:04 :Donc là, on a un e-mail field qui va nous permettre de valider si l'utilisateur rentre un e-mail valide automatiquement.On va ensuite rentrer un mot de passe, donc password, qui va être égal à forms.charField.
00:05:17 :Cette fois-ci, on va mettre une longueur minimum de 6 caractères.Donc on veut au moins que ce champ fasse 6 caractères pour pouvoir être validé.
00:05:25 :Je vais également créer un champ de boolean qui va me permettre de spécifier si l'utilisateur accepte les conditions générales d'utilisation ou non.Donc je l'appelle cguAccept et ça va être égal à forms.booleanField.
00:05:40 :Et par défaut, on va lui donner une valeur initiale qui va être aTrue.Donc initiale ici, c'est un peu comme default pour les modèles, ça permet de spécifier que par défaut, ce champ ici sera coché.
00:05:50 :Donc par défaut, on considère que l'utilisateur accepte les conditions générales d'utilisation même si ce n'est pas très RGPD friendly.C'est quand même quelque chose que je voulais vous montrer, qu'il est possible de changer cette valeur par défaut.
00:06:02 :On a également un champ qui est assez intéressant qui est le champ choiceField.Donc je vais le rajouter juste ici et on va permettre de rentrer un emploi.
00:06:10 :Donc je vais l'appeler job et on va dire que c'est égal à forms.choiceField.Il va avoir un paramètre choices qui va contenir un tuple qui lui-même va contenir des tuples.
00:06:19 :Donc ce tuple, je vais le déclarer en dehors de ma classe et je vais l'appeler jobs.Donc je vais le créer ici.Donc là encore, c'est exactement comme dans les modèles.
00:06:26 :On peut faire des champs avec différentes valeurs qui vont être prédéfinies.Donc comme ça, ça nous permettra de renseigner par exemple différents métiers que l'on souhaite rendre disponibles à l'utilisateur et qu'il va pouvoir sélectionner.
00:06:38 :Donc je fais un premier tuple ici et à l'intérieur, je vais créer d'autres tuples.Donc d'autres champs qui vont être en fait les possibilités qui vont s'afficher dans mon interface.
00:06:46 :Donc la première valeur du tuple, c'est ce qui va être géré dans la base de données.C'est la valeur que l'on ne va pas afficher à l'utilisateur mais que l'on va utiliser de notre côté au niveau du serveur.
00:06:56 :Donc par exemple ici, je pourrais mettre Python et pour la deuxième valeur, ça va être celle qui va être affichée.Donc je vais mettre par exemple développeur Python et on va en créer plusieurs comme ça.
00:07:06 :Donc je vais mettre par exemple Javascript et on va dire développeur Javascript.Et on va finir avec un C sharp, développeur C sharp.Et toutes ces valeurs, je les passe à mon choice field ici dans le paramètre choices.
00:07:20 :Donc voilà pour la création de notre sign up form.Et maintenant, je vais vous montrer ce qu'on peut faire avec ce formulaire.Donc pour ça, je vais ouvrir un terminal et dans ce terminal, je vais lancer un shell à l'intérieur de Django.
00:07:32 :Donc pour ça, je vais utiliser python-manage.py-shell.Donc assurez-vous d'être bien dans le dossier qui contient le fichier manage.py.Donc dans ce cas-ci, moi le fichier manage.py se trouve dans le dossier source ici.
00:07:44 :Et c'est bien le dossier dans lequel je me trouve actuellement.Donc je peux faire juste python-manage.py-shell pour rentrer à l'intérieur d'un shell Pythonqui va avoir de setup automatiquement mon environnement Django.
00:07:55 :Donc ça va me permettre d'avoir accès en fait à toutes les fonctionnalités de Django.Donc je vais pouvoir à l'intérieur de ce terminal importer mon sign up form ici.
00:08:04 :Donc je vais faire from website.forms import sign up form.Et je vais créer un formulaire donc à partir de cette classe.Donc là c'est vraiment de l'orienté objet.
00:08:15 :On a une classe et on va créer une instance de formulaire à partir de notre classe.Donc je vais l'appeler form tout simplement et il va être égal à sign up form.
00:08:23 :Je mets les parenthèses bien entendu.J'appuie sur entrée et là j'ai créé un formulaire.Et vous allez voir que si on affiche notre formulaire,donc si on fait un print de form, donc de notre instance form,vous voyez qu'on a directement du html qui est affiché.
00:08:37 :Donc quand on affiche notre formulaire, on a des tags html avec le label.Donc par exemple ici pour le pseudo.Ensuite on a le input de type texte avec la longueur maximale qui est spécifiéequi va me permettre d'avoir une vérification automatique du côté du clientpour empêcher l'utilisateur de rentrer des données qui ne sont pas valides.
00:08:56 :Donc on va avoir une première validation qui va être faite du côté du html,donc du côté du client dans le navigateur de l'utilisateur.Et vous voyez qu'on a tous les champs qu'on a renseignés ici.
00:09:05 :Donc on va avoir par exemple le label pour le password avec ici la longueur minimale.On va avoir le select donc avec ici select name jobqui correspond aux différents emplois qui sont disponibles.
00:09:16 :On voit que dans value ici, il a bien mis le premier élément de mon tupleet que le texte qui est affiché dans ce cas-ci,c'est le texte qu'on a rentré en deuxième élément ici dans le tuple.
00:09:25 :Donc vous voyez que déjà notre formulaire en fait,il est capable de se représenter lui-même sous forme html.Donc c'est très pratique puisque on va pouvoir l'intégrer très facilement dans nos pages.
00:09:35 :Donc cet objet formulaire, il est très intéressant.Il y a pas mal de choses qu'on va pouvoir faire avecet on va voir tout ça dans la suite de cette formation.
00:09:42 :Donc par exemple, ce que je peux faire, c'est vérifier si le formulaire est valide.Donc je peux utiliser form.isvalid.J'appuie sur entrée et là vous voyez que ça me retourne falsepuisque actuellement j'ai créé un formulaire mais qui ne contient rien.
00:09:56 :Donc on a créé un formulaire avec des parenthèses iciet on n'a passé aucune valeur à ce formulaire.Donc ce formulaire ne contient pas de donnéeset il n'est donc pas valide puisque les données étant absentes,il ne peut pas valider ce formulaire.
00:10:08 :Donc qu'est-ce que je veux dire quand je dis valide ?Valide, ça va être tout ce qui va valider les conditions qu'on a mises ici.
00:10:14 :Par exemple, est-ce qu'on a un pseudo avec une longueur maximale de 8 ?Là, dans ce cas-ci, required est égal à false.Donc ça veut dire qu'on pourrait très bien ne pas donner de valeur pour le pseudomais ça n'empêcherait pas le formulaire d'être validé.
00:10:24 :Et on va avoir toutes les vérifications pour le reste qui vont être également effectuées.Donc par exemple, on va vérifier si le mot de passe a une longueur minimale de 6et si ce n'est pas le cas, eh bien notre formulaire ne sera pas validé.
00:10:34 :Donc si jamais on veut créer un formulaire en lui passant des données,on peut faire sign up from ici.Donc à l'intérieur de ces parenthèses, attention,il faut bien mettre un dictionnaire avec des clés et des valeursqui vont correspondre au champ et aux valeurs qu'on veut assigner au champ
00:10:47 :et il ne faut pas mettre en fait ici des arguments.Ce n'est pas pseudo égale et la valeur du pseudo, c'est vraiment un dictionnaire.Donc sous forme de chaîne de caractère, le nom du champ,donc dans ce cas-ci pseudo, et ensuite la valeur qu'on souhaite lui assigner.
00:11:00 :Donc dans ce cas-ci, je ne vais pas mettre de pseudoet vous allez voir qu'on va quand même avoir un formulaire validemême si on n'a pas renseigné de pseudo.
00:11:07 :Donc je vais laisser le pseudo vide.Je vais mettre un email qui va être valide,donc on va mettre test at gmail.com.On va mettre un mot de passe qui fait au moins 6 caractères,donc dans ce cas-ci, je vais mettre juste 1, 2, 3, 4, 5, 6, 7, 8.
00:11:20 :Ensuite, je vais renseigner le job.Donc le job, on va passer cette fois-ci la valeur ici,donc pas ce qui est affiché mais bien la valeurque l'on a renseigné comme premier élément du tuple.
00:11:31 :Donc je vais dire que pour le job, j'ai un job de développeur Python.Donc on met une clé job qui va être égale en valeur à Python.
00:11:38 :Et pour finir, on va dire que cjuacceptest bien égale à true.Donc je ferme mon dictionnaire, je ferme ma parenthèse,je valide en appuyant sur entrée,et là vous allez voir que cette fois-ci, j'ai donc un formulairequi va contenir ces valeurs.
00:11:55 :Si j'affiche mon formulaire, donc si je fais un print de form,vous allez voir que ici, par exemple, sur le label pour les jobs,on a le selected qui est automatiquement assigné à Python.
00:12:05 :Si vous allez regarder, par exemple, dans le nom,donc si on va voir dans le pseudo, on n'a rien.Par contre, dans l'email, si on va voir value,eh bien on a bien la valeur qui est égale à test.gmail.com.
00:12:16 :Donc vous voyez ici que notre formulaire est déjà rempliavec les valeurs qu'on lui a données.Et maintenant, on va vérifier si notre formulaire est valide.
00:12:23 :Donc on va refaire un form.isvalid,j'appuie sur entrée, et là j'ai bien isvalid qui est égale à true,puisque mon formulaire est correct,et j'ai bien toutes les valeurs qui sont correctement renseignées.
00:12:33 :Par contre, si je recrée un formulairemais que je mets des valeurs qui ne sont pas correctes,donc par exemple, on va changer le mot de passequi ne contient pas suffisamment de caractères,donc on va en mettre 3 ici.
00:12:43 :Donc je recrée un formulaire,la création du formulaire en tant que telle fonctionne,je n'ai pas d'erreur, mais si cette fois-ci je vérifie isvalid,vous voyez que dans ce cas-ci, il n'est pas valide,puisque le mot de passe ne contient pas suffisamment de caractères.
00:12:56 :Donc voilà pour les bases des formulaires,vous voyez que c'est quand même assez simple,ça ressemble grandement au modèle avec Django,sauf que ici, on ne crée pas un modèle,mais un formulaire à partir de la classe Form.
00:13:08 :Ensuite, il suffit de renseigner les différents champsavec le type de ces champs,et on peut également mettre pas mal d'optionsen fonction du type de champ,ce qui va nous permettre de spécifierdans quel cas le formulaire va être valide ou non.
00:13:21 :Donc déjà, vous voyez qu'il y a beaucoup de choses là encorequi vont être gérées automatiquement par Django,et vous n'avez pas fini d'être surpris,vous allez voir que les formulaires sont vraiment très puissantset qu'on peut faire énormément de choses avec.
00:13:31 :Vous voyez également que c'est vraiment le même conceptavec une classe, et ensuite des instancesqui vont être créées à partir de cette classeet qui vont avoir des comportements différentsen fonction des valeurs qu'on passe à cette instance.
00:13:43 :Donc par exemple, en fonction des donnéesque l'on passe dans notre formulaire,notre formulaire va être valide ou non,et toutes ces informations que l'on récupère,donc est-ce que le formulaire est valide,est-ce qu'il contient telle ou telle donnée,on va pouvoir bien entendu les utiliser à l'intérieur des vues
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.