- 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 :On va ajouter trois boutons en dessous de notre titre ici pour permettre à l'utilisateur d'avoiren quelque sorte des presets donc c'est à dire qu'on va pouvoir cliquer sur le bouton semaine,mois ou année pour afficher les vues selon différents jours donc 7 jours pour la semaine,30 jours pour le mois, 365 jours pour l'année. Ça va nous permettre de voir les URL à
00:00:20 :l'intérieur du langage de template de Django. Donc pour commencer ce que je vais faire c'estcréer les boutons ici donc les boutons on va pouvoir cliquer dessus donc je vais faire deséléments html A qui vont nous permettre d'avoir des liens donc A avec une classe qui est la classe
00:00:33 :btn pour bootstrap qui va nous permettre d'avoir un bouton donc si je mets juste un A je pourraismettre un lien avec un texte moi j'aimerais bien avoir directement un bouton donc A.btn j'appuie
00:00:44 :sur tab pour autocompléter tout ça. Pour l'instant on ne va rien mettre ici dans le href donc le hrefc'est en fait là où on veut se rendre quand on va cliquer sur le bouton. Pour l'instant je ne
00:00:54 :mets rien je veux juste vous montrer visuellement ce que ça donne. Je vais mettre une autre classeici qui va être la classe btn-secondary donc là c'est pour la couleur on va indiquer en faitqu'on va avoir un bouton avec une couleur un peu grise vous allez voir puisque par défaut les
00:01:06 :boutons vont être désactivés et on verra dans la prochaine partie comment faire en sorte que lebouton sur lequel on a cliqué soit dans une couleur différente. Donc pour l'instant je vais
00:01:16 :juste mettre ici semaine et on va créer trois boutons comme ceci donc un pour les semaines unpour les mois et le dernier pour l'année. Donc si je reviens sur mon site que j'actualise là on a
00:01:27 :bien nos trois boutons qui s'affichent donc semaine, mois, année avec cette couleur desecondary qui nous permet d'avoir des boutons un peu grisés comme ceci. Donc maintenant ce qu'il
00:01:35 :va falloir faire c'est changer l'url de ces boutons puisque si je clique dessus par défauten fait ça va juste vous voyez nous ramener à la page sur laquelle on est actuellement. Nous ce
00:01:44 :qu'on veut c'est que quand on clique sur semaine ça change le nombre de jours ici et qu'on retrouvedonc un graphique différent en fonction du bouton sur lequel on clique. Donc pour ça on va déjà aller
00:01:53 :dans notre fichier url ici et on va donner un nom à cette url. Donc l'url ici qui me permetd'afficher un certain nombre de jours et des devises on va pouvoir lui donner un nom et cenom on va l'utiliser à l'intérieur de notre template pour retrouver le chemin complet vers l'url. Donc
00:02:09 :je vais dire name ici et on peut lui donner n'importe quel nom donc on pourrait donnerdashboard ou n'importe quelle chaîne de caractère ici c'est juste en fait un identifiant. Donc moi
00:02:17 :je vais mettre home tout simplement puisque ça va être assez court et la ligne sur laquelle on vafaire notre bouton ici vous allez voir à la fin va être assez longue donc je garde un nom assezcourt pour ne pas avoir une ligne qui va être trop longue à la fin. Donc ce qu'on va faire c'est
00:02:30 :ici à l'intérieur de href indiquer un lien. On pourrait très bien prendre le lien actuel doncavec la currency usd le coller ici et plutôt que de mettre 60 jours en mettre 7. Si je reviens ici
00:02:42 :que j'actualise quand je vais cliquer sur semaine on se retrouve bien avec le graphique de lasemaine. Le problème ici c'est que eh bien ce n'est pas très dynamique déjà on a mis 127.0.1
00:02:51 :quand notre site sera en ligne ça ne sera plus 127.0.0.1 mais autre chose et si jamais on changeles paramètres dans cette url donc dans l'url ici si on change pour remplacer days par jour ou qu'onmet à la place de l'esperluette ici un slash eh bien là encore ça ne sera pas dynamique. Donc ça
00:03:07 :c'est vraiment à éviter de mettre directement des urls comme ça dans les liens. Ce qu'on va faire àla place c'est utiliser le langage de template de Django qui est très puissant là dessus puisqu'ilva nous permettre de reconstituer automatiquement l'url. Donc pour ça on va mettre des accords
00:03:21 :avec les pourcentages et on va utiliser le template url. Donc le template url il faut luiindiquer l'url que l'on veut récupérer donc dans ce cas ci ça va être le nom qu'on avait donné ànotre url donc home. On n'oublie pas de mettre des guillemets ici il faut bien mettre les guillemets
00:03:36 :pour qu'il voit ça comme une chaîne de caractère donc comme le nom de notre url ici et non pas commeune variable Django qu'il essaierait d'interpréter. Donc on met des guillemets on met le nom de l'url
00:03:46 :et ensuite il va falloir passer les paramètres ici puisque par défaut si je fais ça en faitil va pas réussir sur le site si je reviens si j'actualise vous voyez qu'on a un problème quela fonction reverse n'a pas réussi à retourner une url puisque cette url elle s'attend à avoir
00:04:01 :deux arguments donc les jours et les currencies donc les devises et pour l'instant on ne lui apas fourni. Donc ce qu'il faut faire c'est revenir dans notre vue ici et spécifier ces paramètres.
00:04:11 :Donc on va dire tout simplement days tiré du bas range et dans ce cas ci donc dans le cas de lasemaine on va dire que c'est égal à 7 on met un espace et on va spécifier les currencies et lescurrencies là pour l'instant je pourrais mettre usd mais le problème c'est que si je mets usd là
00:04:26 :encore ça ne va pas être très dynamique ce qu'il faudrait c'est que j'utilise les devises qui sontdans mon url. Donc pour l'instant je vais juste mettre usd pour vous montrer que ça fonctionne
00:04:33 :donc je mets usd entre guillemets je reviens sur ma page j'actualise et là si par exemple on changele nombre de jours on met 50 jours dans notre url donc on est bien avec un nombre de jourspersonnalisé et si je veux afficher les usd mais sur 7 jours je clique sur semaine et vous voyez
00:04:48 :que cette fois ci on n'a plus d'erreur et Django a réussi à reconstituer automatiquement cetteadresse ici donc ça comme je vous disais c'est très puissant puisque si maintenant je reviensdans mon url et je change cette url donc je mets un slash à la place et que donc ici je mets 365
00:05:03 :jours on va mettre 350 jours pour avoir personnalisé je mets mon slash à la place de l'esperluette icipour séparer les jours et les devises j'actualise donc là ça fonctionne bien et cette fois ci sije clique sur semaine vous voyez que automatiquement ça fonctionne de la même façon et on n'a pas eu
00:05:18 :besoin de toucher à cette url ici tout a été calculé automatiquement par Django donc c'esttrès puissant puisque les url on sait très bien que ça peut changer et le fait d'avoir donc cetag url ici à l'intérieur de notre template ça fait qu'on peut changer nos url à n'importe quel
00:05:33 :moment et notre site va toujours fonctionner donc vraiment passez par cette façon de fairene mettez jamais des url complètes directement dans vos templates. Donc la dernière chose qu'il
00:05:42 :reste à faire ici c'est changer ce usd puisque là ça marche avec usd parce qu'on a usd dansl'url mais si je mettais cad pour afficher par exemple 50 jours de cad donc je remets monesperluette ici j'appuie sur entrée là j'ai le graphique pour cad avec 50 jours et si je clique
00:05:57 :sur semaine on se retrouve avec 7 jours pour l'usd donc moi je veux que ça reste avec les devisesque j'avais donc ce que je vais faire c'est directement retourner les devises dans ma vuedonc dans ma vue ici j'ai cette variable currencies qui contient ma liste de devises donc sous forme
00:06:11 :de chaîne de caractère et bien tout simplement on va la retourner dans notre contexte donc jefais une clé currencies qui va être égale tout simplement à ma chaîne de caractère currenciesdonc la chaîne de caractère originale ici. Faites bien attention si vous l'avez modifié donc si vous
00:06:24 :avez fait une variable intermédiaire qui va écraser cette chaîne de caractère currencies avecla liste et bien faites attention de ne pas envoyer cette liste là il faut vraiment envoyer la chaînede caractère donc faites bien attention moi j'ai fait le split directement ici dans la fonctiondonc ça veut dire que ma variable currencies est toujours égale à la chaîne de caractère. Donc
00:06:43 :j'envoie ça ici dans currencies et je vais pouvoir le récupérer donc dans mon template et enlever leusd et mettre à la place currencies donc là je ne mets plus les guillemets puisque ce n'est pas lachaîne de caractère currencies que je veux envoyer mais bien ma valeur qui est associée donc dans mon
00:06:57 :contexte dans la vue ici donc la valeur des devises que j'ai envoyé dans mon contexte ok. Donc jereviens sur mon site donc cette fois ci là je suis avec 7 jours en usd on va essayer autre choseon va se mettre avec 350 jours en CAD et en france-suisse j'actualise donc là j'ai bien mes
00:07:12 :deux graphiques en canadien et en france-suisse avec mon affichage personnalisé puisque je suisà 350 jours et si je clique sur semaine là je retrouve bien toujours CAD et CHF donc mes devisesont été conservées et c'est juste le nombre de jours qui a changé donc je suis passé de 365 jours
00:07:28 :à 7 jours. Donc il ne nous reste plus qu'à faire la même chose pour le mois et pour l'année doncon va copier toute cette url ici et on va le mettre ici dans le href pour le mois et pourl'année et on va juste changer ici cette valeur donc pour le mois on va mettre 30 et pour l'année
00:07:43 :on va mettre 365. Je reviens sur mon site pour tester si tout fonctionne donc j'actualise là jesuis avec la semaine si je clique sur mois je vais avoir 30 jours et si je clique sur l'année j'ai365 jours je peux rajouter des devises ici pour vérifier que ça fonctionne avec autant de devises
00:07:58 :que nécessaire donc là j'ai mes graphiques annuels pour les 4 devises je reviens sur la semaine j'aila semaine pour les 4 devises pour le mois c'est pareil donc tout fonctionne parfaitement on a lelabel qui change ici en fonction de l'année du mois ou de la semaine et si je mets un jour
00:08:12 :personnalisé donc 50 jours par exemple j'ai bien personnalisé qui s'affiche ici donc ça fonctionneparfaitement la dernière chose qu'on va faire et on va le faire dans la prochaine partie puisqueje crois que ça fait quand même déjà un bon moment que j'enregistre c'est modifier la couleur dubouton puisque pour l'instant on n'a aucune indication à part le titre sur quel bouton on
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.