Session du jeudi 16 janvier à 21:00

00:00:00 :Voilà, ça prend des notes.Quelqu'un nous rejoint ?Voilà.Bonsoir.Un truc qui harcèle.Ok.Est-ce qu'il y en a...Donc, là, ce soir, c'est sur CrispyForms.

00:00:32 :Comme je disais, sur Django CrispyForms,on va vraiment réfléchir à une chose vraiment très basique,juste par un principe de CrispyForms.Petite question.Est-ce qu'il y en a qui ont déjà utilisé Django CrispyForms ou pas, ici ?

00:00:47 :Oui ?Non.Personne, une fois, oui.Marcel, Jean-Philippe,O'Neal et JC.Oui.Vous aviez quoi à faire avec ?C'était vraiment très avancé ?Non, c'était lors d'une formation.

00:01:05 :Je crois que c'était sur LForms, à l'époque.Et en fait,le formateur avait utilisé,pour gagner un petit peu de temps,en même temps, c'était un petit clin d'œil.

00:01:19 :Mais il y a un moment,il y a peut-être six ou huit ans,donc ça a dû bouger depuis.Oui, ok, pas de problème.Et les autres ?

00:01:31 :De mon côté, c'était une découverte, en fait.Je ne suis pas vraiment très en profondeur là-dessus.Tu sais, moi non plus, mais en fait,tu vas voir, il n'y a pas besoin.

00:01:43 :Pour commencer avec.Et il y avait une troisième personne, non ?Oui, c'est ça.Moi aussi, c'était beaucoup plus genre pour des petits projets un peu basiques.

00:01:53 :Là, j'avais un ami.Parfois, je n'aimais pas trop écrire du HTML.C'est lui qui faisait du HTML.Puis pour les formulaires,je récupérais juste son code,des formulaires et tout.

00:02:02 :Puis j'intégrais des balises,des trucs de CrispyForm.Je ne me rappelle plus trop bien comment ça fonctionne et tout.Mais bon, ce n'était pas quelque chose de très important.

00:02:12 :Oui, ok.Et moi, je n'ai pas entendu la question.Donc, qu'est-ce qu'on a demandé ?Par contre,je vois ton pseudo,mais c'est comment ton prénom ?

00:02:24 :Moi, c'est Aurélie.Non, je ne t'ai pas vue en Toza alors encore.Je m'avais vue récemment en tant qu'ACN dans les derniers.Je l'ai changé pour le même pseudo que sur le Discord et que ce soit un truc.

00:02:43 :Je confirme, ACN était bien là mardi.Ok, d'accord.Non, la question c'est,est-ce que tu as déjà utilisé Django CrispyForms ?Non, jamais.Pas de problème.

00:02:59 :De toute façon, là c'est vraiment,comme je disais, du basique.On va voir les bases,ce qu'on peut faire très basiquement avec.Je vais partager mon écran déjà.

00:03:07 :Hop.C'est bon.Est-ce qu'on voit assez bien ou pas mon écran ?C'est assez gros ?C'est assez petit pour moi.C'est vrai ?Voilà, là c'est mieux.

00:03:27 :Ok.Pour moi, c'est énorme,mais ça devrait aller.Alors attendez,je vais juste lancer mon serveur.Je vais peut-être afficher une balle.Hop.Je n'ai pas un navigateur qui se cache quelque part.

00:03:43 :Mais je regarde.Ok.Vous avez vu mon super formulaire ou pas ?C'est beau, ça vous plaît comme ça ?Il est magnifique.Ok.C'est bon, du coup.

00:03:59 :Alors,en fait, Django CrispyForms,moi, par exemple,qui ne suis pas encore très front.Après,en gros,je fais des choses assez basiques.Voilà,j'arrive à me débrouiller.

00:04:14 :C'est assez basique.Par exemple,je ne sais pas,j'ai fait un site pour une personne,elle voulait que je leur pétante,donc j'ai réussi à lui faire un petit truc comme elle voulait.

00:04:30 :Mais sinon,des fois,je n'aime pas trop me prendre la tête sur le front, j'avoue.Même si,c'est bien qu'avec le front,mais en fait,avec Django CrispyForms,ça vous permet quand même de gagner du temps sur certaines choses.

00:04:45 :Alors,moi, je dis ça parce que je suis quand même beaucoup plus,en ce moment,là, je bosse pour une autre boîte aussi,en même temps,où je fais beaucoup plus de l'API.

00:04:52 :Donc, en fait,je ne fais que du backend et je n'envoie que du JSON.C'est tout.Pour elle,je ne ferai vraiment que le backend Django.

00:05:00 :Et,j'aime bien CrispyForms,parce que quand je fais un petit projet,ça me permet de faire mon CSS,en fait,mon petit rendu,quand même,assez rapidement,avec, justement,CrispyForms.

00:05:12 :Alors,basiquement,je vais,on ne va pas rester sur,comment dire,sur le HTML,si c'est en soi.Pour le projet,j'utilise Bootstrap.OK.Donc là,j'ai le CDN de Bootstrap.

00:05:26 :Tout le monde a déjà utilisé le CDN,ou pas ?Oui, oui,je m'en utilise,MaxiCode.Il y a un autre CDN ?Oui.OK.

00:05:37 :De toute façon,je ne vais pas faire ça.Bootstrap.Tac.Là,j'ai pris l'exemple pour faire Bootstrap,mais,moi,j'aime bien Bootstrap,parce que ça va assez vite pour mettre en forme,pour faire du prototype,ou,même pour des mises en forme rapides,je trouve ça vraiment génial,Bootstrap.

00:05:55 :Donc,ça va vite à installer et on peut facilement installer,donc,utiliser avec un CDN.Donc,vous avez juste à intégrer le lien,en fait,pour ceux qui ne l'ont jamais fait,je pense que tout le monde ici,à intégrer un lien CDN,en fait,dans votre head,du HTML.

00:06:12 :C'est un peu comme faire un lien vers votre CSS ou votre statique,quoi.C'est le même principe.Et pour le JavaScript,vous le mettez tout en bas de la page et mon script qui renvoie,en fait,vers,enfin,le CDN de Bootstrap.

