Créer une app web moderne de A à Z avec Python

Introduction dans cette vidéo je vais vous présenter une application de todo list donc un projet très classique que j'ai fait moi-même puisque je les proposer à mes étudiants donc les étudiants qui suivent l'accompagnement de doc string donc tous les mois on a un projet différent ce mois ci c'est ce fameux projet de la toux deux listes donc j'ai tous mes étudiants qui ont fait leur propre version de cette ou de liste que ce soit directement en ligne de commande avec des applications de bureau ou encore des applications web donc je me suis prêtée au jeu pour faire ma propre version dans mon cas j'ai utilisé les bibliothèques comme django achetez-le x et pour la partie frontale je suis partie sur du boost rap très simple qui va nous permettre d'avoir un site assez classe a présenté et qui n'est pas très compliquée à mettre en oeuvre vous allez voir la vidéo est assez longue on a à peu près trois heures de vidéos avec toute la partie back end et ensuite à la fin la partie frontale est également au milieu de tout ça donc cette petite bibliothèque h tmx qui est assez récente qui à peu près de trois ans mais qui fait beaucoup de bruit et qui va vous permettre d'avoir un comportement un peu expliqué donc single page applications comme on pourrait avoir avec des bibliothèques comme react sauf que là vous allez voir c'est très très léger avec quelques lignes de code seulement dans le html on va pouvoir ajouter ce niveau d'interactivité qu'on aurait avait créé acte qui par contre il est beaucoup plus lourd et beaucoup plus compliqué à apprendre j'ai vraiment hâte de vous présenter tout ça si vous aimez ce genre de vidéo bien sûr n'oubliez pas de mettre les pouces bleus ça aide énormément également si vous avez des commentaires à faire sur cette vidéo si vous voyez des choses que vous auriez fait différemment n'hésitez pas à en parler en commentaire pour qu'on puisse en discuter ça m'intéresse énormément je ne suis pas parfait il ya plein de façons de développer ce genre d'application donc n'hésitez pas à me faire vos retours il ya peut-être des choses que j'ai manqué aussi je parle notamment de sécurité à un moment dans la vidéo donc n'hésitez pas à commenter là dessus et à voir si je n'ai pas fait d'erreur puisque j'ai fait ça tous d'une traite donc il est possible que à la fin il est petit truc qu'ils soient pas fait de la meilleure façon donc n'hésitez pas à en discuter en commentaire je les attends pour qu'on puisse avoir une discussion à ce sujet est également abonné vous à la chaîne bien important pour être avertis en priorité des vidéos qui vont sortir et activer la petite cloche bien important aussi pour recevoir les notifications et pour pouvoir regarder en priorité ses vidéos cède aussi énormément sur l'algorithme de youtube si vous regardez les vidéos dès qu'elles sortent pour les propulser sur la plateforme donc voilà pour mon petit speech j'espère que ça va vous r c'est vraiment une vidéo sans montage j'ai pas voulu faire un truc très découpées qui soit absolument parfait mais vous ne verriez pas en fait le processus de réflexion vous allez voir que là vraiment je réfléchis je pars de zéro il ya vraiment rien au début aucun dossier je crée toute la structure du projet je crée le projet de la partie back end à la partie frontale et tout ça est fait sans montage pour vous voilà pour le petit speech j'espère que ça va vous plaire et on commence tout de suite avec la première partie donc la création de l'application et du côté back end [Musique] ok alors j'ai tout ce qu'il me faut Création du projet Django devant moi je vais utiliser le navigateur brave pour afficher le site tout simplement j'utilise pas de charme pour le projet et j'ai un petit terminal qui est ouvert au cas où alors je vais créer le projet directement dans pas de charme moi j'utilise donc pas de charme pro il ya pas mal de fonctionnalités en plus par exemple je peux directement créer un projet django est spécifié quelque chose ici alors moi je vais pas le faire directement puisqu'il fait pas mal de choses que je n'aime pas forcément il va créer un dossier template il va configurer pas mal de choses en fait qui me plaisent pas forcément je préfère utiliser directement le terminal donc moi je vais faire un projet pure peyton ici et je vais le mettre dans mes dans mon dossier ici utilisateurs on va l'appeler doc liste tout simplement et là on peut choisir de créer un fichier même pour un pays y donc moi ça ne m'intéresse pas je vais rester là encore sur quelque chose d'assez simple on va par contre lui demander de créer un environnement virtuel dans le dossier le nv avec python 3 points 9 donc je vais laisser ça comme ça puisque l'environnement virtuel c'est quand même assez pratique surtout qu'il va ensuite le configurer automatiquement pour mon projet donc je veux garder ça ça va mais évitez d'aller de devoir aller en fait dans les préférences après donc de savoir éviter en fait de créer premièrement l'environnement virtuel et ensuite le mettre dans les préférences de paille de charme pour ce projet donc ça fait deux choses en une la casse et dans ce cas-ci en fait je préfère faire laissez pas de chambre le faire c'est quelque chose qui est pas très intéressant à faire par contre après pour django il ya quelques petits trucs que je préfère faire à la main donc là j'ai mon dossier qui est bien créer je vais ouvrir je m'en voudrais en fait un terminal directement ici j'en ai un d'ouvert ici en plus au cas où mais y en a un qui est dans pas de charme là encore on va avoir des petits trucs assez intéressant notamment le fait qui va automatiquement activé mon environnement virtuel donc là je suis dans mon dossier j'ai juste l'environnement virtuel d'ailleurs il n'est pas affichée ici parce qu'il ne masque par défaut je pense si je vais voir ici je peux afficher afficher ou est ce qu ils sont chauds et solide et files c'est ça et vous voyez ici que par défaut donc le dentier le dossier d'environnement et est marqué comme non mecs claude aidant fait ici directory on peut enlever l'exclusion donc par défaut il le met en exclu dit comme celle n'est pas affichée mais il est bien là donc ensuite une fois qu'on a notre environnement qui est activé on va s'assurer qu'on est bien avec le bon pit ont donc on a effectivement le piton à l'intérieur de doc liste si je fais un pipe liste là on va voir que je n'ai rien à part les package de base donc je vais commencer par installer django on va installer la dernière version actuellement qui doit être la version 4 et cal qui effectivement 4.0.5 donc si je refais un pipe liste là cette fois ci je veux bien avoir django et on va directement faire un freeze dans un peep frise pas juste un freeze un pipe freeze dans louis quoi rime ce point txt voilà donc comme ça on aura directement si je reviens ici notre fichier louis coleman ce qui va lister les extensions dont on a besoin ensuite qu'est ce que je vais faire bien je vais créer tout simplement le projet django donc on va utiliser django admin on va faire star project on va l'appeler doc liste donc doc liste comme ceux ci et on va le mettre dans le dossier courant donc je mets juste un point parce que je n'ai pas envie de le mettre dans un sous dossier je veux le mettre directement dans le dossier ici donc là on a le dossier doc liste keynote dossier principal on ensuite notre dossier deux listes qui est le dossier de l'application django avec le fichier de 7 things manage et notre louis coleman ce qui est bien ici donc ensuite qu'on va faire on va créer je vais créer un read me première étape ce Définition du cahier des charges qui va me permettre en fait tout simplement de me prendre des notes donc ici voilà un an et demi il va c'est donc c'est un fichier markdown je vais l'appeler donc doc liste est sur le bail de charme en fait vous pouvez activer ce petit volet ici qui permet d'avoir la visualisation de votre marque demande directement mise en forme donc c'est assez pratique et ce fichier readme à terme ça peut être utile pour un dépôt git pour indiquer des informations sur votre projet là moi je vais m'en servir principalement pour planifier un petit peu le truc et prendre des notes donc là on commence à avoir pas mal de choses on a notre projet moi ce que je vais faire c'est également créé une application directement donc cette fois ci on va pouvoir passer par match pour un pays y est on va faire star tape et je vais l'appeler task donc ça va être l'application qui va servir à gérer mes tâches on pourrait tout faire directement dans doc liste ici là on pourrait créer un fichier views on pourrait tout faire l'intérêt de cette application je préfère quand même directement séparer ça au cas où l'application soit évolué par la suite et qu'on est par exemple une gestion de compte etc je préfère commencer à séparer les choses et d'avoir vraiment la gestion des tâches dans une application séparée même si dans ce cas ci on va avoir probablement qu'une seule application qui va faire toute la logique ça va nous permettre aussi d'utiliser directement donc d'avoir en fait c'est directement les fichiers comme le modèle views et et plus tard on va faire un dossier de template qui sera reconnue automatiquement puisqu'on avec une application donc je vais commencer par planifier un petit peu comme je disais le projet on va pas plonger tête baissée même si j'ai déjà une bonne idée de ce que je veux faire de la forme finale chorale projet je veux m'assurer quand même d'avoir une petite liste de des fonctionnalités que je veux faire des modèles que je vais créer ça me permet d'avoir tous assurent écrit et ne pas partir directement dans du code de m'assurer aussi que j'ai bien fait toutes les fonctionnalités que je vais vouloir donc je vais faire une partie déjà pour les modèles et on va faire si j'arrive à écrire une partie pour les modèles et une partie on va faire pour les fonctionnalités avec deux n le je crois non avec un seul n fonctionnalités web c'est mieux comme ça donc les modèles qu'est ce qu'on va voir comme modèle ça va être assez simple on va faire un modèle pour les tâches bien sûr et on va faire un modèle que moi je vais décider d'appeler collection ça pourrait être taxe ça pourrait être catégorie donc l'idée c'est en fait d'avoir des tâches qui vont être qu'ils vont être organisé en différentes catégories mais je vais l'appeler collection ça fait changement un petit peu donc collection et qu'est ce qu'on va voir à l'intérieur de collection comme champ on va avoir un nom donc je vais faire un fils de name on va avoir un slug probablement puisque on va l'utiliser dans l'url et je pense que ça va être tout pour le moment où on verra peut-être par la suite pour ajouter des deschamps mais ça me semble suffisant pour l'instant et ensuite on va voir notre modèle task qui va lui aussi contenir alors ça va pas être un nom on va l'appeler de descriptions peut-être ce serait plus clair non c'est on pourrait faire une tâche avec un nom et une description moi je vais juste faire des tâches avec juste le ce qu'on va faire en fait sur la tâche et et bien c'est tout la collection dont bien sûr on va faire en fait puisque la collection va contenir des tâches donc on va mettre une clé qui va permettre de dire à quelle collection appartient la tâche donc ça ça va être une clé de type florine qui qui va nous permettre de relier une tâche à une collection et ensuite on pourra récupérer toutes les tâches qui sont associés à cette collection donc ça me semble pas mal on va pas mettre de slug puisqu'on n'a pas de nom pour la tâche ça va vraiment être juste la description et si on a besoin de cibler une tâche précisément on utilisera les clés primaire le slogan là ça va être vraiment pour l'url parce que les collections va probablement les utiliser dans l'url la tâche je pense pas donc on verra plus tard on peut très bien par la suite faire des modifications également et r- ajouter ou modifier des champs il n'y a pas de souci pour ça donc on n'est pas obligé d'avoir tout coulé dans le béton là c'est vraiment juste pour avoir une quand même une bonne idée là c'est un modèle très simple on a juste deux modèles avec un qui relié à l'autre par une flowline qui est ici donc il n'y a pas besoin non plus de faire énormément de planification on n'a pas cinq modèles qui sont tous liés les uns avec les autres donc au niveau des fonctionnalités qu'est ce qu'on va avoir on va avoir donc là je veux mettre des petits des petits crochets ce qui va me permettre de de dire quand j'ai quand j'ai validé la fonctionnalité avec un plus ou un x je crois que c'est un hic je sais plus puisque les crochets après si vous en faites je parle de par rapport à github sur github je crois qu'avec la marque dingue ça va les afficher comme cochet mais je sais plus exactement quelle est la syntaxe donc je vais mettre un x pour l'instant pour l'instant toute façon ils ne sont pas faits donc on va mettre juste une des crochets je crois même qu'il faut mettre un espace si je fais un test comme ça que je duplique ouais non voilà ça m'affiche rien n'empêche de chambre qui ressemble à une casse que je puisse que chez mais je crois que sur pie qui chante sur github pardon ça les affiches un peu mieux je veux laisser ça comme ça alors les fonctionnalités qu'est ce qu'on va voir on va avoir l'ajout de je vais enlever les tirs et on va faire ajouter une collection on va faire supprimer une collection on va aussi s'assurer que on ne peut pas ajouter donc empêché l'ajout d'une collection en doublon qu'est ce qu'on va avoir d'autres sur les collections on va voir alors là je rajoute deux espaces à la fin ça permet de faire un deux et là j'en ai trois donc deux espaces à la fin ça permet de les mettre à la ligne en marque down donc ajouter supprimer empêcher l'ajout d'une collection double on pourrait également rajouté une possibilité de renommer une collection je vais voir si je le fais renommer une collection est ensuite empêché l'ajout d'une collection en doublon on va voir également donc ajouté une tâche relié à une collection bien important on va pouvoir supprimer une tâche on va pouvoir qu'est ce qu'on va pouvoir faire d'autre bah c'est pas mal tout je pourrais aussi ajouté à la possibilité de le renommage je sais pas si je vais le faire on va peut-être rester on va commencer simple avec jusque là joué la suppression et on verra à la fin si si ça dure pas trop longtemps si on peut également rajouter la partie renommage pour modifier en fait une collection où une tâche déjà ajouté donc on va faire ça ajoute et supprimé une tâche qu'est ce qu'on va avoir d'autres c'est tout je pense on va faire donc bien sûr afficher les tâches d'une collection et voilà je pense que voilà on va faire ça ok ça me semble pas mal on commence à avoir quelque chose qui est un peu mieux planifier je vais rajouter les peuples les espaces ici et ici aussi voilà et comme je vous dis après au fur et à mesure on pourra cocher donc ces différents éléments en mettant un petit x dedans pour l'instant ce n'est pas le cas donc on va les enlever alors qu'est ce que je vais commencer par faire on va commencer là j'ai une bonne idée déjà des modèles des fonctionnalités et vous allez voir que je vais moi je travaille de façon assez évolutive je vais commencer par faire les principales fonctionnalités ici commencez à créer la structure en fait de tout ça et après on pourra rajouter des petits trucs par la suite donc donc donc je vais commencer par créer Création des modèles les modèles on va commencer avec les modèles ensuite on va commencer par créer les templates de base donc on va on va commencer par les modèles et après on fera les template pour afficher quelque chose là je vais juste faire un manège pour un pays y prennent serveurs pour vérifier que tout fonctionne bien jusqu'ici donc de j'actualise j'ai bien la page de django donc ça fonctionne bien et on va tout de suite appliqué les migrations donc l'immigration par défaut voilà ça s'est fait comme ça on n'aura plus ce message à chaque fois donc ça c'est des migrations de base pour les autres l'été l'autorisation d'utilisateurs l'admin etc donc qu'est-ce que je vais faire donc les modèles donc les modèles on va les faire directement dans l'application parce qu'on va déjà la rajouter aussi dans le settings donc ici on va descendre dans installed apps on va rajouter ici task qui est le nom de l'application pour qu'elle soit reconnue par django est ici donc dans le fichier modèle on va créer nos modèles donc on va créer une classe collection qui va hériter de modèles ce point un modèle et on va faire un champ qu'on avait dit donc name je crois et modèles ce point on va faire un quart field donc un char field avec un max lines alors qu'est ce qu'on va mettre comme max lang ça c'est toujours la grande question moi comme je sais jamais trop je sélectionne ma ligne je regarde combien ça fait là on est à 40 90 36 caractère donc 36 caractère vous voyez ça fait ça on j'essaie toujours d'être un petit peu plus large on va mettre 60 60 caractère ça ferait là on en est à 38 donc un peu plus longue ça je pense que pour le nom d'une collection ça devrait être suffisant ensuite on va mettre un slogan comme je disais donc l'on va faire un slot field et et voilà on va le laisser comme ça je sais plus si sûr les slops field on va mettre une maxlan aussi je suis plus sûr on verra par la suite ce qui est 6ème s'il ya nécessité d'en mettre je pense que django nous le dira et on va créer notre classe task qui valent aussi hérité de modèle aux points modèle on va faire une description qui va être égal à modèle ce point une charte fields walt là aussi on va garder un char file donc on peut faire un char field en latex fil textile ça va permettre de stocker pas mal plus de choses mais je pense que la description des tâches sera quand même assez minime ça va tenir sur une ligne principalement donc là on peut mettre pareil une description et on va mettre on va mettre un peu plus la notation va mettre peut-être 300 caractères ça me semble pas trop mal pour commencer là encore c'est quelque chose qu'on peut qu'on peut modifier par la suite donc ne vous en faites pas trop avec ça donc description et chars field 300 ensuite on avait dit collection donc collection ça va être relié à notre modèle collection juste au dessus donc on va faire un forlan qui est frime diverses collections et on va dire en delete donc sent obligé de le mettre modèle ce point et on va mettre un casque et donc est ce que ça veut dire ça c'est que quand on si on supprime une collection qu'est-ce qu'on fait des tâches qui sont associés à cette collection donc dans ce cas si on veut dire qu'on va les qu'on va les supprimer qu'on va également supprimer les tâches associées à la collection donc moi c'est un comportement qui me semble logique j'ai pas envie d'avoir des tâches qui ne sont reliés à rien on va considérer par défaut que les tâches doivent être associés à une collection là si on voulait on pourrait mettre par exemple 7 nuls et on pourrait mettre nu les galates chaud donc ça voudrait dire en fait qu'on pourrait avoir des tâches qui ne sont reliés à rien et que si on supprime une collection est bien les tâches seraient tout simplement déconnecté si vous voulez de cette collection moi je vais laisser casque est ici faite attention avec l'auto complétion de paille de charme généralement il va vous rajoutez les les parenthèses ici mais vous n'en avez pas besoin c'est vraiment juste modèle point casquette comme ça donc ça commence à être pas mal on a fait ce qu'on avait mis dans le readme à savoir le name slug description et collections donc on va créneau migration on va revenir dans le terminal mais que my way chose j'ai pas besoin de spécifier forcément le nom de l'application on peut le spécifier après ici avec en mettant de l'application dans ce cas si j'en ai qu'une voilà donc je sais très bien ce qui va créer il va me créer cette petite migration ici qui va permettre de créer dans la base de données les modèles que je viens de créer en python on va appliquer cette migration avec mike wright et voilà et comme ça ça va nous permettre donc si on ouvre un shell on va pouvoir commencer à créer tout simplement des modèles donc si par exemple je veux créer une collection donc je vais faire un petit peu de ménage ici on va importer donc from task point un modèle on va importer une collection et on va pouvoir faire collection project create name on va lui dire défaut est ce l'oeuvre on veut dire défaut comme ceci voilà donc là ça marche si j'affiche donc collection up collection points objects point last ça m'affiche bien ma collection je peux la récupérer je peux afficher son nom son slug donc tout fonctionne on va la supprimer et voilà donc là si je fais collection points objects paul je n'ai plus rien dans mon coin russe est donc ça fonctionne on a bien nos modèles jeu là c'est une petite vérification pour vous montrer mais il ya aucune raison que ça ne fonctionne pas et on va commencer par créer nos fichiers html de base donc là je vais Création du fichier index.html normalement on fait un fichier de base là ça va être tout qui va être sur une seule page donc je pense pas là encore pour prévoir on pourrait créer un fichier de base qu'on est un dans d'autres fichiers dans les applications là je vais commencer avec un fichier juste index.html qui sera un fichier unique que je vais mettre là encore directement dans task puisqu'on n'a que cette application je vais commencer comme ça je vais faire un dossier que je vais appeler du coup de templates avec un ace bien important de mettre le s puisque ça c'est un dossier qui va être reconnus automatiquement puisque dans l'essai thing ici on a à me dire ce qui est à tchô dans la variable template ici donc ça veut dire que tous les dossiers qui s'appelle templates comme ceux ci vont être reconnus comme les dossiers contenant des fichiers de template ensuite on va moi je veux rajouter alors généralement on faire un autre dossier avec le nom de l'application pour bien séparer je vais leur ajouter quand même au cas où là encore on n'a pas envie de faire trop de renommage par la suite là il vaut mieux éviter quand même on pourrait mettre directement les fichiers en disant peut-être qu'on aura qu'une application donc on peut mettre directement tout dans templates et ne pas prêts fixé par le nom ici par task mais je préfère prévoir le coup et me dire que je vais avoir donc un fichier index e.html qu'on va qu'on va relier en remettant task slash un expert a ajouté m donc on verra par la suite ce que ça donne je vais laisser ça je veux dire qu'on est en français et on va dire doc liste d'autres listes tout simplement dans le tie temps le voilà donc par défaut il m'a fait ce doctype ici je crois que si vous l'avez pas vous faites html non html ou non c'est quoi c'est ça ouais voilà allez vous mettre pas mal de trucs en plus d'ailleurs des trucs d'ailleurs on ne sait jamais trop à quoi ça sert il ya plein de choses vous pouvez aller regarder c'est des trucs voilà que ça va dépendre des navigateurs tout ça ça c'est pas mal du boiler plight qu'on a tendance à ne pas trop regarder ou voilà on va regarder une fois de temps en temps pour quand même après avec eux quelques années d'expérience on a quand même envie de savoir à quoi ça sert voilà illégal edge j'imagine que c'est des trucs voilà de compatibilité donc ça s'est passé des trucs qui sont complétés automatiquement envoyées par les ide la plupart du temps donc moi je veux laisser ça comme ça je m'aime je même revenir à ce qui m'avait dit à la fin ce qui m'avait créé au début voilà on va rester sur quelque chose de simple pour l'instant avec ce doctype donc qu'est ce qu'on va faire on va créer une première verrait on va déjà testé que notre notre vue va bien retourner ce fichier on va faire la route classique on va aller dans l'url ici et je vais enlever tout ça à chaque fois il ya une bonne doctrine qui nous indiquent tout ce qu'on peut faire là j'en ai pas besoin donc je vais l'enlever on a le chemin des admins qui est là par défaut et on va faire dans la vue ici on va créer la page d'index donc la vue d'index et on va retourner laroui quest et on va retourner tasks lâche index point html et le contexte on va mettre pour l'instant un dictionnaire vide puisque part par la suite je pense qu'on va mettre quelque chose donc je le prévois déjà et d'un index ici donc on retourne la page d'index maintenant on va faire l'url qui va être relié à cette page donc dans l'url ici je vais dupliquer ça on va faire la page je vais la mettre avant ici d'ailleurs et on va importer notre vie donc on va faire from task point views in porte alors voilà on peut faire différentes choses moi je vais faire une preuve task point viewed as views tout simplement on pourrait préfixe et là encore en prévision avec task view moi je veux juste la preview ce pour l'instant views et on va faire point index pas prendr point index et on va lui donner un nom on va dire rom tout simplement donc voilà on a notre chaîne de caractères vide dont qui correspond à la l'url par défaut du site qui redirige vers index aum hélas ici on va mettre un petit h un dock liste pour vérifier que ça fonctionne bien je reviens dans mon terminal je fais un run serveurs pour lancer le serveur je reviens ici j'actualise et là j'ai bien le dock liste qui est affiché donc on a bien notre premier chemin qui est fait qui fonctionne bien et on va pouvoir commencer la logique donc on va pouvoir commencer à créer plusieurs plusieurs vues qu'est ce qu'on va faire on va créer alors moi je vais me concentrer là principalement sur le backend pour l'instant on va par la suite utilisé bootstrap pour styliser un petit peu l'application mais je veux pas commencer à mélanger du front tag du bas qui est et commencer à faire en fait des des considérations de stylisation qui n'ont rien à voir avec le bac je trouve que c'est très très important de vraiment pensé les deux séparément souvent d'ailleurs dans les entreprises les deux sont faits par des personnes ou des équipes séparées il ya des fois des des foules stack sur les plus petits projets ou sur certaines équipes mais là encore ils vont pas forcément faire tout de a à z par une seule personne donc moi je préfère vraiment voilà séparer les deux il ya vraiment la logique back end le frontend on verra par la suite surtout c'est aussi quelque chose qu'on considère pas assez c'est je vois des gens en fait il commença qui font des fois la stylisation sur des pages qui disparaissent par la suite en fait puisque ils ont pas encore forcément justement fait juste petit travail ici de fonctionnalités donc il commence à faire des fonctionnalités qui n'ont pas besoin en fait ceux qui ne sont pas utiles dont ils n'ont pas besoin et ils commencent à utiliser tout ça donc vous perdez une journée de travail à styliser une page de sur des fonctionnalités que vous avez fait qui finalement ne sont ne vous sont pas demandées par votre client ou peu importe donc en fait il faut vraiment commencer par faire ce qu'on appelle le le poc le proof of concept où le mvp le minimum variable ou 3 oct donc il faut vraiment commencer par ces aspects là pour faire le plus rapidement quelque chose qui correspond à ce qu'on vous a demandé et donc pour ça je vous conseille vraiment de vous focaliser sur le back end et après une fois que vous êtes sûr que les fonctionnalités sont là qu'elle fonctionne comme comme elle doit fonctionner et qu'on en a bien besoin vous pouvez passer à la partie stylisation est comme ça ça permet aussi de séparer bien les choses donc donc donc qu'est-ce que je vais faire maintenant je vais créer les vues alors je reviens dans mon lit demi a ajouté une collection on va commencer par ça on va commencer par la gestion des collections comment ajouter une collection les supprimer et empêcher l'ajout d'une collection donc je pense qu'on va commencer par ça et après on va voir les tâches puisque les tâches doit être relié à une collection donc on va commencer par cette partie là et ensuite on verra comment ajouter des tâches sur ses collections donc je vais revenir ici dans mon views que qu'est ce qu'on va faire en qu'on va commencer par Créer une collection permettre d'ajouter une collection alors on va mettre une boîte de texte on va mettre un formulaire et on va aussi assez rapidement intégré donc acheté mx que je voulais vous montrer dans ce projet donc vous voyez il ya tout qui est déjà prévu j'aime bien un petit coq start comme ça on va déjà intégré en fait ce script dans notre html ce qui va nous permettre d'utiliser htm x puisque on va l'utiliser pour ajouter des collections de façon sans avoir besoin de recharger la page donc on va avoir besoin d'un formulaire en fait avec un l'input un bouton et on va faire une requête h tmx avec ça ça va commencer à devenir assez rapidement intéressant vous allez voir on va je vais déjà créé la vue tout simplement je vais l'appeler à tu collectionnes on va apprendre le weequay sts est pour l'instant on va retourner http risque en ce qui est vide je vous voyais je prévois le truc déjà donc là je vais apporter ce http request failed c'est très drôle j'ai eu récemment je sais pas pourquoi pas de chambre qui ne fonctionnait pas pour cet impair automatique donc là en fait sur paille de charme vous avez une fonctionnalité qui est aussi surveillé ce code je crois de depuis peu vous pouvez importer en fait automatiquement depuis un module quelque chose que vous avez utilisé dans votre script mais que vous n'avez pas encore importer et récemment dans un projet avec django ça ne fonctionnait pas en fait je ne sais pas pourquoi je redémarre et mon idée veut et où il n'y avait rien à faire ça fonctionnait pas et là je me suis retrouvé vraiment assez bête puisque surtout avec django toutes ces petites fonctions là elles sont dans des modules souvent à rallonge ça c'est vraiment peut-être le plus court que vous pouvez avoir des fois ça donne des trucs flam flam django pointe templates point template ties là par exemple point statique point vous avez des trucs à rallonge comme ça et quand tu es et c'est là qu'on se rend compte à quel point quand on ne tape pas les trucs à la main et que on se repose sur des outils comme ça en fait on ne retient rien là moi j'ai quelques jeux c'est des fois que voilà renders etc je me souviens que c'est dans django sur le coach parce que à l'époque justement quand j'avais appris je n'avais pas encore ce truc de d'import automatique et du coup j'avais un petit peu retenu que dans le talk ya pas mal de fonctions comme ça qu'on utilise régulièrement mail http response dans quoi elle est alors là j'en ai absolument aucune idée et je suis vraiment complètement dépendant maintenant de ce petit option entrée avec l'import automatique qui me permet de facilement trouver en fait où sont les choses et de ne pas avoir à me re de retenir en fait j'ai pas besoin de retenir à chaque fois le nom de tous les modules je trouve que c'est quand même très pratique parce que ça fait beaucoup d'informations qui n'est pas très utile on s'en fout un peu de savoir que c'est dans les lingots http ou short cut etc mais c'est quand même assez intéressant à noter quand même si vous êtes en phase d'apprentissage moi je dis toujours essayer quand même de taper le plus possible les choses pour pour voilà pour pour vous en souvenir pour vous souvenir tout simplement aussi du nom des classes et après bon le nom des modules c'est peut-être un petit peu moins important mais quand même faut pas être trop dépendant non plus de ces outils donc là je veux juste retourner ça je planifie en fait déjà tout le chemin qui va être fait puisque je sais que ça on n'aura absolument besoin donc je vais le créer comme ça ce sera fait at collectionne pareil on va mettre un nom at collectionne sur l'url on va faire une nouvelle qui va s'appeler qu'est ce qu'on va mettre je vais m je mets deux collections tout simplement on va mettre à deux collections voilà tout simplement on va pas s'embêter et dans l'index donc dans l'index on va faire le formulaire et là j'ai hâte collection moi je vais rester sur un truc aussi d'ailleurs il ya beaucoup de gens qui aiment beaucoup les classent baisse views là je vais rester sur quelque chose d'assez simple je pourrais utiliser des formulaires django dans ce cas-ci vu que on a en fait une on va avoir la dépendance avec htm x je préfère écrire le h tout le html en fait vraiment pour vous montrer toutes les a tous les mécanismes de htds mix directement dans le html plutôt que de passer par un formulaire django qui va être donc principalement du python dans lequel on va devoir surchargé en fait des méthodes pour pouvoir modifier du html et sert à ça ça ferait un peu d'aller retour entre les deux entre du python et le html pour ces pour s'économiser quelques lignes de code et de logique en html je trouve que moi je préfèrerais dans ce cas-ci vraiment vraiment tout faire en html et ne pas utiliser les formulaires ce sera plus clair pour vous de voir en fait que quel chemin est parcouru et qu'est ce qui est fait avec h tmx donc normalement j'ai touché mon url j'ai la vue qui va être prête pour ajouter la collection je pourrais presque directement faire d'ailleurs c'est la logique de cette de cette vue mais on va déjà quand même aller dans le html pour pour créer le formulaire donc je vais créer un formulaire ici directement là je vais pas m'embêter avec là encore la navigation tout ça en fera la mise en forme plus tard donc je vais créer un formulaire l'action ça va être donc l'action on va lui mettre l'url et je pense pas d'ailleurs que j'ai besoin de mettre ici puisqu'on va la mettre directement dans lâcheté mix par contre dans la méthode on va mettre que c'est une méthode poste alors vous allez voir d'ailleurs qu'avec h tmx j'ai remarqué que les méthodes delete par exemple il y avait ça fait des trucs un petit peu bizarre donc je sais pas encore si c'est vraiment supporter donc moi je vais faire beaucoup de méthodes post même pour des opérations de suppression plus tard parce que je ne sais plus pourquoi exactement mais avec dee lite ah oui c'était le jeton csrf en fait avec post le jetons csrf dans un formulaire été envoyées automatiquement il était reconnu et envoyé par acheter mix et avec la méthode il y ce n'était pas le cas donc je suis resté du coup sûr voilà sur sur la méthode poste alors là je j'ai buggé un petit peu parce que j'ai pas l'auto complétion sur les template alors ça je pense que c'est parce que je n'ai pas activé et ça je vais l'activé par contre dans les préférences lingots donc dans l'ain gouache et framework ici django que je vais chercher donc le dossier doc liste je vais l'ouvrir ici on va mettre le fichier de cet hymne gay également donc cet hiver dans doc liste setting le management y il est directement à la racine donc c'est bon donc je vais active et donc ce django supporte et vous allez voir que on va avoir donc cette fois la coloration syntaxique ça nous permet également d'ajouter une configuration ici qui en fait qui est une configuration donc django serveurs là encore je crois que c'est du coup réservée à la version pro de paille de charme donc je vais l'appeler doc liste par des fronts avec le port 8000 donc on va laisser tout ça comme ça et ça c'est pratique je veux ça nous permet de lancer directement le serveur depuis ici sans avoir besoin de passer par le terminal donc c'est à peu près la même chose que ça fait mais comme ça on à la configuration on a le raccourci aussi ici qui va nous permettre de lancer en renouant des bugs donc c'est assez pratique et on peut du coup cette fois ci avec la coloration syntaxique vous voyez qu'il a il a remarqué en fait que c'était le language le langage pas le language le language je vais pas parler franglais donc le langage de tom play ginga 2 qui est utilisé par django donc il le reconnaît ça va me donner déjà la complétion donc là si je fais de l'art vous voyez j'ai bien url il reconnaît tout et si je fais at collection ici et que je fais ensuite comment de b vous voyez que samassa mais ça va bien mais menée en fait vers la définition de cette chaire est donc c'est très pratique voilà pour passer d'un truc à un autre là aussi vous voyez qu'il a remarqué que c'était un fichier de templates et je peux cliquer ici sur la petite icône pour aller dans le fichier je peux leur là encore utiliser donc le commandent b avec go to des visages et je retombe bien dans mon fichier donc c'est très pratique ça le support même juste pour ça je trouve si vous travaillez beaucoup avec django ça vaut le coup de la de la licence pas de charme pro qui coûte à peu près 10 euros par mois je crois parce qu'on gagne vraiment beaucoup de temps à pouvoir passer comme ça d'un truc à un autre de dans notre projet donc on a notre formulaire ici on va rajouter le ccf token encore vous voyez il détecte tout on va mettre un input de type texte on va lui donner un nom ça va être collectionnées y mettra comme ça je suis jamais sûr avec html html dans les conventions je crois que c'est en fait il n'a pas vraiment c'est jamais clair d'ailleurs à chaque fois que je cherche en fait je tombe sur des sons de cloche différents et ce qui vaut plutôt mieux mettre ça comme ça où ça comme ça ou tout simplement avec un tiret moi je vais mettre un tirer comme ça et puis voilà je vais faire ma propre convention là dessus donc on met un input on va mettre un bouton qui va être de type seul mythe et on va voir comment par la suite utiliser donc acheté mix pour soumettre quelque chose sans avoir besoin de recharger la page dont cnh normalement ça devrait être pas mal ici on va pas mettre de la bella je pense que c'est ça qui m'indique ici voilà missing à société ball donc je suis pas un expert en tout ce qu'ils accessibilité etc je pense que on devrait mettre un lebron même si on le met cacher il finalement donc donc donc là pour l'instant je vais pas le mettre je vais là encore essayé de rester simple mais probablement que mon site ne sera pas le plus accessible possible et je m'excuse pour ça je vais me concentrer pour l'instant sur vraiment le bac n comme je vous disais donc donc input type text collection name on a le poste on a hâte collectionne donc on va pouvoir tester tout ça déjà voir si ça marche comme ça et après on verra avec htm x donc là on va faire un print de ris ques point poste et on devrait récupérer normalement les données donc je vais aller pas dans le finder ça on va le cacher hop je vais revenir là j'actualise alors le site le site le site hélas il n'est pas là est ce que j'ai lancé mon serveur ou non le serveur est arrêté ok donc je vais le lancer je pense qu'il avait une version en cache qui s'affichait voilà hockey place est bon alors j'ai bien la boîte de texte le bouton n'apparaît pas faim tout petit parce que j'ai pas mis de textes bien sûr qu'on va mettre ajouté hop voilà et je vais grossir un petit peu pour qu'on y voit quelque chose donc là je vais m test je clique sur ajouté on est bien ici sur had collection est ici j'ai bien voilà le ca s'élève token est le nom de la collection donc c'est parfait et je vais pouvoir ici je vais déjà faire la logique du coup de l'ajout de la collection on va faire donc on va récupérer ici collectionne name on va mettre tout ça dans une variable qu'on va appeler donc collection name et et on va créer une collection donc avec collection pour un object point cloud gate est donc ça on va l'emporter une bande dessinée à partir de tasses pour un modèle c'est bon naïm donc ça va être collectionne name et on va échapper aussi tout ça pour des raisons de sécurité ça c'est pour éviter en fait qu'on mette commettre quelque chose qu'on va être quelque chose de dangereux je vais je vais vous montrer ça peut être assez intéressant en fait là donc si je passe le collectionneur comme ça tout simplement si on donne la possibilité en fait aux utilisateurs de créer des collections jeu mais collectionne name je crée cette collection est là on va laisser le http response qui a retourné comme ça pour l'instant est ce qu'on va faire dans l'index ici en fait je vais je vais récupérer toutes les collections donc à partir de collection prend index point rôle on va aller on va les order by name name comme ça et voilà donc par défaut il va tout prendre on n'est pas obligé d'ailleurs de mettre rôle point order by si vous prenez tout vous pouvez mettre directement order by et on va passer ça dans le contexte et le contest chez le délégué ici parce qu'on va peut-être le modifier par la suite donc je préfère faire ça comme ça là encore en prévision collection est pour l'instant on va pas utiliser cette variable donc je vais le mettre comme ça ici et là on va passer contexte voilà et là on va voir un petit avertissement de sourds seriez qui me dit que je peux tout mergy mais bon voilà pour l'instant je vais garder ça comme ça c'est voulu donc thaskin texte on récupère toutes les collections et ici on va faire un on va afficher les collections donc on va faire fort collectionne il collectionne on va fermer le hand fort et ici on va mettre 1 h 2 par exemple avec collectionne up collectionne point name et je vais vous montrer dans ce que je voulais dire pour la sécurité puisque donc là ok on peut ajouter quelque chose on peut ajouter une collection et on va à l'affiché sur la page donc j'actualise je reviens donc pas sur cette page mais cette page ici on va essayer d'ajouter une collection où je veux dire par exemple tâche je clique sur ajouté là on revient à cette url alors oui je vais faire ça va être plus simple je vais faire ici 1re direct vers la vue de rom airs direct là vous voyez ça c'est un truc qui je crois dans short cut aussi effectivement donc on va rediriger vers la vue romsi gelé bien appeler comme ça au moins c'est ça voilà comme ça on va revenir sur cette vue à chaque fois qu'on ajoute une collection donc là j'ai bien les tâches on va ajouter le spac course voilà donc ça ça fonctionne bien et là à ce que je voulais dire c'est par exemple en fait si on fait on pourrait mettre en fait du Sécuriser la saisie utilisateur javascript ici on pourra dire bonjour et elle ajouté hélas alors là oui alors force alors là c'est échapper quand même par ses échappées par le langage de template puisque là on ajoute on récupère les collections et en fait quand je viens ici le name par défaut ça va le django en fait va échapper ces informations là et si je fais par contre à non non non non je dis n'importe quoi voyez je suis en train de dire des conneries j'allais dire que si on mettait safe ici ça allait mais non en fait c'est pas ça c'est que c'est qu'en fait j'ai pas fait le bon truc c'est que j'ai mis en alerte mais j'ai pas mis de j'ai pas mis de scripts d'ailleurs je vais cacher ce terminal pour que ce soit plus simple de passer de l'un à l'autre en fait j'ai mis en alerte mais en fait il faut je le met entre voilà comme ça parce que pour l'instant c'est juste du texte donc on va faire ça c'est lâche script si je me trompe pas je clique sur ajouter j'actualise n'ont toujours pas alors est ce qui me fait donc là j'ai un doute parce que si j'actualise donc là ça doit être bien échapper là on h2o est pourtant j'ai le script je me pose des questions est ce que c'est moi qui si je fais un alerte test normalement oui voila ca affiche quelque chose ok alors là ça veut dire que il met bien alors si je m'essaye par contre ici voilà qui est donc c'est ça donc en fait si je m'essaye flat cette fois ci par contre mais auquel vous voyez on a bien donc le message qui s'affiche puisque j'ai dit en fait que ces données étaient safe est donc en fait c'est ça le sait ça le risque que vous avez c'est que si un moment vous considérez que les données qui sont envoyées par les utilisateurs sont sécuritaires et bien en fait elles vont être interprétés parce que là si je reviens ici ap dans le h2 vous voyez ici on a le script qui est qui et afficher de façon donc sécuritaire qui est directement allé html et donc on a une possible faille d'injection de javascript dans ce cas ci j'ai je perds le nom de la faille c'est xxx est ce cross je sais plus xs un truc comme ça xss où ils cessèrent je sais plus long de la faille précise mais en gros on permet à un utilisateur d'injecter du code qui peut être exécutée du coup du côté client donc imaginer que ces listes après soit disponible à tout le monde on pourrait avoir des choses assez dangereuse qui soit exécutée et on ne souhaite pas en fait donné cette ce pouvoir là à un utilisateur de notre site donc là ce qu'on peut faire pour prévenir ça imaginez que là vous ayez justement vous vous considérez vous voulez afficher parce que par exemple on pourrait on pourrait considérer que ces données sont safe et on veut les affiches et mais dans ce cas ci on va faire un escape au préalable et escape en fait ça va permettre de ne pas de d'échapper en fait les caractères spéciaux donc je vais l'importer à partir de whisky les voilà django utile html escape donc ça normalement c'est en fait quand vous passez par renders tout ça va être fait automatiquement c'est à dire que les données que vous passez dans le contexte vont être échappé mais là comme on ajoute quelque chose dans la belle dans la base de données on va utiliser skype pour roman de l'ajouter échapper ces données donc là je vais vous montrer ce que ça donne si je reviens donc là le oui je vais faire un petit peu de clean dans mes collections je vais faire on va relancer un shell shell on va faire flotte à ce point un modèle in band collectionne les collectionne object point d'élite et on va mettre sur le rôle dans ce cas ci voilà donc là j'ai supprimé toutes les collections je reviens ok donc là si je fais course j'ajoute là il n'y a pas de souci par contre si je fais donc script on va reprendre notre script je la joute là vous voyez qu'on n'a pas de soucis alors que on a bien mis le cfi si donc là vous voyez que on a on a enlevé cette possibilité même en mettant le cf ici quand j'actualise ça ne fait pas de la leyre ce que j'avais pourquoi et bien tout simplement si on va voir la base de données donc je sais pas si on va le voir dans le ciel directement si je fais ça frotte à ce point collection et on va faire collection object points l'as tu vois là ces points name voilà donc si on le voit bien ici c'est que en fait tout a été échappé donc ce que ça a fait en fait cette fonction donc si je reviens ici dans your escape en fait ce que ça fait c'est que ça a converti tous les petits trucs comme ça donc le signe plus grand que est en fait c'est ça que ça veut dire ici on a une espère lui est ensuite plus petit que en fait puisque ltc laisse dame gtc great dane ici le x 27 10 aces tout ça donc ça c'est les apostrophes etc etc donc en fait ça fait en sorte que ces caractères ne sont pas stockées tels qu'at elle donc comme ceux ci dans la base de données donc je vais vous montrer en fait la différence il enlève le escape ici et que donc je fais un exil dont je vais je reste dans mon shell on va rajouter ici donc on va refaire ce script ici up ajouté et là effectivement donc on alerte qui se fait et si je fais si je refais donc collection de l'ast et c'est times là vous voyez que cette fois ci on stocke directement donc les le javascript donc enfin le sait une chaîne de caractères mon stock est directement les plus grands que plus petits qu'eux et c'est donc donc voilà tout ça pour dire que dans ce cas si moi je vais garder - escape pour prévenir ce risque potentiels qui pourraient être introduits si on échappe pas les zones et qui sont envoyées par l'utilisateur donc tout ça pour voilà c'était c'était assez long mais c'est important de le préciser quand même donc qu'est ce qu'on a qu'est ce qu'on a fait maintenant on a leur direct donc on a en fait on a déjà là la fonctionnalité principale en fait qu'ils aient fait qui est celle de d'ajouter les collections je vais quand même supprimé je reviens ici alors je n'ai pas fait je me dis je vais peut-être faire l'admin directement je vais créer un superviseur parce que ça Création de l'interface administrateur va être chiant fait de passer à chaque fois par par le shell donc on va faire un courrier de super user je vais garder ça l eau on va mettre un mot de passe voilà ok super user treated on va aller dans admin aidant admin on va faire admin points saillants registers et en valais jester les collections depuis task voilà et on va faire pareil direct tant qu'à y être avec casque et on va l'emporter ici d'ascq task sans s voilà donc comme ça c'est fait si je reviens ici que j'ouvre et je vais dans admin hop voilà admin je vais pouvoir me le guillou the name voilà donc comme ça non je veux pas sauvegardé j'ai mes collections et je veux pouvoir facilement les supprimés ici voilà ça sera plus facile que de passer par le shell à chaque fois donc là voilà j'ai mes collections je peux les ajouté hélas ce qu'on va faire c'est on va faire la possibilité de deux déjà de s'assurer qu'il ya pas de Empêcher la création d'une collection en double doublons et s'assurer qu'il n'y a pas de doublon on va faire acheter mixe aussi et on va pouvoir supprimer aussi les catégories on va faire tout ça on va commencer par les doublons on va prendre le collectionneur et alors là il ya différentes façons de faire on pourrait on pourrait moi je vais faire un je vais faire en fait on va utiliser gator create je pense que c'est la façon la plus courte de faire on pourrait en fait déjà récupéré la collection vérifier si elles existent on pourrait faire un trail en fait et dire collection pour un object - get et collectionne name légale à collectionner et on pourrait faire un excès pts collection points 2 non du coup je serai pas non ce serait pas does not exist ce serait l'un va ce serait existe non il n'ya pas de existe je sais plus donc on pourrait faire ça en fait récupéré vérifier si ça marche ou pas moi ce que je vais faire plus tôt enfin récupérer la collection si elles existent on l'a on la recrée pas moi je vais faire un get off louis gates et gâteaux recrue est en fait ça va nous retourner un tube si je veux voir la définition de cette fonction ici donc là encore j'utilisais commandes b le fameux déclarations hors ue dj ci qui nous permet d'aller à la définition de cette fonction donc là c'est vraiment le code de django et vous voyez ça nous retourne un tube et je sais jamais l'ordre c'est pour ça que je regarde à chaque fois ça nous retombe l'objet en premier et ensuite est-ce qu'il a été créé when he created the boulianne spécifié ring n'roll un objet quoi ce président donc ça permet de savoir si l'objet est écrit ou non donc on peut récupérer ici la collection et on peut récupérer created est donc là ce qu'on va dire c'est que donc si la collection n'existe pas il va la créer et si elle est créée donc il faut clouer heated là on va voir comment on gère ça moi je pense que je réfléchis avec htm x je vais on va on va vu qu'on va pas rafraîchir la page je vais mettre une alerte justement je pense on pourrait mettre un modèle ou un truc un peu plus sophistiquée moi je pense que je vais mettre une alerte qui va dire que la collection existe déjà mais là vous voyez on pourrait faire un truc tout simple on pourra dire on va retourner en https police pense la collection existe déjà on pourrait faire ça voilà et sinon on re direct vers le rom donc donc là en fait ce qu'on va faire celle inverse plutôt on va dire que si donc si elle a été créée ça veut dire que qu'elle n'existait pas si notre qualité donc ça veut dire qu'elle n'a pas été créé ça veut dire qu'elles existaient déjà et que donc que donc elle existe déjà donc en retour le https police pense sinon on revient dans le jeu direct ici donc je reviens là je vais énormément ça devrait marcher si j'ajoute course c'est bon et si j'essaie de rajouter course là on va retourner sur le voile à la collection existe déjà et normalement il ne devrait pas être ajouter une deuxième fois voilà donc ça fonctionne bien on a bien réussi à empêcher l'ajout d'une collection déjà existantes donc si on revient dans notre petit readme ici on a donc déjà à l'ajout de la collection s'est fait empêché l'ajout d'une collection en double on s'est fait donc on avance bien et on va ensuite passé à la suppression de la collection donc pour ça pour ça pour ça je réfléchis comment on va pouvoir le faire on peut mettre 1 - à côté où on va faire un truc du genre pour l'instant on va à côté voilà de la collection ici on va en fait pour chaque collection je réfléchis en faire et ce qu'on fait un ouais on va faire un petit formulaire pour chacune donc ouais on va faire un truc comme ça donc on va faire ici un formulaire un formulaire l'action l'action là encore on va faire on va commencer par faire les choses sans acheter mix mais on rajoutera après je réfléchis ou alors j'ai même envie de dire en fait on fera la suppression après on va se concentrer sur le safe aussi on va on va plutôt essayer d'avancer un petit peu sur le reste comme l'ajout d'une tâche suppression d'une tâche et afficher les tâches mais on va commencer par faire ça et je pense que je vais déjà mettre le ht mix ouais je vais vous montrer comme ça comme ça on va le faire là dessus et comme ça ce sera fait donc acheté mix on va donc prendre ici avec le cdn le script on va le mettre dans notre fichier d'index donc le script ici on va le mettre tout au début ici dans le hors jeu c'est plus alors ils le disent pas généralement les scripts as mais plutôt à la fin mais je vais vérifier quand même cdn deux êtres grec et non la forme être au début dans le est directement oui puisque j'imagine là encore on jeudi je suis pas un expert en feront stand parce que des fois il ya des trucs en fait normalement voilà ça me semble logique qui file le lot d avant de pouvoir puisqu'on a le html qui est après mais il me semble que des fois on met des scripts dans le foot heures alors que l'on utilise on utilise des choses ici plus haut donc j'ai je me rappelle plus trop alors là je ne sais pas si d'autres du javascript j'imagine oui c'est un script donc c'est du javascript donc ils disent de mettre dans le header donc voilà je le met là sans trop me poser de questions supplémentaires à terme on pourrait également télécharger donc le fichier javascript et l'inclure directement sans passer par le cdn mais là pour vraiment faire quelque chose de simple je vais le laisser ici comme ça comme ça on n'y a accès directement et c'est plus simple donc là ce qu'on va faire on va utiliser les la puissance de hache tmx pour éviter d'avoir à d'avoir ce rechargement de pages en fait là si j'ajoute des tâches vous voyez qu'on a on le voit ici dans le long glay de navigation si jamais quelque chose là vous voyez m tié rafraîchissement c'est pas grand chose mais c'est quand même assez intéressant de voir acheter league donc on va pouvoir utiliser h tmx pour éviter leur chargement de la page donc acheté mix ça fonctionne directement dans le html donc je vais rajouter quelques petits trucs ici vous allez voir il n'y a pas grand chose à rajouter je vais garder le seul but à la fin et on va mettre tout ça ici donc on va faire un chix post et là on va mettre justement l'url qu'on avait précédemment donc là j'enlève de l'action et je vais mettre cette url ici entre les guillemets donc ça c'est l'url vers laquelle on souhaite faire la requête post ensuite on va dire où est ce qu'on veut ajouter les les éléments qui vont nous être retournés par cette vue puisque là en fait dans cette vue on va retourner non pas on va pas faire un jeu direct on va retourner à acheter police pense comme on l'a fait ici sauf que là on va retourner http luis pants avec la collection qu'on a créé ou même le non en fait on va mettre juste le collectionnisme donc on va tout simplement retourner le nom qu'on a récupéré ici et donc si je reviens dans mon index on va ensuite dire où est ce qu'on veut rajouter cet élément qui nous est retournée donc on va vouloir leur ajouter ici dans la liste des collections donc je vais mettre un niveau au dessus et je vais m je vais encapsulé en fait tout ça dans un d'yves l'a d'ailleurs il nous a tous mis au même niveau voilà j'ai fait un petit je voulais pas montrer mais j'ai fait un command option elle quelque chose que je fais très régulièrement qui est dans côte je crois voilà ici au rif en maths code séparé voilà de tout remettre un petit peu en ordre et là du coup bah il m'a enlevé un niveau de notation sur tout ça donc là on va faire un div et on va lui donner un avis il va appeler se taillent dit collectionne tout simplement et on va pouvoir cibler donc cette cette estive en faisant h x target donc acheté que stargate celle-là on souhaite ajouter des éléments et on a un dernier élément qui est à chic ce swap par défaut je crois que c'est before and je suis plus sûr on va retourner voir ici elle fixe swaps ici donc swapping je sais pas s'ils le disent je vais retourner voir ici dans le voilà dans leurs références attributs [Musique] je sais pas s'ils le disent quelques par défaut by fred non benz audi faulkner html ok donc par défaut en fait ça va remplacer ça va remplacer en fait tous les éléments c'est ça le problème c'est que si on fait si on met pas le h6 swap ici il va prendre ce qui est retourné par le https pants enfin par la vue ici il va prendre le http respawns et il va modifier tout ce qui est dans un taxi c'est donc tout ce qui est à l'intérieur de collection donc en fait il va écraser toute la liste de collection par la nouvelle collection qu'on a créé donc tout c'est parce qu'on veut on veut rajouter cette collection à la fin donc pour ça en fait on va utiliser before and qui si je me trompe pas il ya plusieurs avec after and after guette elements avoudrey dire qu'on la joue très après le collection ça voudrait dire qu on rajouterait ici le nom de la collection nous c'est before and response c'est ça après le dernier enfant ici donc là on va avoir des dh de imaginez vous ici vous avez plein de h2 on va rajouter 1 h de ici à la fin donc c'est exactement ça qu'on veut est d'ailleurs là j'ai pas mis pour vous montrer on va vraiment faire un string avec un 1 h 2 comme ça et on va insérer le collectionneur ce lâchage de donc on va faire ça beaucoup mieux par la suite là je vais pas laisser du html directement ici par la suite on fera un template et on utilisera la fonction rendall à l'état pour avoir l'échappement qui est qui est fait automatiquement et c'est aussi là je le fais vraiment rapidement juste pour vous montrer donc donc donc si j'aurais bien dans l'index là on a lâché que ce soit plus normalement on a tout ce qu'il faut je vais tester donc si j'actualise ici on va faire tests de jeux cliquer sur ajouter et voilà ça marche vous voyez là on n'a pas eu si je fais le test 3 si vous regardez l'onglet ici vous allez voir qu'il ya pas de rafraîchissement vous voyez ça se passe ajoute automatiquement et si je fais donc test deux là par contre nous va avoir alors là c'est marrant parce qu'on a fait un archipel response si j'arrête de petites secondes essayer de réfléchir à qu'est ce qui va se passer là en fait ça va ajouter tout simplement le message qu'on avait mis donc lequel la collection existe déjà savall a ajouté comme une tâche parce que là en fait dans notre view on a retourné http response nous ce qu'on va faire la place c'est que on va faire si je me souviens bien il ya moyen donc en fait on va retourner à http respond semé avec un status quo d' status on va mettre je crois que c'est 409 je suis plus sûr status quo de risque existe aurélie on va chercher aurélie existé jusqu'au avec 409 conflit que c'est ça à 409 complique donc ce qu'on va faire c'est qu'on va retourner en fait acheté police ponte mais avec un statut texte de 409 et d'en acheter mx ça permet de le récupérer alors je sais plus et avec quoi plusieurs il ya un moyen je me souviens plus lequel ces attaques je sais plus erreur on va les voir en ad-hoc ce error alors n 2 a lui acheté à oui c'est ça en fait on a un événement un événement donc là en fait c'est ça vous avez ce nom de d'événements qui va être rigolo par comme quand on a un problème et donc ça en fait il va falloir le récupérer donc on va faire un script ici là encore on pourrait séparer ça dans un fichier javascript mais je vais pas m'embêter avec les ressources externes là on va tout faire dans le fichier html donc là en fait on va faire un un dock humans point un beau 10 points had et wendel isner et on va écouter pour ce donc cet événement et quand cet événement se déclenche on va appeler une fonction qui va être pour l'instant on va faire on va faire un alerte tout simplement et on peut récupérer si je me trompe pas le détail target element voilà http x htx xmlhttprequest dans detail xhr donc là on va récupérer l'événement et on va faire event point dit-elle point xhr et là je crois qu'on a un truc du genre message ou quelque chose du genre pour l'instant on va juste faire on va faire un console point log du détail voilà donc normalement ça devrait être bon donc là en fait ce qui se passe je lis un peu vite on va faire donc une requête verras tu collectionnes et si ça existe déjà on a un statut d' erreur et du coup ça va déclencher ici le ht mix russes pointent ses erreurs et on va donc afficher la province et on va juste l'affiché part par la suite on fera une boîte d'alert je vais actualisé ok on va faire test et je vais ouvrir les outils de développement pour aller dans la console et là vous allez voir que si je fais ajouté on a bien effectivement dans correspondent status quo à 409 donc ça c'est normal et ici non le xml http request live band test je vous lis cependant ce texte voilà donc là on va afficher je pense que je peux faire comme ça tout simplement et on va faire un alerte de tout ça voilà donc je reviens j'actualise si je fais le test ajouté voilà parfait on à la lèvre la collection existe déjà et voilà donc la collection n'est pas ajouté voilà donc si je fais ça si je fais course pareille ça existe déjà et si je fais course sans s là ça fonctionne on la joue bien donc voilà on a bien fait cette autre chose ici qui est en fait non non non ça en fait on l'avait déjà fait c'est juste que j'ai rajouté h tmx donc oui donc ça c'est bon donc on commence à bien avancer maintenant alors je vais faire un petit peu de ménage là encore je vais revenir dans mon ici et je vais supprimer tout ça et moi ce que je vais faire aussi un truc que je n'ai pas noté dans les fonctionnalités j'aimerais bien en fait créé une liste par défaut parce que par Création d'une collection par défaut défaut l'an n'a aucune liste donc j'ai envie de par défaut faire une liste que je vais appeler défaut qui sera créé automatiquement s'il n'existe pas donc ça je vais le faire on va le faire dans la vie d'un decs est ce qu'on va faire et on va le faire directement j'ai envie de le faire dans le modèle donc ici en fait on va faire on va faire une fonction qui va s'appeler guette différentes collections qui va nous permettre de récupérer la collection par défaut il a justement on va la crise il n'existe pas ça on va dire que c'est une classe méthode parce que c'est pas lié à l'instance en fait là je le mets à l'inter de collection pourrait le faire en dehors là c'est vraiment des choix que qui peuvent êtres qui peuvent varier ouais je pourrais le faire avoir soit je le fais faut soit je fais un fichier utile ça c'est le genre de truc qu'on sait pas trop mais j'ai pas envie de créer un fichier inutiles juste pour ça j'ai pas envie de le faire directement dans la vue donc pour l'instant je vais laisser dans la collection faire une classe méthode c'était ma première intuition je vais garder je vais garder ça mais sachez qu'on pourrait tout simplement faire une fonction en dehors de tout ça ça marcherait aussi donc là ce qu'on va faire c'est qu'on va faire un on va refaire un get or cloud gate sur jake song et or criait tu es on va créer donc name égal on va l'appeler défaut tout simplement et slug on va dire défaut aussi comme ça et on va mettre un tir et du bas parce que je suis en train de réfléchir mais j'ai envie qu'elle soit si potentiellement dans à plusieurs j'ai envie que ce soit la première qu'ils soient affichés et du coup on refera là on avait fait un order by montfrin order by his log et du coup dans le second va voilà on va on veut redonner par slug et là comme ça je mets un tir et du bas comme ça elle se retrouvera toujours au début et là je peux garder le nom qui est des faut s'en remettre un seul devant donc comme ça georges ordonne par le slogan mais je garde un nom qui est beau quoi qui est intelligible donc on fait ça gator cloud gate est donc là on va récupérer collection et si on la crée ou pas donc si on la crée ou pas je m'en fous un peu donc c'est pour ça que je mets un tiret du bas je vais pas utiliser cette cette information est là par contre on va retourner collection parce qu'on veut en fait si on veut la récupérer donc en fait ceci il existe déjà il va pas la créer et on va juste la récupérer et on va les retourner et s'il n'existe pas il va la craie et on voit également la retourner donc voila et là je peux mettre une petite indication de type qui indique alors ça maintenant ça va pas marcher c'est les prochaines nouveautés de python 3.11 là je pense qu'il faut le mettre en chaîne de caractères pour l'instant comme ça mais dans les prochaines versions de python pour 1 m on pouvait remettre ça alors peut-être que là je peux mettre ces elle laisse dans ces alors connaître puisque là c'est une instance de ça va être une instance de cette classe oui en fait ne se serait même pas collection voit ici ça va être une instance de collection et donc c'est bon donc donc ça ça va me permettre et la notation de type et pratique puisque pycharm va me permettre de reconnaître que c'est un objet collection donc là ce que je vais faire collection oui bon en fait non c'est alors oui en fait on va le reste que j'en ai besoin en fait je sais même pas si je la récupère si on va en avoir besoin plus tard parce qu'on va afficher forcément on va considérer que par des fonds n'arrivent sur cette collection de base donc on va devoir récupérer les tâches associées à cette collection donc pour l'instant on n'a pas encore fait à la gestion des tâches mais je prévois quand même donc là on va faire collection points guette d'ifo collectionne et là l'intérêt vous voyez que c'est que si je fais un point là on a bien naïve mais on a bien slug etc donc il comprend en fait qu'on va récupérer un objet collection alors que si j'enlève cette annotation de type et que je reviens là et que je fais collection point presse il reconnaît quand même ok bon il est suffisamment intelligent même sur la notation de type mais je vais là mais je vais la garder quand même je vais la garder quand même bon il a compris avec ça il a c'est ça qu'il faut il pas y croire c'est du coup il a compris que gatorade ça retourne du coup ça retourne dans collection ici une instance que comme on utilise cls pas du coup ça va être une instance de collection et que comme on retourne donc cette variable ici bien ici on va bien avoir une instance de collection donc c'est assez génial patch donc collection prenait donc parfait pour l'instant on va pas s'en servir je vais le commenter mais par la suite on va on va devoir la retourner au contexte donc si je reviens ici j'actualise alors oui en fait non je vais vous voyez je vais le des commenté c'est quand même là du qu'on va créer la collection par défaut d'actualisation normalement je devrais avoir voilà par défaut vous voyez j'ai cette collection par défaut qui écrit et si j'actualise elle n'est pas créer une nouvelle fois puisque on utilisait bien le gâteau recrue est ici donc elle ne crée que si elle n'existe pas et si je là si je reviens ici et que je supprime cette collection yes j'actualise là elle va toujours être là puisqu'il va la recréer s'il n'existe pas et là elle est bien là et je vais en profiter puisque on voit pas très bien ici dans up modèle on va rajouter le string et on va retourner seul point m voilà comme ça ça permet juste avoir le nom ici c'est un peu plus lisible donc donc je reviens là donc là j'ai bien ma collection par défaut et on va passer à la suite on va passer à l'ajout d'une Ajout d'une tâche tâche finalement donc on va revenir ici là vous voyez j'ai encore aucune civilisation c'est vraiment moche mais je me concentre à 100% sur les fonctionnalités donc donc donc on revient là on a notre formulaire pour ajouter on va le mettre à la suite on va mettre on va mettre un autre formulaire et on va commencer par le formulaire donc on va mettre un formulaire qui va être là encore on va utiliser h tmx donc on va mettre méthode égal à poste là encore on va mettre un input de type texte avec un homme qui va être qui va être tasks name et on va mettre un bouton qui va avoir un texte ajoutée qui va être de type smit on n'oublie pas le ccf token là mon cerveau part dans tous les sens mais je pense à tout ce qu'il faut rajouter texte me type ouais ok ça fait pas mal de tours on va créer donc l'url ici à de tasque had task et adt d'ascq et view on va créer du coup à de tasque request up et pour l'instant on retourne archipel response vide et dans l'url clip tout bon alors là on va devoir récupérer on va devoir récupérer le la collection qu'on a la collection qu'on a à quai alors là je réfléchis ok donc là va y avoir des petites difficultés mais on va s'en sortir avec htm x puisqu'en fait il faut récupérer il va falloir savoir en fait quelle quelle collection est actuellement affichée pour pouvoir l'ajouter à pour pouvoir la ajouté parce que là donc là il ya différentes façons de faire ouais là il ya plein de façons de faire en plus avec ashley mix encore plus de façon de faire je dirais donc donc va falloir vraiment réfléchir on a plein de plein de possibilités on peut le mettre dans l'url en fait on peut le passer aussi on peut le mettre on pourrait le mettre dans l'url en fait ici ce que je voulais dire on pourrait mettre un string et dire collection seul avec un truc comme ça mais nous avec htm x on va faire différemment parce que là pour l'instant en fait quand on a une contourner avec des faux là vous voyez dans l'url on l'a pas le cas alors je réfléchis un peu à voir au vote mais d'ailleurs pas mal de petits trucs à prévoir donc on va déjà essayer on va déjà essayer d'ajouter une tâche on va déjà faire l'ajout de la tâche en fait on va s'enlever cette épine du pied pour l'instant en ajoutant par défaut la tâche dans la collection par défaut du coup et on va voir après comment on va créer une autre une autre collection et on va voir comment essayer de passer de l'un à l'autre puisque on va aussi du coup de façon conséquente de voir enfin pas conséquente mais deux on va devoir du coup à afficher les tâches en fait relié à chacune catégorie donc en fait tout ça va se battre reliés les uns aux autres donc il ya plusieurs fonctionnalités là à faire en même temps qu'on va commencer par l'ajout de la tâche donc là on a notre formulaire time avec le bouton donc là ça on va le mettre à la ligne on va faire 1 h x post qui va être donc l'url adresse qu bac comme ça et rang alors où est ce qu'elles vont être les tâches et le monstre après donc l'on va faire un div avec tasse tout simplement et à de tasque est ici h x donc target on va mettre de leur casque et h x swaps on va mettre pareil before and et voilà normalement c'est tout bon ici donc on va ajouter une tâche donc comme je vous dis par défaut on va récupérer la collection par défaut donc on va faire collection pour un get différentes collections et donc là on aime on peut utiliser ça ou si on va utiliser ça si j'allais dire on pourrait parce que là potentiellement il va l'a créée donc mais bon c'est pas grave normalement elle est toujours censé exister du coup vu que dès qu'on arrive sur la page ci n'existe pas à les créer donc là il n'y a pas vraiment de risque qu'il y là qu'il a recréé enfin que ça fasse doublons donc là on va jusque là récupéré ouais c'est bon et comme ça on va pas dupliquer parce que j'ai à dire on aurait pu faire objects pour inquièter puis la faire un seul oeil legal defence comme ça après c'est ouais je sais pas parce que là du coup on à défaut ici alors là il faudrait peut-être pour avoir un truc plus il pourrait mettre un default name égale à 10 faut comme ça on pourrait faire ça et là ici du coup faire collection pour un default name est pareil ici collection points diff rocktime on pourrait faire comme ça pour pour ne pas repasser forcément par le modèle d'ici parce que bon on va voir je suis tu sais pas ce qui est le mieux la fête c'est juste que ça mais ça m'embête un petit peu que la potentiellement ils menaient une opération de create même si là encore elle n'est pas censée s'opérer je préfère me dire que là c'est plus clair de dire on récupère la collection par défaut - après toute façon en fait ouais c'est un peu c'est un peu débile et ce que je fais je vais revenir à revenir à ça puisque de toute façon va l'enlever après puisqu'on va devoir récupérer dynamiquement la collection qui est en train d'être affichées donc c'est même pas une question à se poser vous voyez une des fois quand je vous dis que on commence à mettre un petit peu la charrue avant les boeufs comme je le disais tout à l'heure avec le fronton des fouilles faut pas trop s'avancer non plus au risque de faire des choses inutiles donc là on a notre collection par défaut et on va faire une task point object points inscrits dans ce cas-ci up in polt way up et en description du coup on va récupérer ce qu'ils étaient dans le in putsch donc on va faire le west point pose point guette là c'était dit ce que mangent les pinatas naïm oblige la plata snipe ce sera peut-être new york times on va faire date parce que description et hop et je reviens dans views up et là aussi ça on va l'échappée et je vais le mettre dans une variable pour l'instant on ne sait jamais ça pourra servir par la suite et escape de tout ça description cloud gate et hop et ici en retourne la description tout simplement et ici on le lit à la collection collection et égaler collection vous voilà donc c'est pas mal hop on lèche a ponctué est ok et ok donc ça commence à être pas mal ça devrait fonctionner si j'actualise on a notre autre formulaire ici donc je vais essayer de l'ajouter g on va dire apprendre python ajouté et voilà on a bien la tâche qui est ajoutée à prendre javascript java script c'est bien a ajouté wei juste après ici parce que là effectivement n'a aucun html donc c'est juste du texte boutabout ici je reviens là dans task voilà on a bien task object et là je vais en profiter dans le modèle ici pour faire également le string avec 800 pour la description voilà comme ça c'est un peu plus clair waouh l ampas inite string donc je reviens à voilà donc apprendre javascript parfait collection et tout ça est bien relié à la collection par défaut super donc là quand je disais pour l'instant donc là et se rafraîchir la page tout disparaît donc ce que je Afficher les tâches d'une collection vais faire ici on va déjà gérer l'affichage donc par des fonds va être avec la collection par défaut est ok et alors je réfléchis donc là on va pouvoir récupérer les tâches donc on va faire contexte égale contexte de tasque égal à collection pointe à sept points aulas voilà donc là on récupère toutes les tâches et on va faire pareil order by et descriptions donc l'on allait tâcher du coup on va pouvoir les afficher dans leur index donc on va les mettre ici on va faire un pôle tasking test hop end fort et on va dire on va faire un bon vieux maître remettre un pays on va dire tu as tout point tu as coin description ok donc normalement si j'actualise voilà j'ai bien ça sauf que là donc pour l'instant le problème c'est qu'on a qu'une seule catégorie si je fais à prendre java j'ajoute ça fonctionne j'actualise on à bien les tâches super sauf que là on n'a qu'une seule catégorie donc si j'ajoute jeu pas une liste de courses ajouté la voilà on à la cour ça tient d'ailleurs du coup il m'a joutes voyez il fait parce que je voulais sur le slide order by est ce qu'on met du coup moins sereine non normalement ça devrait être ouais ok bon à voir ce que normalement il doit je pense que par défaut il doit ordonner par ordre alphabétique donc ça me surprend on va l'essayer - slag si je fais si je fais à abah abah way qui garde lui ok c'est bon d'accord donc il faut mettre moins slug pour que ce soit par ordre de a à z en gros hockey non ça me surprend allongé sur supprimer cette collection qui n'a pas de sens voilà up donc là de conect de collection défaut et course et maintenant ce qu'il faudrait c'est que quand on clique sur défaut ou sur course on puisse afficher les différentes tâches des différentes des différentes collections donc ce que je vais faire déjà s'est rajouté cette fois ci des tâches mais sur l'autre collection qu'on va dire sur les courses hop on va ajouter des pommes les poires comme d'hab les exemples et de la salade up course et quand même du chocolat parce que c'est un peu trop elle dit tout ça voilà donc hop donc là vous voyez j'actualise on est bien toujours sur des faux et là il va falloir qu'on puisse cliquer sur l'un ou l'autre pour afficher différentes choses donc là encore on va utiliser htm x pour ne pas avoir de rechargement de page et ça ça va être fait donc sur le collectionnisme donc là ce qu'on va faire on va mettre on pourrait mettre un lien donc là encore on pourrait le faire je réfléchis on pourrait le faire alors là encore il ya plein plein de façons de faire donc il faut déjà en fête ok il faut un moyen de récupérer il va falloir un moyen de récupérer les tâches alors je réfléchis en fait qu'est-ce qu'on a besoin on a besoin on a besoin ici dans le rythme et d'afficher l'état d'une collection en gros c'est ça qui on doit faire donc affiché les tâches d'une collection forcément on va devoir avoir un point d'url quelque part qui va être guette task et est là justement on va pouvoir passer la collection alors là soit on la met encore dans l'url je réfléchis avec avec hdmi qu'il ya plein de façons de faire donc on va mettre ici ouais ok on va la mettre dans l'url collection et on va prendre le sla gounon va prendre le p de k-way collection pk et du coup on va prendre 1 int ici et guette tu as tu es tu ici gate est donc on va faire tout ça y est tu as qu as tu as que je reviens ici je l'aimais à la fin un ghetto strict ouest donc guetta ce qu'on va voir ici un collectionne les cas et collection de pk ok parfait est ici donc on va récupérer une collection collection points object point guette pk égale collection pk et on va faire même mieux on va faire un get object 404 qui là encore je ne sais pas où il se trouve donc on va faire hommes de django shortcuts aussi ça ça me permet en fait de d'essayer de récupérer quelque chose pk égale collection pk collection légal donc si ça existe en fait on récupère l'objet et si ça n'existe pas on retourne une erreur 404 tout simplement ça fait tous en une ligne et ensuite on va retourner ici bas collectionne pointe à sept points hall et on va order by que mon avis dit pareil sur le sur la description voilà donc basé tout y est tu as qu'on récupère ça voilà parfait hélas si je viens donc dans mon index ici donc là c'est quand on va cliquer en fait donc quand on va cliquer sur un élément ici donc là je pourrais mettre un lien où on peut mettre n'importe quoi c'est ça qui est intéressant avait en fait avec avec avec htm x je vais essayer de le faire sans déjà alors je réfléchisse parce que j'ai fait une url séparer guette task je suis en train de me dire ouais ok parce que je réfléchisse aussi à l'eurl mois l'url j'ai envie qu'on reste sur la page rom donc en fait je pense que j'aimerais mieux passer par un paramètre ici par exemple collectionne égal et puis là on aurait dit faute ou courses ou les trucs comme ça donc moi j'aimerais bien passer par ça donc ouais tu donc si on passe par ça on va on va rester sur la page d'index 6 ha ok oui donc on va rester sur la page d'index et est ici puisque pour l'instant on récupère la collection par défaut donc en fait ici ok voilà je commence à y voir clair je réfléchis en même temps sur la vidéo mais je pense que c'est ça aussi qui est intéressant c'est de voir la réflexion qu'on peut avoir vous voyez que c'est pas forcément ultra linéaire là je parle d'un jeu par d'un truc très vague afficher les tâches d'une collection et après comme je dis il ya tellement de façons de faire en plus qui plus est quand on rajoute h tmx où on peut vraiment manipuler les trucs dans tous les sens avec htm x mais là là on reste même sur du django pur dans le sens où je veux garder en fait cette url de base j'ai pas envie j'ai pas envie qu'on parte sur un truc genre collection avec le nom de la collection je veux qu'on reste un peu dans cette optique de on reste sur la page de rom et puis on a juste un paramètre ici qu'on peut changer collection et égaler puis échangé avec le slot de la collection donc ce que je vais faire en fait ici c'est récupérer collectionne slug cela groupe eca ouais je réfléchisse parce que on avait empêché la joute de collection qui avait le même nom ah oui puis le slogan oui d'ailleurs je réfléchis mais le cela qu'on l'a pas fait je vais dans collection ouais le sloughi les vides alors ça je vais le faire déjà vous Ajouter un slug par défaut voyez je pars un peu dans tous les sens mais le ciel moi je fais toujours donc je leur ait said hop et coiffe et là je fais seul point slug égal à celui qu'ils faillent 200 points naïm donc cela qu'il faille c'est une fonction de django voyez là on commence à rentrer dans des trucs un peu long elle est d'ailleurs à deux endroits différents je vais pas chercher de django utilise parce que celle là c'est celle qui est pour les templates je trouve ça plus ghoul logique d'aller la chercher dans utile parce que cela guy fays disponible aussi dans les langages de template donc on pourrait l'utiliser ici à dans un fichier html aussi donc moi je fais toujours ça je fais self point slug cela guy faille donc s'il ya déjà un slogan faty garde le slot par défaut et sinon eh bien il se languit file hoenheim et après on fait un super de save et on lui repasse les zélés les quarks potentiel voilà donc là en fait ce que ça fait c'est que si je sauvegarde si je fais juste seven cantine ue alors oui parce que je n'ai pas mis gelé pas mis en blank donc on est obligé d'en spécifier 1 [Musique] d'ailleurs on obligé d'en spécifier un donc là c'est vraiment dans le formulaire je continue par contre ça c'est vraiment parce que le blanc qu'en fait c'est vraiment juste au niveau des formulaires si je me trompe pas si je fais un manège qu'il ya shell et qu'on refait en fait ce qu'on fait quand on crée une quatre collections donc quand on fait ça ici donc il faut déjà l'importer flown fasse tout un modèle une porte collectionne d'ailleurs il ya une extension je vous le dis qui s'appelle qui s'appelle le django extentions je crois que j'installe généralement sur plein de projets qui permet d'avoir accès à une commande qui s'appelle shell plus ce qui automatiquement importe tout tous les modèles que vous avez dans votre application comme ça vous n'avez pas à chaque fois à faire froid machin importe truc vous avez tous les modèles qui sont disponibles directement donc là on refait notre donc ça c'est fait collection donc le voilà un gâteau recrues y ait donc là si je fais comme ça là ça marche et du coup la cij actualise on devrait avoir le squale à octobre ok donc c'est bon je vais laisser le je vais laisser le chien comme ça je vais considérer que quand on ajoute une tâche à la main on est obligé de mettre le club nous mêmes et nous quand on fait en programmation comme ça donc comme ici automatiquement le slug sera créé à partir de ce qu'on a rentré ici dans la boîte de textes donc donc c'est parfait et je vais supprimer cette dernière collection up donc je reviens ici à bâle à vous voyez on est de nouveau retournés dans l'autre sens donc je suis pas fou je sais pas ce qui s'est passé tout à l'heure mais il faut bien laisser le slot comme ça voilà on a bien le défaut au début ok ah mais oui je sais pourquoi parce que j'avais pas de cela avec tout ce blanc parce que sur course ici en fait j'avais j'avais rien donc c'est pour ça en fait qu' il était il est en premier maintenant que j'ai un slogan fait forcément c'est dans le bon sens le mystère est résolu donc qu'est-ce qu'on revient ici on va récupérer donc le seul club je crois que je m'en étais arrêté là avant de partir dans mon âge ou automatique de ce legs ici donc on va Afficher une collection via l'URL revenir dans le view et on va faire comme je disais là l'idée c'est qu'on va pouvoir récupérer ici à partir des arguments donc ça ça va être dans le west point get on va récupérer alors le collection ouais on va faire le slogan est à oui mais c'est ça en fait c'était ça ma première question c'est maintenant on va normalement est ce qu'on peut avoir deux trucs avec le sluc différents alors je réfléchisse parce qu'en fait la seule façon vraiment d'être sûr d'avoir d'avoir qu'un seul élément c'est si on utilise le prat mary qui donc puisque le prat mary qui est unique donc on peut être sûr que même si on a les mêmes seuils et cetera le prat mary qui sera unique donc si on a une collection on en aura pas deux qui ont le même père le marquis avec le slogan anormalement vue concret le slogan à partir de la collection name et qu'on empêche le fait d'avoir deux collections qui ont le même nom du coup par conséquent devrait on devrait empêcher la possibilité d'avoir de ce legs similaires ce qui me à mon avis c'est pas 100% bull est flou puisque j'allais dire en fait un seul avec par exemple si on met un accent il va le convertir en eux ou par exemple sûrement un espace il va l'enlever donc j'ai l'impression qu'on pourrait avoir deux noms différents par exemple si je mets course course électro comme ça balla le slug ce serait course électro et si je mets deux espaces semer course avec deux espaces électro et ce qui va pas me faire également mais m les deux espaces en un seul tir est à mon avis du coup on aurait deux noms différents donc on pourrait créer deux listes différentes normal même slug donc ça pourrait poser problème ça on recommence à rentrer un peu dans le détail là moi je vais vu que là j'aime bien en fait j'ai l'idée d'avoir quand même collection hegaldi faute et non pas collection égal 1 2 3 etc si vous voulez partager l'url c'est quand même un peu plus un peu plus beau essayer de l'intérêt des slogans et puis là du coup on pourrait rajouter une petite vérification pour s'assurer que c'est bien avec le slot qu'on fait cette vérification est bon on va rester comme ça donc d'ailleurs en fait non je suis en train de réfléchir on pourrait on pourrait même faire autre chose on aurait pu en fait enlever le save ici est directement faire un seul qui faillit si donc faire un dans le gâteau recrue est ici faire cela dit faille de collectionneurs comme ça importé sous le gui failles ici et là le problème est réglé puisque la voilà on aurait vraiment les deux et de trucs ici donc si on a déjà une catégorie avec ce slogan est ce m et bien elle ne serait pas recréer donc vrai je vais le laisser d'ailleurs comme ça oui je le laissais ok donc là on revient ici donc on va récupérer collectionne et savent être collection slug je vais pas mettre collection slug là on va mettre juste juste collectionne et dans le nom de la variable par contre je m collection de ce legs et donc si on a un si on a un seul oeil eh bien on va donc là on va faire if collectionne slag la collection de base et je vais mettre un el sissi hop je vais dupliquer ça voilà je suis un peu vite mais donc si on a un seul oeil ici en fait on va faire object point guette donc là on va reprendre notre notre guette objets toro 404 reprendre la collection et on va faire slug égal à collectionner ce look donc on récupère donc si on a un slot dans l'url on récupère la collection avec le slogan si c'est pas correct on renvoie 1 404 et sinon si on n'a rien si on n'a pas de collection dans l'url en paramètre est bien on récupère la collection par défaut ça me semble pas mal ouais ça me semble pas mal et même en fait j'ai envie de j'ai envie de mettre ça ici parce que j'aimerais ça en fait je veux toujours y accéder parce que je veux quand même toujours créer cette collection par défaut alors là on commence à faire un peu trop de choses au même endroit faudrait peut-être séparés quand même cela j'ai fais gaffe dit forte en fait je fais un gag mais je fais un cri et aussi donc ça fait quand même un peu doublon enfin ya plusieurs choses qui se passent dans cette fonction et si ça commence à devenir pas très clair là où est ce que je vais faire c'est que je vais garder en fait je vais faire ça comme ça plus tôt je vais garder la collection avec collectionne points get default collection pour créer la collection par défaut si jamais elle existe pas et apprécié par contre j'ai un collection slack baladant dans ma variable je vais récupérer plutôt le collection de ce legs plutôt que la collection par défaut en fait ça c'est que si on met rien dans l'adresse ici on va récupérer la collection par défaut si par contre je mets collection égal et je mets course dans ce cas ci est bon on va afficher les courses donc j'affiche et d'ailleurs ça marche un coup donc j'ai bien bien prévu mon script là vous voyez en mai collection égale course j'ai vu que là on récupère l&h à partir de la collection bas c'est normal tout suit on récupère la collection à partir du du slogan l'url et si par contre donc si je mets autre chose ici qui n'est pas valide on va avoir une 404 donc ça c'est normal et si je mets l'url de base on est avec la liste par défaut et je peux aussi spécifier la liste par défaut explicitement en mettant en tirer dit il faut comme ceci je crois oui voila voila mais parler faut savoir venir ici ok donc ça commence à prendre forme on a la possibilité d'afficher donc avec cette page ici différentes informations et ce qui va rester à faire c'est de le faire maintenant avec h tmx parce que là déjà je peux pas cliquer alors si je reviendrais index là je peux pas cliquer sur les liens et moi ce que je veux en fait c'est ouais ce que je veux alors là je réfléchisse à peut-être être on va faire un truc un peu différent je vais quand même garder mon gars tu task parce que là en fait ce qui se passe c'est que la façon dont on l'a fait c'est vraiment pour tout le chargement de la page vraiment quand je me rends à cette adresse là qui en fait l'adresse du coût de la page d'accueil qu'il y ait un coupable ou non c'est l'adresse de la page d'accueil et ça me permet juste d'affiché à l'instant t il à quand j'arrive sur la page les tâches de la liste que je souhaite de la collection que je souhaite afficher par contre après ce que je voulais refaire c'est sans bouger de cette page sans rafraîchir cette page en fonction de la liste sur laquelle je clique changer ce qui est ici donc là en fait on va devoir récupérer uniquement ses listes vingt sept cette liste de tâches ici et pas à la page au complet ce qui ce qu'on fait ici là avec les index on récupère on retourne en fait le index.en.html donc on retourne tout la page donc je vais quand même ici avoir besoin de garder guette task puisque ça va me permettre de récupérer juste 7e html ici pour le modifie donc où ça c'est la théorie on va voir tout de suite comme on peut mettre ça en place donc ce que je vais devoir faire c'est appeler en fait cette Changer les tâches affichées vue ici donc on va avoir une url qu'on avait déjà fait cette url gars de tasque et on va devoir la plaie à partir de donc où est ce qu'on est ici à partir de voilà de ce nom puisque pour l'instant en fait on ne peut pas cliqué dessus mais nous ce qu'on va vouloir faire c'est pouvoir cliquer dessus pour afficher les différentes tâches alors là c'est assez intéressant parce que c'est ce que nous permet justement de faire acheter mx on pourrait mettre un à ici donc un tag à pour faire un lien comme ceci ce qu'on peut faire également je pense je vais faire un bouton mais il faut savoir en fait qu'avec h tmx on peut faire on pourra faire un dix vous n'importe quoi et m xg est dessus pour faire une requête vers une url je vais vous montrer je vais vous montrer ce que ça donne par exemple gueltas qu'ici on va faire on va le faire sur attaque puisqu'il ya il n'y a rien enfin aucun paramètre je le faire sur glace mais je veux juste passer un paramètre 7 plus simple on va faire donc huguette tu as comme ça et on va passer alors je crois que c'était le amalric y que j'avais mis à collectionner pickering donc gars de tasque et non windex ici h x gate est là il faut juste mettre h x tu rigoles je crois on va mettre clics si je me trompe pas alors je vais retourner voir dans la documentation trigger h extrait c'est sa jeunesse vous voyez c'est exactement ce qu'il dit ici même sur un divan fait alors là ça va être mouse enten on en a pas mal on va aller voir dans la caisse qui a challenge filter clic clic ah oui d'accord on peut même filtré ça c'est assez incroyable on peut même filtrer avec une voyez avec une avec une touche donc dire que quand on clique avec la touche control c'est assez cool qu'on va les voir dans les références ici que ça c'est vraiment la documentation que ça vous explique comment ça marche et après si vous voulez voir tout ce qu'il est possible de faire avec quelque chose précisément c'est dans les références sont cachés que stricker ici et là vous voyez ici on a le nom de l'événement donc dans ce cas ci c'est clic on retrouve le contrôle qui ici vous voyez à plein de choses qu'on peut faire on a des mots dits fiers et terrain on peut me faire maquiller même ça c'est très pratique sur des inputs dire par exemple que on peut faire un club avec un délai de une seconde donc pour que ça ne déclenche pas en fait trop souvent la requête c'est vraiment incroyable donc vraiment qu'à moi je veux juste faire un clic et on va revenir donc ici c'est sa hache ex trigger clic c'est bien ça oui c'est ça et vous allez voir là si je fais juste donc dans le galetas qu'on va faire un print on va dire tests et ouais peuple là je vais juste on va faire un lutin de l'ehtp response juste comme ça et je vais vous montrer dans le run ici on devrait voir si je les sens tout en bas le print qui se fait quand je clique dessus donc j'actualise là ça a changé puisque effectivement j'ai mis un diva la place du h2 qu'on avait et si je clique sur course vous voyez ça disparaît alors pourquoi ça disparaît on a bien le test qui se fait et ça disparaît parce que ici j'ai fait http response d'une chaîne de caractères vite si je mettais patrick c'est là c'est d'ailleurs marrant ce qu'on peut faire vous voyez si je clique hop ça affiche patrick c'est vraiment tellement tellement puissant hdmix c'est vraiment incroyable c'est tellement simple d'utilisation je sais pas si vous vous rendez compte à quel point avec juste ça tout ce qu'on fait quand pour ce qu'on fait du ajax dans le temps des requêtes à jackson ce qui est en fait fait pas racheté mixer ici la puissance qu'on a de pouvoir juste écrire ça et d'avoir cette requête qui ai fait ça permet de faire des choses incroyables en si peu de lignes de code vraiment c'est une petite révolution 7,7 cette bibliothèque est juste pour le fun je vais faire cliquer dessus ça me fait rire donc donc voilà h x guette vous voyez que ça peut fonctionner comme ça aussi moi je vais mettre un bouton parce que ça fait un peu plus de sens quand même au niveau html on pourrait mettre un 10 mais c'est plus clair de mettre un bouton et dans ce cas ci on n'a pas besoin de mettre le ht h x rigole puisque par défaut le bouton ce qui va déclencher cette requête guette ici ça va être le fonctionnement par défaut du de la balise ici donc le bouton dans ce cas ci ça va être un clic donc la cij actualise et que j'aurais écrit que vous voyez on a bien cette fois-ci patrick qui se met sur les sur les différents boutons donc moi je vais revenir là la petite difficulté ça va être de pouvoir passer enfin non je le dire la difficulté mais non puisqu'on à la collection ici donc on peut faire ça tout simplement on va mettre ici alors on va pas m on ne va pas le mettre en dur comme ça on va mettre l'europe où est ce qu'il est ici on va mettre guette tu as comme ceux ci et là on va passer collectionne point piqué y est normalement ici après on va pouvoir enlever ça donc là on va retourner donc on va pas retourner directement à la collection parce que la cij actualise sa va pas fonctionner enfin si vous voilà issa nous affichent tous à nous c'est parce qu'on veut nous ce qu'on veut c'est un http respawns et même ce qu'on va vouloir ici en fait c'est là qu'on va commencer à faire des templates puisque ce serait pas très élégant pourrait faire un chef terroriste prendre sans fait alors récupérer les task comme ça et ensuite faire par exemple un slash haine ou dans plutôt un br dans ce cas-ci puisqu'on est en html on pourrait faire un br point engine et john les task et alors là l'état ce que moi je pense que dans le modèle j'avais mis le string donc ça va prendre par défaut la description sinon on aurait pu faire une compréhension liste ici pour aller récupérer la description mais par des fois je pense qu'il va afficher il va afficher les la description puisqu'il va les convertir en chaîne de caractères donc je pense que ça devrait fonctionner comme ça et vous allez voir donc si j'actualise que je fait défaut alors là il me remet ça c'est marrant il me remet à lui parce qu'on n'a pas mis de je pense que c'est parce qu'on n'a pas mis de target alors là on a juste lâché xg est et on va le mettre du coup dans les task donc on va le mettre ici dans basque et 6 target galles basque donc la cij actualise up alors ça me remet encore ici j'actualise encore un peu c'est marrant ça ah oui alors ça me lemay là parce que je pense que j'ai une erreur voilà c'est parce qu'on avait 2000 e ht mix respond ses erreurs et je pense que du coup on doit avoir une erreur qu'est-ce que je regarde ici expected sprinsteen tu as 15 hockey oui c'est ça donc là en fait ça ne fonctionne pas donc il faut bien faire ce que j'avais pensé c'est à dire faire ta ce point description pour le casque une task donc la cij actualise hop voilà donc là ça marche effectivement donc le l'alertent en fait était était normal c'était à cause de notre script de tout à l'heure je l'avais oublié mais là vous voyez donc on en a déjà presque ce qu'on veut en fait on clique sur les différentes listes et sa affiche bien la liste de tâches là le problème c'est que on veut pas en faire trop de trop de choses ici c'est pas non plus très sécuritaire là Un mot sur la sécurité encore de retourner tout ça avec de la manipulation de chaînes de caractères dans un chai tp response il vaut mieux passer par un brendle reynders qui permet de d'échappée automatiquement aussi enfin qu'il ya des mécanismes un peu plus sécuritaires en fait si vous allez voir donc on va voir django documented jeunes brender django shortcut voilà et sur wonder voilà vous voyez ça va en fait ce que ça va faire que ça va prendre la requête on peut même l'affiché en france est d'ailleurs hop français donc combine un cabarry données avec un dictionnaire contexte donné renvoie un objet http respond avec le texte résultant donc on a effectivement ici notre requête notre template on passe un contexte avec des informations et ça va ça va procès c'est tout ça et il ya plusieurs façon dont on peut faire ça avec d'autres fonctions qu'on verra peut-être plus tard qui permettent de de faire une partie de ce que fait mme reynders donc il nous en dit pas vraiment plus ici au niveau de la sécurité mais je vais vous montrer un petit exemple là encore ce sera plus parlant la même chose en fait c'est à dire que si à la place de ça dont je vais le dupliquer je vais garder l'autre en back up si ici je retourne donc on fait affaire on va refaire l'exemple avec le script alerte test l'a vu que encore une fois on va utiliser du contenu qui est envoyé par l'utilisateur donc on peut le pour el aouel là et skype aussi mais imaginez que bon voilà on est quelque chose dont la base de données qui ne soit pas à sécuritaire comme ça ici et qu'on le retourne dans http respawns alors si je reviens ici j'actualise je vais mettre autre chose là vous voyez pareil on a sept ce peuple qui est exécutée alors que si on passe par un fichier de template et par wendel alors je vais en profiter pour créer en fait ils directement d'ailleurs ce fichier qu'on va retourner on va créer un fichier qu'on va appeler tout simplement tasks comme ça voilà là on va enlever le html par défaut et on va mettre à l'intérieur de sa note rhscript alert comme ça ici up et est ici donc je vais à la place du http respond faire un return de renders de roquettes et on va mettre le donc le task ce nas ou html et c'est tout et donc là vous voyez qui si on retourne tout ça et si j'actualise et que je les actions de catégorie a et là je en fait je me suis planté vous avez envie ça va faire ça va faire alerte c'est normal parce que là en fait on l'a on l'a mis comme ça donc c'est pas ça que je le dis en fait parce que forcément si on le met comme ça dans le html yves être il va être exécuté donc fait ce que je voulais dire c'est que si ici on a une variable par exemple donc qui contient ce texte ici est que dans le contexte donc là ici on va passer on va passer cette variable on va dire on va dire à user input par exemple et on va lui passer cette variable a en fait eu besoin de faire une variable on va passer directement la chaîne de caractères donc la voit ici on fait ça et que on affiche user input ici avec les crochets et que j'actualise là vous voyez on n'a pas de on n'a pas de fin on n'a pas le pop up et là en fait ce qui est fait c'est que à moins qu'on mette le fameux safe la sueur mais elle sait qu'on va lui dire ça c'est sécuritaire donc tu n'as pas besoin enfin tu doit l'exécuter donc là on n'a pas le pop up puisque tout ce qu'on passe ici ne sera donc pas exécuter donc là si je reviens ici que j'actualise et que je clique ici vous voyez qu'on a bien le script alerte test par contre donc si je reviens ici que je mets safe que j'actualise et que je clique là vous voyez c'est ce fameux safe qui dit que c'est sécuritaire et donc qu' on n'a pas cet échappement qui est fait mais si je ne mets pas le safe même si je passe les choses directement comme ça et que j'actualise donc là vous voyez ça ne sonnait pas exécuter ces justes affiché en texte comme ça donc voilà pour la petite démonstration vraiment si vous ne mettez pas le safe si vous mettez juste les valeurs par défaut comme ça ici à vous êtes quand même un minimum protégés par ce mécanisme donc tout ce qu'on va vouloir faire ici déjà juste pour ça et Retourner un composant HTML puis parce que c'est pas très très cool en fait très clean très propre de mètres du html directement ici eh bien on va créer un template séparer qu'on va pouvoir rendre etc ça va même être plus plus clair plus plus facile à séparer les choses donc là ce que je vais faire c'est que je vais retourner donc ce fameux avec renders on va retourner au lit couettes en fait j'aurais pu laisser ce que j'avais task dantas qui se lâche casque et on va passer dans le contexte la liste des tâches donc là je vais mettre un dictionnaire et on va mettre la liste des tâches ici et on va lui passer task tout simplement et là qu'est ce qu'on va faire alors ici vous voyez on avait bal en fait on va faire pareil ici plutôt que de mettre ça on va on va insérer on va inclure en fait ce qu'il faut donc je vais je vais enlever ça pour l'instant ici je vais leur mettre il s'y est essayé tout normalement là on passe les task donc du coup on va pouvoir boucler sur ces tasses et afficher les descriptions et ça en fait on va retourner donc avec rendall en fait trois heures va nous retourner un objet http respond donc si je vais voir avec commande biais là encore pour me rendre dans le dans cette cette fonction de django on voit qu'on récupère bien http respond 6,6 et ses sacs à temps qu'attend h tmx donc là on peut très bien renvoyer le render ici et si je reviens donc ouais dans le tas ce qu'on a le lean d'aix alors là on l'a enlevé de la page d'index donc si j'actualise on n'a plus les tâches par des fous ici mais si je clique sur voila c'est normalement c'est bon si je clique sur la catégorie ça va bien l'affiché est là ce qu'on peut faire c'est pour raffy chez du coup ces éléments ici puisque là on passait directement au contexte l'état ce qu'est donc là ça ne fonctionne plus donc ce qu'on peut faire c'est faire ce qu'on fait ici avec le rwanda mais justement c'est ce que je vous disais tout à l'heure dans la dans la documentation c'est qu'on va pouvoir utiliser une partie de renders parce que si on utilise brendle en fait là on va voir un objet http respawns alors ou alors en fait non ce que je vais dire non ok alors là encore les différentes façons de en fait on peut utiliser windows to template si je me trompe pas je crois que c'est celle c'est ça le nom je vais aller voir je vais les voir dans rainbow justement reinbolt fring non c'est ça c'est windows touch screen voilà windows touch screen vous voyez ça va vous permettre de récupérer en fait si on voir template points brandon wood line a beaucoup ça doit être lui [Musique] dans tous les x dans tous les sens donc moi je sais pas si on va réussir alors revenir à l'origine de celui là mais en gros le dow jones a permet de retourner du coup directement une chaîne de caractères avec si je ne me trompe pas aussi ce mécanisme d'échappement qu'on a dans la fonction grinder est donc ce qu'on pourrait faire en fait ici c'est directement récupérés comme on le fait avec leur idole en fait mais sans récupérer l'objet http respond sont récupérées ajuste la chaîne de caractères si vous voulez sans récupérer l'objet acheté police pense je vais aller vous montrer en fait dans la documentation d'encre haendel tout string ouest là dedans brender j'aurais dieu je pense le taper voilà vous voyez c'est pareil ça s'apprend un template ça prend un contexte ça prend la requête éventuellement aussi et ça va voyez c'est ça appelle sa méthode brender immédiatement et ce qui est intéressant vous voyez c'est ce que ça dit ici voir aussi le raccourci reynders qui appelle windows string donc c'est exactement ça c'est que cette fonction-là d'or va appeler la nd string mais ça va également un série ce résultat comme je vous disais dans un objet http luis pense donc comme comme ici si je reviens de la voilà là on peut pas faire un rendall parce qu'on veut pas on veut permettre à un objet http response donc là on pourrait faire un wendel tout string on pourrait le faire comme ça vous allez voir en fait les différentes façons de faire il ya deux façons de faire donc on peut faire comme ça à dire que on veut rendre donc tasks lâche task que en contexte on va lui passer donc ce que j'avais fait ce que j'avais avant que j'ai enlevé donc je vais juste le ramener à ce qu'il voit là ça ici ça ici donc on veut là on veut les task donc on va faire un masque et gallas a ensuite on fait rire de tout string on va là réimporter l'indl ce string on lui passe le template donc task task html on va lui passer dans le contexte les tâches casque et on lui passe task et je crois pas qu'on ait besoin de lui passer la requête dans ce cas-ci donc là en fait voilà on lui passe on passe à ce fichier et html l'objet task qu'on lui passe dans le contexte ici donc c'est vraiment comme si on faisait la méthode wendel sauf qu'on n'a pas la requête obligatoire au début et et on retourne ça dans notre contexte ici dans ta ce qu est ce qu on peut faire ici du coup puisque ça s'est associé au contexte s'est associé au contexte qu'on va retourner dans la vue est bien du coup dans l'index ici on pourrait faire un up task comme ceci sans le cap shox voilà juste comme ça donc on insère en fait cette variable task qui va être égal à quoi qui va être égal à ce thème planes qui est rendu avec ce contexte donc on va prendre ce contexte on va lui passer ta ce qu'on va faire cette opération donc on va afficher toutes les tasses toutes les tâches ça va nous retourner une chaîne de caractères tout simplement donc là en gros on va avoir p comme ça après avec tâche un seul hp etc et avec toutes les tâches donc ça veut nous retourner vraiment cette chaîne de caractères et ici on peut l'insérer à l'intérieur de ceux d'yves donc la cij actually si je reviens là j'actualise là j'ai bien mes tâches qui sont affichés et si je vais sur course on a bien les courses défaut course ça fonctionne si je mets mon ici collection égal à course hop on commence bien avec les courses si je mets rien on dirait que défaut donc ça fonctionne ce qu'on peut faire aussi c'est ce que je privilégie pris vie privée lee gérait préville jugerait je trouve que le mot ce qu'on pourrait faire aussi je sais pas si c'est mieux je les ai donc là on récupère en fait la collection par défaut alors ce qu'on pourrait faire c'est en fait ça me plairait peut-être un peu plus que d'utiliser cette façon qu'ils aient pas forcément très clair pour quelqu'un qui verrait ce code c'est de retourner en fait dans collection ici la collection et et de faire un an de retourner dans de retourner les noms de retourner les tâches de retourner les tâches directement comme on l'avait fait voilà de garder en fait ça de retourner donc désolé je me mélange un peu les pinceaux comme ça voilà donc on retourne les tâches sauf que là on va utiliser icloud donc là ici plutôt que de retourner ça on va faire un hub tac include de tasque slash d'ascq et on va lui passer dans ce cas s'il est à ce compte là il faut faire louise task et galata sq donc là on fait ce qu'on fait c'est qu'on utilise une clause on lui dit inclus c'est un peu c'est un peu la même chose en fait ça ça revient petit peu au même mais je vois quand même plus souvent cette façon de faire le wind touch ring c'est pas un truc forcément très connus le icloud c'est quand même assez assez utilisé donc on va inclure ce temp light avec tasse qui est égal à tasdon classe avait beaucoup de tasque il faut bien séparés l'un de l'autre ici c'est par exemple donc si on mettait patrick là c'est ça en fait c'est que on va dire on pourrait faire sa voix la tasse que c'est quoi c'est le task qui à l'intérieur du tass coin html donc c'est ce parce qu'ici qu'on est en train de lui dire inclues ce temp late avec la variable task donc cette variable qu'on a ici qui va être égal à patrick et dans ce cas-ci patrick voilà patrick c'est ça donc c'est la collection de tâches donc là tous appellent pareil effectivement je l'appelais tasq dans tous les sens donc ça fait beaucoup de tasque tu as tu as task mais j'espère que vous comprenez le principe donc si je reviens l'âge actualisé normalement voilà ça marche de la même façon on a bien les listes qui s'affiche et quand j'actualise je reviens sur la liste par défaut donc moi je vais laisser ça comme ça ça me semble un peu plus logique de faire comme ça et voilà donc donc voilà donc on a fait la récupération des tâches donc on va pouvoir les cochers ça ici afficher les tâches d'une collection ça c'est bon il va rester donc la suppression des tâches et ajouter une tâche alors ça ça on l'avait déjà fait si je me trompe pas si j'ajoute test mais ça la joute j'actualise dresser bon et là si je vais dans la course à l'ours a par contre lyon l'a pas fait c'est que par défaut je crois que ça va elle ajouté dans la liste oui c'est ça en fait si je vais dans course et que j'avais quelque chose ça va toujours là ajouté dans la liste par défaut donc ça il va falloir qu'on fasse donc ajouté une tâche on l'a fait mais pas relié à une collection donc on Relier une tâche à une collection va s'attaquer à ça tout de suite alors si je me trompe pas ça va pas être forcément le plus simple parce que là en fait avec htm x si je regarde donc quand on actualise donc là par défaut on est sur cette page on a les éléments par défaut et si je clique sur course ouais c'est ça pour l'instant en fait pour l'instant le problème c'est que on ne change pas l'url et si je reviens ici dans quoi est-ce qu'on ajoute la taz voilà c'est ici et là vous voyez dans adta ce qu on ne passe pas la collection est le problème c'est que si on passe la collection par défaut donc si je reviens ici là par défaut alors là on passe même pas la collection mais on pourrait en fait ici faire comme j'ai fait il ya quelques minutes c'est à dire passer la collection qu'on récupère qui est gâté objets talent 404 ah oui non oui ok on récupère la collection c'est ça donc soit on a cette collection ici qui est la collection par défaut soit on à la collection avec le slogan est donc une dans un cas ou dans l'autre on peut passer cette collection ici et là passez au contexte et ensuite dans l'index on pourrait ici dira d'ascq est passée la collection comme ça et dans notre url ici adata squale a récupéré récupéré par exemple lindt collectionne piqué y est dans l'index ici faire collection pour un pk on pourrait faire ça et ici je viens dans le a de tasque voilà on récupère le collection collection les cas donc on peut faire ça mais en fait vous allez vite voir la limite donc là je ferai collection jake song est eca egan ça voilà donc là ça fonctionnerait si j'arrive ici que je dis que je veut afficher la collection course ok là du coup si j'ajoute quelque chose on va faire je sais pas qu'est ce que je pourrais ajouter d'autres on va mettre un jeu pareil photo donc je clique sur ajouter là il est bien ajouter en bas donc ça c'est normal et si j'actualise là il est bien dans la bonne liste par contre le truc en fait qui va pas marcher si je reviens sur cette collection par défaut donc là je vais ajouter autre chose on va à la joute est donc là la voilà on va ajouter dans la bonne liste et si par contre après je change donc là je viens sur course et que j'ajoute encore autre chose on va avoir l'impression que c'est au bon endroit puisque htm xv à l'ajouter dans ce qui est affiché actuellement dans le lit des task puisqu'on la joute à la fin de sa ici puisqu'on a mis en exergue et de tasque donc ça a l'air d'être ajoutés au bon endroit mais si j'actualise voyez que le encore autre chose il se retrouve dans la liste par défaut parce que ça ça va être évaluée une seule fois le hamas qui s'il va être évaluée une seule fois quand on quand on charge la page et quand on clique sur course ici ça va pas être changé donc là ce qu'il faudrait faire là il ya encore une fois plusieurs façons de faire plusieurs façons de faire ce qu'on peut faire je réfléchis at collectionne qu'on va faire à deux collections alors je réfléchis en même temps h ex get on va là donc c'est ici en fait quand on clique il faudrait qu'on puisse il faudrait qu'on puisse changer ça on peut on peut le faire assez facilement fait en javascript mais je réfléchis s'il n'y a pas une façon d'éviter du javascript ce qu'on peut faire aussi c'est que quand on clique ici on peut faire un chix push alors je me souviens plus exactement je vais revenir dans la référence à shakespeare url voilà h x push url on va le mettre à la touche et ça en fait ça permet donc si je reviens ici alors qu'est ce qui nous dit ah oui parce que là en fait j'ai dans le data ce qui si je vais enlever ça quoique on va peut-être le garder a pour l'instant je vais passer on va mettre va mettre un pour pâques et pour pas qu'ils nous embêtent donc la fête qui va se passer avec le hx9 url c'est que quand je vais cliquez ici vous voyez que ça va pousser dans l'url le l'eurl en fait qu'on a mis dans le h6 guette dans ce cas ci dans le match ex post nora chic skate c'est ça ça va pousser en fait cette url dans la barre d'url ici donc c'est assez c'est assez pratique là vous voyez qu'on voit bien le l'identifiant des deux listes le 16 et le 17 est ce qu'on pourrait faire après du coup c'est dans le at&t skyrock qui a fait je pense que c'est ça que je vais faire parce que là du coup on a cet url ok je pense que je sais ce que je vais faire ce que je vais faire c'est que je vais pas mettre donc directement ici dans le hamas qu on va enlever ça on va aussi enlevé donc du coup le collection de cliquer ici est ce qu'on va faire à la place ce qu'on va faire parce qu'avec le push url alors je suis en train de réfléchir suis pas sûr que ça va marcher mais avec le push vers l on peut aussi lui dire ce qu'on veut ce qu'on veut mettre donc on pourrait lui dire ici à la place tu mais on va reprendre l'exemple avec patrick donc là j'actualise j'actualise alors oui là vous voyez aussi le problème c'est que en fait c'est ça c'est un double problème c'est que là du coup quand on actualise on se retrouve sur cette url gueltas qui nous retourne en fait juste la liste des tâches donc tout c'est parce qu'on veut on veut revenir en fait à cette url task oui donc l'appui on va enlever le 1 puisque du coup on a enlevé de notre url voilà donc ça fait beaucoup de petits problèmes donc là si je reviens ici voyez on a bien patrick qui est dans l'url on peut vraiment mettre ce qu'on veut ici est donc tout ce qu'on va faire c'est qu'on va revenir en fait à on va modifier du coup notre notre url comme l'url d'un texte on va dire collection égal à et l'on va insérer ici avec les double accolade collection points dans ce cas ci est donc ce que ça va faire c'est que quand on va cliquer ça va changer l'url pour rajouter à la fin le point d'interrogation collection égal et le collection ce look donc si je reviens ici up j'actualise je vais sur défaut vous voyez ça mais bien collection défaut je vais sur course ça mais bien collection course et l'intérêt c'est que du coup quand je fais ça maintenant si je vais sur course j'actualise est bien quand j'actualise je vais bien retomber sur cette même liste de courses puisque la cie vous souvenez bien dans le index c'est ça qu'on faisait si je reviens dans views ici d'un index on récupère est le guette collection donc là quand j'actualise on a bien collection égal à courcy on a bien la liste de courses qui est affiché si je vais sur le défaut et que j'actualise ou que je mets cette adresse dans la barre eh bien on va bien retomber là dessus et ce qui est intéressant c'est que là du coup quand je vais dans course g se hâtent collection égale course et alors là est ce qu'on va pouvoir s'en sortir quand même sens javascript je réfléchis je suis pas sûr je vais revenir donc pas dans le task dans les index alors là ce qu'on peut faire en fait oui on va faire un tout petit peu de javascript parce que là je pense oui parce que là en fait dans le alors si ou le hâte parce qu'ici voilà là on peut passer un peu décorrélé si vous voulez ya le collection ici qui va changer de l'eurl mais ici on a encore le problème de d'avoir quelque chose qui n'est pas dynamique ici je viens dans la vue là j'ai en fait j'avais j'avais l'espoir que quand je fasse le coin ce point get on va vérifier quand même et je pense pas là on va faire juste un rituel http russes pensent comme ça pour que ça marche si je fais un print du oui quoi ce point guette je valais tout en bas oui non c'est ça ça va marcher parce que là en fait le ricoh spong et il va nous retourner le l'url de à de tasque donc il va pas dans tournée je vais je vais vérifier mais si j'actualise jeu fait est ajouté et si je viens là haut c'est sako les dictons n'a rien quoi donc donc donc parce qu'on l'a en fait ça va ça va nous retourner de tout simplement l'url de had task ici donc c'est url là qui n'a pas de quoi lui par la mythologie donc le guette ici ne va rien retournez donc ce qu'on va faire on va je pense qu'on n'a pas le choix de faire du javascript ce qu'on va faire c'est qu'on va faire du javascript pour passer des valeurs en plus là encore grâce à acheter mix comme je vous dis vraiment alchimique c'est vraiment une bibliothèque qui est tout à fait fonctionnel même s'il est encore très jeune et assez peu connus on peut toujours s'en sortir en fait ils ont prévu tous les cas de figure il ya plein de choses des fois que je j'ai je retourne dès fois l'amendé comme dans la documentation puisque j'utilise sur doc string h x htm x et mais c'est vrai que des fois je enfin je fais beaucoup de choses sans vie sans regarder la documentation et quand j'y retourne justement le push url c'est quelque chose que j'ai découvert assez récemment je pense qu'ils ont ajouté assez récemment vous pouvez aller voir en fait sur le sur le github si vous voulez aller voir les willis les détails ici j'imagine qu'ils doivent ils mettent pas grand chose ici faudrait trouver le willis log willis log de tout ça si je tape h tmx willis log changelog voilà il est ici voilà donc vous voyez si je fais h x push up voilà ça fait ça doit sa date quand même de la wii non ça doit être quand même 2020 mais oui il ya plein de trucs quand même qu'ils ajoutent si on revient juste la voilà en 2022 donc en février vous voyez ils ont ajouté des serveurs event ils ont ajouté des le dise wye oak est enfin là c'est plus des trucs qui ok c'est plus des petites des petits des petits fixe il ya vous voyez des newell's heures ici qu'on peut utiliser donc donc donc nous ce qui va nous intéresser ici c'est le val alors le val c'est le varois jeu je sais je me demande là dessus vous voyez si c'est pas un n'oublie je crois parce que je sais que j'ai déjà utilisé les deux il me semble qu'il faut à peu près la même chose et je me demande si au début ça s'appelait pas valve et puis ils ont mis en var sous l' inverse parce que me semble qu'ils font à peu près la même chose ouais c'est ça ajax et vars mais ça en fait c'est même presque la même page oui je regarde c'est donc ouais ok bon on va utiliser valls je sais pas si ça va marcher encore c'est peut-être encore un coup de manuel valls je sais pas mais donc ok on va utiliser lui h x valls htx valent son camp fait ça en fait ça nous permet de donner des valeurs en plus donc je vous montrais très simplement si on fait ça ici on peut dire collection et là on va pouvoir dire par exemple course et l'intérêt c'est que du coup si je viens alors là ça va être un poste donc ça va être dans views si on affiche le post ici et que j'actualise up j'ajoute une tâche et je viens ici et là vous voyez on attache description on a bien la collection nichols qui est envoyé en même temps et ce qui est encore plus cool c'est qu'on peut mettre donc du javascript donc si je viens dans l'index ici dans pas parce que c'est hsba.l voler ici on peut mettre js de points et on va pouvoir voilà ici on va pouvoir mettre une fonction donc en fait ce qu'on va faire ici c'est que on va faire une fonction ici qui va s'appeler guette guette collection from you were elle est ici on va passer donc ça on va faire js de points je crois qu'on n'a même pas besoin de mettre ici les guillemets et ici on va mettre donc ça qu'on va exécuter donc là ce qu'on va faire si on met un rythme de course là encore ça va fonctionner normalement je reviens j'actualise up j'ajoute quelque chose je reviens ici et là vous voyez on a bien collection course aussi et pour vous montrer que c'est bien ça qui a changé si je reviens là je vais mettre test à la place j'actualise ajouté et là on a bien collection et galt est donc c'est parfait donc ce qu'on va pouvoir faire c'est là cette fois-ci dynamiquement récupérez les paramètres ici alors ça c'est possible en javascript avec je me souviens jamais javascript url c'est quoi url url url l'object je sais plus il y a un objet qui nous permet à url web api web mozilla c'est pas mal ce dont j'avais ce qu'il faut c'est pas mal aussi donc là on fait comme on peut faire de la new url et je crois voilà on peut faire url à partir du look qichen donc on va faire on va faire ça on va créer une url à partir du coup là je sais pas pourquoi il y en a deux on va faire à partir de je crois que c'est window point location si je me trompe pas on va aller hop ici faire quelques petites est donc window points l'autriche si je me trompe pas ouais il on doit pouvoir faire window point le cliché point serait fait le crois oui voilà c'est ça donc window point locationpoint href ça va nous donner l'url de la page et avec cet objet url je sais plus où on peut récupérer les paramètres à la solde params ouais string individual craquer c'est ça qu'on veut près donc solde par l'oms voilà sorges params donc en fait je vais voulu tester directement vous allez voir hop ici on fait ça est en fait search params hop voilà on a les urls sorges params et sur ce truc là en fait on va pouvoir récupérer les paramètres donc là je vais faire url on va faire un seul cheveu params égale l'url point sur jeu params et si je fait donc log georges karam ce point ces couacs ont admis collection on va essayer ça je crois qu'on peut y accéder comme ça donc j'actualise et je vais tout simplement utiliser cette fonction ici console up undefined parce que oui on fait un console points de loeb doc et donc si je fais juste ça comme ça j'actualise tac donc là on a bien les url sortie params et après comment j'accède à un truc ok c'est un gars faut faire un guette donc là on va faire on va faire un return sorte soldes params point guette de collection vous voilà et on pourrait faire presque tout ça sur une ligne on va quand même un petit peu séparés et donc si je reviens l'âge actuel is on va faire cette fois ci un console enfin on a besoin de faire un console points loeb on va juste faire ça et ça devrait nous afficher voilà et c'est exactement ce que je voulais donc là ça nous affiche bien course si on met on va mettre patrick ça va faire une erreur mais on va quand même pouvoir tester notre ballon puisque du coup on n'a pas là on n'a pas la fonction qui est définie mais si je mets à la place de course on va mettre du coup défaut et que je reviens dans ma console et que j'exécute ça on a bien un défaut parfait donc là en fait ça ça va nous retourner la collection et ben voila et du coup on a résolu notre problème ici je vais pouvoir des andes enfin des commenter tout ça alors là on y va avec le slogan du coup alors on pourra y aller avec on pourrait faire ça avec le pic est aussi ouais qu'est-ce que ballan qu'en fait non parce que parce que là du coup on utilise lui alors c'est peut-être le seul problème avec ça c'est du coup on utilise le slug et non pas le prat mary qui puisque le primary qui n'est pas dans l'url ici ça serait un peu compliqué donc là on va faire on va faire ce legs et on va faire request point pose point guette collectionne voilà donc là normalement ça devrait marcher je pense si je reviens si j'ai tout bien fait comme il faut j'arrive là on va faire un petit peu de ménage lancer ces noms qui ne veut plus y ait grand chose ça on va enlever on va enlever vous enlevez tous et est un pour enlever quelques trucs aussi et delete qui est yes ok donc leur nez sur la liste par défaut à prendre java ok ça la joute bien là si je vais dans course défaut j'ai bien sa course on va ajouter une salade si je reviens en défaut et dans course parfaite vous voyez là c'est bien ajouter à la bonne collection on a des truelles donc voilà on a vraiment régler beaucoup de problèmes là je suis content on a vraiment la possibilité maintenant si j'actualise après avoir après avoir été sur une collection ça va bien me retourner la même page on peut partager si l'url est arrivé directement sur la liste qui nous intéresse on a bien les éléments qui sont ajoutés au bon endroit donc donc voilà ça remplit tous les trucs ajouter une tâche on est tout bon donc ensuite supprimé une tâche et supprime collection seller de trucs qui reste et je pense qu'on aura fini cette partie back end je fais un petit peu de ménage dans les onglets hop ça aussi et voilà donc qu'est ce qui nous reste qu'est ce qui nous reste donc la voyez c'est vraiment moche mais ça fonctionne et on ne sait pas embêtés du tout avec le côté fontaine j'insiste vraiment beaucoup là dessus faut vraiment se concentrer sur les fonctionnalités avant de passer à autre chose la cij avait commencé à faire du front en fait j'aurai je me serais emmêlé les pinceaux dans plein de trucs avant de vraiment consolider ses petits trucs la dh tmx là vous voyez le html et les minimes et après on verra comment faire ça un peu plus un peu mieux avec de la sémantique et palais d'yves partout et comme on va pouvoir améliorer un petit peu tout ça donc la docte liste Créer un composant pour les collections des faux course c'est parfait ok là on attend que le truc pour ajouter je vais sinon je vais vérifier qu'on a encore rien cassé je crois je me trouvais électronique up ajouté à huy donc là ils sont ajoutés comme ça donc il faudra way à terme on fera peut-être là les collections et on fera peut-être un comme pour le tass qu'ici on va faire un bien on peut le faire tout de suite en fait même on va faire un nouveau template qu'on va appeler du coup collection hop on va enlever tout ça est dans le ton va couper tout ça on va le mettre ici et là ici on va faire un mini claude de tasque collection avec collection qui est égale à la collection donc comme on l'avait fait pour les task et sauf que là l'intérêt c'est que on va pouvoir retourner donc l'acier ou c'est à cause d'une en https police pense ça aussi il faudra qu'on change la voilà on a le collectionnisme donc là on va faire on va faire un run de 2,2 de wick ouest dans deux sites de request de tasque up collection et en contexte on va lui passer la collection puisque c'est tout ce qu'on a besoin de collection et on lui passe la collection voilà normalement ça devrait régler problème j'actualise qui on va mettre autre chose ok voilà parfait et là on a bien autre chose électronique la j'ajoute caméra up caméra je passerais pied parfait voyez ok donc là faudra vous comme je vous disais là on va faire la même chose après sur le casque là on a toutes les tâches mais après en fait bon on va le faire tout de suite plutôt que de le dire on va le faire on va ajouter un task coin html ici et dans task donc pour l'instant on va mettre le paie et on fera un truc du tout à l'heure et là on va faire une claude ii task task weeds h with task égale d'ascq voilà et on va faire donc pareil ici on va copier tout ça sera plus rapide tac et ici on lui passe donc là on crée la tâche donc on va la récupérer et et ici on met task est en bêta se voit là et là à la place en mai task voilà ça commence à voir la gueule donc j'actualise et là vous voyez l'intérêt c'est que du coup maintenant si on veut changer quelque chose là si on veut faire un petit div avec moi je ne sais pas avec qu'est ce qu'on pourrait faire pour faire un dix on va faire 1 h 1 juste pour vous montrer et puis là voilà on pourra mettre la description je sais pas quoi voilà vous voyez il ya tout qui suit automatiquement si j'aurais et si je rajoute quelque chose on va dire caméra trépied cartes mémoires automatiquement envoyé sas a su bien le format et je peux modifier directement mon template ici sans avoir besoin de toucher enfin de faire du html en fait directement dans du piton ce qui n'aurait pas vraiment de sens donc ça fonctionne parfaitement là je vais juste enlever ça et on va rester pour l'instant sur une description simple et on verra plus tard dans le front ten comme on fait un truc un peu mieux donc donc donc je reviens là ça c'est bon donc supprimer une tâche supprimer une collection donc supprimer une tâche on Supprimer une tâche va pouvoir le faire on veut mettre un bouton à côté donc on va aller dans le tas ce qui si justement voilà on va mettre ça en pratique on va mettre ici 1 op ce qu'ont fait un petit formulaire pourquoi je fais des formulaires d'ailleurs à chaque fois c'est vraiment pour le jeton csrf on peut s'en sortir sans c'est un peu plus chiant en fait il ya différentes façons de faire en fait vous avez la façon pas sécuritaire qui est de d'enlever tout simplement le csa rêve token donc d'aller dans l'url est ici vous faites un ccf examen je crois ouais je crois que c'est ça on va l'emporter ouais c'est ça django views décorateur csrf donc on peut faire ça et là il aura tout simplement pas besoin de jetons donc on peut éviter le formulaire comme ça pourquoi ça peut être intéressant d'éviter le formulaire c'est que ça bon au niveau du html ça vous évite un petit peu de trucs là plutôt que d'avoir le forme méthode on peut garder juste le bouton quoique là après avec un input c'est un peu un peu embêtant parce qu'il va forcément envoyé en fait les informations d'une poutre avec avec le h x post sinon il faudrait peut-être faire un peu comme on a fait avec le h6 valls pour pour aller récupérer des informations à partir d'un ligne foutu qu'on n'aurait pas tout qui est packagé dans un formulaire donc ouais c'est pas forcément mieux donc là qu'est ce qu'on va faire on va faire on va faire un forment en fait ici on va faire une méthode dégâts la poste donc comme je vous disais je vais pas mettre le deal it parce qu'avec le deal it par expérience du coup le csrd token n'est pas à m'envoyer je sais pas pourquoi ça peut être un petit bug et là on va mettre un bouton qui va être de type summit et qui va être supprimé et voilà et ensuite après ça du coup hop je vais m le hx1 post d'ailleurs je sais même pas si on a besoin de mettre méthodes légales post ici peut-être pas vu qu'on utilise 1 h x post ici à voir je crois que si on l'enlève justement on a un problème avec le ccf token aussi à vérifier donc h expo ce qu'on va faire on va faire le chemin attaque donc on a fait apte à ce qu'on va faire un délit de tasque ici là pour le coup on va récupérer le prix marie qui donc on va dire task pk up est ici delete task hop on va le créer deal it up on va aller ici donc à de tasque delete task sans majuscule request task piqué et ébahi si on va tout simplement faire un task et galata ce point break ce point guette donc là encore on pourrait faire un get objectera 404 peut-être se sent mieux et piqué et galetas piqué et et puis là en fait foi on peut faire on aurait pu faire tous sur la même ligne enfin non parce que la savane retourner potentiellement 1 404 donc en fait il faut bien le c'est pareil si on vous a un deal it ici ce serait probablement ça pourrait ne pas fonctionner si on récupère 1 404 je pense hélas on va retourner bien là dans ce cas ci on va retourner à http respond vide parce que quand on veut supprimer la tâche en fait on va rien vouloir rajouter dans ce cas ci on va juste vouloir supprimer l'élément donc on va retourner volontairement http res.feedsportal.com avait avant est ce qu'on va enlever donc le hb ex post ici je vais le mettre tout de suite ça va être le l'url delete task avec task point impliqué le h6 target du coup ça va être le close cette flamme donc ça c'est encore un truc très intéressant vous pouvez là on n'est pas obligé de mettre un identifiant quelque chose on peut lui dire trouve moi en fait le formulaire le plus proche donc là il va prendre ce formulaire le plus proche hélas qu'il va falloir faire c'est enlever du coup tout se bloque la donc là il va falloir modifier le h6 swap puisque le h6 soit par défaut il va cibler l'intérieur donc si en fait on change pas le hachis que ce soit il va en gros trouver le formulaire le plus proche si je me trompe pas et il va enlever tout ça ici on va vérifier pour l'instant on va enlever ce lâcher que ce soit vérifié si on en a besoin ou pas donc j'actualise je fais supprimé et là si on va voir le html vous allez voir il devrait y avoir un formulaire voilà vous voyez il ya un formulaire ici qui est vide qui n'a rien donc on a supprimé en fait juste l'intérieur du formulaire donc moi ce que je vais faire c'est remettre moins chic ce swap et là on va mettre à hauteur si je me trompe pas hauteur html c'est sa part des fossés inard html et on va lui dire remplace en fait par rapport à ta cible tu remplaces tout le hauteur donc pas juste l'intérieur mais également le composant l'une donc la cij actualise je supprime et que je vais voir le html là dans ce cas-ci up voyez on a plus que qu'un formulaire et l'autre a été supprimée donc bah voila c'est tout autre chose voilà course si je supprime tac on va supprimer l' on supprime la j'actualise voilà y'a plus rien donc c'est bon pour les tâches voyez c'était assez rapide une fois qu'on a pris le pli franchement c'est tellement rapide wailly a vraiment mais tellement rien on a vraiment que juste trois lignes de code ici c'est vraiment rien juste le poste l'url fin c'est incroyable c'est tellement tellement pratique je peux je peux absolument plus me passer de cette bibliothèque donc voilà on pourrait s'en passer en faisant quelque chose qui se rafraîchit avoir les formulaires mais bon si on veut faire un petit peu d'interactif comme ça en mode c'est une grippe et de l'application c'est quand même ça change tout ça change vraiment toute la vie donc qu'est ce qu'il reste là on a supprimé la tâche qui va rester à supprimer la collection donc supprimer Supprimer une collection la collection on va mettre un bouton quelque part on va mettre un bouton ou est-ce qu'on va le mettre on va le mettre juste après pour l'instant on va le mettre avant les tâches ici donc on va mettre un bouton qui va s'appeler on va mettre un à et là alors qu'est-ce que donc là si on supprime la collection ça veut dire qu'il ya beaucoup de choses à changer c'est à dire qu'il faut supprimer l'élément l'élément actuelle il va falloir du coup modifié l'url il va falloir ouais ça fait beaucoup de choses à changer là du coup là j'ai envie de juste faire un rafraîchissement dans ce cas ci dans le cas d'une suppression ça me semblerait pas déconner donc pour l'instant je vais laisser un lien on verra peut-être plus tard si on arrive à modifier ça mais je vais pas trop embêté donc url 10 litres à ce qu'on va faire delete collectionne cette fois-ci et int collectionne piqué donc delete collectionne delete collectionne on revient ici des 10 litres collection louis quest collection piqué il vous commencez à connaître la chanson ça va être exactement la même chose collection en fait ouais on va vraiment que pied tout ça et à la place de tu as quand même être collection et collection deal it up est là par contre on va faire 1 re direct vers la vue d'un decs donc room voilà je lis un peu vite mais hélas cette pâte à ce que ses collections voilà je pense que ça devrait suffire si je reviens sur index urls donc ladite collection et à huy ah ouais ouais là c'est le problème c'est que là en fait du coup il faut passer la lampe ou raf on pourrait on pourrait peut-être et utiliser notre truc pour récupérer d'url ou alors en fait non il faut jouer plus finement que ça en fait il faudrait je réfléchis là on a toutes les tâches task j'ai envie de le mettre là donc là on a juste les tâches on ajuste les tâches mais alors attendez include et dans le task quand on affiche l'état est mauvaise et salons récupère la collection qui achevait voilà je sais ce que je vais faire on va le mettre avec les tâches donc on va le mettre ici on va le mettre ici et là on va faire collection points clés cas et le collection du coup il reste plus qu'à le passé donc là on va le mettre dans leur index ici on va dire oui tu collectionnes égale collectionne puisque ça au départ on l'a normalement ou alors il faut juste leur ajouter dans views ouais donc là on en voit bien la collection clé normalement ça devrait pas nos rivages non ok ça donc là ça marche et si je viens d'un task là on envoie collections il faut juste leur ajouter dans le galetas qu ici voilà on a les tâches et donc on va également rajouté la collection voilà c'est tout donc voilà là encore plusieurs façons de faire on aurait pu faire du javascript ou des trucs un peu chiant comme ça mais là je pense que c'est le plus simple donc j'actualise je vais sur la vue par défaut autre chose alors on n'a pas le à vue parce que j'ai pas demi je pense que j'ai pas mis de textes dans les task alors est ce que c'est parce qu'ici il s'agit d'un mythe est donc va faire supprimer la collection comme ça j'actualise ok voilà donc là je vais aller je suis sur autre chose supprimer la collection parfait excellent et là on est défaut alors par défaut alors peut-être que pour la vue par défaut on va pour la vue par défaut et puis là je suis en train de me dire pour la vue par défaut vous voyez du coup on n'a pas le on a pas le hat collection on pourrait rajouter ce que si si je fais 1 re direct voilà il ya différentes façons de faire encore mais ce qu'on pourrait faire c'est dire que si on n'a pas de collection de ce legs ou non on voit ce qu'on pourrait faire on pourrait faire ok ok on va faire ça on va faire ouais parce que là en fait non ce qu'il faut quand même créé là il faut quand même comme je le disais c'est un peu le problème de mon truc c'est que ce truc là là ça va créer la collection par défaut si elles existent pas parce que j'aurais eu envie de faire un truc en mode si on n'a pas de collection slogan fait on fait 1 8 tonne re direct et on fait un livre j'ai quand même voulu montrer parce que ça peut être intéressant on va ajouter ça et il a on ferait un rival sever rom on va faire un half kring screening 2 2 ap et l'armée très hâte collection égale 10 fautes on pourrait faire ça hop donc là en fait si on arrive sur la page en fait sans collection slug voilà automatiquement envoyé on est redirigé vers la collection par défaut sauf que le problème là je dirais c'est que du coup si cette collection par défaut n'existe pas si je vais dans collection et que je supprime cette collection voilà là on va avoir un problème parce que cette collection n'existera pas voilà nos collections match donc en fait en fait non on va juste faire ça fouet ce qu'il est ou est ce qu'il est ou est-ce qu'il est gelée pu je l'avais accolé coupé va faire dans collectionne pour un gars de différentes collections voilà donc si on n'a pas de ce legs on va juste s'assurer voilà de créer cette collection par défaut je trouve pas ça ultra clean la bon là encore faudra peut-être c'est pareil je suis bon voilà je vous le dis je suis pas trop satisfait de cette façon de faire mais bon ça va marcher normalement jeu mais auquel on a bien donc notre collection par défaut donc pourquoi je faisais ça déjà je suis en train de me poser la question notre collègue sean ça avait un lien avec le reste des lits de tasque je sais plus direct rom delete oui parce que là du coup on est redirigé à quai ah oui et c'est çà et là en fait je veux qu'on ne puisse pas supprimer cette collection par défaut donc là dans le tas ce qui si on va mettre un if on va dire if collection points slug égal à default non plus tôt n'est pas égal à default up ici on va mettre un endif donc ils m'ont pourrait mettre un note yves note ouais non on va mettre différents yves collection slug est différent de défaut on affiche et sinon on n'a pas le bouton ok donc là on peut supprimer les courses on peut supprimer l'électronique et par défaut vous voyez c'est ça que j'aime bien en fait c'est que là je peux ajouter donc course hop là je vais sur la liste de courses mais que si en fait je supprime cette collection on est redirigé par défaut à chaque fois vers ath collection égale défaut même si on revient sur cette url on est redirigé donc voilà je sais pas si c'est le mieux mais ouais ok le mont flux de pensée m'a dirigé vers sa là du coup ça fait une heure et direction avec ce truc là moi je suis pas sur six est optimale vous me direz vous ne diriez en commentaire mais moi je trouve ça pas trop mal on va dire donc donc donc qu'est ce qu'il reste à faire read me supprimer une collection à ça c'est fait ben voilà on arrive au Test du backend bout je crois est ce qu on a tout ce qu'il faut donc on peut ajouter une collection on peut ajouter course je pars électronique défaut donc on va sur la liste par défaut donc là pour l'instant on n'a aucun signe visuel à par l'eurl pour savoir dans quelle liste on est donc ça on va pouvoir le modifier par la suite avec avec le front tu pour pour surligner en fait le bouton qui est le bouton qui qui nous intéresse en fait enfin le bouton qui est sélectionné quoi et donc là si j'ajoute dans des faux on va mettre faucher palin tâche par défaut une tâche par défaut une autre une autre tâche par défaut parfait dans course on va dire on va remettre une banane pomme poire et c'est d'ailleurs là on pourrait avec un peu de javascript là ce qui est un peu chiant c'est que alors là aussi d'ailleurs on peut ajouter plusieurs fois le même élément n'est pas forcément très grave on pourrait avoir j'ai pas plusieurs choses a ajouté qu'il soit le même donc ça me dérange pas je vais le laisser là le seul petit truc qui me dérange un petit peu c'est que comme j'ajoute quelque chose ça ne supprime pas l'élément qui est enfin il faut ouais ça laisse le texte en fait dans la boîte de textes et je crois pas qu'avec lâche t elle mixe les moyens de il ya plein de trucs mais là pour le coup je crois pas qu'il ya un truc facile pour pour supprimer ça donc là ce qu'on pourrait faire en fait ce que peu de gens savent avec htm hic c'est qu'on a une librairie en fait voilà javascript api donc on peut faire des collages accents fait directement donc là ce qu'on pourrait faire c'est je sais pas si je veux le faire pour vous montrer mais c'est un petit peu long je vais vous expliquer vite fait ce qu'on pourrait faire c'est dans le attaque ici plutôt que de faire ces éléments ici on pourrait faire sommes ici on pourrait faire un an ne cliquent par exemple dire à d'ascq est ici donc faire une fonction à de tasque est ici en gros on pourrait refaire donc avec ceux achetés mix ajax là encore ils ont pensé à tout vous voyez ici on peut mettre donc le vert mlle pattes le contexte avec des value en plus et c'est donc là en fait on pourrait je vais prendre vous pouvez même faire un truc après voilà donc on pourrait faire ça par exemple donc on pourrait en fait refaire notre notre truc ici en mettant l'url comme ça ouais là il faudrait peut-être varier les guillemets quand même avoir vérifié alors non je me suis planté là c'est elle c'était le guette donc get up la messe a ensuite target du coup on mettrait task le swap ce serait before and et on a même le value ici voilà value to submit qu'on pourra mettre donc on pourrait reprendre ça ici et le mettre dans le val use et est-ce que ça permet de faire ça en fait tout simplement c'est c'est de faire 1-1 2-2 en fait dessus de supprimer ce qui est à l'intérieur de ça ici donc ça on pourrait le faire en allant ciblé task description ouais c'est ça je vais le tester la juste pour vous montrer un niveau javascript s'en va l'enlever on va faire lettres input égal à doc humaine point query selector up et là on va faire un input alors comment c'est déjà une poutre je crois qu'il faut mettre des crochets mais redit son micro chez ake crochet ni mégane description on sait quoi parce que description je pense qu'on peut faire ça comme ça si je retrouve voilà hockey non il n'a pas l'air d'aimer ou je crois qu'il peut faire juste name comme ça n'émeut ou non la faut le mettre entre crochets ray c'est ça que je vais y arriver ouais voilà donc je pense que c'est ça je vais aller tester ici up input ouais c'est ça on a bien 7 input et l'on peut faire une poutre du coup poing value égal à rien voilà et c'est le supprime il ya peut-être un moyen plus simple de faire input point value égal à rien et voilà et donc là en fait ce qui se passe c'est que du coup j'actualise mais quelque chose et quand je clique voilà ça va ça va supprimer le truc parfait et voilà et là où est donc on voit un rafraîchissement à wind en fait ouais on a l'impression que ça a marché en fait c'est parce que là j'ai un g1 forum est gelée mis en type seul mythe donc si je l'enlève par contre hop ça devrait ne pas danser le sol humide quand même alors je pense qu'il faut mettre un rôle bouton pour que par défaut ça ne le fasse pas j'actualise ouais c'est ça donc là vous voyez la page ne se rafraîchit pas mais j'ai bien mon texte ici qui disparaît donc voyez en fait on pourrait faire ça donc supprimer ça et ensuite faire la requête ajax ici d'ailleurs je me demande si on peut pas tout simplement faire un peu les deux je suis en train de me demander si on fait ça par exemple si on fait ça alors là le hb ex post jeux les plus je vais leur ajouter ap si on fait ça qu'est ce que ça fait ça me m'interroge je mets un test a ajouté hé ben vrai ça marche trop bien alors par contre on a pu le on a pu ce que je veux ok donc ça ça marche mais oui non type bouton qu'est ce qui marche pas à de tasc à ok ah oui en fait non ça marche pas je viens de comprendre alors ça c'est un peu sournois parce qu'en fait ça a l'air de marcher en fait je mets des trucs ici je clique sur ajouté le texte par la page ne se rafraîchit pas mais là j'ai que des trucs voilà supprime une terre d'ailleurs oui il faudra peut-être ça se rajouter après le bouton mais là en fait y'a rien parce qu'en fait le on clique du coup se fait avant la soumission donc en fait on supprime ce qui est dans la boîte de textes et ensuite on fait la requête poste du coup du coup il ya plus rien dans la boîte de texte et du coup on ajoute des tâches vide en fait donc donc ça marche pas faudrait vraiment tout faire à l'intérieur faudrait déjà en fait faire la requête faire la requête est ensuite supprimés ce qui est à l'intérieur donc ouais je malheureusement ça ne peut pas fonctionner comme ça faudra garder la fonction hop je vais remettre le summit on va vérifier qu'on n'a pas trop cassé deux choses voilà ça ajoute par contre là vous voyez ça la joute après le bouton donc là ce que je vais faire c'est que parce que là on ajoute après task donc en fait le hyde il faut le faux le déplacer on ne va pas le mettre ici on va le mettre dans task et là on va rajouter alors là ça fait beaucoup de dives up non c'était heidi et le on va le mettre juste autour de ça du coup voilà donc la cij actualise et que je fais le test voilà ça se rajoutent bien juste avant parfait parfait parfait donc ça fait pas mal de choses supprimer l' on avait un autre truc encore vide donc banane up pomme pouvoir ça fonctionne supprimez supprimez supprimez la collection électronique supprimer parfait tout fonctionne ok bon bah là je pense qu'on commence à qu'on commence quand même à voir quelque chose de pas mal là on a fait tout ce qu'on voulait ici on a nos modèles donc donc c'est bien on va pouvoir maintenant s'attaquer à la partie frontale alors pour le côté Création du frontend fronte end on va utiliser la bibliothèque bootstrap puisque c'est je trouve une bonne bibliothèque pour ceux qui je dirais pour des développeurs backend qui n'ont pas envie de faire trop de fautes end il ya beaucoup de gens qui critiquent bootstrap avec raison si vous faites si vous voulez devenir développeur front-end clairement je ne vois pas l'intérêt d'utiliser bootstrap c'est presque contradictoires en fait si vous faites du front end apprenez très bien le html le css et déjà avec ça vous pourrez faire énormément de choses il ya énormément de nouveautés dans le css qui permettent de se passer maintenant de framework de ce genre donc vraiment si ce qui vous intéresse c'est le côté front-end et bien bootstrap n'est pas forcément une bonne solution pour vous par contre pour des développeurs qui veulent principalement faire du back end et qui ont envie de présenter quand même des sites un peu plus sympa que ce qu'on a actuellement je trouve que bootstrap ou des framework du genre sont vraiment une excellente alternative ça vous permet en quelques temps d'apprendre puisque c'est assez rapide d'apprendre en fait une bibliothèque bien sûr vous ne pourrez pas totalement vous passez de l'apprentissage de html et css il ya beaucoup de deux théories quand même qui est lié directement au css le html bien sûr il faut la prendre ça va assez vite quand même mais du coup voilà ça permet quand même assez rapidement sans avoir besoin d'être un expérience est ce parce que le css on a l'impression que c'est un truc facile mais pour bien maîtriser le css et pour bien organiser aussi son html avec son css etc ça peut devenir assez rapidement compliquée et c'est un peu moi ce que je reproche à beaucoup de programmes de bootcamp et cetera qui mélange un peu tout je trouvais qu'ils veulent former en quelques mois des développeurs foule stack il ya déjà suffisamment à apprendre avec le backend et c'est suffisamment important déjà de bien maîtriser le bas kahn parce que si vous faites des sites qui ne sont pas sécurisés ou qui marchent à moitié parce que quand vous cliquez sur un bouton vous n'avez pas prévu enfin vous avez mal géré votre truc voilà je préfère un site fonctionnel qui est pas forcément super beau plutôt que un site qui est fait avec du réacteur avec tout ce que vous voulez tout les techno plein de trucs comme ça et qui marche à moitié avec un code absolument horrible donc donc voila moi je trouve que c'est quand même une bonne alternative de faire un petit front tanbou de strap pour avoir quelque chose de joli facilement sans avoir besoin d'apprendre 10 millions de langage en plus donc on va aller dans la boxe on va faire déjà on va prendre là encore le cdn alors on va le mettre ici on va prendre ce cd m ici on va prendre le javascript aussi parce que je vais en avoir besoin pour les menus et des trucs du genre donc on va mettre le cdn ici dans le ed si je me trompe pas voilà on est dans le ed on va prendre le script qui lui vous voyez dans ce cas ci contrairement à acheter mx donc c'est ce que je disais tout à l'heure contrairement à acheter mix puis on va le mettre avant le tag ferment du body la balise qui ferme ici pour le body donc voilà peu par le jihad tout ça on en a pas besoin donc voilà ok on va utiliser ça et on va pouvoir donc commencé à utiliser la cij actually ça devrait déjà faire voilà un petit changement il ya quelques petits trucs des fois qu'ils me perturbe un petit peu a good strap ya des marges notamment donc qu'ils sont ajoutés sur les tâches 1h de les paragraphes et cetera quoique les paragraphes je suis plus sûr mais on pourrait rajouter une feuille de style qui permettent d'enlever tous ces petits trucs moi je vais pas trop m'inquiéter pour l'instant vous allez me voir des fois je ferai peut-être dès mardi de button 0 pour enlever ces petites marches qui m'embête et pour éviter d'avoir à le faire à chaque endroit je pourrais faire une feuille de style qui oui c'est un petit peu tout ça donc voilà je pense que si on a besoin d'eux dans lever une marge on le fera directement avec une classe bootstrap là où c'est nécessaire donc on va commencer déjà on va essayer d'organiser un petit peu mieux notre truc l'avouer qu'on a des divins peu partout alors je tiens à préciser aussi que justement moi je suis principalement un développeur pack end je sais faire du fontaine j'écris doctrine je fais du teil winch fait des trucs comme ça après c'est quand même pas ma spécialité donc prenez tout ce que je veux dire avec des pincettes j'essaie d'organiser le mieux que je peux de faire tout ce que je peux pour avoir un code assez clean d'avoir du html sémantique etc après il ya probablement plein de choses que je fais pas correctement plein de choses qui pourrait être fait différemment et mieux donc donc voilà je tiens à le dire disclaimer je ne suis pas le meilleur développeur fontaine du monde on va essayer de faire un truc quand même assez sympa et qui suis quand même quelques conventions donc ici on a tout simplement un don je vais faire un tag edl et je vais mettre mon h12 dans là je vais juste faire un petit peu de remaniement sémantique plutôt que d'avoir des div donc on va essayer d'organiser un petit peu tout ça donc là on a notre script à la fin ça on va laisser on a notre liste de tâches ici on a également le bouton pour ajouter donc tout ça ça va faire un bloc et on va avoir un autre bloc ici avec les collections et le bouton pour ajouter les collections donc là ce que j'ai envie de faire c'est un havre on va le mettre directement ici puisque en fait si on regarde pour l'instant c'est de cette façon là on essaiera de les mettre sur la sur la gauche avec un alignement qui va être qui va être horizon verticale plutôt qu'horizontale comme c'est actuellement mais ça va être un espèce de menus de navigation et c'est pour ça que je mets un avis si d'ailleurs je me demande si je n'inclus pas ce formulaire dedans je sais pas donc je pense qu'on va le on va le laisser à côté en dessous et on va peut-être et alors là c'est là où je vous dis que ça rentre dans les trucs que je suis jamais trop sur qu'est-ce qu'est ce qui est logiquement un briquet dans chaque parti je suis pas sûr que on est censé mettre une nav dans une section l'appareil je suis jamais sur le mail le mail normalement on a qu'un et là je vais le mettre alors je vais mettre autour de tout ça autour de la liste de tâches parce que c'est vraiment ça notre notre notre parti principal mais ici à la place d'un double jeu mettre une section donc voilà on va laisser ça comme ça mais une section là on a notre formulaire je pense pas qu'on ait besoin dans le maître de le mettre dans un d'yves ça suffit d'avoir un formulaire comme ça notre navigation notre section notre idole ça me semble pas trop mal voilà où ça me semble pas mal on à la collection et après on va aller aussi peut-être changer quelques trucs ici à l'intérieur des différents fichiers html donc là on a juste le bouton là on a juste un formulaire et là on a notre diva avec les tâches ok donc on verra peut-être qu'on va changer le divin on verra on verra plus tard donc la gemmi tâche ok donc ça commence à prendre forme on va retourner voir ici normalement ça devrait pas avoir changé grand chose puisqu'on a encore ajouté aucune classe nous ce qu'on va commencer par faire c'est le layout principal donc on va essayer de ramener tous un peu plus au milieu parce qu'il ya pas grand chose ici donc on va pas faire une affaire quelque chose qui prend tout là toute la taille de la page on va bien sûr penser aux responsive pour que ça s'adapte à la taille de l'écran mais sur un grand écran comme ça on va essayer de le mettre un petit peu au milieu avec du coup cette liste de navigation à gauche et avec le bouton pour ajouter et la partie sur les tâches à droite donc pour ça on va utiliser les containers ici donc les containers dans le lait yaourt on va utiliser un conteneur on veut utiliser des colonnes dayraut colonnes donc ça c'est vraiment le fonctionnement de buddh strap je vais pas trop je vais pas vous faire un cours bootstrap je vais juste le faire et vous apprendrez en me regardant donc ce qu'on va faire ici donc sur le nav donc on a une section n'a le mail ok donc là en fait on va voir et c'est là où oui donc là je les fais dans ce sens là parce que je réfléchis donc on va avoir un conteneur et c'est là où vous voyez que ça va commencer à peut-être en l'air en fait un pour dire simplement mais mes valises parce que l'on a le même nom à la section mettre tout ça en fait ça va être à l'intérieur d'un conteneur même le même ça ici donc donc là encore voilà ça je sais pas trop je vais mettre un divan pour l'instant est ce qu'on l'appellerait section je vais mettre juste indique donc là c'est juste pour avoir un conteneur qui va tout réunir et qui va avoir la classe containers qui va me permettre comme vous le voyez de de tout mettre un petit au milieu alors ce que vous pouvez faire alors il ya différentes façons de fonctionner il ya des extensions chrome qui existent pour vous afficher des blocs autour de tout ça là je suis sûre breisgau qu'une extension pour avoir un truc simple donc moi ce que je fais vraiment je le rajoute un border c'est tout con mais ça permet de bien savoir en fait la taille que prennent les choses parce que quand on n'a pas de bordure comme ça c'est un peu dur de savoir la caisse qu'on a est ce que c'est un est ce que c'est un pad ingemar jing combien de places apprend ici donc juste rajouter un petit border ici donc vous allez me voir très souvent en fait rajouter des border un peu partout pour pour avoir cette visualisation comme jeudi et des extensions qui existent pour ça il ya plein de façons de faire on peut mettre des bacs roulants des couleurs enfin les différentes façons de fonctionner moi j'aime bien fonctionné comme ça si vous avez des fax des façons de faire plus efficiente n'hésitez pas à me le dire en commentaire donc là on voit que ça prend déjà pas mal de place on peut faire des containers qui sont un peu plus petits vous voyez là y ait différentes tailles donc on pourrait faire un conteneur si on fait un conteneur small si je me trompe pas non ça c'est pour la vie ça c'est pour les breakpoint il me semblait que je regarde la fuite c'est ça va prendre 100% sur tous les trucs ok donc là quand tu es un conteneur sur les petits apprend sans et là effectivement il ya une taille normalement limitées donc il me semble il me semble est normalement que si je mettais sm si je regarde là alors quand ça marche quand nrs m en dessous de cette taille d'écran du coup on est à 100% donc si je on regarde un petit peu response ici on va un truc tout petit et là on a encore des marges quand même alors ah oui parce que sur le body et des marges en fait je pense que c'est ça si on va voir là il ya le web ou css qui donc un truc de woods strates margin non pour toi ya zéro de margin et sur la classe ici danser sur cette classe ici quand tu as une heure on a un mac sweet max waits et est-ce qu'on a des pas lingwala padding padding wright et on a des margines aussi ici ok donc c'est ça qui fait que donc ça c'est que les cantonales rock et donc c'est ça qui fait que ça que l'on a un petit peu d espaces sur les côtés et pourquoi donc on en a un mac sweet de 720 ok donc normalement il me semblait que ne pouvaient restreindre plus avec ça mais là vous voyez en fait sur les écrans xxx large donc je le crois que moi je suis à 1200 à 1400 je sais plus avec un small du coup ça fait une amap sweet 2140 donc donc voilà ça prend pas plus que 1140 pixels et voilà moi je vais enlever du coup le sm puisqu'il sert il sert à rien dans ce cas-ci qu'on ait un conteneur ou un conteneur sm vous voyez les deux en fait les deux sont similaires d'ailleurs way exactement les mêmes donc je vais le laisser comme ça ce qu'on peut faire aussi a pressé m 1 mx auto pour recentrer les choses qui ne trompe pas alors oui alors par contre là du coup en fait le truc qui tout décalé donc là ça va pas servir à grand chose dans ce cas ci donc vous voyez je me remets dans good strap en même temps que je vous parle c'est passé plus très frais dans ma mémoire donc on a le header on à la section ici est ok et là on va pouvoir commencer du coup à faire des dérangés des colonnes donc donc là normalement en fait on commence par déranger donc par exemple on fait un gros ici et après on peut faire une colonne donc là c'est là encore c'est à nous de voir comme on va faire ça et ce qu'on fait et ce qu'on fait une rangée vraiment en train de me poser la question j'ai envie de remettre des livres partout et de faire finalement la sémantique après parce que je sens que ça commença à m'embêter un petit peu je pense qu'on va faire ça finalement je vais je vais garder un truc simple j'ai enlevé les sections que j'ai fait là aussi on va enlever ça on va on va faire les divas la place on va pas s'embêter pour l'instant et après on essaiera d'organiser tous un peu mieux donc donc là si je reviens cas ça n'a pas bougé d'ailleurs je vais peut-être j'ai envie de mettre un live reload parce que là c'est un petit peu embêtant de toujours devoir passer de l'un à l'autre alors il ya une bibliothèque qui est pas mal faite sur sur django qui s'appelle le jean gol à evry l'autre si je ne me trompe pas qui permet d'actualiser django live reload d'actualiser automatiquement voilà c'est celui là donc je pense que je vais je vais l'installer je sais plus exactement comment il marche et on va on va retrouver ça alors pippin storage and go live reload donc bien sûr après il faut le mettre il faut le mettre dans votre script si je me souviens enfin dans le 7 things ici on va rajouter up est ce qu'il y a y a pas vraiment d'indications plus que ça ou est ce qu'il ya une documentation rom paige ok alors oui bon ça ah oui du coup c'est la même chose alors comment ça marche déjà ok c'est ça le jester live reload s'il n'y a pas grand chose à faire il faut il faut qu'il faut le mettre avant le statique files et ensuite est ce qu'on a besoin de lancer me sens quand nouvel an c'est un autre truc en parallèle donc là il utilise tiny maintenant me semble je n'ai pas besoin d'utiliser sa garde ok je vais essayer de relancer juste le serveur on va voir si ça fonctionne juste avec sa live reload exceptionnel qu'est connection refused donc on a déjà des petits les petits problèmes je vais revenir là j'actualise si je fais un changement est ce que ça fonctionne si j'enlève ça non ça ne semble pas fonctionner donc on a un url open error connexion refused laverie lots d'exception alors est-ce que si on checke et qu'est ce qui nous dit non il trouve pas grand chose auquel à evry lots d'exception qu'est ce que ça peut venir alors je soupçonne pas ce que je dois avoir doctrine qui tourne en arrière-plan dans un terminal ici pour l'enregistrement je pense que ça doit être ça qui me qui me qui m'embête je vais essayer de je vais essayer d'arrêter l'enregistrement et puisque j'ai cet enregistrement qui tourne en arrière-plan et je me dis que j'ai peut-être un conflit avec sa donc je vais arrêter l'enregistrement et je vais tester ça pour voir si c'est ça qui pose qui pose problème bon donc ce n'était pas ce n'était pas doctrine qui posait problème en fait je me suis trompé d'extension je me disais bien aussi il me semblait que c'était pas la même alors elles sont assez similaires mais moi celle que j'ai dit que j'utilise c'est celle ci jean gol à evry l'autre serveurs donc on va revenir en arrière on va faire alors je sais plus quel était le nom de cette extension de l'angola et brûlent autres donc on va désinstaller celle ci est yes et on va installer à la place celle ci est celle ci normalement elle marche en tout cas moi elle marche sur doc string donc live reload on va revenir dans le setting là vous le voyez c'est le même nombre d'applications fait pour ça que c'est assez perturbant aussi before hockey est ok javascript ouais alors si on veut le mettre dans le middleware ou est-ce qu'il est le middleware il est ici middleware up est ce que j'ai besoin de le mettre avant quelque chose pour les adn ce donc non à la faim et le template banques semblent n'a pas besoin c'est l'un ou l'autre ok c'est bon configuration tac tac ok ok donc voilà c'est ça c'est bien ce que je me disais il faut de lancer un serveur et il faut lancer ça il faut lancer les deux ok ok c'est bon donc normalement là ça devrait marcher donc on va lancer le serveur de base voilà et on va lancer le serveur live et l'aude voilà et donc là si je reviens d'un index que j'enlève par exemple ça et alors est ce qu'il faut le lancer dans le même sens ah oui non c'est ça c'est l'adresse est différente donc on va aller hop ici à la place 404 not found donc je pense pas est ce qu'il faut dans ok je réfléchis up lui ici donc lui il est là et ce qu'il faut les lancer dans le bon ordre alors hop donc je vais arrêter lui je vais lancer lui ok et je vais relancer lui après ok donc l'âge actually ça ne marche pas et si je vais sur le 8000 on a bien ça et si up oui voilà qu'est donc ça marche c'est bon donc là en fait et sur paille de charme d'ailleurs la seule chose qu'il faut faire c'est que il faut forcer le la sauvegarde parce qu'en fait pas de charme n'a pas de fin sauvegarde automatiquement et comme il le fait pas forcément toutes les secondes là vous voyez que j'ai supprimé le titre et ça n'apparaît pas donc il faut vraiment que je force en faisant comment naissent contre l'ess sur windows et là vous voyez ça va forcer en fait la sauvegarde du fichier est donc lancé le live et l'autre ok donc ça va être quand même un peu plus simple pour développer le pouvoir lisser sa tournée en arrière plan et on va pouvoir faire des modifications comme ça et voir directement ce que ça change par exemple la ici si j'enlève le boarder voilà ça n'enlève si je mets je sais pas lgé ici voilà ça va ça va rien changer dans ce cas ci puisque puisque ça ne change rien sur cette taille d'écran donc on revient avec notre nav donc qu'est ce qu'on va faire on va faire donc on a notre h 1 on a tous acquis et là on va faire les colonnes déjà donc ici donc on va faire une rangée on va faire une rangée qui va contenir tout ça qui à contenir ces deux trucs et dans cette rangée on va mettre des colonnes donc là sur la naf barre on va faire une classe on va mettre colonnes donc là en fait on a douze colonnes de disponible donc si on en met par exemple 4 ici on va pouvoir en mettre 8 de l'autre côté donc là on a notre nappe bar avec tout ça et là on à neutre ça c'est quoi s'est ajoutée l'état choqué donc je vais remettre je vais remettre du coup on va remettre une section dans ce cas-ci section si j'arrive à bien écrire on va remettre une section autour de tout ça donc ça on l'avait enlevé mon aurait pu la garder là aussi on a eu notre section avec les tâches là encore je vous dis je suis jamais trop sur est ce qu'on peut mettre deux sections comme ça où il n'y a pas un autre taxe et lantic qui serait mieux si vous voulez voir vous faites html semantic alpague up arctique inquiet dans l'article ça s arrête ça pour être bien aussi peut-être pour la place de la navigation je gardais nav quand même mail walfoot heures blonde en a pas pour l'instant section way section section et ça me semble être le plus logique on pourrait faire section et article article c'est pas vraiment des articles la même si l'article c'est pas forcément dans le cadre d'un d'un article de blog ou quoi ça peut être aussi pour d'autres choses mais mais bon là je pense que voit une section c'est peut-être plus logique ou le mail peut-être à voir donc je reviens ici pour l'instant je vais m'occuper donc des colonnes on va faire une colonne de 8 dans ce cas ci j'actualise et là ça ne semble rien changé cole 4 que lui tu as oui parce que là alors ça est ce qu'on le met à l'intérieur de la nav ou allez on va le mettre ici non non on va pas le mettre là par contre là encore vous voyez c'est ça qui m'embête un peu je vais faire un div et on va mettre la colle quatre là dessus parce que je veux garder ma collection ici le problème en fait c'est que si je mets le bouton à l'intérieur de sa vue que l'on utilise ce idée de collection pour rajouter les collections quand on ajoute une collection ici si je mets le bouton de danse havas à valeur ajoutée après le bouton donc il faut vraiment que je garde ça comme un seul bloc donc c'est pour ça que je mets tout ça à l'intérieur de ceux d'yves et voilà ici voilà donc là ça commence à prendre un peu plus forme même si ça prend beaucoup de place à huy et les ya aussi le fait que peut-être ça qui a un petit peu en mettant aussi gt r j'avais oublié que j'étais en mode en mode zoom donc on va faire un reset et ça sera déjà un petit peu mieux donc donc là j'ai je sais plus d'ailleurs on va mettre ajouté on sait plus qu est-ce qui quoi où on va mettre en place holder ici les soldeurs et on va mettre collection est ici dans le foot on va mettre un place holder qu'on va appeler tâche voilà comme ça voilà on simple ok donc c'est ça effectivement là c'est la tâche là c'est les collections si je clique voilà parfait donc on commence à avoir quelque chose qui prend forme là comme je vous disais vous voyez vous pouvez rajouter un boarder ici rajouter un boarder ici on les enlèvera après et là vous voyez que on commence à avoir un peu mieux les différents border aussi vous pouvez mettre comme je disais un par exemple un background mairie et un background qu'est-ce qu'on ad'autres ces conneries ou success ça va faire très moche mais voilà ça permet de bien voir les choses et si sur notre la place on met un déneigeur ça va être du rouge voilà on voit un peu mieux qu est-ce qui qu'est-ce qui est quoi donc maintenant on va s'occuper de la nav barre donc la nav bar là encore si on va voir dans la documentation de bootstrap il ya des trucs tout fait pour ça donc on va aller voir dans nafld bar ici alors on va faire une nasse bar qui va être verticale je pense que les plus bas les exemples colossus king vous c'est peut-être dans navette à ben ouais je crois que c'est ici ok voilà verticale donc on fait une avec flex colonnes donc nav on va mettre un classicisme flex colonnes là on va avoir des donc ça va être dans la collection ici donc là on a un bouton on va rajouter une classe avait collectionné ici je vais faire un petit peu de ménage pack voilà comme ça est ici au début on va rajouter une classe on va mettre nav items et c'est tout navy thème ouais on va on n'a pas de liens à l'intérieur donc hop on revient ok donc là on a ici c'est stylisés comme des boutons d'ailleurs je reviens la nav ouais ok navy thème nav link alors est-ce que ok on a le active ici la vie thème la ville alors est ce que on peut pas juste enlever le na'vi thèmes et garder le noble inc alors ça je vais fermer si je viens la navy thème si je men have link à la place neuve link ok oui et on n'a toujours par contre ce bouton moche donc ça c'est à cause si je fais un btm ouais alors là on voit plus rien parce que je vais revenir avec mes mais border à la place ça on va fermer on va fermer on va faire un petit peu de ménage aussi les pythons dans la pub besoin donc je vais revenir avec mémé border ça sera plus plus facile à voir finalement border border border voilà donc je sauvegarde ok voilà donc là je commence à voir quelque chose qui me plaît un peu plus et je crois navx me semble mais on avait un truc un peu mieux je regarde les groupes je crois que c'est ça ouais voilà ça ça me plaît plus ou moins à hélices troupes ok on va utiliser sa à la place donc la gt ou nav on va alors est ce qu'on a besoin de garder le flex colonnes pour le liste groupe par défaut ça a l'air d'être je vais essayé de l'enlever ouais ok ça commence à être un peu mieux et qu'est ce qu'il me dit la liste groupe a et m voilà up liste groupe haythem dans collection je vais enlever le bouton voir si ça règle le style ouais voilà ok donc là ça commence à s ok super là ça commence à me plaire et ensuite pour le active donc le active alors le active le active comment on va le faire on va faire un if donc sur 7 ouais ok alors sur le bouton on va mettre un active si la collection alors là on va avoir deux collections on va voir ce collection ici et si je reviens dans l'index on à la collection donc sur laquelle on boucle et on à la collection alors il faudrait qu'on envoie la collection cilag alors je vais revenir sur mon views faudrait qu'on envoie en fait le collection slug ouais c'est ça je vais l'envoyer ou non en fait on l'a dans là on l'a dans là on l'a dans la barre puisque là on fait la redirection je me souviens oui c'est ça on refait la redirection donc à chaque fois en fait dans la barre d adresse on aura on aura la requête enfin le collection ici donc ça on peut y accéder donc en fait ce qu'on va faire ici on va faire un if on va dire if request pour une guinguette point collection donc ça ça va récupérer ça va récupérer en fait le ca le course donc si ça c'est égal aux collections point ce legs on va mettre un active et en ferme avec endif donc j'actualise ya ça marche hélas alors oui après il va falloir gérer le changement massif actualiser bon ok donc là effectivement si je suis sûr course ça va bien et après pour le changement donc là je pense qu'il va falloir mettre un petit peu de java script javascript pour que ça puisse changer comme ça alors il faut qu'on lui mette voilà rôle table y stocker donc on va mettre rôle tab liste sur le sur lui du coup hop est ce que c'est juste ça qu'il faut non ça marche toujours pas tab liste active ok faut mettre des ied idaho akessé sadate a ok d'accord donc on va mettre des habits on va mettre un édit et un data vs togo ils expliquent pas d'ailleurs vraiment du canada stephen lee sweatt uprising moi c'est ça c'est ça y'at-il data ok donc je sais même pas si on a besoin en fait du duo aeby ont vacillé s'en aille dit on va essayer juste avec le database togo lé liste après si la pad avait dit je sais pas trop comment il va gérer ça de son côté mais on va essayer comme ça donc je reviens ici je mets ça ici je sauvegarde et la yes ça marche et voilà on a juste à faire ça donc voilà on va essayer de rajouter un autre truc pour l'électronique et puis je sais pas des parfums up et vidéos youtube par exemple ou juste vidéo donc là on commence à avoir un truc sympa tiens d'ailleurs on a deux fois supprimer la collection ok donc là on a un petit souci faudra voir ça donc ça commence à prendre forme on a les changements là on va s'occuper du des bars ici et des boutons les boutons ça va être très très simple on va venir ici on va faire pareil je vais le mettre après on va faire classer galles boutons boutons là c'est le cas là c'est le collection va faire des boutons success de toute façon par tous je crois qu'il faut rajouter bouton et boutons succès soins c'est ça et on va faire pareil ici sur le bouton donc classe égale boutons boutons success hop je sauvegarde parfait pour les inputs alors l'input whisky sont les inputs input input une peau de groupe une peau de groupes texte texte classe fins de contrôle ou ssh quoi classe forme contrôle donc on va le mettre sur le input ici on pourrait aussi un petit peu up mettre les choses à la ligne pour que ce soit plus clairement là après je suis j'ai séparé mon écran alors non c'est pas ça je voulais une lap à copier up donc classe forme contrôle c c'est bien par contre là c'est plus sur la même ligne donc là je vais faire un flex je pense et pour le 2ème input pareil on va mettre à la ligne les soldeurs et plateforme contrôle voilà et là en fait ce qu'on va faire c'est que sur les postes ici on va faire un des flex donc des flec ça permet de faire un flex boxe voilà et c'est parfait c'est ce que je voulais par défaut il va les mettre en alignement horizontale donc classe égale des flex parfait et on peut mettre si je me trompe pas un gap gap non ça marche pas semblé qu'on pouvait mettre un gap cap 2 3 4 20 à 6 bon alors lui ça marche juste un problème de rafraîchissement et c'est bon ok c'est juste un problème de rafraîchissement donc là en fait on met un gap et ça permet de séparer un petit peu les choses donc ça commence à être pas mal je pense que je vais enlever mais border parce que j'en ai plus besoin il me perturbe un petit peu hop voilà donc ça commence à être pas mal on va rajouter sur notre cantine heures ici un margin top 2 4 par exemple je crois qu'on peut aller jusqu'à 5 non si wes y voyez le live reload il semble pas forcément toujours toujours suivre des fois faut faire des petits moules fraîches mais ça commence à prendre forme est ce qu'on aligne aurait pas les choses à gauche ici alors les alignements comment ça marche déjà est-ce que ça va être sur le texte dans ce cas si vous savez être les alignements des colonnes parce que là le collection c'est un lit ce groupe ait m qu'est-ce que qu'est-ce que keith que qu'est-ce que comme on va aligner texte text align man tu l'as si l'on veut aligner au début texte start on essayait juste avec ça voyez je suis encore pas mal avec vue et ses erreurs sur certains entraîneurs donc c'est pas juste le texte parce que là on a des éléments des boutons en bloc du coup est donc là il faut à mon avis je sais pas et qu'au bout de ce tram du coup quand on fait un lit ce groupe on peut aller voir dans l'europe on peut aller voir ici liste groupe d'istres groupe qu'est ce que ça fait voilà ça fait un flex ok ça fait un flex donc du coup il faut aller voir l'alignement des colonnes donc on va retourner au dessus dans les ja route colonnes et pour aligner au début la unitems start normalement ça devrait être ça je reviens voilà oui merde ça ouais ça fait pas ce que je voulais alors en fait on va relever ça et là je vais plutôt aller ici et faire un texte left non parce que là donc si je fais un border ouais ça prend toute la place si je veux aligner mon texte à gauche sur le bouton vous voyez le css je déteste c'est toujours les prises de tête comme ça annoncé texte start c'est ça bon donc ça devrait marcher ici si je mets texte start voilà c'est bon donc c'est ce que je voulais c'est toujours ça qui est compliqué avec le css est de savoir faut bien avoir en tête le bloc element modèle non pas le bloc les modèles afin les trucs il lane où les éléments bloc queen line c'est pas encore forcément des automatismes dans ma tête la un bouton normalement c'est un bloc là on peut du coup aligner le texte sur le bouton est ce que là quand on l'a fait en fait au niveau i 6 à aligner vraiment où les tous les éléments eux mêmes au début donc en fait la taille ne prenait plus toute la taille de notre bloc ici donc nous on veut garder les blocs qui fasse toute la taille ici même et justes a aligné le texte à gauche donc ensuite on va rajouter un petit margin bottom ou margin top ici ouais sur le bouton et on va mettre ça là on va faire marque d'une top 2 voilà pour séparer un petit peu ok donc ça commence à être pas mal on a ça alors oui on va stylisé tout ça parce que là pour l'instant c'est un petit peu moche donc pour le donc ça c'est les task task ici sur le bouton pareil on va mettre une classe on va mettre une classe de boutons d'aillleurs up est là à la place on va mettre 1 - et on va mettre tous appareils on va faire un des flex et on va faire un just ifa et comme tent between voilà et et on va écarter un petit peu tout ça donc ici je pense on va mettre un ace que si je mets juste un gap 2 ou est-ce qu'il faut que je mette inde et flex et flex colonnes pour en faire un flex boxe ouais c'est ça et là dessus on va mettre aussi un margin top 2 2 pour le décoder monsieur voilà donc là ça commence à être pas mal il ya juste un truc qui me perturbe et là vous voyez c'est aussi un autre endroit on peut faire un petit border ce que l'on en fait il ya un petit décalage et je crois que c'est à cause du pays justement donc si on met un boarder là dessus non un border là dessus et si on fait un boarder aussi de là dessus vous voyez que là en fait on a le truc est collé en eau alors ça non en fait c'est pas avec ce n'est pas à cause du justified enfin c'est pas à cause de la marge parce que sur l'épée les paragraphes y en a pas je crois c c'est vraiment en fait à cause du online high tech center je crois dans ce cas ci on s'est peut-être pas là et nightend up line line management colonnes alors est-ce que c'est nightend ok c'est encore plus bas lines haythem centers ouais c'est ce que j'ai demi-centre s ouais ok donc ça ne marche pas et pourtant j'ai pas de marge en dessous parce que c'est juste un problème de rafraîchissement non qu'est-ce qui se passe j'ai pas de margin justified contento et between ça c'est pour le écarté en fait le bouton ici et ça ici alors pourquoi ça ne fonctionne pas il a été absent de terre neuve a lancé ça on à l'alignement donc sur cet axe là et ensuite l'alignement sur l'autre axe que si je fais on va essayer avec le hand pour voir si je fais end alors vrai nom je pense qu'il ya quand même un truc et que le p oui alors en fait ça doit être oui parce qu'en fait je me ça doit être j'ai mis un boarder sur le pays mais du coup si je fais un match 1-0 et pas 10 0 voilà vous voyez c'est ça c'est que là en fait avec le boarder du coup je ne vois pas là ça doit être la mare jean parce que le padding je le verrai donc je sauvegarde et là on va mettre donc la gelée me rends end on va mettre en center voilà est donc là on a bien aligné et en fait c'est ça c'est que si j'avais un padding en fait de deux par exemple la le planning on le voit à l'intérieur puisque on voit que le cadre donc avec le boarder que j'ai mis ne touche plus là dans ce cas ci je le voyais pas parce que c'était une marge donc en fait on avait une marge en dessous donc c'est bien ce que je pensais bien les gars quand même une marge sur les paragraphes après on peut voir ça aussi il ya plus facilement avec ses choix un petit peu de place ici on peut le voir plus facilement avec les outils de développement en europe si je prends cet élément p on le voit donc comme sutil ici donc vous voyez là il ya un border on n'a pas de padang et si j'enlève le marching ici je sauvegarde là vous voyez on a bien une margin de 16 donc on peut le voir aussi avec les outils de chrome ces voix là et si je la fiche vous voyez qu'on voit bien la mare jean qui est juste en dessous donc on a bien une margin en by justin margin bottom en fait de 16 donc c'est le truc que je vous disais je trouve ça un petit peu pénible on a toujours des marges en bas donc voila moi je peux faire un art d'une button 0 c'est ce que je vous disais au début comme ça on a tous qui est bien aligné donc je vais enlever mais border de debug n'enlève le boarder on enlève ça ici et voilà on retourne à ça là je peux supprimer tâche d'ailleurs je vous montrais un truc que j'avais oublié on peut faire aussi un f x comme freud ici pour dire par exemple vous voulez vous vraiment supprimer cette tâche et ça en fait ça va nous demander confirmation avant de la supprimer donc la cij clic on a un petit alerte et si je fais quand sur le ca annuler l'opération 2h tmx donc là je peut valider ou ou cliquer ou cliqué sur cannes sol est-ce qu'on a alors on est encore ce problème de supprimer la collection qui en double on va essayer de régler ça sinon sur le reste ça a l'air de bien marcher si je rajoute sa pomme poire ouais ça fonctionne bien on ajuste donc ce bouton qui en double ce bouton qui en double pas tout le temps alors c'est bizarre c'est bizarre pourquoi c'est en observant double quand on a des tas chaque essai en doute quand on rajoute des tâches ok donc c'est parce qu'ils ont là on air on l'a mis ici on va essayer de régler ça en réglera ça peut-être plus tard je vais essayer de m'assurer quand même que déjà tout fonctionne bien puisque on arrive à la fin là on a un truc qui ressemble bien à ce que j'avais en tête donc c'est pas mal alors on va vérifier le responsive voir si ça marche sur un mobile donc je vais remettre tout ça hop en plein écran donc ça a l'air pas mal ça réagit bien ça réagit bien alors quand on est sur un tout petit écran on a un petit peu de marge sur le côté est ce que est ce que est ce que on mettrait pas alors ce qu'on peut faire c'est qu'on peut faire sur le index ici on peut faire pour les on peut faire un come stay ne s aiment fluide s'il me trompe pas comme ténor je sais plus je sais plus je sais plus comment on gère les briques paint enfin les législatives avec le bund strap si je fais comme tu es nul voila quant à la wii c'est ça comme ça ne s m bridgepoint fluide alors comment le sponsor contains ouais ouais ouais ouais ok je sais plus comment on peut dire alors après là c'est peut-être aussi juste les trucs de marge je sais plus qui a dit qu'une démarche sur les containers là il met un winch 2 100 normalement n'y a pas de marche si on m'a juste ça qui me surprend d'ailleurs un petit peu si je reviens là quand tu es in a way ou est ce que je le mythique entraîneur ici si je fais un m20 comme ça voilà j'ai zéro marge j'ai un petit peu dingue encore peut-être si je mets padding 0 moi c'est ça donc là j'ai bien tout qui est collé et j'ai un conteneur et canteen leurs fluides containers fluide voilà donc la cantine le refus de vouvoyer prend 100 % de la place alors que caen ténor normal il va pas jusqu'au bout et ouais ok donc donc donc si je me souviens bien pour les responsive en fait il faut mettre donc le vous mettez le nom de la propriété vous mettez la taille des classes il met par exemple msm 4 voilà sur les sur les petites tailles d'écran on aura une marge et si j'augmente si j'augmente donc si je met par exemple mlg 0 la voilà sur les écrans plus larges on n'a pas de marge voilà on a quand même le padding mais hop hop donc là je viens sur lui comme tu ty lavoie y en a 24 de marge et si je vais sur un écran plus large là on a zéro de marche donc c'est bien ça en fait il faut spécifier le responsive ici donc bon moi je vais laisser containers sa valeur de bien marcher pour toutes les tailles d'écran donc on va laisser ça comme ça il ya juste trouver ici ici à voir ça fait quand même si j'analyse ça sur le conteneur on a quand même dit grosse marge donc on va faire on va remettre notre marge sm à 0 où on va mettre 2 ou 1 1 ça doit être pas mal voilà on a quand même une petite marge et sur les tailles plus grande à partir de large on va mettre quatre ou cinq par exemple alors ouais puis là je ma démarche par tous ouais ok je me mélange aussi des fois un petit peu les pinceaux avec avec telle wind qui qui fonctionne un peu similairement mais pas tout à fait c'est quand même assez proche de boue de strapper comme je fais beaucoup de télé lwin moi je fais pas de pas de boots sera pas sur le dock string ça me mélange pas mal donc marc jing small 1 normalement ça devrait les prendre ok donc c'est ça là on a bien une petite marge sur les petites tailles d'écran et un peu plus grande ici est ce que le seul truc qui me dérange c'est du coup le truc n'est pas centré il n'est pas centré est alors pour ça normalement effectivement si je mets un mx auto alors après là par contre je m démarche partout si je reviens avec un mx trop tôt ouais voilà ces centres est ok là ces centres et on va remettre notre mt 5 ça c'est ce qu'on veut à quai et sur les petites tailles d'écran on va dire msm 1 et voilà donc là ça me semble pas mal sur les petites tailles d'écran on a ça et après par contre alors maire c'est ça si je fais un lg ou amd auto le margin top j'en veux tout le temps peu importe la taille d'écran ok donc est-ce que ça remarche non bon j'arrive pas ce que je veux j'arrive pas ce que je veux je vais m des bois laqué parce que je sais pas si ça marche à partir des tailles d'écran sûreté lwin en fait si vous mettez md par exemple alors c'est pas md mais c'est un truc similaire je sais plus ça va à partir de la taille moyenne jusqu'à large très large etc ça va appliquer ça là j'ai l'impression que c'est spécifique à chaque taille d'écran mais s'il faut faire un lg auto etc ça me semble un peu redondant donc je comprends plus trop comment ça marche on va retourner voir peut-être ici correspondent s'ils vont après là c'est vraiment du détail ça marchait quand même bien là j'ai juste les responsive comme ténor responsive approach alors max ou it's ok bon je sais plus comment ça marche donc je vais pas passer trop de temps là-dessus on va revenir avec un mx auto et puis voilà ça va ça va faire la job mx-5 voilà et en petites tailles d'écran c'est quand même c'est quand même assez bien le mt 5 il n'a pas été pris en compte en cas voilà c'est ça petit problème de rafraîchissement voilà c'est très bien on va pas passer des heures là dessus et ça s'adapte bien à toutes les tailles d'écran donc voilà on va finir donc pas régler ce petit problème de collection qui s'affiche en double alors ça s'affiche en double j'ai l'impression quand alors là on a ok je sur les autres catégories aussi bizarres sur celle ci ça ne m'est pas ah oui alors sur celle ci ça ne m'est pas ah oui alors ça je sais pourquoi ça c'est parce que on a mis à vif voilà un ami il collectionne point ce blog est différente défaut sauf que quand on fait le gars de tasque galetas qu'ici d'important mais bien collection alors qu'est ce qui fonctionne pas ici ça j'en ai pas besoin ça j'en ai pas besoin donc collection pour un seul oeil ouais on va déjà enlevé ce cas de figure là je vais je vais enlever les problèmes on va régler un problème à la fois donc là pourquoi quand voilà donc là peu importe la catégorie on a deux fois le bouton donc ça et ça ça le fait ça le fait que quand je clique et non pas quand jacques comme j'actualise la page si je vais sur une page exact eu à lise je ne l'est pas donc ça veut dire que c'est vraiment quand on clique sur une catégorie donc ça veut dire que c'est quand on fait le guet parce qu'ici qu'on fait le render parce que dans quelle est la différence entre les deux quand on actualise donc on vient ici et enfin wendel est en fait un ami claude ok si ça si je me souviens bien ici enfin line cloud avec task et collections et donc tu as qu'ici en include ok et on le met du coup une seule fois à oui d'accord ok c'est ça je réfléchis c'est que là en mettant de tasque pourtant quand on clique sur le alors si aussi dans collection quand on clique on a bien le hb ex targets task et et et est elle à la wii c'est que l'on rajoute tout le truc ah oui d'accord ac et je commence ok je pense que je comprends c'est que là en fait on lui dit de le rajouter à la fin de ça mais en fait en rajoute tout ça donc c'est ça en fait c'est qu'on reprend tout ce truc là ah oui et puis même en fait oui ça marche pas mon truc en fait c'est ça qu'il faut il faut refaire un autre truc en fait il faut faire parce que là on réimplante en fait le taff point html à l'intérieur de tasque ici donc ça ne marche pas ça marchait en fait je pense que ça marchait quand on avait ok mais en fait si je mets le classe l'idée en fait ça ça devrait régler le problème si je me trompe pas tac comme ça en fait on va prendre effectivement tous bloc et on va l'insérer à l'intérieur ici donc ce qui fait qu'on a bien le in cloud qui va ressembler à ça que je pense que c'est bon si j'affiche ouais c'est ça que c'est bon c'est juste le haïk était plus au bon endroit parce que là du coup ils étaient là dedans donc ont réinjecté en fait tout ça à l'intérieur du classe donc en fait ça devait même faire un effet de cascade parce que on ré on remettait un audit à ce qu'à l'intérieur d'un rail dit à ce qui sera donc ça marchait pas du tout donc là voilà je vais pouvoir remettre normalement non if donc le if six collections différentes défaut hop hop donc là sur des fonds n'a pas parfait super donc tout marche je reviens là parfait super donc c'était juste ça électronique on va mettre appareil photo on va tester à 8 à la joute salle ajoute après ce bouton la haye oui mais alors c'est ça le problème c'est que du coup ça la fiche à merde alors là en fait ok je vais devoir rajouter un truc donc ça c'est qu'en fait faut faire différent quand on clique sur la collection on va cibler le task ici que je vais d'ailleurs appelé par exemple task parce que quand tu es une heure on va faire un truc comme ça tu as containers et quand on ajoute une tâche précise donc ça va être avec ce bouton là là ça va pas être task antenen ça va être du coup juste juste puisqu'il est ici ça fait juste à l'intérieur de ça donc on va mettre en haïti qui va être on va mettre task du coup tout simplement et là du coup on n'a rien besoin de changer ok donc c'est bon j'actualise hélas si j'ajoute trépied ah voilà donc c'est bon ça s'ajoute bien à la fin ouf je pensais que ça allait être je commence à me demander ce qui se passait donc lines ok ça marche si on supprime on a le hx9 lime supprimer la collection ça supprime tout bas parfait voilà ça fonctionne on peut rajouter une connexion autres on peut les supprimer au kebab à tout fonctionne je pense que c'est la fin je réfléchis si j'ai tout fait je vais revenir dans mon petit with me voir si on n'a pas oublié quelque chose parce qu'il est là donc oui donc si on avait tout fait a ajouté une collection c'est bon supprimer empêcher la joue en double on s'en va re tester si ça marche si je refais autres ça fonctionne la collection existe déjà ajoutez une tâche supprimer une tâche afficher les tâches c'est bon c'est tout bon on va essayer de tout supprimer la dans notre base de données pour vérifier que que tout marche bien si on revient 2 0 ceci je vais le supprimer hop on a plus de taches donc j'actualise viendra bien notre alors là on est sur le autres qui n'existe plus du coup je reviens sur le truc principal on à bien notre tâche par défaut autre voie la course je clique hommes poires salades et le chocolat voilà ça fonctionne tout est bon on supprime on supprime on supprime parfait tout fonctionne et ben voilà donc on a finalement été assez rapidement à lui alors je vais peut-être juste voir si je peux pas améliorée un petit peu ma sémantique puisque là comme je disais on a rajouté pas mal de div donc on a un indice principal là donc ça on peut le mettre dans un raid à l'heure pour l'instant j'ai juste 1 h 1 mais on pourrait mettre autre chose on pourrait mettre une petite une petite vignette si je vais sur flight iphone par exemple hop ici on pourra chercher to do list alors faites gaffe parce que tout doux tout doux liste là je le fais c'est un test etc après là si vous n'avez pas de licence vous n'êtes pas censés les mettre sur des sites des sites publics moi j'ai une licence avec doc string hop on va prendre celui-là on va le prendre en 32 non je veux pas le télécharger je veux juste le lien ouais ok voilà ce lien ici tac up est ce qui me l'a copié non oui je pas ok je vais aller voir si on fait un image voilà que pied alors je reviens sur mon brave ou est-ce qu'il est mon brave il m'a fermé mon brave whaou ok ok c'est bon je l'avais fermé sans faire exprès donc là on n'a pas l'image alors je sais plus où on va on va copier images adresse directement on pourra la télécharger là encore il à m ouais ok ça c'est bon et là ici je vais mettre trente deux haltes on va mettre tous dolist je reviens là que j'ai bien mon image on va le mettre en 64 la 32 c'est un peu petit on va mettre un class aygalades et flex hop voilà on va faire un line hi tech center un gap de deux hommes voient là et on va faire un margin bottom de 4 vous voilà et on va faire là encore ça m'embête le margin bottom 0 parce que là ouais je sais pas si vous l'avez vu mais on avait eu ici si j'enlève le mar d'une button 0 vous voyez c'est pas tout à fait aligner donc là j'enlève la marge est comme ça le truc est bien aligné ok parfait donc donc voilà on a une icône on a ça ouais qu'est ce que je voulais ajouter d'autres ah oui dans la sémantique donc là on a dit vous ne gardez peut-être un dif complet pour ça ça voyez c'est le genre de truc je sais pas est ce qu est ce qu ont les seins div l'appareil d'yves rossa cif oui j'ai pas envie de mettre des sections partout parce que si finalement mettre tous des sections à la place des dix ça revient un petit peu au même là on a bien une section effectivement qui est enfin wayne dans l'angoissé sans on a une section à l'intérieur d'une section donc est ce qu'on met une section 1 div je ne sais pas trop je sais pas trop ce qui est le mieux ici notre navsa c'est bon là notre formulaire pour ajouté donc ça on n'y touche pas et le dit voilà le dif pour le gros et les colonnes je sais pas si on les voit on va les laisser comme ça c'est pas grave on est trader on à neutrons rapides mène ici du qu'on pourrait mettre un mail voilà dire que c'est notre truc principal ici ou ou là à voir je vais le laisser ici on le script ben voilà c'est tout bon je vais laisser comme ça donc donc voilà on a notre notre application qui fonctionne qui est pas trop pas trop moche là on a une longue barre on pourrait on pourrait changer les colonnes là je les ai mises par défaut avec 4 on pourra mettre peut-être 3 et 5 on n'est pas obligé d'aller jusqu'à 12 ans vous voyez ça peut ça peut être restreint comme ça voilà trois après on peut faire un offset si je me trompe pas on peut faire cette colle 2 par exemple pour remettre le truc au centre ou non ces colosses 7,2 je sais plus offset offset includes up offset ah oui c'est la taille offset et non je dis ce couple oui offset juste mourir en fait on va juste mettre en scène du coup on va mettre en 9 7 2 2 donc là ça fait 5 5 et 5 ça va faire 10 donc on sera pas encore à 12 avril puis lui du coup il sais pas décaler donc il faudra peut-être refaire une rangée pour lui aussi si on fait un gros oiseau ok bon je commence à tout casser je vais pas trop embêté mais voilà sachez qu'on peut faire à 9,7 pour tout décaler un petit peu donc là il faudrait peut-être refaire le même of sait tout de mettre tout ça dans une seule rangée pour pouvoir tout décaler d'un coup pour l'instant je vais le laisser comme ça et ici on va faire un col de 6 pour le mettre un petit peu plus large voilà qu'on pourra passer là encore des heures à tous tout ajusté pour avoir quelque chose qui nous plaît je pense que là ça remplit vraiment cahier des charges en est quelque chose qui fonctionne qui est beaucoup plus jolie que ce qu'on avait auparavant là je vais faire refaire un avant/après si j'enlève le link a ici pour bootstrap ou avec ça c'est ce qu'on avait avant donc je vais faire un petit avant après hop donc ça c'était avant bootstrap et ça c'est après donc vous voyez pas grand-chose à faire quelques petites classes avec booth trappe une fois que vous connaissez la bibliothèque là vous voyez en plus moi je suis un petit peu rouillé donc ça a pris un peu plus de temps que d'habitude mais vous avez voilà la possibilité d'avoir un site qui est tout à fait présentable qui prend une dizaine vingtaine de minutes à faire et vous voyez que finalement le gros du travail dans ce cas si la ce a bien sûr été toute la partie back end la partie front tent quand on s'embête pas trop et qu'on reste sur du html du css des trucs simples comme ça sans avoir besoin de s'embêter avec du réac tous des bibliothèques immense et complexe à utiliser du javascript avec plein de trucs comme ça juste pour des applications simples quand on arrive à son bep à ne pas s'embêter justement avec tout ça ça se fait très rapidement et on a un résultat qui est quand même je pense assez agréable et voilà c'est terminé donc j'espère que ça vous a plu Outro j'espère que vous avez pu voir un peu ce processus de réflexion qui n'est pas du tout linéaire là où dans des formations plus classique où c'est très découpées on a l'impression que tout se déroule très facilement là vous voyez qu'il ya des fois on fait des choses pour créer qu'on supprime et etarras je pointe de nouveau cette cet important selon moi de se séparer du coup vraiment le backend du fontaine parce que vous voyez qu'il ya beaucoup de choses qui évoluent donc ça sert à rien de commencer à faire plein de stylisation votre application si elle n'est pas déjà solide sur la partie back end n'oubliez pas également de vous organisez vous voyez on a fait une petite piste au début c'était pas grand chose mais ça permet de garder le fil et de s'assurer qu'on ne part pas dans tous les sens et qu'on fait vraiment les choses essentielles au début et que on ne s'égare pas donc dans des fonctionnalités qui vont servir à rien et qui seront peut être supprimée par la suite donc j'espère que ça vous a plu que ça vous a permis de voir un peu ce processus de développement un peu plus naturel avec aussi pas mal de recherches dans la documentation c'est tout à fait normal on peut pas tout retenir surtout quand c'est des librairies qu'on n'utilise pas tous les jours l'important c'est d'arriver à quelque chose qui fonctionne et qui soit aussi sécurisé je pense qu'on a rempli quai des charges à ce niveau là on a une application qui responsive qui n'a pas de faille de sécurité qui fonctionne qui est interactive donc tout ce que je voulais au départ donc j'espère que ça vous a plu et que vous allez pouvoir essayer de refaire quelque chose de similaire de votre côté également n'oubliez pas si ce n'est pas déjà fait de mettre des pousses bleus et de vous abonner ça aide énormément et dites nous en commentaires ce que vous avez pensé de cette vidéo ça m'intéresse énormément de savoir en fait ce que vous avez fait différemment et d'avoir vos retours sur ce genre de vidéos un petit peu plus direct sans montage pour savoir si ça vaut le coup d'en faire d'autres sur la chaîne j'espère qu'on se retrouve bientôt abonnez-vous à bientôt et à la prochaine ciao [Applaudissements] [Musique]