- 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
- science Projets mensuels
Formations
Articles
Communauté

La certification qualité a été délivrée pour la catégorie d'actions « Actions de formation ».
- 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
- science Projets mensuels
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 person00:00:00 :Dans cette partie, on va voir comment, cette fois-ci, afficher la page de détails d'un produit.Pour l'instant, on a tous les produits sur la page d'accueil.
00:00:07 :Moi, ce que j'aimerais, c'est pouvoir cliquer sur un bouton qui va m'amener vers une page spécifiqueavec un peu plus de détails sur le produit en question.
00:00:14 :Pour ça, on va devoir rajouter un champ dans notre modèle qu'on n'avait pas prévu dès le début.Et ce n'est pas grave, on peut tout à fait le rajouter par la suite.
00:00:22 :Ce champ, c'est un champ qui est uniquement nécessaire pour les URL.C'est pour ça qu'on n'y a pas pensé en prévoyant et en planifiant notre modèle.
00:00:30 :C'est quelque chose que l'on rajoute après.Avec l'expérience, vous allez par la suite le rajouter dès le débutparce que c'est un champ qui est très pratique pour les URL.
00:00:39 :Et ce champ, on va l'appeler Slug.Un Slug, qu'est-ce que c'est ?Par exemple, imaginez qu'on ait notre Sneakers comme ceci.Ça va tout mettre en minuscule et ça va également enlever les caractères spéciauxcomme les espaces, les apostrophes et toutes ces choses qui seraient un peu problématiques pour une URL.
00:00:53 :On va créer un champ Slug et qui va être de type SlugField.On a un field qui existe pour ça avec Django.Et on va lui donner une maxLength également qui va être de 128, tout comme le nom.
00:01:04 :On va devoir ensuite rajouter cet élément dans la base de données.Je vais rouvrir mon terminal et on va faire un python manage.py makeMigrations.Et là, vous allez voir un message qui peut faire un peu peur.
00:01:16 :Mais ne vous inquiétez pas, c'est assez évident.Si on regarde ce qu'il dit, en fait, il dit qu'on essaye d'ajouter un non-nullable field au produitsans lui passer une valeur par défaut.
00:01:25 :Donc effectivement, dans le Slug ici qu'on a rajouté, on n'a pas passé de valeur par défaut.Et là, en fait, ce qui le dérange, c'est qu'on a déjà des éléments dans la base de données.
00:01:35 :Si je reviens voir dans la base de données dans TablePlus et que j'actualise, on a les Sneakers ici.Et donc là, il va devoir rajouter une colonne Slug et donc rajouter une information ici pour les Sneakers.
00:01:45 :Et il ne sait pas en fait ce qu'il doit faire.Donc là, j'ai deux options. La première option, c'est moi-même de lui donner une valeur par défaut
00:01:52 :qu'il va spécifier pour toutes les valeurs qui sont déjà existantes ici.Donc là, par exemple, je pourrais dire que par défaut, je veux que le Slug, ce soit quelque chose,donc une chaîne de caractère par défaut qui serait appliquée sur toutes les entrées existantes.
00:02:04 :Sinon, ce que je peux lui dire, c'est de quitter, donc de sortir de cette interface ici làet de rajouter moi-même la valeur par défaut dans le champ.
00:02:11 :Donc moi, je ne veux pas mettre de valeur par défaut sur le champpuisque je veux que ce soit obligatoire de mettre une valeur et je ne veux pas passer une valeur par défaut.
00:02:18 :Donc je vais laisser mon champ comme ça avec juste le MaxMagnet sans mettre de valeur par défautet je vais choisir l'option 1. Donc j'appuie sur 1 et je valide avec entrée.
00:02:26 :Et là, on me dit que je peux donc indiquer dans cet interprèteur Python la valeur par défautque je souhaite assigner à toutes les entrées qui existent déjà.
00:02:34 :Donc moi, je vais mettre une chaîne de caractère vide comme ceci, donc avec les deux guillemets.Donc je valide en appuyant sur entrée et là, la migration a bien été crééeet je vais pouvoir donc appliquer maintenant ces changements avec manage.py migrate.
00:02:47 :Je valide, les changements ont bien été appliqués et si je retourne voir dans la base de données,vous voyez que cette fois-ci, j'ai bien un slog qui apparaît et qui est empty.
00:02:55 :Donc on n'a rien puisque j'avais spécifié une chaîne de caractère videet donc on n'a aucune valeur dans ce slog pour les sneakers.Donc ça veut dire que maintenant, je peux retourner dans mon interface d'administration.
00:03:05 :Donc je vais aller dans slash admin ici, je vais me reconnecteret dans les products, je vais aller voir les sneakers et je vais ajouter cette fois-ci un slog.
00:03:16 :Donc je vais mettre tout en minuscule ici qui correspond donc au slog du name, donc de sneakers ici.J'enregistre et ça, ça va nous permettre donc d'utiliser ce slog dans l'URLqui va nous permettre d'accéder à la page produit.
00:03:28 :Donc cette URL, on va la rajouter tout de suite à l'intérieur du fichier urls.py.Je vais dupliquer cette ligne tout simplement et on va mettre ça dans une URL que je vais appeler productet là, on va récupérer ce slog dans l'URL.
00:03:40 :Donc pour ça, on va utiliser les crochets comme ceci, donc les symboles plus petits que et plus grands queet on va récupérer le slog sous forme de chaîne de caractère.
00:03:48 :Donc on indique ici str pour la chaîne de caractère, deux pointset le nom du paramètre qu'on va récupérer dans la vue.Donc cette vue, on va la créer, on va l'appeler product detail.
00:03:58 :Pour l'instant, je mets juste le nom et on va aller la créer et l'importer plus tard dans le fichier views.pyet pour le nom, je vais mettre tout simplement productet on va donc aller dans le fichier views.py, donc le fichier de l'application store
00:04:11 :et on va créer cette vue product detail.En premier paramètre, comme d'habitude, on met requestet en deuxième paramètre, on va mettre le même nom que ce qu'on avait mis dans l'URL.
00:04:19 :Donc là, je mets slog et c'est bien important que ce soit la même chose que ce nom ici.Ensuite, je vais importer cette vue. Donc là, après le index, je vais importer product detail,
00:04:28 :si j'arrive à bien l'écrire, voilà comme ceci.Et donc maintenant, ça va nous permettre d'accéder à la page de produit et de récupérer le slog.
00:04:35 :Donc pour l'instant, je vais juste l'afficher. On va faire un HTTP response.Pour vous montrer, je vais faire return HTTP responseet je vais le réimporter, option entrée, importet on va tout simplement ici retourner le slog.
00:04:48 :Donc ça, c'est juste pour vérifier que tout fonctionne bien,qu'on peut bien accéder à cette URL, récupérer le slog et l'afficher dans la vue.Donc on va aller vérifier tout ça. Je retourne sur mon interface ici,
00:04:58 :donc dans mon site web. On va mettre slash product slash sneakerset donc si je fais ça, ça va me retourner sneakers.Et pour l'instant, je peux mettre n'importe quoi ici.
00:05:08 :Le produit n'a pas besoin d'exister. Je pourrais mettre une chaîne de caractère aléatoireet ça fonctionne également.Donc ce qu'on fait ici, c'est vraiment juste récupérer ce que l'on a misdans l'URL et l'afficher à l'écran.
00:05:18 :Donc là, on va faire un truc un petit peu plus avancé.On va récupérer à partir du slog le produit et afficher le produit.Donc pour récupérer un objet, ce qu'on peut faire,c'est utiliser une fonction bien pratique qui s'appelle getObjectOr404.
00:05:32 :Donc cette fonction, il va falloir l'importer.Là encore, option entrée, import getObject.Donc elle est disponible dans le module Django.shortcut.Donc le même module qui contient la fonction render.
00:05:43 :Je vais en profiter pour enlever ce HTTP response dont je n'ai plus besoin.Donc cette fonction, c'est pratique puisqu'on va pouvoir lui donner un modèle,lui donner des paramètres.
00:05:51 :Et si ce modèle existe dans la base de données, il va nous le retourner.Sinon, il va afficher une page 404, donc la fameuse page d'erreur.
00:05:59 :Donc là, ce que je veux, c'est récupérer un productet on va dire que le slog est égal au slog.Donc on peut mettre des paramètres ici.
00:06:05 :Donc là, dans ce cas-ci, c'est le slog.Donc le slog qui correspond au champ de mon modèle slog.Et qu'est-ce qu'on lui passe à ce slog ?
00:06:12 :On passe ce qu'on a récupéré dans l'adresse, donc dans l'URL,avec le paramètre ici.Je vais récupérer ça dans une variable que je vais appeler product, tout simplement.
00:06:21 :Et on va tout simplement retourner un HTTP response.Donc je n'aurais pas dû supprimer l'import,on va refaire un import du HTTP responseet on va retourner product.name, tout simplement.
00:06:30 :Je pourrais mettre également product.name.On va mettre un truc un peu plus complexe.On va mettre un fstring et on va mettre ici product.nameet on va mettre également le prix, donc product.price et un symbole euro,
00:06:41 :juste pour avoir quelque chose d'un peu plus précis.Donc je reviens sur ma page et là, cette fois-ci,si j'essaie d'accéder à un produit qui n'existe pas,on aura une erreur 404, donc page not found.
00:06:51 :On voit ici le code de l'erreur.Et si j'essaie d'accéder cette fois-ci au sneakers,là, on a bien le nom du produit et le prix qui est affiché.
00:06:59 :Donc ça fonctionne.Maintenant, ce qu'on va faire, c'est non pas retourner un HTTP response,mais bien entendu, retourner un template HTML.Donc on va le créer, on va aller dans notre structure de dossier iciet dans templates, dans le sous-dossier store.
00:07:12 :On va rajouter un fichier HTML, donc clic droit, new HTML.Je vais l'appeler tout simplement detail.Je valide, j'enlève tout ce qu'il y a de basepuisque là encore, on va étendre le template de base.
00:07:23 :Donc je vais rajouter ici le extends et on va étendre base.html.Je ferme la balise et on va modifier le bloc de contenu.Donc en faisant bloc content, vous commencez à connaître la chansonet je ferme mon bloc ici.
00:07:37 :Donc qu'est-ce qu'on va mettre à l'intérieur de ce bloc de contenu ?On va mettre tout simplement un H2 avec le nom du produit, product name.
00:07:45 :Donc ça va ressembler à ce qu'on avait sur la page d'accueil.Je vais mettre un H3 pour afficher également le prix.Donc là, on va mettre product.price.
00:07:53 :Et on va mettre également l'image.Donc là, je vais aller copier ce que j'avais dans index.html.Cette image ici que je vais afficher également sur la page de produits,donc la page de détails.
00:08:04 :Et pour finir, on va mettre une description,donc la description du produit qui est dans product.description.Et voilà, je pourrais mettre la quantité en stock aussi peut-être.
00:08:12 :Ça peut être intéressant, donc product.stock.Donc normalement, on a tout ce qu'il faut, toutes les infos qui nous intéressent.Et maintenant, il ne reste plus qu'à retourner ce detail dans la vue.
00:08:22 :Donc là, on a récupéré le produit.On va enlever le HTTP response et à la place, on va utiliser la fonction render.On retourne la requête et on indique ici store.detail.html.
00:08:34 :Et en contexte, on va passer le produit.Donc contexte, on met des accolades et on met product.product.Donc là, on a notre variable product.On la passe dans un dictionnaire à cette clé product.
00:08:46 :Et dans detail, on a notre produit qu'on peut utiliserpour afficher le nom, le prix, l'image, la description, etc.Donc je retourne sur mon site, j'actualise.
00:08:55 :Et cette fois-ci, j'ai bien sneakers, 50 euros, la description et la quantité.Donc là, on va mettre un truc un peu plus explicite, on va dire en stock.
00:09:04 :Et là, vous voyez que je n'ai plus, par contre, ici, le nom de la boutique.Donc ça, c'est parce que je l'avais mis en fait dans le index.html.
00:09:10 :Et le nom de la boutique, en fait, on le veut sur chaque page.Donc on va le déplacer.On ne veut pas l'avoir que sur la page d'index.
00:09:17 :On veut également l'avoir dans la page de détail.Donc en fait, sur toutes les pages du site.Donc on va le rajouter dans le fichier de base qui se trouve dans le template.
00:09:24 :Donc template, base.Et on va mettre notre h1 ici à la place.Donc je reviens sur la page, j'actualise.Et là, j'ai bien la boutique de DuckString, le nom du produit, toutes les informations.
00:09:35 :Et si je reviens sur la page d'accueil, voilà, j'ai à peu près la même chose avec juste un peu moins d'informations.Je vais rajouter un produit tout de suite pour que ce soit un peu plus explicite sur quelle page on se trouve.
00:09:45 :Donc dans produit, ici, je vais cliquer sur ajouter.Je vais ajouter un t-shirt.Je vais mettre le slogue t-shirt.On va mettre 90 euros.Trois en stock.
00:09:53 :Un superbe t-shirt DuckString.Et on va aller chercher également une image.Donc t-shirt.jpg, je valide.Et comme ça, quand je reviens maintenant sur la page d'accueil, j'ai plusieurs éléments.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.