Node JS : créez votre site Web de commerce électronique

1. Introduction: Bonjour et bienvenue dans une nouvelle classe. Il s'agit de construire un site e-commerce avec des écouteurs. Alors tout d'abord, qu'est-ce qu'on va utiliser pour cette classe ? Nous allons utiliser Node.js et JavaScript. Et pour le front end, nous allons utiliser Bootstrap, EJS, HTML et CSS. Donc, dans cette classe, nous allons créer tout ce qui est avant. Et visualisons-le maintenant. C' est donc le projet que nous allons créer. Nous avons l'intégrité de notre marque personnelle et contactez-nous. Nous avons également la méthode de connexion et d'inscription. Et bien sûr, c'est la page d'accueil. Nous avons quelques caractéristiques du site, certaines marques, certains best-sellers. Et bien sûr, les catégories. Puis suivi d'un pied de page que nous allons l'avoir ici. Donc, c'est essentiellement pour le site Web comme une page d'accueil. Et bien sûr, nous allons créer beaucoup plus que ça. Nous allons créer les catégories de marques qui nous concernent et nous contacter ensemble pendant que nous apprenons chaque étape du chemin. Et bien sûr, nous allons terminer notre site Web avec un petit projet que vous allez créer et bien sûr laisser dans la section projet. Donc, cela étant dit, c'est l'introduction de ce verre. Rendez-vous dans la première vidéo. 2. Node de configuration: Bon, alors maintenant nous sommes sur notre site e-commerce. Il s'agit d'un dossier sur notre bureau. Et nous allons diviser le projet en deux parties principales. Le premier est de concevoir le front end de notre projet, puis de travailler avec le back-end. Mais pour l'instant, nous allons commencer avec notre fichier JavaScript. Nous allons utiliser Node.JS et exiger certaines des quelques choses telles que Express, BodyParser, EJS, et mongoose. Et bien sûr, ne vous inquiétez pas si vous ne savez rien à leur sujet. Vous pouvez en fait nous suivre puisque nous allons expliquer certains d'entre eux dans notre projet. Donc, tout d'abord, créons notre app.js. Donc, nous allons l'appeler, et ceci est le fichier de dossier JavaScript. Et puis allons à NodeJS, téléchargez la version qui est pour nous. Donc j'utilise Windows, donc je ne connais pas la dispersion. Et après cela passer par le magicien de l'isolation. Et puis on est bon d'y aller. Donc, il est en place et invite de commande, CMD. Et moi , disons que nous allons avoir NodeJS. C' est le marchand 14.15.5. Et cela signifie que nous avons téléchargé NodeJS avec succès. Alors maintenant, allons à notre bureau. Et je suis désolé, revenons sur cd Desktop et ensuite entrer dans notre site e-commerce. Donc, comme nous l'avons dit, c'est le site de commerce électronique et le site de commerce électronique. Et allons de l'avant et installons. Certains exigent certaines des choses que nous devons avoir pour mener à bien notre projet. Donc, la première chose que nous devons faire est d'écrire npm install express. Et comme vous pouvez le voir, il téléchargera express et quelques secondes. Et c'est le processus de téléchargement. Et nous avons besoin de télécharger quelques choses aussi telles que BodyParser, EJS, et mongoose. Donc, la base de données que nous allons utiliser est une MongoDB. Et c'est la première chose. Ceci est exprimé téléchargé. Et nous pouvons effectivement dire, J'ai dit d'installé. Et nous pouvons télécharger BodyParser, EJS, mongoose, et session express tous en même temps. Donc, si nous allons de l'avant et appuyez sur Entrée, vous pouvez voir qu'ils sont en cours de téléchargement. Donc, pour l'instant, pourquoi ils sont téléchargés, nous pouvons revenir à notre code et commencer par exiger est téléchargé. Un dossier. Donc la première chose que nous devons faire est de créer notre première constante. Et ce sera la constante Express. Et nous l'utiliserons pour exiger Express. Et comme vous pouvez le voir, nous n'avions pas ce paquet. Bonne chance que JSON avant. Une fois que nous avons eu besoin de quelques choses, nous remarquons que nous avons quelque chose comme, voyons. Nous avons ici BodyParser. Nous avons également, par exemple, le nom de la couleur et tous ces fichiers ou exigences que nous devons utiliser dans notre projet. Ils sont téléchargés automatiquement simplement en téléchargeant ces quatre ou cinq exigences. Donc, pour l'instant, cela est exprimé et alors nous avons besoin de BodyParser. Nous devons donc l'exiger aussi. Donc, l'analyseur de corps, et comme d'habitude, ce n'est qu'un nom. On peut le nommer comme on veut, mais c'est plus facile si on le nomme ainsi. Et bien sûr, nous devons écrire le même nom de téléchargement à partir d'ici. Comme vous pouvez le voir, nous utilisons BodyParser avec un tiret au milieu. Et cela est exprimé et BodyParser pour l'instant, continuons EJS à exiger EJS, puis Mongoose. Donc, c'est mongoose exiger. Et bien sûr, nous devons utiliser la session. Il s'agit donc d'une session de session express que nous avons téléchargée. Et je pense que pour l'instant on est bons. La dernière chose que nous devons faire est de créer notre application réelle. Donc, cela sera exprimé comme ceci. Donc, pour l'instant, nous pouvons commencer avec notre projet. Alors vérifions si tout fonctionne. Et une façon de le faire est de simplement créer le port que nous allons utiliser. Je vais utiliser le port 3000 et on verra ça dans une minute. Et bien sûr, nous devons écouter ce tableau en utilisant cette leçon. Donc nous allons utiliser les gens que nous venons de créer. Et bien sûr, nous pouvons créer une fonction. Et nous allons console.log. Et nous allons taper Serveur démarré ou 3000. Et c'est pour le déploiement. Et maintenant, nous pouvons envoyer quelque chose. Par exemple, supposons que chaque fois que nous entrons dans notre navigateur, nous devons écrire bonjour monde. Donc nous devons obtenir, nous allons utiliser la méthode get. Et la page par défaut sera celle-ci, la barre oblique avant. Et bien sûr, nous devons créer une fonction. Nous avons la demande et la réponse. Et puis à l'intérieur, nous allons sabler de la réponse, reposer ce sable. Et nous allons envoyer Hello World. Donc c'est ça en gros, c'est notre configuration. Maintenant, nous pouvons aller de l'avant et taper notre CMD Node JS. Et c'est ainsi que nous pouvons instancier. Donc, quand avons-nous ici, nous avons une erreur, ne peut pas accéder à l'application avant la visualisation. Et comme nous pouvons le voir, nous avons utilisé la longueur d'aptitude. Désolé, ici, nous devons utiliser l'application que vous obtenez. Et bien sûr, c'est l'initialisation de l'application, devrait être avant l'utilisation de celui-ci. Et bien sûr maintenant si vous revenez en arrière et écrivez app.js. Et comme nous pouvons le voir, Nous avons ceci pour permettre à NodeJS de fonctionner. Donc, je vais simplement autoriser l'accès. Et nous pouvons voir le message que nous avons écrit. Esl a commencé à 0,3 mille. Cela indique que tout fonctionne bien. Si nous allons de l'avant et aller à localhost 3000, nous pouvons voir Hello World indiquant que nous avons réussi à construire notre navigateur de noeud ou l'application Node. Donc c'est tout pour cette vidéo et la prochaine vidéo que nous allons commencer avec le front de notre projet. Alors, à vous voir. 3. En-tête: Bon, Maintenant que nous venons de terminer la configuration de notre app.js, nous pouvons commencer par notre front end. Mais une chose avant cela est d'utiliser quelque chose de disponible pour nous dans le nœud. Et ça s'appelle Norman. Et comme vous pouvez le remarquer, si je vais à notre cmd et nous allons taper le nœud app.js. Et bien sûr, allez à localhost 3000. Nous pouvons voir que nous avons bonjour monde. Cependant, si nous changeons quelque chose ici, supposons que je change HelloWorld, HelloWorld comme lourd. Et cette affaire, si je reviens et que je devais frais, rien ne va se passer. Donc, une façon de faire face à cela est d'installer réellement le nœud 1. Et ce qui n'est pas les hommes, comme on l'utilise, est en fait de créer quelque chose que chaque fois que nous changeons quelque chose, notre code est automatiquement changé et notre navigateur. Alors allons de l'avant et solide. Et une façon de le faire est d'écrire simplement MPI et BMI dash g dans global et nous devons l'installer. Haldeman. Maintenant, un vieil homme est en train d'être installé. Et puis après avoir terminé l'installation, nous pouvons simplement l'utiliser en disant noeud app.js au lieu du noeud app.js. Donc c'est essentiellement pour Rodman. Et puis après la numérisation est faite avec cela, nous pouvons commencer par notre front end. Attendons, attendons un peu. Peut-être. Fermez cette fenêtre pour l'instant. Et à l'intérieur de notre site e-commerce, nous devons créer les points de vue. Et à l'intérieur de cette USE, ils vont créer tous nos fichiers EJS. Ainsi, les vues intérieures sont créées les partielles du dossier. A l'intérieur des partiels, nous avons l'en-tête et le pied de page. Alors revenons et vérifions que Norman est toujours coincé sur quelque chose. Alors allons-y et commençons par notre en-tête. Donc, à l'intérieur de l'en-tête, par simplement allé à Bootstrap. Et dans ce projet, nous allons utiliser Bootstrap. Alors commencez, allez à Modèle Démarré, il suffit de le copier et de le coller ici. Puis je suis allé à Font Awesome pour utiliser les icônes. Alors allez à Font Awesome. Et bien sûr, obtenez votre propre kit. Si vous n'avez pas d'inscription par e-mail. Et puis on va chercher quelque chose comme ça. entre à l'intérieur, il lui fait prendre celui-ci. Peut créer n'importe quel kit que vous voulez. Mon téléphone maintenant, je vais utiliser celui-ci donc je vais appuyer sur Entrée et puis revenir en arrière et basique ici. Donc j'ai déjà collé dans le corps. Et maintenant, nous allons créer l'en-tête. Et puis après avoir fini de l'autre, nous pouvons simplement déplacer cette partie, peut-être tout cela jusqu'ici, et la coller dans notre pied de page. Donc c'est fondamentalement revenons en arrière. Et comme vous pouvez le voir, quand vendu Tuckman, puis nous avons écrit Norman app.js pour instancier l'application, le dossier JavaScript ou le fichier. Et dans ce cas, le serveur est en cours d'exécution sur le port 3000. Si je retourne ici et retournons à localhost, nous avons bonjour monde, il se dirige. Si je change quelque chose ici. Donc supposons que je suis allé ajouter ceci, revenir en arrière, rafraîchir. Et comme vous pouvez le voir, voyons. Bon, donc ça commence, et maintenant on a ça ici. Donc, c'est essentiellement pour nochmal. Et comme nous l'avons dit, nous avons ici notre en-tête. Et à l'intérieur de cet en-tête, nous allons créer la barre de navigation que nous allons utiliser. Donc, nous avons l'en-tête. A l'intérieur de l'en-tête, nous avons les nerfs et nous avons quelques cours ici. Nous avons navbar, navbar élargir grand, menu nav et BJ sombre. Et vous pouvez réellement copier votre propre navbar de Bootstrap, mais je préfère le créer moi-même. Donc, c'est pour la barre de navigation et bien sûr, nous devons ajouter le bouton. Donc, le premier bouton serait de classe navbar, bambin. Et puis nous avons le bouton de navigation. Et puis bien sûr, nous devons être un type D de ce bouton pour être le bouton réel. Et puis les données VS ont basculé pour basculer entre les éléments chaque fois que nous avons un décalage et bien sûr la cible. Donc, les données BAS cible, et ce sont des méthodes d'addition simples juste pour utiliser la barre de navigation. Donc mon, maintenant pour je limite mon réseau pour l'instant. Allez-y et créez les subdivisions ici. Alors à l'intérieur de notre bouton et allez ici et ouvrez-le. Mais pour l'instant, revenons à notre app.js et essayons réellement d'envoyer cet en-tête que EJS dans notre navigateur. Donc, quand je pense est de simplement créer la maison. Et à l'intérieur de la somme, nous pouvons utiliser l'en-tête et le pied de page. Alors apprenons à faire ça. Nous pouvons simplement créer un nouveau fichier dans les vues, et ce sera home.html. A l'intérieur de cette maison, nous devons inclure l'en-tête et le pied de page. Donc, pour ce faire, nous pouvons simplement écrire cette ligne de code afin commandant, tiret, puis inclure ce que nous devrions inclure comme partiels, puis attr. Donc maintenant, nous fermons simplement la balise comme nous l'avons fait avant, et c'est notre en-tête. Et bien sûr, nous pouvons taper tout ce que nous voulons ici. Donc, par exemple, écrivons bonjour de la maison, et cela fonctionnera très bien. Mais pour l'instant, nous devons le rendre en utilisant le point de l'application JS. Ici. Revenons à l'intérieur et à l'intérieur. Nous devons l'utiliser comme app.get. Donc, à l'écart, nous devons rendre à la maison comme d'habitude. Maintenant, revenons en arrière, rafraîchissez-vous. Et comme on peut le voir, on a notre Navbar. C' est très petit pour l'instant, mais nous l'avons obtenu à partir de l'en-tête. Et nous l'utilisons réellement à l'intérieur de notre maison en incluant simplement à l'intérieur de notre maison que DJ S. Donc maintenant nous avons appelé le Home pour le fichier js et aussi l'en-tête en se référant simplement à l'intérieur ici. Donc, c'est essentiellement pour transférer l'en-tête d'un fichier à un autre. C' est la ligne de code simple que nous devons utiliser. Alors allons de l'avant maintenant et continuons cet en-tête ici. Et bien sûr, nous devons commencer par créer quelques éléments. Et certains d'entre eux sont la maison, par exemple, nous avons besoin d'une page d'accueil. Et la première chose que je pense faire est de créer quelques-uns, une icône ici. Alors nous allons le comprendre plus tard. Mais pour l'instant, j'écris simplement la référence. Et cette référence ne signalera rien pour l'instant. Mais nous avons quelques classes telles que la marque navbar, cette diapositive. Et puis textez en majuscules. Si nous avons besoin d'ajouter une écriture ici, il devrait être en majuscules et x g2. Et puis Amex auto pour simplement le faire au milieu d'un déficit. Mais pour l'instant, c'est cela que nous devons ajouter ici notre élément. Je vais simplement l'ajouter à l'intérieur de la travée. La classe sera H2, et nous pouvons ajouter notre icône. Alors allons de l'avant et choisissez l'icône que nous voulons à partir de Font. Impressionnant. Revenons aux icônes. Et faisons défiler vers le bas. Comme nous pouvons le voir, nous avons tellement d'articles que vous pouvez utiliser. Choisissons ceci, celui-ci par exemple. Pour l'instant. Alors appuyez sur Entrée, puis attendez un peu jusqu'à ce que la page soit chargée. Et vous pouvez réellement utiliser cette icône avec cette simple ligne de code. Donc, si vous allez ici, allez sur le site en utilisant cette icône et copiez ceci. Revenons à notre code. Et au lieu de moi, je colle ça. Maintenant, si nous retournons sur notre site e-commerce, oh, c'est là. Donc, c'est fondamentalement c'est notre Eigen que nous allons utiliser pour l'instant. Donc maintenant, après avoir créé l'élément, nous pouvons réellement commencer par créer nos éléments à l'intérieur de cette barre de navigation. Pour ce faire, nous devons créer la nouvelle division. Et cette division aura plusieurs classes comme d'habitude. La classe sera effondrée, la première classe, et c'est la classe la plus importante et nous verrons pourquoi dans un peu. Mais pour l'instant, Navbar pour les labos. Et puis après cela, justifier le contenu centré. Et bien sûr, texte, majuscules, puis SW, gras. Et bien sûr, puisque nous utilisons les données comme cible pour pointer sur ma barre de navigation, nous devons le nommer comme avant. Donc ma barre de navigation, et c'est en fait pour la division, c'est la division de la demande. A l'intérieur de cette division, nous devons créer la première colonne et ce sera une colonne Dan, et bien sûr un groupe aussi. Donc, c'est un groupe de colonne 10. Et bien sûr, nous devons créer la liste non ordonnée. Et à l'intérieur de notre liste non ordonnée aura navbar, nav et un peu de rembourrage ou de marge de tous les côtés. Donc, nous pouvons créer notre premier élément de liste. Et comme d'habitude, la classe sera nav article. Puisque nous travaillons avec le réseau, le lien ne pointera vers rien pour l'instant. Et bien sûr, la carte d'identité. On s'en sortira plus tard. Mais pour l'instant être la classe active. Et les classes seront nav lien, une boîte peut-être pour plus tard et m2. Alors je pense que nous sommes bons pour l'instant. Alors allons-y et vérifions-le. Si je vais me rafraîchir, on n'a rien vu parce qu'on n'a pas essayé. La page d'accueil. Donc, c'est à la maison. Et comme vous pouvez le voir, nous avons notre maison pour l'instant. C' est donc le premier élément de la liste. Allons de l'avant et créons les autres. Donc, à l'intérieur, laissez-moi copier ces quelques fois. 1, 2, 3, 4 et 5. Maintenant penser à faire cela comme une marque, puis ce produit. Et bien sûr, nous avons besoin d'une page pour le, à propos de nous. Il s'agit donc de nous contacter. Donc c'est en gros quatre. Et le roman, la première partie de la barre de navigation, si je reviens, laissez-moi juste le changer en catégorie chose, c'est mieux. Et si je reviens, rafraîchir, comme on peut le voir, nous avons la catégorie de marque maison sur contact et nous pouvons tous convenir que nous devons les ajuster, peut-être changer les couleurs. Et bien sûr, nous devons ajouter quelques choses à la fin de cette nabla. Peut-être un simple bouton de connexion et d'inscription, il les vérifiera plus tard, mais pour l'instant c'est tout. Donc, dans la prochaine vidéo, nous allons créer notre fichier CSS pour notre en-tête. Et juste quelques choses ici. Et bien sûr continuer mais je pense que notre en-tête, l'inscription, les boutons d'inscription. Et nous allons réellement créer ce signe en tant que modèle. Et nous allons voir comment ça va être construit. Et la vidéo suivante. Donc c'est tout pour cette vidéo. Ici. La suivante. 4. Navbar 1: Bon, donc maintenant que nous avons fini avec notre première partie de la barre de mathématiques, nous pouvons commencer par un départ des animaux. Et une façon de le faire est de créer un style ou un fichier CSS. Et dans ce fichier CSS, nous allons le lier à notre en-tête. Et bien sûr, nous pouvons appeler les éléments par ID ou par nom de classe, ou même par le tag. Et nous pouvons changer ou modifier tout ce que nous n'étions pas, comme la couleur, la taille, etc. Donc, tout d'abord, nous devons créer un dossier public. Et à l'intérieur de ce dossier, nous allons créer un dossier CSS. Et puis créez le fichier CSS. Et je l'ai nommé style.css. Tu peux le nommer comme tu veux. Mais vous devriez faire attention qu'il devrait se terminer par point css, indiquant qu'il s'agit d'un fichier SCSS. Donc c'est mon dossier pour l'instant. Et bien sûr, nous devons le lier à notre en-tête. Alors retournez ici. Et comme vous pouvez le voir, j'ai ajouté cette ligne de code. Et c'est simplement dire que nous voulons lier cet EJS patrimonial à un fichier nommé style.css est un dossier CSS. Et bien sûr, pour revenir en arrière, n' oubliez pas que nous sommes maintenant aux partiels. Donc besoin de revenir ici et ensuite aller dans le dossier CSS, style.css, et cela devrait fonctionner très bien. Donc maintenant pour nous assurer que nous pouvons simplement aller, et disons que j'ai besoin du corps avec la couleur de fond du rouge. Donc maintenant, si je retourne et me rafraîchir, nous pouvons voir que nous avons le fond rouge comme nous le voulions. Cela indique donc que notre fichier CSS fonctionne très bien. Donc la première chose que nous allons modifier la famille de polices de tout le corps. Donc la famille de polices. Et bien sûr, faisons-le san-serif et cela devrait être important, donc nous ajoutons simplement S comme important. Maintenant, reviens frais et maintenant on est bons. Alors allons et commençons avec le style p éléments de notre barre de navigation. Et ces éléments sont à l'intérieur de l'en-tête. Donc, je crée ces commentaires pour indiquer qu'il s'agit d'un en-tête. Donc, et adulte. Et bien sûr, si nous avons besoin d'appeler les éléments par ID ou par nom de classe. Et revenons à l'en-tête. Faites défiler vers le bas Et comme nous pouvons le voir, nous avons cette classe navbar, nav et nav élément. Nous allons donc utiliser ces deux-là pour changer et modifier la bannière de ces éléments. Et bien sûr, revenons en arrière et commençons par le premier. Donc Navbar, Nav. Et ce sera un acteur. Donc, chaque fois que cette classe est active, l'a à l'intérieur de la barre de navigation devrait être de couleur 31. 31, 8, f être cinq. Mais c'est un, fondamentalement c'est le courant que nous voulons utiliser pour l'instant. Et disons que chaque fois que nous survolons quelque chose, nous avons besoin de la couleur pour être aussi celle-là. Donc, nous devons changer l'élément nav chaque fois que nous avons l'élément survolé. Et la couleur devrait être le même hashtag, 31, 8, f, v5. Et maintenant, revenons à rafraîchir. Et chaque fois que je survole cet élément, vous pouvez voir qu'il change à ce que nous voulons. Maintenant, si nous réduisons la taille de ceci, comme nous pouvons le voir, il s'effondre. Cependant, permettez-moi de le rendre plus grand. Donc, nous avons la catégorie de marque maison sur et de contact. Cependant, si nous le réduisons, il s'effondre et il n'y a rien sur lequel nous pouvons appuyer pour visualiser ces éléments. Alors construisons et bien sûr, changez le style de ces articles pour les rendre plus agréables. Donc la première chose que nous devons faire est de créer nos divisions ici. J' ai donc laissé un espace vide pour les créer. Et maintenant, donc la première chose que nous devons créer une nouvelle division de classe, lumière de fond et ligne anémique un. Copiez le coller deux fois de plus. Et voici la ligne 2, la ligne 3. Maintenant, revenons à notre style.css et ajoutons quelques éléments de style ici. Par exemple, nous pouvons ajouter le, les trois lignes sur le même. Donc, la ligne 1 et la ligne 2. Et bien sûr cette ligne 3. Ouvrons les accolades, donc je vais lui donner une largeur de 23 pixels. Vous pouvez le changer et peut-être l'essayer par vous-même. Mais pour l'instant, je lui donne la même chose. La largeur de 23 pixels, la hauteur pour être peut-être, faisons-le trois. Je pense que c'est pour être bon. Et puis la marge de cinq pixels. Et bien sûr, nous devons ajouter une transition. Donc, la transition devrait être ancienne, une 0,4 seconde. Et nous verrons pourquoi dans un instant. Mais pour l'instant, on peut appeler le changement. Et ce sera, comme nous l'avons dit, le Transform Rotate moins 45 degrés. Donc, je vais simplement l'écrire et ensuite l'expliquer. Donc c'est tard. A partir de moins cinq pixels et six pixels. Et bien sûr à la ligne 2. Ce sera notre capacité, 0. Et puis le dernier sera le changement. Cette ligne 3 et transformer. Faites pivoter 45 degrés et traduisez. Moins cinq pixels, moins six pixels. Donc, c'est ça fondamentalement. Et si vous rencontrez des difficultés à écrire cette ligne de code, le CSS, vous pouvez toujours vérifier l'ancien cours de valeur et dans lequel j'ai expliqué HTML et CSS. Et nous avons une explication très détaillée sur certains sujets très importants. Et pour l'instant, ce sont les lignes. Allons de l'avant et continuons ensuite. Retourne vers eux. Donc, après avoir changé de ligne, nous avons besoin du bouton de navigation. Et chaque fois que nous nous concentrons sur elle, nous allons changer le rayon, rayon de la frontière pour être nul. Et c'est important. Bien sûr, et donnons-lui un point-virgule ici. Maintenant, pour l'élément de menu, je nomme simplement, les nomme d'après. Donc, cet élément de menu, Nous allons changer la taille. Donc la taille sera de 16 pixels. Et puis l'espacement des lettres et lui donner un pixel et la couleur et le rendre peut-être juste entre le blanc et le gris, sorte que le poids de la police sera plus léger. Et enfin, la transition sera tout n, ou peut-être la couleur et 0,5 secondes. Donc c'est tout pour le style de la barre de navigation. Alors allons de l'avant et renommons les. Donc, à l'intérieur de l'en-tête, nous avons ici le bambin navbar, la lumière de fond 123. Et bien sûr, nous devons ajouter l'élément de menu à tous ces éléments. Donc, élément de menu. Et chaque fois que vous voulez ajouter la même chose pour plus d'un élément, vous pouvez simplement appuyer sur et, puis choisir tous les endroits que vous voulez écrire, puis écrire l'élément de menu. Et maintenant, on est bons. Donc, nous avons nos éléments de menu, éléments de navigation, barre de navigation, tout devrait bien fonctionner. Allons-y et courons. Comme nous pouvons le voir, nous avons notre catégorie de marque maison sur et de contact. Et chaque fois que nous survolons, vous pouvez voir qu'il change la couleur. Maintenant, ce que nous avons fait effectivement des transitions, c'est de créer cela. La première chose est de créer celui-ci. Et chaque fois qu'on appuie dessus, on les a ici. Alors qu'est-ce qu'on a fait ? Annuler, revenir au style. Et comme on peut le voir, nous avons fait la transition en 4,4 secondes pour les lions. Et bien sûr, nous avons traduit moins 5 moins 45 degrés et moins cinq pixels à six pixels pour la ligne 1, moins cinq pixels, et moins six pixels pour la ligne 3 et la ligne 2, nous aurons un Bassett est 0. Et bien sûr, tous les éléments de menu ont la même taille de police, espacement des lettres, la couleur, le poids de la police et la même transition. Donc, c'est essentiellement pour les styles. Si on y retourne, le voit encore une fois. Si on presse ici, on a tous nos éléments ici. Rends-le plus grand. On les a juste ici. Alors peut-être que dans la prochaine vidéo, nous pouvons ajouter ces boutons d'inscription et de connexion. Et bien sûr, nous pouvons peut-être réduire la taille ici. Je crois que ça a l'air. Peut-être que je peux déplacer ça un peu vers la droite et le rendre plus grand. Et oui, on est bons pour l'instant. Donc c'est tout pour cette vidéo. La prochaine vidéo, nous allons finaliser notre barre de navigation, puis commencer par notre pied de page et vous voir ensuite. 5. Navbar 2: Bonjour et bienvenue. Dans cette vidéo, nous allons continuer à construire notre barre de navigation, puis passer à la photo. Donc, tout d'abord, nous devons créer deux boutons. Le premier, nous dirons s'inscrire, et le second serait de se connecter si vous avez déjà un compte. Donc, avec cela étant dit, continuons. Nous avons construit notre liste non ordonnée. Nous avons cette division, et à l'intérieur de cet effondrement, nous pouvons ajouter notre nouvelle division. Et cette division n'apparaîtra que si l'écran est de la boue. Donc, inscrivez-vous n'apparaîtra que si nous avons un grand écran. Donc, pour ce faire, nous allons utiliser la grande colonne deux. Et la liste non ordonnée sera de classes navbar. Et pour indiquer que nous voulons que cela ajoute, je suis désolé, navbar-nav à float. Et donc flotter. Et, et on est bons. Nous pouvons commencer par créer l'élément nav. Et bien sûr, nous devons créer le FRH. Les classes seront nav link. Ensuite, nous avons la lumière de texte et bien sûr, peut-être ajouter la classe Inscription pour plus tard. Donc, c'est inscrivez-vous. Si je vais revenir en arrière et me rafraîchir, nous allons obtenir ce bouton d'inscription qui apparaît ici. Maintenant, comme nous l'avons dit, nous voulons que cette inscription n'apparaisse que lorsque nous utilisons un grand écran. Donc si je le rends peut-être plus petit, on peut voir que l'inscription apparaît ici. Donc on est bons pour l'instant. Et bien sûr, nous devons ajouter la connexion, mais je pense juste faire disparaître l'inscription. Cependant, si nous avons un petit écran comme celui-ci, nous allons avoir ceci et le logo. Et là, nous avons le sinus. Et pour ce faire, nous pouvons simplement écrire notre code en dessous de notre division. Alors, cette division, où est-elle ? C' est ça, c'est l'effondrement. Et cette division, puis créer une nouvelle division. Et cette division aura plusieurs classes. On a déjà utilisé dix de la richesse ici. Donc nous allons utiliser les deux autres. Et bien sûr, je le donne représente px 1, colonne 2. Et si l'écran est grand, peut-être qu'un suffira. Alors maintenant, nous allons créer notre liste. Comme d'habitude, la classe sera barre de navigation, puis l'élément de liste de l'élément de navigation de classe. Et bien sûr, nous devons créer notre élément. signalez rien. Pour l'instant. C' est en longueur comme d'habitude. Et à l'intérieur de ce lien de navigation. Nous pouvons créer notre envergure. Et dans ce cas, ce que je pense est de créer un modèle et cela sortira. Donc, par exemple, supposons que j'ai ce bouton ici. Chaque fois que j'appuie, appuyez sur sinus n, quelque chose apparaîtra ici pour remplir le nom d'utilisateur et le mot de passe. Alors allons de l'avant et construisons-le maintenant à l'intérieur du lien ici. Donc, nous avons assez de barre blanche, élément de navigation et lien de navigation. Alors passons ça pour l'instant. Nous allons créer notre icône plus tard. Mais pour l'instant, nous allons obtenir le modèle réel. Donc, ce sera un lien vers rien pour l'instant. Et ce sera la marque navbar. Comme d'habitude, les données soient lutte. Et ce serait de modéliser la saga uniquement pour tunnel la cible BAS de données du modèle. Je vais le nommer sinus n. Donc, je vais simplement écrire la connexion hashtag. A l'intérieur de cette couche, je vais créer un bouton, a, classe B, la fin, le type sera bouton. Et le style que je pense à avoir la couleur de fond de comme d'habitude. Étape 3 un, 8, f, v5. Alors maintenant, on est bons. Si je viens d'entrer son signe et revenons, rafraîchir, aller chercher ce bouton comme signe ici. Maintenant, ce que nous voulons faire est de créer ce modèle. Donc, chaque fois qu'on appuie sur ça va sortir à, ici. Et avant cela, ajoutons juste cette petite chose ici. Nous pensons donc toujours à ajouter un panier. Et à l'intérieur de ce lien de navigation, alors peut-être juste ajouter l'icône I de Font Awesome. Et les cours seront FAS comme un panier d'achat et le rendre deux fois plus grand. Alors j'ai un 2 x et bien sûr nous avons besoin de quelques styles, donc je pense à le rendre blanc, donc la couleur blanche. Donc maintenant, nous sommes bons Rafraîchir, aller chercher ce panier ici. Et nous voulons montrer le panier et l'inscription en même temps. Donc, chaque fois que l'utilisateur ne se connecte pas, nous allons montrer sinus n et nous inscrire. Peut-être qu'on a montré ce panier ici. Mais on s'en sortira plus tard. Pour l'instant, nous allons avoir l'inscription. Et bien sûr, le bouton de déconnexion. Alors allons de l'avant et créé comme, comme celui-ci en fait. Donc, nous avons ici le bouton de déconnexion. Donc, changeons simplement le signe juste ici. Et bien sûr, vérifions chaque marque de navbar d'arbre, modal, classe de type sinus n. Tout a l'air bien. Cependant, nous devons réellement supprimer les éléments, celui-ci et celui-ci. Donc je pense qu'on va bien maintenant. Nous avons la barre de navigation de classe. Et nous devons ajouter une action. Alors décliquetez, allez faire quelque chose, mais pour l'instant, je vais le laisser vide. Et nous allons y faire face en roulant sur le backend. Pour l'instant, c'est ça. Donc, si je retourne me rafraîchir, vais chercher la connexion, la déconnexion, l'inscription et la garde. Alors maintenant, avant de passer à autre chose, commençons simplement. Donc ces deux-là et nous allons avoir inscription et signer n catégorie de marque maison. Et tout a l'air bien pour l'instant. Donc, c'est essentiellement pour l'inscription et la connexion. Et maintenant, créons le modèle réel ici. Donc, pour ce faire, allons de l'avant et revenons à notre en-tête. À l'intérieur de cet en-tête, Sortons de cet en-tête de barre de navigation, créez une nouvelle division. Et cette division sera un modèle de classe, et il sera fondu aussi l'identifiant, comme nous l'avons dit chaque point à ceci, alors copions-le. Donc id égal à sinus n à l'intérieur de cette division, nous allons créer le formulaire. L' action sera décidée plus tard. Pour l'instant, je vais le laisser vide. Et bien sûr, nous devons ajouter la méthode, mais pour l'instant, nous pouvons aller sans elle. Donc, la division de cette classe sera un dialogue modal. Et nous allons créer plusieurs divisions à l'intérieur de ce dialogue modal. Donc, le premier sera plus que du contenu. A l'intérieur de ce contenu, nous allons avoir l'en-tête et le titre, puis le corps. Donc, la première chose que nous allons créer un modèle que le contenu. Et à l'intérieur, nous allons avoir l'en-tête modal. Ensuite, nous avons le bar h. Ce sera le titre modal. Et là, nous allons l'avoir signé. Pour l'instant. Si je retourne en arrière et rafraîchir le présent, ainsi, le sinus n sortirait ici. Donc, ce que nous allons faire est d'ajouter une étiquette, puis une entrée, puis une étiquette pour l'entrée du mot de passe, et le bouton de connexion. Retourne. Et bien sûr, après avoir créé ce H4, peut-être créer le bouton à rejeter. Par exemple. Ici, nous allons avoir le corps modal et je pense à créer un groupe de formulaires. Et bien sûr, nous allons avoir une interdiction. La première étiquette sera pour un e-mail. La classe sera étiquetée. Et puis nous avons l'adresse e-mail. Et bien sûr, après avoir obtenu l'étiquette moi d'avoir une entrée de type e-mail. Et les classes seront formées contrôle. Ensuite, nous avons MON pour être deux et ceci est une entrée. Et le nom, nous allons utiliser ce nom plus tard, mais pour l'instant nous allons le nommer nom d'utilisateur. Donc c'est le premier. Je vais aller de l'avant et rafraîchir la presse. Nous avons une adresse e-mail et l'entrée. Donc, revenons en arrière et copions réellement ceci pour ne pas le répéter plusieurs fois. Donc, nous avons l'adresse e-mail, puis nous avons le mot de passe. Donc, nous allons simplement changer ceci pour mot de passe. Et bien sûr, nous devons aussi les changer. Donc type de mot de passe, aussi mot de passe. Et enfin, le nom sera également mot de passe. Donc c'est tout pour l'adresse e-mail et le mot de passe. Vérifie-les. Nous avons le mot de passe e-mail, et bien sûr, nous devons ajouter le bouton de connexion. Alors revenons à ici. Et à l'intérieur de notre division. Celle-ci est pour le corps. Nous, nous avons fini avec le corps afin de créer le pied de page. Donc, cela sera modélisé. Et nous allons justifier le centre de contenu. À l'intérieur de cette photo, je vais créer le bouton et ce sera de type submit et la classe sera btn. Et je pense à la même couleur de fond qu'avant. Désolée, couleur de fond. Et ce serait 318, F, B5. Donc 31. C' est b5. Revenons rafraîchir. Nous allons avoir ce petit bouton, mais nous avons oublié d'ajouter ici sinus n. Revenir, rafraîchir sinus n. Et comme vous pouvez le voir, nous avons ce bouton de connexion juste ici. Maintenant, nous pouvons entrer notre adresse e-mail et mot de passe, puis cliquer sur connexion. Et si nous sommes connectés, si nous avons un compte sur ce site, cela nous prendra en conséquence. Cependant, si nous n'avons pas, peut-être que nous allons ajouter quelque chose comme une alerte ou quelque chose comme ça pour simplement glorifier que cette adresse e-mail ou mot de passe ou non, correct. Donc, c'est fondamentalement pour l'extrémité frontale de l'en-tête. Je pense que c'est peut-être assez clair email de connexion, adresse et mot de passe. Peut-être plus tard, nous pouvons ajouter une connexion avec Google, où l'utilisateur peut choisir de se connecter avec un déjà créer le compte de Google. Et vous pouvez aussi le faire avec Facebook. Mais pour rester simple pour l'instant, nous allons utiliser le bouton de connexion. Et puis peut-être plus tard, nous pouvons ajouter un autre bouton juste ici et peut-être dire se connecter avec Google. Donc c'est tout pour l'en-tête. Et la prochaine vidéo, nous allons créer notre pied de page. Alors, à vous voir. 6. Footer: Bonjour et bienvenue. Dans cette vidéo, nous allons créer notre pied de page. Commençons donc par créer le congelé. Nous avons le photosynthate EJS. Cependant, avant excitant, Copions tous ces, puis ajoutez-les à notre pied de page. C' est ce qui serait la fin de nos quatre là-bas. Donc, nous avons les scripts et le corps que le HTML. Donc, pour l'instant, créons le pied de page. Les classes seront sombres comme l'en-tête, le X5 et vides cinq. Donc maintenant, nous pouvons créer notre liquide de récipient et ensuite créer la rangée. Et le texte sera léger. Et bien sûr, nous avons besoin d'un rembourrage sur l'axe y, donc peut-être quatre. Et maintenant, après avoir créé la ligne, nous devons créer la couleur. Donc, les algues de canon pour et pour les petits, je vais en faire six. Maintenant, peut-être à l'âge de 5 ans. Donc c'est le « About Us ». Et le paragraphe sera une piste de classe. Et ajoutons un peu de Lauren, Lauren, je pense que c'est bien. Donc maintenant, si vous revenez et rafraîchissez, rien ne se passera puisque nous n'avons pas ajouté la photo à notre page d'accueil. Alors ici, copions ceci et ajoutez-le ici. Mais avant cela, Ajoutons quelques lignes. Alors peut-être que 20, c'est bien. Et maintenant, au lieu de l'en-tête, nous devons ajouter le pied de page. Alors maintenant, revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, nous avons ces A propos ici et un paragraphe Lorem Ipsum. Cependant, si on y retourne, voyons ce qui se passe. Donc, ici, nous avons le, chacun cinq images sur nous. Et puis nous avons la classe peut-être changé cette piste à petit car ils sont égaux en taille 10. Allons-y et vérifions-les maintenant. Si j'y retourne et que ça a l'air mieux. Donc, nous avons le sujet de nous. Maintenant, créons un peu plus. Merci. Je pensais donc diviser la page en quatre catégories. Le premier est à propos de nous que nous allons demander, peut-être juste ajouter tout cela ici. Et puis nous allons avoir l'e-mail ou besoin d'aide ou quelque chose comme ça, puis ils se sont connectés. Donc c'est le plan. Allons-y ici. Donc nous avons la colonne, puis créons une autre. Donc, après avoir fait avec la première colonne, pour l'utiliser pour deux maintenant, et bien sûr pour les petites, je pensais la même chose qu'avant. Donc colonne petit six. A l'intérieur de cette colonne, nous allons créer la visite nous. Et puis nous avons la liste non ordonnée. Faisons-le décoiffé pour avoir les points de balle. Et bien sûr, nous pouvons créer nos articles de liste. L' élément sera classe, pied de page, lien. Et bien sûr, besoin d'ajouter à la maison. Et en fait, copions ceci quelques fois. Cette liste, point 123. Donc, nous avons la maison peut-être des marques et des produits. Donc, si je retourne en arrière et rafraîchir rien pour obtenir des visiteurs marques et produits maison. Et chaque fois que nous allons, euh, peut-être, peut-être que l'utilisateur presse sur les marques, Il lui faudra automatiquement faire la catégorie de la marque ici. Donc c'est ça. Et en fait, changeons ces produits en catégories puisque nous les avons déjà nommés auparavant. Donc, c'est ça essentiellement pour la deuxième division. Commençons par le troisième. Et ici, nous allons demander à l'utilisateur s'il a besoin d'aide. Donc la colonne 2 et la colonne petit six. Et puis aller créer un H5 et une classe sera Pb trois. Et nous allons vous demander si vous avez besoin d'aide. C' est le cas. Nous avons une liste non ordonnée dit avant que la classe sera liste et l'élément de liste sera une référence H et peut-être ajouter le contact ici. Donc la classe serait pied de page, lien, Contactez-nous. Et bien sûr, nous pouvons copier cet élément de liste pour peut-être ajouter notre adresse e-mail. Donc, ici, nous allons avoir notre adresse e-mail, peut-être cela dans le commerce électronique sur exemple.com. Et bien sûr, nous pouvons ajouter ceci dès maintenant. Ainsi, chaque fois que nous voulons envoyer un e-mail ou faire envoyer un e-mail à l'utilisateur, nous pouvons ouvrir la boîte aux lettres en utilisant le courrier à et ensuite envoyé à e-commerce et example.com. Donc maintenant, si vous revenez et actualisez, nous allons avoir le contact avec nous et le commerce électronique et l'exemple il y a. Et ce contactez-nous qui emmènera l'utilisateur dans une toute nouvelle page où nous avons un message que l'utilisateur peut envoyer. Et ce e-commerce sera en fait dans la boîte aux lettres de l'utilisateur et lui faire réellement envoyer un e-mail à nous. Donc, c'est essentiellement l'idée de besoin d'aide. Nous avons deux options. Soit nous contacter via le site Web ou aller par e-mail. Enfin, nous avons le séjour connecté, et cela sera utilisé pour faire entrer l'utilisateur son e-mail s'il veut recevoir des offres exclusives ou de nouvelles mises à jour. Revenons à notre code. Et à l'intérieur de cela, créez une nouvelle division. Les classes seront colonne grande ou colonne petite, 685, peut-être. Oui. Et la classe sera V3. Ensuite, nous avons le reste connecté. Et puis nous avons un paragraphe. Le paragraphe sera petit. Et peut-être quelque chose comme entrer votre adresse e-mail pour recevoir des offres exclusives et de nouvelles mises à jour. Donc c'est ça. Créons le formulaire que l'utilisateur doit soumettre. L' action sera vide pour l'instant. Et bien sûr, nous devons ajouter un peu de classe, peut-être juste les trois marges pour l'instant. Et puis nous devons créer une division de classe. Groupe d'entrées-groupe. A l'intérieur de cette entrée aura l'entrée mâle et la classe sera formée contrôle. Et bien sûr, le nom serait email. Ceci est pour l'espace réservé plus tard, serait l'adresse e-mail. Donc je pense que c'est bien. Peut-être juste ajouter le bouton à soumettre. Donc, ce serait entrée, group append, l'ajouter à l'entrée au-dessus. Et nous avons le bouton et le type sera soumis. Ensuite, nous avons les cours. Nous avons plusieurs cours. Je pensais ajouter un contexte de danger. Donc on a donné le danger. Et puis nous avons le texte, le texte blanc, en majuscules. Et bien sûr, peut-être rendre le poids de la police en gras. Ouais, Donc c'est tout fondamentalement, si je vais de l'avant et rafraîchir, nous allons recevoir entrer votre adresse e-mail pour recevoir des offres exclusives et de nouvelles mises à jour. Nous avons l'adresse e-mail et ce bouton. Cependant, nous avons oublié d'ajouter quelque chose, peut-être à vous voir ici. Donc, si je retourne en arrière et me rafraîchir, vais obtenir cette adresse e-mail et le CU ajouté à lui. Maintenant, si nous voyons maintenant, nous avons une petite différence. Peut-être. Allons ajuster ça. Alors au lieu de, comptons-les. Donc nous avons ici 4268. Et nous avons aussi ici pour ouais, je pense que nous sommes bons pour l'instant. Cependant, cette adresse e-mail point b2 long. Et pour être dans la même ligne, peut-être un espace de dividendes élevé. Vérifions. Oui, c'est à cause de cette adresse e-mail est trop longue. Nous pouvons faire autre chose que ça, alors faisons-le éco sur example.com, rafraîchir. Et maintenant, on est bons. Vous avez l'e-mail Contactez-nous. Et s'il veut entrer son propre lui et Atlas pour recevoir alphas exclusifs et de nouvelles mises à jour, il peut à partir d'ici. Et cliquez sur Soumettre, à vous voir. Et puis cela sera plus tard utilisé dans notre base de données où nous pouvons garder ces e-mails et ensuite envoyer des offres exclusives à ces utilisateurs. Donc c'est tout pour le pied de page. Nous venons de créer notre en-tête et notre pied de page. Et en fait, je crois qu'ils ont l'air sympa et nous avons notre planté ici. Et bien sûr, nous pouvons ajuster ces deux boutons, mais pour l'instant, nous allons le laisser tel quel. Et les prochaines vidéos, nous allons commencer par créer la page à propos de nous et contactez-nous. Ensuite, nous passerons à nos trois dernières pages, qui sont la marque et la catégorie maison. Cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 7. À propos et contact: Bonjour et bienvenue. Dans cette vidéo, nous allons créer notre page À propos de nous. Et nous allons commencer à créer cette page à l'intérieur de la page d'accueil. Ensuite, après l'avoir terminé, nous pouvons créer notre propre fichier EJS et y déplacer tout le code. Mais pour l'instant, nous allons commencer par le créer ici. Donc, la première chose que nous devons faire est de créer la section avec quelques classes. La première classe serait B5 et je lui donnerais un m 4 peut-être. Oui. Et nous devons créer notre liquide de récipient. Ensuite, nous pouvons créer notre division. Et cette division sera l'en-tête, l'About Us, le titre. Et nous sommes créés, peut-être centre de texte. Et puis chacun. Je pense avoir une couleur. Donc j'utilise cette tuile. Ce sera un décalage de couleur. Et puis nous pouvons créer A propos de nous. Ensuite, nous avons un paragraphe. J' ajouterai un peu de rembourrage sur l'axe des y, puis certains apprendront. Dieu merci. Et si nous retournons et nous rafraîchissons, nous allons avoir ça sur nous que nous avons quelques lignes. Après cela, nous pouvons créer peut-être quelque chose de visuel. Et je pensais peut-être nous écrire et ensuite énumérer certaines de nos caractéristiques ou que sommes-nous spéciaux ? Peut-être qu'après avoir créé cette division, nous pouvons créer une nouvelle division. Et ce sera rho texte blanc et centre fiscal. Ensuite, nous allons avoir la colonne à l'ancienne page et je suis blanc tomber à l'intérieur de ceci. Je vais vous demander pourquoi. Et bien sûr, nous devons ajouter quelques classes ici, alors affichez-les pour eux avant. Et la couleur sera également noire. Donc, c'est fondamentalement pour les fils et maintenant nous pouvons peut-être ajouter quelques soulignés ici. Donc, le Persan. Et cela prendra une classe de soulignement et peut-être Mars et bouton de feuille après le soulignement. Donc si je reviens et comme vous pouvez le voir, on a eu ça, comme on l'a dit. Et ici, nous pouvons ajouter les caractéristiques ou nos spécialités. Donc, je pensais ajouter plus rapidement, très meilleurs prix et qualité supérieure, puis aussi ajouter quelques icônes pour indiquer ce que nous disons. Donc, après avoir terminé de cette division, qui est ici, nous pouvons aller de l'avant et créer une nouvelle rangée avec MA vie. Et chaque colonne serait MD4. Et bien sûr le centre fiscal. Maintenant, nous pouvons créer notre première icône. Et cette icône sera FASFA, expédition rapide, pour indiquer la livraison rapide et faire cinq sacs. Et le texte sera dangereux. Donc maintenant m avant, et maintenant nous sommes bons. Ajoutons une livraison rapide ici. Et si je reviens, actualisez maintenant pour obtenir cette icône, puis la livraison rapide. Si nous voulons ajouter quelque chose ici, nous pouvons ajouter un paragraphe. Donc peut-être d'habitude autour de cinq à sept jours. Retournons et rafraîchissons. Et comme nous pouvons le voir, nous avons une livraison rapide, généralement autour de cinq à sept jours. Il nous reste encore deux. C' est donc une livraison rapide. Nous n'avons pas les meilleurs prix. Allons de l'avant et mis en œuvre. Nous pouvons simplement copier cette colonne, deux autres types, 1 et 2. Au lieu de la livraison rapide, nous pouvons écrire les meilleurs prix. Et ici, nous pouvons ajouter la qualité supérieure. Maintenant, j'ai déjà cherché les icônes, donc je sais au lieu de FAS, avoir une expédition, Supprimons cela. Et j'ai pensé aux meilleurs prix n'utilisent la main-tenue USD. Donc, comme l'aide et la tenue USD et détecte sera l'inter, aussi la blague qu'il est rouge. Et voici une flèche, puis encerclez. Alors, c'est ça. Mais au lieu du FAS, nous allons utiliser le FHIR. Donc, ce sont des classes simples et une police de quatre pieds, impressionnant, et nous n'avons pas à nous inquiéter pour eux. Nous ne pouvons tout simplement pas les copier à partir de là et les implémenter dans. Maintenant, allons de l'avant et rafraîchissons. Nous avons les meilleurs prix, qualité et la livraison rapide. Alors modifions ces paragraphes. Au lieu d'environ cinq à sept jours. Peut-être. Je ne sais pas, peut-être Lauren, huit. Et puis nous avons ici une qualité supérieure. Et c'est aussi appris. Alors allez-y et rafraîchissez, considérez notre Y AS rapidement dans un très meilleurs prix et qualité. Et nous avons une petite définition ici. Oh, introduction à nos produits ou à notre entreprise. Donc c'est essentiellement pour la page À propos de nous. Je pense que ça a l'air sympa et simple. Et bien sûr, nous pouvons aller de l'avant et créer notre page Contactez-nous. Non. Donc avant cela, nous pouvons simplement supprimer tous ces éléments et les ajouter dans la science, notre sujet de nous. Très bien. Alors allons de l'avant et créer ici un nouveau fichier nommé à propos de EJS. Et cela contiendra toute cette section. Nous allons donc le copier et le coller ici, mais assurez-vous d'inclure l'en-tête et le pied de page. Donc je vais copier celui-ci inclus ici. Et puis nous allons avoir le pied de page aussi. Alors s'il vous plaît ici. Et maintenant, on est bons. Nous sommes retournés à notre première position. Nous avons bonjour de chez nous. Et ces lignes ici. Donc, c'est essentiellement pour le About Us. Et chaque fois que nous voulons implémenter ou que vous travaillez avec le back-end, nous pouvons ajuster cela. Tout ce que nous pressons sur ce sujet, emmenez-nous à la, à propos des js. Donc nous laisserons ça pour plus tard. Mais pour l'instant, nous allons de l'avant et créons une page de contact. Alors revenons ici. Et bien sûr, nous avons besoin, ou nous devons également créer le contact avec l'EJS. Mais comme je l'ai fait avant, je vais d'abord travailler avec la maison à l'EJS, puis je le replacer dans un autre fichier. Donc, pour l'instant, créons ici une nouvelle division, et ce sera le conteneur. Et je vais ajouter quelques classes aussi vu sera formulaire de contact et BJ sombre. Et je pensais ajouter la classe d'image de contact. Et ces classes que nous allons utiliser discutes dans le fichier CSS ionique, mais pour l'instant je vais les ajouter ici. Donc la classe sera un bébé, une diapositive fiscale Rocket Chat. Et puis nous avons un 5 x pD D3. Donc, c'est ça fondamentalement, si je retourne et me rafraîchir, vais avoir ceci et nous avons ce message, je pourrais. Et on va le placer au milieu. Ensuite, nous allons avoir une boîte ici, qui dira pour entrer votre adresse e-mail et votre message. Et si vous êtes affecté, alors peut-être que nous pouvons le modifier pour entrer le message uniquement parce que nous connaissons déjà l'adresse e-mail. C' est donc l'idée générale. Alors allons de l'avant et mettez-le en œuvre maintenant. Maintenant à l'intérieur. Ensuite, peut-être créer un formulaire. Et nous avons la méthode et l'action. On laissera ça pour plus tard. A l'intérieur de ce formulaire, nous avons l'âge de trois ans où nous allons sauver. Vous aimeriez recevoir vos commentaires. Et alkylate la diapositive de texte de classe. Retournez et rafraîchissez. Et comme on peut le voir, on coupe ça. Nous serions ravis d'entendre vos commentaires. Maintenant, nous allons les commencer et les coller au milieu dans un peu. Mais pour l'instant, nous allons simplement les ajouter ici. Donc c'est le h3 que nous pouvons ajouter. Notre division devrait être une rangée. A l'intérieur de cette rangée, nous allons avoir le sexe moyen en verre, la colonne, désolé, et ensuite nous avons le groupe de forme comme d'habitude. Et vous voulez avoir l'entrée de texte de type. Et peut-être que le nom sera X nom. Et puis nous avons le contrôle de formulaire de classe, puis le détenteur de place, et peut-être votre nom. Et maintenant, nous ajoutons la valeur, mais pour l'instant et laissez-le jusqu'à. Donc, c'est essentiellement pour l'entrée. Donc, copions ça deux fois de plus. Pour le téléphone électronique, puis le message, le message réel. Alors voyons. Nous avons ici notre e-mail et ensuite nous avons un SMS. E-mail. Le type doit être le courrier électronique. Ensuite, on a le téléphone. Donc, le texte de type est correct. Nous avons simplement besoin de changer ça en téléphone et ensuite votre téléphone. Et voyons ce que nous avons construit et maintenant rafraîchir, nous avons obtenu ces quatre entrées et ils sont tous au-dessous de l'autre. Nous allons donc les corriger dans notre fichier CSS. Pour l'instant. Faisons simplement les créer. Supprimons ceci. Et maintenant que nous avons notre nom, email, numéro de téléphone. Encore une fois, ajoutez le message d'envoi. Alors créons ça ici. Et ce serait en fait le même texte de type d'entrée. Peut-être que c'est ici soumettre. Et au lieu de balises. Et puis nous avons ici, au lieu du nom, je suis le nom de texte, homme d'affaires, soumettre. Et puis on va ajouter quelque chose sur Clegg. Espace réservé. Peut-être simplement supprimer l'espace réservé et la classe sera btn ensemble de contact de contrôle de formulaire. Donc contact BTN, la valeur serait envoyer message. Nous avons donc envoyé un message. Et maintenant, on est bons. Si je reviens et actualise, nous avons ce bouton ici qui indique Envoyer un message. Et si nous voulons l'ajuster, nous pouvons simplement ajouter le btn ici, rafraîchir. Et il a disparu puisque nous n'avons pas utilisé la diapositive Texte. Donc si j'utilise du texte, peut-être un danger. Voyons voir, Rafraîchir. Nous avons ce bouton ici, mais pour l'instant je vais le laisser comme avant, la manière originale, et puis je vais l'ajuster en utilisant le style CSS. Donc, c'est un fondamentalement pour le message d'envoi et ceux-ci sont sur la même colonne. Et maintenant, créons une autre colonne où nous allons ajouter notre message réel. Donc colonne md 6. Et cette colonne, nous allons créer un groupe de formulaires comme d'habitude. Et puis nous allons créer la zone de texte. Le nom doit être du texte. Message. La classe sera pour le contrôle. Et je pense qu'on est bons. Nous avons tout ce dont nous avons besoin. Peut-être que le style, la largeur à 100 pour cent, et la hauteur à être aussi peut-être 150 pixels est correct. Et maintenant, on est bons. Nous avons notre zone de texte. Enfin, nous devons ajouter le bouton d'envoi de message dans ce cas. Alors allons de l'avant et créons le juste ici. Ou peut-être qu'on est bons pour l'instant. En fait, je pensais déplacer ça ici ou voyons. Mais retournez en arrière et rafraîchissez-vous. Nous avons notre zone de texte et nous avons notre message. Je pense que c'est mieux comme ça. C' est donc l'idée générale. Et dans la vidéo suivante, nous allons styler ces, cette forme et le rendre meilleur look en les plaçant simplement au milieu, en ayant un peu de rembourrage et de marge ici et là. Et changer le style de ce bouton d'envoi de message. étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 8. Marque: Bon, Donc maintenant nous avons fini avec notre maison pour environ et contactez-nous et bêtas, nous pouvons continuer avec la page de la marque. Revenons donc à localhost 3000, et c'est la page que nous avons. Nous allons simplement les déplacer vers la page de commentaires ou la page de contact. Donc ici, je vais créer un nouveau fichier et le nommer, contacter ce EJS, puis aller à Accueil, copier tout cela et simplement collé à l'intérieur du contact. N' oubliez pas d'ajouter l'en-tête et le pied de page à chaque fichier EJS que vous créez. Donc, ici, nous avons en-tête, copier ceci et ajouter une déchirure et un pied de page. Donc maintenant je suis installé ici, nous avons été là et maintenant nous sommes bons. Si je retourne, sauvegardez, revenons ici et rafraîchissons. C' est la page d'accueil jusqu'à maintenant. Et nous avons déjà créé le sujet et contacter nos discours et nous pouvons les utiliser quand nous le voulons. Ainsi, par exemple, si l'utilisateur appuie sur environ, il devrait automatiquement l'emmener à la page about au lieu de ce hashtag. Maintenant, allons entrer dans la page de la marque. Et dans ce cas, je vais le construire comme d'habitude et la page d'accueil. Ensuite, chaque fois que nous avons fait, nous pouvons simplement l'enlever et le placer dans la marque ce fichier EJS. Donc, pour l'instant, commençons par créer la division. Et ce sera un texte centré et l'arrière-plan, je vais lui donner le nom marques de fond vendus, l'utiliser dans le CSS plus tard. Mais pour l'instant, c'est ça. Le H1 sera peut-être des marques. Et je pense avoir un peu de rembourrage. années de classe seront cinq BT. Et bien sûr, aller écrire un paragraphe avec le plomb de classe Pb. J' ai aussi, et je pense, choisi votre produit de la marque que vous aimez. C' est donc une petite introduction. Si je reviens et rafraîchis, nous avons des marques et choisissons votre produit parmi la marque que vous aimez. Et bien sûr, nous pouvons vouloir ajouter un arrière-plan ici peut être une image ou une couleur d'arrière-plan, et nous le comprendrons plus tard. Mais pour l'instant, c'est l'idée principale. Et à l'intérieur de cela et penser à ajouter une entrée de recherche afin que l'utilisateur puisse rechercher la sonde ou la marque qu'il veut. Et puis, euh, peut-être le bouton ici. Alors allons-y et faisons-le. Donc, ce sera à l'intérieur de la forme et la forme vraiment vide pour l'instant. Et la division sera une marge de groupe d'entrée, trois en bas. Et puis une auto max. Je pense que c'est bien. Et puis nous avons l'entrée. Donc, entrée de texte de type, la classe sera formée contrôlée comme d'habitude. Et bien sûr, nous avons besoin d'un détenteur de place. Alors, recherchez votre marque. Et puis nous avons le nom que nous allons utiliser plus tard. Je pense à la marque. Et puis nous avons peut-être ajouter le bouton et il sera sur la même ligne de l'entrée. Donc, je vais utiliser la classe input-group append. Et puis ajoutez le bouton de classe, btn, btn, contour BTN, secondaire. Et juste pour le rendre gris, puis E5. Bien sûr, le type sera soumis. Et puis nous avons le bouton réel qui est la recherche. Donc maintenant, si nous revenons en arrière et appuyez sur Actualiser, connu pour avoir le bouton Rechercher, mais il semble très grand. Ça prend toute la page, alors peut-être qu'on peut l'ajuster. Nous avons le bouton Rechercher ici. Donc, à la place, chaque fois que nous créons cette entrée, à la place ceci et cette division, nous pouvons créer réellement le style que nous voulons et nous voulons que la largeur maximale soit peut-être 35 REM. Vérifions. Maintenant, si on retourne rafraîchir. Oui, je pense que c'est bien. Mais nous pouvons aussi faire la hauteur. Donc, dans ce cas, peut-être ajouter ici. Ouais, donc on supprime cette marge, cinq derniers et on va revenir comme on peut le voir, on a notre barre de recherche avec le bouton Rechercher ici. Donc c'est tout pour la marque. Choisissez votre produit dans la marque que vous aimez et dans la barre de recherche. Maintenant, passons aux cartes réelles, où nous aurons les cartes. Donc, l'utilisateur a deux options. Soit choisissez la marque en la recherchant, soit nous avons ici quelques marques répertoriées et vous pouvez choisir l'une d'entre elles. Alors revenons et entendons. Après avoir terminé avec la forme et la division, nous pouvons commencer par notre nouvelle division, qui sera rangée. Et je suis Acts Auto. Et bien sûr, à l'intérieur de cette ligne, nous devons créer la colonne, donc le sexe de la colonne et une Auto max. Aussi à l'intérieur de cette rangée, je vais créer une autre ligne. Et nous verrons pourquoi dans une minute. Mais pour l'instant, prenons-le à l'usine. Donc colonne six, ou peut-être à moyen plus sexy. Donc peut-être que le sexe moyen et le genre de tirage grand à seront quatre. Et MON pour ajouter un peu de rembourrage sur tous les côtés. Donc P1. Maintenant, nous avons notre structure et nous le divisons en fait heure, peut-être notre page et 2. Deux colonnes chaque fois que nous avons un médium pour les écrans de plus petite taille et en trois colonnes. Et chaque fois que nous avons de grands écrans et comment savoir que c'est deux ou trois. Donc, l'écran est divisé en 12. Et ici, nous utilisons six et moyennes et petites. Donc 6 fois 2. Nous avons donc deux colonnes pour les écrans moyens ou plus petits. Et il aura quatre fois trois, ce qui est 12. Nous avons donc trois colonnes chaque fois que nous avons de grands écrans. Et on verra ça dans une minute. Mais pour l'instant, créons notre carte. Donc nous avons entendu et je vais lui donner la marque Dieu. C' est, nous allons utiliser NCSS. Et bien sûr, créons notre formulaire et aurons une action plus tard. Mais pour l'instant, restons dans cela pour MD. Et nous allons avoir une image, va choisir une image dans une minute. Mais pour l'instant, nous allons avoir l'image de la carte. Et bien sûr, je vais au style parce que je veux que l'image ait une hauteur maximale de cinq REM. Et maintenant on en a fini avec l'image. Nous pouvons créer l'en-tête de la carte. Donc je vais créer une nouvelle division dans laquelle je vais peut-être à la classe, qui est le nom de la marque. Donc je vais avoir un paragraphe avec une classe de plomb. Et là, nous allons avoir le nom de la marque. Et puis revenons ici. Et créons l'autre division, qui prendra le bouton de soumission. Et créons cela en utilisant le centre de texte et un peu de remplissage sur le dessus. Et ce bouton sera de type soumettre. Donc les types de mathématiques. Et puis nous avons la classe btn, btn primaire. Et puis nous avons peut-être exploré. Et maintenant, on est bons. Si je retourne en arrière et que je clique sur rafraichir, tu auras la première carte. Nous avons donc l'image ici, mais nous n'avons pas encore ajouté la source de l'image. Ne le fais pas. Plus tard. Nous avons le nom de la marque et explorer. Alors j'ai pensé que ça serait simple. Et chaque fois que l'utilisateur est intéressant, est intéressé par la marque. Il peut toujours appuyer mardi prochain sur la marque réelle avec les produits énumérés. Une autre page. Peut-être que vous créez une page de produit où l'utilisateur peut voir tous les produits de cette marque spécifique. Et puis nous pouvons également créer une page produit pour le produit spécifique que l'utilisateur choisit. Donc c'est ça fondamentalement nous allons copier ceci quelques fois de plus. Donc peut-être qu'on a cette ligne et qu'on prend cette colonne et qu'on a une autre rangée. Peut-être que tu peux copier ça. Voyons voir, ça finit ici. Copiez ces quelques fois. Et reviens, frappez Refresh, et maintenant on est bons. Nous avons notre nom de marque, des images et le bouton explorateur. Et maintenant, allons de l'avant et ajoutons quelques images ici. Donc, chaque fois que vous voulez des images, vous pouvez aller de l'avant sur pixels.com. Et ces images sont complètement gratuites afin que vous puissiez choisir n'importe quelle image que vous voulez. Peut-être que je vais prendre celui-là pour l'instant. Et vous pouvez appuyer sur ce bouton pour le télécharger. Et bien sûr, vous pouvez faire un don ou des chars sur Twitter ou Instagram, le fabricant de cette image. Je vais l'ignorer pour l'instant. Allez à étouffer show dans le dossier et ensuite peut-être prendre à partir d'ici. Apparu, découpez-le et puis collez-le dans un nouveau dossier que nous allons dans Créer, je pense à nommer des images et peut-être ajouté à la vue ou le dossier public. Alors voyons. Je pense avoir ça ici, peut-être appelé les températures. Et à l'intérieur de ce dossier d'images, nous allons créer le réel ou peut-être coller ce premier. Et puis revenons en arrière. Et bien sûr, nous pouvons toujours prendre ce dossier et un ensemble et le public ici. Bon, donc maintenant à l'intérieur du public, nous avons CSS et des images dans le dossier du public. Donc c'est tout en gros, nous avons choisi une image. Si nous le voulons, nous pouvons aussi choisir celui-ci. Et maintenant nous avons nos deux images. Renommons les. Et je pense à l'image 1 et à l'image 2, et toujours vérifier le fichier de points. Et bien sûr, nous verrons cela dans une minute, mais vous devez vous assurer que chaque fois que vous écrivez dans le fichier source ici, Ceci est notre image. Et chaque fois que nous écrivons ici que nous voulons l'image, par exemple, ce haut et des images publiques. On veut celle-là. Nous devons nous assurer que nous écrivons le fichier point, correct, sinon l'image n'apparaîtra pas. Donc c'est ça. Nous pouvons maintenant ajouter les images ici. Ajoutons ces deux images. Au cours de cela, je vais l'ajouter comme des images de points et puis l'image réelle, image une que PPG. Et maintenant, si je retourne sur le site e-commerce, nous allons voir que nous avons l'image ici. Et bien sûr, supprimons tout cela parce que nous n'avons pas besoin d'eux pour l'instant. Je vais copier les autres. Donc, nous changeons l'image de la première, qui est celle-ci. Donc je vais supprimer tout ça. Et nous allons copier ces deux ou trois fois et changer la deuxième image. Alors maintenant, on est bons. Nous pouvons changer cette image 21 plus de temps. Ceci est aussi l'image 2. Retournons en arrière et appuyez sur rafraichir. Et comme on peut le voir, nous avons eu nos images. Peut-être que vous pouvez les ajuster, mais pour l'instant, nous sommes bons avec ça. Nous avons marque nommé l'image et explorer. Et voici la page de la marque. Peut-être que vous pouvez ajouter la couleur de fond ici. Alors vérifions si nous avons des antécédents. Et si on attend, prenons peut-être celle-là. Maintenant, nous l'avons ici. Renommons simplement. C' est la marque d'image de fond. Je ne sais pas si ça aura l'air bien, mais essayons-le. Donc nous ne l'avons pas ajouté ici. Nous devons l'ajouter dans le fichier CSS. Donc, dans la prochaine vidéo, nous allons au CSS du fichier de dossier de marque. Et bien sûr, nous allons continuer avec la catégorie, puis les produits, les produits réels. Et nous devons également créer la page d'administration où l'administrateur du site peut changer, ajouter ou faire tout ce qu'il veut dans ce site Web. Cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 9. Produits: Bon, maintenant que nous avons créé notre page de marque, allons de l'avant et copions tous ces éléments dans le fichier EJS réel. Alors continuons ici et créons un nouveau fichier. Je vais le nommer une subvention de l'EJS. Et bien sûr, revenons en arrière, copions tout cela et collez-le à l'intérieur de cette marque. Et nous devons absolument ajouter l'en-tête et le pied de page. Donc, c'est l'en-tête. Et bien sûr, nous devons ajouter le pied de page. Et maintenant, on est bons. Donc, nous avons notre pitch de marque prêt. Et maintenant, allons créer la page de catégorie. Donc ce que je pense est de créer ici une marque et des catégories. Donc, chaque fois que l'utilisateur clique sur la marque, il vous emmènera à cette page où nous avons les marques et bien sûr nous avons l'image juste ici. Et la même chose pour la catégorie. Chaque fois que l'utilisateur clique sur la catégorie, il va l'emmener dans les catégories et il a cherché la catégorie qu'il veut. Et je pense que c'est tout, mais nous devons aussi ajouter le contexte ici. Et nous avons dit que nous allons le faire en CSS. Mais pour l'instant, je vais copier tous ces à nouveau et les coller et la page d'accueil ou la catégorie. Donc, ce sera la même chose, mais avec un peu de changement de catégories au lieu de marques. Alors revenons en arrière. Et à l'intérieur de la maison Je vais les coller à nouveau. Et ici, au lieu de marques, je vais écrire des catégories et choisir votre produit dans la catégorie que vous aimez. Et puis nous avons la recherche, la recherche et le nom de la marque, le nom de la catégorie. Et bien sûr, changeons tout cela en même temps, une marque, une marque. Et nous avons aussi ici. Ouais, donc c'est ça. Allons d'ici. Nous avons également la marque et la marque. Donc, supprimons tous ces et tapez catégorie, le nom même. Donc, si vous revenez en arrière et appuyez sur Actualiser, nous avons le nom de la catégorie, le nom la catégorie, et nous en avons manqué un ici. C' est donc le nom de la bibliothèque. Et maintenant, on est bons. Nous avons nos catégories. Nous avons les catégories presse-agrumes produits de la catégorie comme nous avons la recherche. Et nous avons aussi ces guides pour le. Et tous ces changements seront changés une fois que nous aurons travaillé avec le back-end et les bases de données. Donc pour l'instant, je vais les laisser comme ça, mais bien sûr, nous devons les changer pour le nom réel de la catégorie. Et je pensais peut-être ajouter un peu de rembourrage ici. Revenons à la division des disques. Et à l'intérieur de celui-ci, nous avons la forme et peut-être ajouter un peu de rembourrage bas cinq, peut-être. Retournons en arrière et appuyez sur Rafraîchir. Et nous avons maintenant notre rembourrage de cinq pixels. Et maintenant, oublions, ajoutons l'arrière-plan réel ici. Donc, comme vous pouvez le voir à l'intérieur de celui-ci, nous avons ajouté un nom de classe ici. Donc, nous avons la marque de fond et la laissons comme marque pour les catégories et les marques, puisque cela ne changera pas, je vais choisir le même arrière-plan pour les deux. Et bien sûr, faisons-le à leur terme quand tu en auras fini avec eux. Et maintenant, dans le style.css, nous pouvons ajouter notre image de fond réelle. Donc, je vais appeler arrière-plan une marque, puis utiliser l'image d'arrière-plan comme, je suis désolé, URL de l'image d'arrière-plan. Et bien sûr que les images, alors nous avons une image de fond, marque le GPG. Et maintenant, on est bons. Si je retourne en arrière et que je touche Refresh, vais avoir cet arrière-plan, on peut le changer si ça ne nous plaît pas, mais pour l'instant, je vais le laisser tel quel. Et bien sûr, ce bonjour de la maison un b et notre site actuel. Alors allons de l'avant et supprimez-le d'ici. Et maintenant, on est bons. Rafraîchir. Maintenant, vous pouvez voir que nous avons nos catégories. Choisissez votre produit dans la catégorie que vous aimez, et la recherche, ainsi que les catégories que nous avons dans notre magasin. Donc, c'est fondamentalement pour les catégories et c'est le même que pour la marque aussi. Allons-y maintenant et prenons tous ces éléments et placez-les dans le fichier des catégories. Donc, je vais créer un nouveau fichier. Je vais le nommer catégorie. L' EJS. Ensuite, revenez à Accueil, copiez tout cela, et collé à l'intérieur de cette catégorie. Et comme d'habitude, nous ne voulons pas oublier le pied de page et l'en-tête d'ici. Donc, c'est que fondamentalement nous avons notre catégorie, marque et sur et nous contacter. Tout cela est prêt à maintenant si je clique sur rafraichir, nous ne les avons pas sur la page d'accueil. Donc, c'est essentiellement pour la catégorie et la marque. Maintenant, tout ce que nous avons à faire est de créer une page de nouveau produit où nous allons répertorier tous les produits que nous avons, soit dans la marque ou dans la catégorie. Et cela dépend de l'utilisateur. Donc, ce que nous allons faire est dans le dos et le filtre S2. Tous les articles selon la marque ou la catégorie. Et si l'utilisateur veut. Peut-être que si nous cliquons sur la marque et qu'il l'emmène à la marque, marque Thrive. Et puis, bien sûr, il choisit la marque qu'il veut. Nous devons donc filtrer tous les articles que nous avons en fonction de la marque choisie par l'utilisateur. Donc, c'est l'idée. Alors allons de l'avant et créer la page des produits. Ensuite, créez une page produit pour les produits eux-mêmes. Et je pense que cela semble un peu compliqué, mais croyez-moi, ce n'est pas, c'est comme créer un fichier de catégorie ou de marque. Alors allons de l'avant maintenant et créer un nouveau dossier pour les produits que le JS et un autre dossier pour le produit réel. Je vais le nommer produit. Donc les produits ici, nous allons avoir tous les produits que nous avons fonction de la peut-être ce que l'utilisateur choisit, soit la catégorie de marque et quand vous voulez réellement. Et puis chaque fois que nous sommes sur la page du produit et que l'utilisateur aime un produit spécifique, il le redirigera vers la page du produit où nous avons les détails expliqués du produit. Cela étant dit, nous allons de l'avant et commençons avec la page du produit dans notre page d'accueil comme d'habitude, puis tapetum dans le produit. Donc, les JS. Donc maintenant comme d'habitude, comme nous l'avons fait dans les produits, toutes les catégories et la marque, nous allons copier cette première division parce que je pense que ça a l'air bien. Alors, allons le coller ici. Et maintenant, nous n'avons que celui-là. Alors, nous allons choisir, peut-être changer les catégories en produits, puis choisir votre, un produit à partir peut-être d'une catégorie que vous aimez. Je pense que ça a l'air bien aussi. Si vous voulez le retirer à nouveau, allez-y. Mais pour l'instant, nous allons le garder tel quel. Mais ici, nous avons les produits et ensuite nous avons aussi la barre de recherche comme d'habitude. Et maintenant, commençons par le produit réel. Donc, je vais créer une nouvelle section avec l'arrière-plan peut être léger. Et puis on va commencer par la ligne, puis on a l'Irlande. Et à l'intérieur de ceux-ci, je vais créer notre liste non ordonnée. Et cela prendra des produits en verre. Ne l'utilise pas. En effet, fichier CSS. Et puis nous avons les éléments de la liste réelle. Donc, le premier article de la liste aura la division produit. Et puis à l'intérieur de cette division de produits va avoir le lien. Et bien sûr, dans ce lien, il ne signalera rien pour l'instant. Ensuite, nous avons le style. Je vais faire la décoration de texte à None. Et maintenant à l'intérieur de ce lien, nous allons placer deux choses. Le premier est l'image et ensuite nous avons. Le titre, le prix, la marque et la catégorie du produit. Alors allons de l'avant et créer tout d'abord l'image. Et à l'intérieur de cette image, nous allons ajouter des images, peut-être l'image d'une équipe. Et puis après avoir ajouté cette image, nous pouvons ajouter le titre. Mais avant cela, créons une classe d'image de produit que nous n'utilisons pas plus tard. Et puis nous avons la nouvelle division, qui sera rangée, peut-être la marge supérieure deux. Et puis nous avons le bloc central, puis la colonne. Et maintenant, on est bons. Nous pouvons créer notre portée et nous allons le nommer. Peut-être pour l'entrée et le style de danse comme d'habitude, décoration de texte à aucun. Et puis après cela, nous pouvons créer la classe de nom de produit avec H6 comme titre. Et à l'intérieur de la période, nous pouvons avoir l'élément vital pour revenir en arrière et appuyer sur Rafraîchir, aller avoir le titre de l'objet avec une lumière d'arrière-plan. Et bien sûr, nous avons cette liste non ordonnée et nous allons les ajuster un peu, NCSS. Donc maintenant, si je retourne ici et ajouter quelques choses, alors quand je pense est d'avoir les images et ensuite nous avons le titre. Et ce sont la seule chose à ajouter. Ou peut-être que l'utilisateur peut cliquer sur pour être redirigé vers le produit spécial. Et nous avons aussi le nom de la marque, la catégorie, le nom et la taille. Je ne vais pas les inclure dans le lien. Je vais les écrire, juste les ajouter. Maintenant, si je reviens et rafraîchis, nous avons notre image et ensuite nous avons aussi le titre de l'article peut-être. Donc maintenant, nous devons ajuster le titre de l'image et ajouter quelques choses. Donc, tout d'abord, créons une nouvelle division qui sera de texte de colonne de classe. Et puis je suis actes cinq, bloc central H5 et le prix du produit pour plus tard. Et en cela, je vais ajouter le prix du produit. Donc prix de l'article, peut-être que j'ajoute un exemple tel que 10$. C' est donc pour le prix du produit, et je vais ajouter le produit, la marque et la catégorie. Donc, une nouvelle division avec la marque de produit comme nom de classe. Et à l'intérieur de celui-ci, je vais écrire la marque et puis suivie d'une période avec quelques classes. Peut-être qu'il suffit de le rendre audacieux. Donc, le poids de la police, en gras. Et puis la marque peut l'être. Essayons Google pour l'instant. Et puis nous en avons un autre pour les catégories. Donc catégorie de produit. Ou peut-être que vous pouvez travailler avec des marques puisque c'est pareil. Donc, et ici nous allons ajouter une boulangerie. Et puis suivi par la travée serait aussi amusant façon à la fois. Ensuite, nous avons la catégorie. J' ajoute simplement un diplôme parce que je n'ai pas le dessus de mon esprit. Et nous sommes bons maintenant nous avons la marque et la catégorie. Nous avons encore une chose qui est la taille. Et je pense à l'ajouter dans cette division. Donc, nous avons ici produit, marque aussi. Ensuite, nous avons la taille suivie d'une travée avec la police de classe, poids, gras. Et nous avons aussi la taille, peut-être à un 100 millilitre, et ici peut-être changé l'usine et le rendre Johnson. Donc maintenant, nous sommes bons si je touche Refresh. Donc, nous allons sembler marque Google catégorie Johnson taille à un 100 millilitre. Et c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons l'ajuster en utilisant CSS. Alors, voyez-vous. 10. Produit: Bon, maintenant que nous avons fini avec le premier produit, allons de l'avant et ajusté en utilisant CSS. Donc, à l'intérieur de notre CSS, style.css, nous allons créer ici un nouveau mais pour les produits. Et bien sûr, commençons par les produits. Comme vous pouvez le voir, si je retourne à la maison, nous avons ici la classe de produits. Donc, je vais commenter en CSS. Donc, je vais afficher des drapeaux, puis justifier le début du contenu. Et bien sûr, les éléments d'alignement vont le faire fléchir. Ensuite, nous avons le flex wrap wrap. Donc maintenant, si nous retournons et nous rafraîchissons, nous pouvons voir que nous sommes sortis des éléments sur le côté gauche. Ils étaient déjà sur la gauche. Mais maintenant, pour tous les changements qui pourraient se produire, ils seront toujours sur le côté gauche de l'image ici. Alors maintenant, nous allons ajuster les éléments, les éléments réels. Donc, à l'intérieur des produits, nous avons l'article de la liste alliée. Donc, tous les éléments de la liste à l'intérieur du produit, nous avons besoin de list-style-type à aucun. Nous ne voulons pas que le type de style et le rembourrage soit 0. Ensuite, nous avons flotté. Peut-être que je fais 0, 1, 34, oui. Et puis nous avons la hauteur. Donc, la hauteur maximale sera de 25. Et puis nous avons aussi le bouton de bordure, en bas. Et bien sûr, solide 0,1 REM. La couleur sera comme d'habitude, 31, huit, V5. Et enfin, j'ajouterai quelques marges de tous les côtés. Donc 15 pixels, dix pixels que 15 pixels, et enfin dix pixels. Donc maintenant, si nous retournons en arrière et appuyez sur rafraichir, vous allez avoir ceci comme arrière-plan. Et bien sûr, nous devons ajuster certaines des caractéristiques. Revenons en arrière et voyons à l'intérieur des produits que nous avons maintenant la division qui est produit. Maintenant, nous avons ajusté l'élément de liste. Allons de l'avant et, et le rendre un peu plus petit, mais en fait beaucoup plus petit. En fait, on voulait comme ça. Revenons donc à Stein et travaillons avec la classe de produits. Donc arpanet produit alors affiché manque. Ensuite, nous avons la direction flexible, qui est d'être en colonne. Et enfin, la largeur sera peut-être 15 RAM. Et bien sûr, nous devons ajuster le nom du produit. Donc, le poids de la police, en gras. Ensuite, nous avons la couleur. Comme d'habitude. 31, ATF moi 5. Alors maintenant, revenons en arrière et appuyez sur rafraichir. Et comme nous pouvons le voir, c'est notre image et nous pouvons convenir qu'elle a l'air très grande, donc nous devons ajuster l'image. Revenons donc ici et ajustés en utilisant l'image du produit que nous avons créée plus tôt que Arpanet. Et nous devons l'ajuster en utilisant le max serait, eh bien, dépêchez-vous la hauteur maximale pour être aussi bien, je suis. Maintenant, si vous revenez en arrière et appuyez sur rafraichir, vous allez voir que nous avons obtenu notre première image suivie de l'article intitulé marque, taille de la catégorie et aussi le prix juste ici. Maintenant, ajustons certains d'entre eux aussi. Si nous revenons à notre page d'accueil, nous avons ici le nom du produit, prix du produit et la marque du produit pour tous ces produits. Et bien sûr, l'image du produit pour l'image que nous venons de modifier maintenant. Et nous allons les ajuster en appelant la marque du produit. Peut-être faire la couleur un peu. Tels que 880, 880. Je pense que ça va avoir l'air sympa. 88 atm chose découvert est bon pour la marque et la taille et bien sûr, le prix du produit. Maintenant, nous allons travailler avec. Peut-être qu'il suffit de le rendre audacieux. Voyons voir. Et puis nous avons peut-être aussi la catégorie de produits. Et nous avons dit que c'était la même chose que la marque, donc nous sommes bons pour l'instant. Retournons en arrière et frappez rafraichir. Et comme on peut le voir, maintenant on a notre bateau. C' est audacieux et c'est un peu comme, génial. Et nous avons également le titre de l'article et la même couleur que le survol de ces éléments. C' est donc le premier élément que nous avons. Nous avons l'image, nous avons les informations de qualité pour l'instant. Et bien sûr, ce que nous devons faire maintenant est de créer une autre page de produit où l'utilisateur, s'il veut connaître des détails supplémentaires sur ce produit ou de l'acheter réellement, Il peut cliquer soit sur l'image ou le titre. Et il vous emmènera automatiquement à la page du produit où il peut l'ajouter à la défausse, voir quelques détails sur ce produit. Et peut-être que vous pouvez ajouter une note à la fin. Voyez ce qu'on va faire plus tard. Mais pour l'instant, c'est l'idée générale sur le produit, leur page de produits. Ajoutons quelques produits ici. Alors rentre à la maison. Nous avons à l'intérieur de cette rangée, nous avons cette colonne. Alors continuons et copions-le deux fois. Et voyons ce qui va se passer. Oui. Alors, ici, 12345. Si je retourne en arrière et que je clique sur rafraichir, nous allons obtenir ces produits. Nous avons six produits pour l'instant. Et bien sûr, nous pourrons peut-être supprimer ces conclusions plus tard. Mais pour l'instant, c'est bon. Et même si nous changeons la taille. Donc, à taille moyenne, nous allons devoir le faire, et chez les sponsors nous allons en avoir un. Et bien sûr, peut-être que vous pouvez ajuster cela pour être au centre chaque fois que nous avons un petit écran comme celui-ci, peut-être que c'est une bonne idée de placer les images et les informations suivantes au milieu de l'écran. Et bien sûr, chaque fois que nous avons un moyen de quelque chose de plus grand, nous allons les avoir sur le côté gauche. Donc, la construction ou les modifications de puits supplémentaires que vous pouvez faire est de le faire réellement au milieu de l'écran. Et bien sûr, chaque fois que nous avons grand écran, faites-les peut-être quatre au même au lieu de trois. Ouais, ça a l'air mieux. Ainsi, par exemple, c'est la première 1, deuxième, troisième, quatrième année. Alors peut-être que ça aura l'air mieux, mais pour l'instant, on va rester avec ça. Ceci est la page du produit. Allons de l'avant et copions tout cela et collez-le et les produits que classe EJS ou fichier. Alors, c'est ça. Oui, allons de l'avant et copions cette section entière dans les produits afin que le JS, et bien sûr n'oubliez pas d'ajouter votre pied de page ici. Et puis l'en-tête au début du fichier. Donc, ce sont les produits sont les chaises. Et maintenant, si nous actualisons notre page d'accueil, allez obtenir ces lignes pied de page et en-tête comme nous le voulons. Donc maintenant, l'étape suivante consiste à imprimer réellement la page du produit réel. Donc, nous avons dit que nous avons plusieurs produits uploader. Et chaque fois que l'utilisateur veut vérifier un produit 11 ou un article spécifique qu'il aime. Il veut voir plus de détails, par exemple. Donc, il clique sur l'électron, l'image du produit ou un titre, puis il devrait le diriger automatiquement vers la page du produit avec une explication supplémentaire. Et peut-être que vous pouvez ajouter quelque chose au bas de la page qui dit, peut-être que vous pourriez aussi aimer et ensuite quelques produits supplémentaires de la même catégorie ou de la même marque qu'il vérifie. C' est donc l'idée générale. Allons-y et commençons à l'intérieur de notre page d'accueil comme d'habitude, puis copiez-le dans le produit. Donc, pour ce faire, commençons par créer le. Donc, c'est la section. Et à l'intérieur de cette section, nous allons créer notre conteneur. liquide doit être et la fin du récipient abaissée. Et puis à l'intérieur de cela va créer la première ligne. Peut-être ajouter une ligne de 0 pour un écran de petite taille ou autre chose que le grand écran et un. Et nous verrons ça dans un instant. Et ce sera vide. Ensuite, on va avoir un sexe dans la colonne. Et pour les grands écrans de quatre. Et aligner les éléments, au centre. Et c'est là que nous allons ajouter l'image. Alors ajoutons une image. La source sera comme d'habitude des images de motif, image1, mais GBG. Et bien sûr, nous n'avons pas besoin d'ajouter un peu de style, qui est la largeur maximale de cette image à 300 pixels. Et je pense que nous sommes bons pour l'image. Maintenant. Nous allons créer une autre colonne pour les grands écrans. Et ce sera aussi vide. Puis suivi d'une autre colonne 6 où nous allons ajouter les informations, je suis sexe et pour les grands écrans car ça va être quatre. Et bien sûr à l'intérieur de ce panneau, vers le bas pour créer le formulaire à soumettre ou à ajouter au panier. Et à l'intérieur, je vais avoir le titre. Donc, ce sera du texte de classe pour le rendre bleu. Ensuite, nous avons le titre de l'article, puis suivi d'un paragraphe avec la classe H5 comme en-tête 5. Ensuite, à l'intérieur de cette rubrique, nous allons ajouter le prix. Donc le prix. Et puis à l'intérieur de la plage, va avoir le prix avec des données secondaires de texte. Vous pouvez voir si j'ajoute le prix, par exemple, $34, Revenons en arrière et appuyez sur rafraichir. Et comme nous pouvons le voir, nous avons obtenu l'image suivie du titre de l'article, puis le prix qui est 34. C' est donc une idée générale. C' est l'image réelle. Maintenant, nous pouvons ajouter des informations supplémentaires. Allons-y et faisons-le ici. Nous avons le prix que nous avons avant, et ensuite nous devons ajouter la marque. Alors revenons ici et ajoutons une nouvelle classe ou soyons un nouveau paragraphe. Et puis nous avons la portée, qui sera d'avoir la police de classe, poids, gras. Ensuite, nous avons la marque. Et bien sûr, nous allons ajouter la marque comme Johnson dans ce cas. Et cette marque, désolé, Johnson devrait être entre ce paragraphe parent. Maintenant, nous en avons fini avec la marque. Laissons sauter la ligne, puis créons une nouvelle ligne pour les tailles. Donc, ce que je pensais est d'obtenir une nouvelle ligne à l'intérieur de cette ligne va avoir la colonne de deux et la marge de haut de deux aussi à l'intérieur du SRO va créer cette taille. Et bien sûr, la classe devrait être taxée secondaire. Et bien sûr, peut-être que je vais faire l'amour. Et puis suivi d'une autre colonne. Et cette colonne serait la même qu'avant, donc la colonne 2. Et ici, nous allons avoir la taille réelle à l'intérieur d'un paragraphe de la ligue de classe. Donc peut-être que la taille est de 200 millilitres. Et bien sûr, si je retourne en arrière et touche rafraichir, vous allez obtenir le prix du titre de l'article, la taille de la marque Johnson à 100 millilitres. Et maintenant, continuons avec combien de pièces l'utilisateur une fois. Ou peut-être copions ceci une fois de plus pour la catégorie. Aujourd'hui, nous allons avoir la catégorie. Et puis suivi par peut-être, disons shampooing. Et maintenant comme une finition de cette rangée est en créer un autre avec colonne de sexe. Et à l'intérieur de cette colonne, je vais créer le groupe d'entrée. Et ici, l'utilisateur va ajouter la quantité réelle, combien de pièces il veut. Donc MP3. Et à l'intérieur de cela, je vais créer l'entrée réelle du nom de texte de type. Je vais le nommer pour un cours ultérieur. Je dessine. Et puis l'espace réservé sera la quantité. Et puis nous avons la division des pièces pour couvrir le groupe d'entrée de classe. Donc maintenant, si nous frappons rafraichir, nous allons obtenir cette taille à une quantité de 100 millilitres et morceaux. Donc c'est tout pour cette vidéo. Et le suivant va ajouter l'ajout au panier et peut-être la description de cet article. Alors, à vous voir. 11. Home 1: Bonjour et bienvenue. Dans cette vidéo, nous allons continuer notre page produit. Nous avons donc toujours le bouton Ajouter au panier. Allons de l'avant et éditons ici. C' est notre ligne vers une autre rangée ici. Et je pensais lui donner une classe de la mémoire 3 juste pour dépendre de l'axe y. Ensuite, je vais ajouter notre carte, qui est le bouton. Et le type serait, comme d'habitude, soumettre. Et je pense aux données, le bascule pour plus tard. Je vais le construire pour l'instant, comme ça. Et le style sera afficher bloc en ligne. Enfin, nous avons les classes réelles et nous allons utiliser classes Bootstrap et btn et btn dark, puis Ajouter au panier. Donc, c'est essentiellement pour notre bouton par aller de l'avant et le rafraîchir. On va prendre ce bouton et il fait sombre. Et il est supposé de nous rediriger vers la page des produits où nous avons tous les produits que l'utilisateur a choisis pour le moment. Et bien sûr, si l'utilisateur est non signé et connecté encore, il devrait en fait l'emmener au modèle de connexion où il devrait mettre son adresse e-mail et son mot de passe. Et bien sûr, s'il n'a pas encore de compte, il peut aussi s'inscrire pour s'inscrire avec un nouveau compte. Ensuite, revenez ici et ajoutez cet article à la coupe. Donc, comme nous l'avons dit, c'est notre jardin. Retournons en arrière. Et je pensais ajouter une description ici derrière l'article Titan. Alors peut-être qu'on va le faire. On a un titre. Ajoutons un graphique à barres où nous avons Lauren. Et bien sûr, nous pouvons toujours choisir des cours pour notre Biograph. Ne choisissez pas le mode de classe pour réduire le paragraphe. Et comme nous pouvons le voir, c'est notre paragraphe. Et puis nous avons le prix, la marque, la catégorie, la taille , la quantité, puis ajouter Dieu, et bien sûr notre image. Donc si je diminue la taille de ça, voyons ce qui se passe. Augmentons les deux côtés. Ainsi, comme nous pouvons le voir, nous avons notre image et l'information sur la même ligne. Donc c'est tout pour les produits, la page produit. Allons de l'avant et déplacons tous ces éléments vers le produit que fichier EJS. Alors voilà, voyons. C' est le début de cette section du chemin jusqu'à la fin ici. Emmenons-les ici. Ensuite, revenez en arrière et prenez ces en-tête et pied de page. Donc c'est l'en-tête. Prenons. Et placez-le dans la page du produit. Et puis allons jusqu'au bout et ajouter notre pied de page. Il est là depuis. Donc, je pense que maintenant nous sommes bons pour la page produit et produit. Donc jusqu'à maintenant, si on vérifie, qu'est-ce qu'on a fait ? Nous avons fait la page d'accueil. Je suis désolé. Nous avons fait la catégorie de marque au sujet de nous contacter. Et nous avons fait deux pages qui ne sont pas visibles pour le spectateur à l'intérieur de la barre de navigation. Et ce sont les produits et la page produit. Donc pour l'instant on est bons. Allons-y et économisons. Et retournez en arrière. Si on se rafraîchit, c'est notre maison. Maintenant, nous commençons à construire notre page d'accueil. Ensuite, bien sûr, nous allons construire la page Commandes où l'utilisateur peut voir toutes ces commandes, commandes précédentes et articles en cours dans sa carte. Et nous avons également besoin de construire les pages Admin aussi. Alors que Commençons par la page d'accueil. Et je pensais ajouter un carrousel ici pour peut-être visualiser différentes marques et ajouter un best-seller. Nous avons les produits best-seller. Ensuite, ajoutez également un autre kérosène où nous pouvons visualiser les différentes catégories. Et bien sûr, nous pourrions ajouter quelques produits à la fin. Alors voyons. Retournons en arrière et entendons merci pour commencer. Droit. Donc ici, cependant pour créer la première division. Et je vais avoir une stratégie d'image de fond dans un mauvais style. L' image de fond sera égale à l'URL de notre image. Vérifie-le plus tard. Mais pour l'instant, la taille de fond que je pense faire couvrir. Et bien sûr, la position de fond serait centrée. Et puis enfin, nous avons aussi la hauteur. Je pense à 35, peut-être 38 h. Et puis on a des antécédents, répétez, pas le répéter. Et enfin, la marge sera 0. Donc c'est pour l'image et on la vérifiera plus tard. Mais créons ça va. Et quand je construis ici est en fait une image, une image de fond. Et puis nous avons quelque chose comme bienvenue sur le site e-commerce et un paragraphe en bas pour, donc par exemple, allons avoir un verre avec p ou les côtés supérieurs et peut-être Bienvenue sur le site de commerce électronique. Et enfin, nous allons peut-être faire l'amour et passer la caisse. articles anciens, peut-être de qualité supérieure et des offres exclusives. Oui, je pense que ce sera ça. Et bien sûr, nous savons que nous devons ajouter maintenant l'image réelle. Alors passons aux pixels. Et voyons ce qu'on a des antécédents. C' est un simple, peut-être ajouter un symbole de sol et cette recherche. Et comme nous pouvons le voir, nous avons tellement d'options, mais pour l'instant, je vais choisir la plus simple. Alors peut-être que je peux aller avec celui-ci téléchargé. Et maintenant, nous l'avons ici comme arrière-plan à la maison. Et j'ai fini ici. Donc si on y retourne, on a l'image et peut-être qu'on doit centrer cette information. Donc, je vais ajouter une colonne. Et je pensais à la colonne pour moyenne et supérieure à six. Et puis vous devez centrer le texte. Donc centre de texte. Et bien sûr, je vais avoir la photo max. Donc c'est ça qui a placé ces titres ici et revenir en arrière et rafraîchir. Et comme nous pouvons le voir, nous avons reçu un site web bienvenu sur le site e-commerce, caisse, des articles de qualité supérieure et des tampons exclusifs. Peut-être que maintenant nous pouvons ajouter quelque chose ici comme arrière-plan de, voyons, euh, voyons. C' est donc notre première division. Créons un autre avec le centre de la ligne. Ensuite, nous avons une certaine marge, savoir peut-être 0 et quelques paddings et aussi la lumière de fond. Et puis créons la colonne de quatre. A l'intérieur de cette colonne, nous allons avoir un paragraphe de verre, plomb, peut-être de qualité supérieure. Et puis copiez ceci deux fois de plus. Donc, la qualité supérieure, la livraison rapide et les meilleurs prix. Donc maintenant, si on retourne en arrière et touche Refresh, on va avoir quelque chose comme ça. Nous avons donc la page de bienvenue, la caisse, des articles de qualité supérieure et des offres exclusives. Ensuite, nous avons certaines de nos caractéristiques. Par exemple, la qualité supérieure, livraison rapide et les meilleurs prix. Donc, c'est essentiellement pour la page d'accueil, et commençons par les meilleurs vendeurs. Donc si nous revenons en arrière et créons notre section ici. Donc, cette section aura plusieurs classes, peut-être légères que du texte. Et un peu de rembourrage. Allons l'ouvrir et ensuite créer notre liquide de récipient. Et bien sûr, nous devons créer le titre où nous avons les meilleurs caissiers. Et puis le paragraphe qui dit vérifier certains de nos best-sellers. Donc, va avoir la première ligne et quelques classes telles que le texte. Ensuite, nous avons le centre de texte. Et c'est tout pour la croissance et le fantôme avec une marge de quatre. Et à l'intérieur de cette colonne, penser à ajouter ici les best-sellers. Et bien sûr, ajoutez des classes telles que display for, puis MB ou. Alors. Maintenant, si on retourne en arrière et qu'on touche rafraichir, on va avoir quelque chose comme ça. Nous avons nos best-sellers. Laissons le paragraphe ici. Donc, après notre titre, peut-être que vous pouvez ajouter le paragraphe réel ici. Donc la classe sera dirigée. Ensuite, nous avons vérifié certains des articles les plus vendus pour 2020, par exemple. Retournons et rafraîchissons. Et c'est ça en gros. Et maintenant, nous pouvons ajouter trois des articles les plus vendus. Et nous pouvons les ajouter en utilisant peut-être des cartes. Revenons à notre code. Et c'est la fin du parchemin qui disait au liquide de récipient. Et maintenant, créons une autre ligne. Bien sûr, nous devons ajouter des éléments d'alignement, le centre, le texte, le centre, puis nous avons un maximum ou deux. Et puis ouvrons ça. Maintenant, créons la colonne. Donc, la colonne pour les grands écrans est de quatre, et pour les petits écrans est de 10. Ensuite, nous avons une auto max. Et c'est essentiellement pour la colonne. Et maintenant, nous pouvons créer notre carte réelle. Donc, je vais créer la carte avec la carte un pour CSS. Utilisez cette classe pour CSS. Et puis nous avons le texte sombre MY pour la photo endémique. Ouvrons et commençons par créer l'image. Donc, la source de l'image sera des images à points. Ensuite, nous avons l'image réelle. Supposons qu'on en utilise beaucoup. Et ajoutons quelques classes ici. Donc, la première classe sera un automne max. Et bien sûr, nous n'oublions pas le module sur l'axe Y. En ce qui concerne le style, je vais avoir la hauteur maximale avec un 100 pixels. Et même pour une largeur maximale de 100 pixels. Maintenant, si vous retournez et rafraîchissez, comme nous pouvons le voir, nous avons notre image avec rien jusqu'à maintenant, nous pouvons ajouter quelques informations à la fin. Voyons voir. Retournons en arrière. Et bien sûr, nous pouvons ajouter le nom, puis peut-être ajouter un bouton qui indique Voir les détails. Et si l'utilisateur clique sur ce bouton, il le redirige automatiquement vers la page produit de cet article spécifique. Donc c'est ça. Retournons en arrière. C' est la fin de Dieu. On a l'image. Et bien sûr, à l'intérieur de la carte, on peut créer le garde Buddy, Buddy. Et puis nous avons le premier titre, qui est le titre. Et nous avons toujours le titre et le bouton. Et ajoutons deux autres que ça. Bien sûr, nous allons les faire dans la prochaine vidéo. Alors, à vous voir. 12. Home 2: Bonjour et bienvenue. Nous avons toujours le titre et bien sûr le bouton pour voir les détails de ce produit best-seller. Alors allons de l'avant et commençons par le titre qui dit peut-être le titre. J' ajoute donc une rubrique cinq. Et puis les sous-classes telles que le texte, en majuscules. Ensuite, nous avons aussi du plaisir, poids, audacieux, et bien sûr MB, trois. Élément de la liste. C' est pour le CSS et je vais ajouter le titre réel, supposons Johnson. Et après cela, je vais ajouter un formulaire à soumettre. Donc, la firme n'aura aucune action pour l'instant. Et bien sûr, le bouton, le bouton réel avec le type soumettre. Et puis quelques classes telles que PTEN, quelques paddings et tous les côtés. Peut-être du texte, en majuscules ou peut-être pas. Ajoutons le bouton de prix et le CS4 ou ultérieur. Et je vais le rendre jaune. Donc j'ajoute le BDI et je veux un vol de classe et de taxes. Voyons donc les détails. Et bien sûr, si on retourne en arrière et touche Refresh, on va chercher Johnson et voir les détails. Et c'est essentiellement pour cette carte, nous pouvons aussi avoir la largeur sur la carte par défaut. Alors revenons en arrière. Voyons voir. Donc, au lieu de spécifier la largeur maximale à un 100 pixels, je vais dire largeur pour être égale à 100 pour cent de la carte. Et au lieu d'avoir une marge sur, voyons, au lieu d'avoir une marge sur le dessus comme ça et bouton, je vais spécifier que la marge ne devrait être que sur le bouton. Donc, au lieu de MON application .use MB. Ainsi, nous pouvons voir que nous avons eu notre image. Et bien sûr, ce titre n'est pas seulement un mot. C' est essentiellement, par exemple, le shampooing Johnson, 400 millilitres. Et je pense que ça a l'air bien pour l'instant. Et bien sûr, tous les détails doivent être à l'intérieur de la page produit que nous avons créée précédemment. Donc, ce n'est que la définition du produit et une image, le titre. Et si l'utilisateur est intéressé par cet article spécifique, il peut toujours aller à la page du produit en cliquant sur Voir détails. Donc c'est tout pour le premier produit. Ajoutons deux autres. Revenons en arrière, copiez tout cela et collez-le deux fois de plus. Peut-être changer l'image. Peut-être que celui-ci à l'image deux et la dernière, et le garder comme image un. Et voyons voir. Et comme vous pouvez le voir, nous avons obtenu notre produit best-sellers. Nous avons trois produits et nous pouvons toujours les changer quand nous le voulons. Donc, à la fin de notre projet, nous allons peut-être construire une partie spécifique où nous pouvons changer ces produits ici. Donc, c'est essentiellement pour les best-sellers. Voyons ce que nous allons faire avec les, peut-être les marques et les catégories. Donc, ce que je pense, c'est d'avoir les marques ici d'abord, avant, les best-sellers, puis ajouter les catégories ici. Et bien sûr, nous allons le faire en utilisant un carrousel. Donc, si nous revenons à bootstrap vos deux composants, puis carrousel, aller voir plusieurs types de carrousel. Et on va l'utiliser. Donc celui-ci avec des indicateurs, nous avons les deux agents et ceux-ci peuvent choisir entre eux. Et c'est le code de ceci. Et bien sûr, peut-être que vous voulez ajouter le titre et quelques informations de définition sur ce produit ou cette marque. Nous pouvons facilement le faire en ajoutant la légende de la largeur ici. Alors allons de l'avant et copions tout cela et revenons à notre code. Aller à la qualité supérieure avant la section best-seller, je vais le coller. Voyons notre site maintenant. Et comme on peut le voir, vous avez la première diapositive. Et si nous revenons en arrière, donc j'ai ajouté ici quelques titres pour le premier. Et bien sûr, j'ai ajouté les images comme nous pouvons le voir ici. Et maintenant, si on retourne en France, tu auras ça. Et je sais que c'est un très grand pour l'écran et vous pouvez le réparer. Mais c'est l'idée. Si nous appuyons sur les indicateurs, ils devraient automatiquement nous emmener à. Ce troisième n'est pas disponible, et c'est le premier. Alors revenons en arrière et ajustons ça. Nous avons des images. J' ai oublié d'ajouter la barre oblique. Et c'est ça qu'on peut toujours le rendre plus petit. Donc, par exemple, si je veux le faire au milieu de l'écran, je peux ajouter une nouvelle ligne, puis Ajouter la colonne 3, 4, non ? Colonne sexe, pour ajouter notre carrousel. Et la colonne 3 pour la gauche. Et maintenant, ouvrez ceci ici, puis copiez tout cela à partir d'ici jusqu'à la section, puis collez-le ici. Et puis peut-être que si on retourne en arrière et qu'on touche rafraichissement, on peut voir que nous avons notre taux de marque ici. Et comme vous pouvez le voir, ça change. La hauteur peut-être de l'image change en fonction de l'image elle-même. Je pensais donc ajouter une hauteur maximale aux images. Alors, ici. Hauteur max Einstein. Et je pensais peut-être à 400 pixels. Et maintenant, je vais copier ça deux fois de plus ici et là. Et si on retourne à la fraîcheur, on va l'avoir. Donc, comme on peut le voir, c'est mieux maintenant. Et nous avons aussi ici le titre et quelques légendes. Oui, à propos du produit. L' utilisateur peut vérifier tous les produits à partir d'ici. Et bien sûr, nous devons ajouter peut-être le premier peut-être le titre des marques. Donc, je pensais ajouter du liquide de récipient, puis ajouter ici la première rangée, puis la rubrique des marques. Et puis aussi je vais ajouter du texte centré. Et bien sûr, je vais ajouter le paragraphe avec le plomb de classe qui dit : «  Évitez, peut-être notre caisse, nos marques. Maintenant, si vous revenez à rafraîchir, aller chercher des marques, consultez nos marques. Et bien sûr, nous pouvons peut-être faire cela dans une autre couleur comme un poids ou peut-être des textes secondaires. Alors revenons ici et ajoutons à cette classe secondaire fiscale. Maintenant, si vous retournez en arrière et appuyez sur Rafraîchir, allez obtenir celui-ci. Donc, nous avons des marques, vérifier nos marques. Et ici, nous avons toutes les marques. Et bien sûr, si nous n'aimons pas ça de cette façon, nous pouvons toujours nous ajuster. Donc, par exemple, je peux déplacer ça ici, ça va être aide. Et enfin ici, je vais aussi mettre l'air. Maintenant, si on y retourne, je pense que ça sera un peu plus agréable. Oui. Donc c'est tout pour les marques. Va faire la même chose pour le produit. Donc, je vais juste copier tout cela et le coller juste après les best-sellers. Et bien sûr, nous pouvons ajouter une certaine marge ici. Et j'ai oublié d'ajouter tout ça, toute cette rangée au liquide du récipient. Donc cette rangée me laisse juste la fermer. Prends tout. Voyons voir. Oui. Donc ça va prendre qu'ils s'assoient ici. Et si je retourne me rafraîchir, aurai la même chose. Donc nous sommes bons et peut-être ajouter une certaine marge des deux côtés. Donc, MON cinq, et je pense que maintenant nous sommes bons. Je me rafraîchis. C' est la caisse de la marque, nos marques et une certaine marge sur le fond, et bien sûr sur la première ici. C' est donc pour les marques. Allons-y et copions-le. Donc je vais fermer ce liquide de récipient. Ne soyez pas tout ça. Puis ouvrez-le ensuite après celui-ci. C' est donc les meilleurs centres aussi proches que je peux créer ici. Ouvrons à nouveau et consultez nos catégories. Et puis à l'intérieur de ces catégories, nous pouvons ajouter aussi ici au lieu de catégories de marques afin que les accepte. Et je pense que non, on est bons. C' est notre page d'accueil. Si nous faisons défiler vers le bas, nous pouvons voir les catégories. Nous l'avons fait. Le pied de page, nous avons notre en-tête. On a quelques infos sur notre pointu et bien sûr sur les best-sellers ici. Et l'arrière. Bien sûr, nous allons ajouter le droit ici. Nous allons ajouter un, par exemple, si l'utilisateur veut cliquer sur cette marque spécifique, vous pouvez toujours cliquer dessus et il l'emmènera aux marques ici, et bien sûr aux marques spécifiques que vous voulez aussi. Alors, c'est ça. Et à partir de ce best-seller, si l'utilisateur choisit ce produit, il l'emmènera directement au produit lui-même. Et c'est l'idée de la page d'accueil. Supprimons juste ça ici. Et je pense qu'on a fini pour ça. Rafraîchissons. Et c'est ça. C' est notre page d'accueil. Dans la vidéo suivante, nous allons créer les commandes et l'emplacement, peut-être le paiement. Et bien sûr, après cela, nous allons finir sur notre front et un design avec la page d'administration où nous allons laisser l'administrateur changer tout ce qu'il veut. Peut-être des marques, des catégories, ajouter de nouveaux articles, nouveaux produits, et les modifier. Les prix, la description qu'il veut. Mais c'est tout pour cette vidéo. se voit dans la prochaine. 13. Place Order 1: Bonjour et bienvenue. Dans cette vidéo, nous allons créer la page de commande. Et je me disais, revenons d'abord. Donc, chaque fois que nous sommes ici et ceci et supposons que je regarde un élément spécifique. Donc, je suis dans la page du produit où j'ai aussi l'ajout au panier ici. Donc, comme nous pouvons le voir, si l'utilisateur clique sur ce Ajouter au panier, il devrait directement l'emmener à la page Passer la commande où il peut voir toutes les commandes précédentes. Et vous pouvez également voir la carte elle-même. Et il peut supprimer des articles, ajouter des articles, vérifier le total, puis passer la commande réelle. Et je pensais que, avant cela, si l'utilisateur n'a pas entré son adresse de livraison ou son mode de paiement, il devrait en fait les ajouter et ils apparaîtront également sur la page Passer la commande. Alors revenons ici. Et créons un nouveau ici. Donc nouveau fichier. Et je vais le nommer l'expédition, Dieu. Mais EJS. Donc c'est le premier. Et dans ce fichier, comme toujours, nous devons inclure l'en-tête et le pied de page. Donc revenons en arrière, obtenons ce basique ici, et puis peut-être changer ça en pied de page. Et maintenant, nous pouvons commencer. Donc la première chose que je pensais faire est de créer peut-être le liquide de récipient. Et faisons-le maintenant. Donc, le liquide de récipient, et puis aussi la rangée. Et bien sûr, nous allons créer du P13. Et je pensais que le premier sur les grands écrans, la première division avec quatre, il sera vide. Ensuite, je vais ajouter une autre division avec grand avant aussi à l'intérieur de cette division. Créons un autre juste là, puis un peu de rembourrage sur l'axe Y. Et bien sûr ici, nous devons ajouter les barres de progression que nous allons utiliser. Donc, ce que je pensais est d'ajouter ici une barre de progression qui sera mise à jour chaque fois que nous terminons une tâche. Il se compose donc de deux ou trois tâches. Le premier sera d'ajouter l'adresse de livraison, puis de se reposer sur complète. Et après avoir terminé cette tâche, nous avons le mode de paiement. Donc, cette barre de progression sera mise à jour chaque fois que nous avons terminé avec une tâche. Alors créons ça maintenant. Et pour acheter un pro, créer une barre de progression, vous pouvez soit le prendre à partir de Bootstrap ou créé par vous-même. Donc, ce sera de progrès de classe et peut-être bg secondaire. Et ce que je pensais pour ajouter une marge, trois en bas. Et bien sûr, je dois créer le progrès. Les fesses. Et puis laissez-moi juste décalé vers la droite. Donc c'est la barre de progression, peut-être un avertissement de fond. Et puis le style. Nous allons avoir la largeur égale à 25 pour cent. Donc maintenant, si on y retourne oh, je suis désolé, on l'a construit dans l'expédition. Dieu. Et c'est une affaire. Laisse-moi juste l'enlever et le placer à la maison après quelques lignes de la Terre fois 20. Et essayons ici, rafraîchir. Et comme on peut le voir, nous avons notre barre de progrès juste ici. Donc c'est le premier. Et si nous revenons maintenant et que nous changeons ça à 50 pour cent, nous pouvons y aller et nous remarquons que c'est maintenant 50% au lieu de 25. Donc, cette largeur pour changer la barre de progression de secondaire à avertissement. Et on dirait que tu parviens à quelque chose. Donc c'est tout pour la barre de progression. Continuons. Voilà donc la division et c'est l'économie. Et bien sûr, je vais prendre ça et commencer à partir d'ici. Donc, la deuxième division sera le sinus n est l'expédition du paiement et de cette commande. Et ceux-ci seront juste ici après la barre de progression. Donc, créons une deuxième ligne avec PDE5, puis créons également des colonnes. Donc, le premier serait sinus n et la division est deuxième lacune serait de classe peut-être la colonne 3. Aussi. Nous avons vu et dans ce cas, nous allons avoir l'expédition. Puis colonne trois lui avec paiement. Et bien sûr enfin, l'endroit. Donc, comme nous pouvons le voir, nous maintenant à la disposition, peut-être changeons cela à 25 à nouveau. Et comme nous pouvons le voir, nous avons sine n paiement basé sur l'expédition et passer commande. Et maintenant, nous sommes à cette position où nous avons signé fin et nous sommes dans le crépuscule de l'expédition d'expédition. Donc, dans ce cas, notre dos et nous allons nous occuper de vérifier si l'utilisateur est connecté. Si c'est le cas, cela le conduira automatiquement à celui-ci. Et bien sûr, si elle n'est pas signé lui, il peut également se connecter et ensuite revenir à cette expédition en ajoutant les informations d'expédition. Donc, c'est le paiement d'expédition sine n et nous sommes bons pour l'instant. Allons de l'avant et créons notre boîte actuelle où nous allons avoir les informations d'expédition. Donc, la première chose que nous allons faire est de créer le code et le centre fiscal, puis aussi le fichier PY et peut-être les textes légers. Et nous allons ajouter la colonne 1 juste pour avoir un peu d'espace à gauche. Et bien sûr, va avoir la colonne bronzée avec fond sombre et texte. Commencez. Et ajoutons un peu de style. Donc le style sera la hauteur. Et dans ce cas, la hauteur sera 28 REM comme l'ouvrir et créer la forme par défaut sera vide pour l'instant. Et bien sûr, nous allons créer les entrées. Donc, je pense à ajouter plusieurs boîtes de saisie et créons-les en utilisant le groupe de formulaires. Donc pour le groupe, et ensuite nous avons le label. Et cette étiquette sera de classe B. Pourquoi R0 ? Et peut-être l'adresse complète. Ensuite, nous avons l'entrée réelle du texte de type. Ensuite, nous avons quelques classes telles que le contrôle de formulaire. Et peut-être que c'est ça, c'est le nom et l'adresse. Et bien sûr, l'espace réservé, peut-être au village. Et donc je pense que c'est tout. Copions cette querelle plus de fois. On va s'adresser. Alors on va changer ça en ville. Et peut-être ici. Et vous êtes assis et bien sûr, le numéro de téléphone. Alors voici le numéro. Et puis finalement, nous avons peut-être ajouter le bouton suivant où l'utilisateur peut passer à la tâche suivante chaque fois qu'il termine à ces informations. Alors faisons cela en utilisant peut-être un groupe d'entrée. Ou supposons, disons que nous allons utiliser les boutons simples. Donc, Centre fiscal, puis B13. Et c'est essentiellement le type de bouton soumettre. Et puis nous avons des classes telles que btn, btn-primaire. Et puis nous avons le centre de texte, et c'est le bouton Suivant. Et maintenant, si on y retourne, on se rafraîchit. Et comme vous pouvez le voir, nous avons obtenu notre commande de lieu de paiement sinus n d'expédition. C' est la barre, barre de progression, et nous sommes maintenant à 25 pour cent. Nous devons remplir ça. Et après les avoir imprimées, nous pouvons passer à la suivante. Et bien sûr, après la prochaine, nous aurons le mode de paiement. Nous allons donc mettre à jour cette barre de navigation et créer un mode de paiement comme celui-ci. Alors revenons en arrière et créons un bon bas. Donc maintenant, nous avons la barre de navigation, nous avons la barre de progression, et nous avons tout pour l'adresse. Copions ça. Et bien sûr, collons-le ici, mais faisons quelques lignes. Et nous y voilà. Maintenant, la barre de progression sera à 50 pour cent. Et bien sûr, supprimons ceux-ci. Et maintenant, on est bons. Donc c'est notre deuxième où nous avons le mode de paiement réel et nous avons signé tout ce dont nous avons besoin. Supprimons ceci et commençons une nouvelle division ici. Donc, après avoir passé des commandes et avoir ces divisions, peut-être ajoutons ici un nouveau texte de ligne centré le Wi-Fi. Ok, donc on est bons pour l'instant. Prenons la colonne a 10. Et bien sûr, nous devons changer ce groupe de formulaires. Alors on y va. Nourrissons tout ça. Et cela commence par la création d'une colonne 2 et d'une colonne 1. Et puis on aura le centre de texte. Et bien sûr, soyons déformés que nous allons soumettre. Et puis nous avons la division et avons quelques classes comme la carte. Ensuite, nous aurions du texte blanc, puis nous avons le centre de texte. Donc, ce mode de paiement, puisque nous n'avons pas seulement un seul moyen de paiement, qui est l'argent à la livraison pour l'instant, nous allons le créer comme une carte. Donc c'est ça, marge inférieure. Et bien sûr, nous allons ajouter un style tel que la marge 0. Ensuite, nous n'avons peut-être pas. Et puis la largeur maximale de 18 sont en m. Et enfin, le bouton de marge, dix pixels. Et c'est tout pour cette division. Ouvrons-le et commençons à créer du contenu ici. Donc, le premier serait l'en-tête de coupe, qui sera Paiement 2. Je vais simplement créer ou le paiement de temps juste ici. Et puis on va créer le corps de la carte. Et ici, nous allons avoir les différentes options, mais pour l'instant nous allons rester avec une seule option. Donc ce sera un téléphone. On va l'utiliser comme une case à cocher. Donc les textes commencent et p53. Et maintenant, on est bons. Nous pouvons commencer par la case à cocher entrée de type. Et puis ajoutons quelques classes pour le contrôle de vérification. Et enfin, peut-être ajouter l'ID. Donc, nous allons l'utiliser pour plus tard, ce qui est peut-être que je vais le faire exemple. Et supprimons ceci. Maintenant, nous sommes bons pour l'entrée. Créons l'étiquette. Et cette étiquette sera, par exemple, vérifier. Et puis nous avons aussi l'étiquette de vérification du formulaire. Et enfin, nous avons le travail réel, qui est l'argent à la livraison. Et bien sûr, après tout cela, nous avons besoin du bouton Soumettre ou du bouton suivant. Alors créons ça ici. Nous allons créer le bouton et le type, ou il va être soumis. Et bien sûr, les classes seront btn et btn avertissement. Et c'est ça. Retournons et rafraîchissons. Comme nous pouvons le voir, nous avons obtenu notre mode de paiement. On l'a comme argent à la livraison, mais on a oublié de taper la prochaine grève ici. Maintenant, frais, comme on peut le voir, on l'a eu. Maintenant, ce que je pensais d'avoir ceci comme désactivé, chaque fois que nous n'avons pas choisi un mode de paiement et chaque fois que nous le choisissons, il va être et désactivé. Et bien sûr, l'utilisateur peut aller à la tâche suivante, qui est le placement réel de l'ordre. Cela étant dit, ce sera la fin de cette vidéo et de la prochaine vidéo, nous allons les placer dans les fichiers spécifiques. Et bien sûr, nous allons le faire, va avoir un désactivé le ne pas cocher les cases juste ici. Et nous allons également créer une page de commande de place de définition. Et cela étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 14. Place Order 2: Bon, donc bonjour et bienvenue. Dans cette vidéo, nous allons continuer le mode de paiement. Nous avons dit que nous voulons désactiver ce bouton. Et chaque fois que nous cliquons sur un mode de paiement, par exemple si nous chatbox celui-ci, et alors cette prochaine devrait être disponible pour nous afin que nous puissions appuyer dessus. Allons-y et faisons-le. ce moment. Nous avons l'argent à la livraison. Et bien sûr, la prochaine cependant, ce que nous allons faire est d'ajouter un clic sur un droit ici. Donc, à l'intérieur de l'entrée, c'est la boîte à chat. Et décliquez sur aller pour retourner une méthode que nous allons créer en JavaScript. Alors peut-être que je vais le nommer termes changés et lui donner ceci. Et bien sûr, nous allons faire ce que vous allez faire est de désactiver ce bouton. Donc, si nous revenons maintenant et cliquez sur Actualiser, nous pouvons voir qu'il est désactivé. Et ce que nous devons faire maintenant, c'est peut-être le changer une fois qu'on appuie dessus. Alors revenons en arrière et créons un script ici. Et dans ce script, nous allons créer notre fonction. Allons de l'avant et créons le script. A l'intérieur du script, nous avons la fonction que nous venons de nommer, les termes ont changé. Et il faudra la chatbox, limitons chatbox. Et il va vérifier si la case à cocher le chat. Donc, si elle est cochée, nous allons appeler l'élément par ID. Donc document point obtenir élément par ID. Et vérifions l'ID de cet élément. Et comme on peut le voir, on n'a pas d'idée. Donc sans nom, je vais lui donner un ID de suivant, puis aller chercher l'élément par ID ensuite, puis changer désactivé pour être égal à false. Donc, si la case est cochée, nous allons rendre cela capable de faux. Cependant, ce n'est pas le cas. Nous allons obtenir l'élément par ID et ensuite simplement le rendre vrai. Donc c'est ça. Maintenant, une figue, retournez en arrière et appuyez sur Actualiser, va avoir ce bouton désactivé. Cependant, une fois que nous cliquerons dessus, nous allons l'avoir. Nous pouvons l'utiliser et si nous l'enlevons, la même chose qu'avant. Maintenant que nous avons créé l'expédition et le mode de paiement, allons de l'avant et commençons par passer la commande réelle. Pêche. Alors maintenant, allons de l'avant et déplacons tous ces éléments vers leurs pages spécifiques. Donc ici, allons de l'avant et créer une nouvelle page et que nous allons le nommer peut-être une carte de paiement et Node.js. Et bien sûr, nous allons supprimer tous ces éléments ici. Alors supprimez-les, ajoutez-les ici. Et bien sûr, nous allons ajouter pied de page et en-tête. Donc c'est le pied de page. Je vais faire la même chose pour ici. Donc ici, nous avons l'en-tête et nous sommes bons pour l'instant. Bien sûr, nous avons encore celui-ci, qui est la méthode d'expédition. Alors allons de l'avant et retirez-le aussi et placez-le dans sa position appropriée. Dans ce cas, c'est dans la coupe d'expédition. Donc maintenant, si nous retournons à notre page d'accueil et cliquez sur Actualiser, nous allons avoir des espaces vides puisque nous avons ces lignes. Maintenant, nous allons rafraîchir et nous sommes bons. Donc c'est tout pour les deux premières pages. Maintenant, nous allons créer la page de commande réelle. Alors allons de l'avant et ajoutons quelques lignes, peut-être dn. Et maintenant, nous allons commencer par créer le liquide de récipient. Ensuite, je vais créer la ligne avec un peu de rembourrage sur l'axe Y. Ensuite, je pensais laisser comme d'habitude certains, un peu d'espace sur la gauche, puis commencer par la boîte réelle. Et dans ce cas, mais je pense à ajouter une rangée. Donc nous aurions notre DOM. Et à l'intérieur de cette rangée, je vais créer comme d'habitude. Peut-être que je viens de les copier. Oui, donc comme c'est le même, nous allons copier tout cela à partir du sujet précédent, aller au paiement. Dieu, comme nous pouvons le voir, c'est déficient et nous n'avons pas besoin de tout ça en fait, nous avons juste besoin de ces deux-là. Alors copions-les. Droit ? Et revenons à notre page d'accueil ici. Et bien sûr, nous devons ajouter le globe avec un peu de rembourrage, comme nous l'avons dit. Et supprimons ça. Et nous avons donc c'est tout. Mettons-le ici. Et peut-être la division qui manque. Et maintenant, on est bons. Et c'est l'expédition ou la barre de progression, comme nous pouvons le voir ici nous l'avons. Maintenant, créons l'ordre de commande, mais avant cela, ajustons ceci. Donc nous avons maintenant 75 pour cent au lieu de 50. Et si on y retourne, on est maintenant à 75%. Nous avons toujours l'ordre de place seulement. Commençons donc maintenant par créer la page réelle. Donc ce que je vais faire est de créer un nouveau. Row dans cette affaire ici. Et je vais avoir la première colonne avec peut-être sept à taille moyenne. Et puis nous avons aller avec un peu de rembourrage et bien sûr la colonne réelle. Et ce que je pensais, c'est d'ajouter l'emplacement. Donc, la première chose que nous allons afficher est l'emplacement réel de la personne avec les informations qu'il a saisies à partir de l'expédition. Et bien sûr, peut-être un bouton d'édition pour qu'il puisse retourner à l'expédition et l'emplacement des éditeurs. Pour ce faire, nous allons utiliser un chariot comme d'habitude. Donc carte avec un peu de fond, lumière, bouton de marge trois. Et nous pouvons commencer par l'en-tête de la carte. Et puis va ajouter peut-être l'adresse, puis suivie de l'adresse réelle. Donc peut-être, supposons que le village, peut-être la rue, le bâtiment. Et après ça, on aura le corps de la carte. On va montrer la ville. Donc dans H5 et je vais le faire comme ket appelé titre. Et puis on aura la ville. Et après cela, nous pouvons créer le téléphone ou le numéro de téléphone. Et dans ce cas, je pensais ajouter le numéro de téléphone à gauche et le bouton d'édition à droite. Donc, créons une nouvelle ligne. Les scientifiques ont volé le fait d'avoir des relations sexuelles pour le premier. Et le paragraphe sera de texte. Et peut-être le numéro de téléphone. Supposons 4, 4, 4, 4, 4, 4, 4, 4, 4, 4. Et après ça, nous allons créer une nouvelle colonne, aussi le sexe. Et dans ce cas, nous allons avoir le bouton qui aura plusieurs classes telles que BTN, float à la fin. Et bien sûr BTN contour, primaire. Et bien sûr l'édition réelle. Maintenant, si on retourne en arrière et touche Refresh, on va avoir quelque chose comme ça. Nous avons l'adresse, nous avons la ville, le numéro de téléphone, et le bouton Modifier pour éditer tous ces éléments. Donc, dans le backend, nous ne voulons pas faire ce bouton. Nous nous dirigeons vers la page d'expédition où l'utilisateur peut éditer tous ces éléments, puis revenir à la page du détenteur du lieu. Donc c'est le premier. Et continuons à créer le mode de paiement. Donc je pense que c'est pareil. Et créons une nouvelle ligne ici. Et dans ce cas, je n'aurai qu'une seule colonne. Et puis la carte avec les motifs de lumière de fond. Et bien sûr, le bas de la marge trois. Ouvrons ça et commençons ici. Donc c'est ça à l'intérieur de cette division, nous allons avoir l'en-tête de la carte comme d'habitude. Et dans ce cas, il ne dira que le paiement. Et puisque nous n'avons qu'un seul paiement, je vais l'ajouter simplement en utilisant la rubrique 5. Dans ce cas, comme d'habitude, il s'appelle le titre, puis l'argent à la livraison. Donc c'est ça. Maintenant, si nous revenons au paragraphe et a adhéré classe appelée texte, va avoir peut-être la livraison gratuite sur les anciennes commandes au-dessus peut-être 15$. Donc c'est ça. Et maintenant on a fini avec la deuxième pièce. Si nous revenons en arrière et rafraîchissons pour avoir quelque chose comme ça, mais je pensais l'ajouter sous la colonne qui est à sept médium. Alors revenons en arrière. Voyons ce qu'on a fait de mal ? Si je reviens ici, nous avons la colonne et nous aurions dû ajouter ce rôle. Alors retirez-le et placez-le ici. Maintenant, si nous revenons en arrière et appuyez sur rafraichir, nous allons obtenir l'adresse puis le mode de paiement. Et nous avons encore quelques espaces ici. Et dans cet espace vide, je pense en fait à ajouter le bouton Passer la commande et où l'utilisateur peut également voir ses commandes réelles. Alors, mais avant ça, je vais ajouter un nouveau personnage ici. Et cette carte affichera tous les articles qui sont dans le client Scott. Alors allons de l'avant et commençons avec. Retournons en arrière. Et comme d'habitude, on va l'avoir dans cette division. Et faisons-le ici pour nous. Nous allons créer notre colonne, puis, je suis désolé, dépasser et ensuite notre colonne. Et bien sûr, le fond de la somme avec la lumière et beaucoup et en bas trois comme d'habitude. Et nous avons l'en-tête de la carte. Dans ce cas, allez avoir le paragraphe avec certains styles tels que display, peut-être inline-block. Et bien sûr, nous devons avoir vos ordres ou guérir. Oui, je pense que tout ce sont tes objets. Ça sonne mieux. Ensuite, nous avons un autre paragraphe avec le flotteur de classe. Et dans ce cas, nous allons avoir du style. Et nous allons également afficher le bloc en ligne. Et dans ce cas, nous allons avoir des prix. Donc, les articles sont sur la main gauche, les prix sur la droite. Donc c'est pour l'en-tête. Et dans ce cas, nous allons commencer par le copain froid. Allons de l'avant et créons une nouvelle division avec corps et justifions le centre de contenu. Et comme nous le savons, nous commençons par créer E4 à soumettre. Et puis on a une rangée. Et dans ce cas, nous allons avoir la troisième colonne. Et la fin dans cette colonne, je pense à ajouter l'image, les éléments de sorte que supposons qu'il choisit l'image buffet de l'élément 1 et peut-être ajouter quelques styles. Voyons voir. D' abord, nous allons afficher inline-block et ensuite avoir la hauteur de cinq Barry. Et enfin la largeur de aussi très fin. Donc c'est tout pour l'image. Maintenant, créons une autre colonne. Et dans ce cas, nous aurons la colonne 9. Et à l'intérieur de cette colonne, je vais avoir le paragraphe pour le titre. Donc, comme d'habitude bloc en ligne de style, je suis désolé. C' est ça. Nous avons à l'intérieur de ce bloc d'affichage en ligne. Et puis nous avons le titre réel, supposons que nous choisissions la chanson, et ensuite nous allons avoir un autre paragraphe pour le prix. Et cette fois, il sera peut-être affiché et aussi inline-block. Et bien sûr maintenant, nous allons avoir la charge de classe et, supposons que nous ayons 25 dollars. Donc maintenant, si vous revenez à rafraîchir, allez voir quelque chose comme ça, nous avons encore quelques modifications pour cela et nous allons les faire dans la prochaine vidéo. Alors, à vous voir. 15. Place Order 3: Très bien, Alors maintenant que trop mauvais, Ajoutons le reste de l'information afin que nous ayons encore, nous avons déjà ajouté le titre et le prix. Peut-être que nous allons ajouter ceci, ajouter la quantité en fait. Ajoutons donc un paragraphe qui indique la quantité. Puis suivi par la quantité réelle. Je vais l'avoir dans une période. Dans ce cas, supposons que l'utilisateur en a acheté trois. Et après cela, nous allons créer une nouvelle ligne après cette division. Et dans ce cas, on va l'avoir pour la démo. Donc peut-être la colonne 6 et ça serait vidé et on a la colonne et le sexe. Et dans ce cas, nous allons avoir le bouton Supprimer. Alors ajoutons le bouton. Et le bouton réel aura quelques classes telles que PTEN, changeur de jeu vidéo, puis flotter, non ? Et bien sûr, le type soumettre. Donc oui, je pense que c'est ça. Retournons en arrière et frappez rafraichir. Et comme vous pouvez le voir, nous avons la quantité juste ici. Peut-être ajoutons la quantité réellement à celle-ci. Alors faisons ça. Nous aurons ici la couleur, et nous allons l'ajouter réellement dans cette colonne. Mais puisque nous utilisons display inline-block, je vais avoir une nouvelle division ici. A l'intérieur de cette division, nous allons avoir ces deux paragraphes et ensuite suivis de cette quantité. Et bien sûr, bouton des scientifiques, nous allons ajouter la télécommande. Donc, je pense que c'est tout fondamentalement, si nous l' actualisons, nous allons avoir la quantité 3 et le bouton supprimé pour réellement supprimer cet article. Donc maintenant à tout cela, nous allons ajouter une ligne. Et dans ce cas, après d4 juste ici, je vais ajouter chaque partie. Et si j'appuie sur Rafraîchir, je veux avoir cette ligne. Et bien sûr, si nous avons plusieurs, peut-être plusieurs articles, ils ressembleront à ceci. Allons-y et on a ce corps de carte. Et à l'intérieur de ce corps, nous allons créer plusieurs formes pour plusieurs objets. Donc je vais copier tout ça quelques fois. Et maintenant, si nous revenons en arrière et appuyez sur rafraichir, vous allez obtenir plusieurs articles. Et bien sûr, chaque article se compose d'une image spécifique, titre du Pacifique, la quantité que l'utilisateur a achetée, et bien sûr, le prix de l'article. Et nous avons également le bouton Supprimer pour supprimer tous les éléments que l'utilisateur ne veut pas. Donc c'est tout pour les articles. Et dans ce cas, nous avons toujours le contrat de commande de place réel ici. Donc, si vous vous souvenez, nous avons créé une colonne ici, qui est celle-ci. Donc si tu veux avoir peut-être ici, oui, alors c'est tout. On a le milieu de la colonne. Sept. Donc après sept heures, je pense qu'à partir du 7012, on aura l'ordre de place. Alors faisons défiler vers le bas. Nous avons cette division est de créer une nouvelle division ici. Et dans ce cas, nous allons avoir une nouvelle colonne au milieu de cinq heures. Et dans ce cas, nous allons avoir, comme d'habitude, une nouvelle rangée avec un peu de rembourrage sur l'axe des y, puis une autre colonne, puis le vrai Dieu. Et dans ce cas, nous allons avoir, comme d'habitude mauvaise sécheresse, la lumière et le bouton de surveillance trois. Et puis nous avons aussi le formulaire que nous allons soumettre pour la commande de placement. Alors, c'est ça. On va avoir l'en-tête de la carte comme d'habitude. A l'intérieur de cet en-tête de carte, pour avoir un centre aztèque. Et nous allons avoir le bouton avec quelques styles. Donc je pense que la largeur de ce bouton devrait être de 65 pour cent notre carte. Et puis nous avons encore les classes de btn, VT et peut-être jaune, donc avertissement. Et puis nous avons peut-être, ajoutons le onclick et retourner Premier Ordre et cette méthode nous l'utilisons plus tard, mais pour l'instant j'ai encore ajouté. Et bien sûr, le type devrait être un bouton, et puis nous avons toujours le nom, peut-être l'action. Et bien sûr, l'ordre de place juste ici. Alors, passez commande. Et maintenant, si nous retournons rafraîchir, nous allons avoir cette carte avec seulement un en-tête qui dit placer tout. Donc c'est tout pour l'en-tête. Continuons en créant le corps. Alors revenons en arrière. On a toujours le corps de la carte, et dans ce cas, je vais le créer ici. Si bon corps. Et puis on a toujours le titre de la carte. Dans ce cas. Je vais émettre un résumé de la carte. Et commençons par une nouvelle rangée. Et cette ligne va avoir les éléments, donc la colonne 6. Et puis à l'intérieur de cela et aller à placer des objets. Alors prenons le, peut-être la somme. Donc, au sexe de colonne, le second, Ajoutons peut-être pour l'instant 70. Et bien sûr, quand nous avons fini et que nous avons conçu et l'égalité backend la loi. En fait, le programme devrait peut-être ajouter tous les articles au prix de tous les articles, puis l'afficher sous le résumé de la commande. Mais pour l'instant, nous allons ajouter 70$. Et puis après avoir reçu ton avec le coup va créer une nouvelle rangée. Dans ce cas, nous allons avoir une nouvelle colonne sexe. C' est pour la livraison. Et puis ajoutons une autre colonne, le sexe. Ce qui est 3 peut-être. Et après cela, nous allons créer une nouvelle ligne avec quelques B13. Et dans ce cas, nous allons avoir le total de la commande ou peut-être le prix total. Donc c'est créé colonne sexe. Et dans ce cas, ou le total, puis suivi par le montant réel. Alors faisons un trait ici, équilibré six. Et disons que c'est aussi quelqu'un en dollars puisque la livraison est gratuite. Donc je pense que c'est ça. Peut-être que vous pouvez également ajouter peut-être un paragraphe qui dit que vous n'avez pas d'articles dans votre carte. Si nous n'avons pas d'articles dans notre code. Mais pour l'instant, nous allons rester avec cela et partout où nous faisons le back-end, nous pouvons également l'ajouter. Donc nous allons rafraîchir et comme vous pouvez le voir, nous avons les autres articles récapitulatifs, livraison a quelques raquettes, et aussi l'autre total avec le total réel. Maintenant, je pense que c'est tout pour le, celui-ci. Et bien sûr, nous pouvons également ajouter une nouvelle carte ici pour voir tous ses anciens achats. Et dans ce cas, je vais le créer juste ici après ça. Donc, à l'intérieur de cette colonne, va avoir une nouvelle ligne. Et dans ce cas, nous allons avoir comme d'habitude, la colonne avec de la lumière. Et bien sûr, le fond de la marge vert. Donc en-tête de carte comme d'habitude. Et bien sûr, nous allons avoir le paragraphe. Et dans ce cas, faisons une nouvelle ligne et un nouveau style. Peut-être afficher le bloc en ligne. Et puis bien sûr, nous avons la charge de classe d'achats, et puis nous avons eu le bloc d'affichage de style en ligne comme d'habitude. Et dans ce cas, nous avons le reçu. Donc, ce que nous montrons ici, c'est les commandes réelles de l'utilisateur et si elle est reçue ou non. Donc je pense que c'est tout pour l'en-tête de la carte. Revenons en arrière et voyons comme rafraîchir. Ouais, je pense que ça a l'air bien. Nous avons vos achats et si elle est reçue sur non. Et après Daniel va créer le corps de la carte avec justifier centre de contenu. Et après ça, nous allons avoir la ligne. Et puis après ça, nous pouvons commencer par créer le paragraphe, peut-être quatre. Peut-être supprimer cette classe pour l'instant, je vais ajouter quelques styles. Donc, à ce moment serait affichage bloc en ligne. Et puis, j'ai la date de commande. Alors rendez-vous et peut-être supposons 26 à 2021. Puis suivi par peut-être le prix. Mais avant d'aller de l'avant et de rafraîchir. Et comme nous pouvons le voir, nous avons la date de commande. Et je pensais ajouter le bouton réel de réception ou de flexion juste ici. Et bien sûr le total ou le prix juste ici. Donc, au lieu d'ajouter le prix ici, je vais avoir le bouton qui indique En attente ou reçu. Donc on va les faire tous les deux. Et les différents andrew va afficher l'un d'entre eux selon que l'article est reçu ou non. Donc, bouton inondation et BD et BD et réussir si elle est reçue. Et peut-être le succès, je suis désolé. Et bien sûr le style qui est d'afficher bloc en ligne. Donc c'est tout pour le premier bouton et je vais écrire reçu. Et après ça, après cette division, on va avoir une nouvelle division. Et dans ce cas, je vais avoir le total est et peut-être 120$. Maintenant, si nous revenons et actualisons, comme nous pouvons le voir, ce total comme et ce bouton devrait être juste ici. Alors allons-y et réparons ça. A l'intérieur de ce bouton, nous avons l'affichage de style inline-block. Cependant, je pense que nous avons probablement simplement supprimer cela. Je l'ai encore fait. Donc nous avons ici le bloc inline-block et nous avons oublié de créer une nouvelle division. On va stocker tout ça, alors allons-y et faisons-le ici. Alors nous allons rafraîchir. Et comme vous pouvez le voir, nous avons le bouton reçu juste ici. Et peut-être que nous pouvons aussi l'avoir comme un pour les petits. Et rafraîchissons. Et comme nous pouvons le voir, nous avons obtenu cela comme un total derrière ou après la date de commande. Donc c'est tout pour le premier. Ajoutons peut-être allons-y et ajoutons une autre ligne. Donc HR et puis copier tout cela, puis collé quelques fois plus. Alors, c'est Atlas. Allez-y et rafraîchissez. Et comme on peut le voir, on a des ordres différents. Mais ce n'est pas ce que je pensais. Je pensais les avoir tous à l'intérieur de la carte. Alors revenons en arrière et voyons le problème. Donc ici, ensemble d'avoir celui-là juste ici. Je vais l'avoir juste après celui-là. Et tout cela devrait être dans le corps de la carte. Donc, je vais copier tout cela et collé quelques fois de plus. Retournons en arrière et frappez rafraichir. Et comme nous pouvons le voir, nous avons reçu nos commandes avec la date Euler, le montant total de celui-ci, et si elle est reçue ou non. Et pour l'amour de cet exemple, je vais changer ça en attente juste pour vous dire comment vous allez l'avoir si la commande n'est pas encore livrée. Donc je vais avoir ici, au lieu de btn-succès, btn danger. Et au lieu de recevoir, je vais avoir la flexion. Alors, c'est Atlas. Allez-y et rafraîchissez-le. Et comme on peut le voir, on a le bouton qui dit en attente juste ici. Et cependant, tous les autres articles sont reçus. Donc c'est tout pour cette vidéo que nous avons créée. Pour finir, nous avons créé ces petites cartes où nous avons l'adresse de paiement. Ensuite, nous avons tous les articles qui sont dans la carte de l'utilisateur et bien sûr, ses anciens achats. Et nous avons aussi le total ou les résumés. Donc, nous avons le total juste ici. Et cela devrait être la somme de tous les articles multipliée par la quantité que l'utilisateur a commandée. Donc, c'est essentiellement pour cette vidéo. La prochaine vidéo, nous allons commencer par la construction de la page d'administration. Et nous avons aussi la page d'inscription où l'utilisateur est parti. Maintenant, inscrivez-vous à ce site web. étant dit, c'est la fin de cette vidéo. se voit dans la prochaine. 16. Administrer: Bonjour et bienvenue. Dans cette vidéo, nous allons créer la page d'administration. Et en fait, la page d'administration sera composée de deux pages. Le premier que nous allons construire ensemble, et le second sera votre projet que vous allez créer. Commençons donc par le premier où nous allons avoir plusieurs catégories, marques et articles que nous pouvons ajouter. Revenons à Dieu. Et tout d'abord, puisque nous avons encore tout ça ici, ajoutons-les à la commande. Donc ici, chaque fois que nous avons celui-ci, qui est le liquide du récipient, va tout prendre. Et ils ont dit et l'ordre de place, je crois que nous n'avons pas créé de nouveau fichier, Placer Order, EJS. Et dans ce cas, je vais ajouter tout ça ici. Et comme d'habitude, n'oubliez pas l'en-tête et le pied de page. Donc c'est tout pour le pied de page. Et faisons défiler vers le haut à l'en-tête juste ici. Et on a fini pour l'ordre de place. Maintenant, nous sommes à la maison que EJS et nous allons créer la première page d'administration. Donc, comme nous l'avons dit, nous avons peut-être besoin d'une boîte où nous pouvons ajouter nos catégories. Alors allons de l'avant et commençons par créer le liquide de récipient. Et puis à l'intérieur de celui-ci et aller à Créer sa grandir avec avant. Et bien sûr, colonne, grand sexe, arrière-plan, lumière et être trois. Donc c'est tout pour le premier. Créons le formulaire. Et bien sûr, à l'intérieur de ce formulaire, je vais avoir la catégorie ajouter. Alors ajoutons-le ici, puis suivi d'une étiquette. Et ce sera le nom de la catégorie. Et bien sûr, une division qui est entrée-groupe. Et à l'intérieur de ce groupe d'entrée-va avoir l'ajout réel de la catégorie. Donc, nous allons avoir une entrée de texte de type et la classe sera formée contrôle. Et puis l'espace réservé, peut-être le nom ou le nom de la catégorie, simplement un nom. Et je pense que c'est ça. Si on retourne en arrière et qu' on touche rafraichir, on aura quelque chose qui ressemble à ça. Donc nous avons l'académie, vous avez le nom de la catégorie, et nous avons aussi le nom réel. Maintenant, quand penser est d'ajouter l'image de cette catégorie. Donc, revenons en arrière et peut-être copions tout cela et collez-le ici. Donc l'image de catégorie, et nous n'allons pas ajouter un lien vers l'image. On va ajouter la basse, donc je vais la laisser sous forme de texte. Et ce que nous allons faire est d'ajouter toutes les images à notre dossier d'images. Et puis nous pouvons choisir de ça. Puisque nous allons entrer dans le chemin. Donc c'est tout pour l'image. Allons juste peut-être mal. Et si nous revenons en arrière et rafraîchir et puis j'ai le nom et l'image de la catégorie. Donc, c'est tout pour la catégorie Ajouter. Faisons exactement la même chose pour la marque et placez-la ici. Alors maintenant, revenons en arrière et prenons tout ça, qui est le sexe de colonne. Copiez-le et placez-le juste ici et ici nous avons la marque, le nom de la marque. Et puis nous avons l'image de marque. Et comme vous pouvez le voir, si on retourne en arrière et qu' on touche rafraichir, on aura quelque chose qui ressemble à ça. Cependant, nous devons encore ajouter peut-être, peut-être faire sombre. Donc ensemble de lumière de fond qui est nue sombre et CO2 arriver. Rafraîchissons. Et bien sûr, nous n'avons pas besoin d'oublier d'ajouter la taxe comme. Alors, c'est Atlas. Retournez et rafraîchissez. Et comme nous pouvons le voir, nous avons la catégorie d'ajout et les boîtes de marque où nous avons, nous pouvons entrer la catégorie et l'image. Et bien sûr, nous ne voulons pas oublier le bouton de soumission réel. Alors créons une autre division. On va ajouter le bouton. Et ce sera de classe btn, btn, peut-être ici, sombre. Et puis nous avons soumis. Et nous allons avoir la même chose ici. Alors, bouton. Et puis quelques classes telles que btn, btn light cette fois puisque nous utilisons l'arrière-plan de sombre et soumettre, rafraîchir. Et comme nous pouvons le voir, nous avons obtenu la soumission et la soumission pour notre marque et la catégorie. Maintenant que nous avons terminé avec notre marque et notre catégorie, l'étape suivante consiste à créer l'ajout d'un article. Alors revenons en arrière. Et ici, nous avons la forme, nous avons encore la division, et c'est pour la rangée. Créons une nouvelle ligne. Et dans ce cas, nous allons avoir la colonne Médaille de six et l'arrière-plan sombre. Et aussi toboggan fiscal avec un rembourrage de tous les côtés. Et maintenant, nous pouvons créer notre formulaire. Et puis à l'intérieur de ce formulaire, commençons par créer le H3, qui est ajouter un élément. Et bien sûr, nous devons le suivre avec la première étiquette pour le nom de l'article. Donc étiquette pour le nom. Et ce sera ItemName, puis suivi d'une division du groupe d'entrée comme d'habitude. Donc groupe d'entrée. Et puis nous avons encore la marge inférieure trois. Et bien sûr, nous devons ajouter l'entrée réelle. Alors j'ajoute un texte d'entrée et ensuite nous avons un contrôle de formulaire de classe. Et nous avons aussi le nom, qui est le nom réel, et peut-être l'élément réservé, le nom ou rien. Je pense que tu vas peut-être le faire comme nom. Et c'est essentiellement pour la première division. Maintenant, nous l'avons toujours. Quelques choses. Donc, copions ceci et collez-le quelques fois de plus. Donc, nous avons le nom de l'article peut être la description de l'article, et ensuite nous avons également l'article. Ajoutons ici la catégorie, puis la marque de l'article. Et bien sûr, nous avons encore le prix, quantité et l'image ainsi que la taille. Donc, article, marque, article, image, disons. Et après cela, nous aurons la quantité d'article. C' est donc la quantité disponible dans notre stock. Et après ça, nous allons finir avec l'image de l'article, l'huile. Ok, donc nous avons ajouté ici l'image pour que nous ayons toujours le prix. Ouais, donc on a tout ce dont on a besoin, on a encore la taille. Alors ajoutons ça très vite ici. Donc c'est ça, c'est le côté. Et enfin, nous allons avoir le bouton Soumettre. Et je pensais ajouter peut-être un bouton pour voir tous les éléments que nous avons. Alors faisons-le bien. Ici. Nous avons cette taille d'article. Créons une nouvelle ligne ici, le sexe de colonne pour le bouton de soumission. Donc, tapez devrait être Soumettre. Et puis après cette classe, btn, VT et la lumière comme d'habitude, et le bouton Soumettre réel. Et après cela, nous allons créer les colonnes X. et dans ce cas, nous allons l'avoir. Droit ? Donc flottez, à droite, ou flottez et le métal. Et ce formulaire sera le formulaire que nous allons soumettre bouton sera btn, btn charge légère, puis afficher tous les éléments. Donc, en gros, si je vais de l'avant et me rafraîchir, nous pouvons voir que nous avons tous les objets dans le folk. Nous avons donc le nom, la description, la catégorie, la marque, l'image, la quantité, le prix et la taille. Donc, c'est essentiellement pour l'article. Et maintenant, nous devons créer une autre division peut-être. Et cette division se compose de toutes les commandes que les utilisateurs ont commandées à maintenant. Et bien sûr, nous devons créer une nouvelle, peut-être une nouvelle page pour voir tous les éléments et peut-être changer l'un d'entre eux si nous le voulons. Donc c'est tout pour celle-là. Allons de l'avant et créons la prochaine division. Revenons à notre code. Et dans ce cas, je vais faire défiler tout le chemin ici et commencer par les commandes réelles. Donc, après avoir fait avec ce formulaire, c'est tout pour la colonne et toujours sur la même rangée. Donc, ici, créons une nouvelle colonne, le sexe moyen et notre pensée pour le faire défiler. Et nous verrons ce que signifie le défilement de partition dans une minute. Donc c'est pour les ordres et. Bien sûr, nous allons avoir une division aussi froide que créer notre forme. Et puis à l'intérieur de ce formulaire, je vais avoir l'en-tête de la carte comme d'habitude avec un avertissement de fond et le texte devrait être sombre. Alors allons-y et ouvrons ça. A l'intérieur, nous allons avoir le numéro de commande dans ce cas. Je vais peut-être l'écrire en un seul. Et bien sûr suivi d'un autre paragraphe avec la carte des classes, le texte et le flotteur. Et dans ce cas, c'est pour le prix total et suivi par peut-être, disons 75$. Alors, c'est ça. Si vous retournez en arrière et appuyez sur rafraichir, nous allons avoir quelque chose qui ressemble à ça. Ce sont les commandes et à l'intérieur des commandes, nous avons la première commande avec un prix total d'un. Maintenant, nous pouvons ajouter peut-être quelques informations à ce sujet. Et bien sûr, nous n'allons pas ajouter tous les articles que l'utilisateur a achetés. Nous allons juste ajouter peut-être son emplacement, le prix total que nous avons déjà ajouté, et peut-être quelques boutons. Et chaque fois que l'utilisateur, l'administrateur appuie sur ce bouton, il l'emmènera à l'ordre réel avec tous les détails de cette commande. Alors, c'est ça. Allons de l'avant et continuons à créer le corps de la carte, soi-disant lapin. Et dans ce cas, à l'intérieur du corps, nous avons le titre de voiture comme d'habitude, qui sera peut-être l'utilisateur de l'ordre de qui est-ce ? Alors peut-être que je vais le nommer. Et dans ce cas, je vais avoir l'emplacement et le texte de la carte, ce qu'on appelle X. et dans ce cas, peut-être le Liban. Et après ça, on aura le rendez-vous. Donc aussi un autre contexte avec la date peut être 26 à 2021, puis suivi par le numéro de téléphone et un autre contexte. Donc c'est ça, peut-être plus de 4, 4, 4. Et donc si vous retournez et appuyez sur rafraichir, vous allez avoir ça. Nous avons le nom, le Liban, la date et le numéro de téléphone. Et bien sûr, je vais ajouter peut-être le bouton de vue juste ici. Alors allons de l'avant et créer le bouton pour voir l'ordre complet. Et je pensais l'ajouter ici. Et bien sûr ici, j'ai oublié de les avoir comme paragraphe au lieu de texte au lieu de division. Alors, nous allons les guider et les réparer. Bon, maintenant que nous les avons réparés, Créons le bouton avec le type de soumission. Et puis nous avons les classes qui sont le btn, btn-primaire. Et je pense qu'on a fini de se voir encore. Maintenant, revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, nous avons l'ordre réel. Et peut-être parce que ça ne prend pas toute la page pour toute la division, faisons l'ordre des fruits de mer ici. Donc, je vais faire est d'avoir ces balises de titre et toutes ces nouvelles lignes et colonnes 6. On va avoir tout ça dans cette colonne. Et puis je vais créer une autre colonne qui est aussi le sexe. Et dans ce cas, je vais avoir le bouton de soumission. Donc maintenant, si on retourne en arrière et qu'on touche rafraichir, tu auras quelque chose qui ressemble à ça. Et bien sûr, nous pouvons ajouter les classes telles que la charge. Et, comme vous pouvez le voir, c'est à la fin juste ici. Alors, c'est ça. Nous pouvons toujours ajouter, peut-être prendre tout cela et le copier encore quelques fois, et nous allons le rafraîchir. Et comme on peut le voir, nous avons nos ordres, plusieurs ordres. Et bien sûr, c'est tout pour cette page. Nous avons créé toutes les pages d'administration mentionnées ou les fonctionnalités d'administration, et c'est tout pour la première page d'administration. se voit dans la vidéo suivante. 17. Objets: Bon, donc bienvenue. Dans cette vidéo, nous allons créer le discours de l'élément où si l'administrateur clique sur cette vue tous les éléments, il devrait être le diriger vers tous les éléments avec toutes les informations qu'il peut éditer. Alors allons de l'avant et commençons avec ça. Mais d'abord, avant de faire quelque chose qui est juste la couleur de ceci et de le placer, placez-le dans la page d'administration réelle. Donc, je vais créer un nouveau fichier. Et ce sera la page d'administration ou, oui, donc je pense que c'est logique admin à l'EJS. Et dans ce cas, nous allons les avoir. Et bien sûr, commençons à construire les articles ici. Donc la première chose que nous allons créer est un formulaire. Et après cela, nous allons devoir créer le liquide de récipient. Et puis suivi par peut-être la rangée. Et puis, bien sûr, le canon. Mais avant cela, ajoutons un peu de rembourrage, donc peut-être B5. Et maintenant, on est bons. Nous pouvons commencer par créer la carte. Et je pensais simplement créer un corps froid. Et à l'intérieur de Skype, mon pote, je vais avoir l'arrière-plan, la lumière et la justification du centre de contenu. Et maintenant, commençons par construire la première rangée, puis la colonne grande trois. Et la première chose que nous allons ajouter est l'image. Donc peut-être des images ou des barres obliques. Et mentionnez un que vous Vg, dpi JPEG. Et bien sûr, va devoir ajouter le style. Donc, l'affichage doit être inline-block. La hauteur. Peut-être que 15 pixels pourraient être bons. Je suis désolé, 15 heures du matin. Et la largeur sera également de 15 RT m Et c'est essentiellement pour l'image. Créons une autre division pour le texte. Et dans ce cas, je vais avoir un peu de planification avant et détecte le centre. Et puis commençons par créer la ligne. Ensuite, nous avons le sexe de colonne. Et bien sûr, nous allons avoir l'entrée à éditer. Donc, ce type devrait être Button. Et bien sûr, l'idée qui est nécessaire à cela et la classe btn, avertissement btn. Et puis PY deux. Et enfin, après avoir fait avec cette entrée, va devoir créer une autre colonne de code de six, qui contiendra le bouton réel de type submit. Et dans ce cas, nous allons le rendre désactivé pour l'instant. Peut-être que je limiterai l'été prochain. Juste pour les scénarisés, nous allons créer. Donc être le n, être deux avertissement btn et puis bien sûr être beaucoup trop. Donc c'est tout pour le premier. Si nous allons de l'avant et nous rafraîchissons, nous allons avoir quelque chose qui ressemble à ceci, mais nous avons oublié d'ajouter les boutons. Donc, ici, nous devons ajouter, tout d' abord, nous avons le premier bouton, qui est celui-ci. Et dans ce cas, je vais avoir le bouton Soumettre. Si on retourne en arrière et qu'on touche rafraichir, j'aurai quelque chose qui ressemble à ça. Mais cependant, nous avons toujours ce bouton. Et dans ce cas, je suis désolé, nous devons le faire comme bouton juste ici. Donc, le tuyau devrait être soumis. Et comme d'habitude, peut-être id. Nous allons le faire ajouter et ensuite déclarer la fin BD et l'avertissement. Comme d'habitude et PGY2. Supprimons cela et à l'intérieur de ce bouton, nous allons avoir edit. Donc, c'est un fondamentalement, nous avons l'édition et soumettre. Et bien sûr, la modification n'est pas désactivée, mais cependant, le bouton Soumettre est désactivé parce que nous n'avons rien changé à soumettre. Et c'est à quoi il ressemble que l'image, et maintenant nous devons ajouter les informations ici. Alors allons de l'avant et commençons avec eux. Nous avons encore, nous avons déjà créé la grande colonne trois. Donc, ce que nous allons faire est de créer la colonne grand 9 à vendre avoir neuf. Et dans ce cas, un sel avec le flux. Ensuite, on a le sexe de colonne. Et bien sûr, nous allons avoir l'étiquette pour le nom, peut-être le nom du produit. Et puis suivi par la division qui est groupe d'entrée et MV3. Et puis bien sûr, l'entrée réelle du texte de type. Bien sûr, le nom doit être nommé et le doit être désactivé au début. Et bien sûr, la classe devrait être formée, contrôlée. Puis suivi de l'ID du semestre suivant. Et c'est l'idée que nous pouvons utiliser JavaScript. Et c'est, c'est essentiellement aller de l'avant et bonne chance. Comme vous pouvez le voir, nous avons le nom du produit et il est désactivé pour l'instant. Donc c'est tout pour le nom du produit. Allons-y et copions-le plusieurs fois. Ou les autres informations. Donc produit, peut-être l'image. Et puis nous avons la catégorie de produits. Et puis bien sûr, nous avons la marque du produit. Et copions-le encore une fois. Donc, ici, nous avons le produit, peut-être la quantité. Et maintenant, si tu retournes et que tu touches rafraichir, tu verras quelque chose comme ça. Retirons cette quantité de produit d'ici et placez-la ici. Donc, nous allons supprimer ça. Et nous savons dans une nouvelle route est de créer une nouvelle couleur. Et à l'intérieur, nous allons avoir la quantité de produit. Et peut-être que nous avons ajouté le nom de l'image. Peut-être ajoutons le prix et la taille. Donc, nous allons baser le prix du produit et la taille du produit. Et je pense que ce sont toutes les informations dont nous avons besoin. On en a quatre par quatre. Oh, ok, alors on a oublié la description. Donc, il pense à enlever cette base juste ici. Et puis, bien sûr, ajoutez la description du produit ici. Alors, c'est ça. Si je retourne en arrière et que je clique sur rafraichir, on peut avoir quelque chose qui ressemble à ça. Et c'est essentiellement pour les articles, nous allons avoir plusieurs éléments qui ressemblent à, qui, ressemble à ceci. Et ce que nous allons faire est d'ajouter des valeurs. Par exemple, nous avons le nom du produit à l'intérieur de ce, il y a la valeur, qui est peut-être Johnson, peut-être la description du produit qui ont une valeur profonde de lorem, ipsum, puis la catégorie de produit peut être shampooing. Shampooing de valeur, produit, marque, valeur, Johnson. Et bien sûr, produit par quantité que nous avons peut-être 20. Le prix du produit sera peut-être 15$, et la taille du produit sera de 200 millilitre l'image. Donc, la valeur devrait être la dimension de dommages 1 à GBG. Et maintenant, si je vais revenir en arrière et me rafraîchir, je vais avoir toutes les valeurs ici. Cependant, nous devons toujours créer le bouton Modifier. Donc, partout où nous appuyons sur ajouté, tous ces éléments, l' une des entrées devrait se tourner vers ne pas être désactivé et ensuite nous pouvons les changer. Et chaque fois que nous appuyons sur soumettre, tout cela devrait changer dans notre base de données. Toutefois, cette tâche doit être une sortie en arrière et, et tâches de base de données. Et pour l'instant, nous devons toujours les rendre non désactivés chaque fois que nous passons sur ce bouton d'édition. Donc, avec cela, allons de l'avant et créons un descripteur que nous allons utiliser. Allons donc jusqu'à ici. Et après le formulaire, nous allons avoir le script, qui sera peut-être le type. Donc, ici, ajoutons le type qui est le texte JavaScript. Et commençons par créer le document et prêt à, prêt dans cette fonction, qui est l'autre cas. Nous avons donc l'édition, qui est l'ID de notre bouton d'édition. Et bien sûr sur clink, va devoir ouvrir cette nouvelle fonction. Qui va changer ou supprimer l'attribut de cette activé de toutes les informations que nous avons. Mais nous avons oublié d'ajouter cette classe ici. Alors je pensais l'ajouter ici. Ajoutons pour toutes les informations à la fois. Allons maintenant le contrôle étranger et ouvrez-le et ajoutez la lettre F. Et c'est la classe que nous allons utiliser. Donc, ici, nous allons avoir la classe F, et nous allons supprimer cet attribut de désactivé de cette classe. Donc, c'est fondamentalement pour celui-ci et bien sûr pour la classe ou l'ID soumettre. Si nous cliquons sur Soumettre, il devrait les désactiver et ajouter réellement l'attribut disabled. Allons-y et faisons-le maintenant, et je l'expliquerai une fois que je l'aurai fait. Alors soumettez et bien sûr DoubleClick. Nous avons la fonction et ensuite nous devons aussi pointer, ou c'est l'ID. Donc prochain sommet et cet attribut, nous allons ajouter désactivé. Cet Abel. Et cela devrait être désactivé. Donc ce n'est pas fondamentalement pour celui-là. Et bien sûr, si nous revenons en arrière et actualisons, si j'appuie sur cette édition et ceux-ci sont maintenant ouverts. Cependant, chaque fois que nous appuyons sur submit, nous devrions pouvoir appuyer sur submit. Retour ici, nous remarquons que nous n'avons pas ajouté la classe F. Maintenant, revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, si je clique sur éditer, j'ai toutes les informations que je peux éditer. Et une fois que je le change, disons Johnson shampooing bébé et cliquez sur soumettre. Nous pouvons voir que nous l'avons changé. Cependant, pour l'instant, puisque nous utilisons, nous n'utilisons pas back-end. Il ne changera pas une fois la, une fois la page actualisée. Donc c'est ça fondamentalement pour celui-là. Et nous utiliserons cet article par Dieu pour plusieurs articles, en fait pour tous nos articles une fois que nous aurons terminé notre site Web. Alors maintenant, allons de l'avant et placez-les dans l'élément, que les éléments EJS, mais EJS. Maintenant, retournons à la maison. Retourne à notre formulaire. Allons le chercher. Et bien sûr, nous allons avoir ce script. Donc, copions tout ce basique ici, puis supprimé d'ici. Et bien sûr, nous allons devoir ajouter l'en-tête juste ici. Donc ici, nous avons notre en-tête et maintenant nos articles sont DJ comme fichier est prêt. Donc, c'est, c'est en fait pour l'article, donc EJS. Dans la vidéo suivante, nous allons devoir créer la méthode d'inscription. Et c'est en fait la dernière chose que nous allons créer. Et bien sûr, nous ne savons pas, je dois oublier notre projet qui sera présenté après la valeur d'inscription. Donc avec cela étant dit, c'est la fin de cette vidéo. Rendez-vous à la prochaine. 18. Inscription: Bonjour et bienvenue. Dans cette vidéo, nous allons créer la page d'inscription. Alors allons de l'avant et commençons avec ça juste ici. La première chose que nous allons créer est la section. Et dans ce cas, je vais devoir ajouter quelques classes. Donc, si le premier est le contact juste pour plus tard et un peu de rembourrage. Et puis, bien sûr, le liquide contenant, suivi de la première rubrique, qui est le nom réel de notre site Web. Donc, je vais ajouter quelques classes telles que le texte sombre, peut-être du texte, majuscules et de la marge, les quatre derniers et le centre du texte. Donc, ce sont nos classes et peut-être ajouter site de commerce électronique. Donc c'est tout pour le titre. Maintenant, nous allons commencer par notre première rangée. Et je vais ajouter le centre justify-content comme d'habitude, et peut-être commencer par créer la première colonne. Et dans ce cas, il faudra la colonne grande vers l'avant et la colonne moyenne 54 petite. Je vais devoir en faire six. Peut-être. Un peu de rembourrage sur le fond pour la route, le sol est sombre. Et je vais ajouter la boîte et c'est pour le CSS plus tard. Donc c'est tout pour notre colonne. Je vais devoir ajouter un formulaire. Et puis à l'intérieur de ce formulaire, je vais créer une ligne avec une marge supérieure de trois. Maintenant, revenons en arrière et voyons ce que vous avez créé pour le moment, si nous actualisons notre page, nous allons avoir une petite boîte avec le titre du site e-commerce et décider de cette case. Nous allons devoir ajouter un, B, le prénom, le nom, l'adresse e-mail, le mot de passe et bien sûr, le bouton d'inscription. Donc, c'est tout fondamentalement, Allons-y et commençons par l'adresse e-mail. Donc, pour le milieu de colonne de sexe et un peu de rembourrage sur l'axe des y, nous allons devoir créer l'étiquette pour le prénom. Et puis la classe sera étiquetée prénom. Et puis nous devons créer l'entrée de texte de type, suivie de certaines classes telles que le contrôle étranger. Nous avons aussi MY pour être deux et c'est l'entrée pour CSS et peut-être Nom, FirstName. Alors revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, nous avons eu ce prénom avec ça de ce côté, ou juste après le prénom. Cependant, nous avons besoin de notre prénom pour avoir la diapositive de texte. Donc, ce que nous allons faire est d'utiliser tout cela dans le CSS. Donc, pour l'instant, allons de l'avant et copions ceci et peut-être quelques fois de plus. Prénom, peut-être un autre peut-être pour le nom de famille. Ouais, je pense que ça aurait du sens. Et le nom de famille. Et ici, nous allons devoir ajouter L name au lieu de pathname. Et comme vous pouvez le voir, nous avons Prénom, Nom. Supprimons juste ce nom ici. Et je pense que nous sommes bons pour l'instant. Créons une autre ligne. Et dans ce cas, cette ligne aidera une division avec un groupe de formulaires et un rembourrage comme d'habitude. Dans ce cas, je vais devoir ajouter une étiquette pour l'e-mail. Donc, c'est pour le courrier électronique et la classe sera étiquetée. Et cela aura l'étiquette comme adresse e-mail. Et nous avons l'e-mail de type, l'entrée de type e-mail, la classe, serait-il pour le contrôle comme d'habitude ? Et puis nous avons une certaine marge sur y2, b2, et l'entrée et le nom, peut-être le nom d'utilisateur. Et c'est essentiellement pour l'adresse e-mail réelle. Et copions ceci, collez-le une fois de plus pour le mot de passe. Donc ici, au lieu de l'adresse e-mail, je vais devoir ajouter un mot de passe. Et bien sûr, le type devrait être ici, mot de passe. Et enfin, le nom. Ce seraient les mêmes. Donc, c'est fondamentalement allons-y et rafraîchissons-le. Et comme nous pouvons le voir, nous avons obtenu notre prénom, nom de famille, e-mail, adresse et mot de passe. Cependant, nous allons simplement les ajuster en utilisant la lumière de texte ici. Si léger, revenons en arrière et rafraîchissons. Et comme nous pouvons le voir, nous avons peut-être notre page d'inscription. Et la dernière chose que nous allons créer est le bouton réel pour vous inscrire. Alors revenons en arrière. Après avoir créé cette division, je vais devoir créer une autre division avec certaines classes telles que la grille. Et puis l'écart devrait être Y2. Et maintenant, on est bons. Nous pouvons créer notre bouton réel de type soumettre. Ensuite, nous avons les lunettes, nous avons DBT, et peut-être que nous allons créer B2. Faisons en caractères gras, majuscules. Et puis nous avons le bouton soumettre, et c'est pour le CSS. Ensuite, nous avons la lumière du texte. Et bien sûr, nous allons devoir ajouter. Donc, c'est tout fondamentalement, si je vais de l'avant et le rafraîchir, alors j'ai quelque chose qui ressemble à ceci. Donc, je pensais pour l'instant que nous n'allons pas utiliser CSS. Faisons peut-être que ça soit jaune. Donc btn, avertissement btn. Et je pense qu'on est bons. Retournons et vérifions. Si nous le rafraîchissons, nous avons ce bouton pour vous inscrire. Ou peut-être que vous pouvez le rendre btn danger. Et revenons en arrière, rafraîchissez-vous. Et oui, je pense que ça a l'air mieux. Donc c'est tout pour la page d'inscription. C' est tout ce qui se compose. On a juste celle-là et le pied de page. Alors revenons en arrière et ajoutons tous ces éléments dans notre inscription à ce fichier EJS. Donc, c'est la section. Alors je dois ajouter ceci. Et créons un nouveau fichier. Et ce sera signé que le JS et demi tout cela. Et maintenant, nous en avons fini avec ce projet. Nous avons encore un pas. Et ce sera le projet réel que vous allez à Create. Et nous le regarderons dans la prochaine vidéo. Alors, à vous voir. 19. PROJET: Bonjour et félicitations si vous avez fait jusqu'ici. Dans cette vidéo, nous allons discuter de notre projet. Donc, le projet consiste à créer la page de commande. Quand nous avons créé l'Euler ou la plage d'administration, nous avions quelque chose qui ressemble à ceci. Nous avons le prix total des commandes, titre. Il s'agit du nom de l'utilisateur. Ensuite, nous avons l'emplacement, la date ou un numéro. Et vous avez aussi quelque chose où nous pouvons cliquer dessus pour voir l'Euler complet. Dans ce cas, chaque fois que nous appuyons sur cet ordre d'Hippel, ça devrait nous conduire à celui-ci. Et comme vous pouvez le voir dans cette page, nous avons l'ordre complet d'un utilisateur spécifique. Dans ce cas, le nom de l'utilisateur est comment s'agit-il de la date d'emplacement d'un nombre ? Et ici, nous avons les articles. Et il se trouve que je vous ai commandé juste des articles de bébé Johnson et leur prix est de 12. Et comme on peut le voir, 3 fois 12, on en a 36 ici. Donc c'est l'idée. L' idée de ce projet est de simplement créer. Ceci peut être un guide pour afficher les informations de l'utilisateur et l'ordre de l'utilisateur également. Et vous pouvez également ajouter cette citation que nous avons créée dans la page d'administration juste ici juste pour le visualiser aussi. Et bien sûr, si j'appuie dessus, cela devrait automatiquement me conduire à l'utilisateur suivant, qui est le numéro de commande 2. Cependant, tout cela, nous allons les faire dans la prochaine classe quand, où nous allons travailler avec le backend de ce site Web. Cela étant dit, c'est la fin de notre projet pour l'instant. J' espère que vous en apprécierez et bonne chance en créant cette partie. Donc, si vous avez des questions, n'hésitez pas à me poser dans la partie discussion et n' oubliez pas d'ajouter vos projets dans la section projet pour vous donner mes commentaires. J' espère que vous avez apprécié ce projet et bonne chance.