00:06:28 :Voilà.Vous me dites,jusque-là,ça va ou pas ?Yep.Oui.Donc,en gros,j'utilise Bootstrap.Donc,là,c'est un vieux template de base.En fait,là,c'est un,pour tout vous dire,là,c'est un projet Django qui s'appelle Django Sandbox.

00:06:47 :Donc,en fait,dedans,c'est un vrai fourre-tout.Donc,c'est pour ça qu'il y a un peu de tout.Il y a du HTML,il y a vraiment un peu de tout.

00:06:55 :Mais,en gros,j'utilise le CDN de Bootstrap.Et puis,voilà,après,j'ai un petit menu.Et,en gros,je m'en sers,ce template-là,je m'en sers pour l'étendre.

00:07:07 :Et,ça,je vous montrerai peut-être un autre entourage,ce que je fais avec ça en JavaScript.Mais,sinon,j'ai des balises,en fait,des blocs qui me permettent,en fait,d'étendre mon template sur d'autres pages,avec d'autres templates HTML.

00:07:22 :Là,je considère que ça,en fait,ce n'est pas forcément vu pour tout le monde,mais c'est juste pour vous montrer le contexte,parce que là,ça va être plus crispy.

00:07:30 :Donc,je n'aurai pas le temps de revenir sur tout ce qui est blocs,machin.Est-ce que,pour les blocs,quand même,ça va,ou à quoi ça sert ou pas ?

00:07:39 :Oui.OK.Oui.OK.Donc,là,j'ai un template de base que j'étends.Donc,ensuite,ici,je vais avoir un template,justement,pour afficher mon formulaire.

00:07:52 :Et,j'étends avec mon base HTML.J'ai quoi,pour ça,du coup ?J'ai un modèle,un peu bidon,où je l'appelle item.En gros,on va avoir,du coup,un nom,un prix,un EN,une description,puis un stock.

00:08:10 :Voilà.Encore une fois,c'est une déformation professionnelle.Je viens du commerce,donc,j'aime bien ces exemples-là.Voilà.Qu'est-ce qu'on a d'autre ?On a le formulaire et la vue.

00:08:22 :OK.Donc,actuellement,j'ai,c'est là,j'ai un formulaire pour ajouter,en fait,un produit dans ma base données.Voilà.Je peux mettre le nom,le prix,l'EN,le stock.

00:08:37 :Ce n'est pas le plus important.Le plus important,ici,ça va être,du coup,la forme du truc.Donc,il n'est vraiment pas beau.Et,donc,est-ce que tout le monde,ici,se souvient exactement comment on fait pour utiliser un formulaire Django pour le rendre dans le template ou pas ?

00:08:54 :On peut en parler rapidement.Oui,si on me fait un petit rappel,ça me va aussi.Il n'y a aucun problème.Il n'y a aucun problème.

00:09:03 :OK.Alors,ici,j'ai une application que j'ai appelée Crisp,juste pour me souvenir de ce qu'il y a dedans.Donc,c'est une application Django basique.

00:09:13 :Et,dedans,il y a tous les fichiers Django,de base,entre guillemets,sauf le forms et l'URL que j'ai rajouté.Et donc,ici,je me suis dit,comme je disais,si je voulais une page,je pouvais ajouter un produit dans la base données.

00:09:31 :Pour ça,je me suis dit,je vais faire un formulaire qui va être basé sur mon modèle.Donc,pour ça,Django nous fournit une classe qui s'appelle ModelForm.

00:09:43 :Et,en fait,ici,j'ai créé un formulaire.Donc,j'hérite de ModelForm et j'utilise la classe Meta pour indiquer de quel modèle il s'agit et quel champ je veux utiliser.

00:09:56 :Ça,ça va du coup ?Oui.OK.Pour info,là,j'utilise tous les tous les champs.Alors,j'aime bien être,comment dire,mettre tous les champs que j'utilise,mais je pourrais très bien faire un un hall comme ça,ça reviendra au même.

00:10:17 :J'aime bien avoir ma liste avec tous mes champs sous les yeux.Voilà.On pourra faire un exclude,ainsi de suite.Donc,voilà.Là,j'ai mon formulaire qui est créé.

00:10:31 :Pour ça,j'ai un form.py.Ensuite,j'ai une vue et,en fait,j'importe mon formulaire ici dans la vue.OK.Donc,dans ma vue,j'ai une vue que j'ai appelée HideItem.

00:10:45 :Et,dans ma vue,pour ceux qui,là,ne se souviennent plus trop,j'initialise,en fait,quand j'arrive avec un get,une méthode get dans ma vue,vu que je ne suis pas en poste,j'arrive dans le else,j'arrive avec une instance de mon formulaire,mais vide.

00:10:59 :OK.Donc,c'est ça.Ici,je rends mon formulaire vide.Oui.Voilà.Donc,il est là,mon form,et je le rends dans le contexte.Ensuite,si jamais je soumets mon formulaire,ici,je vais passer par une requête poste.

00:11:14 :Et donc,mon form,ici,c'est la classe.Je vais l'instancier,mais,je vais envoyer les données de ma requête poste dedans.Si c'est valide,donc,c'est ça qui est bien avec la formulaire Django,c'est que Django s'occupe de la validation,donc,pour la sécurité,c'est assez cool.

00:11:31 :On pourrait se rapprocher,pour ceux qui ont déjà du REST Framework,ici,du système de serializer qui sert de validation.Donc,ici,on valide.Si c'est validé,on sauvegarde,et je fais un redirect.

00:11:43 :Est-ce que tout le monde connaît le request.pass ou pas ?Qu'est-ce que ça fait ?Non,ça ne me dit rien.Ok.Ok.Donc,ça,je l'utilise,par exemple,en général,quand j'ai un formulaire comme ça,je fais un redirect,je ne sais pas,soit vers l'index avec un message,

