- 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 faire des cartes pour nos contacts puisque pour l'instant on a juste le nomavec le bouton ce n'est là encore pas très joli et on aimerait bien afficher ces informations d'unefaçon un peu plus claire. Juste avant je vais aller rajouter des informations pour l'adresse
00:00:12 :et le numéro de téléphone dans ma base de données donc dans le fichier ici à la place des nullesici on va mettre un numéro de téléphone donc je vais mettre des trucs factices mais c'estvraiment juste pour l'exemple et là pour l'adresse on va mettre 10 rue des Champs-Elysées
00:00:27 :Paris et ici on va mettre je sais pas on va mettre 10 rue du chemin vert à Toulouse par exemple.Donc là comme ça on aura un peu plus d'informations à afficher sur nos cartes. Donc pour faire nos
00:00:44 :cartes on va aller voir la documentation de Bootstrap et dans Bootstrap vous avez dans ladocumentation donc quand vous êtes sur la page d'accueil vous pouvez aller dans la documentationvous avez une partie components et vous allez avoir plein de choses comme par exemple les boutonsqu'on va voir très prochainement ici qui vous permettent donc grâce aux classes de faire des
00:00:59 :choses assez sympa et on a notamment les cartes ici donc card qui nous permettent d'afficher descartes comme ceci. Donc on ne va pas tout reprendre ici puisque vous voyez que par exemple il y a
00:01:08 :une image dans notre cas on n'a pas d'image donc je vais copier ce texte ici et on va modifier unpetit peu le html pour avoir quelque chose qui s'adapte à ce qu'on a ici donc notre cas de figuresans les images et avec un bouton. Donc je reviens dans mon fichier index.html et les cartes elles
00:01:25 :vont être ici donc puisqu'on a notre boucle qui nous crée des utilisateurs. Donc on va àl'intérieur de notre boucle mettre le code que l'on a copié de Bootstrap, on va l'agencer un petitpeu mieux comme ceci, on va enlever cette ligne puisqu'on n'a pas besoin d'une image, on n'a pas
00:01:39 :besoin non plus de la largeur ici donc là vous voyez qu'on a un style à l'intérieur même denotre balise html donc c'est du css dans le html, on n'en a pas besoin donc on l'enlève et pour lebouton là vous voyez qu'on a un bouton avec un lien href, nous ce qu'on a c'est notre formulaire donc
00:01:54 :je vais prendre tout le formulaire ici et je vais le mettre à la place de mon bouton donc je vaisremettre tout ça un petit peu mieux en forme donc avec des indentations pour qu'on comprenne bienqu'est ce qui appartient à quoi. Pour le card title ici on va mettre le nom de l'utilisateur
00:02:07 :donc là je fais juste du copier-coller pour remplacer les différents éléments donc on metle card title ici, pour le texte on va mettre autre chose on va mettre par exemple le numérode téléphone et l'adresse donc là je vais copier mes if et on va les mettre à l'intérieur du card
00:02:21 :texte ici donc je supprime tout le texte qu'on avait et à l'intérieur de card texte je vaismettre le numéro de téléphone et l'adresse si on en a un puisqu'on avait ici une structureconditionnelle et ensuite on a notre bouton donc on va déjà faire ça on va enlever le nom qu'on
00:02:35 :avait ici également et on a donc notre carte à l'intérieur de la boucle avec les différentséléments qui vont être affichés comme le nom d'utilisateur, le téléphone et l'adresse. Donc je
00:02:45 :reviens sur mon site et on va voir déjà en l'état ce que ça donne donc c'est pas mal on a quelquechose qui est déjà un peu plus espacé et on a le bouton ici qui pour l'instant n'est pas encoretrès beau on aimerait bien avoir un bouton un peu plus dans le style de ce qu'on avait ici donc pour
00:02:57 :ça on va pouvoir utiliser les classes par exemple la classe bouton danger pour afficher un boutonen rouge. Donc je vais revenir sur mon adresse donc ici dans le bouton je vais rajouter une
00:03:08 :classe donc on va mettre classe on va mettre la classe bouton et la classe bouton danger donc làencore je m'aide de la documentation pour voir ce qu'il faut utiliser pour avoir ce type de rendu.
00:03:17 :Je reviens ici j'actualise et là on a bien les boutons supprimés qui sont un petit peu plussympathiques. On va également modifier un peu le texte là vous voyez que le numéro de téléphone
00:03:27 :est dans la même couleur que le reste donc on va utiliser les couleurs du texte donc ça vouspouvez les retrouver dans color si je le retrouve quelque part ici alors ce n'est pas dans lecomponent dans utilities je crois voilà vous avez colors et là vous voyez toutes les couleurs que
00:03:40 :vous pouvez utiliser donc par exemple si on veut mettre le numéro de téléphone en bleu il suffitde rajouter la classe texte primary donc moi je vais vouloir mettre ce numéro de téléphone enbleu donc dans mon html ici donc si je vais mettre le texte en bleu là pour l'instant on voit qu'on a
00:03:53 :notre tag p ici donc on va rajouter une classe pour le numéro de téléphone et on va mettre texteprimary pour ce texte et si je reviens et que j'actualise cette fois ci le numéro est bien enbleu on pourrait faire ça pour d'autres choses mais j'ai juste laissé ça comme ça ça me satisfait
00:04:07 :j'ai peut-être juste changer le h2 ici alors on avait un h5 pour le current title je vais mettreun h3 ou un h2 on avait un h2 avant donc ça sera peut-être voilà un peu plus visible pour qu'on aitdonc le texte un peu plus gros donc là on a nos cartes c'est sympa mais ce n'est pas encore très
00:04:22 :bien organisé on n'a pas quelque chose de responsive donc pour ça on va devoir rajouterun container une rangée et des colonnes donc là je vais pas rentrer dans le détail c'est quelquechose qui pourrait faire l'objet d'une formation complète si vous voulez lire un peu plus vouspouvez aller dans layout ici et vous allez voir tous les éléments qui composent le layout avec
00:04:40 :bootstrap donc on va avoir notamment les containers et le concept de grilles donc c'est exactement çaqu'on va prendre comme référence pour créer notre grille donc on va utiliser un container une rangéeet ensuite des colonnes comme ça ça va nous permettre d'avoir quelque chose d'un peu mieuxorganisé donc ce que je vais faire c'est déjà créer donc on va faire un div avec une classe
00:04:57 :de container pour ça vous pouvez mettre div.container et si vous appuyez sur tabulationautomatiquement PyCharm va créer une balise div avec une classe de container donc on a notreconteneur ensuite on va faire une rangée donc là on fait le même principe avec div.row et là ça
00:05:12 :va créer une rangée et ensuite à l'intérieur de tout ça on va créer nos colonnes donc on va fairediv.col et on pourrait mettre juste col pour l'instant et entourer tout ça de nos utilisateurs
00:05:24 :donc on va prendre notre carte donc notre boucle ici on copie tout ça on le coupe et on le met àl'intérieur de notre colonne ici et on va là encore réagencer nos tabulations pour qu'onvoit un peu plus clairement ce qu'il se passe donc on a notre container principal notre rangée et à
00:05:38 :l'intérieur des rangées on a les colonnes et vous allez voir par la suite qu'on va mettre dans uneautre rangée notre formulaire donc pour l'instant on le laisse en dehors mais là il faut biencomprendre que dans le container on va pouvoir par la suite faire plusieurs rangées et dans les
00:05:51 :rangées on va faire des colonnes et les colonnes ça va nous permettre d'avoir plusieurs cases lesunes à la suite des autres donc je vais vous montrer déjà en état ce que ça donne à l'intérieur demon site donc si j'actualise vous voyez qu'on a une marge en fait à gauche et à droite donc ça
00:06:04 :c'est grâce au container et ensuite on a nos cartes qui s'affichent comme ceci pour l'instanton a mis col tout simplement mais on peut spécifier par exemple pour dire qu'on veut des colonnes de3 donc si je mets col-3 ici et que j'actualise vous voyez que là en fait on a une carte qui
00:06:19 :est plus petite alors là je crois que j'ai fait une erreur puisque effectivement alors je n'ai pasmis la colonne à l'intérieur de ma boucle donc on va faire une seule colonne qui va contenir toutesnos cartes donc c'est pour ça en fait qu'on a tout ici qui est sur une seule ligne et que quand on
00:06:31 :change la taille de notre colonne donc si je mettais par exemple 6 à la place ici et bien çava prendre plus ou moins de place sur l'axe horizontal mais tout est sur le même axe icivertical donc ça c'est parce que je n'ai pas mis ma colonne ici à l'intérieur de ma boucle donc je
00:06:44 :vais décaler tout ça je vais copier cette ligne ici et la mettre au dessus de ce div et on va fairepareil avec le n4 et on va le mettre en dessous on va également refaire notre indentation donc onva prendre tout ça et avec shift tab je vais désindenter tout ça et on va réindenter tout
00:07:00 :ce bloc ici à l'intérieur de notre boucle 4 pour qu'on comprenne bien que toute notre colonne iciet notre col sont à l'intérieur ici de notre boucle 4 donc si je reviens et que j'actualise cette foisci vous voyez qu'on a bien nos deux éléments qui sont sur la même ligne puisqu'on a 6 de chaque
00:07:15 :en fait les colonnes elles vont prendre 12 en place et comme on a mis col-6 et bien chaqueélément chaque carte ici va prendre 6 en largeur là on n'a pas énormément d'éléments dans notrebase de données donc on va rajouter des utilisateurs on va mettre utilisateur test01 on va mettre
00:07:31 :n'importe quoi pour l'adresse donc c'est vraiment juste pour vous montrer et pour rajouter deséléments utilisateur test2 là encore n'importe quoi pour l'adresse voilà c'est juste pourrajouter des éléments on va en rajouter un dernier pour avoir un offset sur la dernière carte voilàdonc comme ça on a tous ces éléments et vous voyez qu'à chaque fois donc chaque carte prend
00:07:52 :la moitié de la page donc comme ça on a deux cartes sur chaque rangée si je veux en mettreplus et bien je peux réduire ça ici je pourrais mettre 3 par exemple et là si vous n'êtes pastrop mauvais en maths vous pouvez comprendre que si on met une colonne de 3 et bien comme on a 12
00:08:07 :d'espace on va avoir 4 cartes puisque 3 x 4 ça fait 12 si à la place je mets 2 et bien là on vapouvoir avoir 6 cartes sur la même rangée donc là on a les 5 cartes qui sont sur la même rangéemais les cartes sont un petit peu trop petites à mon goût donc moi ce que je préfère savoir des
00:08:22 :cartes un peu plus grandes dans mon cas je vais mettre une largeur de 4 et comme ça ça nouspermettra d'avoir trois cartes les unes à la suite des autres le gros intérêt de bootstrapégalement c'est d'être bon pour gérer le responsive donc le responsive c'est ce qui arrive
00:08:34 :quand on réduit la taille d'une fenêtre quand on est par exemple sur une tablette ou un téléphonedonc là pour l'instant quand je réduis la taille de ma fenêtre on voit qu'à chaque fois on a descolonnes qui prennent la même place mais quand on réduit la taille de la fenêtre là c'est un peu
00:08:47 :trop petit vous voyez que l'utilisateur on a le R qui vient sur une autre ligne donc moi ce quej'aimerais c'est pouvoir avoir différentes tailles en fonction de la taille de mon écran donc c'esttrès facile à gérer avec bootstrap on va pouvoir rajouter la taille de l'écran et la taille
00:09:00 :des colonnes en fonction de la taille de l'écran donc on va dire que quand on est avec une taillemoyenne donc on va mettre md ici qui signifie medium et médium donc médium comme ceci c'estle mot anglais qui veut dire moyen donc quand on va être avec une taille moyenne d'écran on va
00:09:14 :utiliser 6 pour les colonnes et quand on va être avec une taille large donc on va préciser aveclg qui signifie large donc qui signifie tout simplement large en français c'est asseztransparent et bien là sur les grands écrans on va utiliser 4 à la place donc je reviens
00:09:28 :j'actualise sur un écran qui est grand là vous voyez qu'on a bien 4 pour chaque colonne donc çanous fait 3 cartes sur chaque rangée et si je réduis l'interface à un moment on va arriver àce qu'on appelle un breakpoint et là vous voyez que quand j'arrive à ce breakpoint qui correspond
00:09:42 :au format medium et bien là on a chaque colonne qui va prendre 6 en largeur et donc on n'a plusque deux cartes à chaque fois et comme ça ça va me permettre d'avoir quelque chose d'un peuplus sympathique et quand je réduis encore une fois vous voyez que là on va tomber à une seule
00:09:55 :carte sur chaque rangée donc c'est exactement ce que je voulais et la seule chose qui me resteà fixer ici c'est le gap entre les rangées puisque pour l'instant on a un petit espace icientre chaque colonne mais pour les rangées vous voyez que c'est complètement collé donc pour ça
00:10:09 :on peut rajouter après le row ici un gap en spécifiant g et un numéro donc là je pourraismettre g de 2 ou g de 5 donc là c'est à vous de voir ce que vous préférez g de 5 c'est assezc'est pas mal ça fait quelque chose d'assez similaire avec ce qu'on a sur le côté si vous
00:10:24 :voulez un gap un peu moins important donc vous pouvez réduire ou augmenter ce chiffre selon legap que vous souhaitez là vous voyez qu'on a quelque chose qui est beaucoup plus proche doncmoi je trouve que 4 ou 5 c'est pas mal on va essayer avec 4 voilà 4 c'est pas mal ça me
00:10:37 :plaît et vous voyez donc qu'on a quelque chose qui commence à être assez sympathique on a notre barred'adresse ici on a nos cartes avec le texte donc qui a des couleurs différentes le texte qui estbien mis en évidence pour le prénom ensuite le numéro de téléphone dans une couleur différente
00:10:50 :et le bouton supprimer qui me permet de supprimer chaque utilisateur donc voilà pour cette partiesur les cartes et dans la prochaine partie on va voir comment cette fois ci styliser notreformulaire qui la dernière partie du site qu'il reste à styliser et qui pour l'instant n'est pastrès élégante
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.