Noeud J : Construisez votre site Web de commerce électronique Partie 2 | Hadi Youness | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Noeud J : Construisez votre site Web de commerce électronique Partie 2

teacher avatar Hadi Youness, Computer Engineer

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction

      3:44

    • 2.

      Bases de données 1

      14:58

    • 3.

      Bases de données 2

      11:54

    • 4.

      Créer un itinéraire

      13:12

    • 5.

      Contact Et À Propos

      14:59

    • 6.

      Marques Et Catégories

      15:01

    • 7.

      Marques Et Catégories 2

      10:11

    • 8.

      Produits

      14:59

    • 9.

      Accueil Marques

      14:54

    • 10.

      Accueil du meilleur vendeur

      12:12

    • 11.

      Page produit

      14:48

    • 12.

      Panier

      15:01

    • 13.

      Se connecter

      14:31

    • 14.

      Livraison

      15:01

    • 15.

      Passer une commande

      11:39

    • 16.

      Project

      3:47

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

161

apprenants

1

projet

À propos de ce cours

Bonjour et bienvenue à la deuxième partie de la construction d'un site Web de commerce électronique.

Dans cette partie nous allons couvrir tout le backend de ce projet.

Nous allons apprendre :

1-Route et bascule entre les différentes pages que nous avons

2-Se connecter à la base de données mongoDB

3-Push et tirer de la base de données

4-Affiche les données que nous avons obtenues de la base de données à l'écran.

5-Ajouter l'authentification de l'utilisateur en créant un identifiant et en vous inscrivant des pages.

6-Travailler avec différentes bases de données en même temps et apprendre à gérer et à se connecter entre elles.

Il s'agit de sous-titres ou de sujets généraux que nous allons couvrir, bien sûr il y a beaucoup plus en cours. Espérons qu'à la fin de ce cours, vous pourrez mettre en œuvre le backend du site Web de votre choix.

J'espère que vous apprécierez ce cours, et si vous avez des questions s'il vous plaît posez-moi et je vous répondrai dans les plus brefs délais.

Rencontrez votre enseignant·e

Teacher Profile Image

Hadi Youness

Computer Engineer

Enseignant·e

Hello, I'm Hadi. I am studying Computer Engineering at the Lebanese American University (LAU). I like to share my knowledge with everybody and I believe that teaching is a perfect way to understand anything since you must be well informed about something to be able to teach it in the simplest possible ways!

Voir le profil complet

