Afficher la page de détail d'un produit

00: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écifique avec 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ébut parce 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éciaux comme 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 produit sans 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 champ puisque 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éfaut et 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éfaut que 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éée et 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 vide et 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 reconnecter et 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'URL qui 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 product et 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 que et 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 points et 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.py et pour le nom, je vais mettre tout simplement product et 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 request et 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 response et je vais le réimporter, option entrée, import et 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 sneakers et 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éatoire et ça fonctionne également.Donc ce qu'on fait ici, c'est vraiment juste récupérer ce que l'on a mis dans 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 product et 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 response et 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.name et 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 ici et 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 base puisque 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 chanson et 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 utiliser pour 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.
00:10:05 :Donc les sneakers, le t-shirt.Et je peux afficher le t-shirt de la même façon, donc en allant sur product.Et là, on va mettre t-shirt comme ceci.
00:10:13 :Je valide et j'ai bien toutes les informations du t-shirt.Donc ça fonctionne, on a bien la page de détails grâce au slogue qui nous permet d'y accéder dans l'URL.

Deviens membre Premium magic_button

Premium

Rechercher sur le site

Formulaire de contact

Inscris-toi à Docstring