- 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 terminer notre application en s'attaquant au formulaire. Donc là encore vouspouvez aller voir dans la documentation de Bootstrap, vous avez dans une partie ici Formstout ce que vous avez besoin de savoir sur les formulaires avec à chaque fois du code que vouspouvez tester pour voir ce que ça donne. Donc je vais revenir dans mon site sur le fichier HTML et
00:00:19 :on va prendre notre formulaire et le mettre sur une autre rangée. Donc je copie tout ce code ici,je le coupe et là vous voyez qu'on a donc notre première rangée. On va créer une deuxième rangée
00:00:29 :qui va contenir notre formulaire. Donc on fait div.row, on appuie sur tabulation, j'appuie surentrée pour créer mon bloc et je vais coller mon formulaire à l'intérieur. Je vais décaler tout ça
00:00:39 :avec deux tabulations. Et voilà on a donc correctement créé une nouvelle rangée avecnotre formulaire. Pour l'instant si je reviens sur la page vous allez voir que là encore c'est
00:00:47 :collé à ce qu'on avait donc sur notre première rangée. Donc on va rajouter une marge en haut. Pourça on peut utiliser la classe MT et spécifier là encore un nombre qui peut varier. Donc on pourrait
00:00:57 :mettre 2, 5, je crois que le maximum c'est 10 ou 15. Donc à vous de voir la marge que vous souhaitezmettre. Je vais mettre MT de 5 donc une marge de 5 et là vous voyez que ça permet de décoller un
00:01:07 :petit peu ce formulaire. Donc ensuite qu'est ce qu'on va faire ? On va utiliser des classes àsavoir notamment la classe FormControl et FormLabel qui vont nous permettre de spécifier le label etl'élément de contrôle donc qui va être dans notre cas les inputs. Donc on va mettre tout ça à
00:01:21 :l'intérieur de notre HTML et vous allez voir que ça va commencer à être un peu plus sympa. Doncje vais rajouter ces classes sur les labels et sur les inputs. Donc on va faire classe égale à
00:01:29 :Form-Label. Je vais copier tout ça ici et je vais le coller à chaque fois sur les labels. Donc onva le mettre là, ici et ici. Pour le bouton on va également le styliser. On va mettre une classe
00:01:40 :BTN et dans ce cas-ci on va mettre BTNPrimary qui est une couleur bleue qui est en fait lacouleur que j'ai utilisé pour ma barre de navigation. Donc là encore vous pouvez aller
00:01:49 :voir dans les boutons si on revient dans components, dans boutons vous allez voir que le BTNPrimaryc'est cette couleur de bleu ici. Vous pouvez utiliser n'importe quoi qui est dans ces classes
00:01:58 :ici pour avoir une autre couleur pour vos boutons. Donc là si j'actualise on a bien notre boutonbleu ici et on va rajouter la classe Form-Control sur les contrôles de notre formulaire. Donc on
00:02:08 :va faire pareil ici sur les inputs. On va rajouter à la fin classe égale Form-Control et onva copier cette classe ici et la coller sur chacun des inputs. Donc on va le mettre ici, on va le
00:02:18 :mettre également sur le textarea et on va le mettre sur le dernier input ici. On va revenirsur notre page et si j'actualise vous voyez que déjà on a quelque chose qui a beaucoup plusd'allure. Donc on a chaque élément qui est bien séparé avec le prénom, le nom, l'adresse et le
00:02:32 :téléphone. On retrouve notre textarea pour l'adresse avec les trois rangées et on peut bienentendu étendre tout ça si on a une adresse assez longue. Et on a notre bouton ajouter ici. Alors
00:02:43 :vous voyez que là pour l'instant c'est un petit peu collé tous les uns à la suite des autres doncpour ça on pourrait entourer tous ces éléments de div et mettre une marge en bas. Donc ce que je
00:02:52 :vais faire c'est que je vais prendre à chaque fois le label et le input et je vais mettre un divautour de tout ça. Donc on met un div autour du label et du input et ça va nous permettre de
00:03:00 :mettre une marge donc avec la classe et avec la classe mb-3 de mettre une marge de 3 sur chaqueélément. Donc là encore vous pouvez mettre plus ou moins on pourrait mettre 5, 7 jusqu'à 15 là
00:03:10 :encore je crois ou une très petite marge si on mettait par exemple mb-1. Donc si je fais justeça je vais mettre mb-3 je reviens j'actualise et là vous voyez qu'on a une petite marge entre lepremier bloc avec le prénom et le input ici et le deuxième bloc. Donc je vais mettre cette classe
00:03:25 :ici sur chacun de mes éléments donc on va remettre un div, on indente tout ça juste pour quevisuellement ce soit un peu plus clair. On remet notre div fermant ici donc notre balise qui ferme
00:03:35 :le div à la suite et on va faire tout ça pour chaque label et chaque input. Donc là encore je fermeet je le fais une dernière fois pour le numéro de téléphone et ici on va fermer notre div. Donc
00:03:52 :si je reviens et que j'actualise là vous voyez que le bouton il était tout à fait collé surl'input du téléphone et maintenant on a un petit peu plus d'espace. Donc voilà pour le formulaire
00:04:00 :vous voyez que c'est quand même un peu plus sympathique que ce qu'on avait précédemmentqui était tout sur une ligne avec le bouton qui n'était pas très joli et même les boîtes detexte etc. Là vous voyez que quand on passe le curseur sur chaque boîte de texte on a un bel effet
00:04:12 :de surbrillance qui se fait avec une petite animation et un fondu donc c'est vraiment trèssympathique, très joli, très facile à mettre en place avec la documentation donc vraiment je vousconseille d'aller voir la documentation, d'aller explorer. C'est vraiment l'avantage de Bootstrap
00:04:25 :même si vous n'êtes pas très bon en design, assez rapidement avec la documentation en faisantdécopier-coller les différentes classes qui sont disponibles vous pouvez mettre en place ce genrede design. On va tester si notre application fonctionne toujours correctement juste pour nous
00:04:38 :assurer qu'on n'a pas fait d'erreur. Donc je vais cliquer sur supprimer pour supprimer un élémentet là vous voyez que ça continue de fonctionner comme prévu. On va rajouter un autre Patrick,
00:04:47 :on va dire Patrick Martin, 1 rue du chemin vert, 75 000 Paris et un numéro de téléphone on vachanger on va mettre 987654320 et on clique sur ajouter pour ajouter un nouvel utilisateur. Ça
00:05:01 :fonctionne on va voir le responsive donc je réduis mon interface et les colonnes se réduisent et ona notre formulaire qui lui aussi prend à chaque fois la même taille donc la taille de notre colonneici principale puisqu'on avait tout mis à l'intérieur du même container. Donc on a plusieurs rangées à
00:05:16 :l'intérieur du même container ce qui nous permet de garder le même espacement autour de tous ceséléments. Donc voilà qui termine cette application avec Django donc vous voyez qu'il y avait beaucoup
00:05:24 :de choses à l'intérieur de ces vidéos. J'espère que ça vous permet de voir à quel point on peutassez rapidement mettre en place un site web à partir d'une API. Donc on avait notre API qu'on
00:05:34 :pouvait utiliser en ligne de commande ou directement avec des lignes de code Python et maintenant avecnotre site web et bien on pourrait donner ça à un client qui pourrait ainsi utiliser notreprogramme sans avoir besoin d'utiliser la moindre ligne de code. Donc voilà pour cette application
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.