00:12:05 :soit vers une page où il y a la liste des instances que je crée avec un message,ou vers l'instance elle-même.Mais,on peut très bien utiliser un request.pass

00:12:15 :pour faire une redirection,en fait,vers l'URL où on est actuellement.Donc,en gros,si je valide,on va revenir sur un formulaire vide.En gros.

00:12:27 :Voilà.En gros,si je valide,on va revenir au même endroit.Voilà.C'est juste ça,request.pass.Il n'est pas forcément très connu,mais je le trouve assez pratique dans certains cas.

00:12:39 :C'est dû l'utiliser une fois ou deux.Donc,voilà.Comme je disais,on a le formulaire,la vue,et j'en étais où.Et ensuite,il faut bien un template HTML où mon formulaire,je vais le rendre.

00:12:56 :Donc là,j'étends mon base branche HTML,ce que j'ai fait tout à l'heure.J'ouvre mon bloc,je le ferme ici.J'ai mis un petit titre bidon.

00:13:04 :Et là,j'ai mon formulaire.Je spécifie bien que je suis dans une méthode post,OK.J'utilise le CRSToken qui est obligé.Je rends mon formulaire et j'ai un bouton pour envoyer le formulaire.

00:13:20 :Voilà.Donc voilà,en gros,pour la base.Est-ce que,du coup,je peux passer à la suite ?Oui,c'est bien.OK.Super.Du coup,on va pouvoir commencer à attaquer avec CRSTiform.

00:13:42 :Alors,CRSTiform,du coup,il est là.C'est Django.Je vais taper tout à l'heure déjà ici.L'installation,donc,ce n'est pas dur.C'est du pip install basique.

00:13:57 :Tac.Je crois que je l'avais installé sur celui-là.Oui,c'est ça.Je l'ai déjà installé juste avant.Une fois que vous l'avez installé,vous allez là,quelqu'un qui arrive.

00:14:12 :Celui-là.Tac.Normalement,celui-là,tac.Celui-là,je ne sais pas s'il a réussi à rejoindre.Salut,celui-là.Je ne sais pas s'il entend.Du coup,j'en étais où ?

00:14:34 :Je ne sais plus.Oui,donc,on était juste à l'installation.Il faut penser à aller dans vos settings et ici,donc là,ça,c'est mon application Crisp.

00:14:44 :Allez,salut,celui-là.Bonsoir.Hop.Il faut penser à aller installer du coup,CrispyForms ici.Donc là,vous allez le mettre dans,le renseigner dans vos settings et avec CrispyForms,en fait,vous allez utiliser ce qu'on appelle un template,en fait.

00:15:08 :Donc là,vous avez les templates Pax et donc moi,là,pour l'exemple,j'utilise Bootstrap 5.Il y a un projet où j'utilise Tailwind,par exemple.

00:15:19 :Donc,il y a Crispy Tailwind,mais là,dans l'exemple,on va prendre Bootstrap 5.Donc,vous avez le choix.Il y a Bulma aussi,pour ceux qui font du CSS,qui est sympa.

00:15:29 :Je suis allé voir une fois,je trouvais ça vachement cool.Stéphane,si toi qui es dans le fond,en ce moment,ça,c'est vachement sympa et c'est bien foutu,je trouve,Bulma.

00:15:42 :Si tu es allé voir.Voilà,petite parenthèse.Donc,du coup,moi,j'utilise le Crispy Bootstrap 5.Vous allez dedans.Donc là,on a installé Crispy.

00:15:53 :Du coup,on va l'utiliser avec un projet.Donc moi,comme je disais,j'ai Bootstrap dans mon projet.Donc,je vais utiliser Crispy Bootstrap 5.On l'installe.

00:16:05 :Normalement,je l'ai installé d'avance.Et du coup,on va le renseigner dans les settings.Normalement,c'est bon.Et il faut penser à aller ensuite,dans vos settings,toujours,à les renseigner,c'est constante.

00:16:26 :Pour que Crispy,il faut qu'il sache en fait,avec quel template il va bosser.Donc en gros,par exemple,je vais aller tout en bas.

00:16:36 :Donc là,vous dites à quel template vous allez bosser.Est-ce que c'est bon pour l'instant ?Oui,impeccable.OK.Donc là,pour moi,les settings,je n'ai rien oublié.

00:16:51 :Normalement,on est bon.J'ai le template,j'ai Crispy Bootstrap 5,Crispy Forms.OK.Et maintenant,on va pouvoir aller s'attaquer au formulaire en lui-même.Donc,il faut penser,donc ça,c'est dans la doc,il va penser,il va falloir penser aller charger un tag pour Crispy Forms.

00:17:15 :Donc, on va le charger.Donc,comme vous pourriez faire avec un Whattel ou d'autres tags personnalisés par exemple.Donc là,je vais aller,c'est Crispy Forms Tags.

00:17:27 :Tags,comme ça.Voilà.Donc,il faut penser à charger les tags.Surtout,c'est toujours après le Extend.Le Extend,de toute façon,vous allez vous prendre une erreur,sinon.

00:17:38 :Donc voilà,vous allez charger votre tag.Et,ce qui peut être sympa ici,c'est que du coup,là actuellement,je rends en fait ce qu'on appelle un forme de manière basique.

00:17:53 :Donc là,est-ce que j'ai encore mon run server ?Ici.Voilà.Donc là, c'est très basique.Et ce que je peux faire maintenant,c'est que je peux aller Stéphane,Shirama,tu te souviens comment on fait un pipe ?

00:18:09 :Je ne sais plus.Shift,option L.Shift, option L.Merci beaucoup.Donc là,vous utilisez le,attends,je le refais,Shift,pour le souvenir,Shift, option L.

00:18:24 :Merci.Oui,ça me parle ça,le pipe là.Oui,ça me parle.Voilà,ça en fait,c'est pour appliquer des filtres dans Django,souvent.Donc là,j'ai un filtre à terre,ainsi de suite.

