- 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 enfin rendre notre site entièrement dynamiqueen permettant à l'utilisateur via l'URL ici d'afficher plusieurs graphiques.Pour l'instant, on a un seul graphique. Dans ce cas-ci, le graphique qui correspond au franc suisse,
00:00:13 :donc CHF ici, et on est obligé à l'intérieur de notre fichier Pythonde spécifier la clé que l'on veut envoyer à notre template.Donc ce n'est pas très pratique et on va modifier tout ça.
00:00:24 :Donc ce qu'on va faire, première chose, c'est enlever ce CHF ici.On va envoyer le dictionnaire au complet.Donc le dictionnaire qui contient comme clé les devises,par exemple USD, CAD, etc., en chaînes de caractère,
00:00:35 :et en valeurs qui va contenir les valeurs associées à ces devises.Donc une liste de valeurs que l'on va afficher sur nos graphiques.Dans notre fichier Views ici, c'est pas mal la seule chose qu'on a besoin de changer.
00:00:47 :C'est juste qu'on va envoyer le dictionnaire au complet.Ici, on récupère les devises dans Currencies.On les envoie avec le split dans notre API.Tout ça est déjà bien géré via l'URL et notre API.
00:00:59 :Et nous, on envoie juste le dictionnaire au complet.Donc forcément, il va falloir changer le template HTML icipour pouvoir gérer ce dictionnaire.Puisque dans ce cas-ci, pour l'instant, on affiche directement les datas.
00:01:09 :Donc le data, c'était tout simplement une liste.Et là, ça ne sera plus une liste, ça va être un dictionnaire.Donc ce qu'on va faire, c'est qu'on va faire une boucle For.
00:01:16 :On va en faire deux.Une ici, au niveau de notre colonne, pour pouvoir afficher plusieurs colonnes.Et une autre, à l'intérieur de notre tag script ici,pour pouvoir afficher plusieurs graphes.
00:01:26 :Donc pour gérer ce dictionnaire, on va faire deux boucles For.On va faire une première boucle ici pour pouvoir afficher plusieurs colonnes.Et une deuxième boucle à l'intérieur de notre tag scriptpour pouvoir créer plusieurs graphiques pour chaque colonne.
00:01:39 :La première chose que je vais faire, c'est enlever pour l'instant les graphiques.Donc je vais commenter toutes ces lignes de code.Donc je sélectionne tout et vous allez pouvoir aller dans le menu Codes ici.
00:01:48 :Sélectionner Comment with block comment.Et là, ça va mettre des commentaires.Donc ça, c'est le symbole en HTML pour faire un commentaire.Donc ça va le faire automatiquement sur tout notre bloc ici,pour ne plus qu'on ait le graphique,puisqu'on va devoir modifier les valeurs ici pour notre dictionnaire.
00:02:03 :Donc on y reviendra par la suite.Pour l'instant, je veux juste gérer les colonnes.Là aussi, pour le Canva, on va commenter cette ligne.Donc là encore, je sélectionne tout ça.
00:02:11 :Je vais dans Codes et je fais Comment with line comment cette fois-ci,puisque je n'ai qu'une ligne à commenter.Je commande ça et on va juste ici afficher un H1 avec un lorem ipsum.
00:02:21 :Puisque pour l'instant, ce qu'on veut,c'est juste voir notre boucle ici avec les différentes colonnes.Je vais également rajouter un bg-info pour qu'on y voit quelque chose.
00:02:30 :Donc pour qu'on ait une couleur d'arrière-plan sur ce lorem ipsum.Donc ce que je vais faire ici, c'est utiliser un template.Donc un tag de template Django pour créer une boucle.
00:02:39 :Donc on l'avait vu dans une partie précédente, au début de la formation.Pour faire ça, on ouvre une accolade et on met un symbole pourcentage iciet on va créer une boucle.
00:02:47 :Donc on va boucler sur les items de notre dictionnaire.Donc notre dictionnaire, c'est data et les items, c'est tout simplement items.Donc à l'intérieur du langage de Django,on n'a pas besoin de mettre les parenthèses ici.
00:02:58 :On va juste mettre data.items et on va boucler là-dessus.Donc on va dire pour currency, virgule rate in data.itemset on ferme notre boucle for ici avec un symbole pourcentage et une accolade.
00:03:11 :Donc currency, ça va être la clé.Donc USD, CAD, CHF, etc.Donc une chaîne de caractère.Et rate, ici, ça va être la valeur qui va être associée à cette clé.
00:03:20 :Donc les valeurs des devises.Ça, c'est notre dictionnaire data que l'on avait envoyé dans la vue.Donc data qui est égal à rate.Donc rate, c'est le dictionnaire de l'API, si vous vous souvenez bien.
00:03:29 :Donc vous voyez qu'on commence à faire un peu un chemin entre différentes choses.On a nos valeurs ici que l'on envoie dans notre contexte,que l'on récupère à l'intérieur de notre template et sur lequel on peut boucler.
00:03:40 :Donc on boucle pour créer plusieurs colonneset on va juste fermer notre boucle ici.Donc on vient à la fin du bloc div, ici,fermer notre boucle for en faisant une accolade, un pourcentageet en disant end for pour fermer notre boucle for.
00:03:53 :Donc ça, c'est la grosse différence avec Python,dans lequel on n'a pas besoin de fermer nos boucles for.Dans le langage de Django, il faut fermer ses boucles for.
00:04:01 :Donc ce qu'on va faire, c'est créer à chaque fois,pour le nombre de devises qu'on a,une colonne avec un lorem ipsum à l'intérieur.Donc normalement, c'est tout bon ici, j'ai bien mon dictionnaire,je boucle dessus, je vais revenir dans mon graphique.
00:04:13 :Donc sur ma page web, je vais actualiseret on a bien un bloc lorem ipsum qui s'afficheavec un background info derrière.Donc pour l'instant, on a un seul blocet si je veux rajouter des blocs,dans mon URL ici, plutôt que de mettre juste une devise,donc chf, je vais en mettre plusieurs.
00:04:28 :Donc je vais mettre par exemple cad usd,j'appuie sur entrée et là, on a bien plusieurs blocsqui se mettent à la suite.Donc ils se mettent à la suite, puisquesi on regarde ici, dans ma valeur lg, j'ai mis 8.
00:04:39 :Donc vu qu'on a des colonnes de 12,le maximum qu'on peut avoir c'est 12,et bien si j'ai deux colonnes à la suite,8 et 8 ça fait 16, donc on va être au-delà de 12,donc on ne peut pas avoir deux graphiquessur la même rangée.
00:04:52 :Si je mets par contre 6, 6 et 6 ça fait 12,donc là quand on met une valeur de 6,sur les écrans larges, donc par exemplel'écran sur lequel j'enregistre actuellement,on va pouvoir mettre deux colonnes,les unes à la suite des autres.
00:05:03 :Donc si je reviens ici et que j'actualise,vous voyez que cette fois-ci on a bien deux colonnesqui prennent l'entièreté de ma page web,donc la première colonne qui prend 6 de longueur,la deuxième qui prend 6,et la troisième qui vient à la ligne,puisque là on a une autre colonne de 6
00:05:17 :qui ne peut pas être affichée sur cette première rangée.On voit également qu'elle est mise au centre,donc ça c'est puisque j'ai en fait icirajouté Justify Content Center.
00:05:25 :Si je l'enlève, vous allez voir queautomatiquement cette colonne va s'afficher à gaucheet qu'elle ne sera plus alignée au centre.Donc c'est pour ça que j'avais misJustify Content Center.
00:05:35 :Donc bien sûr on peut modifier ici ces valeurspour avoir quelque chose de différent.Moi je vais le laisser à 6,puisque sur un écran assez large,j'aime bien avoir deux graphiques qui sont affichéesles uns à la suite des autres.
00:05:46 :Et si on veut vérifier le responsive,donc si je reviens sur mon site web,je peux faire un clic droit, aller dans Inspect,et vérifier ce que ça donne sur différents écrans.
00:05:53 :Alors là je vais juste rafraîchirpour avoir mon Justify Content Centerqui se remet en place.Et vous voyez que sur des écrans de mobileou de tablette,toutes les colonnes sont à la suite,donc sur des rangées différentes,puisque sur les écrans de taille moyenne,on est avec 10.
00:06:08 :Donc on prend 10 de longueur,donc 10 sur 12.Donc on a bien un petit espace icià gauche et à droite,et vu qu'on est à 10 sur 12,on ne peut pas avoir deux colonnessur la même rangée.
00:06:17 :Par contre si je me mets en format laptop,là j'ai bien mes deux colonnes de 6qui prennent donc la totalité de la rangée ici,et ma dernière colonne qui se met ici à la ligne.
00:06:26 :Donc ça fonctionne,on a bien toutes nos colonnesqui sont correctement affichées.Si on a trois devises,on aura donc trois colonnes.Si je rajoute une autre devise,donc par exemple à la suite ici,je rajoute le PHP,donc ce n'est pas le langage,c'est la devise en fait du dollar philippin.
00:06:40 :Dans ce cas-ci,vous voyez que j'ai bien icimes quatre colonnes qui s'affichent.Si je reviens avec une seule valeur,donc avec par exemple juste CHF,j'aurai un seul bloc d'affichés.
00:06:50 :Donc ça marche bien pour ici mon bloc 4,et on va devoir en fait faire la même chose iciavec un autre bloc 4pour pouvoir créer les graphes en javascriptqui vont être associés à ce canva.
00:07:00 :Donc ce que je vais faire,c'est que je vais revenir ici dans le codeet je vais faire comment with block comment,et là automatiquement ça va enlever le commentaire.
00:07:07 :Et je vais faire pareil ici,je vais en fait enlever ce H1,enlever ces symboles icipour enlever le commentaireet remettre mon canva.Donc là ce qu'il faut faire,la seule chose qu'il faut changer en fait,c'est cette ID,puisque pour l'instant on a un ID de chart
00:07:20 :et des IDs c'est unique.Donc on ne peut pas avoir plusieurs canvas iciavec le même ID.Et pour pouvoir cibler chacun des graphiques,on va devoir rajouter quelque chose ici.
00:07:29 :Donc je vais rajouter tout simplement un tiretet je vais mettre les doubles accoladespour insérer une variable ici à côté de mon chartet je vais mettre tout simplement currency,donc currency qui est la chaîne de caractère de ma devise.
00:07:40 :Donc là on aurait par exemple chart-usd,chart-cad, chart-chf, etc.Donc ça va nous permettre d'avoir un identifiantqui va être différentà chaque fois qu'on va passer dans la boucle.
00:07:51 :Et on va faire une autre boucle ici,donc à l'intérieur de notre script,on va créer une boucle forqui va permettre de boucler également sur data.items
00:08:00 :et d'insérer ici les valeurs de nos devises.Donc on refait une bouclepour currency, rate in data.items,donc exactement la même chose.Je termine mon tag iciet je vais à la fin fermer ma boucle for,donc end for.
00:08:13 :Et on va changer notre getElementByIdpuisque pour l'instant on récupère chart.Donc moi ce que je veux c'est cette fois-cirécupérer chart-currency.Donc je vais copier tout ça,c'est exactement la même chose,et je le colle ici.
00:08:25 :On va également sélectionner tout notre bloc icipour l'indenter et le mettre à l'intérieur de notre boucle.Donc ça ce n'est pas une obligation,on pourrait très bien le désindenter mêmejusqu'au début comme ça,c'est juste que je préfère garder les choses un peu claireset donc avoir ici une indentation visuelle
00:08:39 :entre notre boucle et notre code javascript.D'accord ?Donc là je récupère chart-currencyqui va être égal à la deviseque l'on est en train de récupérerdans notre dictionnaire,donc data.items.
00:08:51 :Ici daysLabels on ne le change paspuisqu'il va être similaire pour toutes les devises,donc ça on le laisse tranquille,il ne bouge pas.On va changer notre label ici USD,on va mettre à la place notre currency,donc là je reprends ma variable currencyet je vais la mettre à l'intérieur ici des guillemets.
00:09:07 :Donc là c'est très important de garder les guillemetspuisque quand on boucle sur notre dictionnaire,par défaut il n'aura plus les guillemets.On va vraiment avoir CAD sans guillemetset si on met CAD sans guillemets,eh bien javascript va penser qu'on fait référenceà la variable CAD qui n'existe pas.
00:09:21 :Nous ce qu'on veut c'est vraiment afficherla chaîne de caractère CAD,donc on laisse les guillemets iciet on fait juste insérer cette valeur de currencyà l'intérieur de ces guillemets.
00:09:30 :Pour finir on va avoir les data ici,donc là avant c'était data,puisque data on envoyait la liste.Nous ce qu'on veut c'est plus data,puisque data c'est notre dictionnaire au complet.
00:09:38 :Si on revient sur notre vue,là on avait envoyé dans datale dictionnaire rates au complet.Donc là on a rates qui est égal au dictionnaireet si je reviens dans ma page HTML,cette fois-ci rates,là dans ce cas-ci ce n'est plus le dictionnaire,c'est vraiment juste la liste des valeurs des devises.
00:09:53 :Dans rates ici et currency ça correspondà la devise en chaîne de caractère.Donc rates ici je vais le mettre à la place de data,donc data c'était notre ancienne liste,maintenant c'est rates.
00:10:02 :On garde le save ici,bien important et normalement tout est bon,on a bien notre boucle for qui est commencé ici,qui se termine ici.
00:10:09 :On va cibler le chart dans notre IDqui correspond à la devise,on affiche les labels pour les jours,ça ça ne change pas,on affiche la devise pour le labelet on affiche les valeurs de notre dictionnaire.
00:10:22 :Donc j'actualise ici,je reviens sur ma page,j'actualise et on a bien notre graphique.Alors la seule chose qu'il reste à enleverc'est cette couleur de background,donc là je vais enlever bg-info,je reviens, j'actualiseet j'ai bien les francs suisses qui sont affichés.
00:10:35 :Si on veut voir ce que ça donne au niveau du HTML,donc dans le script,on peut afficher ça iciet là vous voyez qu'on a tous les labels qui sont affichés,on a notre label chfet on a nos datas qui sont affichées également.
00:10:46 :Si je veux donc rajouter un graphique,je peux à la suite ici mettre une virgule,rentrer chf, j'appuie sur rentreret là j'ai bien mes deux graphiques qui s'affichentavec leurs valeurs respectives.
00:10:56 :Si je vais voir dans mon HTML ici,on va voir que j'ai bien deux colonnesavec à chaque fois un chart qui va être différent,donc chart chf et chart chdavec un ID donc différent.
00:11:06 :Ici je vais voir dans mon script ici,de la même façon j'ai deux graphiques qui sont affichés,donc le graphique pour chf et le graphique pour chd.
00:11:13 :Donc je peux fermer ça ici,là j'ai mes deux graphiques qui prennent la totalité de mon écran,je peux rajouter un troisième graphique,donc je vais rajouter le usd,j'appuie sur rentrer et là on a bien nos trois graphiques qui s'affichent.
00:11:24 :Je peux en ajouter un quatrième avec le php,ils vont bien se mettre sur notre page.Donc on a notre label qui change ici,donc chf, on a les valeurs qui changent,donc chf, chd, php, usd.
00:11:34 :Je peux changer le nombre de jours,donc je reviens ici dans mon URL pour mettre par exemple 50 jourset vous voyez que donc tout est dynamique.
00:11:41 :Cette fois-ci on n'a plus besoin de toucherà quoi que ce soit à l'intérieur de notre vueou de notre fichier html,on peut tout contrôler depuis l'URL.
00:11:49 :Donc c'est vraiment ça qui est intéressantpuisque nous on va juste envoyer l'URL à un utilisateuret l'utilisateur va vouloir modifier et afficher différents graphiquesen fonction de cette URL.
00:11:59 :Donc là si on a juste besoin d'afficher les valeurs de usd,on met usd, on choisit le nombre de jours que l'on veut afficher,donc par exemple 128 jours,j'appuie sur rentrer et j'ai mon graphique usdsur les 128 derniers jours.
00:12:11 :D'accord ? Donc voilà comment en faiton a pu créer grâce à notre boucle forplusieurs graphiques en fonction de l'URL.Donc ça n'a pas changé grand chose dans notre vue,on a juste envoyé directement le dictionnaire.
00:12:21 :C'est vraiment dans le template icique l'on a dû adapter le templateavec des boucles pour pouvoir créer plusieurs graphiques.Mais vous voyez que ce n'est pas très compliqué,la syntaxe du langage de templatede Django est assez simple, ça ressemblebeaucoup à Dupiton, il faut justepas oublier à la fin de notre boucle for
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.