⌘K
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- groups La communauté
- forum Questions
- live_tv Mentorats
Formations
Articles
Communauté

La certification qualité a été délivrée pour la catégorie d'actions « Actions de formation ».
⌘K
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- groups La communauté
- forum Questions
- live_tv Mentorats
Formations
Articles
Communauté

La certification qualité a été délivrée pour la catégorie d'actions « Actions de formation ».
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte personlive_helpToutes les questions

Thibaut44300
19 avril 2023 - 19 avril 2023 à 9:41
checkConversation résolue
6 réponses
probleme pendant l'affichage de ma vue d'accueil du site e-commerce
Ma vue s'affiche bien à part mon image, j'ai bien revu la vidéo et j'ai bien modifier le fichier settings , urls et mis mon dossier products qui contient mes …
00:00:00 :Maintenant qu'on a une page d'accueil, on va vouloir afficher les produits de notre boutique sur cette page d'accueil.Donc la première chose à faire, c'est de récupérer ces produits.
00:00:08 :On va le faire ici dans la vue.Donc déjà, il faut importer la classe Product qui va me permettre de récupérer les produits dans la base de données.
00:00:16 :Donc on va dire from store.models import Product.Et à l'intérieur de ma vue ici, je vais utiliser cette classe Product.Et puis on va utiliser le manager object, qui est le manager par défaut, qui me permet de récupérer les produits.
00:00:30 :Donc là, on va utiliser all, ce qui me permet de récupérer toutes les entrées de la base de données.On pourrait utiliser d'autres choses, par exemple filter, pour filtrer les éléments qu'on souhaite récupérer,en indiquant par exemple la quantité.
00:00:41 :Donc on pourrait dire stock et récupérer uniquement les produits qui ont au moins un élément en stock, etc.Donc ça, c'est des options de filtres qu'on ne verra pas pour l'instant.
00:00:49 :Là, on veut juste récupérer tous les produits, donc quelque chose de très simple.On va récupérer ça dans une variable que je vais appeler Product.
00:00:55 :Et on va la passer au contexte de notre render ici.Donc le contexte, c'est le troisième paramètre ici.Vous n'êtes pas obligé de le spécifier, sinon vous pouvez mettre contexte égal, mais on peut juste le laisser comme ça.
00:01:06 :Et par défaut, le troisième argument que vous passez après request et le fichier HTML, ça va être le contexte.Donc moi, pour que ce soit bien clair, je vais le préciser.
00:01:14 :Je vais mettre le nom du paramètre, donc contexte égal.Et je vais mettre un dictionnaire.Et donc dans ce dictionnaire, on va avoir la clé et la valeur.
00:01:21 :Donc on va avoir une clé Product.Et on va passer notre variable Product, qui est égale à tous les produits que l'on a récupéré de la base de données.
00:01:30 :Donc là ici, on pourrait mettre n'importe quoi.On pourrait mettre là encore Patrick.C'est juste qu'il faut qu'ensuite, on utilise ce nom ici dans notre fichier d'index.
00:01:37 :Donc moi, je vais laisser Product.Et dans le fichier index.html ici, je vais créer une boucle qui va boucler à travers ces produits.Puisque là, on va récupérer plusieurs produits, même si on n'en a qu'un pour l'instant dans notre base de données.
00:01:49 :Donc quand on utilise All ici, on va récupérer un query set qui va être un ou plusieurs produits.Ou zéro si on n'en a aucun.
00:01:55 :Mais dans ce cas-ci, on en a au moins un.Donc ce que je vais faire, c'est une boucle.Là encore, on utilise le langage de gabarit.
00:02:01 :Donc avec la collade et le pourcentage.Et ensuite, c'est assez similaire à une boucle for avec Python.Donc for product in product.On ferme notre balise ici.
00:02:10 :On va tout de suite fermer la boucle for.Donc end for comme ceci.Donc là, c'est nécessaire de fermer cette boucle for.Contrairement à ce qu'on a avec Python.
00:02:18 :Puisque avec Python, tout est basé sur l'indentation.C'est l'indentation qui fait que Python sait quand est-ce qu'une boucle est terminée.Dans un fichier HTML, comme on n'a pas cette logique d'indentation,il faut préciser avec ces balises de fin,comme on l'a fait avec le end block ici,où se terminent les différents éléments.
00:02:34 :Donc à l'intérieur de cette boucle for ici,je vais pouvoir boucler sur chacun des produitsque je vais récupérer dans cette variable product.Je vais pouvoir afficher les informations.
00:02:44 :Donc on va faire une balise h2 pour afficher un titre.Et on va utiliser cette fois-ci les doubles accoladesqui nous permettent d'insérer des éléments, donc des variables.
00:02:51 :Dans ce cas-ci, c'est la variable product qui nous intéresse.Et donc ça, ça va tout simplement correspondreà une entrée dans notre base de donnéesqui est basée donc sur notre fichier model.
00:03:00 :Donc si je vais dans mon store, dans models,ça va être l'équivalent d'une instance de ce produit.Donc on va avoir accès à tous les attributs ici que l'on a créésà l'intérieur de notre fichier HTML.
00:03:09 :Moi, ce qui m'intéresse ici, c'est le nom du produit.Donc je vais mettre product.name tout simplement.Ensuite, on va afficher l'image.Pour ça, je vais faire une balise image, donc img.
00:03:19 :En source, on va aller récupérer le thumbnail.Donc là, n'ayez pas peur.La coloration syntaxique, c'est normal.C'est parce qu'on a les guillemets.Donc c'est bien important de laisser les guillemets.
00:03:28 :Et là, les accolades sont en vertpuisqu'on est à l'intérieur d'une chaîne de caractères.Mais ça ne pose pas de problème.Cette expression ici va bien être interprétée correctement.
00:03:36 :Donc là, ce qu'on souhaite, c'est afficher l'image.Donc l'image, elle est dans thumbnail.Et thumbnail, ça va nous retourner un objet image.Donc un objet image field.
00:03:44 :Donc nous, ce qu'on veut, c'est récupérer l'URL de l'image.Donc on va tout simplement faire thumbnail.url.Et en texte alt, on va mettre tout simplement product.name.
00:03:52 :Donc on remet le nom du produit.Pour le texte alt, qui est en fait une description de l'imageau cas où cette image n'est pas affichée.
00:03:59 :Ou pour, par exemple, des gens qui sont aveugleset qui ne voient pas les images.Donc sur notre site, ils vont pouvoir avoir la descriptionde l'image grâce à ce texte alt.
00:04:07 :Donc là, on rentre plus dans le HTML.Mais je préfère quand même vous expliquer de quoi il s'agit.Donc on a notre boucle, on a nos produits.
00:04:13 :Et normalement, si je retourne sur la page de la boutiqueet que j'actualise, je vais bien retrouver le nom du produit.Et pour l'instant, vous voyez, on a juste le alt text.
00:04:22 :Donc ce fameux texte que l'on a mis dans le HTML.Et on n'a pas l'image.Donc ça, c'est normal.Et là, il va falloir rajouter des éléments dans le fichierqui ne sont pas forcément très clairs, très explicites.
00:04:32 :Tout est expliqué en détail dans la documentation de Django.C'est vraiment quelque chose que vous faites une fois.En fait, ce qu'on va faire, c'est qu'on va rajouterdans les URL ici, quelque chose qui va nous permettrede servir les images statiques, donc les fichiers statiquesà l'intérieur de notre environnement de développement.
00:04:48 :Donc ce qu'on va faire, c'est qu'on va le rajouteraprès URL Patterns.On va concaténer cette liste avec un plus.Et on va utiliser static,qui est quelque chose qu'il faut qu'on importe.
00:04:57 :Donc là encore, on va utiliser la puissance de PyCharmpour qu'il nous trouve où se trouve cette fonction static.Et elle se trouve dans django-conf-url-static-static.
00:05:06 :Donc je clique là-dessus, static.Et donc cette fonction, il va falloir lui passer deux élémentsqu'on va rajouter dans le fichier de settings.Donc le premier élément, c'est media-url.
00:05:16 :C'est tout simplement l'URL que vous allez avoirdans votre navigateur.Donc là, on va mettre slash media slash.Et en fait, ce que ça veut dire ici, c'est tout simplementque quand on va servir des fichiers statiquesdans la barre d'URL, on va avoir le nom de notre site,
00:05:29 :slash media slash, et ensuite le chemin vers l'image.Et la deuxième variable qu'on va devoir définir,c'est media-route.Et cette fois-ci, cette variable, c'est tout simplementle dossier dans lequel on va stocker les médias.
00:05:41 :Donc on va concatener notre dossier de base, base-dir,et dans mon cas, je vais le mettre dans un sous-dossierque je vais appeler médias.C'est ce qu'on fait généralement, mais là encore,vous pourriez choisir un autre dossier.
00:05:50 :Si on retourne dans la structure de dossier,vous voyez que pour l'instant, on a notre dossier productqui va contenir les images que l'on a uploadéessur l'interface d'administration.
00:05:59 :Donc ça, c'est parce que dans models ici,on avait spécifié qu'on voulait les mettredans un sous-dossier product.Et nous, ce qu'on dit avec ça ici,c'est qu'en fait, on va devoir déplacerce dossier product dans un dossier média.
00:06:09 :Donc comme ça, tous nos dossiers de médias,tous les fichiers statiques qu'on va uploader sur notre siteseront bien rangés dans un dossier média.Donc ça permet de mieux organiser les chosesparce qu'imaginez qu'on ait d'autres modèlesavec des dossiers ici.
00:06:20 :Eh bien, on n'a pas envie d'avoir plein de dossiersdirectement dans l'arborescence ici.Donc comme ça, tout va être regroupédans ce même dossier média.
00:06:27 :Donc tout ça, on va devoir le préciserà l'intérieur de URL, donc à cette fonction statique.On va lui passer en premier le média URL.
00:06:34 :Donc il va falloir les importerdepuis le fichier de settings.Donc pour ça, on va importer les settings.On va dire from shop import settings.
00:06:41 :Et ici, on va spécifier en premiersettings.mediaURL.Et en deuxième, on va spécifier settings.mediaRoot,qu'on va passer au paramètre documentRoot.Donc documentRoot égale settings.mediaRoot.Et on va devoir déplacer égalementces images pour les afficher dans un dossierqu'on va appeler média,qui correspond au dossier qu'on a spécifié ici.
00:07:02 :Donc je vais créer ce dossier dans Docshop.Clique droit, new directory.Je l'appelle média.Et je vais prendre les products iciet je vais les déplacer tout simplementdans ce dossier.
00:07:11 :Là, il va me demander si je souhaitechercher des références pour pouvoirmodifier les chemins s'il faut.Alors je décoche tout çaparce que je veux juste tout déplacersans qu'il fasse de search and replace.
00:07:21 :Et je vais également décocherl'open in editor puisque je ne veux pasouvrir les fichiers après coup.Donc là, on a tout déplacé.On a bien média, products.
00:07:28 :Et ça va me permettre d'afficherdonc les images.Donc je retourne sur mon site.J'actualise.Et là, vous voyez qu'on a bienl'image qui s'affiche.
00:07:36 :Alors elle est énorme.C'est une image très très grande.Donc ce qu'on va faire également,c'est rajouter dans le HTML,dans index.html ici,une petite ligne de CSSqu'on va mettre directement en inline.
00:07:47 :C'est vraiment juste pour fixer çatrès rapidement.Normalement, on le ferait avec un fichier CSS.Mais pour l'instant,on va faire ça directementavec un style inline.
00:07:54 :Donc je dis max width à 250 pixels.Ça me permet comme ça d'avoir une imagequi ne va pas prendretoute la largeur de l'écran.
00:08:00 :Donc on a bien notre imagequi est servie.Et si je fais un clic droit,open image in new tab,vous voyez qu'on a bienle chemin versslash media slashet ensuite product sneakers 5.jpg.
00:08:10 :Et pour vous montrerce que je vous disaisavec le fichier de settings,si à la place ici,je mets Patrick.Alors pas ici,pas dans la variable média rootparce que là,il faudra modifier le nom du dossier.
00:08:19 :Mais dans média URL,si je mets Patrick,que je reviens sur mon site,j'actualise.L'image est toujours là.Mais si je fais open imagein new tab cette fois-ci,vous voyez que l'URL,cette fois, c'est Patrick.
00:08:31 :Donc voilà pour la distinctionentre les deux.Média URL, c'est vraimentau niveau de votre navigateur,l'URL de l'image.Et média root,c'est l'endroit,donc le dossierdans votre arborescence de dossierdans lequel vont se trouverles images de votre projet.
00:08:42 :Et pour les servirà partir de votre environnementde développement,quand vous êtes en modedebug à true,donc si je vais voir dans settings,là je remonte un petit peu,on a une variable debugqui est égale à truequand on est en mode développement.
00:08:53 :Et donc pour pouvoir servirces fichiers statiques,il faut le faire de cette façon.Et après,c'est différentquand vous êtes en ligne,quand vous êtes sur un serveur.
00:09:01 :On ne va pas les servirde cette façon,on va les servir différemment.Mais en local,on a besoin de faire cette technique.Donc voilà pour ces fichiersde médias.