00:18:37 :D'accord.Je dois avoir une utilisation différente.Pour parler à un prochain mentorat,parce que j'ai fait un truc sympa,qui me permet en fait,avec un filtre,de rendre les boules et un,de manière plus parlante,directement,en fait,dans le template.

00:18:51 :D'accord.Donc là,je crois que c'est,j'irai voir un exact,sinon je crois que c'est crispy ici.Donc normalement,ici,j'utilise déjà le filtre crispy.

00:19:01 :Voilà,j'ai un,j'ai un,quelque chose de beaucoup plus sympa.Ok.Enfin,ce n'est pas non plus super beau,mais vous voyez,c'est quand même beaucoup mieux que ce qu'on avait avant.

00:19:13 :Ok.Je reviens comme on était.C'était .asp.Hop.Avant,on était là.Ok.Donc là,on commence à mettre,en forme,avec ça.Donc là,c'est juste une balise toute simple.

00:19:32 :Et,je vais faire un truc vite fait.C'est comment déjà ?J'ai un doute.Je réfléchis rapidement,parce que là,ce n'est pas,on va faire un truc un peu plus fluide.

00:19:46 :Je crois que c'est un container,que je pourrais utiliser directement.Bootstrap,c'est comment déjà ?Ok.Je vais aller rajouter vite fait sur mon base.

00:19:56 :Base,base,tac, tac, tac.Le body ici.Hop.Je vais aller me rajouter un,rapidement,je fais ça.Hop.Une div,où je vais utiliser une classe.

00:20:12 :Et ça va être un container.C'est du bootstrap.Hop.Tac.Tac.Et,j'ai ma div qui se termine.Hop.Normalement,c'est ça,c'est classe container,je crois,voilà.

00:20:29 :C'est juste pour,voilà,c'est un peu plus propre ici,sur les bords,pour le responsive.Donc vous voyez,déjà,j'ai remplacé le aspect,par une balise frisbee.

00:20:41 :Pour l'instant,ça va ?Oui.C'est quand même mieux.Si vous êtes d'accord,je pense que,c'est quand même plus propre.Le bouton,il ne reste pas super beau,mais,c'est quand même plus propre.

00:20:54 :Maintenant,on va améliorer un peu le truc,et,on va aller customiser un peu le formulaire.Donc,ce que vous pouvez faire,c'est directement,dans le formulaire,avec,CrispyForms.

00:21:09 :J'ai montré que c'était sympa.On va importer,ces,CrispyForms.Il faut,importer,les helpers,et,on peut importer,le,FormHelper,voilà,c'est ça.Et,ensuite,on va,utiliser,le Layout.

00:21:30 :Donc,c'est,CrispyForms.Layout.Et,on va importer.Donc là,il y a plusieurs classes.Il y a,Layout,Row,Column,et,System.Et,après,vous pouvez même carrément,importer d'autres classes,pas plus génériques,mais différentes.

00:21:51 :Je crois que Div,il existe aussi.Div,voilà,je ne me servirai pas de Div ici,il a une vérité assez basique,avec Bootstrap.Mais,voilà,en fait,il est possible d'importer,plein d'objets,ce qui vous permet d'avoir,une certaine couleur d'attraction,sur le,sur le CSS.

00:22:07 :Donc,maintenant,on va aller,modifier,notre constructeur,de classe.Donc,c'est quoi déjà,c'est le,vous pensez aux,args,c'est ça,args,hop,et,donc,args,args,ici,avec Django,pour le constructeur,et,on va,euh,appeler l'emblème,super,hop là,tac,ouais,c'est parti.

00:22:37 :Alors,donc,euh,pas de super,donc,on va appeler,init,ici,non,on n'oublie pas de repasser,euh,nos args,non,on n'oublie pas de repasser,euh,nos args,donc,args,ici,voilà.

00:22:57 :Donc,on a appelé la méthode super,et maintenant,c'est parti,on va customiser.Donc,on va avoir un attribute d'instance,donc,euh,notre helper,qui va être le form helper,on l'instancie,ensuite,notre helper,il est où,là,hop,on va utiliser layout,et,pareil,on va instancier layout,

00:23:18 :hop,layout,ici,voilà.C'est chiant,ces messages,il faudrait que je les enlève,parce que je ne sais plus comment on fait,euh,voilà.Euh,c'est parti,donc,là,on va pouvoir utiliser tout ce qu'on a importé avant,donc,par exemple,on va faire un truc très carré,un peu à la bootstrap,

00:23:37 :euh,assez basique,mais vous allez voir que c'est plus sympa,et ça nous permet de donner un peu,euh,un rendu de ce qu'on peut faire avec,euh,avec Crispy.

00:23:45 :Donc,là,je vais avoir ma row,donc,j'ai ma ligne,dedans,ensuite,donc,là,je vais appeler les,j'ai bien le,le champ name,et donc,mon champ name,je peux lui envoyer une classe CSS.

00:24:03 :Donc,là,je vais,je vous explique juste,je vais envoyer une classe CSS qui appartient à bootstrap,qui est colmd6,je vais vous montrer après quand ça correspond,mais c'est pour du responsif.

00:24:11 :Est-ce qu'il y en a qui font du bootstrap ici,ou pas déjà ?Oui.Oui,déjà fait.OK.Non.Ça vous parle peut-être,du coup,ça ?

00:24:21 :Oui.Oui.OK.Donc,peut-être mieux que moi-même,parce que je suis au point de vous dire,je ne suis pas super CSS,ni front,mais,en fait,c'est vraiment très pratique,je trouve.

00:24:33 :Donc,c'est pareil.Donc,là,on va repartir avec l'école,le colmd6.Donc,là,on va gérer un espacement,alors,c'est chiant,horizontal.Donc,on peut,on peut reutiliser,ici,sur la ligne,un attribut CSS,ici.

00:24:52 :Donc,on a une classe CSS.Donc,pareil,c'est du bootstrap.Row,G5.Donc,voilà.Donc,là,on a une première ligne.OK.Hop,c'est parti.

00:25:07 :On va bosser sur la deuxième ligne.Donc,on recommence.Row.Voilà.Et,donc,là,on avait,donc,on a déjà mis le nom,on va prendre le stock,et la description,on la met à la fin.

