- 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 ajouter le formulaire dans notre fichier HTML et les fonctions àl'intérieur de notre vue qui vont nous permettre, en utilisant notre API, d'ajouter un contact dansla base de données. Donc accrochez-vous, il y a pas mal de choses à écrire et je vais essayer de
00:00:14 :développer un petit peu tout ça, puisque les formulaires c'est assez intéressant en HTML etc'est assez long à écrire, mais c'est un peu toujours la même chose. Donc à l'intérieur de
00:00:24 :notre fichier HTML, on va créer un formulaire, donc avec la balise form, donc je tape toutsimplement form, j'appuie sur tabulation et automatiquement avec PyCharm ça va étendrecette balise. On va ensuite donc faire quelques modifications, pour l'instant l'action ne va rien
00:00:38 :mettre, on y reviendra plus tard, l'action c'est en fait la page sur laquelle vous souhaitez redirigerla personne quand elle va soumettre votre formulaire. Et pour la méthode par contre, donc
00:00:47 :on va ajouter ici méthode et on va dire qu'on veut faire une requête de type post. Donc on verra parla suite pourquoi on veut faire une requête de type post et comment récupérer les informationsque l'on va soumettre avec le formulaire dans la vue. Donc ce qu'on va faire ici, c'est créer
00:01:00 :ensuite plusieurs inputs, donc les inputs c'est ce qui va nous permettre de rentrer des informationsà l'intérieur d'une page web. Donc pour ça on va faire une balise input, par défaut vous voyez que
00:01:10 :le type du input est de type texte, donc c'est parfait puisque nous on va souhaiter permettre àl'utilisateur de renseigner des informations textuelles, donc dans ce cas-ci le prénom. Et
00:01:19 :on va également rajouter comme je vous disais un label, donc on va mettre label comme ceci,et à l'intérieur de cette balise on va indiquer le texte de mon label. Donc on va mettre ici prénom
00:01:29 :tout simplement, et vous voyez qu'il a mis automatiquement ce mot for avec une chaînede caractère vide, donc ça c'est tout simplement pour associer un label à un input. Donc dans le
00:01:39 :for ici on va indiquer first name et on va devoir associer donc ce label à notre input avec un id.Donc on va mettre id ici et on va mettre le même nom, donc first name, et vous voyez que l'erreurdisparaît ici, et ça nous permet donc juste d'indiquer au html que sémantiquement donc on a
00:01:55 :ce label qui appartient à cet input. La dernière chose à faire c'est de donner un nom à cet input,et c'est ce nom qu'on va utiliser pour récupérer les informations dans la vue quand on va faire larequête. Donc le nom je vais mettre la même chose que l'id,e je vais mettre first name tout
00:02:09 :simplement, et si on retourne sur notre page web juste pour voir ce que ça donne jusqu'à présent,donc j'actualise, vous voyez qu'on a bien donc un prénom, alors je vais grossir un petit peu pourque vous voyez quelque chose, on a bien donc un prénom qui est le label et un input qui est de
00:02:22 :type texte qui me permet de rentrer du texte. Et donc on va faire ça pour les autres champs,donc on va faire la même chose pour le nom de famille, donc je vais tout simplement copierces deux lignes ici, et on va les coller à la suite, et à la place de first name ici on va
00:02:35 :mettre last name. Donc je mets last name pour le for, last name pour le id, et last name pour lename ici, et à la place de prénom on va mettre nom tout simplement. Là encore on a un input de
00:02:46 :type texte, donc ça on va le laisser également. Pour l'adresse ça va être légèrement différent,alors je vais copier le label ici et je vais remplacer par adresse, donc on va mettre adresseici, et pour le for on va mettre également adresse avec 2d puisqu'on utilise la syntaxe anglophone,
00:03:01 :et ici on va utiliser un autre type d'input, on va utiliser un textarea, donc ça ça me permetd'avoir une boîte de texte puisque l'adresse peut être sur plusieurs lignes et un peu pluslongue que ce qu'on aurait avec un input. Donc pour que ce soit plus agréable à rentrer pour
00:03:14 :l'utilisateur on va utiliser un textarea. Là vous voyez que par défaut on a pas mal de choses quis'affichent donc pour le nom on va utiliser adresse, pour l'id également donc comme ça on va avoir lacorrespondance entre notre label avec le for ici et notre textarea, et ici on va juste enlever les
00:03:30 :colonnes et on va garder le rows donc on va garder le nombre de rangées et on va dire trois rangéesdonc puisque généralement sur les adresses on a le nom de la rue ensuite on peut avoir éventuellementle code postal de la ville et peut-être une troisième ligne donc on va mettre trois rangées
00:03:43 :par défaut ce sera largement suffisant. Donc voilà pour l'adresse on va retourner sur notresite pour voir ce que ça donne jusqu'à présent donc j'actualise et vous voyez qu'ici on a biendonc une boîte de texte avec trois lignes donc trois lignes puisque on avait mis rows à 3 donc
00:03:56 :rows ici à 3 et si jamais on souhaite avoir un peu plus de place on peut bien sûr étendre cetteboîte de texte ici pour y voir un peu plus clair. Donc ici on a nos deux premiers inputs avec le
00:04:06 :prénom le nom et l'adresse là encore c'est très moche mais vous verrez par la suite qu'on va fairequelque chose d'un peu plus sympathique avec bootstrap. Donc je reviens dans mon fichier html
00:04:15 :ici et la dernière chose qui nous reste à ajouter c'est le numéro de téléphone donc pour ça on vaavoir la même chose que pour le prénom et le nom de famille donc on va copier le label et le inputici et à la place on va mettre téléphone et pour le for ici on va mettre phone number donc en anglais
00:04:32 :là encore phone number et phone number. Donc là on a tout ce qu'il nous faut si je reviens sur mapage web et que j'actualise on a bien le téléphone alors là on va à la ligne puisque j'ai fait unzoom sur la page mais voilà vous voyez sinon on a tout sur la même ligne avec le prénom le nom
00:04:45 :l'adresse et le téléphone. Donc la dernière chose qu'il reste à faire c'est un bouton qui va nouspermettre de soumettre le formulaire donc pour ça on va faire une balise bouton j'appuie sur tab pourvalider et ce bouton ça va être un bouton qui va soumettre le formulaire donc on va ajouter un
00:05:00 :paramètre type ici et on va dire que c'est de type submit donc submit qui veut dire soumettrequi va nous permettre donc de soumettre ce formulaire et pour le bouton ici on va mettrecomme texte ajouter donc si je reviens sur ma page que j'actualise là on a bien un bouton
00:05:14 :ajouter qui va nous permettre d'envoyer le formulaire. Donc pour l'instant on n'a rienmis ici dans action donc si on appuyait sur ajouter ça ne ferait rien et donc là ce qu'ilva falloir faire c'est créer une vue qui va nous permettre de faire l'action de créer l'utilisateurdonc dans la vue on va devoir récupérer les éléments que l'on va renvoyer avec notre formulaire
00:05:31 :et créer l'utilisateur et ensuite rediriger vers la page d'accueil. Donc c'est ce qu'on va fairetout de suite on va ajouter la vue et l'url donc je vais déjà aller dans le fichier views.py et à
00:05:41 :la suite ici on va faire une vue qu'on va appeler add contact qui va avoir là encore comme premierparamètre request et pour l'instant je vais juste mettre un pass à l'intérieur et avant de créerle code de cette fonction on va aller créer l'url. Donc je retourne dans le fichier urls.py
00:05:55 :ici de mon application je vais copier coller toute cette ligne donc je la sélectionne copier colleret ici comme chemin donc on va mettre une autre adresse donc on va mettre par exemple add et on vamettre à la place de index notre fonction que l'on vient de créer donc il va falloir l'importer
00:06:10 :donc je vais à la suite de index ici mettre la fonction add contact qui est à l'intérieur dufichier views et à la place de index ici on va mettre add contact et pour le nom on va mettreégalement add contact cette fois ci avec un tiré du milieu donc ça c'est une convention on pourra
00:06:24 :mettre tout coller ou mettre un tiré du bas moi je préfère par convention mettre le tiré du milieu.Donc on a ajouté une url qui va rediriger vers cette vue add contact et cette url nous on ne vapas y aller directement donc ce n'est pas nous qui allons aller à l'adresse slash add c'est en fait le
00:06:38 :formulaire qui va s'y rendre et en fait on va rediriger par la suite vers cette vue d'accueil.Donc je vais vous montrer tout ça on va aller dans le fichier index.html et ici dans actions
00:06:47 :je vais utiliser une balise une balise un peu spéciale qui va me permettre d'utiliser le nomde l'url pour rediriger vers l'url correspondante donc cette balise elle s'appelle url on a làencore la collade et le symbole pourcentage au début et on va mettre ensuite des guillemetssimples donc attention de bien mettre des guillemets simples ici puisqu'on a des guillemets
00:07:05 :doubles autour de l'action donc si on mettait des guillemets doubles ici ça posera un problème deconflit avec ces guillemets qui définissent l'action de notre formulaire. Donc on a les
00:07:13 :guillemets doubles les guillemets simples et à l'intérieur des guillemets ici on va toutsimplement mettre le nom de notre vue donc comme ça je vais le mettre donc je vais le copier et jevais le mettre ici pourquoi on fait ça et bien comme ça on aura quelque chose de dynamique je
00:07:25 :pourrais très bien ici mettre à la place add tout simplement donc mettre directement l'adressede l'url à laquelle on se rend pour ajouter notre formulaire le problème c'est que si jamais par lasuite on modifie cette url pour par exemple mettre add contact et bien là il faudra le changer
00:07:39 :également à l'intérieur de notre formulaire donc nous ce qu'on veut c'est d'avoir quelque chose dedynamique donc le nom ici ne va pas changer lui le nom va le laisser comme ça et comme ça enutilisant cette balise donc en utilisant la balise url qui va utiliser le nom de l'url ça va être
00:07:54 :remplacé automatiquement par django au moment d'afficher notre page et ici il va donc remplacerpar l'url qu'on a affiché ici donc comme ça si jamais par la suite on change cette url et bientout va suivre automatiquement donc maintenant qu'est ce qu'on va faire à l'intérieur de notrefonction donc pour l'instant on va tout simplement faire une redirection donc ce que je vais faire
00:08:11 :c'est un return et on va utiliser la fonction redirect que l'on n'a pas encore importé doncelle se trouve à l'intérieur du même module django shortcuts donc on va mettre une virguleet on va importer redirect au début de notre fichier et ici qu'est ce qu'on va indiquer à
00:08:24 :redirect et bien le nom de l'url à laquelle on souhaite rediriger donc c'est là qu'on va utiliserencore une fois le nom que l'on avait spécifié dans ce cas ci pour la page d'accueil donc on vautiliser la chaîne de caractère index et dans ma vue ici je redirige vers l'index donc pour l'instant
00:08:38 :on n'a pas grand chose qui se passe je vais juste faire un print ici et afficher add contact pourvous montrer qu'on passe bien à l'intérieur de cette fonction donc je vais juste vérifier quetout est bon dans notre fichier index ici on a une méthode post on a notre action qui va rediriger
00:08:51 :vers l'url add contact l'url add contact elle va rediriger vers la vue add contact et dans la vueon va juste faire un print pour l'instant et ensuite rediriger vers la vue d'index donc jevais dans mon terminal ici vérifier ce qu'il se passe donc on devrait voir le print en fait de
00:09:06 :add contact qui va s'afficher donc j'actualise ici ma page je vais enlever le add je vais surla page d'accueil j'ai bien mon formulaire donc là je peux remplir ou ne rien mettre n'est pastrès grave on n'est pas obligé de mettre des informations pour l'instant puisque ça ne va rien
00:09:18 :faire donc moi ce que je veux faire c'est juste valider mon formulaire en cliquant ici sur ajouteret là on a une erreur qui est l'erreur qu'on a tout le temps même quand on a un peu d'expériencecomme moi vous le voyez en fait l'erreur qu'on a c'est qu'on n'a pas mis une balise spécifique
00:09:31 :qui permet d'éviter un certain type d'attaque sur les pages web et donc si vous lisez en faitle texte que vous avez ici c'est cette balise qu'il faut ajouter donc à chaque fois que vousavez un formulaire il faut ajouter cette balise ici donc je vais faire un copier coller tout
00:09:43 :simplement et vous la mettez ici à l'intérieur de votre formulaire et ça en fait ça va rajouterun input supplémentaire qui va être caché qui va envoyer avec votre formulaire un jeton et cejeton va être vérifié automatiquement par Django dans votre vue et ça va vous assurer en fait qu'on
00:09:57 :n'a pas eu d'interception entre le clic sur l'ajout du formulaire et la récupération des données icidonc ça c'est juste une vérification qui est faite automatiquement par Django pour éviter lesattaques qu'on appelle cross site forgery donc c'est ce que vous indique ici cette erreur etmaintenant que j'ai donc rajouté cette balise je vais revenir sur la page d'accueil je vais
00:10:16 :resoumettre le formulaire et là ça va être très rapide vous allez voir que la page s'actualisedonc vous voyez on a la page qui s'actualise on revient sur la page d'accueil et si je vaisvoir dans le terminal ici on voit bien qu'on a notre print qui s'effectue donc maintenant qu'est
00:10:28 :ce qu'il nous reste à faire et bien tout simplement récupérer les informations du formulaire créer unutilisateur et le sauvegarder dans la base de données donc ici à la place du print ce queje vais faire c'est utiliser la requête donc la requête qu'on récupère dans le paramètre ici et
00:10:42 :sur cette requête on va avoir accès à un dictionnaire le dictionnaire post qui va contenirles données de notre formulaire et ce dictionnaire on peut récupérer donc les données du formulairecomme sur n'importe quel dictionnaire python donc on peut utiliser la méthode get et qu'est ce qu'onva avoir comme clé et bien ce qu'on a indiqué ici dans le name donc dans name on a first name,
00:11:00 :last name, address et phone number et donc on va pouvoir utiliser ce nom sur notre dictionnairepour récupérer les valeurs qui sont à l'intérieur de ces balises input et de la balise textareadonc ici je vais récupérer toutes les informations je vais mettre une chaîne de caractère first name
00:11:15 :et on va mettre tout ça dans une variable qu'on va appeler first name je vais dupliquer cetteligne quatre fois puisqu'on a le first name ensuite on va avoir le last name on va avoirl'adresse et le phone number et à chaque fois donc on va récupérer la même chose ici donc dans la
00:11:30 :chaîne de caractère puisque c'est ce qu'on avait dans notre formulaire donc là encore on a pasmal de copier coller puisqu'on a le même nom à chaque fois donc là c'est bien la variable quel'on crée et ici c'est la chaîne de caractère qui correspond au nom de ce que l'on a mis à
00:11:41 :l'intérieur de notre balise input ici dans le formulaire donc là si à la place de first nameje mettais patrick et bien il faudrait que j'utilise patrick ici pour récupérer la valeur associée àcet élément du formulaire donc là je vais remettre first name et donc une fois qu'on a récupéré
00:11:56 :toutes ces informations on va pouvoir utiliser notre classe utilisateur dans le fichier crm.pydonc cette classe utilisateur qui nous permet de créer une instance d'un utilisateur et de lesauvegarder dans la base de données donc on va importer cette classe tout en haut ici aprèsgetAllUser on va importer la classe user et on va créer une instance d'utilisateur qu'on va récupérer
00:12:15 :dans une variable qu'on va appeler user tout simplement donc là attention je l'ai mis enminuscule bien faire attention avec la casse pour ne pas écraser en fait notre classe que l'on aimporté on pourrait l'appeler plus simplement u tout simplement mais j'aime bien être assezexplicite donc on a notre instance qui va s'appeler user en minuscule et la classe user en
00:12:32 :majuscule là vous voyez encore l'intérêt des conventions le fait de mettre une majuscule surla classe et bien ça permet de correctement distinguer notre instance de la classe doncensuite qu'est ce qu'on va faire ici et bien on va passer first name on va passer le last namele address et le phone number on va avoir donc une instance d'utilisateur et on va pouvoir ensuite
00:12:53 :la sauvegarder avec notre méthode save qui va sauvegarder l'utilisateur dans la base de donnéeset ensuite on va rediriger tout simplement vers la vue d'index donc normalement on a tout ce qu'ilfaut ici je reviens sur ma page d'accueil j'actualise donc ma page on va rentrer unnouvel utilisateur on va mettre Maurice Smith donc encore un nom assez alambiqué mais j'ai pas
00:13:12 :vraiment d'inspiration on va mettre un rue du du chemin vert et numéro de téléphone notre fameuxnuméro de téléphone factice je clique sur ajouter et là automatiquement vous voyez queon a ajouté l'utilisateur on a redirigé vers la page d'accueil et comme sur la page d'accueilon affiche tous les utilisateurs qu'on a dans notre base de données et bien ils sont correctement
00:13:32 :affichés ici je peux également modifier un petit peu mon fichier d'index pour afficher d'autresinformations pour l'instant on a juste le full name je pourrais rajouter également dans unparagraphe donc avec une balise p le numéro de téléphone et l'adresse donc on va afficher iciphone number et on va également afficher l'adresse donc comme ceci à l'intérieur d'un autre paragraphe
00:13:52 :comme ça quand je reviens ici j'actualise on a bien l'adresse et le numéro de téléphone quisont affichés et là vous voyez qu'il ya un petit truc qui me perturbe puisque là j'ai mis phonenumber et address et là je les ai dans le sens inverse alors j'ai mal dû créer mon instance
00:14:04 :dans la vue ici je passe adresse et phone number et en fait je pense que c'est l'inverse si onretourne voir dans la classe on a effectivement le phone number et ensuite l'adresse donc c'estdéjà le numéro de téléphone et ensuite l'adresse donc là j'ai inversé les deux éléments donc vous
00:14:18 :voyez que quand on ne met pas le nom des paramètres par défaut ça va y aller dans l'ordre donc çapourrait être une bonne idée ici de spécifier à chaque fois le nom des paramètres c'est un peuplus long à écrire mais au moins on est sûr que les données vont au bon endroit donc on pourrait
00:14:28 :mettre ici phone number, phone number, address, address etc etc et dans ce cas ci l'ordre n'auraitplus d'importance puisqu'on pourrait mettre le phone number après l'adresse ou le first nameaprès le last name et là il serait dans quel cas aller puisque on aurait ici le lien entre le
00:14:42 :nom du paramètre et la valeur qu'on lui envoie donc juste pour m'assurer que tout fonctionnecorrectement je vais revenir sur ma page d'accueil et ajouter un autre utilisateur donc on va direutilisateur test on va mettre une adresse factice, un numéro de téléphone factice, je clique surajouter et là j'ai bien mon utilisateur test avec cette fois ci le numéro de téléphone et ensuite
00:15:01 :l'adresse. Vous voyez également que dans le cas où on n'a pas de numéro de téléphone ou d'adresseon affiche known ici donc on pourrait faire une vérification avec un if à l'intérieur de notrefichier html donc ici pour faire une balise if c'est à peu près comme le for on va devoir créer
00:15:15 :donc une balise avec les accolades et le pourcentage et on va dire if user.phone numberdonc si on a quelque chose et bien on l'affiche et là encore on va fermer cette balise avec cettefois ci un end if et là encore l'indentation n'a pas vraiment d'importance on pourrait l'enlever
00:15:30 :et le mettre comme ça je le fais juste pour que visuellement ce soit un peu plus clair et on vafaire pareil pour l'adresse on va faire if user.address donc si on a quelque chose dans l'adresse
00:15:39 :on l'affiche et on ferme notre balise ici avec le end if et donc vous voyez également qu'on pourraitmême mettre tout ça sur la même ligne pour que ça ne prenne pas trop de place donc c'est l'intérêtici d'avoir la balise qui ouvre et qui ferme contrairement à python on n'a pas besoin d'utiliser
00:15:52 :l'indentation pour spécifier les différents blocs d'instruction donc ça me permet de vous montrer labalise if et si je reviens sur mon site web et que j'actualise cette fois ci les utilisateurs quin'ont pas d'adresse et de numéro de téléphone ne sont pas affichés ici et ceux qui en ont ici
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.