Level: Intermediate

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction: Bonjour et bienvenue dans un nouveau cours. Dans celui-ci, nous allons implémenter le back-end de notre projet qui consiste à créer un site Web de commerce électronique. Comme nous pouvons le voir ici, nous avons nos pages frontales que nous avons créées plus tôt dans le cours précédent. Si vous ne l'avez pas vu, je vous encourage vivement à le faire. Toutefois, si vous connaissez déjà les bases du CMLCSS et du bootstrap, vous pouvez toujours suivre ce cours pour apprendre le backend et découvrir comment nous pouvons travailler avec des choses telles que le passage d'une page à l'autre, obtention de données à partir de la base de données, etc. Nous allons donc discuter de tous ces sujets. Nous allons en apprendre davantage sur les APR reposants, façon dont nous pouvons obtenir et publier dans les fonctions dont nous disposons Je vais maintenant vous faire un tour d'horizon de ce projet. Par exemple, nous avons ici la page d'accueil. Comme nous pouvons le constater, nous avons les marques, les meilleures ventes et les catégories. Par exemple, si je passe aux marques, je vais trouver toutes les marques qui sont disponibles pour nous en ce moment. Par exemple, nous avons Johnson, appuyez sur Explore, je vais être redirigé vers la page du produit où je vais avoir tous les produits Johnson's tels que Baby Johnson, Johnson, etc., en la catégorie de prix des marques et taille. Bien entendu, si j'appuie sur cet article en particulier, je vais être redirigé vers le Baby Johnson ou la page du produit où je peux voir le bébé Johnson. Ici, nous avons l'image, mais elle ne s'affiche pas pour le moment car elle n'est pas complètement chargée. Bien sûr, nous allons avoir le prix, la marque, la taille, la quantité. Supposons que j' ai cinq pièces. Si je l'ajoute à ma carte, je vais être redirigé vers la page de connexion. Dans ce cas, je dois placer mon exemple, par exemple, dans ce cas, je l'ai créé. Bien entendu, si j'appuie sur le signe, je peux maintenant acheter ou ajouter cet article à la carte. Comme nous pouvons le constater, une fois que je l' aurai ajoutée, celle-ci sera là pour indiquer que j'ai un article sur ma carte et, bien sûr, je me déconnecterai ici au lieu de signer parce que nous sommes déjà connectés. Maintenant, si je consulte ma carte, je peux voir l'article ici. Je peux également l'enlever. Bien entendu, je vais devoir ajouter l'adresse et le mode de paiement. Alors bien sûr, si j'ai un article, je peux également passer la commande. Revenons-en à la marque, par exemple. Faisons défiler la page jusqu'à Johnson, et choisissons l'une d'entre elles. Bien sûr, je vais choisir la quantité qui correspond à une. Je vais l'ajouter à ma voiture, tout va bien. Maintenant, je l'ai juste ici dans ma commande. Bien entendu, si je passe la commande, je vais être redirigé vers cette page où je vais voir mes achats. J'ai donc fait un achat il y a trois jours, et j'en ai un en ce moment, et les deux sont en attente. Nous allons donc parcourir toutes les pages une par une et mettre à jour chacune d' entre elles jusqu'à ce que le projet soit complet. J'espère que vous avez apprécié ce cours, et cela étant dit, passons à la première tâche. 2. Base de données 1: Bonjour et bon retour. Dans cette partie, comme nous l' avons dit, nous allons traiter du back-end de notre site Web. Nous avons déjà construit toute la partie avant. Nous avons créé la page de contact de la catégorie Home Brand, et voici notre page d'accueil. Comme nous pouvons le constater, nous avons les photos, les marques, les meilleures ventes, puis les catégories. Et nous avons également celui-ci, qui est l'ordre des places, et nous le placerons dans le fichier des commandes plus tard. Enfin, nous avons le pied de page et il ressemble à ceci. Maintenant, revenons à notre code et commençons par le backend. Donc, la première chose que nous allons faire est d'avoir besoin d'un nouveau module qui nous aidera dans Mongo à créer la base de données dont nous avons besoin La première chose dont nous aurons besoin est de définir ou créer et cela sera exigé par Mongo, comme nous l'avons dit, Mongo find or create, et nous sommes bons Il suffit de l'importer ou de l'installer à l'aide de NPM. Ici, revenons en arrière et NPM trouve ou crée. Nous devons taper Mongo juste avant. Donc, mongo un fonds ou création et je vais attendre un peu qu'il soit installé, et en attendant, nous pouvons revenir arrière et continuer avec notre code C'est la première chose que nous allons faire et maintenant nous devons connecter et configurer Mongoose Allons-y et faisons-le juste entre les deux. Pour connecter Mongoose, nous écrivons simplement Mongoose pour nous connecter et nous allons choisir où nous allons le connecter Puisque nous allons le stocker localement sur le compas Mongo dV, ici Et nous allons taper Mongo DB local host 27017, puis suivre du nom de notre base de Puisque nous allons peut-être créer ce site Web commercial. Il vaut peut-être mieux la nommer données commerciale et la remplacer par DB. Ensuite, nous allons utiliser un nouveau passeur d'URL et le définir comme vrai. C'est principalement pour la connexion, et nous verrons plus tard comment nous pouvons visualiser la base de données. Nous allons devoir installer la boussole Mongo DB, et je vais le faire dans la prochaine vidéo Mais pour l'instant, connectons-le et définissons M. Puisque nous utilisons la connexion, nous devrons également utiliser find et modify Okay. En ce qui concerne Then, nous allons également définir l'index use create sur true. Nous allons créer cet index, et nous allons en parler dans les prochaines vidéos. Mais pour l'instant, définissons-le simplement. Mongo finira par le trouver et le modifier comme faux Nous ne le faisons pas chaque fois que nous appelons find, nous n'avons pas besoin de modifier notre travail. C'est ça principalement. C' est ainsi que nous pouvons connecter et configurer Mongoose et créer notre base de données Maintenant, réfléchissons-y une seconde. Quelles sont les bases de données dont nous avons vraiment besoin. Tout d'abord, nous parlons de marques et de catégories, il est logique d'avoir à la fois des bases de données pour les marques et les catégories. Nous avons également les articles individuels et nous allons avoir besoin d' une base de données spécifiée pour les articles individuels. Ensuite, nous avons également les e-mails que nous allons extraire d'ici. Une fois que l'utilisateur appuie sur CU, nous allons prendre cet e-mail et l'ajouter à la base de données. Bien entendu, nous allons avoir besoin d' une base de données spécifiée pour les utilisateurs. Chaque utilisateur. Chaque fois qu'un utilisateur s'inscrit, nous allons prendre toutes ses informations et les stocker dans une base de données spécifiée. Nous avons également besoin de la base de données des meilleures ventes. C'est pour les articles les plus vendus. Comme nous pouvons le voir ici, nous avons trois éléments pour le moment, mais peut-être en aurons-nous d'autres plus tard Il est logique d'avoir une base de données spécifiée pour ce genre de choses. OK. C'est donc principalement ça. Commençons par coder les bases de données, les créer, puis peut-être y ajouter des éléments ou des éléments. La première chose que nous allons faire est de créer le schéma de marque. C'est ainsi que nous créons une base de données. Donne-lui un nom. Appelons-le schéma de marque, et nous allons créer le schéma Use Mango, Mongoose, ouvrir les bretelles bouclées, et nous aurons principalement besoin de trois objets Le premier est la marque dont nous parlons. Peut-être ajoutons-nous les catégories de cette marque spécifiée. Par exemple, si nous avons une marque spécifique telle que Johnson, nous aurons besoin des catégories vendues par Johnson. Par exemple, nous avons le shampoing, la lotion pour le corps, etc. Il est donc logique d'avoir une chaîne d' un tableau de chaînes contenant toutes les catégories répertoriées par cette marque. Nous avons le nom de la marque et ce sera une chaîne. Nous avons également les catégories de cette marque, et il s'agira d'une gamme de cordes. Ajoutons peut-être une image. Ce sera également une chaîne pour plus tard. C'est le premier, créez le second qui est le schéma de catégories. Schéma de catégorie identique au nouveau schéma Mongoose. Ouvrons-le comme avant. La catégorie sera une chaîne. Maintenant, comme vous pouvez le constater ici, si nous avons une catégorie spécifique telle que le shampoing, nous aurons besoin d' une liste de toutes les marques qui vendent du shampoing. Par exemple, nous avons Johnson, nous avons des fils, etc. Il s'agit de la catégorie dont le nom sera une chaîne. Nous avons également les marques ici, et il s'agira également d'une gamme de cordes. Ensuite, nous avons l'image. Passons maintenant au schéma de courrier électronique, et il s'agira d'un simple e-mail. Il y a une chaîne, donc le nouveau schéma Mongoose l' ouvre ici Et puis nous avons l'e-mail qui est une chaîne, comme nous l'avons dit. Passons au schéma des articles, et construisons-le ici même. Nous avons l'article sur le schéma des indices dedans, et voyons voir. La première chose que nous allons ajouter est le titre ou le nom de cet élément, et ce sera une chaîne. Nous avons également la description que nous allons ajouter, qui sera également une chaîne, et nous avons l'URL de l'image. Corde. En gros, ce sont tous des piqûres. La marque sera également une chaîne, la catégorie, et nous allons ajouter un prix, une quantité et une taille. La taille sera une chaîne et le prix et la quantité seront tous deux des chiffres. Ici, nous avons le prix, et ce sera un chiffre, nous avons enfin la quantité qui sera également un chiffre. Cela concerne essentiellement le schéma de l'article. Passons au schéma utilisateur, il nous reste donc deux schémas pour créer l'utilisateur et le best-seller Passons à autre chose, schéma utilisateur constant égal au schéma habituel. Allons-y. Nous avons l'e-mail de l'utilisateur, le mot de passe et ajoutons peut-être l' identifiant Google si l'utilisateur connecte en utilisant son compte Google. Nous avons le numéro. Voici donc le numéro de téléphone. Nous avons le nom et nous avons également les commandes et l'adresse. Dans les commandes, il y a peut-être un tableau. Dans cette commande, nous allons ajouter quelques éléments. Voyons voir. Nous avons la commande, nous avons la date de paiement et peut-être ajoutons quelque chose appelé reçu pour préciser si l'utilisateur a reçu cette commande ou non, et nous allons ajouter les articles que cette personne a commandés. Nous allons avoir besoin de l'image, du titre, du prix, de la quantité et de la taille de ces articles. Nous avons également le total et la date de commande de l'utilisateur. Commençons par le reçu Ce sera principalement le cas, mais avant, ajoutons-le simplement en tant qu'objet. Il s'agit du premier objet. Et à l'intérieur duquel nous allons ajouter le reçu, celui-ci sera banni et la valeur par défaut sera fausse. Maintenant, nous avons également le checkout, qui est également de type et la valeur par défaut sera false. Voilà pour le paiement. Passons aux articles. Comme nous l'avons dit, les articles seront un ensemble d'articles. L'utilisateur peut donc commander plusieurs articles dans le cadre d'une seule commande. Donc, à l'intérieur des articles, nous allons ajouter l'image, et ce sera le titre, qui sera également une chaîne de prix, qui est un chiffre. La quantité que l' utilisateur a commandée, et ce sera également un chiffre, et enfin, la taille, qui doit être une chaîne. C'est essentiellement pour les articles. Et comme nous pouvons le voir, il suffit d'ajouter le total, qui sera une chaîne, et la date à laquelle l' utilisateur a commandé, qui sera également une chaîne. C'est principalement pour les commandes. Passons maintenant à l'adresse. avons donc terminé avec ça. Ajoutons le virgule et créons l'adresse, qui ne contiendra essentiellement que trois éléments l'adresse sous forme de chaîne, la ville dans laquelle vit l'utilisateur et le numéro de téléphone. L'adresse sera quelque chose comme ça, String City Strength, et enfin, le numéro de téléphone, qui sera un numéro. C'est ça principalement. C'est ce que nous allons faire. Il s'agit de notre schéma utilisateur. Il suffit d'ajouter le schéma du best-seller. Pour ce faire, nous allons ajouter un schéma de best-seller constant égal au schéma b comme d'habitude. Ouvrons-le. Si l'élément sera peut-être, ajoutons la référence de cet élément, ce sera donc un élément, puis nous devrons ajouter le nom de cet élément, qui est une chaîne, et l' image doit également être une chaîne Et c'est principalement ça. Je vais simplement ajouter le type dont nous allons extraire du schéma les types et l'ID de l'objet. Je vais l'expliquer plus tard, mais pour l'instant, restons-en à ce schéma. Ce sont principalement nos schémas. Il ne nous reste plus qu'à créer le modèle, puis visualiser à l'intérieur de notre boussole Mongo. Pour ce faire, nous allons télécharger la boussole Mongo B Dès qu'il sera téléchargé, il vous suffira de l'ouvrir et je vous verrai dans la prochaine vidéo. OK. 3. Base de données 2: Maintenant que nous avons terminé avec le schéma, nous pouvons créer le modèle. Allons-y et commençons par créer peut-être le modèle de la marque ou le modèle de l'article. Commençons donc et c'est assez simple. Nous avons juste besoin d'un élément constant dans le temps. Il s'agit du nom de l'article, le modèle Mongo, et nous allons modéliser l'article selon le schéma d'article que nous venons de créer plus tôt Et nous allons faire la même chose pour tous les autres. Nous avons l'e-mail. L'e-mail sera donc modélisé comme le schéma de courrier électronique. Bien sûr, je ne vais pas tous les écrire. Je vais juste le copier encore quelques fois et ajouter le reste. Nous avons donc ici le best-seller. Ensuite, il est modélisé comme best-seller ici et comme le schéma du best-seller Ensuite, il nous reste les trois pour tracer la marque, et elle sera modélisée comme une marque comme d'habitude et comme un schéma de marque ici Nous avons le schéma utilisateur. Est modélisée en tant qu'utilisateur et la constante serait nommée utilisateur. Enfin, nous avons la catégorie de catégorie, sera modélisée en tant que catégorie. En gros, c'est ça. Voyons peut-être si j'ai oublié quelque chose. Nous avons les meilleures ventes, donc nous en avons six, un, deux, trois, quatre, cinq et six. Pour l'instant, nous avons créé les bases de données pour nos articles, catégories, marques, etc. Maintenant que nous en avons fini avec cela, allons peut-être ajouter certains de ces articles, certaines de ces marques ou catégories aux bases de données. Pour ce faire, c'est assez simple. Nous pouvons aller ici et commencer par créer peut-être des marques. Je le nomme B un, cela devrait être égal à commencer par le best-seller, par exemple, best-seller, ouvrez-le, puisque nous avons dit ici que le best-seller contiendra principalement le nom et l'image. Alors, restons-y. Nous avons donc peut-être Johnson et l'image sera que nous allons ajouter le P. Pour l'instant, je vais ajouter ici un dossier de fichiers appelé images dans ce dossier, nous allons ajouter quelques images. Mais pour l'instant, appelons-le Johnson PG et tout va bien. C'est le premier. Créons-en un autre, deux équivalents au best-seller. Comme d'habitude, nous allons avoir besoin du nom, peut-être huit, et l'image sera, comme d'habitude, le chemin de l'image. Et comme on peut le voir, c'est une chaîne. Comme nous l'avons dit, nous avons trois best-sellers. Le dernier s'appellera peut-être le Der. Ouvrons-le. Nom oder Enfin, l'image contiendra le chemin exact de cette image, et elle se trouvera dans le dossier images, oder GPG. C'est tout pour les best-sellers. Passons aux bases de données suivantes. Ajoutons des catégories pour les marques , puis ajoutons-les toutes aux bases de données réelles. Ce que nous faisons ici, c'est simplement créer des constantes. Il s'agit de la constante B un, indiquant le best-seller, le premier best-seller, et nous avons le nom de cette image et l'image suivante. Et nous avons également les best-sellers numéro deux et trois. Mais nous ne les avons pas vraiment ajoutées à la base de données, et nous le ferons plus tard une fois que nous aurons terminé les marques et les catégories. Pour créer les marques, nommons-les « brand one », et ce sera peut-être Johnson, puisque nous avons parlé de Johnson pour la première fois. Allons-y. Johnson. Comme nous l'avons dit, nous devons sortir des catégories de Johnson. Nous allons aller de haut en haut, peut-être Shampoo, peut-être Pica, et peut-être que, comme nous l'avons fait auparavant, l'image sera exactement celle que nous avons utilisée précédemment C'est réglé pour Brand One, copions-le et collons-le ici. Et nous allons créer deux autres marques. C'est donc la marque deux, et c'est enfin la marque trois. Alors changez-les un peu. Ici, nous en avons peut-être huit. Disons que la catégorie ne sera peut-être que celle des dents. L'image sera donc celle des dents DGG. Nous les ajouterons plus tard. Enfin, passons à la dernière question. Ce sera une base de référence, peut-être que les catégories seront peut-être juste un bodica. Nous allons choisir L'image sera BodyPG nous avons terminé à la fois les best-sellers et les marques pour le moment Nous allons ajouter quelques catégories. La première catégorie sera une nouvelle catégorie. Ouvrez-le et commencez ici. Le nom de la catégorie sera peut-être Johnson, Johnson que nous avons. Johnson et peut-être allons-y, par exemple. Et enfin, nous avons l'image, qui se trouverait dans le dossier images. Et comme nous l'avons dit, puisque nous utilisons du shampoing, il est logique d'ajouter une photo de Johnson d'un shampoing comme image principale. On y va. Il s'agit de la première catégorie. Ajoutons-en deux autres. D'accord. Et c'est tout. Le second sera un soin du corps puisque nous en avons parlé plus tôt. ce qui concerne les soins du corps, nous n'avons peut-être que Vasilin et nous partons Enfin, pour changer cela. Il suffit peut-être de le taper. Peut-être gardons-le tel quel pour le moment, nous le modifierons plus tard. C'est tout pour les catégories. Ajoutons juste une dernière chose ici. Au lieu du shampoing, faisons-en le Inside TV que nous n'avons peut-être que sous la marque C'est principalement ça. C'est ainsi que nous pouvons créer les constantes que nous allons utiliser ou que nous allons ajouter à la base de données. Bien entendu, ce n'est pas la seule méthode. Il existe en fait une méthode plus simple où vous pouvez simplement les ajouter tous en même temps ou peut-être les ajouter à l'aide la boussole. Nous en parlerons plus loin dans la vidéo suivante. Mais pour l'instant, nous allons les ajouter manuellement juste pour avoir une idée de la façon dont nous pouvons les créer ou comment nous pouvons les ajouter à la base de données à l'aide du code. Alors c'est tout. En gros, allons-y et ajoutons-les dès maintenant. Nous avons donc parlé du schéma des catégories, et nous avons créé le modèle nommé catégorie. Et pour insérer dans cette catégorie, il suffit de taper category dot insert many si nous voulons insérer plusieurs catégories à la fois. Nous ouvrons donc les tableaux un, deux et trois. C'est donc principalement ça. Nous devons juste vérifier les éventuelles erreurs. C'est assez simple si une erreur se produit suffit d'imprimer sur la console, sinon, il suffit d'imprimer toutes les catégories que nous venons d'ajouter. Nous avons donc la catégorie 1, la catégorie 2 et la catégorie 3. Voilà pour les catégories. Copions-le et collons-le pour les marques et peut-être les best-sellers plus tard. Pour l'instant, travaillons avec les marques. Marque qui en insère plusieurs, nous avons la marque un, la marque deux et la marque trois. Et voilà, c'est la deuxième marque. Nous allons également vérifier les éventuelles erreurs, et sinon, nous allons simplement imprimer les trois marques que nous venons d'ajouter. Marque deux et marque trois. C'est tout, nous avons toujours les best-sellers, mais je pense que nous avons une idée de la façon les créer et de les insérer. D'accord. C'est tout pour cette vidéo. Dans la vidéo suivante, nous allons discuter de la manière dont nous pouvons travailler avec la boussole MongoDB, de la manière dont nous pouvons visualiser les données que nous venons d'ajouter et de la manière dont nous pouvons également éditer, modifier ou même ajouter nouveaux éléments ou de nouvelles bases de données depuis l'application Voilà pour cette vidéo, cela étant dit, rendez-vous dans la prochaine. 4. Créer un itinéraire: Bonjour et bon retour. Dans cette vidéo, nous allons apprendre comment établir des liens entre les pages Web. Par exemple, nous voici sur la page d'accueil. Peut-être voulons-nous accéder à la catégorie « Marque » sur la page « Conduite ». Pour l'instant, ils ne fonctionnent pas. Nous allons créer les formulaires pour ces pages. Bien entendu, si nous voulons voir ce produit spécifique, si j'appuie sur les détails C, je veux accéder aux détails C ou aux détails de cet article spécifique. C'est ce que nous allons faire également. Mais pour l'instant, commençons par la page Web, la page d'accueil, celle-ci. Passons donc à notre code d'étude visuel. Et ici, nous avons dit que chaque fois que nous aurons celui-ci, nous allons afficher la barre oblique à la maison Mais gardons-le à l'esprit. Revenons ici et voyons voir. Chez nous, nous avons besoin de certaines informations provenant de la base de données Monge ou de la base de données dont nous disposons La première concerne les catégories que nous avons par exemple ici. Lorsque nous affichons les catégories, nous devons les avoir ici, puis nous pouvons les répertorier comme ceci dans une voiture. Mais pour l'instant, nous en avons besoin, nous devons donc les obtenir chaque fois que nous rentrons chez nous. Nous avons également besoin des meilleures ventes. N'oubliez pas que nous avons créé un best-seller ici. Nous avons créé le schéma du best-seller et y avons ajouté quelques éléments. Ce sont là les deux points principaux, et bien entendu, nous avons également besoin des marques. Comme nous l'avons dit, c'est la même chose que les catégories, nous en avons également besoin. Commençons par cela. Revenons à G slash dans ce cas. Dans ce cas, je vais faire recherche parmi toutes les marques que nous avons dans le schéma de marque ou dans la base de données des marques, et nous allons tout rechercher, donc nous laissons celui-ci vide Et nous allons obtenir la fonction. Nous avons donc l'erreur et la marque défondée. En cas d'erreur, ne faites rien. S'il n'y a pas d'erreur, cherchons les meilleures ventes, puis les catégories. Best-seller. Aucune trouvaille Nous allons trouver tous les articles les plus vendus que nous avons. Comme d'habitude, nous avons la fonction qui contient l'erreur et le mieux trouvé. Alors ouvrons. Si nous n'avons pas d'erreur dans ce cas, nous allons simplement rechercher la dernière, c' est-à-dire les catégories. Recherche de catégories, fonctionnement avec et redéfinition des catégories. Nous pouvons maintenant rendre à home RESG render to home avec les éléments suivants ou les composants suivants Nous avons le double nom des catégories et celui-ci contiendra les catégories de définition que nous avons trouvées plus tôt. Nous avons également la demande. Ne l'oublions pas. Passons aux marques, contiendront la marque trouvée et la meilleure marque qui contiendra la meilleure marque trouvée. C'est principalement ça. Nous avons affiché sur la page d'accueil les meilleures marques suivantes et l'ensemble de la demande que nous avons reçue d'ici. C'est le premier. Passons à la seconde. Bien sûr, avant, permettez-moi parler de ce que nous pouvons en faire ici. Ainsi, chaque fois que nous irons sur la page d'accueil, nous aurons les marques, les meilleures ventes et les catégories avec nous. Et si nous allons directement à la maison, nous pouvons changer cela. Ce que nous faisons ici, c'est que nous ne montrons qu'une image, qui est l'image deux et le titre, qui est ma légende intitulée première image et la légende complète. Ils sont donc statiques. Nous pouvons les modifier et les faire changer, par exemple, ici, nous montrons les marques. Nous pouvons obtenir toutes les marques que nous avons obtenues à partir de cette liste, et nous pouvons y accéder ici en utilisant le Javascript intégré au SML ici, et nous pouvons les afficher ici même sur la page d'accueil Et nous pouvons également le faire pour les meilleures ventes les marques et les catégories, je suis désolée. Donc ça y est. C'est ce que nous voulons faire, mais pour le moment, restons simples. Revenons à l'application JS, puis terminons avec toutes les exigences, puis nous pouvons également établir un lien entre elles ici et modifier les titres des sous-titres, etc. Continuons. Revenons ici et voyons voir. Comme nous pouvons le voir ici, nous devons rester connectés. Celui-ci, restez connecté où l'utilisateur saisit son adresse e-mail pour recevoir des offres exclusives. Dans ce cas, nous allons le prendre et l'ajouter à notre base de données. Comment pouvons-nous le faire ? Revenons en arrière et commençons. Ceci est un post. Nous allons donc obtenir un post. Publication d'annonce. Chaque fois que nous recevrons quelque chose sur la page de rester connecté, qui est un message, nous allons peut-être entrer dans cette fonction, aussi grossière que d'habitude, et nous allons créer l'e-mail Je le nommerai simplement un e-mail et celui-ci contiendra un nouveau schéma ou un nouveau composant que nous allons ajouter au schéma. L'e-mail contenant ce message sera le corps de la demande. Maintenant, si je reviens ici, désolé, au pied de page, et comme nous pouvons le voir si nous faisons défiler la page vers le bas, nous avons saisi l' e-mail avec le nom email Nous pouvons accéder à celui-ci en utilisant le nom en écrivant simplement une demande. C'est la demande que nous allons recevoir qui contient tous les composants de ce formulaire ici, et le corps de l' e-mail de la demande Nous allons recevoir cet e-mail et l'ajouter ici. Ensuite, nous allons simplement le créer, créer cet e-mail par e-mail avec la fonction, il y en a donc un autre et peut-être simplement imprimer et imprimons que le courrier électronique est ajouté. C'est ça. Je suis désolée, j'ai oublié les citations. Nous sommes bons. Bien sûr, après avoir terminé, redirigeons-nous peut-être vers la page d' accueil. Je pense que nous sommes bons. Redirigez-vous vers celui-ci, ici même où nous allons effectuer le rendu à la maison. C'est tout pour rester connecté. Passons à la seconde. C'est bon. Essayons maintenant de passer d'une page Web à l'autre. Donc, comme nous l'avons dit, nous avons une catégorie de marque domestique à propos et un contact. Donc, ce que je suis prêt à faire c'est que chaque fois que j' appuie sur l'un d'eux, cela m'amène automatiquement à la page Web associée. Dans ce cas, tous ces boutons ne font rien pour le moment, corrigeons-le. Nous allons passer à l'en-tête. Il s'agit de notre en-tête dans lequel nous avons tous les boutons ici. Mais bien sûr, sans le lien de référence vers eux. Réglons ça. La première chose que nous allons faire est de supprimer ce hashtag et de le placer. Ici, nous avons la maison, nous allons rentrer chez nous. Dans ce cas, nous avons une marque. Je vais passer aux marques et voici la catégorie. Nous avons également des informations à ce sujet et peut-être des commentaires. Appelons-le feedback. C'est principalement, revenons à l'Apo S. Donc, disons que nous avons ici l'apt get pour la page d'accueil. Nous allons y aller. Passons aux autres. Nous avons donc un G. Si nous sortons de la page À propos, nous allons recevoir cette fonction et la rendre dans le JS en même temps que la requête que nous avons reçue. Alors laissez-moi vérifier celui-ci. Rafraîchissons donc. Et en attendant, passons à la seconde. Mais je pense qu'il y a peut-être une erreur ici. Nous sommes bons. Donc, si nous revenons la page de contact, nous l' appelons feedback donc feedback. Fonctionne comme d'habitude, ouvrez rendu et nous allons passer à Feedback JS. Ou peut-être que nous l'appelons contact, je crois. Donc oui, c'est juste ici. C'est contacter JS. Donc, pour le moment, revenons à l'application. Et c'est tout pour les pages. Joignons simplement la demande également. Revenons en arrière. Et voyons l'erreur ici. Alors maintenant, une fois que JS l'a lancé, tout semble bien. Donc hôte local. OK. Oui, on va bien. Nous avons toujours les pages des catégories et des marques. Faisons-les donc ici et nous allons les vérifier tous ensemble en même temps. Pour obtenir la catégorie, nous allons simplement ajouter une catégorie ici et fonctionner. Comme d'habitude, nous allons effectuer recherche dans toutes les catégories, les trouver toutes, puis traiter les erreurs et désactiver le financement des catégories Ouvrez. S'il n'y a pas d'erreur, nous allons simplement effectuer le rendu pour louer le rendu. Voici donc le rendu dans la catégorie, JS, et à côté des catégories que nous avons, et bien sûr, de la demande que nous avons reçue. Ça y est s'il y a une erreur, nous allons peut-être simplement imprimer sur la console comme ça, et nous avons obtenu la catégorie. Passons maintenant aux marques. Dans ce cas, nous allons sélectionner les marques sous forme catégories ouvertes, rechercher parmi les marques que nous avons toutes les trouver et appeler cette fonction comme d'habitude. Nous avons donc ici les marques trouvées. Et s'il y a une autre console, enregistrez-la, sinon, je vais simplement afficher sur la page appropriée les marques DGS à côté des marques que nous avons . Ce sont les marques trouvées et les demandes que nous avons également reçues, comme d'habitude Voilà, nous avons créé la page d'accueil dont nous disposons déjà. Nous avons créé une catégorie de commentaires et des marques. C'est tout pour cette vidéo et pour la vidéo suivante, nous allons regarder toutes ces vidéos. Et bien sûr, nous allons continuer à créer les pages Web qui relient les deux, et c'est tout. Rendez-vous dans la prochaine vidéo. OK. 5. Contact et à propos: Bonjour, et bon retour. Dans cette vidéo, nous allons configurer Mongo DB. Comme nous l'avons dit, nous avons créé toutes ces constantes, peut-être meilleures ventes, les marques et les calligories, ainsi que les schémas pour chacune d'entre elles Bien entendu, nous avons lié le Mongo à la base de données Mongo, l' hôte local 27017, et nous avons besoin que la base de données soit un DV Cependant, nous n'avons pas vraiment d'espace ou de logiciel à utiliser pour visualiser peut-être ces éléments, les données de notre base de données. Pour ce faire, nous allons accéder directement à Google, nous allons accéder au Mongo DV et le Nous avons les serveurs de la communauté logicielle , une base de données de documents gratuite et ouverte, nous allons aller jusqu'au bas et cliquer sur télécharger. Un fichier EXE sera donc téléchargé , puis vous cliquez dessus, vous passez par l'assistant. C'est une procédure très simple et directe. Et une fois que vous aurez terminé, cela apparaîtra sur votre page. Comme nous l'avons dit, nous allons réexécuter ce code. Cependant, maintenant que nous avons la base de données, nous avons l'hôte local vers lequel nous allons courir. Ensuite, une fois que nous l'aurons lancée, nous installerons cette base de données DV commerciale dans notre local Comme nous pouvons le constater, nous avons créé les marques et les catégories, et si nous appuyons dessus, nous pouvons voir quelles sont les marques ou quelles sont les catégories. C'est essentiellement pour le DV commercial. Nous pouvons maintenant retourner sur notre site commercial. Que nous puissions voir trans je pense que nous avons une erreur ici. Vérifions-le. Comme on peut le voir dans la partie catégories, c'est bien. Ensuite, cela fonctionne parfaitement bien. Dans le contact, nous avons quelques modifications que nous devons peut-être faire dans le CSS. Nous vérifierons cela plus tard. Mais pour l'instant, penchons-nous sur les marques DGS, revenons ici Comme on peut le voir, c'est la marque DGS. Ce ne sont pas des marques. Faisons défiler la page vers le bas et corrigeons le problème. Je pense que maintenant, nous sommes bons si nous allons nous rafraîchir, nous pouvons avoir les marques ici au fur et à mesure, cela fonctionne parfaitement. Rentrons chez nous et tout va bien pour le moment. Voyons par quoi commencer en premier. Comme nous pouvons le constater dans les marques et les catégories, il sera un peu compliqué de montrer les marques et les catégories réelles Nous avons besoin d'une boucle pour parcourir toutes les marques et toutes les catégories et les afficher à l'écran. Peut-être que nous allons commencer par quelque chose de simple. C'est le contact. Nous avons le nom, l'e-mail, le numéro de téléphone et le message. Bien sûr, le bouton d'envoi de message, et cela ne servira à rien pour le moment, mais nous allons le faire fonctionner dans un instant. Donc, si vous voulez commencer par celui-ci, nous avons le nom e-mail phone. Ça n'a pas l'air sympa, réparons-le. Au lieu de celui-ci, nous allons écrire un bouton avec la classe BTN et light, et peut-être envoyer un message, si nous revenons en arrière, il sera plus beau Cependant, ajoutons peut-être MES deux au clic d'actualisation. Comme nous pouvons le constater, nous avons reçu notre message d'envoi ici et faisons de même pour tous ces éléments. Dans ce cas, je vais ajouter ici Y un. Y un et Y un. Et je pense que nous allons y aller pour le moment, si nous y retournons, nous pouvons voir qu'il y a des espaces entre les deux. Donc ça y est. En gros, nous avons le nom, numéro de téléphone électronique, le domaine fiscal et le modèle d'envoi du message. Alors voyons voir. Comme nous l'avons dit, nous avons les informations de la personne et le message approprié. Et nous devons faire la différence entre le fait que l'utilisateur soit authentifié ou non. OK. Dans ce cas, nous avons toutes ces informations dans la base de données des utilisateurs. Dans ce cas, il suffit de démarrer le message, le nouveau message envoyé par l'utilisateur. Si l'utilisateur n'est peut-être pas authentifié, il n'est pas connecté, nous recevrons son nom, son numéro de courrier électronique et son message Dans ce cas, nous devons les démarrer dans un nouvel utilisateur, puis les enregistrer dans notre base de données. OK. Alors, comment s'y prendre ? Commençons par créer la publication de l'application. Et dans ce cas, nous avons la fonction de contact, et nous allons vérifier si la demande est authentifiée et voici comment procéder Au fait, pour ce qui est de la connexion et de l'inscription, nous allons les faire à la fin. Nous allons peut-être simplement en parler maintenant tout en travaillant avec cela, par exemple, ici dans le contact, nous allons utiliser la demande telle qu'elle est authentifiée Dans ce cas, nous vérifions simplement si cet utilisateur est connecté, et si c'est le cas, nous allons simplement mettre à jour cet utilisateur en sélectionnant son identifiant et c'est le cas. Donc, ce que nous faisons ici, c'est vérifier la base de données des utilisateurs, nous vérifions simplement s'il y a un utilisateur dont l'identifiant est égal à l'identifiant que nous allons obtenir sur la page de contact. Comme nous pouvons le voir ici, si nous revenons en arrière , nous allons obtenir le nom d'utilisateur. Donc, comme nous l'avons dit, nous avons ici l'utilisateur, et la méthode d'identification nous donnera simplement le D de l'utilisateur spécifique. Et si nous trouvons une correspondance, nous allons commencer par prendre ce message et l'ajouter à la boîte de message de notre utilisateur. Comme nous l'avons dit, nous avons cette base de données, c'est le schéma utilisateur. Nous avons l'e-mail, le mot de passe, le numéro d'identification Google, le nom, les commandes, l'adresse, laissez-moi vérifier ici. Nous avons toujours le message. Nous allons ajouter, ajoutons-le dès maintenant. À l'intérieur, ajoutez peut-être un message sous forme de chaîne, et c'est bon. Nous pouvons travailler avec elle dès maintenant. Donc, en gros, c'est tout. Nous vérifions simplement si l'utilisateur est connecté. Dans ce cas, nous allons recevoir ce message et l'ajouter à la boîte de message de notre utilisateur. Et bien sûr, si quelque chose se produit, comme une erreur, nous allons simplement imprimer ce journal d'erreurs. Sinon, nous allons accéder au journal de la console. Message reçu. C'est tout, en gros, si l'utilisateur est affecté. Maintenant, si ce n'est pas le cas, nous allons devoir créer un nouvel utilisateur et l'ajouter à la base de données des utilisateurs. Un nouvel utilisateur est égal à un nouvel utilisateur entre parenthèses également. Ajoutons le nom par le nom du texte de la demande OK. Nous allons devoir ajouter l'e-mail, demander le corps du texte du message. Et si vous vous demandez d'où je les trouve, si nous revenons au contact, nous avons ici le nom, le texte, le nom. Ce sont les entrées que nous allons recevoir de l'utilisateur, et nous allons y accéder comme d'habitude, en utilisant la méthode d' amitié demandée. Dans ce cas, nous avons reçu le nom par e-mail, peut-être les numéros ou demandé par téléphone. Enfin, le message. C'est le message qui nous intéresse, et il sera accessible demande par le message texte. C'est ça. Nous devons encore le sauver. Nouvel utilisateur qui enregistre, et bien sûr, nous allons rediriger l'utilisateur vers cette route. C'est la page d'accueil, et j'ai oublié de l' ajouter ici, donc je vais simplement rediriger la redirection vers la page d'accueil. C'est principalement ça. Si je reviens en arrière et que je me rafraîchis. Tapons quelques éléments. Si j'envoie un message ici, je dois ajouter un e-mail, donc e-mail à e-mail T c'est bon. C'est bon. Cela ne fonctionnera pas car nous demandons simplement si l'utilisateur est authentifié et nous n'avons pas encore vraiment commencé le processus d'authentification Nous allons donc laisser cela pour le moment et, bien sûr, nous y reviendrons plus tard. C'est tout pour le formulaire de contact. Passons peut-être à autre chose. Revenons à celui-ci et vérifions-le, nous avons des catégories de marques pour la maison. Au fur et à mesure que nous définirons les catégories et les marques, nous les traiterons plus tard. Pour la page a, nous n'avons pas vraiment besoin de quoi que ce soit. Ajoutons-les peut-être. Nous avons des marques d'accueil, des catégories, des contacts et des exemples. C'est l'e-mail. Ajoutons-y peut-être les références. Pour l'e-mail, nous l' avons déjà lié. Fais-le peut-être maintenant. Revenons maintenant au pied de page. Dans ce cas. Comme nous l'avons fait plus tôt dans ce puits, nous allons faire exactement la même chose qu'ici. Ainsi, par exemple, dans la page d'accueil, nous allons simplement afficher cette barre oblique et les marques que nous allons attribuer aux marques Laisse-moi juste vérifier. Oui, c'est exact. Marques. Les catégories seront des catégories. Je pense que nous sommes bons. Nous avons toujours le contact qui est chargé de la vérification des commentaires. Oui, c'est le feedback. Maintenant, si j'y retourne, j'achète les espaces à la maison. Nous allons revenir aux marques nationales. C'est la même chose. Nous allons passer aux marques, aux catégories, et c'est enfin cocher la case Contactez-nous et nous sommes d'accord avec celles-ci. Comme nous pouvons le voir ici, je viens de remarquer que nous aimerions connaître vos commentaires. Revenons donc à la page de contact. Comme nous l'avons dit, nous avons celui-ci et je vais peut-être ajouter ici un symptôme textuel Revenons en arrière et voyons à quoi il ressemble maintenant, et peut-être ajoutons quelques lignes. Nous devons encore ajouter peut-être ici même dans cette nouvelle ligne. Oui, je pense que ça pourrait être une bonne chose. Revenons à rafraîchir. Je suis désolée Ajoutons-le également ici. Rafraîchir Comme nous pouvons le voir, nous l'avons reçu, mais nous n'avons tout simplement pas remarqué celui-ci. Allons-y maintenant. OK. Comme nous pouvons le constater, je pense que tout va bien pour le moment. Nous aimerions connaître vos commentaires et il devrait saisir les informations suivantes, et c'est tout. Je pense que nous sommes bons pour le moment pour le pied de page, l'en-tête, les pages ao et de conduite Dans la vidéo suivante, nous allons commencer par la page de la marque. Nous allons afficher les marques que nous avons ici, ainsi que les catégories. Bien sûr, après cela, nous devons saisir chaque marque. Par exemple, ici, si nous avons Johnson, nous allons l'explorer. Maintenant, si nous appuyons sur Explore, rien ne se passera. Mais pour plus tard, nous allons appuyer sur explorer et afficher toutes les marques, disons, n'importe quelle marque, par exemple Johnson. Dans ce cas, nous allons afficher tous les articles que Johnson possède, bien sûr. Chaque article sera également filtré par catégories. Par exemple, pour Johnson, nous avons peut-être le corps, le shampoing et le gel douche. Dans ce cas, nous allons afficher tous ces éléments et l'utilisateur peut également filtrer par catégorie. Et nous allons faire exactement la même chose pour les catégories. Nous allons exposer, par exemple, ici, le shampoing. Et si l'utilisateur appuie sur ce bouton explorateur, il sera redirigé vers la page du shampoing où il pourra filtrer par marque. Par exemple, il y a Johnson, peut-être Sosk et ainsi de suite C'est tout pour cette vidéo, si vous n'avez pas bien compris le sujet , ne vous inquiétez pas, nous en parlerons peut-être en détail dans les prochaines vidéos. On se voit alors. OK. 6. Marques et catégories: C'est bon. Bonjour, et bon retour. Dans cette vidéo, nous allons afficher les marques et les catégories que nous avons sur les pages Web des marques et des catégories. Si nous allons sur notre page Web, c'est la page d'accueil, et si nous appuyons sur la marque, nous allons en fait accéder à la page des marques. Toutefois, ce sont les mêmes. Nous avons donc le nom de la marque et peut-être la même image, nous changeons l'image ici, mais ceux-ci ne proviennent pas de la base de données. Nous avons donc nos marques dans notre base de données, et nous voulons les consulter ou les afficher ici. Si nous passons à notre boussole Mongo DB, et qu'il s'agit de notre base de données, DV commerciale, appuyons dessus En fait, nous sauvegardons les marques et les catégories. Si vous appuyez sur les marques, nous pouvons constater que chaque marque possède le nom de marque, l'image et le D de cette marque. Revenons à nos marques, DGS. Comme nous pouvons le constater, nous présentons plusieurs marques. Nous allons tous les supprimer et créer une seule marque dans laquelle nous allons examiner toutes les marques et les afficher en même temps. Comment s'y prend-on ? Supprimons tout cela et commençons par peut-être recréer ou conservons celui-ci et supprimons tout le reste Donc, comme nous pouvons le voir, si nous le supprimons, voyons voir. C'est le dernier, et je pense que c'est bien si nous les supprimons tous. Vérifions que c'est pour zéro, colonne six et zéro, donc tout va bien. OK. Voilà, en gros, c'est la seule chose dont nous avons besoin. Cependant, nous devons examiner toutes les marques que nous achetons. Donc, si vous vous souvenez bien, revenons à l'Apt savoir où nous allons trouver les marques. Nous avons examiné les marques et nous avons trouvé toutes les marques et nous les avons peut-être envoyées en utilisant les marques. Donc, si nous voulons accéder à toutes les marques que nous avons, nous pouvons simplement utiliser cette marque ici. Revenons maintenant à la page de la marque. Comme nous pouvons le voir ici, au lieu du nom de la marque, nous devons afficher la marque réelle. Pour cela, je vais simplement créer ici. C'est notre solution, et c'est là que nous allons travailler. Faisons juste un espace ici, quelques lignes. Commençons par créer une boucle à quatre boucles pour parcourir toutes les marques. Ce sont toutes nos marques, mais pour chacune d'elles, nous allons créer une nouvelle fonction qui prend une marque et ouvrons les parenthèses ici C'est en gros maintenant, concluons ici. Et ici. C'est ainsi que nous pouvons implémenter script Java dans le fichier EJS Et je vais simplement le couper et le coller ici. Nous avons maintenant notre boucle téléphonique. Nous allons prendre tous les noms des marques. Je vais donc appeler la marque marque, et je pense que nous sommes bons. Cette marque est le symbole de celle-ci. C'est le nom de la marque. Bien entendu, cette marque représentera le nom de la marque actuelle. Je l'appelle ici marque. Vous pouvez lui donner le nom que vous voulez tant qu'il est identique dans la base de données et dans la façon dont vous y accédez ici. Maintenant, chaque fois que vous voulez prendre un nom ou quelque chose de valeur, vous devez le placer égal avant d'appeler la fonction ou la valeur. Et chaque fois que vous souhaitez implémenter une fonction ou peut-être créer une boucle for, vous n'avez rien à faire pour cela. Et je pense qu'il existe une liste de suggestions ou de choses à utiliser lorsque nous voulons implémenter un script Java dans EGS et nous y reviendrons plus tard Mais pour l'instant, nous avons juste besoin de ces deux choses. C'est ça. Nous venons d'afficher la marque. Maintenant, pour l'image, nous allons faire exactement la même chose. Ici, il est très important de suivre exactement la même procédure. Nous ouvrons donc le pourcentage égal , puis les images et l'image plus l' IMG de la marque, comme nous l'avons dit précédemment, et maintenant tout va bien. C'est principalement ça. C'est ainsi que nous pouvons présenter nos marques. Voyons si tout fonctionne. Allons peut-être. C'est ça. Ce sont toutes les marques que nous avons. Bien sûr, nous avons quelques problèmes avec les images. Vérifions-le. Si nous revenons ici, nous n'avons pas réellement le dossier images ou oui, donc nous ne l'avons pas. Je vais le créer dès maintenant et je vous recontacterai dans une minute. C'est bon. Parcourez les fichiers, nous avons trouvé le fichier d'images ici. En fait, le problème est que nous avons nommé les images ici Johnson PG et JPG, et bien sûr, dommage que nous ne les ayons pas vraiment nommées comme ici. Alors réglons ce problème en fait. Nommons celui-ci, par exemple, Johnson. Peut-être que le second est aussi bodic et le dernier que D. Donc, ici, n'est pas du capital, alors réglons ce problème et c' est parti pour le moment Faisons-le peut-être. En fait, permettez-moi de créer une nouvelle image. Copions ceci et basons-le ici même. Dans celui-ci, nous allons l'appeler dents. Ils sont identiques, mais nous les avons simplement modifiés pour les besoins de cet exemple. Maintenant, si nous revenons en arrière et voyons le problème auquel nous avons été confrontés, c'est que chaque fois que nous enregistrons cela, l'application les ajoute en fait en les gardant simplement non commentés Nous en avons inséré plusieurs, nous insérons trois catégories et trois marques, chaque fois que nous enregistrons celle-ci Comme il ne suffit pas de le prendre chaque fois que vous enregistrez, il sera réexécuté. Une façon de résoudre ce problème est donc de supprimer toute la base de données, puis de réexécuter le code. Pour le supprimer, tapez simplement le nom de cette base de données. Maintenant, si vous revenez ici et lançons à nouveau node Man. NodeJS et si nous revenons en arrière et que nous appuyons sur Actualiser ici, nous obtiendrons notre base de données qui contient les marques et les catégories Cependant, cette fois, nous n' avons qu'une, deux, trois, quatre et cinq marques, et les catégories suivantes. C'est principalement ça, mais avant de l'exécuter. Encore une fois, nous devons nous assurer qu'ils sont passés au peigne fin. OK. C'est donc tout maintenant, si nous revenons à notre site Web commercial. Comme nous pouvons le constater, nous avons obtenu Johnson Colgate et Vaseline comme nous le voulions Il s'agit de la première partie de notre code. Nous avons donc simplement examiné toutes les marques que nous avons et les avons mises en œuvre à l'aide d'une simple boucle for. Comme nous pouvons le constater, ce code est très petit. Juste quelques lignes et nous montrerons simplement le nom de la marque et l'image ici. Faisons exactement la même chose pour la catégorie avant de passer à la recherche et à la manière dont nous pouvons effectuer une recherche parmi ces marques et catégories. Supprimons l'en-tête et la page d'accueil du contact supplémentaires. Passez à la catégorie, et nous allons faire exactement la même chose qu' avant. Supprimons tout cela. Vérifions que cela s'arrête là, supprimez-les tous. OK. Et c'est tout. Nous allons commencer par là et examiner les catégories que nous avons. Mais d'abord, examinons l' ensemble de la base de données. Qu'avons-nous ? Revenons aux catégories. Comme nous pouvons le voir, nous avons la catégorie et l'image correspondant à la catégorie spécifique. OK. Maintenant, revenons en arrière et vérifions dans l'AJ comment nous revenons ou comment nous envoyons les catégories depuis l'apto J. Si nous allons vérifier que c' est notre catégorie apt get Nous allons effectuer une recherche dans le schéma des catégories ou dans la base de données des catégories, et nous allons envoyer toutes les catégories que nous avons sous forme de catégories avec un double. C'est ce dont vous aurez peut-être besoin, revenons en arrière. Nous avons toutes les informations nous avons besoin pour examiner cette question. Nous allons commencer par obtenir les catégories et non pour chacune d'entre elles. Dans ce cas, nous allons créer la fonction qui nous permettra d'accéder à chaque catégorie une par une, puis ouvrir nk braces, fermer cette fonction ici et là Nous devons le découper et le coller ici. Nous avons maintenant toutes les catégories. Nous pouvons les afficher en accédant simplement au nom comme nous l'avons fait pour la marque, nous appelons la catégorie que nous avons créée ici, et nous vérifions dans la base de données. Quel en est le nom ? C'est aussi une catégorie, la catégorie D. Et nous sommes bons. C'est ainsi que nous pouvons y accéder. En ce qui concerne les images, nous allons faire exactement la même chose. Donc maintenant, ouvrez les parenthèses, ouvrez les guillemets, je suis désolée Images plus la catégorie IMG, comme nous l'avons dit précédemment. OK. C'est donc principalement ça. Regardons simplement les images. Ce sont donc les mêmes. Nous n'avons aucun problème. Revenons donc en arrière et appuyons sur Actualiser ici. Et passons à la catégorie. OK. Dans ce cas, nous devrions avoir une liste de toutes les catégories. Oui, nous avons le shampoing, soins du corps et les dents, et bien sûr , le bouton Explorer, et cela ne servira à rien pour le moment. Nous devons l'ajuster, ainsi que la barre de recherche ici. Commençons donc par la barre de recherche ici. Si nous revenons en arrière et vérifions, c'est notre barre de recherche. Nous ne disposons pas encore de l'action du formulaire. Alors, qu'est-ce qu'on en fait ? Donc, tout d'abord, nous allons la nommer catégorie et l'action ou la méthode sera publiée comme d'habitude. Donc méthode égale à post. Et pour l'instant, nous avons le bouton avec le type de soumission. Et chaque fois que nous appuierons dessus, cela passera dans la catégorie ici. Pour en revenir à notre application, nous allons publier ici cette catégorie, et nous allons rechercher dans toutes les catégories disponibles qui correspondent à celle que l'utilisateur recherche. Pour ce faire, nous allons commencer par la catégorie des publications de l'application. Et dans ce cas, nous allons créer la fonction, qui est grossière comme d'habitude, et commencer par obtenir la catégorie recherchée par l'utilisateur, et nous pouvons y accéder en utilisant le corps de la requête Si nous revenons à la catégorie, nous pouvons constater que celle-ci a un nom, qui est un nom de marque. Modifions-le en fait peut-être par le nom de la catégorie. Je pense que ce sera un nom de catégorie logique ici. Si nous revenons en arrière, nous pouvons y accéder en accédant simplement au nom de la catégorie du corps de la demande. Et puis, bien sûr, si la catégorie de longueur est supérieure à un, nous devons peut-être la mettre majuscules, car nous commençons les catégories en majuscules. État du shampooing avec S, qui est une majuscule. Dents, nous allons tout réparer. Mais pour l'instant, supposons que toutes ces catégories sont majuscules ou que la première lettre est en majuscule Dans ce cas, si la longueur est supérieure à un, nous allons la modifier en appelant la catégorie le premier caractère de la catégorie, afin de pouvoir y accéder en utilisant le graphique à zéro. Et nous allons passer aux majuscules. C'est la fonction que nous allons utiliser, puis nous allons découper cette catégorie, et nous allons prendre tout le reste de cette catégorie. Par exemple, si nous avons du shampoing, disons : nous avons un shampoing comme celui-ci. Ce que nous allons faire, c'est cela ou, par exemple, avec ceci. Ce que nous allons faire, c'est prendre ce S ici, point à zéro. Ce sera un S majuscule plus H PooHich fabrique du shampoing avec un S majuscule. C'est tout, principalement pour cette vidéo le prochain, nous allons continuer cette méthode, et bien sûr, pour la marque également. À bientôt. 7. Marques et catégories 2: Bonjour, et bienvenue dans une toute nouvelle vidéo et celle-ci, nous allons continuer à développer cette méthode de publication. Ensuite, nous allons faire exactement la même chose pour les marques. Tout d'abord, supprimons D et continuons comme nous l'avons dit. Ici, nous allons peut-être simplement mettre des majuscules pour le premier caractère, et nous allons supposer que tous les caractères sont en majuscules dans notre base de sont en majuscules dans notre Ce que nous allons faire maintenant, c'est effectuer recherche dans notre base de données en trouvant simplement toutes les catégories. J'ai une catégorie de faute de frappe et son nom correspond à celle-ci Comme nous l'avons dit, nous avons pris le nom de l'utilisateur, et si nous revenons aux catégories, nous pouvons constater que le nom de la catégorie est également appelé catégorie. Comment le trouvez-vous ? Nous tapons simplement la catégorie et je vais rechercher une catégorie. Dans ce cas, nous allons le trouver. Et bien sûr, si found est égal à null, alors nous n'avons rien trouvé. Nous allons donc simplement créer un rendu sur la page d'accueil. Reste donc à afficher, dans ce cas, la page d'accueil est la page des catégories avec les catégories. En tant que telle, nous n'avons rien, et la demande est égale à request, comme d'habitude. Si nous avons réellement trouvé quelque chose, nous allons le stocker dans catégories, par exemple, nous allons consulter le journal juste pour l'afficher à l' écran, et bien sûr, nous allons le rendre dans la catégorie avec le paramètre suivant. Catégories, comme nous l'avons dit, qui seront la catégorie que nous venons trouver et la demande, comme d'habitude. Et c'est bon pour le moment. C'est la fonction principale que nous allons utiliser. Nous parcourons simplement les catégories que nous avons et cherchons quelque chose ou une catégorie qui correspond à celle-ci, et ici nous avons également une faute de frappe Et si nous trouvons quelque chose, nous allons simplement afficher la page de catégorie à côté de la catégorie que nous avons trouvée. Sinon, nous allons afficher la page de catégorie avec une chaîne vide. Voilà, surtout si nous revenons en arrière et que nous appuyons sur Actualiser, faisons une recherche dans les catégories. Essayons d'abord le shampoing. Comme nous pouvons le voir, nous avons trouvé Champ, nous avons toujours oublié de supprimer celui-ci. Chaque fois que j'économise, j'insère de nombreuses catégories et de nombreuses marques Allons-y, supprimons-les avant de continuer à supprimer cette collection, et la marque supprime également cette collection, et dans ce cas, je vais peut-être la lancer une fois de plus. Maintenant, si je reviens ici, modifions quelque chose, par exemple, comme ceci. Comme nous pouvons le constater, il est en train d'être lancé à nouveau, et si je vais me rafraîchir ici, nous avons nos marques et nos catégories. Revenons-y maintenant et commettons-les simplement. Comme nous pouvons le voir maintenant, si je devais me rafraîchir, nous ne trouverions une seule catégorie, celle du shampoing. Maintenant, si je reviens à la page d'accueil, revenons aux catégories. Nous avons Shampoo Alt et tapons quelque chose qui ne figure pas dans notre recherche de catégories, et nous n'aurons rien à afficher dans ce cas. Nous pouvons peut-être en faire quelque chose plus tard, peut-être le conserver pour le projet que vous allez réaliser. Dans ce cas, au lieu d' afficher un espace vide ici, dites par exemple que cette catégorie n'est pas disponible, essayez autre chose ou affichez toutes les catégories avec un message indiquant que cette catégorie spécifique n' est pas disponible pour le moment, ou vous avez une faute de frappe dans le nom de votre catégorie. Voilà pour les catégories, passons aux marques. Comme nous pouvons le constater, nous avons également trois marques, et nous voulons créer ce code comme avant. Si nous recherchons une marque ici, elle devrait apparaître dans la catégorie. Revenons en arrière. OK. Comme nous pouvons le constater, nous devons créer exactement la même fonction pour la catégorie. Mais après, nous allons trouver des marques. Et dans ce cas, la fonction du cresson, comme d'habitude, s'ouvre, et nous allons laisser marque égale au nom de marque du corps demandé Je vais le vérifier maintenant. Donc, si vous optez pour la marque. Comme nous pouvons le voir, nous avons ici le nom de la marque. Nous allons y accéder en utilisant celui-ci. Cependant, dans le formulaire ici, nous allons avoir besoin de marques et la méthode sera toujours la publication. Nous avons le type de soumission de ce modèle, donc tout va bien. Maintenant, ce que nous allons faire, c'est prendre cette marque et faire exactement la même chose avec le nom. Nous allons découper, peut-être, partir de l' index 1 jusqu'à la fin et mettre le premier élément ou le premier caractère en majuscules Nous allons vérifier si la longueur par marque est supérieure à un. Nous allons simplement le modifier comme avant, donc ajouter zéro et faire deux majuscules Dans ce cas, nous allons ajouter tout cela à la fin, nous allons effectuer une recherche dans les marques, nous avons la base de données des marques. Nous allons trouver toutes les marques qui correspondent au nom de celle-ci, bien sûr, nous avons la fonction qui fait le travail à notre place. J'ai trouvé que nul n'est égal à nul, nous allons montrer ces marques. Comme nous l'avons dit, dans ce cas, si la marque n'est pas égale. Tal, nous allons les prendre et les rendre aux marques de JS. Alors faisons-le. Nommons-lui des marques égales à found. Et dans ce cas, je vais enregistrer les marques que nous avons trouvées sur console avant de les afficher sur la page des marques. Les marques nous parsèment donc. Dans ce cas, en plus des marques que nous avons reçues et de la demande que nous avons également reçue de l'utilisateur. Dans ce cas, et si quelque chose d'autre se produit, s' il y a une erreur ou si nous n' avons rien trouvé, nous allons simplement afficher le point JS de Brands à côté d'un y vide. Donc c'est tout, peut-être que je le fais maintenant, revenons en arrière Et vérifions-le. Ainsi, par exemple , cela sert à Johnson ici. Johnson recherche. Nous avons donc un autre échec à rechercher les vues de la marque DGS. Je suis désolée, vérifions-le ici. Que faisons-nous réellement ? Nous le sommes peut-être. Pour que nous fassions le travail. Ensemble de marques. Nous allons utiliser le type de marque plutôt que les marques. C'est le nom du profane. Maintenant, si nous revenons en arrière, disons rafraîchir, vérifier si tout fonctionne ici, donc tout va bien. Tapons Johnson search. Comme nous pouvons le constater, nous avons trouvé ce que nous recherchions. Voici le Johnson et si je tape quelque chose. Nous n'allons rien obtenir. C'est un espace vide qui indique qu' aucune marque ne porte ce nom. C'est essentiellement tout pour cette vidéo. Dans cette vidéo, nous avons créé le bouton de recherche et l'option d'affichage de ces marques et catégories. La prochaine, nous allons peut-être exposer les objets que nous avons à l'intérieur de ce Johnson. Nous allons créer l' itinéraire pour le bouton pler. Chaque fois que l'utilisateur appuie sur cette option explorer. Il devrait également voir tous les articles liés à ce produit Johnson ou à cette marque Johnson. Bien entendu, nous allons faire exactement la même chose pour les catégories. Par exemple, si l'utilisateur appuie sur Shampoo, il devrait également voir tous les articles liés au shampooing de toutes les différentes marques que nous avons. Cela étant dit, c'est la fin de cette vidéo, à bientôt. 8. Produits: Bonjour, et nous y reviendrons dans cette vidéo, nous allons utiliser le bouton Explorer. Et nous allons afficher toutes les marques disponibles ou tous les articles disponibles dans cette catégorie. Revenons aux catégories ici. Comme nous pouvons le voir, nous avons ici ce bouton avec le type soumis. Le formulaire est vide pour le moment, corrigeons-le. Je le nomme, les produits et la méthode devraient toujours être de publier ce type de formulaires. Dans ce cas, nous allons passer aux abdos et nous allons créer cette méthode ici. OK. Commençons donc par cela ici. Dans ce cas, nous allons commencer par les produits, et bien sûr, la fonction, ouvrir cette fonction et commencer par prendre la catégorie que nous avons. Comme nous pouvons le voir, la catégorie sera tirée de celle-ci ici. Nous avons le nom. Et nous pouvons également stocker celui-ci dans une entrée pour le conserver comme catégorie. Dans ce cas, je vais le stocker ici. L'entrée sera donc de type in, et je vais définir la valeur du nom de cette catégorie ici. Faisons peut-être le nom, ce sera la catégorie et la valeur sera exactement ce que nous allons afficher ici. Dans ce cas, il s' agira d'une catégorie. C'est bon. Donc, en gros, c'est tout. Maintenant, si je reviens à l'application, je peux accéder au nom de la catégorie en tapant simplement request point body category. Dans ce cas, je vais avoir la catégorie garçon, et je peux rechercher parmi les catégories que nous avons et trouver celle qui convient pour l'afficher. Dans ce cas, nous allons donc afficher tous les articles que nous avons qui correspondent à cette catégorie spécifique. Alors, comment faites-vous cela ? Nous allons simplement essayer de faire une recherche. Donc article, trouvez toutes les catégories qui correspondent à celle-ci. Et pour en être sûr, nous allons consulter la base de données. Catégorie donc trouvée. C'est bon. Donc, si nous revenons à la base de données, je suis désolée pour le schéma. Et vérifions l'intérieur de ces objets. Il s'agit du schéma de l'article. Nous avons la description du titre, et nous avons la catégorie ici. Bien entendu, nous allons ajouter quelques éléments, et nous allons les examiner maintenant. Mais pour l'instant, finissons cette catégorie, et ensuite nous allons peut-être le faire. Donc, pour l'instant, nous allons ouvrir cette fonction ici. Et travaillons avec. Donc, si nous trouvons quelque chose, s'il n'y a pas d'erreur, nous allons vérifier si des catégories ont été trouvées. Ou peut-être que les objets trouvés sont un peu plus logiques, les objets, d'accord. Et dans ce cas, les éléments trouvés ne sont pas égaux à null. Cela signifie que nous avons trouvé quelque chose et nous pouvons afficher la page à côté de ces éléments. Donc, faites le rendu, et nous allons le rendre sur la page des produits que nous avons créée plus tôt, et elle se trouve ici. Bien sûr, à côté des articles que nous avons , il y aurait les objets trouvés, et la demande ne sera qu'une simple demande. C'est tout, nous allons simplement rechercher les articles correspondant à simplement rechercher les articles cette catégorie spécifique et renvoyer tous les articles correspondant à cette catégorie. C'est ça en gros. Créons maintenant quelques articles et ajoutons-les à la base de données pour pouvoir les afficher dans les produits dans le fichier JS. C'est bon. Alors montons. Et dans ce cas, nous allons créer des objets. Copions donc le schéma pour l'avoir devant nous ici. Je pense que c'est bien. Et commentons-le simplement. Dans ce cas, je vais créer le premier article, qui sera nouveau et ce sera l'article. Et de haut en haut, les bretelles avec le titre seraient, par exemple, peut-être Baby Johnson et description désolée, je dois les mettre entre guillemets Voici donc Baby Johnson. Et bien sûr, ils seront également sous forme de cations. Maintenant, comme pour l'URL de l'image, MR L sera également une chaîne. Ce boîtier sera composé d' images et de Johnson JPG. Ensuite, nous avons la marque, et c'est évident. C'est Johnson pour le moment. La catégorie sera peut-être le shampoing. Et la taille peut être 100 milli. Et le prix, par exemple, est de 8$ et quantité maximale sera, par exemple, peut-être 50 pour le moment J'ai trouvé l'erreur ici. Je dois le réparer, alors faisons défiler la page vers le haut. Et en voici une. Voilà, en gros, c'est notre premier article. Copions-le et collons-le encore quelques fois et modifions-le quelques points. C'est bon. Je pense donc que nous sommes bons. Nous avons le point deux, et celui-ci. Peut-être que nous allons avoir quelque chose comme Sam. Et changeons simplement celui-ci en corps. Et bien sûr, la catégorie anti-branches devrait également être la colombe et le shampoing Dans ce cas, le troisième élément sera peut-être le corps. Disons que je ne sais pas. Johnson, par exemple, dépend du corps Johnson, je suis désolée, et la catégorie est celle des casquettes. Maintenant, dans ce cas, nous avons encore quelques articles. Modifions-les simplement. Et je pense que nous sommes bons. Nous voulons simplement les insérer dans notre base de données d'articles. Et pour ce faire, nous en insérons simplement plusieurs, nous allons insérer un élément, un élément deux, un élément, un élément quatre et un élément cinq. Cela étant dit, nous voulons simplement vérifier s'il y a une erreur. S'il y a une erreur, nous allons l'imprimer. Sinon, nous allons simplement imprimer tous les articles. Point 1, point 2, point 3, point 4 et point 5. Je pense que nous sommes bons. Maintenant, chaque fois que nous l'avons enregistré, nous l'avons réellement enregistré, et ce sont les éléments que nous avons créés. Revenons en arrière et commentons cela Si nous revenons en arrière et que nous l'avons actualisée ici, nous trouverons cette base de données d'articles qui contient cinq articles pour le moment. Bien entendu, nous allons maintenant implémenter cela dans nos produits pour DGS. Nous avons maintenant la base de données. Nous disposons de toutes les informations dont nous avons besoin. Nous avons tous les articles que nous voulons et nous pouvons y accéder via cette base de données. Ce que nous faisons réellement, c'est que nous achetons ces produits. Et en les envoyant sur la page des produits, qui se trouve ici. Ce que nous allons faire maintenant, c'est accéder à la page GS des produits et la modifier afin montrer ces marques ou montrer ces articles d' une marque spécifique. Donc, en faisant défiler l'écran vers le bas, nous pouvons voir que nous en avons peut-être deux, donc nous avons celui-ci Nous avons les images, et nous avons également le titre de l'article. Peut-être que nous allons d'abord le visualiser. Au lieu de les envoyer pour le moment, supprimons-les. Je vais simplement revenir à la page des produits pour le moment. Donc, si j'appuie et que j'explore, je vais accéder à cette page produit où j'ai les articles et ils sont les mêmes pour le moment. Donc, ce que nous allons faire , c'est passer à celui-ci, supprimer les deux. Comme nous pouvons le constater, nous avons une colonne. Supprimons tout cela. Nous en avons plusieurs. Et vérifions-le ici. À partir de là, jusqu'au second. Nous allons donc laisser l'un d'entre eux, et nous allons travailler avec. C'est avec cela que nous allons travailler. Nous avons des colonnes, et nous allons modifier le prix, le nom de la marque, le nom de la catégorie, la taille , les images, tout cela, et bien sûr, le titre. Revenons maintenant aux applications et emportons ces objets avec nous. Pour accéder à ces éléments, nous allons simplement écrire des éléments ici. Donc, dans celui-ci, après avoir créé les produits, nous allons examiner tous les articles que nous avons. Des éléments pour chacun vont créer cette fonction avec l'élément et plus, et de, nous allons les ajouter pour le script Java intégré dans ML ou EJS Okay Et bien sûr, nous allons prendre tous ces articles et les imprimer. Alors, comment faites-vous cela ? Je vais simplement prendre celui-ci et le coller complètement après celui-ci ici. Nous pouvons maintenant accéder à cet article. Par exemple, si je veux le titre de l'article ici, je peux simplement écrire ce titre, et je pense que nous sommes bons. Maintenant, si je reviens ici et que je clique sur Actualiser, je vais comprendre que je suis désolée, je n'ai choisi aucun article pour le moment, donc 5 % de catégorie, plus sur explorer pour le moment. Voyons ce que nous avons. Comme nous pouvons le voir, le titre n' est pas affiché, et je pense que c'est parce que nous avons oublié la saisie. Maintenant, si nous revenons en arrière et que nous nous rafraîchissons , nous aurons Baby Johnson, Campo, Baby Johnson, Baby Johnson. Ce sont tous les objets qui appartiennent à cette catégorie spécifique qui est Champ. Dans ce cas, nous allons modifier le prix, le nom de la marque, la catégorie et la taille. Revenons à notre code, et modifions-le ici même. En accédant au prix de l'article, et ici la marque sera comme d'habitude, catégorie de marque de l'article également. Donc catégorie d'article, enfin, celle-ci, qui est la taille, article cette taille. Je pense que nous sommes bons. Nous avons toujours l'image et nous le ferons dans une minute. Maintenant, si j'y retourne et que tout est neuf, nous avons tout changé. Nous avons la taille de la catégorie de marque, tout cela. Revenons en arrière maintenant. Bien sûr, en ce qui concerne l'URL de l'image, nous l'avons nommée IMR L. Nous y accédons juste ici, comme nous pouvons le voir, nous avons obtenu tout ce que nous voulions C'est tout pour les catégories, nous allons faire exactement la même chose pour les marques dans la prochaine vidéo. À bientôt. OK. 9. Marques à domicile: Bonjour et bon retour. Dans la dernière vidéo, nous avons créé le lien entre la catégorie et la page des produits. Par exemple, si l'utilisateur appuie sur celui-ci, tous les produits ou articles appartenant à cette catégorie spécifique seront les produits ou articles concernés. Maintenant, nous n'avons aucun objet dans le micro. Mais pour le shampoing, nous avons en fait quatre articles comme nous pouvons le voir ici. Nous avons donc ces quatre éléments et nous les avons affichés à l'aide quatre boucles en reprenant tous les éléments des APTO ici Nous prenons donc simplement tous les articles qui correspondent catégorie spécifique et nous les apportons simplement avec le rendu sur la page du produit, et bien sûr, nous les affichons comme nous l'avons dit précédemment, en utilisant une boucle à quatre boucles. Maintenant, ce que nous allons faire, c'est implémenter la même procédure pour la catégorie DGS Je suis désolée pour la marque G. Supposons que nous soyons sur la page de la marque DGS ? Donc c'est juste ici. Et nous allons faire la même chose pour cela, mais nous allons vérifier les marques. Nous allons toutefois afficher la page Web de la DGS sur les produits toutefois afficher la page Web de la DGS sur les avec des marques plutôt que des catégories C'est ce que nous allons faire. Ce que je pense, c'est d'avoir comme avant. Par exemple, ici, nous sommes allés vérifier. Ouais. Par exemple, la catégorie vers D JS, ce formulaire nous a redirigé vers les produits avec la méthode de publication. Ce que je pense, c'est de créer une méthode distincte pour ce type de publication, par exemple, au lieu des produits uniquement, nommons-le produits peut-être des marques dans ce cas, et ouvrons une fonction, par exemple Ouvrir. Maintenant, ce que nous allons faire, c'est prendre la marque du corps de la demande, la marque, et nous allons l'enregistrer sur console ici. Et bien sûr, nous allons poursuivre la recherche dans les objets. Donc, la recherche de l'article va trouver la marque qui est cette marque spécifique, erreur et articles trouvés. Dans ce cas, s' il n'y a pas d'erreur, nous allons vérifier les articles trouvés dont la valeur n'est pas nulle, puis nous avons trouvé des articles de cette marque, et nous allons les imprimer avant de les afficher sur la page du produit avec les articles défoés à la page du produit avec les articles côté de la demande que nous avons reçue Ouais. C'est ça. En gros, passons à la marque ou au DGS ici dans ce formulaire, nous allons passer aux produits, aux marques, et la méthode devrait être publiée. C'est ça. Je pense que nous sommes bons. Maintenant, si nous revenons en arrière , c'est rafraîchir. Donc ne vous inquiétez pas pour ça, ce ne sera pas le cas. C'est simplement parce que nous n' avons pas encore les produits. Nous n'avons pas les produits ici ni les articles nécessaires pour accéder à cette page de produits. Maintenant que nous sommes bons, nous en sommes à la marque, et si j'appuie sur explorer, nous allons accéder à la page des produits. Cependant, nous n' avons aucun article appartenant à cette catégorie ou à la marque Johnson. Dans ce cas, ouvrons une compresse. Compas Mongo DB et vérifions notre base de données. S'il y a un article qui a Shampoo comme marque. Je suis désolée, Johnson en tant que marque. Dans ce cas, si nous voulons nous connecter à la base de données, nous allons faire défiler la page vers le haut, le prendre comme lien et ouvrir notre base de données. Et comme nous pouvons le constater, nous avons les articles ici. Nous avons également le shampoing. C'est bon. Il n'y a donc aucun problème ici. Le problème est que ce que nous obtenons n'est pas défini et je suppose c'est parce que nous avons oublié de saisir la marque Alors peut-être ajoutons-le ici. Et ce sera un nom. Marque et dans ce cas, nous allons prendre la marque D. De cette façon, nous avons obtenu l'entrée qui est masquée par le nom de marque, afin que nous puissions y accéder en utilisant marque corporelle demandée avec la valeur du nom de marque de cette marque ici. Je pense que c'est bon pour le moment. Si nous revenons en arrière et que nous nous rafraîchissons, examinons Johnson. Et nous attendrons un peu, s'il n'y a pas d'erreur. Et je pense que nous sommes bons. Comme nous pouvons le constater, nous avons acheté tous les articles portant cette marque spécifique , Johnson. Nous avons donc quatre articles de Johnson trois shampoings et un Bo pour le moment. C'est ce que nous voulons faire. C'est ce que nous avons fait pour les marques également, ainsi que pour les catégories. C'est tout pour cette étape, passons à la suivante. Voyons donc si nous retournons chez nous, nous pouvons constater que les marques, les meilleures ventes et les catégories ne fonctionnent pas bien Nous devons donc les récupérer dans la base de données dont nous disposons et les afficher sur notre page d'accueil. Donc, retournons à la maison de D JS. C'est ça. Nous pouvons commencer par les marques ici. Voici nos marques, jetez un œil à nos marques et cliquez ici. Nous devons montrer toutes les marques que nous avons ou peut-être certaines d' entre elles. Et pour ce faire. Revenons ici, comme nous pouvons le voir à l'intérieur de la barre oblique, qui nous redirigera vers la page d'accueil En fait, nous reprenons toutes les marques, les meilleures ventes et les catégories et les affichons sur la page d'accueil. Nous avons ici les catégories, les marques et les meilleurs. Dans ce cas, nous pouvons y accéder directement sur la page d'accueil de GS. Dans ce cas, je vais commencer par créer peut-être juste ici après la fonctionnalité. Donc, ce que je pense faire, c'est au lieu d'imposer toute cette mer, je pense à quelque chose d' un peu plus simple Commençons par cela ici. Tout d'abord, nous allons peut-être contenir le conteneur, et à l'intérieur de ce conteneur, nous allons avoir la ligne et la colonne 12 au milieu avec le centre fiscal à côté. De haut en haut, et commençons par le titre, il y aura donc H deux avec la classe de section de titre. B trois, et peut-être Pb quatre. Je pense que nous sommes bons. Abandonnons les marques et le paragraphe sera de classe B cinq. Dans ce cas, nous allons écrire un aperçu de nos différentes marques. Maintenant, si nous revenons à zéro, nous pouvons voir que nous avons des marques, jetez un coup d'œil à nos différentes marques. Nous pouvons maintenant créer notre véritable carrousel. Dans ce cas, je vais simplement créer ici avec la colonne 12 au milieu. Dans ce cas, il sera doté carrousel et de l'ancien carrousel Bien entendu, nous pouvons maintenant commencer par présenter nos marques Nous allons donc créer quatre boucles. Nous avons dit que nous avions des marques et des marques. Nous allons prendre pour chacune d'elles et, bien sûr, nous allons coller la fonction avec la marque vers le haut et vers le haut de cette fonction Et bien sûr, en le fermant à la fin. Voilà, en gros, nous pouvons maintenant commencer par créer notre article. Il s'agit de l'élément de classe. Nous allons créer une classe appelée work. Dans ce cas, je vais créer un formulaire avec une action de produits ou quelque chose comme ça, nous en reparlerons plus tard, et la méthode sera publiée. Dans ce cas, nous allons créer notre bouton, qui a un type de soumission, et bien sûr, la classe doit également être PT N. Maintenant, après avoir cliqué sur ce bouton, nous allons créer la division qu'est la carte Nous allons donc avoir le texte centré au milieu. Et bien sûr, nous allons peut-être ajouter du style. Par exemple, la largeur, je vais la prendre comme 18 Rm. Nous pouvons maintenant avoir notre image avec le fichier source comme suit. Par exemple, nous avons ici l'image réelle qui se trouve dans le dossier des images, ainsi que l'image de marque. Et dans ce cas, nous allons prendre cette image, et nous allons ajouter le corps de la carte. Bien sûr. Le corps de cette carte serait le véritable nom de la marque. Donc dans ce cas, je vais faire en sorte que ce soit un H six, donc ce sera le texte d'une carte. Et cela contiendra une marque et bien sûr. OK. Il va falloir l'ajouter pour le rendre lisible. Je pense que c'est ça en gros. C'est ce que nous devrions faire. Si je reviens en arrière et que je clique sur Actualiser, nous allons obtenir cette image. Nous allons chercher Johnson, Cogate et Basin. Comme nous pouvons le constater, nous les avons tous au même endroit. Réparons-le. Ce que je pense se trouve juste à l'intérieur de celui-ci. Je vais prendre tout cela et peut-être créer ici. Une ligne et copiez tout cela dans la ligne. Bien sûr, nous allons peut-être créer une colonne de quatre ou faire en sorte que ça se passe comme ça. Ici, colonne de quatre. Dans ce cas, je vais copier tout cela une fois de plus. Basez-le ici et vérifions-le maintenant. Alors, qu'est-ce que nous avons ici ? C'est bon. Je pense avoir découvert quel était l'argent. C'est que nous créons chaque fois une nouvelle ligne, chaque fois que nous entrons dans cette boucle à quatre boucles. Maintenant, je pense que si je reviens en arrière et que je clique sur Actualiser. Oui, tout va bien pour le moment. Nous avons encore quelques modifications à apporter. Ainsi, par exemple, nous pouvons fixer la taille de l'image. Nous n'avons donc pas quelque chose comme ça. Ce sera plus grand que les autres images, et ce ne sera pas très beau non plus. Cela étant dit, je pense que c'est la fin de cette vidéo. Et dans la prochaine vidéo, nous allons faire exactement la même chose pour les catégories et les meilleures ventes, et bien sûr, nous allons ajouter le lien vers celle-ci. Ainsi, par exemple, si l' utilisateur appuie dessus, nous avons donc ce que nous avons ici, nous avons Johnson. Donc, si nous insistons sur Johnson, vous devriez le rediriger vers les produits liés à Johnson et, bien sûr, Colgate et Basin également Nous allons également faire exactement la même chose pour les catégories actuelles. Ceci étant dit, c'est la fin de cette vidéo, à bientôt. OK. 10. Accueil de la vente: Bonjour et bon retour. Dans cette vidéo, nous allons continuer notre page d'accueil, et bien sûr, nous allons commencer par le best-seller. La dernière fois, nous avons terminé à la fois les marques et les catégories. Nous avons toujours la page des meilleures ventes, et allons-y et commençons par elle. Ici, nous avons créé le premier conteneur qui contient les marques et voici les catégories. Je vais placer les best-sellers au cœur de tout cela. Pour ce faire, commençons par construire le conteneur. Et je vais créer le premier cours. C'est la première division, désolée, où le texte des lignes sera masqué et centré sur le texte Et dans ce cas, je vais avoir une autre colonne avec une marge de quatre sur toutes les dimensions. Dans ce cas, commençons par créer le titre. Le cours sera un présentoir ou une tasse et les quatre derniers, et je vais dire que c'est un best-seller. Je vais suivre celui-ci par une nouvelle division. Et je vais mettre le soulignement en noir Ce sont tous des cours de fabrication de bracelets de bottes, et vous pouvez les consulter sur le site officiel. Mais pour le moment, nous allons les utiliser comme ici. Je vais créer un soulignement suivi d'un paragraphe avec le début de la classe, disant « jetez un œil à certains de nos articles les plus vendus ». Maintenant, si nous revenons en arrière, asseyons-nous pour nous rafraîchir. OK. Et comme nous pouvons le constater, nous avons obtenu les meilleures ventes. Découvrez certains des articles les plus vendus. C'est essentiellement tout pour le paragraphe d'en-tête. Maintenant, revenons en arrière et commençons par une autre ligne. Dans ce cas, nous allons devoir créer une ligne avec un texte d'éléments de ligne et Maxto Nous pouvons maintenant parcourir nos meilleures ventes, et nous allons le faire en créant simplement une boucle complète. Idéal pour chaque fonction, nommons-le le best-seller. Bien sûr, nous allons ouvrir ce dossier. Et ferme-le juste ici. Je l'ai pris de mon mieux. Passons aux APogs et vérifions-le, que faisons-nous avec la page d'accueil Nous allons prendre les marques, les meilleures ventes catégories et nous les désignerons comme les meilleures ici. Nous allons choisir parmi nos meilleurs vendeurs celui-ci. Nous pouvons y accéder en créant simplement ces quatre boucles et en y accédant élément par élément. C'est essentiellement ça. Il ne nous reste plus qu'à créer nos colonnes. Colonne quatre et, bien sûr, peut-être dix si l'utilisateur utilise quelque chose de plus petit qu'un écran de bureau. Dans ce cas, je vais ajouter x auto, et je pense que nous sommes bons. Nous pouvons commencer par créer la carte. Je vais l'appeler carte 1 pour plus tard, peut-être pour le CSS, et les quatre avec x auto. Maintenant, nous pouvons commencer par créer l'image. La source de cette image sera exactement comme nous l'avons dit, allons-y et vérifions-le. Pour l'instant, nous n'avons créé aucune image ni aucun best-seller. Nous les ajouterons plus tard. Mais pour l'instant, nous supposerons qu'ils suivent le même format que le MMR L ici Nous allons placer le nom du produit sur des images en forme de points et de barres obliques nom du produit sur des images en forme de points et de barres Je vais donc y accéder en utilisant uniquement le best-seller, et j'y retournerai. Voyons dans notre schéma du best-seller, quel est le nom de celui-ci ? Dans le best-seller, nous avons le nom, nous avons l'image, nous pouvons donc y accéder en utilisant l'image. Dans ce cas, nous allons créer une image de best-seller, et je pense que nous sommes bons. Nous pouvons maintenant continuer en créant le titre dans le corps de la carte. Nous allons avoir le titre 5 avec la classe de texte en majuscules. Peut-être le mettre en gras, le blanc, le gras, la marge, l'élément de la liste des trois cartes Dans celui-ci, je vais simplement afficher le nom. Donc, le best-seller, le nom et pour être sûre que je vais y retourner et voir, nous avons nommé ce nom. C'est ainsi que nous pouvons accéder au nom. Maintenant, nous devons encore créer le formulaire pour soumettre nos boutons, par exemple, si l'utilisateur appuie sur ce best-seller spécifique, cela devrait le rediriger vers cette page spécifique. Pour ce faire, nous allons juste arriver ici après le titre, je vais créer un formulaire et ce formulaire sera redirigé vers un élément spécifique. Je vais le faire plus tard. Mais pour l'instant, la méthode, comme d'habitude, sera la publication. Dans ce formulaire, je vais créer un bas avec le type Submit class BTN, majuscules et deux lettres dorées sur le devant, ainsi que d' autres boutons de carte de prix C'est pour le CSS. Nous allons l'utiliser plus tard. Mais pour l'instant, avertissement BTN pour rendre le texte jaune et le texte clair Donc, attention BTN, je suis désolée, d'avoir rendu le bouton jaune et le texte clair pour le rendre clair Et je vais simplement écrire les détails. OK. Je pense que c'est bon pour le moment, nous avons notre formulaire, nous avons notre bouton, et tout semble bon. Si je reviens en arrière et que je clique sur Actualiser. Oui, rien ne se passera puisque nous n'avons pas le best-seller ici. Ce que nous essayons de faire, c'est de rentrer chez nous et d'essayer d'accéder aux meilleurs produits qui ne sont pas disponibles parce que notre base de données ne contient aucun best-seller. Réglons ça. Nous avons en fait créé quelques best-sellers ici, mais nous n'avons pas eu l'occasion de les ajouter à notre schéma. Revenons tout en bas. Dans ce cas, nous allons créer le meilleur insert Many I remember B un, B deux, B trois. Bien entendu, nous allons créer la fonction avec l'erreur. Donc, s'il y a une erreur, déconnectez-la, sinon, enregistrez simplement les meilleurs ensembles. Et maintenant, si j'y retourne, si j'y retourne, nous pouvons voir que nous les avons créés, nous les avons créés sous le nom Johnson, Cgate hydrant, et l'identifiant suivant Cependant, je pense que nous avons oublié certaines choses, par exemple l'image. Ouais. Ce que nous avons fait ici, c'est que nous avons créé le best-seller avec le nom IMG au lieu d'image. Une façon de résoudre ce problème est de simplement supprimer celui-ci. Ce sera IMG. Bien entendu, nous devons revenir à notre base de données, l' actualiser et publier tous ces best-sellers ici. Supprimez cette collection, car nous n'en avons pas besoin sans leurs images. Maintenant, si nous revenons en arrière et que nous enregistrons celui-ci, actualisons-le. Ouais. C'est bon. C'est ce qu'il faut faire. Si nous revenons ici et que cela fait référence, nous trouverons la base de données des meilleures ventes. Je pense donc que nous devrions attendre un peu. Mais pour l'instant, nous pouvons voir que nous l'avons ici. Nous avons les marques, les catégories et l' image. Et dans ce cas. Si nous y retournons maintenant, voyons comme nous pouvons le voir, nous avons les meilleures ventes, jetez un coup d'œil à certains des meilleurs vendeurs. Nous avons le Johnson Colgate et l'autre. Je pense que nous avons un problème avec le MaterL et c'est une Mais l'idée générale est que nous avons obtenu tous nos produits, tous nos articles et les meilleures ventes des marques et des catégories. C'est principalement ça. C' est ainsi que nous pouvons créer la page ou la section des meilleures ventes. Et bien sûr, ce que nous allons faire maintenant, c'est créer ce bouton. Maintenant, si nous appuyons dessus, cela nous mènera à une page d'erreur. Cependant, nous devons nous rediriger vers notre page produit réelle où nous allons voir le produit spécifique. Il s'agit d'un article qui a des détails spécifiques, des tailles spécifiques, etc. Si l'utilisateur souhaite acheter cet article, il doit également voir tous les détails et il peut le faire en cliquant simplement sur les CD. Maintenant, ce que nous allons faire, c'est faire de même pour les marques et les catégories. Maintenant, si vous appuyez sur les marques, cela nous mènera à tous les articles appartenant à des marques spécifiques. Comme nous pouvons le voir si nous appuyons ici, nous avons tous les éléments. Nous avons quelques détails ici, mais nous n'avons pas la description, nous n'avons pas la quantité, et bien sûr, nous ne pouvons pas commander d'ici. Ce que nous allons également faire, c'est que si nous appuyons dessus, cela devrait également nous amener à la page de description du produit. Et dans ce cas, nous avons déjà créé ici même, nous avons des produits et nous avons des produits. Cette page devrait être affichée chaque fois que nous appuyons sur quelque chose comme ça. C'est soit dans les marques, soit catégories, soit même dans les meilleures ventes devrait nous rediriger vers Cela devrait nous rediriger vers cette page spécifique qui est le produit de JS et afficher tous les détails de ce produit spécifique que l'utilisateur souhaite. Parce que c'est essentiellement tout pour cette vidéo. J'espère qu'il vous a plu. Et la prochaine, nous allons faire ce dont nous avons parlé maintenant et à ce moment-là. OK. 11. Page produit: Bonjour, et nous y reviendrons dans cette vidéo, nous allons continuer le développement de ces produits. Voici donc les produits, et comme nous l'avons dit, nous voulons que chaque fois que nous appuyons sur un produit spécifique, nous voulons être redirigés vers la page du produit, qui est principalement celle-ci. Comme nous l'avons dit, nous voulons également le faire si nous nous intéressons à la marque ou à la catégorie. Si nous sommes ici dans la catégorie, nous avons insisté sur le shampoing et nous avons été autorisés à accéder à la page du produit. Nous avons ici quelques produits spécifiques. Si je clique sur ce produit en particulier, je veux accéder aux détails de ce produit spécifique ainsi qu' à la section des meilleures ventes. Donc, si je suis ici dans le best-seller et que je veux voir les détails de ce produit, je devrais également être redirigé vers cette page spécifique, qui est le produit de GS. Alors, comment s'y prendre ? Maintenant, pour en revenir à l'Apo JS, nous pouvons voir que dans le schéma du best-seller, nous avons créé quelque chose qui s'appelle l'article, qui est principalement le type, et il s'agit en fait de l'identifiant de cet article. Objet de référence, et bien sûr, nous avons ici l'identifiant. Si nous voulons accéder à cet article, nous pouvons y accéder soit par identifiant, soit par nom, soit par image, mais cela n'a aucun sens d'y accéder par image, et cela n'a pas non plus de sens d'y accéder par son nom . Peut-être avons-nous plus qu'un produit portant le même nom, peut-être des tailles ou des quantités différentes, etc. Cela dit, nous pouvons accéder à cet élément spécifique via l'identifiant de l'objet. C'est ce que nous allons faire. Maintenant, pour en revenir à la maison de la DGS, j'ai dit : je laisse ce champ vide pour le moment C'est le moment de placer quelque chose ici, là où nous allons aller. Nous allons passer aux produits. Cependant, nous allons ajouter quelque chose, et c'est une coutume que Javascript nous permet de faire et de le faire. Nous allons simplement écrire les produits. Nous allons créer deux produits. Cependant, nous ne produisons pas uniquement des produits, des produits et des articles les plus vendus. Et cet article nous permettra prendre la pièce d'identité et de la placer ici. Supposons donc que nous ayons ce D ici. Désormais, chaque fois que nous effectuons un rendu, nous le faisons à chaque fois une action spécifique ou différente. Peut-être que nous faisons le rendu sur le premier article, donc nous allons avoir des produits. Nous allons avoir quelque chose comme ça. Des produits. En supposant que le premier identifiant est un. Donc, ce sont des produits, la deuxième fois, si nous accédons au deuxième produit, peut-être que les produits sont deux, et ainsi de suite. L'idée ici est donc que ce n'est pas le cas, ce n'est pas pareil à chaque fois que nous effectuons un rendu sur un produit. Dans ce cas, ce que nous allons faire, c' est utiliser ce que l'on appelle personnalisé. Cela étant dit, nous devons maintenant revenir aux AppG et créer notre fonction ici. Alors, comment le faites-vous ? Nous allons simplement créer l'application get product, et bien sûr, dans ce cas, nous allons obtenir produits plus le D de ce produit. Alors, comment faites-vous cela ? Revenons en arrière, faites défiler la page jusqu'en bas. Peut-être ajoutons-le ici après le produit. Ici, nous avons les produits ici. Peut-être ajoutons-le également après les produits parents. Ici. Ce que nous allons faire, c'est acheter ces produits et nous savons également qu'il s'agit d'une coutume. Ce que nous allons faire, c'est placer un c et taper custom. Dans ce cas, nous allons créer la fonction. Et aussi. Ce que nous allons faire, c'est créer la personnalisation, c' est-à-dire simplement obtenir cette personnalisation à partir d'ici. Comment y accéder ? C'est en fait assez simple avec simplement des requêtes de type, personnalisées. C'est ainsi que nous pouvons obtenir l'identifiant d' ici et y accéder ici. En gros, nous pouvons maintenant rechercher dans les articles et trouver l'article spécifique avec cet identifiant spécifique. Maintenant, si nous remontons en arrière, nous pouvons voir que nous commençons ici par le schéma Mongoose qui saisit cet identifiant d'objet Nous avons donc ici l'idée de cet objet en particulier, et il ne provient pas du best-seller. Ça ne vient pas de ce semeau, ça vient de l'article. Ce que nous faisons en fait , c'est passer à l'article. OK. Et si nous allons dans la base de données, nous pouvons le trouver ici même. Nous avons donc l'article. Ce que nous faisons en fait, c'est que nous prenons cet identifiant à partir d'ici et le plaçons dans notre schéma sous forme d'élément. OK. C'est ça, en gros. Maintenant, pour en revenir aux produits, nous pouvons rechercher dans l' article une base de données, le trouver par identifiant. Nous allons rechercher par erreur de fonction personnalisée et les éléments trouvés de haut en haut. S'il n'y a pas d'erreur, nous allons vérifier si des objets ont été trouvés, nous allons les rediriger. Peut-être que nous allons d'abord les enregistrer, les objets trouvés. Je suis désolée Et dans ce cas, nous allons simplement afficher les objets trouvés. Si ce n'est pas le cas, bien sûr, nous allons afficher ou afficher sur la page d'accueil. Reposez donc cela directement sur la page d'accueil. Maintenant, si nous trouvons les objets, nous voulons simplement créer, prendre la marque de ces articles Donc, nous allons d'abord afficher ces objets trouvés. Prendons-les simplement et emmenons-les sur la page du produit. Dans ce cas, nous allons simplement effectuer le rendu du produit en même temps que la demande et les articles. Quels objets seraient trouvés. Peut-être nommons-le les objets trouvés ou l'objet. Dans ce cas, je pense que c' est bon pour le moment Si nous trouvons quelque chose, nous allons afficher la page du produit à côté de ces articles trouvés. Maintenant, nous allons accéder à page du produit, puis afficher ces articles trouvés sous forme de formulaire ou peut-être sous forme de détails de ces articles trouvés. Ici, nous n'avons qu'un seul article. Cependant, il se peut que nous en ayons plusieurs, nous allons simplement prendre le premier, c'est pourquoi je le place en tant qu'objet. Maintenant, si nous revenons en arrière et que nous appuyons sur Actualiser, je fais défiler la page jusqu' à la presse à succès . Nous avons ici des produits non définis. Revenons en arrière et voyons voir. Ici, nous avons des produits plutôt que des produits. Maintenant, si j'y retourne. Maintenant, le problème auquel nous sommes confrontés, c'est que j'ai oublié d'arrêter d'insérer les best-sellers Allons-y et supprimons toute base de données des meilleures ventes à partir d'ici. Et gardez-le encore une fois. Alors abandonnons-le maintenant. Ce que je vais faire, c'est que je vais peut-être réactiver Noto. Nous allons les stocker, puis enregistrer celui-ci. heure actuelle, nous allons avoir notre meilleure base de données ici et elle ne contient que trois produits que nous allons présenter. Ça y est, en gros, c'est rafraîchir. Nous allons maintenant faire exactement la même chose pour tous les produits. Il s'agit soit de marques, soit de catégories. Quoi qu'il en soit, nous allons être rendus ou redirigés vers le JS du produit et nous allons continuer à partir de là. Nous voici dans les produits de JS. Dans ce cas, nous allons créer aller chaque bracelet ici au lieu d'aller nulle part. Nous allons résoudre ce problème en ajoutant simplement l'emplacement ou ajoutant le lien vers la page spécifique. Dans ce cas, nous allons essayer de taper des produits, ce qui correspond essentiellement à la page des produits. Permettez-moi simplement d'ajouter les devis, les produits, puis d'ouvrir ici, nous avons les articles Je peux ajouter un article Do ID. Dans ce cas, je peux accéder à l' idée de l'article en question. Bien entendu, c'est ce que nous sommes en train de faire. Si j'y retourne, essayons-le. Il se peut que nous rencontrions des erreurs, mais nous pouvons voir tout au long du voyage. Si je reviens à zéro, passons à la catégorie Par exemple, si j'appuie sur le shampooing question, cette page s'affichera si j'appuie sur celui-ci. C'est bon. Je cours donc vers la page d'accueil. Je suppose que nous avons une erreur puisque ce que nous avons dit ici dans l'application vers JS, si nous rencontrons une erreur dans cette application pour obtenir les produits, nous allons la rediriger pour qu'elle soit redirigée vers la page d'accueil. Nous n'avons pas rencontré d'erreur, nous n'avons simplement trouvé aucun article portant cet identifiant spécifique. Ce que nous allons faire, c'est les diviser en trois catégories. Celui du best-seller, celui des marques et celui des catégories. Je viens donc de créer celui pour la marque. Je l'appelle donc produit de marque. Donc, ce que nous allons faire, c'est obtenir celui-ci, obtenir le nom du corps que nous allons créer puis rechercher dans les éléments de la base de données des articles. Recherchez il y a un titre exactement comme d'habitude. Et dans ce cas, s'il n'y a pas d'erreur et que nous avons trouvé des articles, nous allons simplement les afficher et, bien sûr, afficher même temps que l'article et la demande que nous avons reçue. OK. Donc c'est tout, c'est ce que nous faisons, et nous allons faire exactement la même chose pour le produit ou les catégories dans ce cas, n'est-ce pas ? Alors faisons-le ici. Ce que nous allons faire, c'est obtenir une catégorie de produit. Ici, je suis désolée, j'ai une faute de frappe, donc ça y est et on comprend Maintenant, dans celui-ci, nous allons créer la fonction. Acres ouvre cette constante personnalisée demandant par son nom et en l'enregistrant ici juste pour la visualiser , puis rechercher dans les éléments. Trouvez celui qui correspond à cela en termes de titre, et bien sûr, si nous avons une erreur, nous devons l'afficher et sinon, nous trouverons quelque chose. Donc, s'il n'y a pas d'erreur, nous faisons autre chose pour afficher cette erreur. Et bien sûr, nous allons vérifier si nous avons trouvé des articles puis simplement rediriger vers la page d'accueil. Si nous trouvons des objets, nous devons simplement les afficher sous forme d'objets. Articles Pound Plus. Bien entendu, nous allons afficher la page du produit à côté de la demande que nous avons reçue et de l'article que nous avons trouvé. C'est ça, en gros. C'est ainsi que nous pouvons les mettre en œuvre facilement. Nous allons juste trouver celui-ci et simplement nous y frayer un chemin. OK. C'est donc tout dans la prochaine vidéo, nous allons les montrer ou les visualiser en action, et bien sûr, nous allons continuer en construisant. Nous avons toujours la page d'administration, nous avons toujours les commandes. Nous devons ajouter toutes les informations de l'utilisateur dans notre base de données, et bien sûr, nous allons continuer à passer sa commande, à stocker sa commande dans notre base de données et, bien sûr, à les afficher sur la page d'administration ainsi que sur la page de commande de l'utilisateur. Ceci étant dit, c' est la fin de cette vidéo. On se voit dans le prochain. OK. 12. Panier: Bonjour, et bon retour. Dans cette vidéo, nous allons jeter un œil à la page du produit. Comme nous l'avons dit, nous venons de mettre en place plus tôt la page des meilleures ventes sur laquelle nous pouvons cliquer sur C details, et elle nous redirigera vers la page du produit. Et il s'agira du titre de l'article, de la description, du prix, de la catégorie de marque, de la taille et du nombre de pièces souhaitées par l'utilisateur. Ensuite, il peut également l' ajouter à sa carte. Dans cet exemple, ce que nous allons faire, c'est modifier ces titres, la description et les prix. Elles sont statiques, nous voulons les rendre dynamiques. Je suis désolée, nous voulons les rendre dynamiques et elles peuvent être modifiées pour chaque produit. Dans ce cas, revenons à la page du produit. Et sur cette page produit. Maintenant, souvenez-vous que tout à l'heure, nous les avons envoyés ici en tant que produit de la meilleure qualité et que nous les avons rendus à l'aide de l'article. Donc, ce que nous allons faire, c'est accéder à la page du produit. Et comme nous pouvons le constater, nous avons le titre de l'article, une description, le prix, nous voulons donc les modifier. Alors, comment les modifier ? C'est assez simple. Dans ce cas, nous pouvons appeler le titre de l'article. D'accord. Et ici, nous devons appeler l'article D description, puisque nous décrivons cet article et que nous l'avons dans notre base de données. Donc, comme nous pouvons le voir, supprimons-les simplement et c'est bon. Donc, description de l'article. Laissez-moi m'assurer que dans la base de données, nous pouvons trouver la description. Nous pouvons maintenant afficher la marque et la catégorie img R L. Quant à la marque, affichons-la ici. Donc, comme nous l'avons dit, marque de l'article. Pour ce qui est de la catégorie, c'est pareil. Donc, la catégorie de l'article quant à la taille, nous pouvons la placer ici. C'est notre taille, vous pouvez peut-être l'ajouter ici, taille de l'article. Ensuite, nous avons combien de pièces. Ce n'est pas pour nous. C'est pour l'utilisateur. Nous avons le bouton Ajouter pour couper. Nous n'avons pas vraiment besoin de faire quoi que ce soit ici. Cependant, nous devons changer l'image, et c'est l' image de l'article R L comme ceci. Je pense que nous allons bien maintenant, si nous revenons en arrière et que nous appuyons sur Actualiser, nous aurons le prix. Je suis désolée, nous devons y retourner. Je pense que le problème est que nous affichons ou que nous prenons le premier titre ou n'importe quel autre titre de l'article. N'oubliez pas que lorsque nous recherchons un article, nous recherchons tous les articles portant le même titre. Dans ce cas, nous renvoyons une série d' articles et nous voulons juste le premier article Pour régler ce problème, nous utiliserons simplement l'article à zéro. Cet article est en fait une liste d'articles. Nous n'aurons besoin que du premier, pour y faire face, nous allons simplement écrire à zéro. Ici, nous avons oublié le prix de l'article, et bien sûr, à zéro également, nous avons oublié le prix égal, et nous allons faire la même chose pour cela. Je pense que nous sommes bons, nous avons toujours la taille et l'image. C'est tout pour l'image. Maintenant, si nous revenons en arrière et que nous appuyons sur Actualiser, nous allons obtenir quelque chose comme ça. Nous avons notre image, notre titre, notre description, notre prix, notre marque, notre catégorie et notre taille, ainsi que la quantité souhaitée par l'utilisateur. Ici, il appuie sur la quantité, puis il peut l'ajouter à sa carte. Dans ce cas, ce que nous avons fait, c'est établir un lien entre le com ici, nous avons le best-seller et nous avons établi un lien entre ce produit et sa description. La page du produit est désormais liée à la page d'accueil et il suffit créer cette fonction qui prend de créer cette fonction qui prend l'article et le recherche dans la base de données des articles, puis revient à la page du produit et affiche toutes les descriptions ou toutes les informations relatives à l'article en question. Voilà, en gros, c'est ainsi que nous pouvons établir un lien entre eux. Maintenant, ce que nous allons faire, c' est travailler avec cet ajout à la carte. Maintenant, nous appuyons sur cette carte d'ajout et rien ne se passe. Nous allons faire en sorte que cela fonctionne. Nous allons l'ajouter à fiche de l'utilisateur, et bien sûr, nous allons le rendre, peut-être sur la page d'accueil ou sur la page des produits. Nous verrons. Revenons au code ici. Nous avons le bouton juste ici, et ce bouton est du type Soumettre et nous avons notre formulaire. Maintenant, l'action de ce formulaire concerne l'expédition, nous allons donc avoir une fonction d'expédition, et la méthode devrait être la poste comme d'habitude. Maintenant, pour en revenir à l'apo JS, nous allons créer une nouvelle fonction, qui consiste essentiellement à faire le lien entre le produit et la page d'expédition. Faisons-le ici et je vais d' abord créer la fonction, puis nous en discuterons. Allons-y. C'est bon. Tout d'abord, application, mais après l'expédition, créez les fonctions comme d'habitude, haut et en haut des parenthèses Et bien sûr, nous allons créer une date pour cette fonction ou chaque fois que l'utilisateur saisit ou ajoute des éléments à sa carte. Je le nomme created a et ce sera une nouvelle date, et je vais en faire une chaîne locale. Dans ce cas, nous allons commencer par créer la boîte. Donc, faites la demande par la boîte. Et dans ce cas, la boîte est bel et bien là. Nous avons cette entrée, qui est la boîte, et dans cette boîte, nous allons avoir la quantité souhaitée par l'utilisateur. Je vais ajouter quelques entrées qui sont masquées afin les avoir avec nous dans le fichier aptOS Dans ce cas, je vais avoir le titre du nom. La valeur sera telle que le nom indique le titre de ce produit, et je vais en avoir quelques autres Nous allons donc avoir l'image du nom et la valeur sera égale à item.rl, puis nous aurons enfin la dernière entrée, qui est également masquée, et ce sera le prix de valeur, il sera égal au prix de l'article, et je pense que nous sommes toujours J'ai ici pour modifier celui-ci et c'est parti. C'est ça, principalement. Nous avons maintenant nos entrées ainsi que la quantité souhaitée par l'utilisateur, nous pouvons continuer et travailler avec la fonction apto JS ici Tout d'abord, nous allons obtenir la boîte, nous allons obtenir la taille ou demander par taille. Le demandé selon l'âge, le titre comme d'habitude et le prix comme d'habitude. Maintenant, je ne sais pas si nous avons ajouté la taille. Passons au produit et ajoutons-le ici même. Nous avons l'entrée , puis le nom, la taille et la valeur seront l'article de cette taille. C'est ça, en gros. Retournons en arrière. Nous sommes maintenant prêts à utiliser cette fonction. Ce que nous allons faire dans un premier temps, c'est trouver l'utilisateur qui se connecte et, bien sûr, nous allons l'ajouter à sa carte. Donc, ce que nous faisons dans un premier temps, c'est vérifier si l'utilisateur est verrouillé. Comment faites-vous cela ? Nous allons créer la longueur. Par exemple, laissez-moi d'abord créer une variable, afin que cette variable soit fausse, cela indiquera si l' utilisateur est verrouillé ou non. Et s'ils demandent à l'utilisateur que la longueur des commandes soit égale à zéro, nous allons faire quelque chose. Ce que nous allons faire, c'est prendre cette variable S et la rendre vraie. Ce S indique que l'utilisateur commande pour la première fois et que nous souhaitons afficher ou prendre ses informations afin d'avoir une meilleure idée de sa position, de son numéro de téléphone, etc. S sera vrai dans ce cas, et nous allons vérifier si l'utilisateur et la longueur sont supérieurs à zéro. Dans ce cas, cochez cette case, cette commande cochée sera la dernière commande passée à la commande et au paiement. Ce que nous faisons principalement ici, c'est demander à l' utilisateur de vérifier si l'utilisateur a déjà passé une commande, et dans ce cas, s' il a des commandes, nous allons procéder au paiement de la dernière commande. Maintenant, n'oubliez pas que le check-out est une variable qui est vraie si l'utilisateur est parti et qui tombe dans le cas contraire. Et dans ce cas, nous allons le prendre et nous allons commencer par notre code ici en fonction de ces deux éléments. Si l'une d'entre elles est vraie, cela signifie que nous voulons les ajouter à notre base de données. Comment faites-vous cela pour vérifier si S est vrai ou si coché est vrai. Dans ce cas, ce que nous allons faire, c'est rechercher par identifiant et mettre à jour. Il s'agit d'une méthode permettant de rechercher article ou un utilisateur dans ce cas, possédant l'identifiant spécifique et de mettre à jour les informations suivantes. L'identifiant sera un nom d'utilisateur demandé, puis nous allons l' ouvrir, et voici comment nous pouvons le changer, nous écrivons le signe du dollar, nous et nous pouvons commencer par la mise à jour. Ce que nous allons mettre à jour, ce sont les commandes de cet utilisateur en particulier. Nous allons ouvrir ceci et nous allons mettre à jour. Dans ce cas, nous allons ouvrir le tableau et des éléments spécifiques. Nous allons donc mettre à jour les articles spécifiques, et dans ce cas, je vais mettre à jour l'image, le titre, le prix, la quantité et la taille. Comme nous l'avons dit, l'image sera une volonté le prix sera le prix et la quantité sera la boîte que nous avons reçue. D'accord. Et enfin, cette taille sera la même que celle que nous avons également obtenue. Maintenant, si les deux ne sont pas satisfaits, si l'un d'eux l'est, nous trouvons que nous pouvons travailler avec, dans le cas où les deux ne sont pas satisfaits, nous devons faire autre chose. Dans ce cas, commençons par rechercher l'utilisateur, l' identifiant et l'identifiant utilisateur de la demande de mise à jour, et nous allons utiliser la même méthode, push et c'est ainsi que nous envoyons ou mettons à jour, nous allons trouver les commandes qui le sont enfin, et les articles dans ce cas, nous allons mettre à jour l'image, le titre et le prix, la quantité et la taille. Je pense donc que nous sommes bons. Ce que vous devez faire pour le moment, c'est simplement sortir d'ici et filtrer en fonction du paiement. Nous voulons que le paiement soit faux. Alors, comment faites-vous cela ? Nous allons simplement taper des filtres matriciels. Voici comment nous procédons, nous tapons les filtres matriciels checkout égaux à false. Cela étant dit, c'est la fin de la visite que je poursuivrai lors de la prochaine visite pour vous voir. 13. Se connecter: Bonjour et bon retour. Dans cette vidéo, nous allons voir comment nous connecter et nous déconnecter ici. Par exemple, si nous voulons nous connecter, je peux saisir mon identifiant. S'il y a un problème, je recevrai cette page Web si votre e-mail ou votre mot de passe sont erronés, et ils me demanderont e-mail ou votre mot de passe sont erronés, de réessayer. Dans ce cas, si je souhaite m'inscrire, par exemple, je peux simplement taper mon nom, puis mon e-mail. Et bien sûr, un mot de passe, faisons-en un pour le moment , puis cliquez sur. Voyons voir. C'est mon nom et c'est n'importe quel e-mail, unis at example.com Faisons-en un et A. Maintenant, si je clique sur Signp, je serai redirigé vers la page d'accueil, comme nous pouvons le voir, nous pouvons voir maintenant cette icône, et bien sûr, nous avons l'option de déconnexion Maintenant, nous le faisons parce que si nous voulons aller à la marque, par exemple, comme nous l'avons dit, si nous marquons un score pour Johnson. Supposons que nous ayons ces produits, ces images ne soient pas enregistrées ou ne se chargent pas pour le moment, nous allons attendre un peu. Mais pour les besoins de notre argumentation, nous avons obtenu cette page où nous avons les produits. Dans ce cas, je souhaite ajouter celui-ci à ma voiture. Si je suis connecté, je vais être redirigé vers la page d'expédition comme indiqué. Si ce n'est pas le cas, déconnectons-nous. Donc, si je ne suis pas déconnecté, si je ne suis pas connecté, on va me demander de me connecter. Donc, si j'y retourne maintenant et que j' essaie de l'ajouter à ma carte, me demandera de me connecter à nouveau. Je souhaite saisir l' e-mail et le mot de passe. Et c'est ce que nous avons réellement fait dans ce cas. Donc, lorsque nous avons implémenté le produit ou la fonction d'ajout à la carte qui nous amène à l'expédition, nous avons également indiqué que si nous voyons « Donc, si nous vérifions si l' utilisateur est connecté ou non, si c'est le cas, nous mettons à jour la commande de l'utilisateur ». Sinon, nous allons simplement mettre à jour l' article spécifique de cette commande. Bien entendu, je vais maintenant voir si l'utilisateur ou l' adresse de l'utilisateur est disponible. Sinon, je vais passer à cette page d'expédition comme nous l'avons dit. Bien entendu, si nous avons les informations utilisateur, je vais simplement me rendre sur la page Web de passation de commande. Maintenant, voici une idée générale de ce que nous allons faire. Mais bien sûr, nous allons simplement entrer dans les détails et, bien sûr, mieux le comprendre pendant que nous y travaillons. C'est bon. Ce que je pense maintenant c'est de créer la page d'échec de connexion, puisque nous avons l'inscription et que nous n'avons pas encore la connexion, la connexion échoue. Ce que je vais faire, c'est créer un échec de connexion ici, et tout ira bien. C'est le fichier EJS, et c'est là que nous serons redirigés si quelque chose ne va pas lors de notre connexion Ce que nous allons faire, c'est d' abord inclure l'en-tête So from partials. Ensuite, nous allons commencer par le liquide du récipient. Je vais donc créer la ligne, qui serait au centre du texte principalement avec un peu de rembourrage et la colonne serait de taille moyenne à trois Je pense que nous sommes bons. Le second aura six ans. Et dans ce cas, je vais écrire des notes, suivies d'un paragraphe de début de classe, disant que votre e-mail ou votre mot de passe sont erronés. Mais c'est tout. Nous allons maintenant lui demander de réessayer. Et je vais commencer par créer le formulaire proprement dit pour réessayer. Ce formulaire nous mènera au sinus n. Nous le créerons plus tard, et la méthode sera la même que d'habitude. Commençons maintenant à travailler avec ce formulaire. Je vais créer le modèle de dialogue. Ils viennent de. Je vais créer le contenu du modèle. Je vais commencer par l'en-tête du modèle. OK. Voilà, en gros, nous pouvons maintenant placer notre en-tête. Je vais écrire sine n. Cela sera donc modélisé. Titre. Je vais écrire signe suivi d'un bouton avec le bouton de saisie. Le cours sera BTN, fermé, et bien sûr, ce que je vais faire , c'est ignorer cela et nous l'utiliserons plus tard Cette erreur et elle sera égale au modèle. Dans ce cas, nous allons continuer à créer le corps du modèle. Et bien sûr, je vais créer le groupe de formulaires par Y deux. Et bien sûr, je vais commencer par le label. Cette étiquette sera donc pour le courrier électronique et la classe sera l'adresse e-mail de l'étiquette. Ensuite, je vais suivre par le type mad, et bien sûr, par certains cours tels que le contrôle des formulaires. Je vais avoir mes deux, P deux et les entrées sous forme de classes. Le nom sera principalement le nom d'utilisateur. Ensuite, je vais créer un autre groupe de formulaires pour le mot de passe. Je vais aller de l'avant et copier ceci. C'est copiez-le et collez-le ici. Cependant, ici, pour le mot de passe, je vais écrire le mot de passe. Et le type sera également le mot de passe ainsi que le nom. OK. C'est donc principalement ça. C'est ainsi que nous pouvons créer l'adresse e-mail et le mot de passe. Alors allons-y et visualisons-le ici. Supposons que je me sois trompé en me connectant. Cela m'amènera à cette page où j'ai adresse e-mail Ops, le mot de passe, je me trompe. Réessayez, nous avons le signe, adresse e-mail et le mot de passe à côté du bouton de connexion ici. Créons-le donc là-bas. Ce que nous allons faire maintenant, c'est créer le pied de page du modèle et je vais justifier le contenu. Démarrer. Dans ce cas, je vais créer le bouton que nous allons soumettre, et la classe sera T N. Peut-être ajoutons un peu de style, comme la couleur de fond. Je vais faire en sorte que j'aime le sclorthree 18f5, huit F cinq, et je vais écrire sine C'est ça, en gros. Maintenant, si je reviens en arrière, comme nous pouvons le voir, c'est notre page, et cela nous redirigera vers, comme nous l'avons dit, ce formulaire sinusoïdal ou cette action de signature que nous allons créer plus tard dans l'apto JS C'est notre signe d'échec. Revenons à notre apto JS et poursuivons notre travail ici. Maintenant, dans le fichier apto, nous allons créer la fonction de connexion, et dans ce cas, laissez-moi la créer juste en dessous de celle-ci juste en dessous Ce que nous allons faire, c'est créer l'apto post, signer, et ce que nous allons faire, c'est créer les fonctions comme d'habitude, et je vais créer l'utilisateur Dans ce cas, l'utilisateur sera dans U user Okay. Ouvrons-les, et le nom d'utilisateur sera demandé par nom d'utilisateur. Comme nous l'avons dit, nous avons obtenu le nom d'utilisateur de l'utilisateur dans le corps de la requête, et nous allons vérifier si cet utilisateur se connecte. Alors, comment faites-vous cela ? Nous vous demandons de vous connecter. Nous saisissons l'utilisateur que nous avons créé et nous créons la fonction avec l'erreur. S'il y a une erreur, il suffit de se déconnecter, sinon, nous allons vérifier. Si le passeport est authentifié, tout va bien. Sinon, nous devons le rediriger vers le champ de connexion que nous venons de créer plus tôt. Alors, comment faites-vous cela ? Nous écrivons donc Passport Authentic Huit Authentique Huit et nous allons ouvrir. Nous allons dire qu'un échec redirige deux, nous allons le rediriger vers le signe fail. Il s'agit d'une autre fonction que nous allons créer ultérieurement, et cette fonction sera uniquement chargée du rendu pour signer le fichier DGS défaillant Dans ce cas, après avoir créé celui-ci, nous allons continuer en ayant la requête, d, suivie de la fonction, et cette fonction sera simplement redirigée vers la page d'accueil. OK. Donc, en gros, c'est tout. C'est ainsi que nous pouvons le faire. Maintenant, ce que nous allons faire, c'est créer l'application sans arrêt. Donc, comme nous l'avons dit, si quelque chose ne va pas, nous allons être redirigés vers la phase sinusoïdale. Alors, comment faites-vous cela ? Apt sine et fail comme les fonctions habituelles, up and up et render to sine and fail. OK. Nous avons donc la demande comme d'habitude, et nous avons terminé. C'est ainsi que nous pouvons le faire. Tout d'abord, nous avons créé le message approprié pour vous connecter. Et ce que nous faisons essentiellement , c'est que nous obtenons le nom d'utilisateur de l'utilisateur, nous créons un utilisateur. Et nous sommes en train de vérifier. Si cet utilisateur se connecte en ce moment, c'est bon. Nous allons simplement voir que cet utilisateur se trouve réellement dans notre base de données. Nous pouvons simplement accéder à la page d'accueil et ajuster la connexion pour nous déconnecter. Dans ce cas, en indiquant que l'utilisateur est connecté en ce moment et qu'il peut également acheter ou ajouter à sa carte. Sinon, si ce n'est pas le cas, nous allons le rediriger vers la page Web d'échec de connexion. Et comment faites-vous cela ? Nous passons à l'abDTGT que nous rendons au panneau et échouons via le signe abd g et échouons ici C'est ça en gros. Maintenant, si nous revenons à la maison, et comme vous pouvez le constater, nous sommes maintenant confrontés au design et à l'échec. Ce que nous devons faire maintenant, c'est que si je l'ai réellement créé, supposons que je me sois connecté et que tout soit bon maintenant. Si je rentre chez moi, par exemple, comme vous pouvez le voir, je suis connecté, nous avons le bouton de déconnexion en ce moment et nous avons cette carte. Si j'appuie sur la carte, nous allons afficher cette page Web où l'utilisateur peut peut-être ajouter toutes ces informations, puis appuyer sur Suivant. OK. Et bien sûr, nous allons ajouter ce paiement. Pour l'instant, nous n'avons qu'un seul paiement en espèces à la livraison. Si l'utilisateur appuie dessus, je vais être redirigé vers cette page où nous allons avoir la commande de l'utilisateur. Par exemple, je viens d'ajouter celui-ci à ma carte et vous pouvez également l'ajouter à nouveau, afin qu'il puisse revenir ici puis y retourner, par exemple, si vous souhaitez changer d'adresse ou autre. Et bien sûr, après tout cela, il peut également retirer ou passer la commande. C'est ça en gros. C' est ainsi que nous pouvons le faire. Bien entendu, après avoir passé la commande, nous verrons les achats ici et avec le bouton en attente, ce achats ici et avec le bouton en attente, indique que cette commande est toujours en attente, qu' elle n'a pas encore été reçue, et bien sûr, le total avec la date et l'heure de la commande. Cela étant dit, c'est la fin de cette vidéo. Dans la vidéo suivante, nous allons implémenter toutes ces fonctions. Ils sont assez simples. Cependant, nous devons être très prudents lors de la création ou de l' de ce type de fonctions, car elles sont très liées les unes aux autres. Par exemple, ici, nous avons cette adresse de paiement, puis nous allons revenir à la page Web de signature et ainsi de suite. Voilà en gros, rendez-vous dans la prochaine vidéo. OK. 14. Livraison: Bonjour et bon retour. La première chose que nous allons faire dans cette vidéo est d'apprendre comment passer de la connexion à la déconnexion. Comme nous pouvons le constater, chaque fois que nous ne nous connectons ou que nous ne nous inscrivons pas, nous pouvons voir les deux boutons, s' inscrire et se connecter, ici. Appuyons sur Se connecter, écrivons notre e-mail. Puis appuyez sur le bouton de connexion. Dans ce cas, nous allons voir cette icône suivie du bouton de déconnexion. Comment s'y prend-on ? Revenons aux abdos ici, et ouvrons l'en-tête. Cet en-tête est partiel, comme nous pouvons le voir, nous affichons simplement l' inscription ici. OK. Donc, et la connexion a suivi, bien sûr. Ce que nous allons faire, c'est le créer ici même. Alors disons. Au lieu de simplement afficher l'inscription, nous allons vérifier si l'utilisateur est authentifié ou si la demande est authentifiée, cela signifie que l'utilisateur se connecte ou est connecté Dans ce cas, nous n'allons pas afficher le bouton d'inscription. Sinon, nous allons afficher l'icône de celui-ci, comme nous l'avons dit. OK. Donc dans ce cas, faisons-le ici. Ce que nous allons faire, c'est ouvrir une instruction if, donc si la demande est authentifiée, si c'est le cas, nous allons faire quelque chose Et ce que je pense, c'est de le faire ici. Nous allons donc vérifier si l'utilisateur de la demande n' est pas authentifié. Si c'est le cas, nous allons afficher ce bouton. Sinon, ce que nous allons faire c'est afficher l'icône. Dans ce cas, pour savoir comment nous pouvons le faire, nous pouvons simplement ouvrir une autre déclaration. Donc, si la demande est authentifiée. Dans ce cas, nous allons créer une classe de P x une colonne deux, et pour les grandes, je vais en faire une colonne grande une. Et ouvrons. Ouvrons la barre de navigation et je vais l' appeler élément de navigation. Et celui-ci, je vais créer un lien qui mènera au panier et nous l' utiliserons plus tard. Mais pour l'instant, créons le Nank Dans celui-ci, je vais créer l'icône qui vient de bootstrap Je vais obtenir l'icône représentant un panier d'achat. OK. Et puis changeons la couleur en blanc, et bien sûr, cet article restera vide. Ce que nous allons faire ici c'est simplement fermer celui-ci pour le moment, et nous allons continuer à nous connecter. Ce que nous venons de faire ici, c'est vérifier si l'utilisateur ou la demande est authentifié, donc si l'utilisateur est connecté Si c'est le cas, nous allons vous montrer celui-ci. Sinon, nous allons afficher l'inscription ici. Nous allons faire exactement la même chose avec la connexion. Ici, nous allons vérifier si l'utilisateur ou la demande est authentifié. Nous allons montrer le panneau si ce n' est pas le cas et le panneau de déconnexion, si c'est le cas. Comment faites-vous cela ? Comme précédemment, je vais juste essayer si la demande est authentifiée. Ce que je vais faire, c'est ouvrir ici et fermer ici. Je vais le copier ou peut-être que je peux taper ici L, par exemple, ouvrir à nouveau. Puis ferme-le juste ici. Je pense donc que cela aurait du sens. Donc, ce que nous disons ici, si la demande est authentifiée, nous devons montrer quelque chose, et sinon, nous allons montrer la connexion Je vais donc copier tout cela, coller à nouveau ici et changer de connexion pour me déconnecter. Comme nous pouvons le voir, maintenant, si nous revenons en arrière, classez-le refresh, maintenant connecté, donc la demande est authentifiée. C'est vrai. Nous allons montrer celui-ci suivi du schéma de déconnexion. Maintenant, si vous appuyez sur se déconnecter, nous allons faire quelque chose qui redirigera ou nous ramènera à la page d'accueil à côté la demande authentifiée comme étant égale à fausse Comment faites-vous cela ? Revenons en arrière et faisons-le en laboratoire comme avant. Ce que nous allons faire, c'est obtenir le panneau que nous venons de créer ici, comme nous pouvons le voir. Nous avons le panneau de sortie. Ce que nous allons faire, c'est le laisser passer à la déconnexion ici. Alors, comment faites-vous cela, nous écrivons simplement sine out. Bien sûr, ce que nous allons faire pour celui-ci, c'est nous connecter. Nous allons faire sortir le panneau ici. Revenons à l'apto JS et corrigez-le ici. Nous allons sortir le panneau. C'est un sinus out, puis nous allons créer la fonction comme d'habitude, haut en haut et afficher le sinus en cas d'échec et de requête. Ou peut-être que je suis désolée, ici, nous ne devons pas faire échouer la connexion. Nous allons accéder à la page d' accueil au lieu de connecter en cas d'échec parce que nous voulions simplement nous déconnecter, et bien sûr, comment vous déconnecter Il suffit de taper request out. Ensuite, nous allons simplement être redirigés vers la page d'accueil en redirigeant vers celle ci-dessus et cela nous ramènera à la page d'accueil Cela étant dit, nous pouvons continuer avec notre fonction, la fonction de carte d'expédition. Et dans ce cas, si vous vous en souvenez, nous venons de créer cette fonction et nous avons également indiqué que si l'utilisateur demandé cette adresse est égale à null. Dans ce cas, cela signifie que l'utilisateur n'a pas encore ajouté son adresse, nous devons donc l'ajouter. Donc, ce que nous allons faire, c'est afficher sur la carte d'expédition ici et à côté de la demande et, bien sûr, de l'adresse à laquelle cette adresse est demandée à cet utilisateur. Donc, en gros, c'est tout. C'est ainsi que nous pouvons le faire. Maintenant, ce que nous allons faire, c'est passer à la carte d'expédition et corriger l'adresse, bien sûr, puis nous allons passer à la carte. Maintenant, si l'adresse a déjà été ajoutée à l'utilisateur, nous allons simplement accéder ou afficher la page de la carte. Et dans ce cas, nous disons simplement que si l'utilisateur a configuré son adresse et que tout fonctionne correctement. Nous n'avons pas besoin d' aller sur cette page, qui est la page du panier d'expédition. C'est celui-ci, si vous voulez le voir ici. S'il s'agit de l'utilisateur, supposons que nous voulions aller voir Johnson et que nous appuyons sur Baby Johnson. Dans ce cas, si j' appuie sur Ajouter à la carte, je vais aller jusqu' ici car j'ai ajouté cette adresse. Même si le champ est vide, n'oubliez pas que nous suivons le processus, ce qui signifie que j'ai ajouté l'adresse ici même. Si je veux le modifier, je peux revenir en arrière et le modifier à partir d'ici. C'est bon. Donc, ce que nous allons faire maintenant, c'est obtenir cette expédition. Alors, comment s'y prendre ? Nous allons passer à l'expédition et à côté de la fonction, glisser puis rendre. Ensuite, nous allons passer à la carte d'expédition et, bien sûr, faire suivre la demande à côté de l'adresse que nous avons, demander cette adresse à cet utilisateur, et tout va bien. Voici donc comment nous pouvons procéder. Maintenant, ce que nous allons faire, c'est passer au paiement, et dans ce cas, comme nous l' avons dit plus tôt, donc si nous sommes en train d'expédier ici et que tout va bien, nous allons appuyer sur le suivant, nous voulons passer au mode de paiement, et dans ce cas, créons la fonction pour ce paiement. Donc, pour ce faire, je vais simplement écrire le paiement, et bien sûr, je vais faire glisser le pointeur vers le haut comme d'habitude, et je vais maintenant rendre la carte de paiement dont GS a besoin HS et il suffit de taper carte de paiement et tout va bien. Comme nous n'avons qu' un seul mode de paiement, nous n'avons pas vraiment besoin de l'emporter avec nous. Nous savons qu'il s'agit d'un paiement à la livraison, nous prenons donc simplement la demande avec nous. OK. Maintenant, après avoir reçu le paiement, nous pouvons également travailler avec le mode postal de ce paiement. Alors, comment faites-vous cela ? Toutes ces fonctions seront implémentées dans un instant. Mais pour l'instant, écrivons-les, et bien sûr, nous en discuterons en détail par la suite. Le mode de paiement postal sera donc fonctionnel, rouge et ouvrez-les. Nous allons prendre les informations que nous avons obtenues grâce à la fonction d'expédition ou au mode d'expédition. Je vais donc les stocker en permanence. Demandez donc le numéro de point du corps. OK. Constante : ajouter une adresse de point de corps de demande égale, constante, demande de ville à par ville. Et l'ID est égal à l'identifiant du point de demande à l'utilisateur. Dans ce cas, nous allons rechercher l' utilisateur par identifiant et mettre à jour les informations suivantes. Dans ce cas, comment le recherchez-vous ? Je vais donc taper utilisateur à rechercher par identifiant et à mettre à jour. Je vais trouver grâce à cette carte d'identité que nous sommes assis en ce moment. Et ce que nous allons mettre à jour est le suivant. Alors, comment mettre à jour ou comment définir réellement quelque chose qui n'est pas disponible pour nous pour le moment. Nous pouvons simplement écrire set, puis ouvrir et nous allons changer l' adresse de cette adresse, faire en sorte qu' elle soit égale à l'adresse que nous avons reçue, changer l' adresse pour qu'elle soit égale au numéro de téléphone et que l' adresse ville soit égale à la ville. C'est donc tout maintenant, nous allons simplement renvoyer la fonction. Donc, si nous avons un réseau, nous allons le faire, donc si nous avons une erreur, nous allons simplement le déconnecter. Sinon, nous allons simplement enregistrer le message « aucune erreur » est « Non ». Erreur suivie de l'adresse utilisateur que nous venons indiquant que tout fonctionnait correctement C'est l'adresse que nous avons obtenue et que nous avons enregistrée dans notre compte utilisateur. Donc, si vous voulez vous assurer que c'est la bonne méthode, nous pouvons accéder à l'utilisateur. Et comme nous pouvons le voir à l'intérieur de cet utilisateur, nous avons le nom d'utilisateur et les commandes. Bien sûr, pour le moment, nous n'avons pas l'adresse. Cependant, nous l'avons dans notre schéma ici. Comme nous l'avons dit, il s'agit du schéma utilisateur. Nous avons quelque chose qui s'appelle une adresse et à l'intérieur de cette adresse, nous avons la ville et le numéro de téléphone d'ADD R S. Et c'est ce que nous avons fait. Nous venons de créer cette adresse et de les ajouter toutes à cette adresse spécifique. OK. Donc, en gros, c'est tout. Maintenant, remontons jusqu'en bas. Maintenant, nous allons parcourir les pages page par page, en commençant par la carte d'expédition, et nous allons vérifier. Supposons que nous soyons maintenant sur cette carte d'expédition. Ce que nous allons faire, c'est faire défiler la page jusqu'en bas. Comme nous pouvons le voir ici, nous devons ajuster ce formulaire et cela nous mènera au paiement, qui est le mode de paiement postal. Que faisons-nous ici ? Tout d'abord, nous ajoutons cette fonction ici. Nous enregistrons toutes les adresses. Nous avons donc l'adresse de l'utilisateur, la ville et le numéro de téléphone. Et chaque fois que nous appuierons sur Suivant, nous serons redirigés vers le paiement ou la page Web de paiement. Dans ce cas, avant de passer à celui-ci, je vais passer à cette action, qui est le paiement par la méthode post, et c'est tout. Je vais prendre toutes les informations que je viens de recevoir. Trouvez l'utilisateur par son identifiant et stockez toutes les informations. Et puis, bien sûr, je vais effectuer le paiement sur la carte de paiement. OK. Et c'est ça en gros. Maintenant, tout va bien. Dans la vidéo suivante, nous allons continuer avec les fonctions d'expédition et de stockage. Alors à bientôt. OK. 15. Commandez l'ordre: OK. Bonjour, et bon retour. Dans cette vidéo, nous allons poursuivre notre discussion et notre implémentation de cette fonction spécifique. C'est le cas, par exemple, si j'appuie sur Johnson, que je choisis l'un des produits et que je l' ajoute à ma carte. Comme nous pouvons le voir, nous sommes arrivés à cette page où nous allons afficher toutes les commandes et, bien sûr, le modèle de commande ici. Bien entendu, nous voulons également ajouter l'adresse et le paiement. Donc, pour ce faire, permettez-moi de revenir en arrière et commençons par créer la méthode post de la fonction card. Comme nous l'avons dit, la première chose à laquelle nous allons être remboursés est la carte d'expédition. Et dans ce cas, si nous avons déjà ajouté l'expédition ou l' attribution de la commande, nous opterons pour ne pas vraiment avoir envie de passer à celle-ci Nous pouvons passer directement à la fiche de commande ou au fichier de commande, et dans ce cas, cela apparaîtra ici devant nous. Comme nous avons déjà ajouté l' adresse, elle est maintenant vide, mais nous l'avons déjà ajoutée dans la vidéo précédente, sera automatiquement affichée sur cette page. Par exemple, si je me déconnecte, inscrivons-nous à nouveau et nommons-le die. Et changeons de tête sur example.com pass a. Et si je clique sur s'inscrire, je vais être redirigé vers cette page Maintenant, si je choisis l'un des produits, comme vous pouvez le voir, ici, donc si je choisis Baby Johnson, et que je l'ajoute à ma carte, je vais être redirigé vers le service d'expédition au lieu de passer commande puisque je n'ai pas encore ajouté mon adresse complète. Alors, comment s'y prendre ? La première chose que nous allons remarquer, c'est que chaque fois qu' il y a une carte d'expédition chaque fois que nous sommes sur la page du produit. Supposons que je sois ici cette page produit et que j'appuie sur le bouton Ajouter à la carte ici. Nous allons passer à celui-ci. C'est le formulaire. Nous allons passer au mode d'expédition. Permettez-moi simplement de les supprimer. OK. Nous n'en avons donc pas besoin. Ils sont tous. Maintenant, si je passe aux abdos, et comme nous pouvons le voir, si je recherche l'expédition. Il s'agit de la fonction d'expédition que nous venons de créer dans la vidéo précédente, et nous l'avons ici. Nous disons que si la longueur de la commande est nulle, nous allons le faire ou si la commande ou le paiement est faux, dans ce cas, nous allons faire autre chose. Dans le cas contraire, nous ajouterons cette commande à l'article ou à la boîte de commandes spécifiques. Bien sûr, sinon, nous allons trouver l'utilisateur par son identifiant et mettre à jour la commande dans ce cas. C'est ce que nous faisons ici, et ensuite, bien sûr, nous allons passer à la page suivante. Nous disons que si l' adresse est nulle, est-à-dire que l'utilisateur n'a pas encore saisi d'adresse, nous allons l' afficher sur la carte d'expédition. Sinon, nous allons effectuer le rendu sur la carte ici. Supposons maintenant que nous soyons à la carte d'expédition. Si je reviens à la carte d'expédition, et voyons voir, nous avons le bouton qui permet de soumettre et notre formulaire permet de passer au paiement, en fait. Maintenant, si je reviens en arrière et que je tape paiement, nous avons déjà créé les deux méthodes. Le premier. Il s'agit de la méthode de publication qui consiste à trouver l'identifiant de l'utilisateur et, bien entendu, à mettre à jour toutes ces informations, puis à les restituer sur la carte de paiement. Maintenant, si nous passons à la carte de paiement, comme nous pouvons le voir ici, nous pouvons voir le mode de paiement qui n'est pour le moment que le paiement à la livraison. Cependant, nous avons le bouton de type Soumettre et notre formulaire est toujours vide. Nous pouvons donc maintenant mettre à jour ce formulaire et, bien sûr, travailler sur cette méthode ultérieurement. Donc, par exemple, ici, je vais créer une fonction qui est une carte et la méthode sera toujours post. Maintenant, si je reviens en arrière, créons notre méthode ici. Donc, publication de l'application. Nous allons publier la carte et fonctionner comme d'habitude Bien sûr, nous allons la trouver par identifiant, et nous allons envoyer cet identifiant. Nous allons donc rechercher par cet identifiant, et bien sûr, nous allons ouvrir la fonction Donc, si nous avons une erreur, nous allons la déconnecter. Sinon, nous allons prendre les commandes de l'utilisateur. Je vais l'appeler « ordres ». Donc, les utilisateurs commandent, et je vais prendre la première commande, celle que j'ai récemment ajoutée, puis nous allons faire quelque chose. Ce que je fais ici, c'est que nous avons notre liste, supposons qu'elle soit ouverte et que la base de données MG la voie dans la base de données. Donc, ce que nous faisons essentiellement, c'est que nous avons l'utilisateur qui a commandé quelque chose, et les commandes figurent en fait dans une liste de commandes. Supposons donc que j'ai commandé aujourd'hui. J'ai une commande aujourd'hui, et si je commande demain, j'ai une commande complètement différente de celle d'aujourd'hui. Cependant, ils figurent tous les deux dans une liste de commandes. Alors maintenant, si nous pouvons voir ici, ouvrons la dernière, et voici la base de données m to edge. Ouvrons-le, car nous pouvons voir que nous avons les utilisateurs. Pour l'instant, par exemple, nous avons trois utilisateurs, et nous avons des commandes ici. Comme nous pouvons le voir si j'appuie dessus, je n'ai aucune commande pour le moment pour ce premier utilisateur. Maintenant, si je fais défiler l'écran vers le bas, nous pouvons voir celui-ci, je pense que nous avons quelques commandes, d'accord. Nous avons donc le numéro de commande zéro, nous avons la commande numéro un et nous avons la commande numéro deux. Comme nous l'avons dit, la première chose que nous allons obtenir est le reçu, qui est faux. Nous ne l'avons pas encore mis à jour. Le paiement est faux. Il s'agit du numéro de commande, et nous avons les articles contenus dans cette commande. Comme nous pouvons le voir à l'intérieur de cet article, nous avons un ensemble d'objets. Le premier objet est donc en fait l'identifiant de l'objet , l'image, le titre, le prix et la quantité. OK. Voici donc comment nous pouvons les obtenir. Donc, ce que je fais en gros, c'est que chaque fois que l'utilisateur appuie sur le bouton de commande, il est redirigé vers la carte. Et dans ce cas, nous allons afficher la dernière commande qu'il a reçue. Par exemple, s'il a trois commandes telles que 012, nous allons afficher la dernière, c'est celle-ci C'est donc le dernier que l'utilisateur a commandé. Et dans ce cas, nous allons le faire en disant simplement que la commande correspond aux commandes à zéro. Maintenant, nous allons vérifier à nouveau si l'adresse n' est pas nulle, juste pour nous assurer que dans ce cas, elle n'est pas nulle. Et si tel est le cas, nous allons passer à l' expédition et la demande se fera comme d'habitude, à côté de l'adresse. Donc, en gros, c'est tout. Maintenant, ce n'est pas le cas. Ce que nous allons faire, c'est le rendre dans le fichier de commande. Alors, comment faire, nous rendons simplement l'ordre des lieux et nous devons emporter avec nous les paramètres dont nous avons besoin. Dans ce cas, nous avons besoin de la demande, articles, c'est-à-dire que nous pouvons toujours prendre cet article ou accéder à cet article en prenant simplement cette commande. Donc, cette commande, nous avons le premier article ou c'est le premier élément de la liste des commandes. Et dans ce cas, nous aurions pu parler de cette commande ou peut-être pourrions-nous parler d'utilisateurs, de commandes à zéro article. Nous avons donc pris tous ces éléments et les avons mis à l'extérieur et nous pouvons accéder à ces articles en ajoutant simplement un utilisateur ou des articles, puis nous avons la commande réelle. Donc je prends les choses comme ça et les commandes comme d'habitude. Donc, en gros, c'est tout maintenant, nous avons une fonction, donc nous sommes bons. Passons maintenant à l'ordre des places. Comme nous pouvons le constater, nous avons d' abord cette barre de progression, puis si nous faisons défiler la page vers le bas, nous avons la ville et nous devons tout changer et les rendre dynamiques. Par exemple, chaque fois que l'utilisateur appuie sur la commande, nous allons afficher son adresse, la ville, le numéro de téléphone, et bien sûr, nous allons modifier cette commande ici même. Donc, si vous avez des articles, nous allons les modifier en fonction des articles que l'utilisateur a commandés auparavant. OK. Donc, en gros, c'est tout. C'est ce que nous allons faire. étant dit, c'est la fin de cette vidéo. Ce que nous avons fait pour le moment, c'est que nous avons simplement pris toutes ces informations et les avons ajoutées, donc supposons. Voyons si j'ajoute quelques éléments ici. Et passons au paiement à la livraison suivant. Donc, ce que nous faisons ici, c'est que nous allons afficher toutes les informations ici. Nous en parlerons donc plus en détail dans la prochaine vidéo, s'agit de votre projet. Et j'espère que vous aurez une idée claire de votre tâche et de ce que vous êtes censé faire dans le cadre de ce projet. J'espère donc que vous avez apprécié ce cours. J'espère que cela a été bénéfique. Ceci étant dit, c' est la fin de cette vidéo. On se voit dans le prochain. 16. Projet: Bonjour et bon retour. Dans cette vidéo, nous allons parler du projet. Rappelez-vous donc que dans la vidéo précédente, nous les avons toutes ajoutées ou que nous avons supprimé cette fonction de carte qui est chargée de nous faire passer la commande si tout fonctionne correctement. Dans ce cas, nous allons emporter avec nous la demande, les articles que l' utilisateur a commandés, ou la commande elle-même, et les commandes. Maintenant, votre tâche consiste à faire en sorte que cette page ressemble à ceci. Comme nous l'avons dit, nous avons obtenu toutes les informations, et pour l'instant, les commandes ne seront pas affichées ici. Il affichera les variables factices que nous venons de créer. Ce que vous allez faire, c'est prendre ces commandes et les ajouter à cette commande ici. Pour en revenir au code, si nous passons à l' ordre des lieux ici, nous pouvons voir que nous avons placé des variables factices ici, et que nous devons les transformer en variables réelles Votre tâche consiste essentiellement à créer une boucle de pliage, à parcourir tous les articles que l'utilisateur a commandés et, bien sûr, les afficher ici, puis à calculer le total de ces articles, afficher ici l'article avec peut-être son prix, puis à afficher le total ici. Bien sûr, comme nous l'avons dit, supposons que la livraison gratuite pour une commande soit inférieure à 50$. Vous souhaitez donc calculer le total de cette commande. Si c'est moins de 50, vous allez écrire en livraison gratuite. Bien sûr, si c'est moins de 50, vous allez écrire peut-être 10$ pour la livraison, et si c'est supérieur à 50, vous allez écrire gratuitement. Pour l'instant, ça y est, et bien sûr, ne nous reste plus qu'une tâche à accomplir : le mode de paiement. Peut-être, bien sûr, que je peux toujours revenir en arrière à partir de ce bouton ajouté, et bien sûr, si j'appuie ensuite sur ici, je vais être redirigé vers ce paiement. Donc, ce que nous allons faire ici également c'est que vous allez accéder à cette page et que le bouton suivant ne s'affiche pas, comme dans cet exemple ici. Maintenant, si j'appuie sur ce paiement à la livraison, je peux maintenant accéder ce bouton suivant pour accéder à la page de commande. La première tâche consiste simplement à afficher toutes les informations que nous avons obtenues grâce à la fonction d' application ou à la fonction de publication que nous avons créée précédemment et à les afficher sur cette page, telles que le résumé des commandes, les commandes, et bien sûr, la deuxième tâche consiste à ajouter la fonction de paiement qui consiste à afficher le bouton suivant une fois nous avons appuyé sur le paiement à la livraison. La dernière tâche de votre projet consiste maintenant à créer cette modification ou à exécuter la fonction de cette modification ajoutée. Dans ce cas, chaque fois que nous appuierons sur cette fonction ajoutée ou sur ce bouton ajouté, nous serons redirigés vers la page d'expédition. Il s'agit d'une tâche simple que vous pouvez effectuer avec quelques lignes de code, et c'est tout pour l'ensemble de ce projet. Nous avons créé tous les composants utiles et essentiels pour nous. Ceci étant dit, c' est la fin de cette vidéo. N'oubliez pas de déposer ce projet dans la section des projets, afin que je puisse y jeter un œil et vous faire part de mes commentaires. Cela étant dit, voici cette vidéo. J'espère que vous avez apprécié ce cours, et j'ai hâte de vous voir dans d'autres cours.