00:25:21 :Voilà.Donc,là,le row.Et,donc,c'est parti.Donc,là,on va prendre le même schéma.On ne va pas s'embêter.Hop,hop,tac,tac.

00:25:36 :On avait dit que je prenais quoi ?Je prends,j'ai pris le nom,le prix,le n,je prends le stock,et,on ne va même pas avoir besoin de faire une dernière ligne.

00:25:46 :On va faire ça.On va juste avoir la description,ici,notre champ.Et,en dernier,on va pouvoir envoyer,donc,on va utiliser le submit,ici.

00:25:59 :Hop,submit.Voilà.Et,donc,ça,ça va être le bouton pour envoyer,en fait,nos,nos,notre,formulaire.Merci.Voilà.J'avais du mal.Et,après,je vais utiliser une,une classe CFS,qui appartient à Bootstrap,que j'ai beaucoup utilisé.

00:26:20 :C'est btn,et on peut utiliser btn,comme ça.Et,genre,après,on peut utiliser plein de couleurs.Success.Pour ceux qui,Bootstrap,c'était boot,boot,trap,button.

00:26:34 :Et,genre,en fait,vous avez tout avec les boutons,comme ça,voilà.Les success,c'est le nom de la récurve Marie,et comme ça,vous avez une liste de boutons que vous pouvez utiliser.

00:26:44 :Donc,j'ai utilisé des,des classes Bootstrap.Et,encore,je suis,voilà,je suis sur la 4.Ça,c'est pas grand chose.Mais,en fait,pour ceux qui n'utilisent pas trop de,de framework CSS,je trouve que c'est bien pour mettre les choses,en fait,facilement,facilement en forme.

00:27:04 :Moi,j'utilise vraiment,là,tout le temps.Donc,il y a les,les principes de Breakpoint,ici.Les MD,c'est le framework CSS,qui permet de,de s'adapter,en fait,à la taille des écrans.

00:27:18 :Il y a des pixels,ici,qui correspondent.Donc,moi,je trouve ça assez sympa,en fait.Voilà,je,il y a plein de choses,même pour les,donc,des boutons,même pour faire des cartes.

00:27:32 :Vous avez des classes toutes faites,en fait,je vais se faire copier,coller,boum,et vous customisez comme vous voulez,et vous avez vos cartes de fait.

00:27:39 :Voilà.Donc,voilà,c'est tout méchant,je peux sauvegarder.Et,par contre,il faut penser à aller modifier son,ici.Donc,là,je vais carrément rendre tout ce que j'ai fait,mon,mon,mon formulaire,custom,vraiment,full crispy.

00:27:59 :Ouais.Donc,on va utiliser des crispy form.Et,en fait,on n'a plus besoin de,de notre submic,ici,notre submic,hop,parce que,on a mis,il est intégré.

00:28:14 :Voilà,il est carrément intégré.Et,donc,s'il n'y a pas de problème,et que je n'ai rien oublié,normalement,là,on devrait avoir notre formulaire qui est,euh,copié.

00:28:26 :On va bien voir.Donc,là,on était ici.Et,voilà,vous voyez,j'ai mis un peu,la forme comme je voulais,j'ai un bouton plus sympa,je vais bien ici,euh,euh,euh,mes champs qui sont séparés,donc à chaque fois ils sont sur six colonnes.

00:28:44 :Parce que,en gros,le principe avec bootstrap,c'est que c'est découpé en douze colonnes.Donc,si vous mettez par exemple,euh,celui où,euh,le formulaire.

00:28:55 :Si vous mettez sur une ligne,6, 6,c'est bien qu'il va vous prendre 6 et 6.Voilà,il prend toute la,toutes les colonnes.Euh,c'est ça que j'aime beaucoup avec bootstrap,c'est que vous pouvez facilement,en fait,faire des choses très carrées,très propres,donc vous ne passez pas une heure

00:29:10 :à s'entraîner.Euh,donc voilà,donc là,par exemple,j'ai,j'ai,j'ai joué un peu avec mes,mes champs.Et,alors attendez,tac.Et après,vous pouvez vous amuser à toucher à vos,à vos classes CSS,envoyer des classes CSS,euh,personnalisées,et ainsi de suite,quoi.

00:29:31 :C'est normal que le,euh,le,l'input de price,il soit un peu plus,peut-être,il soit un peu plus petit que les autres.C'est à cause de la classe de l'euro qu'il a,que tu as rajouté,le G5,il n'y a pas sur la deuxième,du coup,ils ne sont pas exactement alignés.

00:29:46 :Et vous voyez,en fait,ouais,ça gère ton espacement,ça.Merci.Et j'ai,en gros,et je n'ai pas géré l'espacement,donc là,si je gère mon espacement,hop,j'ai mon row,non,c'est rox,row,G5,hop,et normalement,ici,voilà.

00:30:07 :Donc,ça permet,en fait,de gérer son espacement sur votre formulaire.Qu'est-ce que je voulais dire ?Je voulais rajouter quelque chose,je ne sais plus,j'ai oublié,ici.

00:30:23 :Dans la page,en soi,ça génère un CSS sur le navigateur ou c'est vraiment un truc à part ?Non,après,tu peux aller vérifier dans ton,c'est où ?

00:30:37 :Tac,c'est ici.Tu peux aller vérifier dans le navigateur,en ta tour,dans ton,hop là,c'est où ?Et là,hop,on forme.Tu vois,j'ai mes row G5 ici et j'ai mes colonnes.

00:30:50 :Comment on fait déjà si on veut aller voir ici ?Après,vous pouvez vous amuser à modifier les,comment dire,les breakpoints ici.Je ne sais pas si on fait du,c'est quoi déjà ?

00:31:04 :C'est du XL.Donc,si je fais,par exemple,ici,XL.C'est pas LG plutôt ?C'est LG,non ?Pour le grand ?Alors,il y a LG,XL et XL,peut-être,mais LG,ici,les deux,de toute façon,alors,LG,ça doit être un genre 900 et quelques pixels,

00:31:25 :XL,c'est 1200 pixels et après,plus gros,c'est XL,je crois,c'est 1400.Après,voilà,par exemple,ici,j'ai changé la,je l'ai mis en large,voilà.

00:31:40 :Et donc,on peut,comme ça,s'amuser à modifier,ici,les tailles et on peut aller s'amuser,après,à modifier,du coup,ici,c'est là.Dire,si on est sur un mobile,sur un petit iPhone minuscule,tac,on est bien sûr,12 colonnes.

00:31:58 :Donc,vous pouvez aller vérifier un peu votre,responsive.Donc,voilà,un peu ce que je voulais vous montrer ce soir,avec Bootstrap,avec,oui,entre guillemets,Bootstrap,mais avec,Crispy Forms,en fait.

00:32:12 :C'était vraiment,ce principe,où vous pouvez carrément aller jouer avec le constructeur de la classe,et envoyer directement,des rows,des colonnes,et,vos classes CSS.

00:32:20 :Mais,vous pouvez évidemment,faire beaucoup plus de choses,avec,mais déjà,ça,c'est une bonne base à avoir,et après,vous faites quasiment ce que vous voulez,quoi.

00:32:30 :Donc,vous pouvez faire du formulaire,avec des conditions,faire,je crois qu'il est impossible de faire du formulaire imbriqué,du formulaire,donc,les conditions,je l'ai dit,enfin,il y a plein de choses possibles à faire,et,vous pouvez même jouer,jouer avec le front,en même temps.

00:32:45 :Avec JavaScript,si je ne fais pas de bêtises.Donc,voilà.Est-ce que,ça va,ça vous a plu,ou,vous connaissez déjà tout ça,ou...

00:32:55 :Non,c'est bien,c'est bien.Non,voilà.Donc,en fait,ça permet de passer comme,on avait avant,quoi,juste,si on,ça,si on supprimait,qu'on n'avait pas notre,CrispyForm ici,ni rien,un aspect,ça,en fait,ça vous permet,si,vous voulez,en,quand même,de manière assez rapide,

00:33:21 :de vous construire un formulaire,et rendu en front,assez propre,quoi.C'est ça que j'aime bien,en fait,avec CrispyForm.Je ne sais plus,il est où,mon truc ?

00:33:32 :Il est là.Silas,tu avais une question ?Oui,en fait,moi,je,bon,disons que,je vais appliquer du,du,Javascript,par exemple.Est-ce que c'est possible avec le CrispyForm sur mes champs,par exemple ?

00:33:49 :Disons que le champ Price,Name,je vais appliquer un comportement en Javascript,je ne sais pas.Tu peux,enfin,Jango,CrispyForms.Tu peux t'amuser,tu peux aller t'amuser avec le Javascript.

00:34:02 :Alors,dans la doc,est-ce qu'ils en parlent ?Donc là,ils nous parlent carrément de Ajax et de validation.Tu peux faire vraiment des trucs assez poussés,et,alors,attends,je ne sais plus où j'avais vu,c'est Jango,CrispyForms,et,si je mets Javascript,peut-être.

00:34:21 :Euh,ouais,alors,voilà,ça,c'est un truc encore assez violent.Ouais.J'avais vu un truc où le mec utilisait Jango,CrispyForms,et HTMX en même temps.

00:34:35 :D'accord,donc,OK.Euh,je ne sais plus ce qu'il faisait avec celui-là,et donc,qu'est-ce qu'il faisait ?Euh,c'est quoi ?C'est,pour,pour celui-là,il peut toujours créer un fichier statique pour le JS,et puis,manipuler,euh,les,soit les classes ou les identifiants indirectement.

00:34:58 :Ouais,tu peux.OK,d'accord.Donc,il faut qu'elle fonctionne des,des attributs,en fait.Euh,soit ID ou classe,je ne sais pas.Tu peux,tu peux,tu envoies tes classes,et même,et,tu t'envoies,tu peux carrément envoyer tes classes,et en plus,où c'est encore plus fort,

00:35:21 :tu peux,euh,carrément te créer des,des trucs,et aller te créer des,des templates,euh,custom et tout.Non,vraiment,c'est vachement poussé.Je pense que les mecs qui ont fait la librairie,là,ils sont chauds,quoi.

00:35:37 :C'est,ils ont fait plein,plein de choses.Ah,non,c'est,c'est ultra complet.Et j'ai ça,donc je ne l'ai pas encore expérimenté,mais le mec,lui,carrément,il va utiliser CrispyForms,et il va utiliser un truc que je ne connais pas du tout,moi.

00:35:56 :Ouais,je l'utilise,en plus de moi.Je m'étais promis de regarder la vidéo de Thibaut,où il fait un,un défi,euh,il code en live,là,et il utilise,euh,HTMX,et,euh,alors,ce n'est pas Django,c'est l'autre,le plus petit,j'ai oublié le nom.

00:36:16 :Flask,il prend Flask.Flask,voilà,c'est ça.Et,ouais,c'est,c'est,oula,c'est vraiment sympa à utiliser,genre,euh,je n'ai pas un run serveur,si,je l'ai là,hop,tac,euh,j'ai un,c'est mon,je suis en mode test,je vais vous montrer un truc,je vais aller sur mon admin,

00:36:41 :hop,tac,tac,juste pour le fun avec HTMX.On change de sujet,là,on n'est plus sur les formulaires,mais,c'est juste pour le fun.

00:36:51 :Imaginez,ici,j'ai des clients,euh,j'ai des clients,j'en ai un qui s'appelle Microsoft,par exemple,voilà,je suis une star,je bosse pour Microsoft,et,j'ai plusieurs projets pour lui,j'ai un projet,un projet ici,euh,voilà,ainsi de suite,et,j'ai plusieurs services dans les projets,voilà,

00:37:11 :euh,là,je n'en ai pas ici,je me fais tous facturer,voilà,j'ai un service pour lui.En gros,là,l'application,j'ai mes clients,je bosse sur des projets pour eux,et,à chaque fois que je fais un truc,je n'ai pas une journée,je me note,par exemple,

00:37:27 :mes horaires,je dis,j'ai bossé tel jour,j'ai passé tant de temps.En fait,avec HTMX,vous pouvez faire un truc qui est vachement cool et assez rapide,ok,donc,là,par exemple,je parle de Microsoft,j'aimerais bien retrouver tout ce que j'ai fait pour Microsoft,donc,de manière dynamique,

00:37:43 :vous voyez,hop,je tape micro,et ça me le trouve direct.Excellent.J'avais un sujet,c'est de la jaques derrière,en fait.Ouais,ouais,carrément.

00:37:54 :Ça s'appelait test,et en fait,ouais,c'est de la jaques qui tourne derrière,ok,et,ça,je vais vous montrer le code,mais,ce que j'allais dire,ce n'est pas très compliqué à faire en soi.

00:38:08 :Il est où mon code ?Il est là,tac,en gros,que je retrouve la page de ce projet-là,euh,mince,tac,j'ai fait de la connerie avec mon truc.

00:38:21 :Hop là,voilà,donc,j'étais où ?Hop là,donc,j'étais sur la page de recherche,donc,dans Customers,et j'avais rajouté une page qui est dans mes templates,ici,et je l'avais appelée Search,il me semble.

00:38:44 :Voilà,donc,là,ici,je me souviens,c'est mon projet perso,la honte,en plus.Donc,j'ai ma page de recherche,ici,j'ai un petit formulaire,et ici,j'ai un placeholder,et en fait,voilà,j'utilise des balises,euh,HTML,qui vont cibler un,un,un template,un,comment dire,un template,

00:39:09 :un composant,et,en fait,ce qui va le déclencher,ici,en fait,et,en gros,et,en gros,ça va aller mettre à jour ça.

00:39:21 :Donc,là,j'ai les résultats de mon,euh,en fait,c'est les résultats,ici,ça va aller mettre ça à jour,de manière dynamique.OK ?

00:39:31 :Et donc,pour ça,j'ai des vues,donc,là,j'ai ma vue,j'ai ma,euh,j'ai ma vue de recherche,c'est celle-là,si je dis pas de conneries,c'est ça,j'ai ma vue,j'ai mes résultats,donc,j'utilise ici,donc,j'envoie une variable,je vais aller chercher,en fait,donc,avec ma get,

00:39:53 :ici,vers ma recherche,donc,avec Django,il est possible de faire ça,ici,de mettre tout à non,en fait,donc,je crée mes variables,et je mets des,j'envoie avec la,l'ORM tout à non,tout est à zéro,et si j'ai une recherche,ici,je vais aller faire un filtre,

00:40:10 :et je vais l'utiliser,ici,pour les clients,les projets,les services,les factures,et,voilà,donc,en gros,tout simplement,enfin,simplement,s'il y a un peu,un petit peu de boulot,mais franchement,c'est super rapide à faire,voilà,c'était la petite,c'était juste pour vous montrer un petit peu HTMX,

00:40:31 :ce que vous pouvez faire,donc,j'ai fait ça,ou,je pense pas qu'il marche,mais,je peux vous montrer un autre truc avec HTMX,je l'ai mis dans,quoi,que j'ai fait,c'était un projet,quand j'étais,vraiment débutant,je sais plus,je veux voir,je sais plus si je l'avais relancé,

00:40:52 :le truc,je ne sais plus,si je l'avais relancé,ce projet là,on va tester,hop,on va essayer de faire un run server,mais je suis pas sûr que ça,ouais,non,ouais,non,je l'ai pas relancé,il faudrait que,que je relance,non,c'est dommage,j'utilise du HTMX,

00:41:13 :en fait,pour rafraîchir,hop,je regarde juste,si je suis dans l'environnement,oui,python,ah,non,je ne suis même pas dans l'environnement,c'est bizarre qu'ils mettent un vent,l'environnement,il n'est pas là,je vais peut-être pouvoir le relancer,rapidement,oh,j'ai mon projet,ma RPG,il était où,

00:41:32 :est-ce que j'ai un environnement virtuel,là-dedans,ouais,je l'ai,c'est bizarre,je retente vite fait,peut-être que je vais pouvoir le relancer,en fait,j'ai dû le relancer,si je peux vous montrer,à quoi ça ressemble,vite fait,ce que j'avais fait,which,python,ouais,ça devrait peut-être marcher,

00:41:49 :du coup,enfin,c'est ce que j'ai fait,qu'est-ce qu'il me fait,ah,c'est normal,c'est normal,je suis dans le dossier,hop,et si je fais,python,manage,run server,voilà,c'est normal,c'est normal,je suis dans le dossier,hop,et si je fais,run server,oh,il se lance,

00:42:11 :mon dieu,je ne pensais pas que je l'avais relancé,je vais essayer de le reconnecter,mais je ne suis pas sûr,c'était quand j'étais,entre guillemets,étudiant,j'aimerais bien me le remettre,et le sortir un jour,ce projet-là,donc,par exemple,ici,donc,je dis que je veux jouer,

00:42:26 :alors,j'ai déjà une partie en cours,je vais l'abandonner,abandonner,hop,donc,j'ai envie de jouer,donc,je choisis,en fait,en gros,ici,c'est un peu genre,en mode post-apo,là,c'est un peu mode médiéval,tac,en gros,donc,à chaque fois,j'explique,j'ai une histoire qui se met en route,

00:42:48 :ainsi de suite,ici,il y a eu un cataclysme,donc,en gros,maintenant,c'est la merde,et on peut choisir,on va jouer,en fait,une famille,et on choisit soit le mec ou la fille,hop,par exemple,je prends elle,tac,donc,je vais dans l'inventaire,et par exemple,

00:43:08 :ce que je fais,c'est que,ici,si je prends,par exemple,une bouteille d'eau,je sais que ça va me rajouter 20 en vie,donc,là,la vie,elle est de 90,voilà,si je clique dessus,ça me met 110,en fait,ça ne change pas toute la page,

00:43:25 :ça,c'est htmx,ça va juste aller me mettre à jour les parties dont j'ai besoin,voilà,et ça m'a mis à jour ici,donc,ça m'a mis un message,et pareil,donc,là,je peux bien aller voir,il peut y avoir des combats,si j'attaque,une première fois,je crois que ça recharge,

00:43:41 :peut-être,voilà,ici,ça me met ce qui s'est passé,maintenant,si j'attaque,si je regarde la vie des personnages et tout,bon,lui,il a perdu,donc,c'était rapide,on va reprendre un peu compliqué,donc,là,je fais des choix,donc,l'histoire se modifie en fonction des choix,je continue,

00:44:02 :tac,donc,là,je peux résoudre une énigme,je peux résoudre une énigme,et,si j'arrive à la résoudre,tant mieux,j'ai gagné une arme,si je perds,je ne l'ai pas,donc,là,je ne sais plus,c'est quoi,euh,ok,donc,ça,pour moi,c'est la radiation de tête,

00:44:23 :j'ai mis ça,donc,radiation,c'est A,hop,et ça me dit bien,j'ai gagné une machette,et donc,là,vous voyez,hop,maintenant,je suis équipé,et en fait,ça ne me recharge pas toute la page,parce qu'avant,une fois,j'avais fait une version,où vous reveniez tout en haut de la page,

00:44:42 :ça rechargeait tout le temps,et c'était assez chiant,et maintenant,je n'ai plus qu'à aller leur dire,hop,j'attaque,j'ai mis des dégâts de feu,donc,là,pendant trois tours,il va perdre trois dégâts en plus,parce que ma machette,elle est brûlante,je rattaque,et voilà,ça ne recharge pas toute la page,

00:44:58 :ça fait baisser la vie comme ça,et donc,ça,ça ne rechargeait que les éléments,que vous voulez de votre page,voilà,voilà,en gros,excellent,je ne sais pas,si vous êtes convaincu,avec HTML,mais,moi,ça fait partie,des choses,que j'aimerais bien,comprendre,effectivement,ouais,non,

00:45:19 :c'est vraiment pratique,franchement,ça permet,en fait,de faire des trucs,vachement cool,cool,sans,sans faire du,du javascript pur,en fait,c'est un truc,avec HTML,c'est,vous passez,par des balises HTML,en fait,en gros,sinon,il faut aller écrire,dans le,dans le dom,là,

00:45:42 :document,object,là,je ne me souviens plus,des termes exacts,mais,ouais,c'est chaud,bah,tu envoies ton script,ouais,mais,après,c'est une librairie,c'est quoi,c'est un,c'est un,après,il y a un attaque,ici,pourquoi t'as pas,j'ai un bug?

00:46:12 :Je peux cliquer au moins,ouais,ah c'est bon,html,c'est comme un framework,en fait,t'as le site,t'as la doc,et tous,il te dit en gros,comment,ça fonctionne,et puis ils te disent,en gros,pour l'installer,un peu comme avec bootstrap,mais,ils disent,installer comme ça,

00:46:32 :utiliser tel attribut,donc,il y a les triggers,qu'est-ce qui va déclencher,en fait,tes changements,et ainsi de suite,voilà,par exemple,tout à l'heure,pour mon moteur de recherche dynamique,j'utilisais un KeyAptionJet,ici,donc,c'est assez fou,en fait,ce truc-là,j'ai halluciné,mais moi,ça fait plusieurs fois,

00:46:52 :du tout,je vois,ça parle de l'html,je me dis,mais qu'est-ce que c'est?Il y a trop de trucs.Ouais,il y a trop de trucs,je suis d'accord,franchement,s'ils avaient le temps,c'est pareil.

00:47:06 :Il y a moyen d'y passer sa vie.Ouais,dans le dev,ouais,c'est ce que je me dis.Moi,j'ai arrêté de coder,il y a 5 ans,pour raison parentale,maintenant,je m'y remets,j'ai l'impression d'avoir perdu tellement de,tellement perdu,il y a tellement de trucs qui sont sortis,

00:47:22 :je suis un peu perdue.Ouais,t'arrêtes de bosser.C'est ça,il va falloir faire des choix.Pas tout faire.Non,il faut faire des choix,moi,je sais que j'ai fait le choix que j'ai pu faire.

00:47:33 :Ouais,les choix,généralement,c'est les entreprises qui le faisaient pour moi.Bon,on utilise ça,ok,on fait ça.C'est un peu ça,même moi,pour moi maintenant,c'est que là,chaque mois,mon choix,c'est Django,Restroom Work,vraiment que du back-end,parce que ça recrute à mort et que là,

00:47:53 :il y a une boîte pour laquelle je bosse,et je ne fais pas de front,du coup,je passe mon temps à faire ça et je ne fais quasiment pas de front et quasiment plus beaucoup,même,allez,je fais 99% de back-end et 1% de front de temps en temps

00:48:05 :juste pour en parler,comme ce soir.Sinon,je n'en avais pas fait depuis 5-6 mois.Ouais,mais si j'avais le temps,c'est clair que j'en ferais plus.

00:48:15 :Je ferais plus de choses,je pense.Ouais.Donc,voilà,j'espère que ça vous a plu.On a un peu bifurqué l'explication de l'HTMX,là.Ce n'était pas prévu,mais...

00:48:28 :Petit grand pk.Voilà,ouais.Mais j'espère que ça vous a plu.Ouais,super.Ouais,top.Ben,écoutez,s'il n'y a pas de questions,moi,je vais arrêter là.

00:48:44 :Je vais arrêter l'enregistrement,d'ailleurs.Et s'il n'y a plus de questions,du coup,bonne soirée à tout le monde et merci d'avoir été là,c'est vraiment cool,comme d'hab.

Session du 16 janvier 2025 à 21h00

Deviens membre Premium magic_button

Premium

Session de mentorat Django Crispy Forms

Rechercher sur le site

Formulaire de contact