Développement Web Full Stack pour les débutants - Partie 4 : projet final, Node, Express et MongoDB

1. Bienvenue dans ce cours !: Bienvenue sur Full Stack Web Development pour les débutants. Ce cours est conçu pour vous faire passer d'un débutant à un développeur web capable de construire non seulement l'interface utilisateur front-end, mais aussi de concevoir et de construire le backend pour interagir aussi. Qui suis-je ? Je m'appelle Chris et je serai votre instructeur tout au long de ce cours. Je suis développeur web et aussi producteur de nombreux tutoriels, enseignant à des milliers d'étudiants les compétences dont ils ont besoin pour construire des sites Web et des applications. C' est la quatrième partie de la série complète, où nous continuerons à construire sur tout les trois premières parties de ce cours. Ce cours est tout sur le passage au backend des sites Web, où vous apprendrez beaucoup de choses étonnantes. Nous commençons par le nœud et le cadre express, où nous installons un carnet de voyage dans l'application intitulée Let's Travel. Nous construirons ce projet tout au long du cours. Tout ce que vous apprendrez sera immédiatement mis en pratique. Node et Express sont très populaires et l'apprentissage de ces technologies vous laissera en forte demande. Après cela, nous passons au routage et au modèle, qui nous permettra de basculer d'une page à l'autre et de naviguer dans notre application, plus de configurer des modèles pour afficher non seulement le contenu que nous avons créé, mais aussi de rendre les données de notre base de données aussi. Les bases de données sont ce que la prochaine section est tout, où nous allons regarder MongoDB et Mongoose. Vous apprendrez beaucoup, y compris la modélisation de nos données, la création, la lecture, mise à jour et la suppression des actions, ainsi que le filtrage et l'agrégation pour récupérer les données exactes dont nous avons besoin. Après cela, nous continuons avec le style et l'ajout de nombreuses fonctionnalités intéressantes à notre projet, ainsi que l'apprentissage de nombreuses techniques JavaScript de nouvelle génération à partir d'ES6 et au-delà. Vous apprendrez également comment autoriser les utilisateurs à télécharger des images et comment nous pouvons enregistrer et récupérer ces images à partir de notre stockage Cloud. Bien sûr, la plupart des applications de nos jours ont besoin de gérer les comptes d'utilisateurs et l'authentification. C' est quelque chose que nous apprendrons tout en appliquant tous ces éléments à notre projet. Vous apprendrez à créer un compte d'utilisateur, connecter et à sortir, valider les informations d'un nouvel utilisateur, à l'authentification, à stocker les mots de passe en toute sécurité et bien plus encore. Nous terminons notre application en permettant l'utilisateur de passer des commandes puis de les enregistrer dans la base de données. Ensuite, nous créons une zone de compte où l'utilisateur peut se connecter et voir les réservations qu'il a effectuées. Aussi les utilisateurs admin peuvent aller dans la section admin pour voir les listes de toutes les commandes qui ont été passées. Ce cours se termine par des conseils de sécurité et des recommandations pour préparer votre application pour la production. Nous poussons ensuite notre application sur un serveur en direct pour que le reste du monde puisse voir, tout en expliquant les choses d'une manière simple et simple à comprendre, que même les débutants comprendront, de renforcer les choses avec un amusant mais des projets stimulants que nous allons. J' espère que vous êtes vraiment excité d'en apprendre davantage sur toutes ces choses, dans la dernière partie de ce cours. 2. Ce que nous allons construire: Dans cette section et pour pratiquement le reste de ce cours, nous allons construire l'application de voyage de niche, lorsque l' utilisateur peut se connecter et faire des réservations pour des hôtels dans différents pays. Ce sera la page d'accueil, qui sera le point de départ où un utilisateur pourra rechercher des hôtels dans différents pays. Nous pouvons également ajouter le nombre de nuits et aussi le nombre de clients, ainsi que certains filtres tels que l'évaluation des étoiles, et nous pouvons également résoudre le prix de l'hôtel sage de bas à haut ou haut à bas. Plus bas, nous extrayons également quelques hôtels aléatoires de la base de données et les besoins restreints doivent être les neuf premiers. L' utilisateur peut cliquer sur l'un de ces hôtels et obtenir plus d'informations. Il aura une vue dégagée sur l'hôtel. Nous obtenons également une description et puis en bas, nous avons la chance de rechercher ensuite cet hôtel avec la disponibilité actuelle et aussi le prix actuel. Si nous revenons à la page d'accueil plus bas après les hôtels, nous avons également une liste de pays où nous pouvons filtrer les hôtels par les différents pays. Si nous cliquons sur chacun d'entre eux, nous pouvons alors voir chaque hôtel qui est disponible pour ce pays particulier. Avec ces filtres, nous pouvons également cliquer sur « Tous les pays », puis voir une liste de tous les pays disponibles pour lesquels nous avons des hôtels disponibles. Une fois que nous ajoutons de nouveaux hôtels en tant qu'Admin, ces pays sont automatiquement mis à jour sur le front-end. Donc, nous n'avons pas besoin de nous soucier d'ajouter tous ces éléments, chaque fois que nous ajoutons un nouveau pays, ainsi que ces pays. Si nous remontons aux hôtels, nous avons également un lien pour voir tous les hôtels disponibles. Si vous voulez faire défiler tous ceux que vous avez sur la base de données plutôt que de filtrer vers le bas par les pays en utilisant une recherche. L' application de service sera une application basée sur des nœuds utilisant le framework express que nous allons apprendre dans cette section et les sections suivantes deux. Seront également utiliser diverses technologies pour rejoindre ce projet, comme MongoDB pour stocker nos données. Nous utilisons Mongoose pour diverses choses telles que la structuration de nos modèles ou d'autres données. Avec tout cela, aura également la possibilité pour l'utilisateur d'aller de l'avant et de se connecter. Nous pouvons nous connecter avec un e-mail et un mot de passe. Alors écoutons maintenant. Seront également utiliser des messages de vidage, comme vous le voyez ici, pour donner à l'utilisateur des commentaires sur le moment où une connexion ou une déconnexion, ainsi que l'administrateur pour être en mesure de voir quand un hôtel a été ajouté avec succès à la base de données. Une fois que nous nous connectons, nous avons maintenant une section de compte sur laquelle nous pouvons cliquer. Nous pouvons également vérifier les réservations actuelles que chaque utilisateur a disponibles. Parallèlement à cela, si l'utilisateur est un administrateur, alors passons à ' » /admin ». Actuellement, le nom d'utilisateur et le mot de passe que j'ai entré est en panne en tant qu'administrateur. Donc, nous avons maintenant accès à cette section d'administration du site, qui va être le backend où peut avoir quelques privilèges d'administrateur, comme l'ajout de nouveaux hôtels à la base de données, ce que nous pouvons faire avec ce formulaire ici. L' administrateur peut également modifier les détails d' un hôtel ou les supprimer complètement de la base de données. Tout ce que nous devons faire, c'est ajouter l'ID de l'hôtel, ou nous pouvons chercher par le nom de l'hôtel, si nous ne sommes pas sûrs de l'identité. Retour à l'administrateur, nous pouvons également voir toutes les réservations disponibles qui sont placées par tous les utilisateurs. Une fois que nous sommes connectés en tant qu'utilisateur et effectuons une recherche, recherchons la Jamaïque, sept nuits, et nous pouvons ajouter une date, nombre d'invités, l'évaluation des étoiles, ainsi que les filtres de prix. Nous pouvons cliquer sur « Rechercher » et ensuite nous l'avons amené aux résultats de recherche. C' est donc l'hôtel qui correspond à nos filtres et nous avons également une section à droite qui calcule le total par personne et le coût total de la réservation. Nous pouvons ensuite continuer jusqu'à l'écran de confirmation qui fournit la description complète de l'hôtel ainsi que la possibilité de passer une commande. Une fois qu'il est placé sur et pris à nos comptes, puis nous pouvons voir en bas que notre commande a été ajoutée en bas avec une référence de commande unique. Si vous allez à l'administrateur, il devrait également être ajouté ici aussi parce que nous sommes connectés en tant qu'administrateur pour cet utilisateur actuel. Nous pouvons également aller à Voir les réservations, puis voir les réservations placées en bas aussi. Si nous devons aller de l'avant et nous déconnecter, puis essayer cette section d'administration. Nous pouvons voir que nous sommes redirigés vers la page d'accueil parce que cette route est protégée. Donc, pendant ce projet, nous allons apprendre une variété de choses. Comme je l'ai mentionné précédemment, nous allons utiliser le nœud pour le back-end, exprimer comme cadre pour construire ce projet, Mongoose et MongoDB pour nos données back-end, parcourir nos projets avec le MVC qui nous permettra d'ajouter une certaine structure à notre projet aussi. Avec cela va apprendre beaucoup plus, y compris l'authentification, comment garder les utilisateurs connectés à l'aide des sessions, ainsi que beaucoup plus, et nous allons tout savoir à ce sujet dans les prochaines sections. Nous allons donc lancer ce projet dans la prochaine vidéo, où nous allons jeter un coup d'oeil sur le nœud et le MPM avec l'installation sur notre système. 3. Le projet Sk encourage: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de cocher une autre conférence. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe. Vous pouvez même prendre du recul une fois que vous avez terminé le cours, revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare et je suis le seul à y jeter un coup d'œil, mais il inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 4. Qu'est-ce que Node & NPM ?: Bienvenue de retour. Si nous nous dirigeons vers nodejs.org, c'est la page d'accueil officielle de Node.js, que nous allons utiliser pour construire ce projet final. Nous voyons en haut il y a des informations sur ce que Node.js est. Fondamentalement, Node.js est un Runtime JavaScript, construit sur le moteur V8 de Chrome. Qu' est-ce que cela signifie exactement ? Eh bien, V8 est le moteur qui fait travailler JavaScript à l'intérieur du navigateur Web Chrome de Google. Lorsque nous avons utilisé JavaScript jusqu'à présent sur ce cours, il est en cours d'exécution dans le navigateur. Chrome utilise son propre moteur V8, et aussi d'autres navigateurs ont la propre version aussi. Historiquement, à l'intérieur du navigateur est l'endroit où JavaScript est exécuté, du côté client. Cependant, depuis que Node.js a été développé, nous pouvons également écrire du code JavaScript, qui fonctionne aussi sur le serveur. L' une des choses clés à propos de V8, est qu'il peut également fonctionner n'importe où. Pas seulement à l'intérieur de Chrome, rendant disponible pour fonctionner dans d'autres applications aussi, qui est écrit dans le langage de programmation C ++. Avec cela, Node.js a été créé en utilisant le moteur V8, ce qui permettra à notre code JavaScript d'être exécuté sur le serveur signe deux. C' était énorme pour beaucoup de développeurs qui connaissaient déjà JavaScript, car ils peuvent désormais écrire le front-end et aussi le back-end des applications utilisant le même langage. Avant cela, nous devrions apprendre un autre langage côté serveur, comme PHP. Pourquoi voulons-nous exécuter notre code sur le serveur ? C' est parce qu'il nous permet de créer des pages web dynamiques. Cela signifie que la page Web est créée en premier sur le serveur, et peut également inclure toutes les données dynamiques, extraites de notre base de données ou d'autres sources. En outre, il peut vérifier si l'utilisateur est connecté, par exemple, avant de renvoyer toute information sensible. Si vous ne l'avez pas déjà fait, assurez-vous que nous cliquons sur le bouton de téléchargement pour la version actuelle de Node et continuons et suivez les instructions d'installation. Ceci sur notre système nous permettra d'exécuter Node localement et créer un serveur web sur notre propre ordinateur pour le développement. Lorsque nous téléchargeons Node.js, il inclura également npm, qui est le gestionnaire de paquets du nœud. C' est la collection de milliers de paquets que nous pouvons utiliser avec Node pour construire presque n'importe quel type de projet que nous voulons. Aussi sur [inaudible] 2, si nous construisons quelque chose nous-mêmes, que nous pensons être utile pour quelqu'un d'autre. Nous pouvons ensuite le regrouper dans ce qu'on appelle un module et aussi publier notre propre module deux sur npm. Au fur et à mesure de ce projet, nous allons utiliser des modules npm pour ajouter des fonctionnalités. Tels qu'un module appelé passeport. Nous recherchons passeport, c'est un module Node que nous allons utiliser pour fournir l'authentification de l'utilisateur, afin que les utilisateurs puissent se connecter avec un e-mail et un mot de passe. Nous utiliserons également beaucoup plus de paquets npm aussi, à titre de progrès, pour permettre le chiffrement de nos mots de passe, permettre le téléchargement de fichiers, pour la sécurité et bien d'autres, qui seront bientôt découvrables. Ceci est Node et npm et un aperçu de ce qu'ils peuvent faire. Nous en découvrons plus à leur sujet au fur et à mesure de ce projet. Si le téléchargement de votre Node est terminé, continuez et cliquez sur les étapes d'installation à installer sur votre ordinateur. Alors je te verrai dans la prochaine vidéo. 5. Serveur Web statique v dynamique: Vous pensez peut-être, pourquoi utilisons-nous un serveur web pour construire des projets ? Ne sommes-nous pas bien allés si loin sans un ? Eh bien, c'est un juste points parmi lesquels je vais essayer d'expliquer dans cette vidéo. une manière générale, nous pouvons classer nos sites Web en statiques ou dynamiques. Sur l'écran ici, nous avons notre jeu de correspondance de forme ouvert dans le index.html. Dans tous nos projets précédents jusqu'à présent, si nous ouvrons le index.html et nous ouvrons également à l'intérieur du navigateur, nous avons notre contenu HTML. Ce code HTML est tout statique car le contenu ne change pas. Oui, il se peut que certaines formes apparaissent lorsque le jeu commence. Tout cela est fait dans le navigateur en utilisant JavaScript. À l'intérieur du navigateur, si nous allons à clic droit et afficher la source de la page, cela s'ouvrira dans un nouvel onglet. C' est exactement le même code affiché ici que nous voyons dans Visual Studio dans notre HTML. Même si nous avons téléchargé ce projet sur un serveur Web et l'avons mis en ligne sur le Web, tout ce contenu est toujours statique et nous obtiendrons les mêmes résultats du serveur. Fondamentalement dans un projet statique comme celui-ci, le serveur renvoie ce que nous lui avons donné, comme la page d'index. pages web dynamiques sur t [inaudible] e rondo peuvent revenir du serveur bien différent du code que nous pouvons voir dans notre éditeur de texte. Si nous passons à la version finale de nos projets troublés et aussi ouvrir le navigateur. Alors ne vous inquiétez pas de [inaudible], quoi tout cela ressemble. Nous allons en apprendre davantage sur tout ce code au cours des prochaines sections. Je vais passer à l'un des modèles d'hôtel, qui est à l'intérieur des vues, et puis si nous allons à hotel.pug, fermons le. Encore une fois, ne vous inquiétez pas de tout ce code compliqué. Mais pour l'instant, je veux que tu te concentres sur une chose. C' est le nom de l'hôtel, qui se trouve dans une rubrique de niveau 3. La syntaxe peut sembler un peu déroutante à cause de ce h3 plus court. Mais ce n'est qu'un des éléments h3 que nous avons déjà appris. Après cela est hotel.hotel_name. Si nous passons sur le navigateur, nous pouvons voir le nom réel de l'hôtel, comme Hôtel 11 ou Hôtel 9, plutôt que ce nom hotel.hotel, que nous verrons dans Visual Studio. Si nous allons au navigateur, nous pouvons voir le nom réel de l'hôtel est également disponible dans la source. Si nous allons à droite, cliquez sur Inspecter, puis cliquez sur le nom de notre hôtel, allez sur les éléments et frappé cela vers le bas. Ici, nous pouvons voir notre HTML sorti qui est retourné du serveur. Nous avons notre h3, que nous pouvons également voir ici. Les deux sont des données dynamiques a maintenant été remplacé par le nom de l'hôtel. Ici, nous voyons que le serveur web cette fois est pris notre modèle d'hôtel de Visual Studio et rempli les données manquantes avec des données de notre base de données avant de revenir vers dans le navigateur. C' est ce que sont les pages web dynamiques. Sites statiques, tout comme celui que nous avons vu auparavant avec le matcher Shape, un parfait pour les applications simples. Même ceux qui utilisent encore des données API, comme notre outil de recherche de chansons. Mais la science dynamique est parfaite lorsque nous voulons changer les données avant de les renvoyer au navigateur. Ou pour les tâches liées à la sécurité, telles que la gestion des informations sensibles de l'utilisateur. Comme nous ne voulons pas qu'il soit géré à l'intérieur du navigateur. J'espère que ça a du sens. Ensuite, nous allons nous lancer dans notre projet en utilisant le framework Express. 6. Express.js et générateur express: Pour ce projet, nous allons profiter d' un framework léger pour Node appelé Express. Express est un framework très populaire dans la communauté Node, et c'est la plate-forme idéale pour commencer notre projet. Plus dans la page d'accueil qui est expressjs.com, nous pouvons voir cette page d'accueil, comme il est dit ici, est un framework rapide, et sans opinion, et minimaliste pour Node.js. Cela signifie qu'il ne suppose pas comment sera notre projet. Nous sommes libres de profiter fondamentalement de ce qu'Express fournit sans avoir à respecter beaucoup de règles strictes, que beaucoup d'autres cadres nous imposent. Il est minimaliste, ce qui signifie qu'il fournit les fonctionnalités de base dont nous aurons presque certainement besoin, comme un serveur Web, fin de route pour basculer entre les pages, gestion des erreurs et le modèle, booster toute fonctionnalité supplémentaire est à booster les annonces en utilisant le gestionnaire de paquets de nœuds, que nous avons examiné auparavant. Express fournit un serveur web que nous pouvons utiliser pour servir nos pages, et cela les sert également à tous les navigateurs avec le contenu dynamique comme nous l'avons regardé dans la dernière vidéo. Même installé dans Express 2, se fait comme un module npm. Comme nous le voyons ici, nous avons le code de terminal pour définir le serveur comme un module de nœud, sorte que nous pouvons configurer les choses manuellement, ou Express fournit également un générateur. On a tout ce qu'il faut pour y aller. Si nous allons dans le menu et Mise en route, survolez cela et puis nous pouvons cliquer sur le générateur Express. Nous devons installer ceci via npm, donc je vais me diriger vers le terminal pour l'installer. Les utilisateurs de Windows peuvent ouvrir le programme PowerShell pour la scène, ou tout autre programme que vous préférez. Je vais ouvrir iTerm et nous rendre un peu plus gros. Avant de continuer, nous devons nous assurer que Node et npm sont correctement installés. Nous pouvons le faire en tapant à l'intérieur du terminal ou à l'intérieur d'un PowerShell. Nous pouvons vérifier que Node est correctement installé en tapant noeud -v. Si nous voyons un numéro de version ici, cela signifie que le nœud est correctement installé. Nous pouvons faire la même chose avec npm -v. Encore une fois, si nous avons un numéro de version apparaissant, cela signifie que noeud et npm sont correctement installés. Si vous ne voyez pas le numéro de version ou si vous rencontrez une erreur, assurez-vous d'aller de l'avant et de réinstaller Node, et assurez-vous qu'il est en place avant de passer à l'étape. Nous pouvons ensuite aller de l'avant et installer le générateur Express en utilisant npm. Donc, tapez npm installer exepress-generator, puis tiret g à la fin. Les utilisateurs Mac peuvent également avoir besoin d'ajouter le mot-clé sudo avant si vous rencontrez une erreur. Juste avant cela, nous devons ajouter sudo, puis « Entrée », et cela nous demandera ensuite le mot de passe, puis appuyez sur « Entrée ». Maintenant, nous allons aller de l'avant et télécharger le générateur Express à partir de npm. Le drapeau de tiret g que nous ajoutons à la fin d'ici, installera ce paquet globalement. Cela signifie qu'il peut être utilisé dans n'importe quel projet, pas seulement celui que nous créons. Maintenant, nous devons naviguer vers l'endroit où nous voulons créer nos projets. Je vais ajouter le mien au bureau. À l'heure actuelle, je suis dans mon répertoire utilisateur actuel, donc je vais utiliser cd pour changer le répertoire vers le Bureau. Appuyez sur « Entrée » et maintenant nous pouvons voir que nous sommes à l'intérieur du bureau. Bien sûr, vous pouvez le changer pour être n'importe quel endroit que vous préférez, je garde juste le mien sur le bureau pour faciliter l'accès. Maintenant, pour créer un nouveau projet dans ce répertoire, nous pouvons exécuter cette commande. Donc, exprimez suivi par le nom de notre projet, je vais appeler mine lets-travel, puis tableau de bord vue est égal à carlin, appuyez sur « Entrée » et laissez-nous aller de l'avant et créer nos projets, qui est également en utilisant le carlin langage de modélisation, que nous couvrirons bientôt. Si nous faisons défiler vers le haut à l'intérieur du terminal, nous pouvons voir une liste de fichiers et de dossiers qui ont été créés pour nous, ainsi que quelques instructions sur la façon de commencer. Je vais utiliser le terminal intégré de Visual Studio à partir de maintenant. Je vous recommande également de le faire aussi tout au long de ce cours. Si vous préférez, vous pouvez continuer dans un terminal séparé, mais vous devrez d'abord aller de l'avant et changer dans le répertoire courant du projet. Ensuite, vous devrez exécuter npm install pour obtenir toutes les dépendances, puis démarrer l'application avec ces commandes en bas. Si vous suivez dans Visual Studio Code, nous pouvons maintenant fermer le terminal, le navigateur, ouvrir Visual Studio Code, puis faire glisser dans notre dossier de projet. Nous pouvons ouvrir Visual Studio en tant que terminal intégré, en accédant à View dans un sous-menu, puis en descendant à Integrated Terminal. Cela ouvrira ensuite le terminal vers le bas, listé sont nos commandes de terminal. Cela a également l'avantage d'avoir notre répertoire automatiquement configuré dans le dossier de projet de colonne sur le bureau. Nous n'avons pas besoin de naviguer jusqu'à l'endroit où se trouve notre dossier. Nous allons bientôt jeter un oeil sur tous ces fichiers et dossiers, mais pour l'instant, si nous ouvrons le package.json et fermons la barre latérale, ici nous voyons quelques dépendances, qui à l'intérieur de ce juste ici, qui sont nécessaires pour ce projet. Ces dépendances sont des modules de noeud que vous pouvez installer en utilisant npm install. bas dans le terminal, exécutez npm install, appuyez sur « Entrée », puis donnez, disons quelques instants à parcourir et en tirant tous les paquets dont nous avons besoin à partir de npm. npm install va saisir tout ce dont nous avons besoin dans ce package.json, puis les placer à l'intérieur de nos projets dans un dossier de modules de noeud. En outre, lorsque nous ajoutons plus de modules plus tard, nous allons encore utiliser cette commande npm install, mais suivie du nom du module que nous voulons installer. Super. Une fois cela fait, cela devrait maintenant être un dossier node_modules. Si nous ouvrons la barre latérale, si nous l' ouvrons, nous avons juste une liste déroulante, nous voyons tout ce que nous utilisons pour ce projet. Il aura des choses telles qu'un module de débogage. Nous avons aussi express qui est juste ici, et aussi carlin, notre moteur de modélisation entre autres que nous allons également utiliser. Maintenant, tout ce qu'il reste à faire, c'est de démarrer notre serveur Web et de l'ouvrir dans le navigateur. Toujours à l'intérieur de ce fichier package.json, en haut, nous avons quelque chose appelé start à l'intérieur de nos scripts. Nous pouvons utiliser le script de démarrage à l'intérieur du terminal, puis aller de l'avant et kickstart notre application afin que nous puissions le voir dans le navigateur. À l'intérieur du terminal, lançons npm start, appuyez sur « Entrée », puis ouvrez le navigateur Web, que vous voulez utiliser. Naviguez vers localhost, deux-points 3000, appuyez sur « Entrée » et maintenant nous pouvons voir notre Express de base est maintenant en cours d'exécution. Mais comment pouvons-nous savoir que c'est le port 3000 sur lequel le nœud fonctionne ? Eh bien, si nous passons au package.json, la commande start a un chemin de fichier de bin, barre oblique, www. Si nous ouvrons ce fichier à l'intérieur de la même barre, à l'intérieur de ce fichier se trouve une variable qui est définie sur le port 3000. Ici, nous avons une variable appelée port, qui est définie pour être le port 3000. En outre, si vous utilisez le port 3000 pour autre chose, vous pouvez également changer ce nombre pour être quelque chose de différent, tel que 3001. Sa structure et sa configuration de fichiers sont un peu différentes de ce que nous avons utilisé jusqu'à présent. Dans la prochaine vidéo, nous allons jeter un coup d'œil sur ce que nous avons ici dans notre projet Express Generator. 7. Structure de projet express: La structure du projet que nous avons ici peut sembler un peu intimidante si vous êtes habitué à utiliser des sites web statiques. Cependant, ce n'est pas trop mal une fois que vous vous y habituez. Si nous ouvrons notre barre latérale sur le côté gauche, je le rendrai un peu plus grand. Du haut, nous avons le dossier bin, qui est utilisé pour tous les scripts de démarrage. Nous avons abordé cela dans la dernière vidéo où nous avons vu ces scripts de démarrage à l'intérieur du fichier package.json, qui pointe ensuite vers ce fichier www, qui contient nos scripts de démarrage. Ce fichier ici définit le numéro de port que nous voulons utiliser, et va de l'avant et met en place un serveur HTTP pour ensuite servir nos projets. Sous cela, nous avons notre dossier de modules de noeud, juste ici. Il contient tous les paquets ou modules dont notre application a besoin. Chaque fois que nous installons un module à partir de MPM, il apparaîtra alors à l'intérieur d'ici et sera également répertorié dans le fichier package.json comme outil de dépendance. Puisque ces modules sont également répertoriés dans le fichier package.json, nous pouvons même supprimer ou supprimer ce dossier complet des modules de noeud, et une commande d'installation MPM va alors à nouveau, ajouter à notre projet. Ceci est utile pour des choses telles que le stockage de notre projet sur GitHub, car le dossier des modules de noeud peut souvent devenir vraiment grand et nous ne voulons pas d'un énorme dossier comme celui-ci sauvegarde à GitHub ou ailleurs si nous n'en avons pas besoin. Téléchargez ceci, si vous fermez des modules de noeud, nous avons également un dossier public. Le dossier public contient nos fichiers statiques, tels que toutes les images, toutes les feuilles de style, ainsi que tous les fichiers JavaScript ou bibliothèques pour le front end. Ici, nous pouvons ajouter nos images de projet, des bibliothèques tierces personnalisées ou des frameworks tels que Bootstrap CSS et JavaScript fichiers. Ce dossier n'est pas destiné aux fichiers JavaScript ou au serveur, tels que nos modèles de page ou tout ce qui contient des informations sensibles, comme un fichier de configuration E. Sous le dossier public, nous avons ensuite notre dossier routes. Chaque dossier contiendra un ou plusieurs fichiers JavaScript, qui gèrent ce qu'il faut faire lorsqu'un utilisateur visite une URL donnée. Par exemple, si nous ouvrons ce index.js, et que je ferme la barre latérale, vous verrez le router.get, qui gère la page d'accueil. À l'intérieur d'un router.get, nous voyons d'abord la route de barre oblique avant, donc lorsque l'utilisateur visite le routeur domestique ou barre oblique avant, ceux-ci enrages une fonction qui va de l'avant et rend les modèles d'index, que nous voulons que vous utilisiez. Ensuite, après cela, nous avons un objet où nous allons passer le titre de la page simplement express, et plus tard, nous allons également passer différentes informations telles que des variables à notre modèle de page aussi. Cela passe au dossier des vues si nous ouvrons une barre latérale, puis ouvrons nos vues, qui est une vue que l'utilisateur voit. Il contient tous les modèles de page qui sont créés sur le serveur avant de nous renvoyer. Tous ces fichiers ont l'extension de fichier .pug. C' est parce que nous utilisons le moteur de modélisation carlin, qui était également connu sous le nom de J2. Vous pouvez rencontrer quelques références j dans la documentation ou une recherche sur le web. Vous pouvez utiliser d'autres langages de modélisation si vous préférez, tels que EJS. Mais ce sera à vous de mettre en œuvre si vous voulez apporter ce changement. Si nous allons ouvrir le modèle index.pug. C' est un modèle appelé à partir de la page du routeur que nous avons vu auparavant, donc c'est l'index qui s'est rendu lorsqu'un utilisateur visite son itinéraire à domicile. Bloquer et étend, que nous voyons en haut du fichier, nous allons regarder cela bientôt. Mais c'est h1 et aussi p éléments sont ce que nous voyons lorsque nous visitons la page d'accueil. Nous avons le titre, puis le texte de bienvenue à, puis le titre. A l'intérieur de Chrome, si ouvrez cela, c'est le texte que nous voyons à l'intérieur d'ici. H1 est égal à titre, est le titre qui est transmis par le routeur. Encore une fois dans index.js, c'est le titre que nous voyons juste après que nous avons déclaré quel modèle nous voulons utiliser. Le texte d'express est ensuite transmis à notre index et c'est pourquoi nous voyons le texte à l'intérieur du navigateur. Ci-dessous, nous avons un p éléments avec un texte de bienvenue à et ce sera expresse. Nous pouvons également l'utiliser comme une variable à l'intérieur d'une chaîne. Nous allons couvrir tous ces modèles dans la syntaxe dans la section suivante. Vers le bas après les vues, nous avons le fichier app.js. Ce app.js est le point de départ de l'application et fondamentalement la page principale qui relie tout ensemble. Il charge tout ce dont nous avons besoin pour le projet et par défaut importer tous les paquets dont nous avons besoin Lope en haut du dossier des modules de noeud. Il importe également nos routes à partir de notre dossier routes, que nous pouvons voir ici, par ces chemins de fichiers, puis les stocke à l'intérieur d'une variable que nous voyons comme ci-dessous. Il va ensuite de l'avant et lance notre nouvelle instance d'application express et l'assigne à une variable appelée application. Après cela, nous avons défini le moteur de vue pug, qui est utilisé ici, qui déclare quel langage de modélisation nous voulons utiliser. Après cela, nous avons app.use sur diverses lignes. Ceci est utilisé pour monter n'importe quel middleware sur notre application. Nous regarderons un middleware plus en détail plus tard. Mais fondamentalement middleware est une série d' actions ou de fonctions que nous pouvons exécuter notre code à travers. Par exemple, lorsqu'un utilisateur se connecte, nous pourrions ajouter du middleware pour valider informations de l'utilisateur avant de passer à l'étape suivante. Mais encore une fois, nous examinerons plus cela lorsque nous serons à notre propre middleware pour le projet. Si nous faisons défiler vers le bas, nous avons ensuite nos routes, qui est encore une fois middleware et ce sont les deux variables que nous avions auparavant, qui est à peu près le sommet. Ce sont les variables qui relient à notre chemin de fichier pour le routeur. Il déclarerait qu'on veut utiliser notre routeur d'index lorsque l'utilisateur visite l'une des routes domestiques, et nous avons aussi un itinéraire d'utilisateur par défaut qui a été configuré avec Express Generator, et ces routes sont stockées dans notre index et fichiers uses.js. faisant défiler plus bas, nous avons également une certaine gestion des erreurs, qui est encore une fois middleware. App.use sans chemin de fichier, rendra ces fonctions de gestion des erreurs disponibles pour toutes les routes de notre site. Enfin vers le bas, nous avons module.exports app égal. Cela rendra ce fichier disponible dans d'autres parties de notre application si nécessaire. Retour à notre barre latérale, les derniers fichiers sont les fichiers package.json. A l'intérieur de notre package.json, que nous avons brièvement regardé. Nous avons les informations sur notre projet, nous avons nos scripts de démarrage pour exécuter notre serveur web. Nous pouvons également ajouter nos propres scripts ici aussi, comme un raccourci pour taper cette commande plus longue dans le terminal. Nous avons aussi le nom que nous avons défini et aussi le numéro de version que nous pouvons définir aussi. Plus bas, nous avons les dépendances que nous avons examinées auparavant. Ce sont les modules de noeud, projets de milieu de fichier et nous pouvons également ajouter des dépendances de dev, qui sont les modules dont nous avons besoin uniquement pour le développement, et ceux-ci seront ignorés pour la production. Bientôt, nous allons installer dans le paquet maman de noeud, qui sera une dépendance de dev donc je vais vous montrer comment le faire bientôt. Si nous ouvrons la barre latérale, nous avons aussi un package.json. Par exemple, à l'intérieur de notre package.json, nous avons la dépendance Express, qui est juste ici. Cela dit actuellement au moment de la création de cette application exprime notre version 4.16.0. L' icône tilda que vous voyez juste au début ici signifie que nous n'exprimerons pas la version quatre, mais nous voulons également une mise à jour mineure des versions deux. dire que nous pouvons prendre 4.17 ou 4.18 et ainsi de suite. Avec cela à l'esprit, si nous passons à ce package-lock.json. Et puis si nous faisons une recherche pour Express, mais ensuite pris à la section Express de ce fichier, nous voyons que la version réelle est verrouillée à 4.16.3. En outre, ce module lui-même a aussi des dépendances. Si nous fermons ce terminal et puis faites défiler vers le bas, vous voyez que nous avons cette section requise juste ici et express nécessite également beaucoup de modules différents aussi, tels que cookie, débogage, escape HTML et aussi beaucoup plus. C' est pourquoi lorsque nous passons à notre dossier de modules de noeud et ouvrons cela, il y a beaucoup plus de dossiers listés ici ou modules Lamar que nous avons vu à l'origine si nous allons simplement au package.js. Fermons ça. Toutes nos dépendances à l'intérieur de ce package.js ont également des dépendances et celles-ci sont répertoriées dans package-lock.json. Ceci est un aperçu de ce qui est inclus dans le projet pour commencer, je sais que nous l'avons déjà dit plusieurs fois, mais vraiment ne vous laissez pas submerger par tout cela si c'est nouveau pour vous. Nous deviendrons beaucoup plus familiers avec la configuration des prochaines sections. 8. Utiliser Nodemon: Nous allons maintenant installer un paquet de nœuds, ce qui nous fera gagner beaucoup de temps pendant ce projet. Si nous allons sur les vues à l'intérieur du menu et ensuite aller à index.js, views, index.js, puis vous pouvez aller de l'avant et faire un petit changement à notre texte à l'intérieur ici. Si nous disons, bienvenue à, et ensuite dire, nous allons voyager. Donnez une sauvegarde, puis ouvrez le navigateur, puis rechargez. Nous voyons que ce changement a été reflété dans le navigateur. C' est bien, et c'est le résultat que nous attendons. Si maintenant passez à un fichier de script, par exemple à l'intérieur des routes, puis allez dans le index.js. Faisons un changement à l'intérieur d'ici. La virgule est sortie, c'est res.render,/. Rappelez-vous que c'est la ligne qui rend notre page d'accueil ou nos modèles d'index, puis à la place si nous allons à la ligne ci-dessous, dites res.send et ensuite le texte off 'bonjour'. Cela enverra simplement une chaîne de textes au navigateur. Donnez une sauvegarde, puis rechargez et voyez que rien ne se passe. En effet, si nous apportons des modifications à un fichier de script, nous devons redémarrer le serveur. Nous pouvons le faire si nous allons au terminal rappelez-vous que c'est la vue, puis intégrer le terminal, nous pouvons fermer le terminal vers le bas, Control C, et puis nous sommes ramenés à notre répertoire, puis utiliser à nouveau npm pour recommencer le serveur. Appuyez sur Entrée, puis une fois qu'il est en cours d'exécution, nous pouvons aller au navigateur et Hit Reload, et maintenant le terminal a redémarré le serveur. Nous allons maintenant voir le texte de 'hello' a maintenant été mis à jour dans le navigateur. Bien que cela fonctionne bien, il est un peu difficile de continuer à redémarrer le serveur, chaque fois que nous faisons un changement à l'intérieur de ces fichiers. Pour faciliter les choses, nous pouvons utiliser un paquet appelé nodemon. Si on passe à nodemon.io, c'est la page d'accueil du paquet nodemon, que nous allons utiliser. Nodemon surveillera tout changement dans notre code source, puis redémarrera automatiquement le serveur pour nous. Nous pouvons même installer nodemon, comme il le suggère, en utilisant cette commande npm install, le nom de nodemon pour le paquet et nous pouvons également utiliser ce drapeau -g lors de l'installation du générateur express, et cela signifie que nous pouvons l'utiliser globalement dans importe quel projet et pas seulement celui sur lequel nous travaillons actuellement, ou encore, si nous voulons simplement l'utiliser dans nos projets uniques. C' est aussi simple à configurer. Nous pouvons nous diriger vers le terminal dans Visual Studio Code, puis fermer à nouveau un terminal avec Control C, puis exécuter la commande suivante contre notre installation npm, et cette fois nous voulons dire —save-dev et dans le nom de notre paquet, qui est nodemon, Hit Enter et il va de l'avant et récupérer le paquet de npm, sauver dev nous allons enregistrer ceci dans notre projet comme une dépendance de développement. Cela signifie que nous pouvons l'utiliser pendant le développement, mais n'est pas nécessaire lorsque nous poussons l'application à la production. Donnez-leur un moment pour installer, puis une fois que cela est fait, si nous passons à la barre latérale et ouvrons le package.json. A l'intérieur d'ici, nous avons toujours nos dépendances, que nous avons vu plus tôt mais plus bas, nous avons aussi nos DevDependencies et ils sont répertoriés comme notre paquet nodemon. Maintenant pour que cela fonctionne dans notre application, nous pouvons créer un script, tout comme le script de démarrage, que nous avons en haut ici. Celle-là, je vais appeler devstart. Ajoutez une virgule après la première ligne, puis nous pouvons ajouter devstart. C' est l'alias que nous allons donner à cette commande. Ajoutez un deux-points, puis à l'intérieur des guillemets, nous allons ajouter une commande qui est nodemon, puis le même chemin que nous avons utilisé ici. /bin/www. Cela va essentiellement exécuter les mêmes scripts de démarrage mais cette fois, nous surveillons les changements en utilisant nodemon. Donnez cela une économie et maintenant nous pouvons aller de l'avant et démarrer nos serveurs. Cette fois, si nous passons au terminal, assurez-vous que le serveur est fermé et puis cette fois peut exécuter npm, exécutez devstart. Bien sûr devstart est le nom de notre script que nous avons juste ici. Appuyez sur Entrée, une fois qu'il est en cours d'exécution, vous devriez voir la ligne verte de code juste ici et puis sur le navigateur, appuyez sur recharger et maintenant tout devrait toujours fonctionner. Si nous passons à nouveau au fichier index.js, puis faisons un changement. Disons « bonjour à nouveau ». Enregistrer et dès que nous avons frappé sauver, nous pouvons voir le terminal sur le serveur a redémarré. Ensuite, rechargez le navigateur et maintenant nous verrons notre texte a été mis à jour sans que nous ayons à mettre à jour manuellement le serveur. Restons maintenant notre res.render, afin que nous puissions supprimer le res.send, puis commande et forward slash pour maintenant décommenter cette page d'index, enregistrer ceci, puis recharger et rafraîchir le navigateur va maintenant montrer ces change sans avoir à fermer le serveur et redémarrer. 9. Servir des fichiers statiques: Pour ce projet, j'ai fourni quelques images que vous pouvez également utiliser, telles que des images pour les hôtels, les pays, et aussi le logo. Vous pouvez bien sûr choisir le vôtre si vous préférez. Ceux fournis sont à l'intérieur de ce dossier appelé images, que j'ai ici enregistré sur le bureau. Si vous ouvrez ce dossier, nous pouvons voir que nous avons la plage, qui est l'une des principales images sur la page d'accueil. Nous avons notre logo, puis les images de notre pays et les hôtels organisés en deux dossiers. Ouvrons également le dossier du projet. Double-cliquez sur Let's Travel, puis à l'intérieur, nous pouvons aller au public, puis aux images. Ensuite, si nous sélectionnons les quatre éléments de notre dossier images, puis faites glisser ceux-ci vers le dossier images à l'intérieur de nos projets, alors c'est terminé et assurez-vous qu'ils sont dans le dossier images, plutôt que dans la section publique. Nous devrions pouvoir maintenant voir ces images, si nous passons au code Visual Studio. Ouvrez cela, puis la barre latérale, puis à l'intérieur d'un public, nous avons maintenant les images à l'intérieur du dossier images. Si nous passons à l'index.pug, qui est les principaux modèles de page d'accueil, nous pouvons tester cela en ajoutant une image. Sous notre texte de Bienvenue à Voyons. Nous pouvons ajouter notre image, nous pouvons ajouter quelques attributs à l'intérieur des guillemets pour définir l'image à utiliser égale à nos images qui est le dossier. Ensuite, continuons et ajoutons beach.jpeg, qui est celui-ci juste ici. Notez que nous n'avons pas besoin d'ajouter le dossier public à notre chemin de fichier et ensuite enregistrer cela, ouvrez Google Chrome ou votre navigateur, recharges et c'est notre image de la plage, super. Maintenant, toutes nos images ainsi que notre structure de projet sont maintenant en place. Dans la section suivante, nous allons approfondir notre projet en examinant le routage et le modèle. 10. Introduction au pug: Nous avons déjà parlé de la façon dont nous allons utiliser des modèles pour créer nos projets. Ces modèles seront une combinaison de HTML, JavaScript avec toutes les données dynamiques mélangées, comme un nom d'hôtel, que nous avons examiné dans la dernière section. Nous savons que nous ne pouvons pas faire tout cela avec les fichiers HTML standard. Nous devons donc utiliser un langage de modélisation qui compile tout cela en HTML. Je vais utiliser un langage de modélisation appelé Pug pour faire ça. Cela peut sembler un peu étrange pour commencer, mais c'est en fait plus simple que les balises HTML normales. Pour voir comment utiliser Pug, passons à notre fichier index.pug. Il y avait une barre latérale à donner un petit espace, et nous avons déjà eu un coup d'oeil ici avec les éléments p et aussi avec une image [inaudible]. Nous avons des prolongements et des blocs en haut, que nous reviendrons bientôt. Pour l'instant, nous allons nous concentrer sur les caractéristiques du carlin. Généralement, l'utilisation de Pug est juste la balise d'ouverture HTML pour rendre la syntaxe plus courte, tout comme cet élément p avec le texte d'un élément de texte fonctionne de la même manière, comme ajouter dans un en-tête. Alors ajoutons un h1, disons le titre, sur le navigateur, puis rechargez et nous avons un titre de niveau 1 ici. Les attributs sont ajoutés comme avec les balises HTML normales. Mais au lieu de cela avec Carlin, ils l'ajoutent entre crochets. Si nous voulions ajouter un lien, puis au href, nous le faisons à l'intérieur des parenthèses, puis le reste est simplement ajouté comme normal. Ajoutons donc un lien vers Google. Donc, www.google.com, nous pouvons également ajouter nos classes. Alors ajoutons une classe de bouton, puis ensuite nous ajoutons notre texte en dehors des crochets, que vous voulez ajouter pour le lien. Donc, lien vers le texte Google. Enregistrez ceci, puis rechargez et maintenant avez notre lien hypertexte en bas, et si vous cliquez sur cela, cela fonctionnera comme HTML normal une balise. Revenons à notre projet et à l'index.pug. L' indentation est également très importante lors de l'utilisation de Pug. En HTML normal, l'indentation est seulement pour la lisibilité. Mais lors de l'utilisation de Pug, il est nécessaire de l'utiliser pour montrer quel niveau est chaque élément. Par exemple, si nous avons ajouté un div pour contenir ce titre sur le lien, juste comme ceci, puis si nous allons au navigateur, puis aller dans les outils de développement ferait un clic droit et inspecter, puis sélectionnez cette div juste ici. Donc, c'est un div que nous venons d'ajouter, et l'outil de développement montre que le titre div et aussi notre lien hypertexte sont tous sur des lignes séparées. Ils sont effectivement tous au même niveau, nous n'avons pas le titre et le lien à l'intérieur de ces balises div. Mais si nous allons de l'avant et indentons le h1 et le lien, puis actualisons ceci. Nous voyons maintenant que la balise d'ouverture div et la balise de fermeture entourent maintenant notre titre et notre lien. Donc, l'indentation fait que ces deux éléments sont maintenant imbriqués à l'intérieur de la div parent. Une autre chose à propos de l'indentation à l'intérieur d'un fichier pug est seulement mixins, que nous allons couvrir plus tard, et aussi cette déclaration de bloc en haut, et étend peut être au niveau supérieur, c'est-à-dire l'extrême gauche du fichier. Si nous passons sur un élément nav, donc notre lien par exemple si nous déplaçons cela vers la gauche du fichier, enregistrez ceci et puis rechargez le navigateur. Nous obtenons maintenant une erreur indiquant que seuls les blocs nommés et mixins peuvent apparaître au niveau supérieur d'un modèle ; Ceci est essentiellement parce que ce fichier sera utilisé à l'intérieur d'un fichier NAV. Donc, cette indentation garde tout droit lorsque le HTML est compilé. Allons de l'avant et rétablissons ce lien, et effacez l'erreur. Quelque chose que vous avez peut-être remarqué est ci-dessus, nous utilisons également un égal pour ce titre. C' est parce que nous pouvons également inclure JavaScript dans ces fichiers Pug aussi. Si vous vous souvenez, le titre a été transmis par notre routeur, qui était index.js, juste ici à l'intérieur de ce titre. Donc, c'est JavaScript en cours de transmission à notre modèle dans l'index.pug. Par conséquent, nous devons utiliser les égaux plutôt que juste un élément de texte brut, juste comme ceci et aussi nos éléments p juste ici. Ce titre est également affiché dans le sous-navigateur aussi sur le haut ici. Utiliser un égal rendra également à l'écran le résultat de n'importe quel JavaScript. Donc, au lieu de cela, si nous disons plutôt que titre, ajoutez un peu de JavaScript de 5 plus 12 sur le navigateur, nous avons les résultats de 17. Mais au lieu de cela, si nous allons de l'avant et supprimons les égaux, vous devez enregistrer et puis revenir au navigateur. Cela s'affiche maintenant sous la forme d'une chaîne de texte de 5 plus 12 plutôt que de sortir la somme de 5 plus 12. Donc, ramenons ça au titre. Donc, vous n'avez pas à vous souvenir de cela mais je vais mettre le résultat comme ceci est appelé code tampon. Il est également du code non tamponné trop qui n'ajoute pas directement à la sortie ; Cela peut être n'importe quel JavaScript normal avec un préfixe de tiret. Donc, par exemple, nous pouvons ajouter un tiret, puis ajouter n'importe quel JavaScript tel qu'une constante de nom, et c'est notre nom pour être Chris, et puis cela peut être utilisé là où nous voulons le placer. Donc h1, nous pouvons placer notre titre avec notre variable de nom. Comme c'est un JavaScript, nous aurons également besoin d'ajouter les égaux et de tester cela, puis en bas il y a notre nom de variable de Chris. Donc, ce code non tamponné, c'est simplement déclarer une ligne de JavaScript, et alors nous pouvons aller de l'avant et l'utiliser partout où nous voulons dans les modèles. Ce JavaScript peut être à peu près n'importe quoi. On pourrait avoir un éventail de nourriture, de fromage, œufs et de poulet, et maintenant on a ce tableau. Cela nous donne une chance de jeter un oeil à la syntaxe spéciale que Pug fournit pour créer une boucle for. Pour ce faire, je vais ajouter ceci en bas, indenter ceci au même niveau que le lien, puis créer une liste non ordonnée pour nos aliments. retrait d'un niveau de plus, nous allons créer une boucle avec chaque aliment dans les aliments. Donc, aliments est le nom de notre tableau qui est juste ici, puis chaque élément individuel dans le tableau va être stocké dans cette variable alimentaire. Donc, après ici, nous pouvons définir notre article de liste pour être égal à la nourriture. Encore une fois, c'est JavaScript, nous devons donc ajouter le symbole égal. Donc, nous ne sortons pas ceci sous la forme d'une chaîne. Dis ça, puis teste ça. Nous avons maintenant du fromage, des œufs et du poulet au fond. Cette sortie peut également être mélangée avec un eText. Donc, plutôt que seulement la nourriture individuelle produite, nous pouvons ajouter une chaîne de J'aime, puis ajouter plus de nourriture. En fait à propos d'un espace juste après là et essayez ceci, et notre texte est également maintenant mélangé avec notre variable JavaScript ; Ceci est juste un aperçu de ce que Pug peut faire, et c'est vraiment assez simple une fois que vous vous y habituez, nous allons utiliser beaucoup de fonctionnalités Pug pour ce cours. Cependant, si vous préférez jeter un oeil plus profond maintenant, vous pouvez vous diriger vers Pugjs.org et jeter un coup d'oeil plus profond, en haut de ce fichier, nous avons également cette extension et aussi cette section de contenu de bloc. Nous n'avons pas encore discuté de ce que cela signifie, mais nous allons aller de l'avant et couvrir cela dans la prochaine vidéo. 11. Héritage de modèle: Nous avons à la fois bloc et étend mots-clés, à l'intérieur des fichiers pug en haut juste ici. Si nous ouvrons notre mise en page au fichier carlin, qui est disponible dans la section de vue, cliquez sur mise en page le carlin. Ce fichier de mise en page n'a pas de mot-clé extend en haut. C' est parce qu'il agit comme les principaux modèles de carlin. Les fichiers étendront ensuite cette mise en page principale. C' est pourquoi nous pouvons ouvrir notre index le carlin et aussi notre erreur le carlin, qui est disponible dans le même dossier, puis voir la mise en page des extensions en haut. Si nous revenons à la mise en page le fichier pug. Il y a aussi une section de contenu de bloc ici en bas. C' est à ça que ça sonne. C' est essentiellement un bloc de code. N' importe lequel des fichiers tels que notre index le carlin peut aller de l'avant et remplacer cette section appelée contenu. A l'intérieur de notre index le fichier pug, on va ouvrir ça. Toute cette section ici, fondamentalement tout de notre liste non ordonnée jusqu'à notre titre, sera remplacée à l' intérieur du bloc ou à l'intérieur de l'espace que nous spécifions à l'intérieur de la mise en page. Nous pouvons également avoir plusieurs blocs, chacun avec un nom différent, comme un pied de page ou un bloc de barre latérale. Ceux-ci peuvent également être ajoutés à un autre fichier, puis référencés par le nom du bloc, et de la même manière que sa section de contenu. Nous gelons, puis ajoutons autre chose autour de ce bloc. Par exemple, au-dessus du contenu et nous pouvons ajouter du texte. Au-dessus du contenu, puis en dessous, en dessous du contenu, et maintenant si nous allons à la page d'index principale, puis rechargeons, nous voyons en haut, nous avons le texte ci-dessus le contenu. et puis en bas, nous avons le texte de ci-dessous le contenu, et puis tout au milieu, partir du titre jusqu'à toute liste non ordonnée n'est pas fourni par cette section de contenu de bloc, qui est un remplacé par le contenu de notre index le carlin. Une fois que vous comprenez cela, nous pouvons maintenant créer des sections de notre code à l'intérieur d'une mise en page, puis nous pouvons externaliser le contenu dans un fichier séparé, sauter tout le code, plus organisé, plus maintenable, et nous pouvons également réutiliser ces sections de contenu aussi dans plusieurs fichiers. Maintenant, allons aux mises en page, et supprimez ces deux éléments p que nous avons créés, puis donnons cette sauvegarde. Cette mise en page est utile pour tout ce que nous voulons afficher dans toutes nos pages sur notre site, comme l'ajout d'un en-tête et d'un pied de page. Nous pouvons ensuite remplacer le contenu principal ici ou une nouvelle section en ajoutant plus de blocs. Maintenant, nous savons comment nos modèles sont disposés. Ensuite, vous aurez la chance de vous entraîner en créant la section d'en-tête. 12. Temps de pratique : création de l'en-tête: Quand on a affaire à quelque chose de nouveau, tout comme Prog, on a vraiment commencé à s'améliorer quand on s'entraîne seuls. Sans simplement suivre. Ici, nous pouvons voir la version finale des projets, que je voudrais que vous puissiez aller de l'avant et créer cette section d'en-tête à partir de la navigation supérieure, qui comprend le logo et aussi les liens en haut, droit vers le bas vers le principal image de plage juste ici. Si vous vous sentez confiant, vous pouvez également ajouter le formulaire de recherche deux, qui est au milieu. Juste comme un guide pour où vous allez. En cela, nous allons devoir aller à l'intérieur du fichier de point Prog de mise en page automatique, à l'intérieur de la section du corps. Donc juste au-dessus de ce contenu de bloc. Donc c'est tout en haut de la page. Je vais passer en revue tout ça dans la prochaine vidéo. Alors ne vous inquiétez pas de tout gâcher. C' est une bonne pratique. Donc, je vous recommande de mettre la vidéo en pause maintenant sur cette version finale et ensuite il donne un coup de pouce. 13. Solution : création de l'en-tête: J' espère que vous avez réussi à donner cela un coup de pouce et j'espère avoir un contenu d'en-tête. Maintenant à l'écran, je vais aller de l'avant et créer ma version de cet en-tête. Si le vôtre est différent du mien, vous pouvez soit le changer pour être le même que ceux créés dans cette vidéo, soit garder le vôtre comme vous le souhaitez. Dans les deux cas, c'est bien. Je recommanderais peut-être de garder les mêmes noms de classe que nous utilisons dans cette vidéo afin que le CSS corresponde plus tard. Commençons par n'importe quel fichier docktype de mise en page. Entre la section du corps et le contenu du bloc. Je vais commencer par créer la section d'en-tête comme nous le ferions normalement avec HTML. Imbriqué à l'intérieur de cet élément nav. Ce logo peut être un lien. C' est pour que l'utilisateur puisse cliquer dessus, puis être ramené à la page d'index. Notre a pour notre lien, qui peut inclure le href à l'intérieur des crochets qui se connecte simplement à la barre oblique avant, qui est la page d'accueil. Puis un niveau dans notre lien. Si nous allons de l'avant et ajoutons notre image, cela sera alors cliquable et également un lien vers cette page d'accueil qui est barre oblique. A l'intérieur des parenthèses, nous ajoutons notre source, donc SRC et la séquence être des images slash avant. C' est logo.png. Nous pouvons ajouter une classe ou un ID à notre élément. En ajoutant cela dans les crochets comme un attribut ou nous pouvons l'ajouter juste après le nom de l'élément. Ajouter l'image et le dur et le logo. Cela donnera l'ID du logo pour cette image. Ensuite, juste après cela, nous pouvons aller de l'avant et créer notre autre liste qui sera pour nos liens d'inscription et de connexion. Cela doit être au même niveau que notre lien environnant ci-dessus, donc ul suivi par notre liste d'articles. Si nous voulons faire ces liens, nous devons indenter la balise a plus le href. Nous n'avons pas encore ces modèles ou ces itinéraires configurés , mais nous pouvons encore aller de l'avant et les lier pour vous inscrire. Avec un texte d'inscription à et ensuite faire la même chose ci-dessous ajouter notre prochain élément de liste au même niveau que celui ci-dessus. Transformez ceci en lien. Cette fois, celui-ci va être pour la connexion, qui est les routes de connexion slash et le texte de connexion à. Si vous avez créé ceci et que vous n'avez pas ajouté le href, je vous recommande de garder le vôtre cohérent avec mien afin qu'il n'ait aucun problème plus loin dans la ligne. J' ai ajouté une connexion barre oblique avant et aussi une inscription à la barre oblique avant. Cela nous donne le nom de sauvegarde sur le navigateur. Il y a un logo, puis nos deux liens en haut aussi. La prochaine chose à faire est de créer notre entrée de formulaire pour notre recherche. C' est là que nous pouvons taper la destination, la durée, les dates de départ et aussi le nombre d'invités que nous voulons rechercher, donc nous le faisons simplement avec un simple formulaire HTML. Cette forme va être dans une div environnante. Ce div doit être au même niveau que notre élément nav. Descendez pour l'élément nav, puis commencez au même niveau. Lors de la création d'un div avec la classe, nous pouvons même créer l'élément juste comme ceci et ensuite ajouter le nom de la classe comme un attribut ou à la place, nous pouvons avoir un raccourci qui est simplement point et le nom de notre classe. Si nous voulions un div avec la classe de navigation de recherche, nous le ferions simplement comme ceci. Cela sera ensuite sorti en tant que div avec cette classe. Ensuite, à l'intérieur, nous pouvons nicher notre forme. Ce formulaire va être composé d'une série d'entrée de formulaire et chacun d'entre eux aura un div environnant de l'enveloppe de soulignement d'entrée. Cela rendra chaque niveau de bloc d'entrée, sorte qu'ils apparaissent sur leur propre ligne. Ensuite, nous devons étiqueter notre premier qui sera la destination. Nous ajoutons l'attribut for ou destination, puis un texte de destination. Ensuite, nous pouvons ajouter notre entrée, le type de texte, l'idée de destination qui correspondra à cette étiquette juste ici. Le nom de la destination aussi. Je vais juste changer le style afin qu'il soit un peu plus lisible et ensuite l'attribut requis à la toute fin. Enregistrez ceci, puis voyons à quoi il ressemble dans le navigateur et maintenant nous avons notre entrée de formulaire de destination. Maintenant, cela fonctionne, nous pouvons aller de l'avant et copier cette input_wrapper, puis coller cela et assurez-vous que c'est au même niveau que ci-dessus. Celui-ci sera pour la durée. Changer l'étiquette en durée, le texte et puis nous pouvons ajouter des nuits à l'intérieur ici parce que nous allons signer la durée par nuit. Le type d'entrée de texte est correct, l'ID doit correspondre à la modification et au nom de la durée aussi. Ce champ est également requis pour que nous puissions le laisser aussi. La prochaine sera pour la date de départ donc le texte de l'étiquette. Cette fois, l'entrée va avoir le type de date donc il descend comme un sélecteur de date. L' ID de la date de départ, puis le nom, la date de départ. Ça va être CamelCase. Ce champ est également requis comme les autres. Je vais faire ça la même fois que celui-ci va être un champ de nombre. Le type d'entrée de nombre car cela va être pour le nombre d'invités, donc numéro-invités. Le nom du nombre d'invités , puis la pièce d'identité qui doit correspondre à cette étiquette du nombre d'invités. J' ai une faute de frappe, alors changez ça. Puis enfin le nom, encore une fois dans CamelCase du nombre d'invités. Vérifions cela dans le navigateur. Super, c'est nos quatre entrées. Nous pouvons voir si nous cliquons sur la date, nous avons maintenant un sélecteur de date déroulante. Il devrait s'agir d'un numéro de type d'entrée qui se trouve sur nos deux champs de texte en haut. Retour à notre mise en page, après ces quatre premières entrées, nous allons maintenant changer cela. Nous avons besoin d'un couple de plus et un sera pour le classement des étoiles. Cela va être une entrée sélective avec différentes options à travers de un à cinq. Nous allons alors avoir une entrée avec une sélection à nouveau, qui va être pour trier le prix de bas à haut ou haut à bas. Ensuite, le bouton Soumettre à la fin va utiliser le même wrapper d'entrée, so.input_wrapper. Il s'agit d'une sélection avec un nom égal aux étoiles. N' oubliez pas que l'entrée de sélection n'a pas besoin d'avoir une option à sélectionner. Ajoutez notre première option à l'intérieur ici avec une valeur à passer au serveur une fois sélectionné. Ce sera juste un nombre pour les étoiles numériques et le texte de min une étoile. Nous pouvons aller de l'avant et copier ceci et coller dans quatre fois de plus. Le second est pour deux étoiles, 3, 4 et 5 et aussi la même chose pour le texte aussi. La dernière entrée, encore une fois ceux-ci ont le même input_wrapper donc nous gardons le style cohérent. Ce sera également un choix et c'est pour le tri des prix de bas à élevé ou élevé à bas. Nous pouvons ajouter le nom de la sélection à trier. Collez l'option avec une valeur de 1. Cela va pour le prix fixé de bas à élevé. Nous allons également coller dans le même, mais cette option de temps peut avoir une valeur négative. C' est parce que ce sont les valeurs que vous avez requises lors de la recherche base de données Mongo pour ensuite trier les requêtes de retour de haut en bas ou de bas en haut. Nous verrons cela plus en détail plus tard. Cela peut aussi être changé. Cette fois, voyons le prix de haut à bas. La dernière entrée a également besoin de l'enveloppe d'entrée et c'est le bouton Soumettre. Bouton avec le type de soumettre, puis le texte de recherche.Cela devrait nous conduire maintenant à former. Vérifions toutes les erreurs. La note d'étoiles de un à cinq. Nous avons le prix de bas à élevé et élevé à bas. Ensuite, je vais soumettre le bouton en bas. Nous voulons également que cette image de plage fasse aussi partie de l'en-tête. Dans cette section d'en-tête, juste après le formulaire, nous devons nous assurer que cette image est indentée au même niveau que notre navigation. Si nous faisons défiler vers le haut et puis aller à notre navigation de recherche et garder un oeil sur cette ligne que nous voyons dans l'éditeur de texte. Maintenant, on pourrait commencer notre image, alors img. La source comme avant, va être égale aux images barre oblique qui se trouve à l'intérieur du dossier public, la plage d.JPEG. Ensuite, faisons apparaître le contenu du bloc. Enregistrez, puis rechargez le navigateur. Maintenant, nous avons l'image à l'intérieur de l'en-tête. Nous avons également quelques travaux de nettoyage à faire juste ci-dessous et ce n'est que le consentement du fichier index.pugfile. Passez à index.pug. Ensuite, nous pouvons supprimer nos exemples de plus tôt. Nous pouvons déplacer une autre liste, nos liens et tableau. On n'a pas besoin de l'image. Nous n'avons pas besoin du texte ou du titre. Laissons juste en place les mises en page étendues et le contenu du bloc et off au navigateur. Maintenant, nous avons juste le contenu de l'en-tête de notre fichier de mise en page. On y va. Notre contenu d'en-tête est maintenant en place. Ensuite, nous allons passer à l'utilisation de mix-ins, qui sont un excellent moyen de réutiliser le même code dans plusieurs modèles. 14. Mixins: Une des choses que nous voulons généralement éviter lors du codage est la répétition. Si nous réutilisons le même code plus d'une fois, il est souvent logique de faire les choses un peu différemment. Heureusement, Vue nous donne l'occasion d'utiliser ce qu'on appelle des mixins. Si nous regardons la version finie ici. Prenez nos hôtels ici sur la page d'accueil, par exemple. La même structure hôtelière que vous voyez ici. Aussi la mise en page est utilisée si nous effectuons un outil de recherche. Ici, nous avons nos hôtels listés qui suivent le même modèle. Si vous faites une recherche et remplissez tous les champs juste ici, cliquez sur Rechercher. Nos résultats de recherche suivent une mise en page et un modèle similaires à ceux de nos hôtels sur la page d'accueil. Ceci est un bon cas d'utilisation pour un mixins même si les données de l'hôtel sont différentes, comme la description et aussi le titre, nous pouvons rendre des parties des mixins dynamiques. C' est vraiment flexible à utiliser. Dans le fichier de point d'index pug à l'intérieur de Visual Studio Code, commençons par ajouter les informations d'hôtel dont nous avons besoin pour commencer. En commençant par les wrappers, puis lien vers tous les hôtels. Il suffit d'avoir du contenu de bloc, assurez-vous que vous avez cela prévu. Ensuite, nous pouvons ajouter notre div externe. Enveloppe de soulignement externe. À l'intérieur, nous voulons également avoir un deuxième emballage pour chaque hôtel individuel. Emballage de soulignement d'hôtel. Puis le h2 des hôtels. Ce titre de niveau 2 va également avoir un lien. Juste après cela, nous allons ajouter notre lien, qui va lier à tous les hôtels qui sont disponibles. Ajouter un href, qui va lier à la barre oblique avant tout. Ensuite, entre parenthèses, un texte de « voir tout » vous allez enregistrer ceci, puis aller le navigateur dans la page d'accueil, puis actualiser. En bas, nous avons notre titre d'hôtels et ensuite nous aurons un lien que nous téléchargeons plus tard pour voir tous les hôtels disponibles dans la base de données. La raison pour laquelle nous avons ce lien pour voir tous les hôtels, c'est parce que les hôtels qui seront affichés sur la page d'accueil ne seront limités à neuf hôtels aléatoires tirés de la base de données. C' est pour que la page d'accueil ne soit pas trop bondée quand nous avons beaucoup d'hôtels à l'intérieur de notre base de données. Maintenant, allez-y et ajoutez un hôtel factice. Vous pouvez voir à quoi cela ressemble. Après nos liens et au même niveau que notre h2, nous pouvons ajouter un emballage d'hôtel, donc point hôtel nid. Ici, nous allons avoir quelques sections différentes. Le premier sera pour l'image de l'hôtel. Hôtel img. Ce sera la section qui va apparaître sur la gauche et il va avoir une image de l'hôtel que nous allons ensuite lier à la description complète de l'hôtel. Nous avons besoin d'un lien avec le href. Nous pouvons laisser cela vide pour l'instant parce que ces données vont être dynamiques et qu'elles vont être reliées à l'hôtel actuel que nous regardons. Après ici, nous allons ajouter une image qui est l'image principale de l'hôtel et nous pourrions simplement ajouter une image factice maintenant. Images barre oblique vers l'avant des hôtels. Ensuite, nous pouvons sélectionner n'importe quel hôtel que nous voulons dans notre dossier public. Laissons les hôtels vers le bas et vous pouvez choisir l'une de ces images à partir de là. Je vais juste aller à l'hôtel un point JPEG, et tout comme ce lien ci-dessus, ce sera aussi dynamique et les informations seront extraites de la base de données et ensuite nous pouvons saisir l'image correcte. Après cette section d'image de l'hôtel, ajoutons une nouvelle section entourée d'un div appelé info de soulignement de l'hôtel. Cela va contenir des informations sur l'hôtel, telles que le nom de l'hôtel, le classement des étoiles, le pays, ainsi que le prix par nuit. Le nom de l'hôtel sera également un lien comme cette image, qui fera également un lien vers la vue complète de l'hôtel, qui montrera une description détaillée. Ajoutez notre lien environnant avec un href vide pour l'instant. Notre titre de l'hôtel va aller dans un élément h3. Nous pouvons ajouter du texte factice de l'hôtel un. Une règle horizontale sépare ensuite le titre du reste des informations. Maintenant, c'est juste un cas d'ajout de quelques éléments p. Le premier est pour le classement des étoiles. On peut le définir comme tout ce qu'on veut pour l'instant. Allons-y pour quatre. Le pays : Jamaïque. Puis enfin le coût par nuit. Rappelez-vous que ce n'est que quelques données factices afin que nous puissions voir la structure. Alors voyons à quoi cela ressemble. Il y a notre section image ci-dessus, puis notre information hôtel avec le nom, évaluation des étoiles, le pays, et aussi le prix. Super. Nous avons maintenant un hôtel sur la page d'accueil. Nous devons également créer une vue pour créer un lien vers vous lorsque l'utilisateur clique sur ce lien tous les hôtels. Passons à Visual Studio, ouvrez la barre latérale, puis à l'intérieur des vues, nous pouvons créer notre nouvelle vue appelée tous les hôtels soulignés dot carlin. À l'intérieur de ce modèle, nous devons également étendre la mise en page. Nous avons également besoin d'ajouter du contenu de bloc. Maintenant que vous allez partager une vue similaire à l'hôtel à partir de la page d'accueil. Si nous allons à l'index dot carlin et il copiera tout le chemin du coût par nuit jusqu'à l'hôtel. Ceci est la div individuelle de l'hôtel. Allez à tous les hôtels et ensuite nous pouvons ajouter notre emballage. Donc, dot hôtel underscore wrapper, indenter dans un niveau et puis nous pouvons coller dans le code de la dernière vidéo. Assurez-vous que cela est juste indenté dans un niveau et assurez-vous que notre fichier de carlin à points tous les hôtels est enregistré. Si nous passons à notre page d'accueil, nous ne serons plus en mesure de voir la vue vers le bas. C' est parce que nous n'avons pas encore mis en place le routage pour gérer cette barre oblique avant tout. Mais vous pouvez déjà voir que nous avons répété le même code hôtel, fois à l'intérieur du modèle de tous les hôtels et aussi à l'intérieur de l'index dot carlin. Nous avons maintenant l'occasion de réduire notre code en déplaçant cet hôtel dans un mixin à l'intérieur du dossier vues, à l'intérieur de la barre latérale. Créons un nouveau dossier appelé mixins. Dans notre dossier mixins, je vais créer un nouveau fichier qui s'appelle underscore hotel dot pug et ce sera le fichier de notre mixin. Je sais que nous aimerions commencer un nom de mixin avec un trait de soulignement, mais c'est tout à fait à vous de décider. Nous commençons par utiliser le mot-clé mixin suivi d'un nom que nous voulons donner à ce mixin. Mixin hôtel alors nous pouvons aller et copier sur le code de l'hôtel. Nous avons déjà dans notre index dot carlin. Nous avons cet hôtel jusqu'à notre classement des étoiles et le coût par nuit. Copiez ceci. Ensuite, si nous allons à notre mixin qui est souligné hôtel. Collez ceci et assurez-vous que cela est correctement mis en retrait. Un calque de niveau, puis un autre niveau pour notre image et nos informations. Enregistrez ce fichier et c'est tout ce que nous devons faire pour créer notre mixin. Maintenant, index dot pug fichier, nous devons ensuite inclure ce fichier mixin, que nous venons de créer. Après étend la mise en page. Nous pouvons également inclure notre mixin en ajoutant le chemin du fichier. Mixins, qui est le nom du dossier, barre oblique avant soulignement hôtel. Nous n'avons pas besoin d'ajouter l'extension dot pug. Ensuite, nous devons supprimer le code de l'hôtel , puis le remplacer par le nom que nous avons donné au mixin. Coupez ou supprimez cette section d'hôtel à partir du bas, puis nous ajoutons notre mixin avec plus hôtel. Ce nom d'hôtel est le nom que nous avons donné au mixin dans le fichier. Souligner le carlin à pois de l'hôtel. C' est un nom que vous définissez juste en haut. Si nous enregistrons maintenant ceci et ensuite sur la page d'index en cliquant sur le logo et je fais défiler vers le bas, vous pouvez voir que nous avons un problème avec les indentations. Allons voir cela et c'est un carlin à points d'index, plus à notre carlin à points d'index, et il semble que ce n'est pas tout à fait aligné avec cette ligne. Ces petites erreurs sont des choses que nous devons surveiller avec l'indentation. Assurez-vous que tout fonctionne correctement. Essayons de recharger ça. Il y a notre hôtel dans la page d'accueil. Mais cette fois est sorti d'un mixin. Maintenant, nous pouvons faire de même avec la page tous les hôtels à l'intérieur du fichier tous les points carlin. Nous pouvons également inclure le mixin de la même manière que l'index. Après notre déclaration étend, nous pouvons inclure notre mixin, qui est encore une fois le chemin de fichier de mixins, barre oblique avant soulignement hôtel. Maintenant, nous pouvons remplacer ce code hôtel de point hôtel jusqu'au coût par nuit. Ensuite, remplacez ceci par le mixin en utilisant plus hôtel. Maintenant, nous avons remplacé une section de code de deux fichiers et l'avons ajoutée dans un mixin. Nous reviendrons bientôt à mixin en leur transmettant également des données sur chaque hôtel dans la base de données. En plus de créer plus de mixins pour vous, comme nous allons. Notre code est maintenant un peu plus court en incluant ceci et il sera utilisé quelques fois de plus dans ce projet aussi. Ensuite, nous allons passer au routage et comment nous pouvons l'utiliser pour basculer d'une page à l'autre dans notre application. 15. Routage de base: Si nous passons à Visual Studio Code, et pour le moment, si vous allez à l'intérieur du dossier routes, puis cliquez sur le index.js, nous n'avons qu'une seule route actuellement configurée, et c'est pour la page d'accueil. Maintenant, nous allons regarder comment ajouter plus de routes aussi et si le routage nous permettra de gérer ce qui se passe quand une URL est visitée. abord, je n'utiliserai pas le fichier users.js, qui a été inclus avec le générateur express. Donc, nous pouvons descendre et supprimer users.js, donc nous pouvons supprimer cela de notre projet. Ensuite, à l'intérieur du app.js, cliquez sur le fichier principal ici. Nous avons également deux références au fichier de cet utilisateur, que nous pouvons également supprimer. Tout d'abord, nous pouvons supprimer cette variable, qui pointe vers les routes de l'utilisateur. Donc supprimez ceci, en laissant juste notre fichier d'index principal. Ensuite, un peu plus loin, nous aurons un app.use qui définit que nous voulons utiliser le routeur de cet utilisateur sur le chemin de fichier de l'utilisateur juste ici nous. Donc, nous pouvons également supprimer cela. Maintenant, revenez à notre fichier index.js du routeur. Fermons certains de ces onglets. En haut de ce fichier, nous avons deux variables. Nous avons une variable Express et aussi une variable d'itinéraire ici. Nous avons ces afin que nous puissions utiliser la fonctionnalité Router fournie avec Express. Tout d'abord, nous avons besoin d'Express, qui est un paquet de noeud et c'est à l'intérieur du dossier des modules de noeud. Si nous avons besoin de paquets à l'intérieur des modules de noeud, ce qui est juste ici, nous avons juste besoin de le référencer par le nom du module. Si nous avons besoin de l'un des fichiers qui ne se trouve pas dans le dossier des modules de noeud, nous devrons ajouter le chemin complet du fichier avant le nom. Après avoir défini notre variable Express, nous avons ensuite défini pour ouvrir l'instance de routeur Express, et la stocker dans une variable de routeur. Cette variable de routeur est également utilisée ici, ainsi que toutes les routes futures aussi. Nous utilisons ensuite .get ici parce que nous gérons une demande get. Rappelez-vous quand un utilisateur visite une page dans le navigateur, il s'agit d'une demande get. Dans la dernière vidéo, nous avons ajouté un lien vers l'avant barre oblique tout. Nous avons ajouté cela dans notre modèle index.pug, juste ici. Il s'agissait de fournir un lien vers tous les hôtels. Mais nous n'avons pas encore pris la route. Nous passons à la page d'index et sélectionnons ce lien. Nous voyons que nous l'avons pris pour avancer barre oblique tout, mais vers le bas, nous avons un message de Not_Found. Nous voyons tout le contenu de l'en-tête juste un peu encore parce que ce contenu a été ajouté au fichier de mise en page principal. Donc maintenant, nous pouvons aller de l'avant et écrire notre propre itinéraire pour gérer la barre oblique avant toutes les routes d'hôtels. Donc, de retour dans le index.js, où nous allons gérer toutes nos routes, nous pouvons commencer comme ci-dessus avec le routeur et c'est une requête get donc nous utilisons .get. À l'intérieur, nous voulons que cela s'applique à la barre oblique avant toutes les routes, et une autre fonction comme deuxième paramètre. Donc, la fonction qui prend dans la requête, et aussi les objets de réponse. Ces deux noms de variables peuvent être tout ce que vous préférez. Ouvrez ensuite les accolades et ajoutez un point-virgule à la fin. Request est un objet contenant toutes les informations de la requête HTTP. À titre d'exemple, nous l'utiliserons bientôt pour accéder aux données à partir d'un formulaire, qui est transmis avec la requête. La réponse, par contre, est ce que nous voulons renvoyer lorsque nous recevons une demande. Donc, la requête est les données entrant dans le serveur, puis la réponse est une réponse du serveur. Si vous jetez un oeil au-dessus des itinéraires hors domicile, Nous avons res.render un modèle de page en tant que réponse du serveur. Nous avons également examiné res.send plus tôt. Ici, nous pouvons également rendre notre modèle de tous les hôtels que nous avons créé juste ici. Donc, à l'intérieur de router.gets/tout ce que nous pouvons dire, res.render, passez dans nos modèles de all_hotels. Ensuite, en tant qu'objet, nous pouvons transmettre notre titre de tous les hôtels. Le point-virgule à la fin ici. Maintenant, nous pouvons tester cela en allant sur le navigateur, appuyez sur « Enregistrer », puis rafraîchir. Assurez-vous que vous uniquement en avant/toutes les routes, puis faites défiler vers le bas. Maintenant, nous pouvons voir cet hôtel, que nous avons ajouté comme un mélange dans la dernière vidéo. Essayons aussi cela encore une fois en allant sur la page d'accueil, en cliquant sur le « Logo », en cliquant sur « Tout voir », et une fois de plus, nous pouvons voir que cela fonctionne toujours. Maintenant, nous avons deux routes en place. Un pour tous les hôtels et un pour la page d'accueil. Il s'agit d'une introduction de base à la gestion des itinéraires avec Express. Dans la vidéo suivante, nous allons regarder passer des données pour l'URL, lorsque nous secouons les paramètres des routes. 16. Paramètres de route: Une des choses que nous devons traiter lors du routage est que nous ne savons pas toujours quelle sera l'URL exacte. Ce que je veux dire, c'est que si nous imaginons la route d'un utilisateur, chaque utilisateur a un ID utilisateur unique. Cela pourrait être quelque chose comme notre localhost ou notre URL de site Web, les utilisateurs de barre oblique. Puis avant barre oblique un nom d'utilisateur, qui pourrait être à peu près n'importe quoi. Cette section utilisateur que nous avons ici, ne sera probablement pas connue à l'avance du développeur. Cette section est quelque chose que nous devons gérer à l'avance. Pour cela, nous pouvons utiliser des paramètres d'itinéraire pour créer un segment dynamique dans l'URL. Si nous passons au index.js, qui gère toutes nos routes, commençons par dupliquer notre barre oblique avant toutes les routes de la dernière vidéo. Copiez cette section, puis ajoutez-la juste en dessous. Nous pouvons alors dire au routeur express quelles parties de l'URL nous voulons être dynamiques. Après la barre oblique avant tout, nous pouvons alors aller de l'avant et ajouter une barre oblique avant puis créer un segment dynamique en utilisant un deux-points. Puis un nom que nous voulons donner à cette section. Ce nom peut être n'importe quoi de notre choix. Ensuite, à l'intérieur de notre fonction juste en dessous, nous pouvons alors accéder aux données de nom à partir de notre URL. Nous utilisons l'objet de requête. Rappelez-vous que nous avons dit que cela contient des informations provenant des requêtes HTTP. Tout d'abord, nous pouvons accéder aux objets de requête, .params pour accéder aux données dans les paramètres d'URL, suivi de cette variable de nom ont été ajoutés après les deux-points. Donc, demandez.params.name. Ensuite, si nous avons vu cela à l'intérieur d'une constance, donc le nom de const est égal à nos paramètres. Ces données peuvent également être transmises aux modèles pour les utiliser avec le titre de la page. Après le titre de tous les hôtels, ajoutez une virgule. Ensuite, nous pouvons également transmettre ces données de nom. Ces données de nom sont transmises à tous les modèles d'hôtels avec ce nom. Alors cliquez sur notre fichier all hotels.pug. Ensuite, cette variable peut être facilement accessible dans le modèle simplement en référençant le nom. En bas du fichier, p est égal à notre variable de nom. Ensuite, vers le navigateur. Maintenant, si nous allons vers les utilisateurs de barre oblique avant puis barre oblique, nous pouvons ajouter n'importe quel nom ici, appuyez sur Entrée. En fait, tout cela était une augmentation et frapper entrée. En bas, nous voyons maintenant que je nommerais Chris, que nous avons passé. Nous pouvons essayer cela à nouveau avec tout ce que nous voulons ajouter. Ces données sont ensuite saisies de notre URL, stockées dans les objets request.params. Ensuite, nous pouvons passer est maintenant à notre modèle à utiliser de n'importe quelle façon que nous choisissons. Nous pouvons également ajouter autant de segments dynamiques que nécessaire dans l'URL. Plutôt que d'en avoir un dans index.js, juste comme ça. Nous pouvons également ajouter ce segment dynamique dans n'importe quelle section que nous voulions. Nous pourrions également saisir l'âge et le stocker dans une variable d'âge. Mais tout dépend du type de site Web que vous créez. Une autre chose que nous pouvons aussi faire si nous ne voulons pas saisir les données à l'intérieur des routes, nous pouvons aussi simplement ajouter une étoile. Tout comme ça, nous pourrions ajouter une étoile et puis cette route, juste ici, toute cette fonction fonctionnera ensuite à chaque fois qu'une route suit cette barre oblique avant tout, puis barre oblique avant toutes les données après cela. Cette étoile peut être placée dans n'importe quelle section de l'URL que vous voulez. Cela sera utile pour gérer nos noms d'utilisateur, même si nous ne voulions pas saisir les données réelles et les stocker dans une variable. Je vais maintenant supprimer ce code de la vidéo. A l'intérieur de toutes les routes, supprimons la section router.get, car nous n'avons pas besoin de cela pour ce projet. Ensuite, tous les hotels.pug, tout ce que nous avons besoin de supprimer est p égal nom, et restaurer cette boîte comme il était. Mais nous reviendrons sur les paramètres d'itinéraire un peu plus tard dans ce projet, où nous transmettrons tous les ID d'hôtel avec les informations de réservation. 17. Modèle MVC: Nous allons structurer ce projet en utilisant ce qu'on appelle le modèle MVC. MVC signifie Model View Controller et c'est essentiellement une façon de séparer notre logique en différentes parties. En haut du diagramme, nous voyons le modèle, le modèle définit comment nos données doivent être structurées. À titre d'exemple, les informations de notre hôtel auront un modèle et ce modèle restera à ce que chaque hôtel doit avoir un nom. Son nom doit être présent, et aussi une corde qui ne se réfère plus à l'Islam manteau. Aussi notre modèle d'hôtel doit avoir une description, une image, un prix, et ainsi de suite. Suivant et probablement le plus facile à saisir est la vue. La vue, qui comme ça sonne est fondamentalement l'interface utilisateur. Nous avons déjà abordé cela dans la section où nous avons créé un modèle de page, donc cela devrait être assez simple. Ensuite, il y a le contrôleur. Ce contrôleur peut mettre à jour la vue ou envoyer des données au modèle. Une utilisation typique pour un contrôleur dans notre projet sera de rechercher notre modèle d'hôtel des correspondances basées sur un pays, puis ses données peuvent ensuite être transmises au modèle ou à la vue. Nous avons déjà fait quelque chose de similaire dans la dernière vidéo, où nous avons examiné les paramètres de route. Au lieu de l'index des routes ou du fichier js, nous utilisons un contrôleur pour obtenir le nom de l'URL, puis nous avons passé ce nom à la vue pour afficher sur la page d'accueil. Nous utiliserons également le contrôleur pour faire d'autres choses, telles que la validation de formulaire lorsqu'un utilisateur s'inscrit avant de pousser ces données au modèle utilisateur. C' est un modèle qui suivra pour le reste de ces projets. Il reste bien structuré et organisé. Cela peut sembler un peu déroutant de commencer, mais nous aurons beaucoup de pratique et cela deviendra bientôt clair. Dans la prochaine vidéo, nous allons commencer ce processus de séparation en créant nos contrôleurs. 18. Utilisation des contrôleurs: Pour le moment, nous gérons la logique globale à l'intérieur de ce fichier index.js routeurs. Nous naviguons dans une certaine route, puis toute la logique est gérée à l'intérieur de cette fonction et aussi celle-ci qui est ci-dessous. Cela fonctionne bien pour les petites applications, mais nous allons bientôt dépasser ce type de configuration. Je vais séparer cette logique à l'intérieur et créer un dossier de contrôleurs à la racine de tous les projets. Passons à la barre latérale et créons un nouveau dossier appelé contrôleurs. Assurez-vous qu'il est au même niveau que tous les dossiers de niveau, tels que le bin et les modules de noeud. Ici, nous pouvons ajouter un nouveau fichier JavaScript pour chaque contrôleur que vous voulez créer. Cliquez sur les contrôleurs, puis créez un nouveau fichier. Je vais créer un contrôleur séparé pour la logique liée à l'hôtel. Puis un plus tard pour que les utilisateurs gardent les choses organisées. Commençons par créer hôtel controller.js. Contrôleur avec un C majuscule, puis appuyez sur « Entrée ». Ce fichier sera une série de fonctions et nous allons essentiellement externaliser cette section de fonction à partir de notre routeur. Nous allons prendre cette logique, mettre dans notre contrôleur, puis elle fait référence à l'intérieur de notre routeur. Commençons dans notre hôtel controller.js et commençons par A exportations. Cela permettra à ce code d'être disponible dans d'autres parties de notre application. Nous donnons ensuite à cette fonction exportée un nom de notre choix. Essayez de le garder descriptif pour que nous sachions ce que chacun fera. Appelons ceci la page d'accueil, puis définissons ceci sur une fonction. Il s'agit d'une fonction qui prend dans les objets de requête et de réponse. Ajoutons ceux-ci, afin que nous ayons un accès complet à l'intérieur de notre fonction. Ensuite, si nous passons à notre index.js, nous pouvons alors découper le res.render de nos routes domestiques et ensuite l'ajouter à notre contrôleur et maintenant serait également un bon moment pour changer le titre de la page. Réglons ça sur « Voyageons. » Nous avons maintenant notre logique séparée, donc nous pouvons maintenant passer à notre fichier index.js de routeurs. Nous pouvons supprimer cette fonction en laissant seulement dans les routes initiales et ensuite nous devons référencer notre contrôleur de cellule hôte .homepage. Ajoutons hotel controller.homepage, puis donnons à cela une sauvegarde. Si nous passons maintenant au navigateur, puis appuyez sur « Recharger », et allez à la page d'accueil, nous voyons maintenant un message indiquant que le site ne peut pas être atteint. Si nous allons à Visual Studio et puis ouvrons le terminal, nous pouvons voir que l'application a écrasé. C' est parce que nous devons exiger ce fichier de contrôleur d'hôtel avant de pouvoir y accéder. Actuellement, nous essayons d'accéder au contrôleur de l'hôtel, mais nous n'avons pas encore importé ce fichier. Pour ce faire, allons en haut de notre fichier et ensuite nous pouvons ajouter un commentaire. Donc, exiger des contrôleurs, puis mettre en place une constante, donc le contrôleur d'hôtel const, qui correspond à ce nom juste ici et alors nous pouvons exiger le fichier. Nous devons ajouter le chemin du fichier car ce n'est pas à l'intérieur du dossier des modules de noeud. Ceci est à l'intérieur du dossier des contrôleurs. Donc contrôleurs, barre oblique avant contrôleur hôtel et maintenant appuyez sur « Enregistrer ». Nous devrions maintenant voir que l'application a été rechargée. Nous avons maintenant le texte vert. Plus sur le navigateur, et l'application fonctionne maintenant une fois de plus. Ensuite, nous pouvons faire la même chose avec la route de tous les hôtels aussi. Tout d'abord, passons au contrôleur de l'hôtel et créons ceci. Donc, comme avant, on peut dire exports.listallhotels. Sauf la fonction E qui prend dans la requête, la réponse, puis sur un routeur. Nous pouvons prendre les res.render de ces, barre oblique avant tout. Collez ceci dans, puis les références fonctionnent à l'intérieur de notre routeur. Donc, supprimez la fonction d'avant. Encore une fois, nous voulons le dossier du contrôleur de l'hôtel. Mais cette fois, nous voulons la liste de tous les hôtels. Maintenant, essayons ce routeur sur le navigateur. Donc, la route principale de la maison barre oblique tout, faites défiler vers le bas et cela fonctionne toujours à. Donc, pour le moment, nous n'avons pas beaucoup gagné en ayant des contrôleurs séparés. Mais ces contrôleurs deviendront bientôt plus complexes. Surtout lorsque nous commençons à traiter des bases de données et à obtenir les vues, ainsi que la vérification des données utilisateur pour validation. Il est logique de commencer à séparer les choses dès le début, afin que les choses ne deviennent pas trop désordonnées à mesure que notre projet grandit. 19. Utiliser le middleware: middleware est un concept vraiment important à apprendre, et il est utilisé assez fortement lors de la création d'applications Express. Alors que nous allons utiliser le middleware pour ses projets, je voulais juste vous donner une introduction rapide, donc nous comprenons au moins les bases. Si nous passons à Visual Studio puis ouvrez notre contrôleur d'hôtel, nous avons les objets de requête et de réponse pour chaque routeur. Request est les données entrant et la réponse est les données qui sont retournées par le serveur. Nous pouvons utiliser le middleware entre les deux pour changer fondamentalement nos données ou faire quelque chose avec elles. Fondamentalement, un middleware agit comme une série de fonctions que nous traversons. Un exemple de son utilisation dans notre projet, sera quand un utilisateur s'inscrit. Dans ce fichier hotelController.js, je veux vous montrer un exemple rapide et ces exemples sont juste à des fins de démonstration. Vous n'avez pas besoin de suivre si vous ne voulez pas. Faisons plus d'espace et je vais créer deux autres fonctions. Exporte, s'inscrire, transmet les objets de requête et de réponse. La section d'inscription va gérer la validation des données. Cela validera n'importe quelle information utilisateur telle qu'elle vient alors cette seconde sera la fonctionnalité pour se connecter. Exports.login, en passant votre demande et réponse et cela va gérer la connexion. Disons que nous voulons avoir la fonctionnalité pour d'abord inscrire l'utilisateur. La section d'inscription valide également les détails de l'utilisateur puis suit par connexion, l'utilisateur dans. C' est généralement la fonctionnalité que nous voulons. Lorsque nous nous inscrivons à de nouveaux sites Web, nous voulons souvent être immédiatement connectés. Tout le code pour gérer ces deux sections pourrait être fait à l'intérieur d'un seul contrôleur. Mais dans ce cas, il est logique de diviser les choses en actions distinctes. C' est parce que non seulement nous voulons nous inscrire et ensuite nous connecter tout de suite, mais nous voulons également que la fonctionnalité de cette connexion soit séparée. Juste quand un utilisateur est revenu et veut juste se connecter. Évitons de répéter le même code de connexion plus d'une fois. Comment Express sait-il que nous voulons exécuter la fonction d'inscription puis suivie de la connexion ? Tout d'abord, nous devons passer un troisième argument à notre fonction. Nous appelons généralement cette variable suivante, avec leurs besoins appellent ensuite à l'intérieur de notre corps de fonction, lorsque nous sommes prêts à passer au prochain morceau de middleware, donc nous appelons le suivant à l'intérieur ici. Quand nous voulons qu'il se déplace vers le bas de la chaîne vers le prochain morceau de middleware. Il y a encore une chose à faire. Bien que nous appelons ensuite à l'intérieur de cette fonction, il ne sait pas automatiquement quel est le prochain élément de middleware. Tout ce que nous savons que nous voulons passer à la connexion, Express ne le sait pas par défaut. Nous le faisons en déclarant l'ordre du middleware dans le fichier du routeur sur le routeur index.js. Nous pouvons ensuite mettre en place un nouvel exemple de routes, nous avons router.gets. Nous allons créer un itinéraire d'inscription avec la barre oblique avant et ensuite nous pouvons ajouter nos contrôleurs. L' HotelController.Inscrivez-vous. Si vous vouliez simplement utiliser cette section d'inscription, nous utiliserions simplement un comme celui-ci. Nous pouvons en ajouter plus d'un. Nous pouvons ensuite suivre avec HotelController.login, et nous pouvons passer autant de ceux-ci que vous voulez utiliser et ensuite ceux-ci exécutés dans l'ordre, chacun nécessitant le prochain appel à l'intérieur de la fonction. Tout d'abord, nous allons utiliser la fonction d'inscription, puis ensuite nous allons la passer à la fonction de connexion et comme ce sont maintenant des fonctions séparées, cela a du sens lorsque nous voulons créer un itinéraire juste pour la connexion. Si nous avons, router.gets, quand nous arrivons à ce stade, nous voulons aussi un itinéraires de connexion et puis nous pouvons réutiliser HotelController.login. Maintenant, nous utilisons la même fonctionnalité de connexion sans répéter le même code dans plusieurs fonctions. Nous pouvons voir que cela fonctionne en ajoutant des journaux de console à tous les middleware sur le contrôleur, juste avant la prochaine, nous pouvons faire un journal de console, puis un simple message de middleware d'inscription, c en minuscules, puis copiez cette puis ajoutez ceci dans notre login. Changements pour être intergiciel de connexion, enregistrer nos fichiers et plus sur les projets. Nous devons aller à nos routes montantes, que nous mettons juste ici. barre oblique avant, à cette fin, puis appuyez sur Entrée. Maintenant, vous n'inscrivez que des routes sur la console et faites plus d'espace. Nous voyons maintenant à l'intérieur de la console en bas, nous avons le middleware d'inscription appelé en premier, ce que vous attendez parce que cela est appelé en premier et le contrôleur puis nous avons le middleware de connexion juste après. Cela signifie que le routeur passe maintenant à travers les deux morceaux de notre middleware dans la séquence correcte. Si nous allons de l'avant cependant, et le son des commentaires est la fonction suivante, enregistrez le fichier puis rechargez le navigateur sur les routes d'inscription. Dans un terminal, nous voyons maintenant que seul le middleware d'inscription a fonctionné. Le code est arrivé à cette section juste ici, puis il n'a pas été passé au prochain élément de middleware parce que nous n'avons pas appelé suivant. Il s'agit d'une introduction de base au fonctionnement du middleware. Je vais supprimer ces deux fonctions car nous n'en avons pas besoin dans nos projets. Ils juste pour la démonstration et aussi les deux nouvelles routes à installer dans le index.js, puis vérifier que cela fonctionne correctement. Dirigez-vous vers les routes de la maison et nous retrouvons maintenant à la normale. Nous pouvons charger ces routes plus tard lorsque nous reviendrons à cette partie de l'application. Enfin, nous pouvons également définir un middleware à utiliser sur l'ensemble du site, plutôt qu'une seule route spécifique dans le app.js, qui est le fichier principal. Cliquez dessus puis faites défiler vers le bas jusqu'à la section avec app.use, qui est juste ici. Ici vous pouvez voir app.use, et c'est là que nous pouvons configurer n'importe quel middleware tel que analyseur de cookies à utiliser pour toutes les routes. Ci-dessous, nous pouvons voir que nous avons la configuration du routeur d'index ici aussi. Tant pour cela que pour tous les middleware, nous pouvons d'abord ajouter une route comme premier argument pour limiter le middleware à ne s'appliquer qu'à ces routes particulières. Il y a aussi beaucoup d'utilisations pour le middleware aussi, comme les plugins tiers et nous les regarderons plus tout au long de ce projet. 20. Mise à jour importante : mLab fait désormais partie de Mongo: Au fur et à mesure que nous progressons dans le projet suivant, nous utilisons une base de données hébergée sur un service appelé mLab. mLab est un service de base de données Cloud entièrement géré que nous utilisons pour héberger notre base de données Mongo. Comme nous pouvons le voir sur la page d'accueil ici, mLab a été acquis par Mongo lui-même. Nous devons donc maintenant utiliser ce service à sa place. Le service s'appelle Mongo Atlas et c'est un swap assez simple puisque nous venons de mettre en place une base de données de la même manière, puis utilisons la chaîne de connexion fournie dans nos projets. Mongo Atlas est également libre de s'inscrire et il dispose également d'un niveau de développement gratuit. Commençons donc par aller sur mongodb.com/cloud/atlas. Si vous avez déjà utilisé Atlas et que vous avez déjà un compte, vous pouvez aller de l'avant et vous connecter. Si ce n'est pas le cas, vous devrez d'abord vous inscrire avant de pouvoir créer notre premier cluster de bases de données. Donc, si vous avez besoin d'aller de l'avant et de vous inscrire, mais je vais descendre et me connecter à Atlas maintenant. Ensuite, une fois que vous avez tous été configuré et enregistré, nous devons aller de l'avant et créer un nouveau cluster. Créer un nouveau cluster peut apparaître dans le cadre du processus d'enregistrement. Allons donc de l'avant et construisons une nouvelle grappe qui nous permettra de sélectionner notre région ou notre plan. Il existe des options préconfigurées et vous pouvez laisser les valeurs par défaut telles qu'elles sont ou changer dans la région la plus proche. Donc, je vais sélectionner les régions les plus proches moi. Gardez également un œil sur l'étiquette de niveau gratuit, qui n'est pas dans chacun d'eux. Tout le reste, je vais nous garder par défaut. Assurez-vous juste que vous voyez le coût bas en bas pour être gratuit. Ensuite, nous pouvons aller de l'avant et créer notre cluster en cliquant sur le bouton vert. place d'un nouveau cluster peut prendre quelques minutes. Donc je vais partir maintenant et revenir dès que tout sera fait. Donc, c'est mon cluster tout maintenant configuré et l'étape suivante consiste à créer un nouvel utilisateur. Si nous allons à l'onglet sécurité et puis allons ajouter un nouvel utilisateur, cet utilisateur va être pour nous-mêmes. Ainsi, nous pouvons sélectionner l'administrateur atlas, qui est l'une des options sur les privilèges. Vous pouvez bien sûr ajouter plus d'utilisateurs avec des autorisations différentes à une date ultérieure si vous en avez besoin. Ajoutez ensuite un nom d'utilisateur et un mot de passe de votre choix. Je vais ajouter un nom d'utilisateur et un mot de passe, puis aller de l'avant et ajouter notre utilisateur. L' étape suivante consiste à ajouter l'adresse IP de nos propres ordinateurs à la liste blanche de Mongo. Il s'agit d'une fonctionnalité de sécurité, de sorte que seule notre machine est autorisée à accéder à notre cluster. Vous devrez peut-être garder cela à l'esprit à un stade ultérieur lors du déploiement de l'application vers d'autres services. Alors passons à l'onglet Sécurité et cliquez sur « Liste d'autorisation IP ». Ajouter une adresse IP. Nous obtenons une fenêtre contextuelle et nous pouvons confirmer que nous voulons utiliser notre adresse IP actuelle en cliquant sur ce bouton ici. Ensuite, nous allons obtenir l'adresse IP ajoutée et ce champ suit. Donc on peut aller de l'avant et confirmer. Vous devrez peut-être donner quelques instants pour obtenir la configuration si vous voyez ce spinner en attente juste ici. Si vous n'avez pas utilisé Mongo Atlas auparavant, nous pouvons vérifier le contenu de notre base de données en cliquant sur le bouton Collections. Le bouton Collections se trouve dans l'onglet Vue d'ensemble, puis collections. Cela nous donne accès à toutes les collections de notre base de données et nous pouvons interagir avec nos données. Ajouter de nouveaux champs, ajouter de nouvelles collections et voir toutes les informations qui sont stockées dans notre base de données. Bien sûr, nous n'avons pas encore de données, mais c'est là que vous pouvez accéder à toutes les informations de notre base de données, comme les hôtels et les utilisateurs, que nous allons poursuivre et économiser de notre projet. Enfin, nous avons besoin d'une chaîne de connexion. Si nous allons à la vue d'ensemble, puis cliquez sur 'Connect'. L' option que nous voulons utiliser est de connecter votre application. Il y a également des options ici pour utiliser MongoDB Compass et également se connecter avec le Mongo Shell. Les deux connecter votre application est celle dont nous avons besoin pour le moment. Nous devons également changer la version du pilote pour être la version 2. Ensuite, nous voyons notre chaîne de connexion est affichée juste ici et nous pouvons également copier cela dans le presse-papiers. Cette chaîne de connexion est celle que nous allons utiliser dans notre projet à la place de celle fournie par MLab. Ceci est fait pour cette mise à jour. Il suffit de garder cela ouvert dans le navigateur et vous pouvez l'utiliser dans la prochaine vidéo lorsque nous nous connectons à notre base de données. Gardez également à l'esprit que vous suivez le cours, vous devrez passer par ces enquêtes Mongo Atlas pour voir vos données plutôt que mLab comme je le fais occasionnellement dans la classe. Tout ce que vous devez faire pour voir cela est de cliquer sur le bouton des collections que nous avons regardé avant. 21. Démarrer avec Mongo: Dans ce projet, nous allons traiter un peu d'information. Nous aurons des informations sur la façon dont les hôtels que nous avons et utilisent toutes les commandes que vous avez passées, ainsi que toutes les données de session que nous obtiendrons plus tard. Bien sûr, nous avons donc besoin d'un endroit pour stocker toutes ces données, et je vais utiliser une base de données MongoDB, dans ce cours, qui est vraiment populaire base de données pour les applications Node, avec beaucoup de cela aussi. MongoDB nous permet de stocker nos données dans un format JSON. Cela le rend vraiment facile à travailler, surtout lorsque nous avons utilisé des applications de type JavaScript. Nous avons déjà travaillé avec des données JSON, donc cela devrait être assez familier. Cela facilite également l'apprentissage des choses. Il y a aussi beaucoup de requêtes utiles qu'il met à disposition. La requête est une recherche sur notre base de données, et Mongo rend cela vraiment facile. Nous avons beaucoup de façons différentes d'effectuer des recherches pour obtenir uniquement les données exactes dont nous avons besoin. Par exemple, l'une des requêtes que nous allons utiliser est de rechercher dans la base de données à l'aide d'un terme de recherche qu'ils utilisent Entrée et ensuite également filtré par la note d'étoiles et la disponibilité, puis a finalement cherché les résultats dans l'ordre des prix. Nous allons également examiner beaucoup de requêtes section aussi unité. MongoDB est également libre et open source aussi. J' utiliserai également une version hébergée dans ce cours, qui est également gratuit. La version hébergée va être sur mLab, que vous pouvez trouver notre MLB.com. Cette solution hébergée est également connue sous le nom de base de données, en tant que service. Cela nous permet essentiellement d'aller rapidement avec MongoDB. Notre base de données est ensuite hébergée dans les photos cloud. Vous pouvez également configurer Mongo localement, nous avons dans notre base de données déjà hébergé est vraiment utile pour plus tard lorsque nous poussons notre application pour être serveur en direct. Il enregistre également la configuration. La première chose que nous devons faire est de créer un compte d'utilisateur, donc si vous n'avez pas déjà de compte avec mLab, je vous suggère d' aller de l'avant et de mettre la vidéo en pause, puis de vous inscrire maintenant. J' ai déjà un compte chez mLab, donc je vais aller de l'avant et me connecter, alors ajoutez les détails de connexion. Une fois connecté, nous pouvons maintenant aller de l'avant et créer de nouveaux déploiements MongoDB. Allez en haut, et cliquez sur créer un nouveau, puis nous avons quelques options à sélectionner, Je vais utiliser Amazon pour le fournisseur, alors cliquez sur cela, puis le plan sandbox gratuit, qui est parfait pour le développement et l'apprentissage. Sélectionnez cette option et sélectionnez une région. Amazon est hébergé dans plusieurs endroits à travers le monde, nous avons seulement quelques options pour est sandbox plan, donc AWS ira bien. Nous pouvons continuer, et nous pouvons sélectionner l'un d'entre eux. Ensuite, continuez à nouveau, et puis nous pouvons ajouter notre nom de base de données. Je vais appeler le mien, partageons. Continuez. Nous pouvons passer en revue tout cela, puis appuyer sur Soumettre la commande, et là nous allons c'est notre base de données let's-travel sur notre configuration. Notre base de données est vide, donc elle n'a pas de collections. Il suffit que, si on clique dessus, on peut jeter un oeil à l'intérieur. Sous l'onglet Collection, nous voyons que nous n'en avons pas pour le moment, et la collection est juste une façon de regrouper nos documents, que nous stockons, titre d'exemple, nous avons une collection d'hôtel pour stocker nos dossiers d'hôtel, collection d' un utilisateur, à stocker les abus assignés et ainsi de suite. En haut, nous avons également un URI que nous pouvons utiliser dans notre projet pour se connecter à cette base de données. Il y a un espace dans cet URI pour notre utilisateur et aussi un mot de passe, donc nous devons aller de l'avant et le configurer sous l'onglet de l'utilisateur. Cliquez dessus, puis allez à Ajouter un utilisateur de base de données. Nous pouvons ajouter un nom d'utilisateur et un mot de passe, donc je vais simplement appeler mon voyage comme nom d'utilisateur, et voyagé comme mot de passe. Créez notre utilisateur, génial. Maintenant, avez le nom d'utilisateur et le mot de passe pour remplir ces blancs. Mais d'abord, il y a encore une chose qui a besoin d'être configurée, et c'est la mangouste. js. Nous sommes libres d'utiliser Mongo directement si vous voulez, mais je vais utiliser un paquet de nez appelé Mongoose à la place. Mongoose nous permet essentiellement de donner à nos données une structure dans laquelle s'appelle un schéma. Si nous écrivons directement à Mongo, vous pouvez faire une erreur assez facilement. Si nous ne définissons pas comment nos données devraient être, Mongoose nous permettra de définir l'apparence de nos données. Par exemple, aura un schéma d'hôtel, et cela aura des champs tels qu'un nom et une description. Nous pouvons maintenant répondre au type de données, chaque champ devrait être, comme une chaîne, et aussi restreindre les caractères minimum et maximum qu'il devrait être, et aussi si le champ doit être obligatoire et ainsi de suite. Fondamentalement, cela nous empêche de faire des choses telles que l'entrée et une chaîne de texte dans un champ de prix, qui devrait être un nombre. Ce paquet nous permettra également de créer notre modèle, qui est le modèle dont nous avons parlé lorsque nous avons examiné le modèle MVC, compte tenu de la cohérence de nos données. Allons de l'avant et installez Mongoose dans notre application. Fermons le terminal avec Control C. Puis tapez npm i mongoose. Notez cette fois en utilisant la commande i plus courte, c'est juste un raccourci pour l'installation et si fonctionne bien. Appuyez sur « Entrée » donnez-lui un moment pour tirer à partir de mpm. Je vérifie si tout va bien en ouvrant notre package.json, et dans les dépendances verront maintenant que nous avons Mongoose répertorié ici. Plus d'un dans notre app.js, nous pouvons maintenant configurer notre connexion. Encore une fois dans la barre latérale, nous pouvons ouvrir app.js. Ensuite, fermez ceci, donc la première chose que nous devons faire est de configurer notre connexion. Nous devons d'abord exiger le paquet Mongoose, que nous venons d'importer. Juste après notre importation, je vais utiliser une constante, et peu importe si vous utilisez une constante ou une variable, mais je vais utiliser les constantes à partir de maintenant, donc const Mongoose égaux nécessitent Mongoose, et rappelez-vous si nous avons besoin d'un paquet à partir du dossier des modules de noeud, nous le référençons simplement par le nom du paquet plutôt que d'ajouter un chemin de fichier qui y mène. Ensuite, nous pouvons configurer notre connexion en utilisant la méthode connect, donc c'est le premier accès Mongoose. Faites défiler vers le bas sur l'app.set. Configurez notre connexion Mongoose, donc Mongoose variable.connect, puis ouvrez les supports. À l'intérieur de connect, nous pouvons transmettre notre URI de connexion à partir de mLab, alors revenez à mLab, copiez l'URI complet, et sous forme de chaîne, ouvrez les guillemets, puis collez-le dans. Plutôt, nous devons changer notre nom d'utilisateur et mot de passe, donc supprimer l'utilisateur et notre nom d'utilisateur était Voyage et le mot de passe était Voyage sur. Bien sûr, lorsque vous traitez des bases de données, vous voulez un mot de passe plus sécurisé, mais c'est juste pour la démonstration. Avoir NSURI ici n'est pas la meilleure façon de le faire, mais nous allons déplacer cela vers un endroit plus approprié plus tard. Sur la ligne suivante sur la Mongoose. connectez, nous devons mettre Mongoose. Promise, P, ça va être égal au Global.Promise, P encore une fois. Une fois que nous commençons à interroger notre base de données, nous devons traiter les informations qui nous sont renvoyées. Dans les versions antérieures de Mongoose, nous avons utilisé une configuration basée sur le rappel, mais maintenant nous pouvons utiliser des promesses qui sont beaucoup plus simples et plus faciles à maintenir. Nous pouvons configurer Mongo pour utiliser la bibliothèque Promise telle que Blueband, si nous le voulions, que nous pouvons obtenir en tant que module NPM, ou je vais le définir pour être le global. Promesse que vous avez ici, ce qui nous permet d'utiliser les Promesses natives disponibles dans ES6 plutôt que d'installer un autre module de nœud. Ensuite, en vertu de cela, nous pouvons vérifier toute erreur de connexion. Nous vérifions d'abord, nous avons une connexion Mongoose, puis une fois que nous le faisons, nous pouvons appeler .on, .on est une méthode de noeud qui ajoute un écouteur d'événement. Dans notre cas, nous voulons lister maintenant pour toutes les erreurs, donc l'erreur de composition comme le premier paramètre, puis comme un deuxième argument, en passant une fonction de rappel pour afficher cette erreur. Créons une fonction où nous transmettons une erreur, qui va générer des messages d'erreur sur la console Web. Nous faisons cette vague console.error, et pouvons passer cette error.message. Passez notre message à la console, alors donnons à cela un coffre-fort et un point-virgule aux extrémités, puis au navigateur ou à notre index, puis rechargez, et en fait nous devons redémarrer notre terminal après l'installation Mongoose, alors allons au terminal, puis exécutons npm, exécutez devstart, agitez pour lancer, puis rechargez le navigateur et vérifiez tout ce qui fonctionne toujours bien. Si vous ne voyez aucun message d'erreur à l'intérieur du terminal de Visual Studio, cela devrait être tout maintenant configuré. Si vous avez une erreur, vérifiez les fautes de frappe et vérifiez également que votre URI de base de données correspond à celui de mLab avec l'utilisateur et le mot de passe corrects, et une fois que cela fonctionne et que vous êtes sur scène, vous allez maintenant passer à la création notre modèle Mongoose. 22. Modèles de mangouste: Nous avons déjà parlé un peu de quels modèles, nous allons utiliser un Mongoose met en place nos modèles, et cela gardera nos données structurées, donc il y a moins de chance de foirer. Ces modèles sont chargés de créer des données avant de les envoyer à la base de données, ainsi que des documents écrits de la base de données. Dans notre projet, nous pouvons commencer par créer un dossier de modèles pour garder notre code organisé. Ouvrez la barre latérale, puis la racine du projet, créez Nouveau dossier appelé Modèles. Maintenant, nous avons des modèles et nos vues, et nos dossiers de contrôleurs et c'est le modèle MVC dont nous avons parlé plus tôt. Ce modèle que nous créons va être pour nos hôtels. Cela aura la structure pour le nom de notre hôtel, description de l'hôtel, l'évaluation des étoiles, et ainsi de suite. À l'intérieur de son dossier de modèles, créez un nouveau fichier, appelez-le hotel.js. Puisque nous utilisons mongoose pour notre schéma, nous devons exiger le module mongoose. Fermons ces fichiers vers le bas et se concentre sur hotel.js. À l'intérieur ici, nous créons notre constante de mongoose et exigeons le paquet mongoose, point-virgule, puis nous pouvons créer notre schéma d'hôtel, donc const HotelsChema, et cela est égal à un nouveau mongoose.schéma avec une majuscule S. Le schéma va carte ou correspondent aux données à l'intérieur de notre base de données, par conséquent, ce que nous ne sommes pas ici déterminera comment nos données de base de données seront construites. Le schéma prend un objet à l'intérieur des parenthèses, où nous pouvons commencer à construire l'apparence de chaque hôtel. Nous avons besoin d'un nom d'hôtel, alors ajoutons notre premier phonème de hotel_name. Maintenant, nous pouvons configurer cela comme un objet, nous voulons que le nom de l'hôtel soit de type. Ce sera une chaîne séparée par des virgules. Nous pouvons également ajouter quelques restrictions à ces données, nous pouvons également définir si cela doit être nécessaire, cela peut être une valeur booléenne de true ou false. Si le champ doit être présent ou à la place, nous pouvons simplement ajouter une chaîne avec un message si ce champ est manquant, tel que le nom de l'hôtel est requis. Je viens à la fin. Ensuite, nous pouvons définir le nombre maximum de caractères à 32. Ensuite, enfin, nous allons définir la garniture pour être une valeur booléenne de true. Nous supprimerons tous les espaces larges du champ du début et de la fin, laissant seulement les caractères qui répondent. C' est le schéma pour notre nom d'hôtel, et nous pouvons aller de l'avant et ajouter une configuration similaire pour notre description. Séparé par une virgule, nous pouvons demander l'hotel_description. La description doit à nouveau être le type de chaîne requis. Encore une fois, nous pouvons définir ceci pour être vrai ou à la place nous pouvons passer dans une chaîne qui sera retournée si le champ est manquant, donc la description de l'hôtel est requise. Nous pouvons également couper n'importe quel grand espace, définir ceci pour être vrai. Maintenant, nous avons le nom de l'hôtel et la description, séparer ceci par une virgule, nous avons maintenant un champ pour l'image. L' image va être un nom, donc ça va être une chaîne pour l'instant, nous reviendrons à cette image plus tard dans le cours parce que c'est une ou deux choses que nous devons traiter pour que cela fonctionne correctement. Ensuite, nous avons la notation des étoiles, la notation des étoiles va être un type de nombre. Nous voulons aussi que cela soit exigé comme tous les autres champs. Nous pouvons dire que l'évaluation des étoiles de l'hôtel est nécessaire, ajouter un commun sur les extrémités. Ensuite, nous fixons la valeur maximale à cinq, parce que nous voulons seulement que la note d'étoiles entre un et cinq. Après l'évaluation des étoiles, c'est le pays, le pays est un type de chaîne. Ceci est également requis, le texte du pays est requis, la virgule après requis. Nous voulons aussi terminer, donc c'est une valeur booléenne de true. C' est tout ce dont nous avons besoin pour le moment pour notre pays. Après le pays, nous voulons fixer le coût par nuit. Coût par nuit va être le type de nombre, car ce sera un prix, et veulent également que cela soit nécessaire. Avec une chaîne de coût par nuit, est nécessaire. La dernière information que nous voulons stocker dans notre modèle d'hôtel est disponible. Ceci est donc le concis unmanned si cet hôtel est actuellement disponible à la vente et ce sera une valeur booléenne de true ou false. Définissons le type pour être booléen et le seul autre champ dont nous avons besoin est requis, donc la disponibilité est requise. Une fois que vous êtes allé de l'avant et tapé tout cela, tout en bas. La dernière chose que nous voulons faire est d'exporter notre modèle afin que nous puissions l'utiliser dans d'autres fichiers. Bas en bas doit créer un commentaire du modèle d'exportation. Nous le faisons avec les exportations de points de module, répondez à mongoose.model, le premier volume que nous voulons ajouter est hotel. Hôtel est un nom que je vais donner à ce modèle et séparé par une virgule, nous passons également dans le schéma de l'hôtel, que nous venons de créer. Bien, c'est maintenant comme ça que notre hôtel serait construit. Maintenant, nous avons configuré notre modèle. Cela signifie que personne ne peut simplement aller de l'avant et ajouter des champs comme ils le souhaitent. Nous avons maintenant un ensemble de règles strictes que chaque hôtel doit respecter. Plus tard, nous ajouterons un autre modèle pour notre utilisateur aussi et aussi pour toutes les commandes. Nous pouvons aussi façonner leur apparence. Mais pour l'instant, on va rester avec les hôtels. La vidéo suivante porte sur l'utilisation de ce modèle pour créer notre nouveau téléphone d'hôtel, afin que nous puissions ajouter de nouveaux hôtels à notre base de données. 23. Création de notre formulaire de téléchargement d'hôtel: Avant de pouvoir pousser de nouveaux hôtels à la base de données, nous devons créer un formulaire HTML, afin que nous puissions ajouter les détails que nous voulons entrer. Cette partie formelle de notre section d'administration. Donc, ajoutons cette route admin d'abord dans le index.js. Ouvrez la barre latérale, dans les routes, puis index.js. Je vais descendre au bas de notre routeur juste pour l'exportation. Faisons un commentaire, et je dirai « Routes ADMIN ». Le premier que nous allons utiliser est router.get, car il s'agit d'une requête GET. Nous voulons que ce soit pour les routes d'administration slash avant. Ensuite, nous voulons exécuter notre HotelController, je vais l'appeler l'AdminPage, point-virgule à la fin. Comme nous pouvons le voir avec la zone rouge en bas, nous n'avons pas encore cette AdminPage dans le contrôle, donc cela devrait être le suivant. Ouvrez la barre latérale et allez à notre fichier hotelController.js, puis nous pouvons ajouter cela droit en bas. Exporte vers AdminPage, il sera égal à notre fonction, qui prend dans les objets de requête et de réponse. Ensuite, à l'intérieur du corps de la fonction, ce que nous allons faire est un res.render, cela va rendre un modèle d'administration, puis prendre un objet d'options où nous allons passer dans le titre comme nous l'avons fait précédemment. Le titre peut simplement être Admin, puis ajouter un point-virgule à la fin. Maintenant, pour le fichier admin.book pour afficher ceci. Allons créer ce modèle d'administration, ouvrir la barre latérale, dans notre dossier de vues, créer un nouveau fichier appelé admin avec l'extension dot pug. Cette route d'administration va être assez simple. Pour le moment, tout ce que nous allons faire est de passer le titre, puis de créer une liste non ordonnée. Cela va avoir quelques liens pour l'administrateur à utiliser, tels que les liens vers notre nouvel hôtel, pour modifier ou supprimer des hôtels, et pour voir les réservations qui ont été faites. Allons notre mise en page. Prolonge la mise en page tout en haut, puis remplacez le bloc de contenu. Retirez un niveau que nous pouvons passer dans notre h2, qui est le titre. Ensuite, vous voulez séparer ce titre avec les liens avec la ligne horizontale. Ces trois liens vont être une liste non ordonnée. Le premier élément de liste, imbriqué à l'intérieur, nous pouvons ajouter un lien avec le href égal à barre oblique avant admin, puis barre oblique avant ajouter. Ce sera l'itinéraire qui va gérer l'ajout de nouveaux hôtels à la base de données. Les textes de Add new hotel. Alors on fera ça deux fois de plus. Notre deuxième élément de liste est également un lien. Ce href va aller à l'admin barre oblique puis avant barre oblique éditer tiret supprimer. Texte de la barre oblique Modifier Supprimer l'hôtel. Nous reviendrons sur celui-ci plus tard quand nous examinerons l'édition et la suppression d'hôtels. Le troisième sera à nouveau pour plus tard aussi et ce sera un lien qui va lier à une route qui est avant slash admin ordres de barre oblique. Le texte de Afficher les réservations et de donner une sauvegarde. Vous pouvez tester si cela fonctionne en allant sur le navigateur puis en vérifiant les routes d'administration de barre oblique avant, puis appuyez et entrez. Si nous faisons défiler vers le bas, nous avons notre titre d'Admin, qui est passé aux modèles, puis nos trois liens que nous venons de créer. Si nous allons de l'avant et cliquez sur « Ajouter un nouvel hôtel » en haut, nous sommes pris pour transférer slash admin avant slash ajouter, qui a été mis en place juste ici. Cela entraîne une erreur en bas parce que nous avons également besoin de configurer cette route, avec un modèle de page. Retour à notre fichier de routeur, qui est index.js. Mettons cela en place avec router.get. Ce routeur était avant barre oblique admin, barre oblique avant ajouter, pour ajouter un nouvel hôtel, puis configurer notre HotelController, et le nom de fonction de CreateHotelGet avec un point-virgule à la fin. Vous vous demandez peut-être pourquoi nous avons appelé ce CreateHotelget, plutôt que simplement créer un hôtel. J' ai ajouté Get to the end car il s'agit d'une requête GET. Plus tard sera également créer une demande POST à cette création itinéraire hôtel. Il est plus clair quand nous en arrivons à ce stade. C' est maintenant notre itinéraire. Nous pouvons maintenant passer au contrôleur pour rendre notre vue. Cliquez sur « hotelController.js » en bas. Mettons ça en place. Il était Exports.CreateHotelGet met en place notre fonction avec les objets de requête et de réponse. Cela va simplement rendre une vue. Nous le faisons avec res.render, comme nous l'avons fait avec AdminPage. Le modèle que nous allons créer va être ajouter soulignement hôtel, puis passer dans les objets, ce qui envoie le titre de Ajouter un nouvel hôtel et un point-virgule à la fin. Tout comme nous ces deux administrateurs, nous n'avons pas encore créé cette page d'hôtel ajouter. Allez dans la barre latérale, allez dans les vues, et créez un nouveau fichier, appelé add underscore hotel avec l'extension dot plug. Maintenant, il s'agit d'en faire un formulaire, qui va être utilisé pour soumettre l'hôtel à notre base de données. Cela doit étendre notre mise en page, sélectionner tous les fichiers, puis bloquer le contenu. Juste avant d'ajouter notre formulaire, je vais ajouter un lien en haut de la page. Ce lien va revenir à la section admin, sorte que nous pouvons rapidement basculer entre l'ajout d'un nouvel hôtel et ensuite revenir à nos trois liens principaux. Le lien avec le href est égal à la barre oblique directe admin. Ça va être un bouton. Nous pouvons ajouter un type de bouton. Donc, tapez le bouton égal. Ensuite, nous allons également ajouter une classe que nous allons utiliser plus tard lorsque nous ajoutons un peu de CSS ou de soulignement de bouton petit. Le texte revient à admin car c'est là que cela est lié. Ensuite, tout en bas, nous passons dans le titre de notre page. Pour garder cela cohérent, nous allons ajouter ceci dans un h2. Donc h2 est égal au titre. Donnez ceci une sauvegarde et vérifiez si cela fonctionne. Actualiser la barre oblique avant admin, barre oblique avant ajouter. Sous la couche afin que nous puissions maintenant voir notre bouton de retour à l'administrateur, cliquez dessus et puis nous sommes ramenés à nos trois liens. Nous pouvons maintenant revenir pour ajouter un nouvel hôtel. Nous avons besoin de créer notre formulaire maintenant qui va avoir tous les champs dont nous avons besoin pour notre hôtel. Ces champs ont besoin d'une grande partie des données à l'intérieur de notre modèle. Allons de l'avant et créons notre forme sous le h2. Le formulaire, puis les attributs à l'intérieur des parenthèses, l'action. Cela va faire un lien vers la même page, sorte que nous pouvons garder les routes avec une chaîne vide. La méthode, ce sera une demande de poste. Ensuite, retirez-le dans un niveau. Je vais créer un div qui va avoir la classe d'entrée de soulignement de forme. Chacun de ces groupes de formulaires aura la même classe. Nous pouvons garder le style cohérent lorsque nous arrivons au CSS plus tard. Le premier sera étiqueté et ce sera pour le nom de l'hôtel. Donc, l'hôtel soulignent nom, puis le texte du nom de l'hôtel. Après l'étiquette va alors ajouter notre entrée. Cette entrée va avoir le type de texte, le nom de hotel_name. Comme je l'ai déjà mentionné, ces champs doivent correspondre aux données de notre modèle. Si nous passons à notre hotel.js et nous commencerons en haut avec le nom de l'hôtel. Cela a besoin de beaucoup de nom, ce que nous avons donné dans notre schéma. Nom de l'hôtel. Ensuite, nous ferons la même chose pour la description et aussi pour le reste des champs à l'intérieur ici. Retour à notre formulaire. Le nom du nom de l'hôtel et ce champ sont également obligatoires. La prochaine sera pour la description. La div environnante de l'entrée de formulaire, l'étiquette. Celui-ci sera pour la description de l'hôtel. Alors c'est la description de l'hôtel x-naught. Cette fois, plutôt qu'une entrée, ce sera une zone de texte. Nous faisons cette entrée, tout comme le reste des éléments. Nous pouvons ajouter le nom de la zone de texte, puis nous ajoutons les crochets ou les attributs. Nom de hotel_description. L' ID, qui est également hotel_description et nous allons le rendre plus petit afin qu'il corresponde à une ligne avec la zone de texte. Vous pouvez également définir le nombre par défaut de colonnes et également de lignes. Donc, je vais définir les colonnes à 13 et aussi les lignes à dix. Cela est également nécessaire, comme tous les autres champs. En dessous de cette chose, la prochaine sera pour l'image de l'hôtel. Donc, je vais aller de l'avant et ajouter l'emballage qui est des entrées de formulaire, l'étiquette de l'image, l'image photo textile. Cette fois, ce sera une entrée pour le fichier. Donc, les entrées avec le type de fichier, puisque nous allons utiliser des images téléchargées à partir de la machine utilisateur. Donc, le type de fichier, le nom va être image avec l'ID. Allons-y et copions ce nom de l'hôtel. Ensuite, après que l'image s'installe, celle-ci sera pour le classement des étoiles. Donc, l'étiquette aura le nom de star_rating et ce sera une note d'étoiles de 1 à 5. Classement en étoile pour le nom est le type d'entrée va être de nombre. Pour limiter cela de un à cinq avec le nom de star_rating. Ceci est également requis pour. Gardions ça entre un et cinq. Nous pouvons également ajouter les attributs min d'un et aussi les attributs maximum de cinq. Allez à sous la cote des étoiles, nous pouvons ajouter ceci à nouveau, assurez-vous que l'indentation est correcte. Celui-ci après le classement des étoiles va être pour le pays. Donc, le nom du pays, le même pour le texte. Le type d'entrée va aussi être du texte. Donc, nous pouvons nommer cela le nom du pays et aussi lui donner un ID de pays aussi. Cela est également nécessaire. La même chose après le pays. Celui-ci sera pour le coût par nuit. Donc l'étiquette va être pour cost_per_night. Texte du coût par nuit à, les entrées vont être pour le prix. Donc, nous pouvons définir ce chiffre pour être un nombre. Le nom peut également correspondre à ceci, donc nous pouvons copier ceci et coller ceci pour les entrées. Donc, nous avons le type, le nom, et nous avons aussi besoin de l'ID du coût par nuit aussi. Donc, ajoutez ceci dans et le suivant après cela, si nous allons tout droit vers le bas, va être pour la disponibilité. On va ajouter des boutons radio. Que nous pouvons sélectionner si l'hôtel est disponible ou indisponible. Donc, le wrapper des entrées de formulaire va avoir deux boutons radio. Le premier peut avoir une étiquette et ceci est disponible, le texte est également disponible. Ensuite, notre entrée, qui est le type de radio. Après le type, nous pouvons ajouter l'ID et celui-ci va être le même. Cela a également besoin d'un nom. C' est le temps de disponible. Ce sont les données que nous avons envoyées au serveur. La valeur va être égale à true et nous allons définir la suivante pour être égale à false. Donc, si celui-ci est coché, nous obtiendrons le disponible égal à true, et le suivant sera disponible égal à false. Par défaut, nous voulons que cela soit vérifié. Donc, nous pouvons également ajouter l'attribut checked à l'intérieur. Ensuite, nous avons juste besoin de faire la même chose pour indisponible afin que nous puissions copier ces deux lignes, puis les ajouter ci-dessous. Ceci n'est pas disponible tout comme le texte, puis l'entrée. Nous pouvons ajouter, enregistrer le nom, la valeur de false. Nous pouvons également supprimer cet attribut vérifié car nous ne voulons qu'un seul vérifié à la fois. Donc maintenant, la dernière chose que nous devons faire est un bouton qui va aller de l'avant et soumettre ce formulaire. Cela peut avoir le même wrapper d'entrée de formulaire. Ignorer le style cohérent. Cette fois, c'est un bouton avec le type de submit, la classe, la classe que nous avons déjà utilisée avant de button_small. Cela gardera le CSS plus cohérent et puis en capital, nous allons également ajouter le texte du bouton de Confirmer. Nous pouvons maintenant enregistrer ceci et ensuite passer à notre administrateur. Assurez-vous que nous sommes sur Forward/admin, forward /ads. Maintenant, nous devrions voir l'ajout de nouveau formulaire d'hôtel en bas. Si vous avez vu votre formulaire sans erreur, félicitations. Si vous constatez des erreurs, assurez-vous de vérifier votre code pour les fautes de frappe. Avant de passer à la vidéo suivante, nous allons enfin obtenir une poussée de l'hôtel dans notre base de données 24. Pousser vers la base de données: Nous sommes tous prêts à travailler en poussant les données de l'hôtel à notre base de données Mongo. Dans la dernière vidéo, nous avons créé un modèle appelé Art_hotel. Ce formulaire est configuré pour faire une demande de publication. Si vous allez en haut, nous pouvons voir que la méthode est définie pour poster. Cela affichera nos données de formulaire afin que nous puissions aller de l'avant et les utiliser dans notre contrôleur. En outre, l'action est définie sur une chaîne vide, que nous pouvons voir juste ici. Cela affichera les données de formulaire sur les routes actuelles, qui est avant/admin, avant/ajouter. Si nous allons sur nos routes et entrer dans le index.js, nous avons déjà une demande get sur cette route avant/ajouter juste ici pour afficher notre formulaire à nouvel hôtel. Nous allons donc dupliquer cette ligne pour créer une demande de publication. Donc copiez ceci et collez ceci ci-dessous. Nous avons besoin que ce soit une demande de poste car nous traitons une demande de poste à partir de notre formulaire. Donc router.post, encore une fois nous pouvons garder celui-ci comme avant/admin, avant/ajouter parce que c'est le chemin du fichier que nous allons poster, puisque nous n'avons pas défini nos y's dans notre action. Donc, comme il s'agit d'une demande de poste, nous pouvons changer créer un poste d'hôtel, et cela créer un middle-ware de poste d'hôtel gérera ce qu' il faut faire lorsque nous faisons une demande de poste à cet itinéraire, c'est-à-dire lorsque nous soumettons le formulaire. Mettons cela en place dans l'hôtel controller.js sous CreateHotelget. Nous pouvons faire de même pour CreateHotelPost. Donc CreateHotelPost met en place notre fonction avec la demande et la réponse. La première chose que je vais faire ici est de voir avec quelles données nous travaillons. Nous pouvons voir quelles données sont envoyées par le formulaire en utilisant res.json, donc je vais mettre les données en JSON, puis passer à la requête un corps, et c'est là que les données sont stockées dans nos objets quête. Donc, à l'intérieur de notre fonction à res.json et les données de formulaire sont stockées dans le corps des objets de requête alors passez dans request.body nous donne une sauvegarde et ensuite sur le navigateur, obtenez ce rechargement. Maintenant, nous pouvons remplir quelques données de formulaire à soumettre. C' est juste ajouter un test. C' est une donnée de test, choisissez une image, dans notre projet Voyage, puis le dossier public, les images, et nous pouvons choisir n'importe quelle image d'hôtel. Donc, je vais sélectionner Hôtel 1, une note d'étoiles de trois, pays, Portugal et tout prix est très bien. Nous confirmons, donc dès que nous avons cliqué sur Confirmer, nous faisons ensuite une demande de poste à partir de ce formulaire. Cette demande de publication va à Transport/Admin, Forward/Add. Nous avons configuré cela à l'intérieur de notre index.js pour gérer cette demande de post à cette route. Cela déclenche alors notre contrôleur d'hôtel, qui retourne ensuite notre JSON puisque nous faisons res.json et ensuite passé dans le request.body, qui stocke les données envoyées par le formulaire. Maintenant, nous pouvons voir la version JSON de notre hôtel que nous venons d'ajouter. Nous pouvons voir que ces données sont configurées dans le même format que notre modèle. Cela nous donne une meilleure idée des données avec lesquelles nous travaillons actuellement. Ce formulaire a été configuré pour être le même que notre modèle afin que les données soient dans le bon format. Maintenant, nous savons que nous avons un objet pour notre hôtel stocké dans request.body. Utiliserons-nous ces données dans notre modèle pour pousser vers la base de données ? Nous devons donc exiger notre modèle d'hôtel d'abord, le fichier de niveau supérieur. Donc, revenons au contrôleur de l'hôtel, et au sommet, nous pouvons mettre en place une constante appelée Hôtel avec le capital H, et cela nécessitera les modèles. Donc, comme une chaîne quand il passe le chemin du fichier, alors allons dans le dossier de notre modèle, puis le nom du modèle était Hôtel. Nous pouvons ensuite utiliser ce modèle d'hôtel vers le bas dans CreateHotelPost. Nous allons donc mettre en place un nouvel hôtel, transmettre les données de request.body, que nous avons vu est l'objet qui contient tous les champs de notre formulaire. Ils installent est à l'intérieur d'une variable ou d'une constante. Donc, const hôtel est égal à notre nouvel hôtel. Maintenant, nous avons notre hôtel et nous pouvons aller de l'avant et appeler en sécurité. Mais une chose d'abord, je vais marquer cette fonction comme asynchrone. Juste après les égaux, nous pouvons marquer cette fonction comme une fonction asynchrone. C' est quelque chose qui est nouveau dans ES 2017 appelé async wait. Cela rend vraiment nos vies beaucoup plus faciles en travaillant avec du code asynchrone. Ce qu'il nous permet essentiellement de faire est de mettre en pause une fonction jusqu'à ce qu'une ligne de code ait fini de fonctionner. Tout d'abord, nous marquons la fonction asynchrone, tout comme nous l'avons fait là-bas, puis la tâche suivante que notre fonction a, est d'appeler save pour dire cela dans notre base de données. Nous le faisons avec notre constante d'hôtel, puis appelez .save. Avec la sauvegarde, cependant, nous voulons nous assurer que l'hôtel a fini d'économiser avant de pouvoir commencer à faire des choses avec elle. Pour ce faire, nous pouvons ajouter une attente avant notre hotel.save, en ajoutant une attente avant cette ligne. Nous allons nous assurer que ce code s'arrête, puis attendre que cela se termine avant de passer à la ligne suivante. La raison pour laquelle nous voulons nous assurer que nous attendons l'épargne de l'hôtel avant est parce que nous allons supposer de nouvelles données de l'hôtel immédiatement après la sauvegarde. Donc, nous voulons nous assurer que la sauvegarde est terminée, il est disponible avant d'appeler d'autres lignes de code qui ont besoin de ces données d'hôtel. Donc, si nous donnons cela pour enregistrer, puis plus au navigateur, donne à cela un rechargement et de soumettre à nouveau le formulaire, puis revenir à mLab et se connecter à la base de données. Ajoutons donc nos détails d'utilisateur. Une fois que notre base de données est chargée, nous pouvons maintenant voir sur les collections Java que nous avons la collection d'hôtels, qui a maintenant un document. Si nous cliquons sur à côté pour développer, nous sommes ensuite amenés à notre test, qui est les données que nous venons de soumettre. C' est une étape importante car nous avons maintenant enregistré notre hôtel dans la base de données. Mais que faire s'il y a une erreur lors de la sauvegarde de l'hôtel ? Nous devons ajouter quelque chose à l'intérieur de notre contrôleur pour gérer les erreurs. Tout d'abord, nous pouvons envelopper le code à l'intérieur du bloc try. Donc, revenons à CreateHotelPost, nous pouvons ajouter try et ensuite déplacer ces deux lignes à l'intérieur de ce bloc try. Cela va essayer d'exécuter le code à l'intérieur et de tester les erreurs. S' il y a des erreurs, nous pouvons les gérer avec des instructions catch. Nous faisons cela à la fin, nous attrapons, nous passons l'erreur, puis à l'intérieur nous appelons ensuite, ce qui prend également l'erreur. Appeler ensuite, je passe à l'époque, passera l'erreur le long de la chaîne middle-ware jusqu'à ce qu'il atteigne un gestionnaire d'erreurs qui peut le traiter correctement. Rappelez-vous, nous avons déjà des gestionnaires d'erreurs configurés avec le framework express à l'intérieur de notre app.js, qui est en bas ici. Donc, revenez à notre contrôleur pour que cela fonctionne correctement, nous devons également passer après les objets de requête et de réponse. Donc passer ensuite ici puisque nous l'utilisons maintenant à l'intérieur de notre fonction. Si nous nous dirigeons vers McLab, à l'intérieur du navigateur, nous pouvons regarder notre hôtel. Si nous cliquons sur ce coin, puis faites glisser cela vers le bas. Si nous remarquons, à l'intérieur de cet hôtel que nous venons d'ajouter, il y a eu un ID unique ajouté avec le champ d'ID de soulignement, qui est juste ici. Rappelez-vous d'avant, nous avons dit que nous voulions utiliser await pour attendre que l'hôtel sauvegarde cette base de données avant de passer à autre chose. S' assurer que l'hôtel a bien sauvegardé signifie que nous avons maintenant cet identifiant disponible avant de passer à la ligne de code suivante. C' est seulement parce que je veux maintenant rediriger vers l'hôtel une fois qu'il aura été sauvé. Nous pouvons le faire à l'intérieur de notre contrôleur avec res.redirect. Ensuite, en passant le chemin du fichier vers lequel nous voulons aller, je vais utiliser les ticks arrière puisque nous allons ajouter des données dynamiques. Donc avant/tout, puis avant/. Nous pouvons passer le symbole $ et nos accolades. C' est quelque chose que nous avons examiné au début dans la section JavaScript. Donc, à l'intérieur ici, nous pouvons passer dans une variable. Donc, nous pouvons accéder à notre objet hôtel, qui est juste ici, puis le champ qui est l'ID de soulignement, et c'est l'idée qui avait été ajoutée dans notre base de données juste ici. Ajouter un point-virgule à la fin. Maintenant, vérifions que cela fonctionne bien en ajoutant un nouvel hôtel. Alors passons à Avance/Admin avant/Ajouter, rechargez la page. Disons test 2. Test 2 pour la description, n'importe quelle image est cinq ici. Cliquez ensuite sur Confirmer. Nous sommes maintenant redirigés vers notre itinéraire, nous avons mis juste ici, qui sera avant/tout, puis l'ID de l'hôtel. Nous pouvons maintenant voir cela dans la barre d'URL en haut. Nous avons notre identifiant unique, qui est maintenant extrait de la base de données parce que nous avons attendu cet hôtel soit créé en premier avant de passer à la redirection. Si nous faisons défiler vers le bas, nous voyons une erreur de Not Found. C' est bien parce que nous savons que nous n'avons pas encore créé cette route, mais l'essentiel est que nous avons cet identifiant unique maintenant tout dans l'URL. Nous y reviendrons plus tard lorsque nous créerons un modèle pour afficher tous les détails de l'hôtel. C' est un grand pas en avant maintenant, nous avons enregistré dans la base de données. Alors félicitations, si vous avez maintenant ce travail. Si vous ne le faites pas, assurez-vous de vérifier votre code et jetez un oeil au code fini fourni ou demandez dans les sections Q&R avant de passer à la vidéo suivante. 25. Interrogation de la base de données: Avant de regarder comment obtenir nos données à partir de la base de données ou d'une requête, nous devons d'abord ajouter quelques données supplémentaires pour revenir. Si vous passez à mLab et si vous avez ces données de test en place, nous pouvons les supprimer avec l'icône de la corbeille sur le côté droit. Je veux effacer tous les dossiers de notre base de données et m'assurer qu'ils sont tous partis. Allons de l'avant et créons cinq nouveaux hôtels avec lesquels travailler. Nous pouvons le faire si nous allons à admin, donc vote/admin/vote/add et ensuite descendre à [inaudible] en bas. Le premier que je veux appeler cet Hôtel 1 et bien sûr avec un nom plus créatif si vous préférez. Je vais prendre quelques [inaudibles] textes Ipsum à ajouter pour la description. Allons vers le bas et créons deux paragraphes. Il génère, Copier l'exemple de texte et le coller dans notre zone de texte. L' image de l'hôtel pour Hôtel 1 puis sélectionnez ceci. La note d'étoiles peut être quatre, pays Jamaïque. Coût par nuit, maintenant nous pouvons laisser cela comme disponible. Maintenant, nous le redirigeons à l'hôtel. Nous devons retourner à notre admin/ajouter. Créer Hôtel 2. Collez dans la description l'image de l'Hôtel 2. Ensuite, une note d'étoiles ira pour cinq, pays de la République Dominicaine. Coûts par nuit, ajouter quelque chose là-bas et confirmer. Il devrait y avoir deux hôtels maintenant dans notre base de données si nous frappons Reload, et nous y sommes. Ajoutons trois autres. Encore une fois, /admin/adds. Nous pouvons ajouter l'hôtel numéro trois, ajoute la description hotel3.jpg. Une note d'étoile que nous allons pour trois cette fois et Pays-Bas. Coût par nuit, disons 45, puis confirmez. Ensuite, nous pouvons ajouter Hôtel 4, l'administrateur ajoute. Puis vers le bas Hôtel 4 Coller dans la description de l'image. Le classement des étoiles ira pour cinq cette fois et le pays des Maldives. Coût par nuit, allons-y pour 89. Laissez-moi un peu comment rendre cela indisponible. On dirait que nous avons eu un petit problème là-bas en fait, nous avons tous les deux vérifié. Allons à notre formulaire, ajoutez hôtel et descendez aux cases à cocher ou aux boutons radio. Désolé. Ces besoins ont le même nom, trop dans le même groupe, essayons de recharger. Pourtant, maintenant, nous pouvons simplement sélectionner l'un d'entre eux. Allons à la base de données. Maintenant, nous avons toutes ces choses disponibles comme vraies. Je vais juste aller dans l'un de ces et cliquer sur le bouton Modifier. Nous définirons la disponibilité cette fois sur false. C' est Save et retournez en arrière. Parce que maintenant j'ai l'hôtel numéro trois à être défini sur faux. Ajoutons un autre qui est l'Hôtel 5. La description Hôtel 5 image. Le classement des étoiles laisse aller pour deux cette fois. Le pays de la Grèce, coût par nuit et nous pouvons garder celui-ci comme disponible. Maintenant, à McLab, nous devrions maintenant avoir cinq dossiers dont l'un n'est pas disponible, qui sont censés être l'hôtel numéro 3. Nous ajouterons le reste de l'hôtel plus tard. Mais maintenant, nous avons quelques données avec lesquelles travailler. Je vais vous montrer comment l'obtenir dans notre application à l'intérieur du hotelController.js. Sélectionnons ceci et nous pouvons revenir à notre liste tous les hôtels fonctionnent. Si nous faisons défiler vers le haut, nous avons la liste de tous les hôtels juste ici. Retourner toutes les données dans notre base de données est assez facile en utilisant la méthode Mongos find. Avant de rendre tous les hôtels, créons une constante appelée tous les hôtels et je vais définir cela pour être attendu parce que nous voulons que ces données soient extraites avant de rendre le modèle. Nous voulons sélectionner notre modèle d'hôtel, puis utiliser la méthode dot find et un point-virgule à la fin. La méthode de recherche trouvera tous les documents de notre collection d'hôtels et aussi la recherche dans la collection d'hôtels parce que nous utilisons le modèle d'hôtel juste ici. Ici, puisque nous utilisons await une fois de plus, nous devons également marquer cette fonction comme une synchronisation pour qu'elle fonctionne. Ajouter la synchronisation juste avant nos paramètres de fonction, nous voulons également gérer toutes les erreurs à nouveau deux afin que nous puissions envelopper ce code dans un bloc try. Coupons toutes ces deux lignes de code, ajoutons un bloc try, collez ce back-in, suivi d'un bloc catch pour gérer les erreurs. Ce bloc catch prend également les erreurs comme un argument et ensuite nous pouvons également les transmettre à suivant. Puisque nous appelons maintenant suivant, nous devons également passer cela dans la fonction. Notre prochain comme le troisième argument et avant de passer à autre chose, nous devrions vérifier que cela fonctionne. Nous pouvons commenter ce res.render que nous avons ci-dessus et le remplacer par un res.json. Cela ajoutera les données à l'écran au format JSON. Les données veulent sortir sont tous les hôtels, qui est cette constante juste ici. Alors, sauvegardez ça. Ensuite, nous devons aller sur le navigateur, puis aller à /all hit, « Enter » et maintenant nous voyons tous nos hôtels au format JSON. Ce sont toutes les données que nous extrayons maintenant de la base de données. On dirait que tout notre hôtel est retourné. Nous pouvons voir tous nos champs, y compris l'ID généré. Maintenant, nous savons que cela fonctionne, nous pouvons ensuite passer ces données à notre modèle de page pour aller de l'avant et rendre. Retournez au contrôleur. Commentons le res.json et décommentons cette méthode de rendu. En plus de le rendre, les modèles de tous les hôtels et de transmettre le titre, nous voulons également transmettre dans ces données d'hôtel de tous les hôtels. Séparé par une virgule, nous pouvons également passer dans tous les hôtels et cela sera maintenant disponible pour l'utiliser dans les modèles. Si vous donnez ceci une sauvegarde, puis passez à tous les modèles d'hôtels, qui est dans les vues. Ouvrons ça. Testez ce travail en sélectionnant des éléments p et envoyons ceci à la valeur de tous les hôtels. Donnez ça une sauvegarde. Ensuite, sur le navigateur, nous pouvons recharger les /all routes. OK et faites défiler vers le bas. Nous voyons un objet géant sur l'écran maintenant. C' est toutes les données qui sont maintenant extraites de la base de données. Nous pouvons voir si nous regardons de près, nous avons un hôtel, et si nous allons plus loin, nous avons l'hôtel deux juste ici, puis l'hôtel trois plus bas. Voici toutes les informations de notre collection hôtelière. Nous pouvons également filtrer cela si nous voulons juste le premier hôtel, par exemple. Nous pourrions le sélectionner par le numéro d'index. Tous les hôtels, le numéro d'indice de zéro, recharger. C' est toutes les données de notre premier hôtel. Encore plus loin, nous pouvons réduire cela au nom de l'hôtel. Rappelez-vous, le nom de l'hôtel est stocké dans le nom de soulignement de l'hôtel, sorte que nous pouvons y accéder en utilisant la notation point, donc nom de l'hôtel. On y va. Il y a un nom de notre hôtel. Maintenant, nous avons accès à toutes ces données hôtelières. Nous devons vivre dans tous les hôtels et afficher chacun dans cet hôtel mix-in. Nous avons déjà l'hôtel mix-in juste ici. Une fois que vous créez une boucle qui affiche ce mix-in avec toutes les informations de l'hôtel. Supprimez cet élément p d'ici. Nous pouvons ajouter notre titre de niveau 2, qui est le titre. Ensuite, nous voulons créer notre boucle, et nous allons le faire avec chaque hôtel dans tous les hôtels, puis indenter ces deux lignes dans. Tous les hôtels sont les données qui seront transmises au modèle avec toutes les informations de l'hôtel un à cinq. Chaque hôtel individuel sera stocké dans cette variable hôtelière. Maintenant, si nous sauvegardons cela et puis rechargeons la barre oblique avant toutes les routes, puis faites défiler vers le bas, nous voyons que nous avons l'hôtel numéro un. Si nous continuons à descendre, nous devrions avoir un hôtel pour chacun des éléments de notre base de données. Ceci est maintenant répété le même hôtel dans notre mix-in pour chaque article. C' est un pas dans la bonne direction car nous avons maintenant cinq éléments à l'écran, mais nous voulons que chaque hôtel soit différent. Pour ce faire, nous avons besoin d'un moyen de transmettre les données uniques de l'hôtel dans le mix-in. Rappelez-vous que nous avons dit, avant que cette variable hôtelière contient ici les informations individuelles de l'hôtel, donc c'est l'information que nous devons transmettre au mix-in. Nous pouvons le faire avec notre mix-in juste ici et passer à l'hôtel. Cela fonctionne parce que les mix-ins sont compilés en fonctions qui peuvent prendre en arguments. Si nous sauvegardons ceci et nous allons ensuite sur nos données d'hôtel dans notre mix-in, jusqu'à mix-ins, puis soulignons l'hôtel jusqu'à notre nom de mix-in en haut. Nous pouvons également recevoir ces données d'hôtel, donc passer l'hôtel comme argument, et maintenant nous avons les données individuelles de l'hôtel à l'intérieur de ce mix-in. C' est là que la bonne partie commence à se produire. Commençons par afficher le nom de l'hôtel. Faites défiler jusqu'à notre rubrique de niveau 3. Ici, nous avons du texte codé en dur parce que c'est une variable que nous ajoutons aux égaux, accéder à l'hôtel, puis point nom de soulignement hôtel. Si nous sauvegardons cela et puis rechargeons le navigateur, remontez en haut, nous avons l'hôtel un, l'hôtel deux, l'hôtel trois, quatre et cinq. Maintenant, nous voyons tous les noms d'hôtel sont uniques. Nous pouvons maintenant continuer avec le reste des détails en les rendant tous dynamiques. Ensuite, nous pouvons ajouter les données des deux liens. Le href juste ici, changeons cela pour être de retour ticks parce que ce sera dynamique. Cela va être lié à la vue complète de l'hôtel, qui va être notre barre oblique vers l'avant tout. Ensuite, nous pouvons ajouter notre section dynamique, qui est hôtel. Nous nous occuperons de cette route plus tard. Nous ferons également la même chose pour le lien ci-dessous. Copiez ceci et collez-le pour le deuxième lien. Avoir ces deux liens signifie à la fois que l'image et le nom de l'hôtel seront liés à la vue complète de l'hôtel lorsque l'utilisateur clique sur l'un ou l'autre de ces liens. Ensuite, nous pouvons traiter le chemin du fichier pour l'image. Pour le moment, nous avons juste l'hôtel image un codé dur à l'intérieur ici. Changeons cela pour être retour ticks image barre oblique, le dossier de l'hôtel à l'intérieur des images, puis barre oblique avant nous pouvons ouvrir les accolades, puis ajouter l'image de point d'hôtel. Dans notre base de données pour l'image, ces images sont enregistrées. Si nous jetons un coup d'oeil, par exemple, l'image ici est enregistrée comme hotel2.jpg. Si nous passons à Visual Studio, puis en public, puis en images à l'intérieur des hôtels, ce nom correspondra au nom des images que nous aurons ici. Maintenant, si nous sauvegardons cela et puis rechargeons le navigateur, nous devrions maintenant voir l'image unique pour chaque hôtel. Nous reviendrons sur les images plus tard parce que nous allons utiliser Cloud Storage pour les téléchargements d'images plutôt que de les stocker dans notre propre projet. Maintenant, revenons à nouveau et finissons le reste de ces données dynamiques. Les éléments p sont le bas, mais aussi maintenant vont être dynamiques. Nous devons entourer ça dans les tiques arrière, changer l'étoile. Plutôt que d'avoir la valeur codée en dur de quatre, nous pouvons à nouveau transmettre nos données dynamiques. Hôtel, puis le nom du champ, qui est l'indice de soulignement des étoiles. La même chose pour notre pays. Nous pouvons entourer cela dans les tiques arrière, remplacer le pays codé en dur par le pays de point d'hôtel. Le coût par nuit. Tout d'abord, nous pouvons ajouter un symbole monétaire puis un espace pour créer nos données dynamiques. Hôtel.COST_PER_NUIT. Passons au navigateur et voyons à quoi cela ressemble. Rafraîchissez nos itinéraires d'hôtels et vérifiez toutes ces différences. Nous en avons quatre, la Jamaïque, et 67. Ensuite, nous avons le dominicain, les Pays-Bas, et aussi les Maldives avec des étoiles différentes et des prix aussi. Excellent. Vous devriez maintenant voir toutes les données de votre hôtel à partir de la base de données. Vous pouvez également vous demander où nous avons la description de l'hôtel, eh bien nous l'ajouterons plus tard parce que cela ne doit être affiché que sur la vue détaillée de l'hôtel où nous avons plus d'espace disponible. Mais il y a un petit problème ici. Le problème étant que nous pouvons également voir l'hôtel trois. Si nous faisons défiler jusqu'à l'hôtel 3 juste ici, rappelez-vous que nous avons mis cet hôtel trois pour être indisponible lorsque nous l'avons créé. C' est assez facile à résoudre. Tout ce que nous devons faire plutôt que d'utiliser simplement la méthode find, nous pouvons également passer une requête. Retour au contrôleur de l'hôtel et liste tous les hôtels. À l'intérieur de cette méthode de recherche que nous avons ici, nous pouvons commencer par passer un objet, puis nous pouvons sélectionner les champs disponibles de notre base de données. Maintenant, nous voulons seulement trouver des hôtels qui ont ce champ sur vrai. Nous pouvons le faire avec l'éq de symbole $ et définir ceci sur true. $ sign eq est un opérateur de requête MongoDB qui vérifie l'égalité. Fondamentalement, seuls les hôtels avec le champ de disponible seront ensuite retournés. Maintenant, si nous sauvegardons ça et puis rechargeons, maintenant l'hôtel 4, et puis il saute à l'hôtel 2. Il semble que maintenant l'hôtel 3 n'est pas retiré de la base de données parce qu'il ne correspond pas à notre requête. Bien. Tout cela fonctionne maintenant. Nous allons continuer à extraire les données de notre base de données dans la prochaine vidéo où nous allons obtenir nos hôtels basés sur le pays. 26. Valeurs distinctes: Si nous nous dirigeons vers mongodb.com, qui est une page d'accueil pour notre base de données. En haut, nous pouvons voir un lien vers la documentation. Cette documentation va nous donner toutes les informations dont nous avons besoin pour interroger notre base de données. Sur le côté gauche, si nous cliquons sur commencer. Ici, nous pouvons trouver une référence complète à toutes les commandes de base de données, que nous utilisons dans ce cours, ainsi que beaucoup d'autres. En bas, nous avons une section de référence. Cliquez dessus, puis accédez aux commandes de base de données. Cela nous donnera une liste des différentes méthodes dont nous disposons. Faites défiler vers le bas jusqu'aux commandes use. En dessous, nous avons une méthode de recherche. Si nous faisons défiler vers le bas jusqu'à la requête et écrire les commandes d'opération, vous avez cette méthode fine que nous avons utilisée dans la dernière vidéo pour obtenir tous nos hôtels. La suivante qui couvrira dans ce cours est distincte et cette commande est près du sommet. On a ça juste ici. Pour ce projet, nous devons obtenir une liste des pays disponibles qui ont des hôtels situés dans. Nous pouvons avoir plusieurs hôtels avec la même loi de requête. Par exemple, nous pourrions avoir six hôtels situés au Mexique et nous ne voulons pas que le mot Mexique apparaisse six fois dans la liste de notre pays. Distinct nous permettra de renvoyer un tableau de seulement les pays distinctifs, ce qui signifie que le seul Mexique apparaîtra une fois de notre exemple. Commençons par créer les modèles de tous les pays pour cette page. Ouvrez la barre latérale, fermons certains d'entre eux. Je ferme ça. Si nous allons aux vues, nous pouvons créer un nouveau fichier à l'intérieur de ici appelé, all_countries avec l'extension .pug. Nous allons de l'avant et ajoutons notre code de base ; étend la mise en page, puis le contenu du bloc, le h2 du titre. Ensuite, l'arrêt suivant, nous pouvons ajouter la route à l'index du fichier JS. Allez dans notre index dans le dossier routes, ouvrez ceci, puis après le "/all route », nous allons ajouter router.get. Ceci vous devez gérer les routes /countries, l'hotelcontroller, et cette fois nous allons mettre en place une fonction appelée ListAllCountries, ajouter le point-virgule à la fin. Nous n'avons pas encore créé des listes de tous les pays. Alors, dirigez-vous vers le dossier du contrôleur de l'hôtel et ensuite nous pouvons l'ajouter. Ouvrons ça. Après une liste tous les hôtels ajoutons Exports.listallCountries. Configurez notre fonction. Je vais marquer ça comme asynchrone, parce que nous allons avoir besoin d'une attente à l'intérieur d'ici. Nous pouvons transmettre notre demande, notre réponse, et aussi la prochaine. Ensuite, ajoutez notre bloc try, essayez et exécutez le code, suivi de notre capture, qui va prendre toutes les erreurs, puis les passer à la suivante. Faites mon erreur sans s. Le code à l'intérieur du bloc try sera assez similaire à tous les hôtels ci-dessus. Nous commençons par créer une constante dans laquelle stocker nos données. Je vais appeler ça constant tous les pays. Cette fois maintenant, nous sélectionnons notre modèle d'hôtel, donc définissez cela égal à la capitale de l'hôtel H. Au lieu de la méthode de recherche que nous avons utilisée auparavant, cette fois nous utilisons .distinct puis pour retourner un tableau de pays distincts, nous pouvons passer dans le domaine du pays comme un puis sous cela, nous pouvons rendre nos modèles avec res.render. Le modèle que nous voulons ajouter est celui que nous venons de créer de tous les pays soulignés. Séparé par une virgule, nous pouvons passer dans notre titre. Chemin vers le texte de, parcourir par pays, je fais ce petit peu plus petit, alors nous pouvons passer dans nos données de tous les pays, que nous avons mis en place ici. Assurez-vous que cela est disponible pour l'utiliser à l'intérieur de notre modèle. Une fois cela fait, appuyez sur enregistrer, puis allez dans le navigateur, ouvrez nos projets, puis nous pouvons aller à /country, puis faites défiler vers le bas, et nous verrons le titre de la page de navigation par pays. Nous ne voyons que le titre de cette page, car c'est tout ce que nous avons actuellement configuré dans le modèle. Allons à tous les pays.pug, et corrigons cela en ajoutant les données de tous les pays. Que nous passons maintenant dans le modèle. Je vais commencer par une pellicule si, comme on l'a fait avec les hôtels. Cela va être appelé wrapper pays, puis créer une liste non ordonnée pour afficher la liste de tous les pays. Pour obtenir tous ces pays, nous devons parcourir ces données de tous les pays, qui passeront à ce modèle. Nous pouvons le faire avec une boucle, donc chaque pays dans tous les pays, créer un élément de liste, qui va également être un lien. Passez dans le href. Cela va être égal à nos prises de dos, puis /payes/, alors nous pouvons ajouter notre nom de pays dynamique. Voilà donc le pays à l'intérieur, qui est cette variable individuelle que nous traversons. Nous pouvons alors sortir le nom de notre pays. Et nous pouvons faire cette dynamique en utilisant le #, puis le {}, puis sortir le pays. Si aucun pays n'est disponible dans la base de données, nous pouvons alors effectuer un suivi avec un bloc else. Juste au même niveau que chacun, nous pouvons ajouter d'autres, que je vais mettre un élément de liste avec le texte de, il n'y a pas de pays. Maintenant, si nous sauvegardons ce fichier, puis sur nos Projets, puis rechargeons nos routes avant/pays. Ensuite, faites défiler. Nous ne voyons pas tout à fait l'information que nous attendons. Nous nous attendions à une liste de pays. Encore une fois, beaucoup de code étrange regardant ci-dessous. La raison pour laquelle cela se produit est que nous n'attendons pas que nos données reviennent avant d'essayer de les rendre à l'écran. C' est l'un des problèmes que nous avons mentionnés précédemment, parce que nous utilisons un seul poids, nous devons attendre nos données pour revenir de la base de données avant d'essayer de les utiliser dans notre application. Si nous revenons au contrôleur de l'hôtel et à la liste de tous les pays, nous avons cette fonction marquée comme un évier, mais nous n'attendons pas la valeur hotel.distinct à retourner de la base de données avant de la passer à nos modèles. Espérons que maintenant si nous sauvegardons ceci et puis rechargeons, nous obtenons maintenant la liste des pays affichés. Si nous cliquons sur l'un de ceux-ci, nous sommes alors il est pris à notre route de pays, barre oblique avant et ensuite la Jamaïque. Nous avons une erreur ci-dessous parce que nous ne sommes pas encore pris en charge cette route. Essayons un autre pour les Pays-Bas. Tout cela semble fonctionner. Il serait également agréable aussi, avec le nom de ce pays si nous pouvons également mettre dans une image liée à ce pays. Nous avons déjà les images de pays, qui sont stockées dans notre dossier Images. Images publiques. Ensuite, nous avons quelques pays avec des images ci-dessous. Allons de l'avant et utilisons ces images dans nos modèles. Alors juste sous notre lien, passez à la ligne suivante. Ensuite, nous pouvons définir une indentité d'image dans un niveau. Cela est également lié à la même route ci-dessus. Si l'image a besoin d'une source, est-ce qu'elle sera égale à o back ticks, le dossier avant/images, le dossier du pays ? Ensuite, nous pouvons ajouter le nom du pays, qui est tout simplement le pays. Ensuite, nous devons ajouter l'extension the.jpg à la fin. Si nous sauvegardons maintenant ceci et puis passez à nos itinéraires avant/pays, rechargez. On dirait que nous sommes en train de taper des erreurs. Alors regardons ça. C' est juste parce que nous avons ajouté un point-virgule dans nos modèles, que nous n'utilisons pas dans le carlin. Rafraîchir. Il y a nos images de pays à côté du nom. Pour le moment, on dirait qu'ils fonctionnent tous maintenant , mais pour le moment, nous ne pouvons pas être trop sûrs. C' est parce que nous n'avons qu'un hôtel dans chacun de ces pays. Donc, nous ne savons pas si cela montre une valeur distincte juste pour l'instant. Nous pouvons tester cela en ajoutant de petits hôtels à notre base de données. Je sais que c'est un peu répétitif, mais nous allons maintenant ajouter le reste de nos hôtels. Ensuite, nous pouvons l'utiliser pour le reste du projet. Allons à avant/admin, avant/ajouter, vers le bas, je vais ajouter l'hôtel numéro 6, puis recadrer le Lorem Ipsum. Allez sur lipsum.com, je vais créer deux paragraphes, puis appuyez sur « Générer ». Copiez ceci et collez dans notre description. Hôtel 6 a l'image, les taux d'étoiles en ce temps de quatre, le pays, Sri Lanka, les coûts, 57. Ce cône peut être disponible aussi. Admin/Add, Hôtel 7. Ajoutez la description et l'image. La note d'étoiles de cinq, le pays des États-Unis, 78. Gardez ceci tel que disponible. Retour à nos routes d'administration. Créer hôtel 8. Je vais aller à l'hôtel 12 à beaucoup de toutes les images qui ont été fournies avec le cours. Donc, ajoutez cela dans et l'hôtel 8, l'évaluation des étoiles, le pays des Maldives et la disponibilité comme vrai. Maintenant, nous pouvons voir que nous avons déjà plus d'un hôtel aux Maldives. Retour à avant/admin, avant/ajouter. Hôtel 9. Basé sur une description. Celle-ci peut être une note d'étoiles de quatre. Le pays du Mexique. Coût par nuit. Confirmez. Nous en avons besoin maintenant, passons à l'administrateur ajoute et crée le numéro 10. [inaudible] quatre, l'hôtel numéro 10, la description et aussi l'image qui est le numéro 10 aussi. Ouvre ça, la note d'étoiles de trois. Allons encore pour le Mexique. Avoir un prix, puis cliquez sur « Confirmer ». Admin ajoute, hôtel 11. La note des étoiles, allons-y pour quatre, le pays de la Thaïlande, coût par nuit, 39. Confirmez. Enfin, nous pouvons ajouter l'hôtel numéro 12, qui est le dernier. Sons en bas. Hôtel 12. La note d'étoiles de trois, République dominicaine, 56 et appuyez sur « Confirmer ». Super. Maintenant, plus de deux mLab, nous pouvons maintenant rafraîchir. Je sais que c'est un peu ennuyeux et répétitif. Mais maintenant, nous avons tous les 12 hôtels dans la base de données. Nous avons donc beaucoup d'informations à utiliser dans nos projets. J' ai donc fourni 12 images. Vous pouvez bien sûr ajouter plus d'hôtels, si vous préférez. Il y a maintenant plus d'un hôtel situé aux Maldives, au Mexique et aussi en République dominicaine. Maintenant, si nous passons à l'avant/pays, puis appuyez sur « Entrée », faites défiler vers le bas. Nous pouvons maintenant voir tous les pays supplémentaires que nous avons ajoutés. Il n'y a qu'un seul de chaque volume. n'y a donc qu'un Mexique, une République dominicaine, et aussi un Maldives, ce qui signifie qu'avec des valeurs distinctes sont maintenant en train de tirer correctement. Maintenant, nous allons passer à l'examen des pipelines d'agrégation. 27. Le pipeline d'agrégation: Le pipeline d'agrégation est une caractéristique intéressante de MongoDB. Cela nous permet essentiellement de traiter les données une étape à la fois. Actuellement, seule la documentation Mongo d'avant. Si nous allons dans le menu à gauche, nous pouvons aller à la section d'agrégation, cliquez dessus. Si nous faisons défiler vers le bas, nous voyons un diagramme qui a un exemple de la façon dont nous pouvons utiliser le pipeline d'agrégation dans nos projets. Cet exemple utilise une collection appelée Orders, que nous pouvons voir ici. comparable à notre sélection d'hôtels, que nous avons dans notre base de données. Cette image montre les étapes libres du pipeline qui se traduit par les données que nous voulons éventuellement sur le côté droit. Chaque étape de l'opération pourrait faire des choses telles que le filtrage, regroupement ou le tri des documents jusqu'à ce que nous finissions avec les données correctes. La première étape de cet exemple montre ici quatre enregistrements à l'intérieur de notre collection. Nous définissons ensuite une étape de correspondance, nous déclarons ensuite que nous voulons seulement faire correspondre tous les documents avec le code des étoiles de A. Sur le côté gauche, nous voyons la seule liberté de ce code A, et le dernier a D. Par conséquent, seulement trois de ces quatre documents peuvent correspondre, puis ces trois passent à l'étape suivante, qui se trouve au milieu de ce diagramme. Les étapes sont regroupées par l'ID client, que nous définissons ici avec le stage de groupe, où nous regroupons avec un champ ID. Ces deux personnes ont le même ID client. Par conséquent, ces résultats sont regroupés dans les mêmes résultats. Ensuite, le troisième est unique aussi. Nous filtrons maintenant à deux résultats. La deuxième partie de cette étape consiste à regrouper le montant total de ces deux commandes passées par le même client. C' est ce que nous voyons dans l'ensemble de la phase finale. Pour en savoir plus sur ce que nous pouvons faire pour chacune de ces étapes, nous pouvons cliquer sur la barre latérale et descendre à la référence d'agrégation, puis la référence rapide du pipeline d'agrégation, puis faire défiler vers le bas. Ici, nous voyons une liste de toutes les étapes que nous pouvons utiliser. Nous en avons déjà vu certains dans les exemples précédents, comme la phase de groupe. Nous avons un groupe juste ici, et aussi défiler plus bas. C' est l'étape de match que nous avons également vu. Vous pouvez cliquer sur l'une de ces étapes répertoriées et découvrir ce que chacune d'elles fait. Ou je vais passer en revue certains de ces exemples maintenant, à l'intérieur de nos projets. Si nous passons au fichier controller.js de l'hôtel, nous avons des fonctions pour obtenir tous les hôtels et tous les pays dans la base de données. Lequel de ces deux-là, mais si nous voulons être un peu plus précis sur les données que nous avons récupérées sur la page d'accueil. Je veux aussi montrer que ces hôtels limitent les résultats à seulement neuf pour que nous n'ayons pas une page d'accueil surpeuplée. Une fois que notre base de données stocke beaucoup plus d'enregistrements différents. Il en va de même pour les pays aussi. Pour ceux-ci, nous pouvons utiliser le pipeline d'agrégation pour filtrer ces résultats pour la page d'accueil. Créons des filtres pour filtrer ces valeurs. Exports.home, je vais appeler cette fonction les filtres de page d'accueil. Nous configurons cela comme une fonction asynchrone afin que nous puissions utiliser wait, passer dans la requête, la réponse, et aussi suivant. Ensuite, un bloc try-catch pour gérer toutes les erreurs, en passant l'erreur. Ensuite, appelez suivant avec cette erreur. Commençons par filtrer les hôtels à l'intérieur du bloc d'essai en haut. Nous pouvons utiliser la méthode d'agrégation. Tout d'abord, mettons en place une constante pour tenir ces hôtels. Const hotels equals attend notre modèle d'hôtel. Ensuite, nous appelons une méthode sur notre modèle d'hôtel, tout comme nous l'avons fait ci-dessus avec distinct et aussi pour la méthode de recherche. Mais cette fois, nous utilisons hotel.aggregates avec un point-virgule à la fin. Cela prend un tableau des différentes étapes. Ajoutez un tableau vide à l'intérieur ici. La première étape que je vais utiliser est la phase de match. Ouvrez les accolades, le symbole $ correspond. Ensuite, nous voulons faire correspondre les hôtels qui sont disponibles. Définissez les champs disponibles sur true, puis ajoutez une virgule à la fin. Prochaine étape, de sorte que la page d'accueil il ne soit pas trop bondé. L' étape de l'exemple de signe $. Sélectionnez au hasard le nombre de documents que nous avons spécifiés. $, nous pouvons définir cette taille d'échantillon pour ne renvoyer que neuf documents. Vous pouvez bien sûr changer cela pour être n'importe quelle valeur que vous préférez. Cette agrégation que nous avons configurée reviendra vers neuf hôtels aléatoires, dont la disponibilité est définie à deux. Nous pouvons maintenant faire une chose similaire avec les pays. Nous voulons également montrer seulement neuf pays aléatoires sur la page d'accueil. Tout comme tout à l'heure, lorsque nous avons affaire à des pays, cela doit à nouveau, ne retourner chaque pays qu'une seule fois. Même s'il y a plus d'un hôtel par pays. Pour ce faire, nous avons la phase de groupe. Mettons en place une constante de nombre cette fois appelée pays, définissez ceci comme hôtel. agrégat, en passant notre tableau. Le premier sera la phase de groupe, le groupe de symboles $. Lorsque nous utilisons le stage de groupe, nous devons également passer un ID avec -id est égal à produire nos documents avec un champ ID qui contient le groupe distinct par une clé. Ce champ est obligatoire et nous allons le regrouper par un nom clé de pays de symbole $. Cela regroupera tous nos hôtels par pays, puis séparés par une virgule. Nous pouvons à nouveau configurer notre échantillon, l'échantillon, tout comme les hôtels vont retourner la taille de l'échantillon de neuf pays. La phase de groupe prendra dans tous les pays comme une contribution, puis je vais mettre une valeur distincte. Par exemple, s'il y a deux hôtels aux États-Unis, nous n'obtenons que la valeur de ceux des États-Unis à l'intérieur de notre gamme. Maintenant, nous avons créé nos filtres. Nous voulons que ces données soient affichées sur la page d'accueil. Allons et recommençons dans le index.js. Oui. On peut changer la manette en haut. Donc, pour la barre oblique vers l'avant, au lieu d'utiliser le contrôleur de l'hôtel pour la page d'accueil. Nous pouvons changer ceci pour être les filtres de la page d'accueil, que nous allons configurer, de retour dans le contrôleur de l'hôtel. Si nous faisons maintenant défiler vers le haut et trouver cette page export.homepage, nous n'avons plus besoin de cela, donc nous pouvons commenter ceci. Enfin vers le bas dans nos filtres, en bas, la dernière étape de ce bloc try est de faire un res.render. Nous voulons rendre notre page d'index, qui est la page d'accueil. Ensuite, à l'intérieur, nous allons transmettre nos deux valeurs, à savoir les hôtels et les pays. Nous pouvons les parcourir sur la page d'accueil, analysant les pays, puis maintenant les hôtels et en fait nous devons aussi attendre des pays aussi. Donc, comme une note de côté, en attendant des promesses comme celle-ci, en utilisant attendre ici et aussi attendre ici n'est pas une bonne idée. C' est quelque chose que nous reviendrons vers vous et réparerons plus tard. Pour l'instant, cependant, plus dans notre fichier index ou poke, nous pouvons traiter avec ces pays et aussi avec les hôtels. Donc, pour l'instant, bien que dans notre fichier index.pug, nous pouvons maintenant traiter ces données de pays et d'hôtels. Alors allez aux vues, puis index.pug. Fermons la barre latérale. En ce moment, si nous allons à notre route natale. Cliquez donc sur le logo en haut. Sur cette page d'accueil, nous avons une erreur parce que nous n' analysons pas encore les détails du pays dans ce mix hôtelier. Allons maintenant et passons en revue toutes les données qui seront maintenant passées et ensuite nous pouvons afficher cet hôtel mix-in pour chacun d'eux. Après notre texte de CO, créer sur une autre liste, nous pouvons ensuite parcourir tous les hôtels avec chaque hôtel dans les hôtels. Rappelez-vous hôtels est les données qui ont été transmises à ce modèle juste ici. Donc, chaque hôtel dans les hôtels. Pour chacun de la base de données, nous voulons également afficher ce mix dans et en plus de l'afficher, nous devons également transmettre les données individuelles de l'hôtel, ce qui est disponible dans le mix in. Donnons ceci une sauvegarde, puis rechargeons sur la page d'accueil. Maintenant, nous pouvons voir certains hôtels maintenant listés sur l'écran. Vérifions. On en a neuf. Nous avons 1, 2, 3, 4, 5, 6, 7, 8, 9. Tout ça semble fonctionner bien. Retournez à l'index. Nous devons faire une chose similaire maintenant pour les pays. En dessous, nous pouvons ajouter un wrapper. Assurez-vous que cela est au même niveau que le wrapper d'hôtel ci-dessus à .country_wrapper, pour le CSS plus tard. Le texte h2 des pays, un lien, et c'est tout comme le lien d'en haut ici, qui va la moitié de la href vers les pays barre oblique avant , puis entre les crochets le texte de voir tout. Nous avons ces deux liens ici pour les pays et aussi pour les hôtels. Parce que n'oubliez pas que nous avons limité la taille de l'échantillon et la page d'accueil à ne montrer que neuf hôtels répartis sur neuf pays. Par conséquent, un lien vers une nouvelle page pour tous les hôtels et aussi tous les pays permettra alors à l'utilisateur de voir tout ce qui est dans notre base de données. Mais on y reviendra plus tard. Ensuite, je vais annuler la liste pour afficher les pays, fera la même chose que ci-dessus. Nous allons dire chaque pays dans les pays, puis créer un élément de liste pour chacun. Avec un lien imbriqué à l'intérieur. Le href est avec dynamique donc ouvrir le dos prend pour continuer à lier aux pays barre oblique avant. A l'intérieur, nous voulons passer dans le pays. _id. Nous devons utiliser le pays. id parce que si vous vous souvenez d'avant dans la méthode d'agrégation, si nous revenons à notre contrôleur, nous définissons l'ID unique dans la phase de groupe comme étant le pays. Maintenant à l'intérieur de notre index, ce champ ID est l'endroit où notre nom de pays est maintenant stocké. Ensuite, nous pouvons afficher la même valeur. Donc, le dur, les accolades, puis pays._ id pour afficher ceci sous forme de texte à côté du lien. La dernière chose pour ce modèle est d'ajouter également l'image, la source de l'image. Encore une fois, cela utilise les prises arrière. Donc barre oblique avant c'est le dossier des images, le dossier du pays pour saisir l'image du pays et puis tout comme ci-dessus, nous pouvons passer dans le nom du pays, qui est la valeur du pays. _id avec le. Extension JPG. Donc juste pour que cet ID de soulignement soit un peu plus clair, si nous allons au contrôleur de l'hôtel plutôt que de rendre cette page d'index, faisons juste un .json rapide et ensuite nous pouvons afficher les données des pays. Enregistrez ceci, puis rechargez la page d'accueil. Maintenant, nous voyons que ce champ d'identification obligatoire est maintenant défini sur le pays individuel. C' est pourquoi nous utilisons l'ID de soulignement dans notre modèle pour accéder aux valeurs de pays, puis les afficher à l'écran. Maintenant, si nous rétablissons notre contrôleur d'hôtel, supprimez tous les res.json et ajoutez le res.render, sauvegardez ceci et rechargez notre page d'accueil. Nous devrions maintenant aussi voir neuf pays. Allons vers le bas, 1, 2, 3, 4, 5, 6, 7, 8, 9. Pour les hôtels, nous disons aussi neuf, que nous avons compté avant et si nous faisons défiler, nous ne devrions pas voir aucune référence à l'hôtel 3 parce que celui-ci est dit indisponible. Donc tout cela semble bien et chaque fois que nous nous rafraîchissons, nous devrions les voir dans un ordre différent parce que nous utilisons une sélection aléatoire de nos hôtels. Il s'agit d'une introduction au pipeline d'agrégation. Nous reviendrons à cela plus tard lorsque nous commencerons à travailler avec l'outil de recherche que nous avons ajouté dans l'en-tête. Dans la prochaine vidéo cependant, nous allons continuer à travailler avec Mongo en regardant comment mettre à jour les données de notre base de données. 28. Le formulaire de modification et de suppression: Si vous allez à notre application, puis passez à la section admin, donc /admin, puis descendez au bas, nous avons déjà utilisé ce nouveau lien d'hôtel, que vous voyez ici. Mais maintenant, nous allons passer à autre chose et travailler avec le lien Modifier/Supprimer l'hôtel. Il va créer un lien vers un formulaire où l'administrateur peut rechercher un hôtel en utilisant l'identifiant de l'hôtel ou le nom de l'hôtel. Ensuite, une fois que ce formulaire est soumis, il retournera le match à l'hôtel et nous permettra de passer à la mise à jour ou à la suppression de l'hôtel. La première étape consiste à créer un modèle de page avec un formulaire. Passons à la barre latérale, puis dans nos vues, créez un nouveau fichier appelé edit_remove.pug. À l'intérieur, nous pouvons étendre les mises en page afin étend les mises en page, puis bloquer le contenu et assurez-vous que c'est orthographié correctement. Je vais juste prendre un formulaire simple où vous pouvez chercher l'identifiant de l'hôtel ou le nom de l'hôtel. Pour commencer, je vais juste ajouter un titre de niveau 3 pour le titre que nous allons passer plus tard, le formulaire, l'action peut être égale à une chaîne vide parce que nous allons ajouter une requête de poste à l'itinéraire actuel sur lequel nous sommes. La méthode va être POST et ensuite imbriquée à l'intérieur ici, je vais ajouter un div avec la classe de form_input. Commençons par ajouter une étiquette pour le premier qui va être l'identifiant hôtel, donc étiquette pour hotel_id, puis le texte de Hotel id. L'entrée, il va avoir le type de texte, le nom de hotel_id, puis un id qui correspond à son étiquette. Rappelez-vous avant que nous ayons dit que nous pouvons soit rechercher cet hôtel qui veut mettre à jour ou supprimer en utilisant cet identifiant d'hôtel, ou nous pouvons rechercher le nom de l'hôtel si nous le préférons. Ajoutons un élément p avec le texte de ou si l'utilisateur sait qu'il peut utiliser son id ou son nom. Je vais copier ces entrées de formulaire, puis coller ceci ci-dessous. Assurez-vous que tout est bien aligné et ensuite celui-ci sera pour le nom de l'hôtel. Changer id pour être nom, le nom aussi, et aussi l'id. Cela a aussi le type d'entrée de texte aussi et la dernière chose que nous devons faire est d'ajouter une nouvelle entrée de formulaire. Cela va être pour le bouton à soumettre qui va être type de submit, et aussi la classe pour correspondre à certains des autres boutons que nous avons créés plus tôt de button_small. Les textes de confirmation. Sauvegardez ça et nous sommes prêts à y aller. Il s'agit d'un formulaire qui va chercher l'hôtel que vous souhaitez mettre à jour ou supprimer. Si nous passons maintenant à notre fichier admin et .pug, c'est le lien du milieu qui a regardé avant. Cela lie maintenant à /admin/edit-remove donc je vais copier ceci et ensuite nous pouvons aller de l'avant et traiter la route à laquelle cela est lié. Nous le faisons comme toujours à l'intérieur du fichier index.js. Je vais ajouter ceci à l'intérieur de cette section d'administration. Routeur, et ceci est une requête get, coller le chemin du fichier de edit remove. Cela va exécuter l'HotelController et je vais créer une fonction appelée EditRemoveGet. Maintenant, nous pouvons créer cette EditRemoveGet à l'intérieur de l' HotelController, donc vers le bas, Exports.EditRemoveGet et configurer ceci pour être une fonction qui prend dans une requête et des objets de réponse. Tout ce que nous devons faire à l'intérieur ici est d'arrêter ou rendre pour tout modèle de page qui est créé. Le modèle de page a été appelé edits_remove séparé par des virgules. Nous pouvons ensuite passer dans notre titre pour notre page de Recherche d' hôtel à modifier ou supprimer. Ajouter un point-virgule à la fin. Enregistrez cela et allez sur le navigateur, puis cliquez sur Modifier/Supprimer l'hôtel. Espérons que nous devrions obtenir notre formulaire en bas. Maintenant, nous avons notre formulaire une fois que l'administrateur clique sur le bouton de confirmation après avoir ajouté un identifiant ou un nom. Cela enverra alors une demande de poste donc nous devons résoudre cette demande de poste à nouveau dans le index.js. Ensuite, dupliquez le code d'avant, collez-le dans. Nous allons utiliser la même route mais cette fois créer une demande de poste. router.post et au lieu de EditRemoveGet, ce sera EditRemovePost. Ensuite, configurez cela à l'intérieur de notre contrôleur, aussi controller.js, donc Exports.EditRemovePost. Cela va traiter de la base de données afin que nous puissions marquer cela comme asynchrone afin que nous puissions utiliser une attente dans la fonction, passer une requête, réponse, et aussi suivante. Configurez notre bloc try et aussi le catch pour toutes les erreurs qui passeraient ensuite à suivant. La première chose que nous allons faire à côté de ce bloc d'essai est de récupérer les données qui nous sont envoyées. À l'intérieur de notre formulaire, nous allons recevoir soit un identifiant d'hôtel soit le nom de l'hôtel, alors nous allons avoir quelques constantes pour stocker ces valeurs. Le premier de HoteLid. Ce HoteLid va être stocké à l'intérieur de request.body. Parce que nous faisons une demande de publication, nous pouvons accéder à ces données si nous passons à notre formulaire dans Édit/Supprimer. Maintenant, nous pouvons accéder à ceci avec le nom que nous lui avons donné ici de hotel_id. Nous utilisons ceci à l'intérieur ici, donc hotel_id, et je vais utiliser l'opérateur de deux tuyaux pour dire tout ou null. La raison pour laquelle nous faisons cela est que seul l' identifiant de l'hôtel ou le nom de l'hôtel sera présent. Par conséquent, l'ensemble va être nul. Par conséquent, nous devons gérer ce qui se passera si nous obtenons une valeur nulle. On peut faire la même chose juste en dessous. Constante pour HotelName est égale à req.body, et celui-ci est .hotel_name, donc nous aurons soit le nom de l'hôtel, soit il sera nul. Tout comme précédemment, nous allons aussi maintenant rechercher ou modéliser en utilisant la méthode .find. Nous allons avoir les constantes appelées HotelData égales à attendre Hotel.Find. Nous allons faire quelque chose d'un peu différent cette fois parce que nous ne savons pas si nous cherchons l'identité de l'hôtel ou le nom de l'hôtel. Parce que nous ne pouvons pas être sûrs quelles données nous sont transmises, Mongo nous fournit l'opérateur all et ensuite nous pouvons fournir un tableau de ces deux valeurs pour rechercher l'une ou l'autre. Passer nos objets, puis utiliser le $or. Cela va prendre dans un tableau et à l'intérieur de ce tableau, nous pouvons transmettre nos deux valeurs que nous voulons rechercher. Ouvrez les accolades. Le premier est notre identifiant d'hôtel. Si nous recevons l'identifiant d'hôtel à partir du formulaire que nous voulons rechercher par l'identifiant. L'id Mongo est _id donc nous pouvons vérifier si cela est égal à l'identifiant d'hôtel qui est notre constante juste ici. Si ce n'est pas présent, séparé par une virgule, nous pouvons ajouter une seconde vérification. Le deuxième cas est pour si nous recevons le nom de l'hôtel au lieu de l'identifiant. Par conséquent, nous voulons vérifier le champ appelé hotel_name de notre base de données. Ensuite, nous voulons vérifier si cela est égal à notre variable HotelName, que nous avons juste ici. Ajouter HotelName- J'espère que cela a du sens. Nous faisons une méthode de recherche, et nous utilisons l'opérateur o pour vérifier si l'un de ces champs est une correspondance. Après avoir utilisé notre méthode de recherche de points, nous allons maintenant spécifier un classement à rechercher. Si nous supprimons simplement le point-virgule à la fin pour l'instant, puis enchaînons sur la fin .collation, ouvrez les crochets, puis passez dans un objet. Le classement nous permet de faire des correspondances spécifiques à la langue, donc je vais juste taper lui-même et maintenant. Les paramètres régionaux vont être envoyés à fr, ajouter une virgule, puis la force comme une valeur de deux, alors ajoutons un point-virgule à la fin. En utilisant le classement, comme nous l'avons ici, le classement nous permet de faire des correspondances spécifiques à la langue. Ici, nous déclarons que nous utilisons des textes anglais, et la force est une valeur facultative. Définir la valeur de deux est un niveau secondaire de comparaison, ce qui signifie qu'il n'est pas sensible à la casse. C' est bien parce que cela signifie que nous pouvons, par exemple, simplement taper le mot hôtel à l'intérieur de notre formulaire ici, juste comme ça, sans utiliser un h majuscule, et vous trouverez toujours l'hôtel dans la base de données. Il y a aussi différents numéros que vous pouvez utiliser ici, et ceux-ci sont tous répertoriés dans la documentation si vous en avez besoin. Ensuite, nous allons ajouter une instruction if else pour gérer le résultat de ce qu'il faut faire si un résultat a été trouvé dans la base de données. Revenons à notre code. Après cela crée une instruction if. Si l'HotelData qui est cette constante juste ici, .length est supérieure à zéro. Ici, nous vérifions fondamentalement si cette méthode fine a stocké des valeurs à l'intérieur de HotelData. Si c'est le cas, la valeur sera supérieure à zéro, donc nous pouvons alors aller de l'avant et faire un res.json, et sortir notre HotelData. Nous reviendrons bien sûr à cela après avoir fait de l'HotelData notre modèle, mais pour l'instant nous pouvons simplement laisser cela comme un res.json, puis nous ajoutons au mot-clé return par la suite, donc nous ne passons pas à l'instruction l si la section est vrai. Si c'est faux, nous créons ensuite une instruction else, puis nous pourrions faire res.rediriger pour rediriger l'utilisateur vers /admin/edit-remove. Fondamentalement, si aucune donnée n'est trouvée dans la base de données ou qu'il n'y a pas de correspondance, nous allons juste être redirigés vers la page en cours, donc au navigateur, nous pouvons donner cela un coup de pouce. Ensuite, nous allons tester pour l'hôtel 7, il confirme, et puis nous obtenons notre res.json avec l'HotelData retourné. Les données de l'hôtel correspondent à l'hôtel 7 ce qui est bon, et nous avons également utilisé la minuscule pour cette recherche 2. Essayons aussi avec l'ID de l'hôtel. Prenons l'un de ces ID d'hôtel de McLab, hôtel 6, ajoutez-le, confirmez-le. Maintenant, nous récupérons la valeur de l'hôtel 6. Ce que je veux faire maintenant, plutôt que de faire une res, json juste ici, je vais créer un nouveau modèle de page appelé hôtel sur le détail du défilement. Ce sera essentiellement la vue étendue de l'hôtel avec la description complète. Commençons par supprimer notre res.json, et au lieu de le faire dans res.render, passez dans notre modèle que nous allons créer de hotel_detail. Le titre de la page de Ajouter/Supprimer Hôtel, puis passez dans notre HotelData, puis ouvrez la barre latérale. Nous pouvons maintenant créer ces modèles de détails d'hôtel. À l'intérieur des vues, créez un nouveau fichier de hotel_detail. Je vais mettre. Ces modèles seront également réutilisés plus tard, nous en aurons également besoin lorsque nous cliquerons sur l'un des hôtels individuels notre liste pour être ensuite amenés à la vue de description étendue, alors nous allons travailler sur les détails de notre hôtel, étend donc nos mises en page. Cette page va également être utilisée pour remplacer ce res.json, donc dès que nous aurons un hôtel correspondant, nous afficherons cet hôtel sur l'écran. Nous devons également importer notre hôtel Mixin afin que nous puissions réutiliser le même code et l'afficher à la place de ce res.json. Dans notre modèle, nous pouvons inclure mixins/_hotel, contenu de bloc. m en retrait, nous allons maintenant faire une boucle à travers chaque hôtel dans HotelData. HotelData, rappelez-vous, a été passé à ce modèle juste ici, retour à nos modèles, nous pouvons créer notre boucle, chaque hôtel dans HotelData. Nous pouvons utiliser la div de .hotel, autant que le reste de la CSS plus tard, puis d'autres vont mélanger sera plus hôtel passant dans l'hôtel individuel que nous avons ici dans la boucle. Maintenant, si nous sauvegardons cela, puis sur notre code, rechargez le navigateur, puis faites défiler vers le bas. Maintenant, plutôt que ce res.json, nous rendons maintenant notre hôtel en utilisant cet hôtel detail.profile. Nous passons également dans son hôtel à notre hôtel Mixin pour réutiliser le code, qui affiche notre hôtel. Nous sommes à peu près terminés pour cette vidéo, la dernière chose que je veux faire en haut de cet hôtel est d'ajouter deux boutons. L' un va être un bouton qui va aller de l'avant mettre à jour cet hôtel que nous avons sélectionné, puis le second va être de supprimer cet hôtel. Dans le détail de l'hôtel au-dessus de notre Mixin, ajoutons un lien pour notre bouton. Le href va partir, j'ai besoin de l'abatique, le symbole de l'hôtel. Hôtel._ id/mise à jour. Ici, nous créons un itinéraire de l'ID de l'hôtel, suivi de /update. C' est ce que nous utilisons dans la vidéo suivante pour gérer la mise à jour, imbriquée à l'intérieur ici, ajouter notre bouton avec la classe de bouton petit, puis le texte de mise à jour hôtel. Maintenant, si juste copier ces deux lignes, et ajouter ceci une fois de plus juste en dessous. Ceux-ci peuvent également être pour nos routes de suppression, donc le changement est de supprimer. Ensuite, celui-ci peut être Delete Hotel. Donnez cette sauvegarde, puis rechargez le navigateur, confirmez la soumission du formulaire, et il y a nos boutons de mise à jour et de suppression en haut. Plus tard, nous masquerons également ces boutons pour que seul l'administrateur puisse les voir. Maintenant, à l'intérieur de notre section d'administration, nous avons créé un bouton vers le bas tout en bas qui liens vers l'édition supprimer la vue de l'hôtel. Ici, nous pouvons maintenant rechercher un hôtel en utilisant l'ID ou le nom de notre hôtel comme celui-ci. Nous pouvons ensuite cliquer sur confirmer, ont été ensuite emmenés à l'hôtel qui a été sélectionné, et puis nous avons la possibilité de mettre à jour ou supprimer cet hôtel, et cette fonctionnalité de mise à jour de l'hôtel est ce que nous allons déplacer dans la vidéo suivante. 29. Mise à jour des dossiers: Nous avons maintenant cherché avec succès la base de données de l'hôtel et nous l'affichons dans notre vue. Dans la dernière vidéo, nous avons également ajouté ces deux boutons pour mettre à jour et aussi supprimer l'hôtel. Si nous cliquons sur le bouton « Mettre à jour l'hôtel », nous passons maintenant l'ID de l'hôtel dans l'URL en tant que paramètre, juste avant les mises à jour de slash. C' est parce que nous avons mis en place cela dans l'hôtel detail.profile. On l'a mis en place juste ici, à l'intérieur de notre lien. Avec cet identifiant unique d'hôtel, nous allons sélectionner l'hôtel dans la base de données que nous voulons mettre à jour ou supprimer. Tout d'abord, nous pouvons gérer la route dans le fichier index.js. Dans notre section admin sur l'édition supprimer, ajoutons router.get. Dans cette vidéo, nous allons gérer les mises à jour. L' itinéraire est la barre oblique avant de l'administrateur. Nous voulons que cette section soit dynamique, donc nous utilisons un deux-points et donnons à cet ID un nom d'hôtel ID. Puis mettre à jour. On veut diriger le contrôleur de l'hôtel. Ensuite, créez une fonction appelée Update hotel get. Cela affichera alors un formulaire sur un écran qui nous permettra de modifier les détails de l'hôtel avant de créer une demande de poste pour réellement les soumettre à la base de données. Plus dans le contrôleur de l'hôtel, nous créons cette mise à jour hôtel obtient. Allons à l'hôtel controller.js. En bas, exporte vers les mises à jour. Hôtel obtient, qui va être un évier. Dysfonction intelligente avec le mot clé de synchronisation, en passant une nouvelle requête, la réponse et aussi suivante. Nous pouvons ajouter un bloc try. Ensuite, ajoutez une constante d'hôtel. Cela va ajouter du poids sur les données lorsque nous allons à la base de données et trouver un enregistrement. Le seul enregistrement que nous voulons trouver est l'hôtel qui est passé comme paramètre en haut ici. À l'intérieur de l'objet de requête, nous utiliserions need.params. attend l'hôtel. Trouvons un qui retournera un enregistrement qui correspond. Nous pouvons faire correspondre ceci avec le champ _ID. L' ID que nous voulons correspondre est stocké dans request.params. Nous avons nommé ceci si nous allons à index.js ID hôtel. Demandez l'ID d'hôtel .Params. Après cela, nous voulons ajouter notre bloc de cache juste après. Pour mettre en cache toutes les erreurs, transmettez ceci à suivant pour notre logiciel intermédiaire, donc l'erreur suivante. Pour vérifier que tout fonctionne bien après notre constante juste ici. Je vais faire res.json pour voir quelles données nous sont retournées. Nous pouvons ensuite passer dans cet hôtel que nous recherchons , puis passer à notre projet et ensuite frapper le rechargement. Maintenant, nous pouvons voir que nous obtenons les détails de l'hôtel complet qui est l'ID qui est passé en tant que paramètre dans l'URL. Si nous revenons à notre administrateur et recherchons un autre hôtel dans le numéro 6. Je vais me mettre à jour. Nous avons obtenu la valeur de l'hôtel 6 nous revient. Maintenant, nous savons que nous obtenons les informations correctes au lieu de ce res.json, nous voulons maintenant rendre un modèle de page. Le modèle que je vais réutiliser est l'ajout de modèles d'hôtel. C' est essentiellement la forme qui a tous les domaines dont nous avons besoin pour notre hôtel. Nous pouvons aller de l'avant et modifier l'un de ces derniers puis mettre à jour. Au lieu des changements res.json pour être res.render. En passant dans nos modèles d'ajouter hôtel. Le titre de la page de mise à jour hôtel. Ensuite, nous pouvons également transmettre les données stockées dans nos constantes d'hôtel. Passe à nos modèles et leur donner un coffre-fort. Maintenant, nous allons au navigateur et puis il Reload au lieu de la JSON nous devrions maintenant voir notre page a maintenant un formulaire est en bas. Ce formulaire va être utilisé pour mettre à jour l'hôtel. A l'intérieur de ce formulaire, quelque chose que nous voulons idéalement faire est faire passer les données dans tous ces champs déjà. Par exemple, il devrait dire hôtel 6. Nous pouvons entrer et simplement modifier les données qui sont là. Nous pouvons utiliser ces valeurs directement avant de le faire, je vais mettre cette forme dans un mixin pour garder les choses organisées. Au-dessus de la barre latérale, puis côté des Vues et Mixins, créez un nouveau fichier appelé soulignement de l'hôtel formulaire. Avec l'extension .org, créez notre nom mixin en haut comme nous l'avons fait avant. Formulaire d'hôtel qui va recevoir les données de l'hôtel comme argument. Puis Hotel.org sur la barre latérale. C' est le formulaire qui va maintenant rendre pour les mises à jour et aussi la section Ajouter un hôtel. Ensuite, nous pouvons mettre ça de notre forme jusqu'au bas. Notre section complète du formulaire et enregistrez le fichier. Maintenant, retournez dans un mixin de forme d'hôtel et nous pouvons coller cela dans. Si nous remontons en haut et puis en retrait correct, enregistrez ce fichier. Avec mixin maintenant la configuration, nous pouvons maintenant revenir à ajouter hotel.pug. Incluez ensuite le mixin en haut du fichier. Inclure les mixins qui est un dossier et le nom de l'hôtel soulignement, forme de soulignement. N' oubliez pas que nous n'avons pas besoin de l'extension PAG. Nous pouvons inclure ce mixin n'importe où dans notre dossier. Je vais ajouter mon arrière en bas. Nous plus formulaire d'hôtel. Personne dans les données de l'hôtel. Si nous gardons ceci et testons maintenant, ça marche bien. Je recharge, nous voyons toujours que le formulaire est maintenant à l'écran mais nous avons externalisé ceci à un mixin. Retour à la création de ces champs de formulaire, avez les données de l'hôtel déjà renseignées. Cela peut être ajouté à l'intérieur du mixin que nous venons de créer à la forme de l'hôtel. Allons à l'un de nos champs pour commencer. Commençons par le nom de l'hôtel. La façon dont nous pouvons le faire pour définir le volume. A l'intérieur des entrées, nous pouvons définir la valeur égale à un hôtel que nous recevons en tant qu'argument ici. Alors le nom que nous voulons est .hotel_name. En fait, c'est une chaîne. Nous ne voulons pas utiliser les devis. Maintenant, si nous sauvegardons ceci et puis il rechargera notre formulaire. Nous voyons maintenant la valeur de l'hôtel 6 qui est maintenant transmis dans notre forme. Nous pouvons faire la même chose avec les autres champs aussi. La description. Allez dans notre zone de texte parce que nous disons zone de texte. Nous devons le faire un peu différemment. Nous devons définir le texte pour être égal à hotel.hotel_description. Plutôt que d'utiliser les attributs de volume comme nous le faisons dans d'autres entrées, nous pouvons descendre à la note d'étoiles. Nous avons fait l'image donc nous n'avons pas besoin de ça pour l'instant. L' évaluation des étoiles vous amène à revenir à la valeur de hotel.star_rating. Le pays. Hôtel, pays, le coût par nuit. Encore une fois après la valeur requise va être égal au coût des points d' hôtel par nuit en utilisant les traits de soulignement. Enregistrez ceci, puis vérifiez ceci dans le navigateur. Recharger. Super, cela rend maintenant la mise à jour des informations d'un hôtel tellement plus facile. Ensuite, nous devons configurer la demande de poste pour réellement gérer les mises à jour lorsque nous cliquons sur le bouton Confirmer. Passez au routeur, qui est à l'intérieur de l'index dot js. Fermons ceux-ci, ouvrez les doublons point d'index js sur get requête pour les mises à jour. Mais cette fois, les changements à être poste et puis le contrôleur de l'hôtel va être mise à jour poste hôtel. Ensuite, créez cela dans le contrôleur de l'hôtel. Exporte point mise à jour de l'hôtel post. Cela va être dans une fonction de synchronisation avec la requête et les objets de réponse tout le chemin suivant pour le middleware. Configurez notre fonction. Nous pouvons commencer par la gestion des erreurs. Essayez et aussi un bloc catch, en vérifiant les erreurs. Puis passe à un middleware avec suivant. On y va. A l'intérieur de notre bloc d'essai, la première chose que je veux faire est de régler par constante. Ça va être pour stocker l'ID de l'hôtel qui nous a été transmis. Ce numéro d'identification de l'hôtel est disponible en tant que paramètre que nous avons juste ici. Laissez mettre en place maintenant, const hôtel Id est égal à demander params dot hôtel Id capitale I. Puis une deuxième constante de l'hôtel, qui va être égal à attendre hôtel, qui est notre modèle. Cette fois, nous allons utiliser une méthode appelée find by Id and update ou un cas commun ou find by Id and update. C' est une méthode Mongo que nous pouvons utiliser pour passer ensuite dans l'hôtel Id, que nous avons étoile juste ici. Nous pouvons ensuite obtenir l'enregistrement à l'intérieur de Mongo et revenir ensuite vers les nouveaux détails. Tout d'abord, les premiers arguments que nous allons ajouter, c'est variable de l'hôtel Id. Ce premier argument est l'idée de l'enregistrement, que nous voulons trouver à l'intérieur de notre base de données, séparé par une virgule. Le deuxième paramètre est les données que nous voulons utiliser pour la mettre à jour avec. Ces données peuvent être trouvées à l'intérieur de la requête, le corps. Nous utilisons également le corps du demandeur lors de la création de l'hôtel, qui est juste au-dessus. Si va monter pour créer un poste d'hôtel, qui était une fonction que nous avons utilisé à l'origine pour configurer un nouvel hôtel. Rappelez-vous à l'intérieur, nous avons créé un nouvel hôtel en utilisant les informations de l'objet de requête stocké à l'intérieur du corps. Il s'agit des données qui sont transmises à partir du formulaire. Nous allons utiliser les mêmes données ci-dessous. Mais cette fois, plutôt que de créer un hôtel, nous allons l'utiliser pour mettre à jour. Le troisième paramètre. Enfin, je vais ajouter un objet d'options, donc séparés par une virgule à un objet et nous pouvons définir nouveau pour être vrai. Par défaut, après la mise à jour, nous recevrons toujours l'enregistrement original. Si nous allons de l'avant et définissons nouveau pour être vrai est que nous allons nous assurer de récupérer la version modifiée ou mise à jour à afficher dans notre application. Ensuite, vers le navigateur. Nous pouvons maintenant faire un changement. Appelons ça l'hôtel 66, il confirme. Nous ne voyons rien à l'écran parce que nous ne configurons pas ce qui va faire ensuite. Mais au lieu de cela, si nous passons à mLab et puis actualisons. Maintenant, nous pouvons voir que nous avons l'hôtel 66 à l'intérieur de nos dossiers. Retour à notre projet. On peut voir que ça tourne toujours dans le coin. Parcours ravenous accroché et nous allons faire un repos ou rediriger puis rediriger ceci vers la route, qui ne gérera pas cela. Après notre constante d'hôtel, faisons une redirection de point de repos. À l'intérieur des ticks arrière, nous pouvons ajouter tous les slash et puis avant slash l'ID de l'hôtel. Nous avons ceci stocké à l'intérieur de cette variable ici. Nous pouvons coller ceci dans, enregistrer ceci, puis recharger. Nos demandes de poste est maintenant mis à jour base de données et nous a également redirigé vers avant barre oblique tous, puis avant barre oblique l'ID de l'hôtel. En bas, nous voyons que nous n'avons pas encore configuré cette route et c'est pourquoi nous voyons une erreur. Mais l'hôtel est toujours en cours de mise à jour à l'intérieur du mLab. On s'occupera de cette route plus tard. Ce même itinéraire est également nécessaire lorsque nous cliquons sur Hôtel. Si vous allez à la page d'accueil en cliquant sur le logo, puis cliquez sur l'un de ces hôtels. Voir tous les détails. Cela nous amène à la même route qui est avant barre oblique tous et puis l'hôtel Id et bien sûr, nous avons le message de pas trouvé parce que nous ne sommes pas encore créé cela dans le navigateur. Avant de laisser cette vidéo là, essayons encore une mise à jour sur un hôtel différent pour nous assurer que tout fonctionne bien. Retour à l'administrateur, donc transférer barre oblique admin, Modifie et Supprimer. On peut aller à l'hôtel numéro 12, Confirmer. Il y a l'hôtel 12, cliquez sur le bouton Mettre à jour et change pour être l'hôtel 122, Confirmer avec le mLab. Faites défiler vers le haut et vers le bas afin que vous puissiez voir ces rapports, nos hôtels normaux là-bas. Allez à la page suivante. Il y a notre nom d'hôtel mis à jour juste là. Je vais rapidement les rétablir à la façon dont les étaient. Hôtel 12, Confirmez ceci. Ensuite, nous pouvons revenir à Admin, juste avant slash admin à l'intérieur de l'URL. Nous pouvons également aller à l'hôtel 66, qui est le premier que nous avons édité. Nous pouvons voir que nous n'avons pas ajouté d'image pour cela. Allons mettre à jour les changements de retour à l'hôtel six à l'image de l'hôtel six. Ensuite, mettez à jour ceci dans la base de données. Ce sont toutes nos mises à jour qui fonctionnent maintenant bien. Avant de passer maintenant à cette petite chose, nous devons corriger seulement si nous passons à l'administrateur. Ensuite, si nous allons à Modifier et supprimer, recherchez un hôtel, cliquez sur Confirmer, puis sur Mettre à jour. Actuellement, nous avons tous les champs à l'intérieur ici ou repeuplés et cela fonctionne vraiment bien lors de la mise à jour de l'hôtel. Cependant, la personne dans ces données créera un problème lorsque nous ajoutons un nouvel hôtel. Ajoutons rapidement l'image de l'hôtel 12 puis confirmez. Ensuite, si nous allons à Admin, puis avant barre oblique ajouter. N' oubliez pas que la barre oblique directe ajoute utilise les mêmes modèles du même formulaire que nous avons utilisé pour mettre à jour l'hôtel. Mais nous pouvons voir à l'intérieur du modèle que nous avons une erreur. Ces erreurs sont causées parce qu'à l'intérieur du formulaire nous accédons dans les données de l'hôtel. Allez à un mixin et ici nous accédons à l'hôtel, qui est passé dans une pile d'options ici. Fondamentalement, ce formulaire s'attend à recevoir les données de l'hôtel. Cependant, si nous allons au contrôleur de l'hôtel et puis si nous allons mettre à jour l'hôtel obtenir. Ici, nous avons présenté les données de l'hôtel dont il a besoin. Mais si vous faites défiler jusqu'à l'endroit où nous avons créé l'hôtel, qui est dans créer hôtel obtenir juste ici. Ceci est également en utilisant le même formulaire d'ajout d'hôtel. Cependant, nous ne transmettons aucune information sur l'hôtel, et en fait nous n'avons aucune raison de le faire. Une façon de contourner cela est sur la forme de l'hôtel Mixin. Souligner l'hôtel, la forme de soulignement, nous pouvons aller de l'avant et d'abord définir l'hôtel pour être un objet vide. Hôtel est égal à un objet vide, puis enregistrez ceci et rechargez. Maintenant, nous pouvons voir quand nous ajoutons un nouvel hôtel, nous avons maintenant ce formulaire à l'écran. L' ajout d'hôtel pour être dans un objet vide de cette façon rendra le modèle conscient du nom de l'hôtel et vous saurez s'il y a une erreur. Mais comme c'est un objet vide, il n'interférera pas avec nos champs. Très bien, l'objectif principal de cette vidéo était de mettre à jour avec succès les hôtels de notre base de données et nous avons maintenant cela fonctionne. Ensuite, nous allons également couvrir une autre tâche importante et ceci est de pouvoir supprimer des enregistrements de notre base de données. 30. Suppression des dossiers: La dernière grande action que nous voulons effectuer est de pouvoir supprimer des éléments de notre base de données. Vous entendrez souvent l'acronyme CRUD, lorsqu'il s'agit de bases de données. Ce qui est abrégé pour les quatre actions principales qui sont créer, lire, mettre à jour et supprimer. Nous avons déjà créé des données, nous pouvons également lire des données et ensuite, dans la dernière vidéo, nous avons mis à jour nos données. Il est maintenant temps d'examiner la suppression d'enregistrements aussi. Allons de l'avant et créer un hôtel de test pour travailler avec plus d'un admin plis/ajouter. C' est notre test, test, et nous pouvons choisir n'importe quelle image, n'importe quelle note d'étoiles est bien et le pays, puis confirmer. Après cette redirection, nous avons maintenant redirigé vers formel/tout, puis l'ID du pays que nous avons créé. Prenez cette nouvelle carte d'identité d'hôtels en copiant cette section ici. Ensuite, vérifiez que cela est stocké dans une base de données sur un mlab, alors appuyez sur recharger. Il suffit de vérifier, nous avons notre test, alors allez à la première section, et nous y sommes. Il y a notre hôtel de test à l'intérieur de la base de données. Si nous revenons à nos projets et ensuite aller à l'admin si avant/admin, nous pouvons sélectionner, modifier et supprimer l'hôtel. Tout comme nous l'avons fait dans la dernière vidéo, nous pouvons coller dans l'ID hôtel, qui a été créé pour les tests, confirmer, puis nous sommes pris à la vue complète et nous aurons les boutons de la dernière vidéo où nous pouvons mettre à jour et supprimer l'hôtel. Cliquez sur le bouton Supprimer cette fois-ci et ensuite transmis à Transward/admin, Forward/notre ID hôtel, forwad/delete. C' est parce que nous l'avons dit plus tôt dans les modèles détaillés de l'hôtel. Ouvrez la barre latérale, puis allez dans hotel_detail. C' est le lien que nous avons dit utiliser à l'intérieur d'ici, et c'est ce que nous allons aller de l'avant et gérer dans le fichier d'index des routeurs [inaudible]. Fermez-le, puis dans le index.js, cette fois nous allons définir router.get pour être la scène hivernale de chaîne de l'admin avant/nos segments dynamiques, qui est la capitale de l'ID de l'hôtel I, puis avant/supprimer. Cela suit le même modèle que la section de mise à jour juste au-dessus, mais cette fois en utilisant delete. Nous allons ensuite créer notre hôtel controller.delete hotel get. Ensuite, au contrôleur de l'hôtel, nous pouvons maintenant créer cette fonction. Hôtel controller.js, puis vers le bas, il s'agit donc de exports.delete clients de l'hôtel. Ce sera une fonction de synchronisation, alors marquez ceci comme une synchronisation. Comme dans nos objets ou la réponse à la demande et l'automne prochain ou le milieu de la configuration, toutes les fonctions de sorte que cela va être assez similaire à un stand. Nous devons également rectifier cette carte d'identité de l'hôtel à partir des locaux, alors collez-la. Prêt à ne pas dire une constante d'hôtel de puissance, donc hôtel const et cela va être égal à attendre, attendre d'un modèle d'hôtel, puis utiliser la méthode appelée trouver un. Cela va trouver un enregistrement dans notre base de données et nous voulons le trouver par l'identifiant de l'hôtel, que nous avons stocké juste ici. En tant qu'objet, ajoutez ceci dans. Nous voulons trouver un enregistrement par le champ ID de soulignement et l'ID auquel nous voulons correspondre est l'ID d'hôtel, qui est cette variable juste ici. Ensuite, nous pouvons aller de l'avant et faire un repos ou un rendu pour afficher le contenu de nos modèles, ce qui, comme avant lors de la mise à jour, nous allons rendre les mêmes modèles d'hôtel publicitaire. Pour cette période, cliquez et confirmez au bas de notre formulaire. Nous allons ensuite supprimer notre hôtel plutôt que de le mettre à jour. add_hotel comme dans notre objet, le titre de supprimer hôtel, un puis passer notre variable hôtel. La raison pour laquelle nous utilisons ce modèle d'hôtel ajouter une fois de plus est de sorte que vous pouvez voir tous les détails de l'hôtel influencables pour vous assurer que c'est celui que nous voulons supprimer. Nous passons aussi dans cet hôtel, que nous allons supprimer. Encore une fois, vous pouvez remplir tous les champs à l'intérieur de notre formulaire. Maintenant, si nous disons que cela vous rend sur les mêmes routes qu'avant, qui est admin, notre ID hôtel, puis supprimer. Nous pouvons maintenant recharger et maintenant nous obtenons le formulaire d'ajout d'hôtel. Maintenant, qu'est-ce que ça veut dire ? Maintenant, nous avons cette demande obtenir toute la configuration. Nous devons maintenant gérer la façon dont nous supprimons l'hôtel. Pour ce faire, nous pouvons créer une demande de poste sur le même itinéraire. Au-dessus du index.js, nous allons dupliquer cette ligne ici, coller ceci dans, cette fois c'est une demande de poste et supprimer le poste d'hôtel sur le contrôleur de l'hôtel et ceci est exports.delete post hôtel. Il s'agit également d'une fonction de synchronisation puisque nous traitons des données de notre base de données, de la demande de transmission, de la réponse et de la prochaine. La prochaine chose à faire est d'ajouter notre gestion des erreurs que nous essayons d'attraper. Je viens de remarquer ci-dessus, nous devons également ajouter cela à cela aussi. Juste pour des moments va demander l'erreur, puis passer notre erreur à prochaine et puis nous pouvons ajouter cela pour supprimer l'hôtel obtenir trop alors essayez. Nous pouvons ajouter ces trois lignes jusqu'à un bloc try, puis ajouter catch et l'accent sur suivant avec notre erreur. Bon, alors revenez à nos demandes de poste ci-dessous à l'intérieur de la section essayer. Encore une fois, nous voulons récupérer l'ID des paramètres afin que nous puissions copier cette ligne ici. Ceci dans un atout de notre hôtel donc const hôtel attend, notre modèle d'hôtel et pour supprimer un article de [inaudible], nous pouvons utiliser une méthode appelée trouver par ID et supprimer, qui est assez similaire à celui que nous avons utilisé ci-dessus, mais ce un a été trouvé par ID et mise à jour. Jusqu' à notre demande de poste, nous pouvons à nouveau trouver par ID et supprimer. Ensuite, à l'intérieur, tout ce que nous avons à faire est de passer dans l'ID de l'hôtel que nous voulons enlever. ID, le champ que nous voulons cibler, puis correspond à notre ID d'hôtel, qui est cette constante juste ici, donc point-virgule à la fin. Une fois que nous avons supprimé cet hôtel de la base de données, nous allons alors effectuer une redirection. Reposez-vous ou redirigez et où voulez-vous aller aussi ? Eh bien, avant quand nous envisageons de mettre à jour les hôtels, il était logique de rediriger vers l'hôtel actuel avec les informations mises à jour. Cependant, nous ne pouvons pas faire la même chose lors de la suppression dans un hôtel parce que cet hôtel n'existe plus. Au lieu de cela, je vais juste rediriger vers la route de la maison, nous donne une sauvegarde, puis plus sur le navigateur. Si nous rechargeons, donc maintenant nous sommes actuellement sur notre hôtel de test et maintenant pour cliquer « confirmé » crée une demande de poste. C' est un bon signe ont été redirigés vers la page d'accueil. Maintenant, à l'actualisation de mlab. Nous avons maintenant jusqu'à 12 dossiers donc nous avons hôtel 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Sur la page suivante, nous avons 11 et 12, donc il semble que notre hôtel a été supprimé avec succès. Si le vôtre a été supprimé, félicitations, vous avez maintenant effectué créer, lire, mettre à jour et supprimer des actions sur votre base de données. C' est une étape importante pour notre application et nous avons fait beaucoup de progrès. Dans la section suivante de ce cours, nous allons poursuivre nos projets en ajoutant, stylisant, plus de modèles et de fonctionnalités et en apportant généralement des améliorations. nous réjouissons de vous voir dans la prochaine section et au revoir pour l'instant. 31. Vue détaillée de l'hôtel: Dans cette section, nous allons poursuivre nos projets et faire quelques travaux généraux, compris le style et les améliorations. Je vais lancer les choses en travaillant avec les modèles détaillés de l'hôtel que nous avons créés pour afficher l'hôtel que nous avons recherché avant d'éditer ou de supprimer. Nous allons à nouveau réutiliser ces modèles à quelques endroits. Tout d'abord, si nous allons sur la page d'accueil ou les itinéraires d'accueil, puis cliquez sur l'un de nos hôtels, descendez au bas de nos modèles, nous voyons un message d'erreur de introuvable. C' est parce que nous avons besoin de gérer ces routes que vous avez en haut de barre oblique avant tout, puis barre oblique avant l'ID de l'hôtel. Avec ces quelques uns, nous pouvons réutiliser l'hôtel à des modèles détaillés que nous avons créés et également ajouter ces itinéraires fixera d'autres zones aussi. Par exemple, si nous revenons à la page d'accueil et puis vous cliquez sur, voir tout, cliquer sur l'un de ces hôtels est à nouveau pris sur le même itinéraire. Donc, cliquez sur l'hôtel un et nous avons les mêmes routes de barre oblique tous et puis notre ID hôtel avec l'erreur en bas. Cela résoudra ces deux problèmes, et aussi à nouveau, si nous allons sur le hotelController.js et allons créer un poste d'hôtel. Faites défiler vers le haut, de sorte que vous créez un poste d'hôtel ici et ce res.redirect, également rediriger vers ces mêmes routes ici. C' est après que nous avons créé un nouvel hôtel, redirigera ensuite cette page détaillée de l'hôtel. C' est une bonne chose pour travailler maintenant. Commençons par l'itinéraire sur n'importe quel point d'index js. Si nous faisons défiler vers le haut, nous devrions déjà avoir l'itinéraire ou l'aller à la barre oblique avant toute route. Gardiennons ces dans l'ordre et ajoutons ceci ci-dessous. Donc router.get autour de ce temps, comme nous le savons, est barre oblique avant tout, puis l'ID hôtel, que vous pouvez ajouter en tant que segment dynamique. Je vais appeler cette variable l'hôtel. Cela va également utiliser le contrôleur de l'hôtel , puis utiliser une fonction appelée détail de l'hôtel, point-virgule aux extrémités. Ensuite, nous pouvons aller de l'avant et créer des détails d'hôtel sur le contrôleur. On peut ajouter ça n'importe où, on va en bas. Nous commençons comme toujours avec les exportations, puis le nom du détail de l'hôtel, puis définissons cela à une fonction de synchronisation, passer la demande, la réponse et aussi ensuite, ajouter le corps de notre fonction. Alors j'essaierai le bloc de capture. Alors essayez et puis attrapez ce qui prend l'erreur, puis passez l'erreur à suivante. Ok, bien. Nous allons commencer par créer quelques constantes. La première constante va saisir le paramètre, qui est l'ID de l'hôtel. Nous allons utiliser ce segment dynamique de l'hôtel, qui est dans l'URL. Disons d'abord que c'est dans une constante. Donc const, hotelparam est égal à la requête point params, puis point hotel, qui est le nom que nous lui avons donné. Une seconde constante, qui est pour les données de l'hôtel. Nous allons l'utiliser pour rechercher notre base de données en utilisant ce paramètre d'hôtel et ensuite trouver l'hôtel unique dont nous avons besoin. Nous allons à nouveau utiliser await, pour attendre que les états reviennent avant de passer à autre chose. Nous devons chercher le modèle de l'hôtel, majuscule H, utiliser la méthode de recherche. Ensuite, nous devons passer dans le champ que nous voulons trouver. Nous voulons utiliser les champs d'ID de soulignement et vérifier les ID qui correspondent à notre variable de param d'hôtel. Passer dans le param de l'hôtel, ajouter un point-virgule à la fin. Ensuite, pour terminer cela, nous allons faire un res.render pour afficher les modèles à l'écran. Le modèle que nous allons utiliser est le détail de soulignement de l'hôtel. Passez le titre de Voyagons et transmettez ensuite notre variable de données hôtelières, qui est cette variable ici, qui stocke l'hôtel unique à partir de la base de données. Maintenant, puisque nous avons déjà des détails de soulignement hôtel à l'intérieur de notre barre latérale, puis dans les vues. Nous avons ce point de vue ici. Nous avons seulement cette configuration et cela reçoit également le même nom de variable des données d'hôtel. Maintenant, si nous donnons à cela un coffre-fort, dites le contrôleur, puis retournez à notre navigateur et rechargez maintenant. Nous saisissons maintenant l'ID de l'hôtel de l'URL personnellement à notre contrôleur, qui récupère ensuite les informations de notre base de données et l'envoie ensuite à notre modèle de détail de l'hôtel. Nous devrions également voir que cela fonctionne si nous allons à la page d'accueil et cliquez sur l'un de ces hôtels, pour être amené à la page détaillée de l'hôtel. Essayons aussi les itinéraires, qui est tous les hôtels. Cliquez sur voir tous, et encore, de ces hôtels, et celui-ci fonctionne bien aussi. Enfin, nous pouvons aller ajouter un nouvel hôtel. Allez à notre barre oblique d'administration à et créons un hôtel de test. Toutes les informations ici sont bien. Ensuite, confirmez, faites défiler vers le bas et il y a notre hôtel de test, nous venons de créer et comme nous l'avons vu avant nous obtenons une redirection de point de res, qui passe par barre oblique avant tout et puis cet ID hôtel. Bien que cette vue détaillée de l'hôtel à l'heure actuelle, ressemble à tous les hôtels, il y aura quelques différences bientôt. Lorsque nous allons de l'avant et ajoutons un peu de style, plusieurs hôtels s'adapteront sur la même page, comme dans cette page d'accueil ici. Mais si vous cliquez dessus et regardez la vue détaillée de l'hôtel, ce sera une vue unique pour un seul hôtel. Cela nous donnera également l'espace pour ajouter plus de détails, comme une description de l'hôtel en bas, et c'est ce que nous ferons dans la prochaine vidéo lorsque nous examinerons le rendu conditionnel. 32. Rendu des éléments locaux et conditionnels: Nous allons couvrir quelques choses différentes dans cette vidéo. Commencez par les locaux, toutes les variables locales. C' est quelque chose que nous avons déjà couvert vraiment lors de la modélisation, mais nous allons également voir comment les rendre disponibles pour tous les modèles aussi. Actuellement dans l'HotelController. Cliquez sur le hotelController.js et descendez au détail de l'hôtel. Juste ici, nous avons déjà passé une variable locale à nos modèles, tout comme nous l'avons fait plusieurs fois. Les données que nous avons passées dans ce modèle, si nous ajoutons ceci à sa propre ligne pour le rendre un peu plus clair, c' est un objet que nous avons actuellement le titre, qui est une paire de valeur de nom, puis aussi une donnée d'hôtel qui est une variable, que nous avons créée juste au-dessus. Ici, nous transmettons le titre et les données de l'hôtel que nous avons tirées de la base de données. Nous sommes libres d'utiliser ces locaux pour transmettre tout ce que nous voulons utiliser dans ce modèle. Par exemple, nous allons aller de l'avant et ajouter le nom de Chris puis plus dans sa vue détaillée de l'hôtel. Nous avons déjà vu que nous pouvons utiliser ces variables comme des variables JavaScript normales, tout comme nous l'avons fait ici, en utilisant l'hôtel, puis en accédant à l'ID de l'objet. Ici, nous utilisons les variables locales avec des ticks arrière, sorte que vous pouvez les mélanger avec du texte. Nous avons déjà sorti ces variables avec le symbole égal. Donc, nous savons comment faire ça. C' est p égal, et dans ce nom, recharge et là nous allons, c'est notre variable locale en tant que modèles, et aussi comment nous pouvons sortir une variable lorsqu'elle est utilisée avec du texte brut en utilisant un hachage. Supprimons ça. S' il se mélange avec du texte brut, comme ici, nous pouvons utiliser le hachage, les accolades, puis aussi passer notre variable de nom, enregistrer et recharger. On y va. Voici notre hôtel Update et notre nom de Chris ont mélangé avec le texte du bouton. Supprimons ces exemples. Si nous passons à l'un des modèles, par exemple, si nous allons à tous les hôtels, essayons de faire la même chose. Essayons de sortir notre variable de nom. Donc p est égal nom, et aller à tous les hôtels routes. Cliquez sur voir tout. Maintenant, si nous faisons défiler vers le bas, nous ne voyons aucune référence au nom. C' est parce que les locaux, à mesure qu' ils sonnent, ce sont des variables locales étendues à un seul modèle, auquel nous allons les transmettre, donc supprimons ceci, p est égal au nom. Aussi dans notre contrôleur de l'hôtel, retirons notre nom d'ici aussi. Mais il est aussi souvent des cas où nous voulons passer certaines variables à tous nos modèles à utiliser plutôt que de créer une variable dans chacune de ces fonctions, puis passer les mêmes données. Si vous vous souvenez dès le début dans les projets plus dans le app.js. Allons à app.js. Nous avons parlé un peu du middleware app.use, qui aura juste ici. Ce middleware, lorsque nous ne définissons pas de routes comme premier paramètre, est une action qui est utilisée pour chaque requête à notre application. Il ajoute fondamentalement une couche que nous passons à travers pour chaque requête. Nous pouvons utiliser app.use pour créer un middleware pour toutes les demandes, qui va ensuite aller de l'avant et rendre nos variables disponibles dans tous les modèles. Donc, créons ceci dans app.use. Allons à notre app.set, puis ajoutons dans notre middleware app.use. Cela va prendre une fonction qui a accès à la requête, à la réponse, et aussi à la prochaine. Définissons cela comme une fonction normale. Lorsque vous utilisez app.use, cette fonction, qui est appelée, aura également accès aux objets de requête et de réponse. Rappelez-vous cependant si nous voulons que cette fonction s'exécute uniquement sur une demande à un itinéraire particulier, nous pouvons ajouter le routage avant cela. Donc, comme le premier paramètre, nous pouvons ajouter la chaîne, une barre oblique par exemple, séparée par une virgule, puis notre fonction comme la deuxième valeur. Maintenant, tout ce que nous courons à l'intérieur d'ici ne fonctionnera que sur cette route d'administration. Mais nous voulons que cela fonctionne sur tous les modèles de notre application. Donc, je vais laisser le premier paramètre vide. Voyez qu'il y a une action que nous pouvons ajouter un journal de console à l'intérieur du corps de la fonction, ajouter le journal de la console, puis simplement ajouter quelques textes de bonjour. Donnez ceci une sauvegarde, puis sur le navigateur. Maintenant, si nous cliquons sur notre logo pour faire une demande à notre site, plus à Visual Studio Code et maintenant nous pouvons voir en bas, nous avons les textes de bonjour, retours quelques fois de plus. Alors continuez à cliquer dessus pour faire une demande. Nous voyons pour chaque demande, nous obtenons le journal de la console de bonjour. À l'intérieur du navigateur cependant, si nous jetons un oeil à l'icône de rotation en haut, nous voyons notre application commence à se bloquer. C' est parce que le middleware est destiné à être transmis et ici nous n'avons pas ajouté dans le prochain appel pour passer au prochain morceau de middleware dans la chaîne. Donc, il est coincé sur son itinéraire. Passons à notre app.use, puis à l'intérieur de notre fonction, je vais frapper ensuite, lui donner une sauvegarde. Maintenant, si nous rechargeons, nous pouvons voir que nous pouvons recharger cette route autant de fois que nous le voulons et cela fonctionne toujours. Donc, plus encore, l'objet de requête que nous avons ici, nous avons accès à une propriété appelée le chemin. Cela retournera le nom du chemin de la requête actuelle ou essentiellement l'URL actuelle. Jetons un coup d'oeil à ça. Disons que le chemin actuel est, puis ajoutez à la fin la requête, qui est cet objet juste ici chemin point. Maintenant, donnez-lui une sauvegarde et puis allez à n'importe quel itinéraire. Par exemple, passons à l'inscription à la barre oblique, appuyez sur Entrée. Maintenant, dans Visual Studio Code, soulevons cette terminologie ici, et nous pouvons voir ici notre chemin actuel est l'inscription à la barre oblique. C' est le journal de la console que nous avons mis juste ici. Je vais maintenant rendre cette URL disponible pour l'utiliser comme une variable qui aura accès à n'importe quel modèle. Par conséquent, nous pouvons faire un rendu conditionnel plus tard, ce qui nous permettra d'afficher uniquement certaines informations basées sur l'itinéraire actuel. Tout d'abord, réduisons ceux-ci pour faire plus d'espace et supprimer notre journal de console, en ne laissant que le chemin de point de requête. Maintenant, ce chemin de point de requête peut alors être affecté à res points locaux. Donc, res dot locals est égal au chemin de point de la requête. Cela affectera ensuite notre chemin de point de requête à l'objet local, qui est sur la réponse. Nous pouvons également donner à cette variable locale particulière ou locale un nom de notre choix. Pour le garder descriptif, je vais appeler cette URL de point. Par conséquent, nous pouvons accéder à cette variable ou ce chemin dans nos modèles par son nom local d'URL. Qu' est-ce que cela signifie maintenant pour nos projets ? Eh bien, cela signifie maintenant que nous pouvons accéder à cette URL locale dans n'importe lequel de nos modèles à l'intérieur du projet, parce que c'est middleware, que nous avons mis en place juste ici, est toujours transmis pour chaque requête. Nous ajouterons également d'autres locaux comme ça au fur et à mesure de ce projet. Par exemple, pour rendre les messages flash disponibles également dans tous les modèles, mais cette variable d'URL, nous pouvons maintenant l'utiliser pour le rendu conditionnel. Le rendu conditionnel nous permet d'afficher certaines données en fonction d'une condition. Tout comme quand nous utilisons une instruction if. Ce sera vraiment utile pour nous dans ce projet. Étant donné que nous réutilisons des modèles, nous ne pouvons désormais afficher que certaines parties des modèles, par exemple, sur certaines routes ou encore afficher ou masquer certaines parties de ce modèle, selon qu' un utilisateur est connecté. La première chose que je veux faire est de supprimer les boutons de mise à jour et de suppression pour certaines routes. Donc, si nous allons sur notre page d'accueil et cliquez sur l'un de ces hôtels, et je fais défiler vers le bas, nous voyons que nous avons ce bouton Mettre à jour et Supprimer l'hôtel, qui apparaît sur cette route ici. C' est quelque chose que nous voulons seulement montrer dans les routes d'administration. Pour les masquer, nous pouvons utiliser le rendu conditionnel pour ne montrer que si l'URL ou le chemin commence par la barre oblique directe Admin. Alors au hotel_detail.pug. Enregistrez notre app.js. Commençons par créer une déclaration if en utilisant notre variable URL. Juste après le dot hotel div, indentez-les dans un niveau si url, qui est le nom de la variable locale, qui va maintenant passer à tous les modèles, puis utiliser dot startsWith. Ajouter les crochets après. StartsWith est une méthode JavaScript régulière qui sera vraie si nous passons une chaîne à l'intérieur des crochets, qui correspond au début de l'URL. Donc, pour vérifier si l'URL commence par l'admin barre oblique, nous pouvons l'ajouter comme une chaîne. Maintenant, si nous retirons ces quatre lignes ici, qui sont nos boutons. Maintenant, si notre URL commence par l'admin slash, tout ce qui est imbriqué dans cette instruction if, c'est-à-dire nos boutons seront maintenant conditionnellement rendus autrement, tout ce qui n'est pas imbriqué à l'intérieur, comme notre hôtel mixin, sera toujours affiché quel que soit l'itinéraire. Donc, au navigateur et essayons cela. S' il se recharge, puis faites défiler vers le bas, nous pouvons voir que ces boutons sont maintenant manquants dans le haut de nos modèles. Essayons un peu plus, ouvrez la page d'accueil, voyez tout, cliquez sur l'un d'entre eux, et les boutons sont maintenant toujours manquants. Essayons la route d'administration et vérifions le bouton s'ils sont là. Donc, avant barre oblique admin, puis descendez à Modifier, supprimer l'hôtel. Cherchons n'importe quel nom d'hôtel. Donc, l'hôtel 7, cela affiche maintenant l'hôtel 7, et nous avons encore les mises à jour et supprimer les boutons. Parce que notre URL commence par une barre oblique adjointe. Bien, ce rendu conditionnel fonctionne maintenant avec notre variable URL. Une autre utilisation pour cette variable sera terminée dans notre hotel.pug mixin. Alors ouvrons la barre latérale. Mixins puis hotel.pug. Nous pouvons enfin utiliser la description de l'hôtel que nous avons à disposition, mais seulement l'afficher dans la vue de l'hôtel nécessaire. Donc juste après le nom de l'hôtel, gardez n'importe quelle ligne horizontale. Créons une autre instruction if en utilisant notre URL. Donc point startsWith, cette fois, nous pouvons passer dans une chaîne qui est barre oblique avant tout, puis barre oblique avant. Imbriqué à l'intérieur ici, nous pouvons définir un élément p qui est égal à l'hôtel. C' est donc hotel_description comme une nouvelle ligne horizontale juste en dessous pour séparer cela de la note d'étoiles, du pays et du prix. Enregistrez ceci, puis sur notre navigateur. Essayons avec la page d'accueil. Maintenant, nous voyons notre hôtel est listé sans description. Cependant, si vous cliquez sur l'un de nos liens pour accéder à la page détaillée de l'hôtel. Nous voyons maintenant la description est maintenant ajoutée à nos modèles, mais parce que nous ne transmettons que des barres obliques toutes les routes. Si nous allons sur notre page d'accueil et puis cliquez aussi sur voir tout. Ici, nous voyons également tous nos hôtels, mais sans description. Mais cette route commence également par une barre oblique avant tout. Cela peut sembler un peu déroutant pourquoi nous ne voyons pas la description sur cette page deux. Si nous regardons un peu plus près et passons à notre modèle, nous voyons la barre oblique en avant après tout. Si nous passons à nos routes dans notre index.js, ayant une barre oblique avant tout, puis une barre oblique à droite à la toute fin correspond seulement à cette deuxième route ici, qui rend notre détail hôtel. Puisque nous utilisons une barre oblique supplémentaire et aussi notre itinéraire tous les hôtels ici est seulement barre oblique avant tout sans rien à la fin, c'est pourquoi cette description ne fonctionne que sur la page détaillée de l'hôtel et pas sur la route de tous les hôtels, qui nous avons ici. Nous utiliserons davantage cette variable d'URL pour le cours, mais nous allons ensuite gérer l'affichage dans nos hôtels en fonction d'un pays particulier. 33. Hôtels par pays: Si nous nous dirigeons vers la page d'accueil de nos projets, puis faites défiler vers le bas, ci-dessous sont les hôtels, et descendez vers d'autres pays, que nous avons juste ici. Nous avons une liste de pays qui ont des hôtels situés à l'intérieur. Si nous cliquons sur un lien d'hôtel individuel, tel que celui-ci, cela nous conduira à un itinéraire de /country puis /country name. Actuellement, nous obtenons un 404 parce que son itinéraire n'est pas encore géré, comme nous le voyons ici, nous allons les corriger dans cette vidéo en affichant un modèle, qui affichera tous les hôtels la base de données qui sont situés dans ce pays particulier. Comme d'habitude, nous allons travailler dans notre index.js. Nettoyons certains de ces onglets pour l'instant. Index.js. Allons vers nos /pays, puis ajoutons une nouvelle route qui est en dessous de cela. Puisque nous recevons juste un modèle, nous pouvons utiliser une requête get, donc routé ou obtient, et ensuite nous pouvons utiliser /country, comme nous le voyons là-dedans. Ajoutez ensuite notre nom de pays dynamique en tant que paramètre. C' est le côlon, et appelons ça le pays. Cela va également utiliser le contrôleur de l'hôtel et ensuite nous pouvons créer des hôtels par pays. Si routs a un segment dynamique pour capturer le pays à partir de l'URL. Allons voir notre contrôleur de l'hôtel. Créer des hôtels par fonction pays, puis nous pouvons saisir cette section dynamique de l'URL. Contrôleur de l'hôtel tout en bas, nous allons configurer cela comme normal, l'exportation commence. Hôtel par pays marquera ceci comme une synchronisation, en passant la demande, la réponse, et aussi la prochaine. Ajoutons notre section d'essai. Attrapez les erreurs et puis comme d'habitude, nous allons passer ceci à la suivante. Nous allons commencer par capturer le pays à partir des paramètres généraux, et c'est comme nous l'avions fait auparavant avec l'hôtel. Définissons des constantes d'obéissance appelées CountryParam, et ceci est la requête.. params.country. Ensuite, nous pouvons configurer notre méthode de recherche pour rechercher notre base de données par pays. Colonnes, nous allons appeler cela les listes de pays, car il va être de stocker une liste de pays qui correspondent à notre paramètre, nous allons attendre hôtel.Trouver, puis de ne retourner nos pays, nous pouvons passer dans nos objets en passant le champ Pays auquel vous souhaitez faire correspondre et ensuite correspondre à notre variable CountryParam. Avant de passer ces données à nos modèles, faisons d'abord un res.json pour voir quelles données sont retournées à partir de la base de données. res.json, puis passer dans notre liste de pays, qui devrait stocker une liste de pays. Il nous donne la sauvegarde, puis recharge et assurez-vous que vous êtes toujours sur les mêmes routes qu'avant, qui est /pays, puis un pays particulier juste après. Puisque nous sommes sur cette route aux États-Unis, nous ne voyons que les pays disponibles aux États-Unis. L' hôtel de test ont été créés avant, était le pays des États-Unis, et cet hôtel sept est les États-Unis aussi. Vous ne pouvez en avoir qu'un par pays en fonction du pays sur lequel vous avez cliqué. Nous pouvons également changer cela dans l'URL. Change le Mexique, et on y va. Nous aurons l'hôtel neuf et aussi l'hôtel 10, qui sont dans le pays du Mexique. Ça a l'air bien. Nous avons maintenant les données d'hôtel que nous devons transmettre à nos modèles. Maintenant, nous pouvons remplacer notre res.json par un res.render. Nous allons créer un modèle appelé hôtels par pays. En utilisant les traits de soulignement séparés par une virgule, nous pouvons ajouter nos objets qui deviennent contiennent le titre ou parcourir par pays, puis aussi à l'intérieur, nous pouvons ajouter une section dynamique, qui va être le nom du pays que nous sommes en regardant. Nous y sommes avec le symbole, les accolades, puis à l'intérieur, nous pouvons ajouter dans le CountryParam, et puisque nous utilisons maintenant des données dynamiques dans notre chaîne, nous devons également changer ces guillemets pour être des ticks de retour. Changez ce sont le point-virgule à la fin et ainsi que son titre. Nous pouvons également ajouter une virgule et peut-être aussi dans notre liste de pays, qui est les données et nous allons avoir besoin à l'intérieur des modèles. CountryList et donnez-nous économiser. La dernière étape, comme vous le savez déjà, est de créer ces hôtels par pays.pug Fichier, et assurez-vous que vous épelez correctement. Ouvert la barre latérale à l'intérieur du dossier de toutes les vues, créez un nouveau fichier appelé hotels by country.pug. Ce modèle comme tous les autres va étendre notre mise en page et nous allons remplacer le bloc appelé contenu. Comme ses modèles afficheront également la liste des hôtels, nous devons également inclure nos mixins. Inclure Mixins/_hotel ou hotelmixin. Nous pouvons également passer dans notre titre, h2 égale titre. Maintenant, nous devons parcourir toutes les données de notre contrôleur de l'hôtel. Qui a vu dans ce pays les données sont stockées dans une variable appelée CountryList. Créons une boucle. Chaque hôtel dans CountryList, crée un wrapper de .hotel_wrapper et impulser dans notre mélange avec le symbole plus, plus hôtel, et aussi transmettre les données individuelles de l'hôtel de notre boucle. Nous pouvons également ajouter un bloc else ici au cas où aucune correspondance n'est trouvée pour ce pays, affichez ceci sur un élément de liste. n'y a pas d'hôtels, et une fois que vous avez un modèle qui ressemble à ceci, donnons ceci une sauvegarde et puis rechargez. Maintenant, je vais res.json est remplacé par nos modèles. Avoir une erreur, nous allons chercher la vue hôtels par pays. Voyons ce qui se passe. Nous avons une erreur d'orthographe, donc hôtel, et c'est des hôtels, alors il suffit de changer ce nom de fichier à l'intérieur de nos vues. Renommez, je viens d'ajouter un S à la fin de cela. Rechargez le navigateur. Il y a notre niveau dynamique deux en direction ou en naviguant par pays, quand impulsion dans le nom du pays, et il y a un hôtel neuf et aussi l'hôtel 10, que nous avons vu avant à l'intérieur du JSON. Testez quelques autres pays et voyons si tout cela fonctionne. Retournons à la page d'accueil. Jusqu' au bas. Essayons la Jamaïque. Nous avons le titre dynamique, et ce pays est en Jamaïque. Descendez aux Pays-Bas comme notre titre, et notre hôtel gratuit, qui est à l'intérieur des Pays-Bas. Excellent, c'est une autre étape de notre projet, que nous avons terminé. Je pense que maintenant, nous avons beaucoup de choses à faire. Nous devrions maintenant faire une pause en ajoutant de nouvelles fonctionnalités et aller avant et ajouter un style CSS pour le rendre un peu plus agréable. 34. Styliser l'en-tête - petit écran: Il est maintenant temps de rendre notre projet un peu plus agréable avec un peu de CSS. Je vais commencer par styliser la section d'en-tête pour la vue à petit écran. Commençons par réduire le navigateur. Donc rétrécir cela et ensuite dans Visual Studio, nous pouvons également le rendre plus petit aussi, ouvrir la barre latérale à l'intérieur de notre fichier public ou dossier public. Cliquez dessus et puis nous avons un dossier de feuilles de style avec notre style.css, puis fermez la barre latérale. A l'intérieur, nous avons quelques valeurs par défaut, le style, qui est fourni avec le générateur express. Donc, je vais sélectionner tout et supprimer. Pour commencer, je vais ajouter un style général au HTML sur les sections du corps. Donc, comme le sélecteur HTML et ensuite déclarer, nous voulons que l'arrière-plan soit blanc. Puis jusqu'à une section du corps et bien sûr, n' hésitez pas à faire des changements pour rendre cette application plus personnelle ou suivre avec moi si vous préférez le même style. Donc, l'arrière-plan pour la section osseuse, je vais donner à cela une valeur avec le hachage de eee, le centre cela à l'intérieur du navigateur et nous pouvons utiliser la marge zéro également définir le poids maximum du corps à 1500 pixels. Cela fera en sorte que sur les très grands moniteurs, le contenu n'est pas trop étiré et enfin, un rembourrage sur la limite de zéro en haut et en bas et avertir M à gauche et à droite. Donc, nous sauvegardons ceci et rechargeons. Nous ne devrions pas voir trop de différence pour l'instant, mais nous pouvons juste voir la couleur de fond gris, IPO décentralisée et aussi un peu sur lui. Du haut, je vais commencer par les liens de navigation, qui sont ceux-ci juste ici et ceux-ci ont un wrapper de nav à l'intérieur ici. Je vais changer le type d'affichage pour utiliser la flex-box. Donc, afficher flex, et puis nous pouvons définir la direction de flexion à la colonne. Cela définira les éléments flexibles de haut en bas. Aussi la propriété align items au centre et a également déclaré la couleur d'arrière-plan. Tant le logo. Donc, définissez l'arrière-plan sur un volume en utilisant le hachage pour les valeurs hexadécimales de 4dc2ca Reload ceci. On y va. Nos articles sont maintenant centrés au milieu de la page, et ont également la même couleur d'arrière-plan qu'un logo. Il semble qu'il y ait aussi des défauts, des marges et des plaines ici. Travaillons avec notre liste non ordonnée. Tout d'abord, supprimez toute valeur par défaut mise dans une URL, puis utilise un peu plus vers la gauche. Les éléments individuels de la liste. Nous pouvons les rendre un peu plus grands en définissant la taille de la police à 1,2 em. L' affichage à être inline-block, puis aussi la marge de zéro en haut et en bas et dix pixels à gauche et à droite. Recharger. Ok, bien. Donc maintenant, nos éléments de liste sont bloc en ligne, donc ils sont affichés sur la page dans les formats en ligne et aussi ils sont toujours en dessous du logo parce que nous avons dit la direction du flux de la colonne sur les éléments nav, qui comprend le logo et aussi notre Éléments de liste. Donc, jusqu'à notre liste d'articles ici. Nous pouvons alors cibler les liens aussi. Donc, tout d'abord, si nous définissons la décoration de texte pour ne pas enregistrer recharger, et cela supprimera les valeurs par défaut sur la ligne de nos liens. Nous pouvons également supprimer cette couleur par défaut en définissant la valeur de couleur, je veux utiliser une couleur RVB. Donc, le premier est la valeur rouge de 43, 40 et 40. Le rafraîchissement vert et bleu, qui nous donnera cette couleur gris plus foncé. Si nous passons à notre fichier de sortie de mise en page. Donc, ouvrez la barre latérale dans les vues, et la mise en page qui se connectent à un formulaire en haut. Nous avons ajouté un wrapper classof.search nav, qui est le wrapper principal pour tous ces éléments de formulaire à l'intérieur de notre en-tête et aussi chaque entrée individuelle avait également un wrapper de points entrée rapide aussi. Donc, nous allons revenir à notre style.css et commencer à travailler avec notre formulaire à l'intérieur de l'en-tête. Tout d'abord, le wrapper principal qui était navigation de recherche. Donc search_nav. Les arrière-plans. Je vais définir ceci à une valeur hexadécimale de, c1e6e9. puis assurez-vous que cela est orthographié correctement. Donnez que sauver et maintenant nous aurons la couleur bleue plus claire 404. Un peu de rembourrage ici aussi, il suffit d'ajouter un peu d'espacement de 0,5 em. Donc, ensuite, je vais passer à tous ces éléments dans une sorte de formulaire en définissant le type d'affichage sur flex. Nous pouvons également leur donner une direction flexible de colonne pour la vue mobile. Plus tard, nous allons également les modifier pour revenir à la ligne par défaut, qui les affichera ensuite sur la page lorsque nous aurons plus d'espace disponible. Donc, nous allons les cibler dans le CSS. Nous avons search_nav et nous ne pouvons sélectionner que le formulaire qui est à l'intérieur de cette classe ici. signifie que les styles qui sont à l'intérieur ne s'afficheront qu'à cette forme particulière et aucune autre forme de tous les côtés. Donc, afficher le type ou flex. La direction de flexion de la colonne. C' est donc un fait et un peu de récupération et ensuite nous pouvons aller de l'avant et cibler les entrées individuelles. Donc, les entrées individuelles pour le plus petit vert, nous n'aurons pas besoin d'être la pleine largeur de la page. Définissez la largeur sur 100 pour cent. Nous pouvons déclarer les hauteurs de 20 pixels. Enregistrez ceci, et rechargez. Ok, bien. Ajoutons également des marges et des motifs pour vous donner un peu d'espace dans. Le rembourrage. Donc 0,5 em en haut et en bas et zéro à gauche et à droite. Pleine largeur asymétrique facile. Donc aussi une certaine marge sur le dessus, l'espace hors de ceux ci-dessus et nous avons tous besoin d'un peu de marge de 0,3 em. Enregistrez, puis rechargez. Je vais également supprimer cette bordure par défaut autour des entrées. Donc, définissons la bordure pour être une valeur de zéro. Rechargez, et maintenant nous avons cette ligne grise supprimée de chacune des entrées. Pour le moment sur la vue mobile, si nous tapons dans l'une de ces destinations, la ligne de texte est sur le côté gauche. Je vais changer cela pour être dans le capteur en utilisant la propriété text align du centre et également ajouter un rayon de bordure. Donc, chacune de ces entrées de cinq pixels. Enregistrer puis recharger ceci et maintenant nous pouvons voir comment le texte est maintenant centré, et nous avons un peu de rayon sur chacune des entrées. Ensuite, jusqu'à la référence d'entrée, qui entoure chacune de nos étiquettes sur les combinaisons d'entrée. Juste pour ajouter une marge sur le haut et le bas pour sortir un peu d'espacement de mousse et également aligner ce texte à l'intérieur du capteur pour l'étiquette. Cible donc l'entrée sur un wrapper d'échelle, la marge, les valeurs supérieures et inférieures de 0,5 em, puis zéro sur la gauche et les droits. Nous pouvons aligner nos étiquettes avec une ligne de texte au centre. Enregistrez, puis rechargez. Les codes ont maintenant l'air beaucoup plus agréable à l'intérieur de la vue mobile. Nous pouvons maintenant ajouter quelques touches de finition aux entrées sélectionnées et aussi le bouton est en bas. Nous pouvons les sélectionner par le nom de l'élément. Alors sélectionnez et bouton. Déclarez les hauteurs de 36 pixels. La largeur sur le petit écran de 100 pour cent. Une grande partie du reste des entrées et supprimez également la bordure par défaut en définissant sur zéro. Enregistrez, puis actualisez. Ok, bien. On avait besoin d'un alpha de forme. La dernière chose que je veux faire est de cibler seulement les boutons pour donner à cela une couleur de fond bleu cadet et aussi nous donner un rayon de bordure de cinq pixels. Tellement tout le reste des entrées. Ok, rechargez. Bien. Notre section d'en-tête sur notre formulaire est maintenant beaucoup plus agréable sur la petite vue. Si nous faisons défiler vers le bas la touche finale que je vais faire dans cette vidéo est de définir ces images de plage d'en-tête et aussi toutes les autres images sur le site à 100 pour cent pour bénéficier au conteneur plutôt que de déborder comme nous le voyons si nous faisons défiler vers le droit. Donc, en dessous du bouton, sélectionnez tous les éléments de l'image. Définissez la largeur sur 100 pour cent. Rafraîchissez, et il semble instantanément beaucoup mieux maintenant. Bien. Notre en-tête est maintenant mieux à la vue sur petit écran la semaine prochaine cliquez sur pour continuer nous allons styler pour les tailles mobiles à la fois appliquer ces à un hôtel et les pays. 35. Styliser le contenu - petit écran: Avec le style d'en-tête maintenant terminé pour notre vue mobile, nous pouvons maintenant passer à un style dans la zone de contenu, qui a les hôtels et aussi les pays. Si on passe à notre indice de carlin. Ouvrez la barre latérale dans les vues, puis notre index dot carlin. Sur le côté, nous avons un emballage extérieur, qui est celui-ci juste ici. Ensuite, imbriqué à l'intérieur, nous avons un emballage d'hôtel qui descend dans la section hôtel, puis un emballage pays, ou la section pays en bas de notre page d'index. Allons à notre style dot css et commençons à travailler avec l'enveloppe externe. Faites un commentaire. Il s'agit de la section de contenu. Hôtels et pays, vue. Ok, donc commençons par l'emballage extérieur de point, avec le score inférieur. Ceci est un wrapper pour tous les hôtels et pays que nous voyons sur la page d'accueil ici. Nous allons l'utiliser pour aligner le texte au centre et définir également la taille de la police. La propriété text-align, du centre et une taille de police d'un em. Définissez ceci, puis rechargez. Maintenant, nous pouvons voir notre titre et aussi toutes les informations de l'hôtel est maintenant aligné sur le centre. Maintenant, sur la div de l'hôtel point. C' était l'emballage que nous utilisions à l'intérieur de chaque hôtel. Si nous allons aux mixins et ensuite à l'hôtel dot carlin, nous avons donné à chaque hôtel un wrapper de dot hotel donc utilisons-le maintenant dans le css. dessous de l'enveloppe extérieure, ciblez l'hôtel. Ok, donc nous allons donner à chaque hôtel une couleur de fond blanc, pour qu'il se démarque sur le fond gris. Fond de blanc et aussi une certaine marge de zéro en haut, zéro à droite, un em en bas, et zéro à gauche. Si nous sauvegardons maintenant cela et puis rafraîchissons, nous voyons maintenant la couleur de fond blanc et aussi la marge sur le fond sépare chaque hôtel. Aussi à l'intérieur de ce mixin, nous avons les champs de texte à l'intérieur d'un div appelé info hotel. Retour à notre dot hotel dot carlin, nous avons cette section info hôtel qui contient le nom de l'hôtel, et aussi dans le détail de l'hôtel, nous avons la description et aussi la note des étoiles, le pays et le prix. C' est essentiellement tous ces textes que nous voyons dans chaque hôtel. À l'heure actuelle, si vous cliquez sur un hôtel individuel, puis faites défiler vers le bas, ont ensuite été prises à la vue détaillée de l'hôtel. Tout le texte à l'intérieur est proche du bord. On peut réparer ça avec un rembourrage. Style dot css, l'information de soulignement de l'hôtel. Tout ce que nous devons faire ici pour corriger cela, est d'ajouter un rembourrage d'un em puis de recharger. Maintenant, ayez un espacement autour du titre, de la description, et aussi des informations en bas. Ensuite, je vais passer à nos formulaires. Si nous passons à notre administrateur, nous devrions le rendre un peu plus grand pour voir l'URL. Admin, puis barre oblique avant ajouter. Faites défiler jusqu'à notre formulaire, et actuellement notre formulaire n'a pas l'air trop grand. Allons travailler là-dessus maintenant. Rétrécir le navigateur vers le bas. Nous avons déjà ajouté certains noms de classe à l'intérieur de nos vues. Nous allons ajouter un hôtel, fermer ça. Nous avons cette forme d'hôtel qui est rendue comme un mixin. Si nous passons à cela, nous avons chaque groupe de formulaires individuel avec l'étiquette une entrée entourée par ce wrapper d'entrée de formulaire. Cela peut être utilisé dans le style.css. Tout d'abord, formez l'entrée de soulignement. On peut ajouter une marge. Si nous ajoutons un em puis zéro, cela ajoutera un em de marge au haut et au bas. Donnez un peu d'espace entre chaque entrée. Ensuite, nous pouvons aller de l'avant et cibler l'entrée individuelle ainsi que la zone de texte. Parce que nous voulons que cette étiquette apparaisse à gauche de chaque entrée. Pour commencer, si nous définissons chaque entrée sur la largeur de 70 pour cent, pour la rendre un peu plus étroite, cela nous donnera alors l'espace pour ajouter une étiquette sur la gauche. Nous ciblons l'entrée du formulaire, puis chaque entrée individuelle, puis nous devons également cibler la zone de texte aussi. Définissez la largeur sur 70 pour cent. Aussi la ligne de texte à être sur la gauche. Enregistrez, puis actualisez. Ok, c'est mieux. Maintenant, sur notre étiquette. Encore une fois, l'entrée du formulaire. Mais cette fois, nous allons cibler le label. Définissez l'affichage pour être inline-block. Ensuite, donnez à cela une largeur de 20 pour cent pour vous assurer que cela correspond à la même ligne que l'entrée. Si nous rechargeons, nous avons maintenant chaque étiquette à gauche de l'entrée. Sur cette zone de texte, nous supprimons la bordure de toutes les autres entrées et donnons à celles-ci un rayon de bordure de cinq pixels. Appliquons également ceci à la zone de texte afin qu'elle corresponde. La bordure de none, puis le rayon de bordure de cinq pixels, point-virgule, puis recharger. Maintenant, il est extérieur correspond au reste des entrées. Puis enfin en bas, nous avons ce grand bouton confirmé à l'intérieur de la forme de l'hôtel. Si nous descendons au bouton en bas, nous avons donné à cela une classe de bouton petit. Copions ceci et plus dans le style dot css ajouter le point et coller ceci dans. Rendons cela plus petit en ajoutant la largeur de 100 pixels, et aussi une marge de 0,5 ems pour lui donner un peu d'espacement, en dessous du navigateur. On y va. Maintenant, le bouton retour à l'administrateur et aussi notre bouton de confirmation en bas utilise maintenant ce bouton petite classe. Maintenant, cela semble beaucoup plus agréable pour nos petits écrans. Retour à la page d'accueil et faites défiler vers le bas et tout semble à peu près comme il se doit. Cependant, si nous étirons le navigateur, rendre cela vraiment large, les choses commencent à sembler un peu trop tendues. C' est quelque chose que nous allons passer dans la prochaine vidéo, où nous commencerons à coiffer la vue plus large en ajoutant une requête multimédia. 36. Stylisation grand écran: Si nous faisons de notre projet la pleine largeur à l'intérieur du navigateur, il semble maintenant un peu étiré parce que jusqu'à présent nous nous sommes concentrés sur les petites tailles d'écran. Ajoutons maintenant du CSS à l'intérieur d'une requête multimédia pour résoudre ce problème. Jusqu' à notre style.css, tout en bas du fichier, nous ajoutons la requête multimédia avec un média. Je veux cibler la largeur minimale du navigateur de 1 000 pixels. Ouvrez les courses de code. Vous pouvez avoir un jeu avec la taille qui fonctionne le mieux pour vous, mais je vais aller pour un 1000 points d'arrêt de pixels , puis commencer en haut avec la navigation. Sélectionnez les éléments nav et assurez-vous que cela se trouve à l'intérieur de ces accolades de requête multimédia. Maintenant, nous sommes sur le plus grand vert. En haut, nous avons la section d'en-tête supérieure définie pour être une direction flexible de colonne, ce qui signifie que le logo et aussi les liens de navigation ne sont pas récupérables. Maintenant, je vais changer la direction du flex pour être de retour à la ligne, ce qui signifie que le logo serait sur le côté gauche, puis les liens seront sur la droite. Nous le faisons avec direction flex et satisfaire ligne, recharger. À l'intérieur de notre section de navigation, nous avons le nav, qui est un lien pour notre logo, et avons également une autre liste pour nos deux liens ici. Je veux commencer la valeur flex pour que le logo soit une valeur d'un, puis l'autre liste soit une valeur de deux, ce qui signifie qu'il prendrait deux fois l'espace disponible sur le côté droit. Nous pouvons ensuite aligner les textes sur la droite pour nous assurer que cela est terminé sur le côté droit de l'en-tête. Commençons par le nav a. Si cela va à la mise en page à l'intérieur d'un ici, nous avons nav et puis le nid à l'intérieur, et c'est pour notre logo image. Ensuite, l'autre liste qui n'est pas le même niveau, donc cela va être une valeur de flux de un, et ce sera la valeur de flex de deux, qui en fait deux fois l'espace disponible. À l'intérieur de notre nav a, cela va prendre la valeur flex d'un. Ensuite, notre nav ul sera la valeur flex de deux. Enregistrez ceci et rechargez. Nous ne voyons pas trop de différence, mais si nous allons dans les outils de développement survolent notre navigation, nous voyons le contour bleu pour la partie. Ensuite, si nous allons à l'autre liste, nous pouvons voir que c'est deux fois la largeur disponible. Revenons au style. Après le flex, nous pouvons ajouter l'alignement du texte pour être sur le côté droit, poussant sur le bord de la div. Mais c'est probablement un peu trop près du bord, donc une petite marge droite corrigera cela d'un m. Recharger. Maintenant, nous aurons une barre de navigation plus adaptée à un écran plus grand. Bien. Maintenant, descendez au formulaire de recherche ci-dessous. Maintenant, nous avons beaucoup de colonnes configurées comme ceci est mieux pour la vue mobile. Sur le plus grand écran comme celui-ci, nous voulons changer la direction de flexion une fois de plus pour être rangée, donc il est plus adapté à l'espace plus disponible. Sous notre nav ul, ciblons la recherche sur le score nav. Si nous allons à la layout.pug, puis vers le bas pour former, c'est l'enveloppe extérieure pour l'ensemble du formulaire. Après style.css, ouvrez les accolades et puis nous pouvons définir la direction flex pour une fois de plus être rangée. n'y a pas de changement. En fait, nous avons juste besoin de cibler le formulaire à l'intérieur ici et essayer ceci, et nous y allons. Continuons avec ce style flex. Justifiez que le contenu se trouve au centre. Cela nous donnera un espacement égal sur le côté gauche et le côté droit. Ensuite, après cela, le flex wrap, nous allons définir ceci à une valeur de wrap afin qu'il puisse circuler sur des lignes supplémentaires. Ensuite, nous allons aligner les éléments pour être fin flex. Cela alignera toutes les entrées verticalement. Maintenant, si nous sauvegardons celui-ci, je vais pousser ces entrées pour être maintenant en ligne avec le reste de ceux-ci. Cela nous donne la forme horizontale que nous voulons, mais elle est encore un peu écrasée. Seulement lors de la création de ce formulaire qui entoure chaque entrée avec un div, avec la classe d'entrée Rapa. Si nous passons à notre disposition de carlin, à l'intérieur de notre forme, nous pouvons le voir juste ici. Ceci est rond et chacun de nos groupes d'étiquettes et d'entrées. Au-dessus du style.css et encore, toujours à l'intérieur de cette requête multimédia, nous pouvons maintenant cibler ces classes qui était dot input_wrapper. Définissons la marge à zéro pour supprimer les valeurs par défaut. Le Padian est de 0.5ems. Enregistrez ceci, puis rechargez. On y va. Nous pouvons maintenant voir que le modèle a ajouté un peu d'espace entre chacune de ces entrées. Restreignez également ceux-ci à un poids maximum de 170 pixels, alors ne vous étirez pas trop loin. Ensuite, définissez également l'alignement du texte pour qu'il soit de retour à gauche. Attendez le rechargement et maintenant nous aurons un espacement supplémentaire autour de chacune de ces entrées. Défilant vers les hôtels et les pays, le texte des en-têtes que vous voyez ici et aussi pour les hôtels, il hérite toujours des alignements centraux dans la vue mobile. Je voulais est en ciblant l'enveloppe extérieure div. Rappelez-vous plus tôt, nous avons dit la classe wrapper externe savvy.outer wrapper. Si nous faisons défiler vers le haut, c'était un juste ici qui enveloppe tous les hôtels et les pays sur la page d'accueil. Faites défiler vers le bas, nous pouvons remplacer les alignements de texte à l'intérieur du point de requête média outer_wrapper, nous pouvons rétablir l'alignement du texte pour être sur la gauche. Rafraîchir. Maintenant sur chaque hôtel individuel. Je vais utiliser le flex box pour chacun de ces hôtels. Définissons le type d'affichage dans le CSS. Après emballage extérieur, sélectionnez l'hôtel point, qui est le div, qui entoure chaque hôtel dans le mixin. Type d'affichage du flex. Puis rechargez. C'est ainsi que nos hôtels ont l'air par défaut. Il a encore besoin d'un peu de travail pour bien paraître. Si nous allons à notre hôtel mixin, qui est souligné hotel.pug. Rendez ça un peu plus grand. Nous avons ajouté des cours à la section image, qui est l'image de l'hôtel juste ici, et aussi à la section entrée. Nous pouvons maintenant les utiliser dans le CSS pour rendre notre hôtel plus agréable. Retour au fichier style.css. Allons d'abord pour l'img de l'hôtel. Donnez-nous une valeur de flex d'un, et aussi une marge d'un m pour donner un peu d'espacement. Enregistrer et recharger. On peut juste voir la marge à l'extérieur de l'image. Maintenant sur l'information de l'hôtel, qui est le texte sur le côté droit. SO.HOTEL_INFO. Nous pouvons également nous donner une valeur flexible de un pour que cela soit égal à l'image. Ensuite, quelques motifs, ajoutez un peu d'espacement zéro sur le haut et le bas. Puis un m sur la gauche à droite. Enregistrez ceci, puis rechargez. Aller à la page d'accueil semble maintenant beaucoup mieux. Cependant, si nous cliquons sur un hôtel et aller jusqu'à la vue de l'hôtel et faites défiler vers le bas. Le CSS que nous avons ajouté s'applique également à ce détail complet de l'hôtel aussi. Je veux seulement que cette image et cet hôtel soient côte à côte. Lorsque nous listons tous les hôtels sur la page d'accueil et aussi dans la vue de tous les hôtels. abord, nous pouvons restreindre le CSS pour ne s'appliquer qu' à tous les hôtels vue sur dans tous les hôtels. pug. Regardons ces modèles. Tous les hotels.pug, ouvrons ça. Nous avons entouré l'hôtel ici avec un emballage .hotel. Cela signifie que nous pouvons l'utiliser pour être plus précis sur l'endroit où nous appliquons notre style. Cela peut être fait en ajoutant cette classe wrapper avant la classe d'hôtel dans le CSS. Retournez au style.css, copions ceci. Ensuite, juste avant le .hotel, ajoutons l'enveloppe de l'hôtel, en nous donnant un sélecteur CSS plus spécifique. Enregistrez ceci, puis il se recharge. Toujours sur la page détaillée de l'hôtel. Nous avons maintenant supprimé la flexbox de cette vue, ce qui signifie que nous avons maintenant le contenu empilé sur une image pleine grandeur. Vérifions juste sur la page d'accueil. Ça a toujours l'air bien. Merci cliquez sur tous les hôtels, et la compétence flexbox prend également effet dans cette vue. Pour terminer les choses, et je veux afficher les pays sous forme de grille. Si nous allons sur la page d'accueil, puis faites défiler vers le bas tout en bas. Nous avons les pays en bas ici, mais ils n'ont pas l'air trop grand. Il y a deux endroits où nous exposons les pays. Il sur la page d'accueil et aussi si vous cliquez sur voir tout, dans ce lien ici. C' est à peu près la même vue que la page d'accueil. Ces deux modèles ont un div avec la classe de wrapper pays. La première est terminée dans l'index.pug. Ouvrez ceci dans l'index des vues. carlin. Nous avons contour en haut en bas ici, autour de nos pays, et aussi dans tous les modèles de pays , nous avons le même div juste ici pour garder les choses cohérentes. Aussi ces pays sont sortis comme une autre liste, que nous pouvons voir ici.. Nous pouvons l'utiliser dans le CSS. Retour au style.css, puis vers le bas vers le bas sur les informations de l'hôtel. Choisissons notre emballage pays. Une autre liste. Nous pouvons définir le type d'affichage pour être grille. Nous avons trois colonnes parce que les colonnes de modèle de grille à répéter. Ensuite, à l'intérieur des parenthèses, nous voulons répéter ces trois fois en utilisant l'unité one fr pour les rendre égaux. Pour les espacer, nous pouvons également ajouter l'écart de grille, qui a regardé tôt dans le cours de 20 pixels. Ensuite, alignez également le texte pour qu'il soit au centre. Enregistrez ceci et puis vérifions cela dans le navigateur. Recharge, et ce sont les routes des pays barre oblique, qui semble avoir un texte en gras de la nasa va jeter un oeil à cela. Ensuite, si nous allons à la page d'accueil et juste en bas, nous avons aussi la grille pour la page d'accueil aussi. Laissez-vous vérifier ce texte en gras. Cliquons sur tout voir. On peut voir qu'il est juste là. Passons au fichier tous les pays.pug. Je pense que c'est juste un problème d'indentation. Nous avons un cap de niveau 2 ici, et à l'intérieur de la h2, nous avons tout imbriqué à l'intérieur. Passons tout cela pour être le même niveau que le h2 plutôt que imbriqué à l'intérieur et recharger. C'est beaucoup mieux. Cliquez sur un pays. Ensuite, nous sommes pris à la vue du pays où nous voyons nos deux hôtels de République dominicaine disponibles à l'intérieur de notre liste. Encore une fois, nous pouvons voir à quel point il est facile d'utiliser la grille CSS. Nous avons bien aligné une mise en page de grille avec seulement quelques lignes de code. Nous reviendrons au CSS plus tard et ajouterons quelques changements supplémentaires au fur et à mesure que nous allons. Une chose que vous avez peut-être remarqué ici est lorsque vous traitez avec les pays sur la page d'index et aussi dans les modèles de tous les pays, si nous allons passer à notre modèle ici, nous réutilisons le même flux de code vers différents modèles. Nous allons corriger ce problème dans la prochaine vidéo en déplaçant nos pays dans un mixin réutilisable. 37. Mixin des pays: Lorsque nous avons répété du code dans plusieurs modèles, il est souvent préférable de le mettre dans un mélange séparé, et c'est ce que nous allons faire maintenant avec la liste de notre pays. Dans les deux index.pug. En bas, nous avons un élément de liste que je vais mettre notre pays. Aussi dans tous les pays.put modèles, aura le même élément de liste, affichant notre lien et notre image de pays. Dans ces deux modèles, nous allons parcourir ces pays et afficher à la fois l'image et le nom sous forme de liste. Nous savons déjà comment utiliser des mixins. Allons de l'avant et créons un nouveau fichier dans le dossier mixins pour afficher ces listes de pays. Ouvrez la barre latérale. A l'intérieur du dossier mixins, créons un nouveau fichier. Pays de soulignement, liste de soulignement avec extension .pug. Donnons un nom à ce mixin. Donc, la liste des pays mixin mélange le passage d'un pays à la production. Donc, nous pouvons également ajouter cette variable dans. Enregistrez ensuite ce fichier. Ensuite, dans le fichier tous les pays .pug, nous pouvons découper l'élément de la liste, le lien, et aussi l'image. Prenez ces trois lignes juste ici coder ceci et ensuite nous pouvons aller de l'avant et les ajouter à notre mélange de pays, les coller dans, et s'assurer que l'indentation est correcte. Nous allons déplacer l'élément de la liste aussi, donc ce n'est pas au niveau réel. Donc c'est notre mélange maintenant très bien. Nous pouvons enregistrer cela, puis revenir à tous les pays.pug et ensuite en haut nous pouvons inclure le fichier mixin. Après les mises en page étendues, incluez les mixins, la barre oblique avant, puis soulignez la liste des soulignements de pays. N' oubliez pas que vous n'avez pas besoin de l'extension carlin. Ensuite, nous pouvons ajouter le mélange par son nom à la place de l'élément de liste, que nous mettons en retrait dans un niveau. À l'intérieur de notre boucle, nous appelons ça la liste des pays. Cette liste de pays va également prendre dans le pays, qui est transmis par notre contrôleur. Nous pouvons maintenant enregistrer ce fichier et ensuite aller dans tous les pays, sur lesquels nous sommes actuellement en cours. Rechargez ceci. Nous constatons que les pays sont maintenant en place, mais cette fois-ci sont sortis d'un mixin. Maintenant, tout ce que nous devons faire est de répéter ceci pour l'index.pug qui est ce fichier juste ici. Tout d'abord, nous pouvons inclure le deuxième mixin. Inclure donc les mixins/. Nous avons aussi le mixin de l'hôtel, mais cette fois c'est la liste des soulignements du pays. Ensuite, nous pouvons descendre et ajouter ce mélange à la place de notre article de liste. Tout d'abord, rappelez-vous dans ce fichier que nous accédons au nom du pays avec l'ID de soulignement et le lien et aussi l'image. C' est parce qu'à l'intérieur de notre hôtel controller.js, si vous allez dans les filtres de page d'accueil, nous regroupons les pays distinctifs avec ce groupe en phase avec la clé de soulignement ID. Principalement, nous allons traiter ID dans le mixin pour que cela fonctionne. Supprimons donc les lignes libres du bas. Nous pouvons remplacer cela sans mélanger la liste des pays, et nous mettons également dans notre pays. _ID. Si vous enregistrez, maintenant c'est pour la page d'accueil. Allez à l'index, puis faites défiler vers le bas sous les hôtels, nous avons maintenant notre liste complète de pays sur la page d'accueil aussi, ainsi que la liste de tous les pays. Ce qui signifie que notre mixage fonctionne maintenant et nous avons réduit notre code en double. 38. Promise.all et déstructuration de tableaux: A l'intérieur du contrôleur de l'hôtel, nous avons créé les filtres de page d'accueil tôt dans le cours. Vous vous souvenez peut-être que l'autre fois, nous avons dit que nous utilisions plusieurs appels d'attente, tout comme nous l'avons fait ici, n' est pas toujours une bonne idée. Cela est parfaitement bien, cependant, si le second appel attend repose sur le premier se terminant avant que cela ne s'exécute. Par exemple, si le premier attend en haut ici, sauvegardez l'hôtel, puis le deuxième appel d'attente nécessaire pour accéder à l'ID de l'hôtel, il serait alors logique de les garder tous les deux de cette façon pour s'assurer que nous avons l'ID de l'hôtel prêt pour le deuxième un au besoin. Mais ici, nous bloquons, récupérons les pays de la base de données jusqu'à ce que cette première section d'attente soit terminée, et cela n'a aucun sens. Ce que nous voulons vraiment faire, c'est les lancer tous les deux en même temps. Pour cela, nous avons quelque chose appelé promesse à tous. Promettre à tous est une méthode qui est fondamentalement une promesse géante qui enveloppe toutes les autres promesses à l'intérieur. Vous pensez peut-être, « Qu'est-ce que les promesses ont à voir avec l'attente asynchrone ? » Eh bien, async wait renvoie aussi une promesse, alors regardons cela en action. abord, supprimons les deux mots-clés d'attente car nous n'en avons plus besoin. Maintenant, nous allons examiner quelques nouvelles techniques qui vont introduire dans ES6 ou ES2015. Tout d'abord, c'est ce qu'on appelle la destruction. Plus précisément, pour cet exemple, nous allons examiner la destruction des tableaux. Nous pouvons l'utiliser pour créer fondamentalement un tableau de noms constants, puis les affecter à un tableau de valeurs que nous décompactons. Ça semble compliqué, mais c'est assez simple quand on voit tout tapé. Tout d'abord, créons une constante pour commencer. Après nos pays, juste ici, faisons de l'espace, créons une constante. Cette fois, ce sera un tableau de valeurs. En passant deux valeurs, la première, je vais appeler FilteredCountries, puis la seconde, FilteredHotels. J' ai nommé ces pays et les variables hôtelières filtrées parce que ces résultats sont filtrés en utilisant le pipeline d'agrégation, alors nous utilisons promesse à tout ce qui est également nouveau dans ES6. C' est égal à, maintenant, nous allons attendre, promettre avec un P majuscule, .all. Comme nous l'avons déjà dit, Promise.all prend plusieurs promesses, sorte qu'il peut passer dans nos pays et aussi nos variables d'hôtel à l'intérieur ici. Tout d'abord, passons dans les pays et cela doit être un tableau, et aussi nos hôtels. Maintenant, cette promet.All, que nous avons ici, sera maintenant résolu une fois que les deux pays et aussi les promesses de l'hôtel ont résolu avec succès. Alors qu'auparavant, en utilisant await individuellement, plutôt qu'une seule fois ici, cela a fait fonctionner les deux dans l'ordre. Maintenant, nous pouvons régler les deux en même temps, ce qui entraîne des performances plus rapides. En ce qui concerne la destruction du tableau, ces pays et aussi les promesses d'hôtels, seront alors essentiellement déballés, et installés dans les noms constants que nous définissons ici dans le même ordre. Les pays seront ensuite déballés, installés dans les pays filtrés. Une fois résolus, les hôtels seront également stockés dans les constantes FilteredCountries. Jetons un coup d'oeil à un autre exemple pour contourner tout cela. Nous pouvons laisser ce code dans parce que c'est ce dont nous avons besoin pour le cours. Mais celui-ci va juste être un exemple simple, donc vous n'avez pas besoin de taper le long si vous ne voulez pas. Une consonne de nourriture. Réglons cela à un tableau et ajoutons quelques valeurs alimentaires de fromage, poisson, et aussi de riz. Ensuite, une constante de a, b et c. Maintenant, si nous voulons détruire toutes les valeurs de ce tableau et les installer à l'intérieur des trois valeurs ici, mais dans l'ordre, donc a deviendra fromage, b sera poisson, et c sera égal au riz. Tout ce que nous avons à faire, c'est de fixer ces valeurs à notre gamme alimentaire. Puis une série avec un res.send. Envoyez-nous la valeur d'un. Vérifiez si cela fonctionne et commentez notre res.render. Sauvegardez ceci et nous sommes aussi sur la page d'accueil. Allons à localhost : 3000. Il y a la valeur du fromage. Essayons b et aussi c, qui devrait être du riz. Recharger. Maintenant, nous obtenons la valeur du riz aussi, ce qui signifie que notre tableau alimentaire est maintenant déballé et stocké dans les trois constantes juste ici. C' est à peu près la même chose que nous faisons ci-dessus avec nos variables filtrées. Ensuite, nous les fixons à nos pays et promesses hôtelières une fois les données résolues. Maintenant, laissons cet exemple et [inaudible] notre res.render. Bien. Maintenant, nous avons nos deux noms constants, nos pays filtrés et nos hôtels filtrés. Nous devons également les transmettre à notre modèle à la place de nos anciennes constantes ici. Celui-ci est FilteredCountries et celui-ci est FilteredHotels. De plus, puisque ces noms de variables sont maintenant modifiés, nous devons également les changer dans le modèle pour correspondre. Le modèle est index.code. On y va. Pour l'hôtel, au lieu de parcourir les hôtels, nous devons passer par FilteredHotels. Ensuite, faites de même avec les pays. Cette fois, nous allons utiliser est FilteredCountries. Alors sauvegardez. Maintenant, tout ce qu'il reste à faire est d'essayer cela dans le navigateur. Sur la page d'accueil, cliquez sur Actualiser. Nous pouvons encore voir nos hôtels être retirés de la base de données, ainsi que les pays en bas aussi. Cela signifie à la fois notre destruction et aussi notre promise.All méthode fonctionne maintenant avec succès. nombre d'hôtels que nous avons à l'intérieur de notre base de données, changeant nos promesses de fonctionner à la fois plutôt que l'un après l'autre, a probablement pas beaucoup gagné en performance, mais c'est une amélioration utile néanmoins, et quelques connaissances supplémentaires qui est utile d'avoir. Ce type de code est quelque chose qui sera plus perceptible sur une application plus grande. 39. Variables d'environnement: Dans cette vidéo, nous allons utiliser ce qu'on appelle des variables d'environnement. Ce sera essentiellement un fichier de configuration séparé à l'intérieur de nos projets. Qui répertorie tous nos noms de compte d'utilisateur, mots de passe et détails d'authentification, le tout au même endroit. Cela a certains avantages. Par exemple, il conserve nos informations secrètes en un seul endroit, qui signifie qu'il est plus facile d'ignorer ce fichier lors du partage nos projets tous pousser dans un service comme GitHub. Ce qui signifie que notre code est d'une manière beaucoup plus sûre pour la sécurité. Une fois atteint jusqu'à la production, nombreux fournisseurs d'hébergement repérent également ces variables d'environnement, ce qui rend la configuration de notre hébergement encore plus facile et c'est quelque chose que nous examinerons plus tard lorsque nous pousserons notre application à Heroku. Aussi si une réutilisation de l'une de ces variables, telles que la formation de passeport dans plusieurs fichiers, changer ou louer un fichier de configuration est beaucoup plus facile. Pour cela, je vais utiliser un paquet de nez appelé d.env. Cela nous permettra de créer fondamentalement un nouveau fichier avec l'extension .env et cela sera utilisé pour stocker nos variables à l'intérieur. Pour le moment, les seules informations sensibles que nous avons sont stockées dans notre app.js. Ouvrons ça. app.js, c'est cette information ici, qui est notre connexion à la base de données, mais nous ajouterons informations plus sensibles dans les vidéos à venir lorsque nous nous connecterons à Cloud Storage pour des images. Tout d'abord, nous pouvons importer le paquet comme d'habitude à l'intérieur du terminal. En bas, nous utilisons une installation npm, fermons le serveur et exécutons npm-i, then.env. Donnez-nous un moment pour tirer un paquet de mpm. Redémarrez simplement le serveur. NPM ferait leurs affaires ? Donc maintenant, si nous ouvrons notre barre latérale, nous pouvons aller de l'avant et créer le fichier Config, que nous allons utiliser pour stocker toutes nos variables à l'intérieur. Fermez ça. Ensuite, à la racine du projet, créez dans un nouveau fichier, qui est simply.env et assurez-vous qu'il est dans la racine à côté du app.js. Ensuite, nous ajoutons nos variables en utilisant le nom, la valeur carlin et aussi en utilisant les majuscules aussi. Je vais utiliser DB, qui est pour notre base de données, puis satisfaire la variable DB pour être égale à une base de données, URI. C' est terminé dans le app.js, ouvrez ceci, puis nous pouvons citer notre URI de base de données et la connexion, sortez ceci avec les guillemets et puis collez-le en tant que variable DB. Dans les coulisses ce module .env, nous allons prendre toutes les variables que nous créons à l'intérieur de ce fichier et les ajouter à ce qu'on appelle les objets process.env, qui est fourni avec noeud. Cet objet contient des informations sur l'environnement utilisateur telles que notre nom d'utilisateur et également le répertoire utilisateur. Les variables ont été ajoutées à l'intérieur de ce fichier, seront également ajoutées à cet objet et c'est ainsi que nous y accédons à l'intérieur des anciens fichiers. Pour mieux comprendre cela, nous pouvons sortir ces objets process.env et voir ce qu'il inclut. Si nous allons à l'HotelController et ensuite aller aux filtres de page d'accueil, qui sont avant. Faisons n'importe quel journal de la console et voyons ce qui est inclus. En haut de la section clients, allons ajouter un journal de console, puis il est connecté à la console, le process.env, puis aller pour.user, qui est majuscules.. USER est l'une des propriétés de ces objets et il contient le nom actuel des utilisations. Si nous enregistrons cela, tirez le terminal et allez dans le navigateur, allez à notre page d'accueil, il se recharge, puis passez à Visual Studio Code. Si nous faisons défiler vers le haut, nous voyons maintenant le nom d'utilisateur de Chrisdixon, qui est stocké dans cette utilisation de variable. Avec beaucoup d'autres choses qui sont aussi sur ces objets. Nous pouvons également accéder au répertoire de travail actuel avec .PWD, enregistrer ceci et puis recharger le navigateur du terminal. Si nous faisons défiler vers le bas après les deux lignes vertes où le serveur a redémarré, nous pouvons voir le chemin actuel vers le répertoire de travail actuel. Enfin, vous pouvez également essayer notre propre variable DB que nous venons de créer. Changez PWD pour être DB. Rechargez le navigateur, Faites défiler vers le bas et nous voyons la valeur de undefined en bas ici. C' est parce que nous devons l'exiger d'abord à l'intérieur de notre projet si cela fonctionne et à l'intérieur du app.js est l'endroit où nous allons l'ajouter afin qu'il soit disponible le plus tôt possible à l'intérieur de nos projets. Donc app.js, allons tout en haut, au-dessus de toutes ces variables et ensuite exiger à l'intérieur des parenthèses, le paquet .env. Nous n'avons pas besoin de bloquer cela à l'intérieur d'une constante car nous n'avons pas besoin d'y accéder à nouveau dans le fichier mais au lieu de cela, nous avons dit .config avec le point-virgule aux extrémités, qui transmet le contenu du fichier env et l'assigne au process.env que nous avons examiné auparavant, alors nous pouvons essayer à nouveau de recharger le navigateur. Enregistrez ce fichier, rechargez nos projets. Maintenant, nous voyons un problème à l'intérieur du navigateur. Si nous allons à Visual Studio Code, nous pouvons maintenant voir quelques messages d'erreur à l'intérieur ici. C' est parce que nous essayons maintenant de configurer notre connexion Mongoose, mais nous avons une connexion vide juste ici. Donc, au lieu de cela, nous pouvons maintenant passer dans notre variable DB, que vous la créez avant. Nous pouvons ajouter la même chose comme nous l'avons fait dans le journal de la console avec process.env.db pour notre variable. Enregistrez ceci et maintenant si nous rechargeons le navigateur, tout fonctionne à nouveau, puis faites défiler vers le bas du terminal. Nous pouvons maintenant voir que nous mettons tous notre variable de base de données, que nous avons toujours dans le journal de la console juste ici. Maintenant, nous allons supprimer est le journal de la console car nous n'avons plus besoin de cela et assurez-vous que cela fonctionne toujours dans le navigateur. Bien. Si vous voyez toujours les informations de la base de données, comme nos hôtels et aussi les pays en bas, tout fonctionne toujours, mais en utilisant des variables d'environnement. Nous ajouterons d'autres variables dans la prochaine vidéo, où nous examinerons l'utilisation du stockage en nuage avec Cloudinary. 40. Gestion des téléchargements de fichiers: À l'heure actuelle, nos images pour les hôtels stockés à l'intérieur de notre dossier de projet, nous avons enregistré dans la base de données, un nom de fichier, qui fait référence à l'image dans notre dossier public. C' est parfait pour les tests, mais nous voulons également un endroit où stocker nos images, surtout lorsque notre application est poussée à la production. Nous ne voulons pas qu'un administrateur accède à nos fichiers de projet. Pour ce faire, je vais utiliser un service appelé Cloudinary. Cloudinary est une plateforme de stockage Cloud qui nous permet de télécharger des images et aussi des vidéos. Vous pouvez le trouver sur cloudinary.com. Je vais utiliser le service pour télécharger nos images à partir de la section d'administration lors de la création d'un nouvel hôtel. Nous pouvons ensuite récupérer cette image lors de l'affichage de notre image sur notre site Web. Cloudinary a également beaucoup de fonctionnalités supplémentaires. Bien que nous n'aborderons aucune des fonctionnalités avancées de Cloudinary, il y a beaucoup de choses à faire, donc simplement recadrer, mettre à l'échelle et améliorer nos images avant la livraison, tout en ajoutant différents effets. Mais pendant ce cours, nous allons le garder aussi simple que possible en poussant et en récupérant simplement des images de Cloudinary. Tout d'abord, nous avons besoin de la tête sur cloudinary.com et de créer un compte gratuit. Cliquez sur le bouton « S'inscrire », puis ajoutez notre nom ici, l'adresse e-mail, le mot de passe, et tout est facultatif. Image dans la gestion vidéo et créer un compte. Je veux cliquer sur « Développeur », « NodeJS » et ira aussi pour d'autres clics sur « Suivant », et il se ferme, puis nous sommes pris directement au tableau de bord Cloudinary. Vous verrez qu'il y a des limites généreuses de téléchargement gratuit et plus de taille suffisante pour notre projet. Ici, nous pouvons voir combien d'octets nous avons utilisés dans notre stockage actuel. Sur le côté droit, nous pouvons voir que nous pouvons obtenir un stockage de fichiers supplémentaire lors du partage sur les réseaux sociaux. Mais nous avons plus qu'assez pour commencer. En haut de la page, nous avons les détails de notre compte que nous devrons connecter à Cloudinary, y compris notre clé API et nos secrets. Nous pouvons copier ces détails et les placer dans notre fichier point ENV, que nous avons créé dans la dernière vidéo. Tout d'abord, copions le nom Cloudinary. Cliquez dessus, puis sur « Copier ». Ensuite, dans notre fichier point ENV, commençons une nouvelle ligne et cela peut être notre Cloudinary_name, et définissez ceci comme notre nom que nous avons découvert. Nous avons également besoin d'une clé Cloudinary_API. Nous pouvons définir cela égal à notre clé API, qui est ici. Copiez et collez ceci dans. Le troisième dont nous avons également besoin est le secret de l'API. Ceci est également fourni dans le tableau de bord afin Cloudinary API secret. On peut aller au tableau de bord. Le secret de l'API est masqué par défaut, alors cliquez sur révéler, copiez ceci, ajoutez ceci et donnez à cela une sauvegarde. Ensuite, nous devons installer le paquet Cloudinary NPM dans notre projet. Pour ce faire dans le terminal, fermez notre serveur, contrôle et C. Ensuite, nous la commande NPM, I, cloudinary. Rappelez-vous, je suis juste le raccourci pour installation et donnez quelques instants pour le tirer à partir de NPM. On dirait qu'on a une erreur d'orthographe. [ inaudible]. Allons au paquet point JSON et vérifiez qu'il est installé. Vous avez Cloudinary comme dépendance. Nous pouvons maintenant passer à notre contrôleur de l'hôtel, alors fermez ceci, allez à notre contrôleur de l'hôtel dans le dossier des contrôleurs. Nous accèderons à Cloudinary en utilisant notre contrôleur d'hôtel donc nous devons l'exiger dans ce fichier JavaScript. En haut, une constante de Cloudinary est mise en place. Ceci est égal à require, et c'est un paquet no, donc nous faisons simplement référence à ceci par son nom, point-virgule à la fin. Ensuite, nous pouvons configurer notre objet de configuration Cloudinary, qui stockera tous les détails de conflit que nous avons placés dans notre fichier ENV points. Juste ici, nous accédons à notre configuration de point variable Cloudinary. C' est un objet que vous transmettez. Tout d'abord, nous devons définir le nom_nuage, c'est égal à notre nom_nuage que nous avons enregistré dans le fichier ENV point. Rappelez-vous que nous pouvons accéder à ces variables avec process.env. Puis vient les lettres ou le nom de Cloudinary. Allons-y et appelons-le. Le suivant dont nous avons besoin, qui est séparé par une virgule, est notre API_key. Encore une fois, la plupart de cela à notre variable d'environnement donc process.env Cloudinary_api_key, et le dernier dont nous avons besoin est le secret de l'API. C' est le process.env sur le dernier était Cloudinary_api_secret. Lorsque vous téléchargez des images, il n'est pas simple de gérer les autres parties de nos données de formulaire, telles que les champs de texte pour le nom et la description. Si on passe à l'hotel_form, qui est un mixin. Ouvrez le dossier mixins. Ouvrez hotel_form. Actuellement, lors de la sauvegarde de notre hôtel, nous utilisons le codage par défaut, qui gère toutes nos entrées textuelles, ce que vous n'avez pas ici. Actuellement, nous avons un fichier entrées pour l'image. Nous avons les entrées avec le type de fichier, mais nous ne sommes pas vraiment enregistrer une image. Tout ce que nous faisons est d'enregistrer un nom de fichier, qui correspond à un fichier à l'intérieur de notre dossier public. Lorsque vous enregistrez des images dans un formulaire à l'aide d'une demande de poste, que nous sommes ici, nous devons changer l'encodage du formulaire pour être ce qu'on appelle des données multi-parties/formulaire. Juste après notre méthode, nous pouvons ajouter le type Ink et « multi-part/form-data ». Cela permettra à notre fichier image d'être également inclus avec notre demande de poste. Cependant, nous devons maintenant ajouter du middleware à notre application express, qui sait comment gérer ces données multi-parties/form-data. Pour cela, j'utiliserai un paquet appelé Multer. Multer prendra essentiellement nos images que nous téléchargeons et nous permettra ensuite de faire quelque chose avec elles. Il peut enregistrer les images à insérer dans l'emplacement du fichier ou même de la mémoire, qui est ce que nous allons faire dans ce projet. Nous pouvons ensuite pousser ces images vers Cloudinary. La première chose que nous devons faire est d'installer le paquet NPM dans le terminal. NPM, moi et puis Multer, qui est M-U-L-T-E-R. Nous allons également l'utiliser dans le contrôleur de l'hôtel, alors revenez à ceci, cliquez sur ce fichier. Nous pouvons également exiger cela au sommet. Comes multer égaux nécessitent un point-virgule multer à la fin et comme nous l'avons dit précédemment, multer nous donne un contrôle total sur l'endroit où nous stockons ces images. On peut aller de l'avant et mettre ça en place maintenant. Juste notre config. Nous disons des constantes de stockage et définissons cela égal au stockage de disque multipoint. Puis passer des objets AMC. A l'intérieur du stockage sur disque, nous pouvons définir un objet d'options pour configurer un dossier ou une destination où vous voulez enregistrer ces images. Je ne ferai pas cela parce que je vais enregistrer ces images dans Cloudinary. Par conséquent, nous n'avons pas besoin de configurer un dossier de stockage dans ce cas, si nous laissons juste ces options objet vide, comme nous le voyons ici, le répertoire par défaut de l'ordinateur pour enregistrer les fichiers temporaires est utilisé à la place. Puis multer lui-même prend également dans les options objet deux. A l'intérieur, nous allons passer dans notre variable de stockage, qui a été créée. Faisons un multer où nos fichiers seront des magasins. Nous avons déjà cela couvert avec la variable de stockage juste ici. Nous pouvons également passer des filtres de fichiers pour restreindre les types de fichiers acceptés ainsi que les limites de téléchargement. Mais je vais juste garder ça comme ça pour garder les choses agréables et simples. Nous pouvons alors enregistrer cela à l'intérieur d'une constante, afin que nous puissions y accéder bientôt. Je vais appeler cette constante le téléchargement et définir ceci notre objet multer. La prochaine étape après cela est de dire à multer que nous ne voulons accepter que des fichiers uniques. Nous le faisons en accédant à notre variable de téléchargement, qui a été créée puis point unique, donc cela indique à multer, nous ne voulons télécharger qu'une seule image à la fois. Multer a également des options pour gérer un tableau de fichiers. Vous pouvez aller voir la documentation. Si c'est quelque chose qui vous intéresse. A l'intérieur d'un seul, nous passons un nom que je vais appeler image à l'intérieur des citations comme image passante à l'intérieur ici. L' image unique sera disponible pour nous puisque multer l'ajoutera à l'objet de fichier point de requête. Ce nom d'image que vous passez ici, est un nom de champ utilisé lors du passage de l'image pour demander le fichier point. La manipulation de cette image sera un processus de stage libre ou des étapes libres de middleware. La première étape qui consiste à télécharger l'image et à enregistrer dans la mémoire que nous venons de traiter ci-dessus. Pour ajouter cela à notre middleware, nous devons d'abord l'exporter. Juste pour notre téléchargement, nous pouvons maintenant exporter le téléchargement de points. Définissez ceci sur notre point de téléchargement simple. Ensuite, ajoutez ceci à notre routeur dans la chaîne middleware. Allons à l'index point JS à l'intérieur de nos routes. Localisons les routes d'administration que nous avons ici. Nous voulons ajouter cela lors de l'ajout d'un nouvel hôtel. Nous devons aller à la demande de poste pour admin/ajouter. Ici, nous avons actuellement un morceau de middleware appelé create hotel post. C' est la dernière étape, qui est l'enregistrement dans la base de données. Mais d'abord, nous pouvons passer un fichier uploader et donc ajouter ceci sur une ligne séparée. Ensuite, il suffit de suivre cela, nous pouvons accéder au point de contrôleur de l'hôtel uploadé séparé par une virgule. C' est maintenant notre première et dernière étape dans notre mise en place. Dans la vidéo suivante, nous allons terminer les choses en créant un nouveau middleware pour enregistrer nos images dans Cloudinary avant de pousser notre hôtel vers la base de données. 41. Enregistrer des images dans le cloud: Nous avons fait de bons progrès dans la dernière vidéo, nous avons mis en place notre fichier de configuration nary cloud, nous avons traité les données de formulaire slash multi-parties de notre formulaire et également mis en place le middleware molto pour gérer la sauvegarde de l'image. Dans cette vidéo, nous allons gérer la prochaine étape, qui est de prendre ce fichier image que nous avons téléchargé puis de le pousser dans le cloud nary. Gérer également toutes les erreurs en cours de route. Cela sera également configuré comme un élément de middleware. Donc, au fichier index.js. Cela doit être placé entre le téléchargement d'image, ce que j'ai fait dans la dernière vidéo, puis la dernière étape sur la base de données. Assurez-vous que comme une virgule juste à la fin ici et ensuite nous pouvons ajouter le contrôleur de l'hôtel. Ensuite, l'étape suivante, qui est de pousser à Cloudinary ajouter une virgule à la fin. Cette demande de poste lorsque nous ajoutons un nouvel hôtel, passera par ces trois pièces middleware dans l'ordre. Tout d'abord, télécharger l'image, puis enregistrer dans le nuage, puis passer à enregistrer l'hôtel dans la base de données. Plus dans les contrôleurs de l'hôtel dot js, nous pouvons créer pousser à Cloudinary. Juste sous nos exportations point upload, nous pouvons ajouter des exportations vers pousser le Cloudinary égal à nos demandes répond. Ensuite, configurez notre corps de fonction. La première chose que nous devons faire est de vérifier s'il y a une image dans une déclaration. Si le fichier point de requête. Multiply dit ce fichier sur les objets de requête sous le nom du fichier. Ici, nous vérifions si ce fichier existe parce que nous voulons seulement pousser le fichier à Cloudinary, si l'image est réellement là. Il y a un cas où l'image n'est pas là. Une belle lors de la mise à jour d'un hôtel. Les administrateurs principaux veulent être obtenus dans la description ou l'une des entrées basées sur le texte. Ensuite, il laisse le téléchargement de fichier vide. Ensuite, après cela, nous pouvons ajouter une instruction L. Cela va passer à la suivante, qui passera ensuite à la partie suivante de middleware si aucun fichier n'existe. Ce prochain morceau de middleware est le poste d'hôtel créer, comme nous l'avons dit dans le fichier d'index des routeurs. A l'intérieur du bloc if, nous accédons au téléchargement de Cloudinary. Ensuite, utilisez la méthode de téléchargement de points Cloudinary. Cette méthode de téléchargement, nous allons télécharger une image que nous passons. Nous pouvons accéder à cette utilisation besoin chemin de point de fichier de requête point. Ensuite, nous pouvons utiliser un promis un handle ce qui se passe lorsque le téléchargement est réussi. Juste après cela, nous pouvons enlever le point-virgule. On peut ensuite enchaîner sur un point, alors. Assurez-vous juste que c'est bien orthographié. Dot alors pour créer notre promesse. Ensuite, à l'intérieur, nous allons créer une fonction qui prend les résultats. Ensuite, configurez notre fonction ici. Cette variable de résultat que nous avons ici va bloquer dans l'image que nous récupérons de Cloudinary, qui inclut également un ID public, Cloudinary ajoute à l'image. Nous utiliserons ensuite cet ID public pour référencer l'image dans nos projets en définissant sa valeur pour demander l'image de point de corps de point. Demande point image de point de corps est égal à nos résultats, que nous avons obtenu de retour. Puis est l'ID de soulignement public, qui est renvoyé par Cloudinary. Cette requête point image de point de corps est une impulsion pour créer un poste d'hôtel, qui est la prochaine étape dans le middleware. Cet identifiant d'image n'est pas enregistré lorsque nous enregistrons l'hôtel dans notre base de données Mongo. Pour déplacer cela à notre poste de création d'hôtel, nous devons appeler ensuite. Ajoutez ceci juste après. Cela va passer à créer un poste d'hôtel, qui est la dernière étape de notre middleware, que vous venez juste ici. Comme nous le savons déjà, nous devons terminer une promesse en ajoutant une déclaration catch pour gérer les erreurs et rediriger vers la même page que nous sommes. Juste après le point, alors nous pouvons nous entraîner sur la prise de point de fin de journée. C' est aussi une fonction où nous pouvons ajouter une redirection de points res. Cela va rediriger vers la page en cours, donc avant slash admin slash add nous donne sauver. Maintenant, nous pouvons aller au navigateur et ajouter un nouvel hôtel. Vers le bas dans certains ne veulent pas exécuter NPM ou DEF démarrages. On dirait qu'on a une erreur alors on va tirer ça. C' est un stockage sur disque multi-points. J' ai un stockage constant égal à multer qui correspond est juste ici et le stockage de disque et qui a juste besoin de V8K alors enregistrez cela et puis grandissez vert à nouveau, allez à notre projet au navigateur, il se recharge. Maintenant, on est bon de repartir. Plus à notre administrateur, avant slash admin, sons que Boltzmann, nous pouvons ajouter un nouvel hôtel et à notre formulaire. Ajoutons juste un test. On dira l'image de test. J' aimerais avoir une description à l'intérieur. Cliquez sur n'importe quel hôtel. classement des étoiles n'a pas vraiment d'importance. Cliquez ensuite sur confirmer pour enregistrer cet hôtel. C' est un bon signe que nous allons maintenant le rediriger vers l'hôtel que nous venons de créer. Mais nous voyons qu'aucune image ne s'affiche en haut. Allons dans les outils de développement et voyons ce qui se passe. Cliquez avec le bouton droit inspecte, faites défiler vers le bas, cliquez sur notre image. Ce nom d'image est maintenant l'ID public, que j'ai mentionné précédemment. C' est parce que nous définissons l'image de point du corps de la requête juste ici pour être égale à notre ID public, qui est retourné par Cloudinary. Rebranchons simplement cela sur le Cloudinary cependant, nous devrions maintenant voir l'image que vous venez d'ajouter. Fermez ceci sur Cloudinary et appuyez sur recharger. Cliquez sur la Médiathèque. En plus des exemples de vidéos et d'images que vous avez fournis, nous voyons également notre hôtel une image est maintenant en cours de téléchargement sur Cloudinary. Excellent, donc j'espère que cela ne fonctionne pas pour vous. Dans la prochaine vidéo, nous installerons également nos hôtels pour extraire les images de Cloudinary, puis les afficher dans nos projets. 42. Récupérer des images à partir du cloud: Nous sommes au bon stade maintenant car nous pouvons sauver nos hôtels et aussi l'image est sauvegardée dans Cloudinary. Nous définissons également le nom de l'image pour être égal à l'identifiant unique, qui est défini par Cloudinary lorsque nous téléchargeons une image. Par conséquent, nous devons changer notre source d'image Tantalus afin qu'ils s'affichent correctement à partir de Cloudinary et pas seulement en utilisant les images du dossier public. que nous puissions aller à notre projet, aller à Inspecter, cliquer sur notre image juste ici. C' est le chemin du fichier que nous devons modifier. Ainsi, cela peut s'afficher avec succès dans notre projet. C' est un effet assez facile. Nous pouvons d'abord saisir l'URL de notre tableau de bord Cloudinary. Alors allez à notre tableau de bord juste ici, cliquez sur le lien. Ensuite, pour saisir notre URL, nous devons cliquer sur le lien Plus juste ici, et nous avons une URL de livraison de base. Alors cliquez sur la liste déroulante, et ici nous avons deux exemples différents, alors copions l'URL, qui inclut notre nom de nuage au milieu ici. Ce lien vers nos comptes, puis vers notre hotel.pug, qui est le mixin. Je vais à l'hôtel, ouvrons ça. Nous pouvons connecter cette ligne et la garder pour référence, mais nous devons créer de nouveaux éléments d'image. Cette fois conduit à la source, et nous pouvons les ajouter comme backticks, donc nous pouvons utiliser une variable. Ensuite, collez dans notre URL. La dernière étape consiste à remplacer ce sample.jpg à la fin par notre nom d'image unique, qui est stocké comme hotel.image. Donc, nous pouvons vous voir les littéraux de modèle, ouvrir les accolades, puis hotel.image, en dehors des accolades. Nous devons également ajouter l'extension the.jpg. Si cette sauvegarde, maintenant si nous passons à notre projet, cliquez sur la « Page d'accueil », puis cliquez sur « Voir tout ». Si nous faisons défiler vers le bas, comme prévu seulement notre test d'hôtel fonctionne pour l'instant. Puisque l'utilisation de l'image pour cela a été téléchargée sur Cloudinary, mais maintenant le reste de l'image est cassé car ceux-ci sont enregistrés comme nom de l'hôtel. Maintenant, nous allons supprimer tous les hôtels test que nous pourrions avoir dans la base de données et ensuite nous devons passer par le reste des hôtels et mettre à jour chaque image. C' est aussi simple que d'aller à la section de mise à jour de l'hôtel de l'administrateur, téléchargeant à nouveau la même image. Cela va ensuite le pousser à Cloudinary et obtenir un identifiant unique, mais il y a une chose que nous devons faire d'abord. Peux-tu penser ce que ça peut être ? Lors de la création d'un nouvel hôtel, nous avons passé le téléchargement et poussé abord le middleware Cloudinary, qui est openindex.js. Nous traversons ces deux étapes avant de les enregistrer dans la base de données. Nous devons également exécuter ces deux mêmes étapes lors des mises à jour dans. Donc, copiez le téléchargement, PushToCloudInary, puis descendez à admin, HoteLid mise à jour qui est la demande de poste juste ici, une fois que c'est sur une nouvelle ligne. Ensuite, juste au-dessus, nous pouvons passer à travers les deux premiers morceaux de middleware lors de la mise à jour de deux, car cela gère également le même uploader d'image, alors testons cela, donc dans l'administrateur. En fait, nous pouvons supprimer nos hôtels de test, alors rafraîchissez le McLab et chantez. Parcouvrons n'importe lequel d'entre eux, et c'est le test ici. Cliquez sur l'icône « Supprimer ». Nous avons aussi une image de test. Cela devrait être capable maintenant jusqu'à 12 images. Revenons au projet, passons à la section Admin. Nous devons également maintenant aller dans les Mises à jour, donc Modifier, Supprimer, puis faire défiler vers le bas. Le premier est l'Hôtel1, alors faisons une recherche pour cela. Cliquez sur « Mettre à jour l'hôtel », puis tout ce que nous avons à faire est de cliquer sur « Image », sélectionnez « Hôtel1", puis Confirmer. Maintenant, nous pouvons voir que nous avons maintenant redirigé vers la vue détaillée de l'hôtel, qui a maintenant l'image. Si nous allons simplement à /all, nous devrions voir que le reste des images ne s' affiche toujours pas parce que nous devons passer par chacune de ces images et télécharger à nouveau l'image. Je vais maintenant vous laisser avec cette tâche de parcourir le reste des hôtels et de mettre à jour les images, puis revenir dans la prochaine vidéo, où nous allons travailler sur notre formulaire de recherche d'hôtel. 43. Formulaire de recherche d'hôtel partie 1: En haut de notre projet, nous avons créé un formulaire de recherche d'hôtel il y a quelque temps. Faisons en sorte que cela fonctionne pour permettre aux utilisateurs d'être plus précis sur leur réservation. Nous ne mettrons pas en place un système de réservation en direct, mais nous utiliserons toujours les dates pour ajouter à la commande des clients. Ce formulaire est situé à l'intérieur de notre fichier de pois de mise en page. Si vous ouvrez la barre latérale, le carlin point de mise en page, et alors nous avons notre formulaire à l'intérieur du wrapper nav de recherche juste ici. Pour le moment, nous avons notre élément de forme juste ici mais il n'a pas d'attributs d'action ou de méthode. Allons-y et ajoutez-les maintenant. Ouvrez les parenthèses et à l'action qui sera égale aux résultats de barre oblique puis la méthode et qu'il peut être une requête POST. Lorsque nous soumettrons le formulaire, nous allons soumettre ces deux résultats de barre oblique. Maintenant, nous devons gérer cette route à l'intérieur du fichier dot d'index js. Le dossier routes nommé index.js. Fermons ça. Ajoutons ceci dans. Mettons ça juste après les pays. Sur la ligne suivante ici, routeur, minuscules, et ceci est une requête POST. [ inaudible] soumettre les données du formulaire. À l'intérieur, nous avons besoin d'ajouter le routeur des résultats de barre oblique avant. C' est la correspondance sur la forme. Le point de contrôleur de l'hôtel et cette fonction seront appelés les résultats de recherche point-virgule à la fin. Laissez-nous passer au contrôleur de l'hôtel et créer les résultats de recherche à l'intérieur ici. Tout en bas, exporte les résultats de recherche de points. Cela va être une fonction de synchronisation, un objet de requête, la réponse, et aussi ensuite, puis créer notre corps de fonction. À l'intérieur, nous allons commencer par notre bloc d'essai et de capture familier. Catch passe à l'époque étalonne et les capacités dynamiques sur la prochaine. Aussi pris à l'époque. Nous devons capturer le contenu de notre demande de poste, puis l' installer à l'intérieur des constantes afin que nous puissions l'utiliser à l'intérieur de la fonction. À l'intérieur du bloc try, crée les constantes, et je vais appeler la mienne la requête de recherche et ceci est égal au corps du point de la requête. corps du point de requête stocke les informations transmises à partir de ou après la demande, c'est-à-dire uniquement les informations qui se trouvent à l'intérieur du formulaire. La recherche va être exécutée via le pipeline d'agrégation. Chaque étape prendra nos données de recherche, puis affinera les résultats. Commençons par configurer notre agrégation et stockons cela à l'intérieur d'une constante appelée données de recherche. Capital D set est à attendre. Notre modèle d'hôtel.Pensées, agrégats, tout comme nous l'avons utilisé auparavant. Ensuite, à l'intérieur des parenthèses, nous pouvons passer dans ces crochets comme un tableau afin que nous puissions passer dans nos différentes étapes du pipeline d'agrégation. L' étape d'agrégation initiale sera l'étape de match à l'intérieur des accolades. $ symbole match, tout comme nous l'avons utilisé avant et puis nous allons utiliser quelque chose que nous n'avons pas encore vu cela, qui est $ symboles textes et va-t-il être utilisé pour créer une recherche de texte sur nos champs d'hôtel. A l'intérieur d'ici, ouvrez à nouveau les accolades, recherche de symbole $. Nous voulons beaucoup [inaudible] enregistrements au texte entré par l'utilisateur. Cela peut être réalisé en utilisant ce texte de symbole $, qui effectue une recherche technique. Ici, nous passons dans la recherche, qui va être une chaîne, Mongo utilise pour interroger notre base de données. Augmente la chaîne que nous voulons utiliser. Eh bien, c'est la destination de toutes les formes. Si nous revenons à notre fichier de point de mise en page, la destination est la première entrée juste ici, qui a ce nom de destination et cela est également transmis avec la requête de poste afin qu'il puisse y accéder avec la destination de point de requête de recherche. Ajoutons ceci maintenant, donc requête de recherche, qui est notre constante juste ici, point destination. Avant d'aller plus loin, voyons quelles données nous sont retournées. Nous pouvons le faire si nous allons en dehors de notre agrégation, était la ligne suivante et faire un res.json passant dans nos données de recherche. Ce sont les données qui devraient revenir de MongoDB et elles sont stockées dans cette variable juste ici. Vous enregistrez juste et ensuite sur la page d'accueil. Nous pouvons créer une recherche. Je n'ai pas de détails ici n'a pas vraiment d'importance. Invités et cliquez sur Rechercher. Maintenant, nous voyons si nous faisons défiler vers le bas il y a une erreur d'index de texte est nécessaire. Cela signifie que nous devons indexer les champs que nous voulons rechercher. Je vais rendre le nom de l'hôtel et aussi le champ du pays consultable par cette entrée de formulaire. Un utilisateur pourrait rechercher la destination, simplement entendre beaucoup [inaudible] nom d'hôtel ou en ajoutant un pays. Nous indexons les champs dans notre modèle d'hôtel. Allons à la barre latérale. A l'intérieur de nos modèles nous allons ouvrir l'hôtel dot js. et tout en bas à l'extérieur de nos objets, nous commençons par accéder à notre schéma d'hôtel, qui est le nom de la constante. juste en haut, ici. Retour vers le bas. Dot index annoncera l'index les champs que nous voulons rechercher à partir de notre modèle. Passer un objet qui prend dans les champs. Le premier champ que nous voulons rechercher, puisque nous cherchons des hôtels. Si on va à McLab, à l'intérieur, on veut chercher les noms de l'hôtel. Nous avons le champ nom de l'hôtel et nous voulons également rechercher par pays aussi. Nous pouvons utiliser le champ pays en plus de cela. A l'intérieur de notre schéma, nous pouvons ajouter dans ces deux champs. Le premier est le nom de soulignement de l'hôtel et cela va être défini sur une chaîne de texte. Ensuite, nous pourrions faire la même chose avec le pays, les villes pour envoyer des textos, frapper ce coffre. Nous pouvons également ajouter n'importe lequel des champs ici aussi tels que la description. Annuler la recherche serait également regarder dans son domaine aussi. Si nous nous dirigeons également vers mLab une fois de plus, il se rechargera. Lorsque sa connexion, nous allons signer sans détails. Cliquez sur le nom de notre base de données en haut. Si nous faisons défiler vers le bas ainsi que notre collection d'hôtels que nous avons ici, nous pouvons maintenant voir les index de points système, qui ont deux documents différents. Si nous ouvrons cela, cela peut sembler un peu déroutant au début, mais bientôt nous élargissons cela nous voyons une référence à un nom d'hôtel et aussi à notre pays afin que ces deux champs soient mis en place pour être inclus dans notre recherche. Maintenant, si nous passons au projet, puis rechargeons le navigateur, et faisons une nouvelle recherche. Ajouter notre pays, notre durée et la date est bien. Il recherche. Mais maintenant, il récupère nos données JSON, qui correspondent à nos deux hôtels dans le pays que nous avons ajouté dans le formulaire. Il y a un petit problème maintenant, si nous retournons ensuite et faisons quelque chose comme une recherche d'un hôtel, d'un hôtel à l'intérieur. Rappelez-vous en indexant ces deux champs, nous cherchons également dans le nom de l'hôtel ainsi que dans le pays. Cela devrait marcher. Si nous recherchons cependant, vous voyez une liste complète de tous les hôtels dans notre base de données plutôt que de nous en dire un. Ce résultat est parce que nous ne sommes pas à la recherche de l'hôtel complet comme une phrase. Au lieu de cela, ce qui se passe par défaut est qu'il retournera une correspondance pour un mot individuel, donc nous verrons tous les résultats pour le mot hôtel et aussi tout ce qui correspond au numéro un aussi parce que tous nos hôtels ont le mot hôtel dedans. C' est pourquoi nous voyons tous ces hôtels à partir d'une base de données renvoyés. Pour résoudre ce problème, nous pouvons effectuer une correspondance sur la phrase complète. Seul un hôtel serait retourné pour la recherche en utilisant ce qu'on appelle des escapes doubles guillemets, ce qui ressemble à ceci. Va voir notre contrôleur. La première chose que nous devons faire est de les entourer à l'intérieur des parenthèses parce que nous allons utiliser des données dynamiques. Ensuite, nous pouvons utiliser le symbole $ et entourer cela dans les accolades comme nous l'avons fait précédemment. La prochaine chose que nous devons faire est d'ajouter nos escapes doubles guillemets. Juste après le premier crochet, nous utilisons une barre oblique inverse, puis une guillemets doubles, puis nous faisons la même chose et juste après cette accolade bouclée ici avec la barre oblique inverse, puis les guillemets doubles. Les guillemets doubles traiteront cela comme une chaîne. Tous les mots contenus dans notre requête de recherche seront recherchés comme une expression complète plutôt que comme des mots individuels que nous avons vus auparavant. Nous devons également échapper à ces guillemets en utilisant les barres obliques arrière. Ces guillemets sont également rendus avec le texte de la variable O. Faites savoir à Mongo que la phrase complète doit être recherchée plutôt que les mots individuels. Si nous enregistrons maintenant ceci, puis actualisons le navigateur, passez à la page d'accueil. Vous pouvez maintenant rechercher un hôtel. Cliquez sur Rechercher. Maintenant à l'intérieur, il verrait l'hôtel 10, 12, 11 et un. Nous ne voyons maintenant que les hôtels qui correspondent à la phrase de l'hôtel un. Nous voyons l'hôtel numéro 10 parce qu'il commence par l'hôtel un, sauver l'hôtel 12. Cela correspond à la première partie de la phrase numéro 11, ainsi qu'à notre hôtel. Tous ces comportements peuvent ne pas avoir l'air tout à fait correct puisque nous avons nommé nos hôtels en utilisant des chiffres. Ce type de recherche serait plus efficace lorsque ces hôtels ont des noms plus réalistes. Ce qui signifie que l'utilisateur n'a pas besoin de taper le nom complet de l'hôtel. Ils se souviennent peut-être seulement d'une partie du nom de l'hôtel, mais ils obtiendront toujours les résultats dont ils ont besoin. Retournons et essayons la campagne, l'hôtel un entouré. Dactylographions au Mexique. Cliquez sur la recherche et maintenant voir le Mexique ici et aussi juste pour se rendre à. Bon ce premier champ ne fonctionne pas. Sur les prochaines. Ensuite est également une phase beaucoup dans le pipeline d'agrégation où nous filtrons nos hôtels indisponibles. Ajoutez une virgule juste après le premier match. Nous pouvons configurer notre deuxième match comme nous l'avons fait ci-dessus avec le symbole tala match. Ouvrez les accolades. Ensuite, à l'intérieur ici, nous pouvons vérifier si les champs disponibles sont définis sur une valeur booléenne de true. Maintenant, passons à McLab et définissons un de ces hôtels pour qu'il soit indisponible. Allons pour l'hôtel numéro trois, cliquez sur modifier. La disponibilité doit être fausse. Bas en bas, disponible égal à false. Sauvegardez et retournez en arrière. Maintenant, bien sûr, le projet est appuyer sur le bouton de retour et puis changer notre destination pour être simplement hôtel il recherche. Maintenant, nous avons l'hôtel numéro trois, règlement disponible. Maintenant, si on fait défiler vers le bas, on devrait voir tous les hôtels sauf le numéro 3. Continuez à descendre tout en bas. Super. Nous ne voyons aucun hôtel 3 retourné avec nos résultats. 44. Formulaire de recherche d'hôtel partie 2: Ensuite, je vais ajouter un filtre pour ne renvoyer que l' hôtel est supérieur à la note d'étoiles que nous avons recherchée. Tout d'abord, si vous faites une recherche, une fois de plus pour le Mexique, appuyez sur « Rechercher ». Ces hôtels ont des notes d'étoiles différentes. Nous pouvons vérifier si notre filtre fonctionne. A l'intérieur de la scène de match. Nous pouvons ajouter plus d'un filtre. Allons à un contrôleur d'hôtel, puis juste après disponible de vrai, nous pouvons également ajouter une deuxième étape de match, et cette fois nous voulons rechercher la note d'étoiles. C' est star_rating comme le nom du champ le deux-points, puis ouvrez les accolades. A l'intérieur ici une fois que vous voyez l'opérateur supérieur, qui est $ symbole GTE. Nous vérifions si l'évaluation des étoiles est supérieure aux étoiles de point de recherche. Maintenant, nous devrions seulement obtenir les résultats de retour à nous de Mongo, quelle que soit la note d'étoiles, supérieure à ce qui a été entré par l'utilisateur. Maintenant, si nous sauvegardons cela et puis passons au navigateur, appuyez sur le « Bouton Retour », puis le changer pour être un minimum de quatre. Appuyez sur « Rechercher ». Nous ne devrions voir qu'un hôtel revient, mais au lieu de cela, on dirait que nous avons une erreur. Reprenons un peu de recul et découvrons ce qui se passe ici. Tout d'abord, si nous revenons à notre contrôleur, puis à l'intérieur ici, nous pouvons changer les res.json pour être les constantes de requête de recherche, donc pouvons voir quelles données proviennent de notre téléphone. Changements pour être requête de recherche, cliquez sur « Enregistrer », puis recharger. Évidemment, voici les données de formulaire envoyées à partir de la demande de poste. Si vous regardez un peu plus près, c'est là que réside le problème. Toutes ces valeurs JSON sont entourées de guillemets, tout comme les étoiles, et aussi l'ordre de tri, ce qui signifie qu'elles seront traitées comme une chaîne. Mais la note des étoiles dans notre base de données, si nous allons à « mLab » défiler vers le bas, ceci est stocké sous forme de nombre sans guillemets, et c'est pourquoi nous n'obtenons pas les résultats attendus. Nous pouvons confirmer cela, allons d'abord rétablir les données de recherche. Dans notre res.json, satisfait nos murs, commenter cette ligne, puis nous pouvons faire res.send, et nous voulons envoyer est le typeof requête de recherche, point étoiles, le point-virgule à la fin. Cela reviendra ensuite vers le type de données des étoiles de point de requête de recherche. Enregistrez ceci, puis rechargez les projets. Cliquez sur « Continuer » et maintenant nous allons voir que nous obtenons un type de données de chaîne. Bien que nous attendions une valeur d'un nombre pour le nombre d'étoiles. En effet, lors de l'envoi de données à un à partir d'un serveur, elles ont été envoyées sous forme de texte brut. Par conséquent, le client interprète ceci comme une chaîne. Cela signifie que nous devons d'abord convertir ce type de données pour qu'il fonctionne, et nous avons une méthode Javascript appelée parse Int. Pour ce faire, si nous allons en haut du bloc try juste après notre requête de recherche, créons une nouvelle constante appelée étoiles analysées et définissons ceci à notre méthode Javascript de parse Int. A l'intérieur des crochets, nous pouvons passer dans la chaîne qui veut passer, et nous voulons passer les étoiles de point de requête de recherche. Copiez ceci et collez-le dans. Cela leur donnera passer la chaîne comme un nombre en utilisant la méthode parse Int, puis le stocker dans cette constante juste ici. Nous pouvons ensuite utiliser cette constante à l'intérieur de notre pipeline d'agrégation. Copiez les étoiles analysées, puis plutôt que d'utiliser l'étoile de point de requête de recherche d'avant, que nous savons maintenant être une chaîne. Nous pouvons maintenant coller ceci dans, appuyez sur « Enregistrer ». Ensuite, nous pouvons faire notre res.json en décommentant cette ligne, puis supprimer notre hit res.send « Enregistrer », recharger le navigateur, et ensuite nous pouvons revenir en arrière à toute forme. Maintenant, recherchez un minimum de trois étoiles. sur « Rechercher » nous allons aller avec deux hôtels Mexique d'avant, aller en arrière et puis cliquez sur « Quatre étoiles » cette fois, Hit « Rechercher ». Maintenant, nous n'obtenons que les retours d'hôtel uniques, ce qui est la note d'étoiles de quatre. La dernière étape de ce pipeline est de faire travailler cette boîte de sélection ici pour résoudre le prix de haut à bas ou bas à haut. Ceci, nous pouvons ajouter un stade source du pipeline d'agrégation. Retournons à notre contrôleur. Après l'étape de match, nous pouvons ajouter une virgule, puis juste en dessous, créons notre étape de tri avec un symbole $, puis trions, puis nous pouvons ajouter le nom de champ du coût par nuit. Nous n'aurons pas besoin d'être triés en fonction du coût par champ de nuit, qui détient le prix de l'hôtel. Cela doit alors prendre le champ de tri du formulaire qui est stocké dans le tri point de requête de recherche, mais vous avez peut-être déjà anticipé un problème avec cela. Tout comme le classement des étoiles, c'est aussi un numéro deux. Nous devrons utiliser à nouveau la méthode parse Int sur ce champ. Le champ de tri est un nombre parce que si nous passons au bug point de mise en page, puis faites défiler vers le bas jusqu'à un Select, qui est juste ici. Nous avons une valeur d'un ou d'une valeur négative. La valeur de un retournera les documents dans l'ordre croissant, et la valeur négative retournera dans l'ordre décroissant. Commençons par analyser notre numéro. Pour le contrôleur de l'hôtel, juste après les étoiles analysées, nous pouvons ajouter un point-virgule, configurer une constante, cette fois appelée tri analysé. C' est égal à notre méthode d'analyse Int en passant en ce temps la requête de recherche, puis point tri, ajouter un point-virgule à la fin, et maintenant nous pouvons utiliser cette constante de tri analysée à la place du docile de requête de recherche de avant, donnez ceci une sauvegarde, sur le navigateur. Laissons tomber la note d'étoiles pour être numéro un. Nous recevons nos deux retours d'hôtel au Mexique et nous le changeons pour qu'il soit élevé à bas. Appuyez sur « Rechercher ». Maintenant avoir un avertissement ici alors revenons, et il veut juste être une majuscule I, appuyez sur « Enregistrer » puis « Recharger ». Voilà nos deux hôtels au Mexique. Le coût est de 67, puis de 56. Tellement élevé à bas, mais je vais revenir en arrière et passer de bas à haut, appuyez sur « Rechercher » et maintenant avoir 56 suivi par 67. Cela semble fonctionner correctement si nous revenons en arrière et changeons vers une destination différente. La République dominicaine dispose également de plusieurs hôtels. Cliquez sur « Rechercher », nous voyons notre pays. Le coût est en ordre, retournez en arrière et changez-le de haut en bas. Maintenant, ceux-ci aussi triés dans l'ordre numérique. Nous avons maintenant les données dont nous avons besoin à partir de la base de données. Ensuite, nous allons créer un modèle de résultats de recherche pour afficher ces hôtels dans nos projets. 45. Modèle de résultats de recherche: Maintenant, nous avons les données JSON correctes, maintenant revenir de la base de données. Nous devons maintenant créer un modèle pour afficher ces données à l'utilisateur. abord, si nous passons à notre éditeur de texte, nous pouvons créer un nouveau modèle de page appelé search_results. Alors ouvrez la barre latérale, puis descendez à nos vues, Nouveau fichier, donc ceci est le search_results.pug. Ensuite, nous pouvons remplacer le res.json du contrôleur pour afficher ce modèle de page. Alors allons à notre contrôleur, qui est l'hôtel controller.js, allez à la fonction de résultats de recherche et plutôt que d'avoir ce res.json, commentons ceci, double res.render. Nous pouvons afficher nos nouveaux modèles de pages de résultats de recherche, virgule, puis d'options personnelles objet avec le titre des résultats de recherche. Ajoutons un point-virgule à la fin là. Ensuite, nous devons passer au modèle deux choses. première est la requête de recherche, qui contient notre date de départ ainsi que le nombre de nuits. Ceci est stocké dans le req.body, qui est les données envoyées à partir du formulaire. Ajoutez donc une virgule ; puis ajoutez notre requête de recherche ; puis ajoutez une virgule, puis nous pouvons également ajouter nos données de recherche, qui sont les données de la base de données après nos filtres d'agrégation que vous voyez ici. Maintenant, nous pouvons passer à notre modèle de résultats de recherche. Alors enregistrez ce fichier, allez dans le fichier search_results.pug. Cela va étendre les mises en page. Nous pouvons inclure nos mixins. Donc mixins/_hotel, parce que nous allons réutiliser ce mixin pour afficher tous les hôtels comme une liste de nos résultats de recherche. Après cela, nous allons ajouter notre contenu de bloc, notre h2 pour le titre, puis nous devons parcourir chacun des hôtels dans ces données de recherche, qui nous sont transmises. Donc nous ferons une boucle où chacun appelle cet hôtel individuel, l'hôtel. Donc, dans les données de recherche, nous pouvons ajouter un hotel_wrapper ou le CSS, ajouter tous les mixin, donc plus hôtel. Tout d'abord, on va passer à l'hôtel. Bien sûr, nous devons transmettre les données de l'hôtel, qui est celui-ci juste ici, mais nous pouvons également passer la requête de recherche complète aussi. Rappelez-vous que nous envoyons également une requête de recherche à ce modèle dans le contrôleur, qui est juste ici et cela va contenir toutes les informations de notre formulaire, telles que les dates de départ et le nombre de nuits. C' est toutes les informations peuvent également être incluses dans les résultats de recherche. Alors testons ça. Si nous passons au navigateur, puis revenons en arrière et créons une nouvelle recherche ou en fait, nous pouvons simplement cliquer sur le bouton de recherche ici, et utiliser les données existantes, et faites défiler vers le bas. Ok, bien. Donc maintenant, nous avons nos résultats de recherche juste ici et maintenant au lieu du format JSON, nous avons maintenant nos deux hôtels qui ont l'air beaucoup plus beaux. C' est bon, mais il y a d'autres détails à ajouter à cet hôtel. Avant de regrouper l'hôtel mixdans les données de recherche, qui contenaient les dates de départ et le nombre de nuits de la recherche de l'utilisateur. Cela a l'air bien, mais il y a d'autres détails à ajouter à cet hôtel. Nous voulons également inclure sur le côté droit les dates de départ et aussi le nombre de nuits, comme quelques informations supplémentaires. Donc nous passons ceci au mixin de l'hôtel avec les données de recherche. Allons à notre mixin. Les résultats de la recherche, nous allons obtenir ces données à partir d'ici. Donc maintenant, nous passons deux arguments différents, nous devons également inclure cela à l'intérieur de notre mixin. Donc _hotel, nous pouvons passer cela comme notre deuxième argument juste ici et puis pour afficher les données de requête de recherche dans tous les hôtels, nous pouvons le faire avec un rendu conditionnel. Défilons vers le bas. Sous le coût par nuit, créez une nouvelle section. Si nous retirons ce retour d'un niveau, il est donc de niveau avec l'information de l'hôtel. Créer une instruction if, donc si url === '/results', alors nous pouvons ajouter dans les autres détails. Ajoutons une nouvelle div environnante du CSS, détails de commande d'hôtel ou avec des traits de soulignement. Ensuite, nous pourrions juste mettre en place quelques éléments p, pour afficher ces données. Nous utilisons les ticks arrière, donc mélangez les données dynamiques avec le texte. Nombre de nuits, un deux-points puis la capacité dans nos données dynamiques de SearchQuery.duration. Un deuxième ensemble d'éléments p, encore une fois avec des tiques arrière. Ceci est pour les dates de départ, avec un deux-points et cette fois celui-ci est la requête de recherche. date de départ. C' est une affaire de chameau. Ensuite, nous devons ajouter les totaux. Tout d'abord, si nous sauvegardons cela et vérifions que cela fonctionne. Si nous rechargeons le navigateur, soumettez à nouveau le formulaire. Nous avons maintenant une nouvelle div sur le côté droit, qui contient nos données, qui avaient été transmises à l'hôtel à partir de notre formulaire de recherche. Maintenant, nous devons également ajouter deux autres éléments d'information. Le premier est le prix par personne, et le second au bas, nous allons également inclure un coût total pour toutes les personnes combinées. Pour ce faire, la façon dont nous calculerons le coût par personne est de multiplier le nombre de nuits par le coût par nuit. Ensuite, nous devons également créer un deuxième calcul, qui est ce coût par personne multiplié par le nombre d'invités. Pour rendre cela plus simple, passons à nos modèles. Maintenant, nous pouvons ajouter du JavaScript. Ajoutons la constante pour le CostEach cela va être égal searchQuery.Duration. Ensuite, nous devons multiplier la durée par l'hôtel.cost par nuit. Donc celui-ci était cost_per_night, je vais faire ce petit pour qu'il tienne sur une ligne. Alors rappelez-vous, nous avons la durée stockée dans la requête de recherche, qui passe le formulaire. Mais le coût par nuit est stocké dans l'hôtel, que nous obtenons de ce disponible juste ici. Maintenant, créons une seconde constante. Ce sera pour le coût total de la réservation, donc le coût total. Donc celui-ci va être égal à notre coût par personne, qui est le coût de chaque et puis quand nous avons besoin de multiplier cela par notre searchQuery.NumberOfInvités. Maintenant, nous pouvons utiliser ces deux constantes et je vais les mettre à l'intérieur de nos éléments p. Ouvrez les tiques de marque. Le premier sera total par personne et ajoutons un symbole monétaire. Ensuite, nous pouvons faire nos données dynamiques à l'intérieur des littéraux de modèle. Coût chacun à une règle horizontale, sorte que nous pouvons avoir le coût total tout en bas, à l'intérieur d'un h3. Le dos coche à nouveau pour le coût total, le symbole monétaire puis nos données dynamiques, qui est la variable du coût total. Donnez que la sauvegarde et puis essayons ceci, nous soumettons à nouveau le formulaire. Ok, bien. Nous avons le nombre de nuits, les dates de départ, le total pour une personne, puis le coût total qui est multiplié par le nombre d'invités. Vérifions simplement, si nous revenons ici, nous avions deux invités différents dit que le total est deux fois le coût par personne. Nous avons également trié le prix de haut à bas. Cherchons encore une fois. Nous avons un prix plus élevé ici puis nous voyons en bas. Revenons en arrière et changeons ceci pour être bas à haut. Nous pouvons également changer l'invité avant, et aussi changer cela. Cliquez sur « Rechercher », descendez en bas. Ok, super. Maintenant, tous nos détails ont été mis à jour. Nous avons un nouveau coût total, qui est multiplié par quatre. Nous avons un nouveau nombre de nuits et aussi le prix est maintenant de bas à haut. Si nous allons sur la page d'accueil, cliquez sur le « Logo » défiler vers le bas jusqu'à tous les hôtels. Nous ne voyons aucun de ces détails d'hôtel sur le côté droit en raison de ce rendu conditionnel. Essayons de voir tout, on ne voit toujours rien ici. Tout ça a l'air bien maintenant. Rappelez-vous que nous avons entouré cette nouvelle section à l'intérieur d'un div, appelé détails de commande d'hôtel. Copions ceci, et ensuite nous pouvons styliser ceci à l'intérieur du CSS. Passons à la barre latérale dans le dossier Public, Feuilles de style ; puis le Style.css. Faites ensuite défiler vers le bas, en dehors d'une requête multimédia. Travaillons d'abord avec le petit écran, base dans les détails de commande de l'hôtel. Commençons par ajouter une couleur d'arrière-plan. Gardez div un peu séparé du reste. Une fois que vous utilisez une valeur hexadécimale de eed, définissez le texte altant sur la vue mobile pour qu'il soit au centre. Ensuite, un petit rembourrage le garder loin du bord de 1em. Maintenant, nous sauvegardons cela, puis il recharger le navigateur sur le plus petit écran, ajouter une requête de recherche. Tous les détails sont bien. Cherchons. Maintenant, faites défiler. Nous voyons maintenant les résultats de la recherche pour ce pays particulier. C' est le nouveau div qui a été ajouté avec la couleur d'arrière-plan différente. Nous pouvons voir que le texte est centré sur cette nouvelle div mais il n'est pas centré sur la section d'informations de l'hôtel ci-dessus sur cette page de plis/résultats particuliers. Allons-y et réparons ça maintenant. Encore une fois, en dehors de la requête média, il s'agit de la section d'informations sur l'hôtel. Faites défiler vers le haut, alors ajoutons la ligne de texte pour être capteur. donne un rechargement, et nous y allons afin que semble beaucoup mieux. Vérifions rapidement que cela ne gâche aucune des zones de nos sites. Si nous allons sur la page d'accueil et aussi sur Voir tout, nous devrons rétablir cela dans la requête média. Copions simplement cette section d'informations de l'hôtel, faites défiler jusqu'à la requête des médias, et voilà. En fait, nous pouvons simplement changer la ligne de texte pour être de retour à gauche, recharger et cela semble beaucoup mieux maintenant. Retour à notre requête de recherche, vous pouvez ajouter quelques styles supplémentaires pour la vue plus large. Ajoutons la même requête de recherche, cliquez sur « Rechercher ». Maintenant, sur l'écran plus grand, nous avons encore ce texte sur le côté droit pour être centré. Ceci est correct pour la vue de petit écran, mais pour la vue plus grande, nous voulons aligner ce texte vers la gauche. A l'intérieur de la requête des médias une fois de plus, nous allons descendre, et nous pouvons ajouter ceci juste après l'info de l'hôtel. La div environnante était à nouveau hotel_order_details et tout ce que nous devons faire est d'ajouter la ligne de texte pour être sur la gauche. Enregistrez ceci, puis rechargez, confirmez le formulaire, et voilà. Cela semble beaucoup mieux sur le plus grand écran. Je devrais rétrécir ça et vérifier que tout a toujours l'air bien. Excellent, les résultats de recherche fonctionnent maintenant comme prévu et nous avons également ajouté un peu de style. Ensuite, nous allons nous en tenir au sujet du formulaire de recherche en incluant également plus sur la page détaillée de l'hôtel. 46. Recherche détaillée d'hôtel à partir de: Nous avons maintenant un formulaire de recherche de travail dans la section d'en-tête. Je vais maintenant en ajouter un similaire à la vue détaillée de l'hôtel. Vous vous demandez peut-être pourquoi nous devons faire ça. Jetons un coup d'oeil. Si nous allons à la page d'accueil et ensuite aller à la vue détaillée de l'hôtel pour l'un de ces hôtels. Cliquez sur le titre pour l'amener à la vue complète. Imaginez que nous étions un utilisateur visitant ce site, puis nous aimerions regarder cet hôtel et ensuite nous avons cliqué dessus. Pour le moment, il n'y a aucun moyen de personnaliser cette réservation en ajoutant nos coordonnées avec la date de départ, le nombre d'invités, ainsi que la durée. Si nous visitions cet hôtel et que nous voulions faire une réservation, la seule façon de le faire serait d'aller à la navigation supérieure et de créer une nouvelle recherche. Ce n'est peut-être pas un problème énorme pour le moment parce que nous n'avons pas beaucoup d'hôtels, mais sur un projet plus vaste avec des milliers d'hôtels, cela peut devenir un problème pour l'utilisateur. Ce que nous allons faire dans cette vidéo est de créer un formulaire de recherche similaire à celui qui se trouve dans l'en-tête. Nous allons ensuite le placer en bas, mais cela ne va avoir que certaines informations. Nous avons seulement besoin de la durée, de la date de départ, ainsi que du nombre d'invités. Nous allons également supprimer la note d'étoiles et le prix parce que nous n'en avons pas besoin puisque nous avons déjà sélectionné l'hôtel, ce que nous voulons. Passons à notre layout.pug et si nous faisons défiler vers le bas, c'est le formulaire de recherche à partir de la navigation supérieure. Si nous copions cette section à partir de la section de div, jusqu'à notre bouton de soumission, copions ceci et dirigeons ensuite vers notre hôtel de soulignement, qui est le mixin. Je vais ajouter ce formulaire juste en dessous du coût par nuit. Après ici, nous pouvons ajouter un rendu conditionnel pour afficher seulement cela sur les routes en cours, qui commence par une barre oblique en avant tout, puis une barre oblique en avant. Si url.startswith, ajoutez une autre chaîne qui est barre oblique avant tout, puis barre oblique à la fin. Après cela, nous pouvons ensuite coller dans notre formulaire de recherche d'avant. Si nous faisons défiler, assurez-vous que tout est en retrait correctement, sinon nous aurons quelques problèmes. La recherche maintenant, nous pouvons indenter la section tous dans un seul niveau. Faites défiler vers le bas jusqu'au bouton, retirez ceci dans. À un niveau à l'intérieur des déclarations, je vais également séparer cette section avec une ligne horizontale avec les éléments hr, puis ajouter un titre h3 de recherche pour cet hôtel. Bien. Nous savons déjà quel hôtel nous voulons chercher. Nous pouvons ajouter la valeur. Si on descend à la destination. Juste ici, nous pouvons supprimer requis. Nous pouvons définir la valeur pour être égale à l'hôtel, qui est l'information transmise au mixin, à l' hôtel, puis point le nom de soulignement de l'hôtel. Maintenant, la valeur de ce champ sera pré-renseignée avec le nom de l'hôtel. Par conséquent, l'utilisateur n'a pas besoin de faire une recherche spécifique pour cet hôtel. Nous avons également besoin de la durée, de la date de départ, du nombre d'invités. Nous n'avons pas besoin de la note d'étoiles puisque nous avons déjà l'hôtel. Nous pouvons également supprimer l'ordre de tri et laisser la recherche. Maintenant, si nous donnons ceci une sauvegarde et ensuite aller dans le navigateur, rechargez sur cette vue détaillée de l'hôtel, faites défiler vers le bas, et maintenant nous avons notre formulaire de recherche ici. Nous pouvons voir que nous avons déjà l'hôtel sept déjà à l'intérieur, ce que nous avons obtenu en ajoutant la valeur comme un attribut à l'intérieur ici. Cet hôtel aussi beaucoup est celui actuel sur lequel nous sommes. Revenons simplement à la page d'accueil et sélectionnez-en un autre et vérifiez que cela fonctionne toujours. Faites défiler vers le bas, et maintenant l'hôtel quatre est maintenant à l'intérieur de nos entrées. Maintenant, nous avons sélectionné l'hôtel que nous voulons. Essayons de personnaliser ceci afin que nous puissions aller de l'avant et passer une commande. Ajoutez une durée, une date de départ, le nombre d'invités, cliquez sur la recherche. Rappelez-vous que ce formulaire est déjà configuré pour aller aux résultats de barre oblique, qui est la même route que le formulaire à l'intérieur de notre en-tête. Beaucoup de cela devrait déjà être géré suit. Nous allons transmettre les résultats des barres obliques. Ensuite, nous voyons une erreur en bas disant que l'ordre doit être croissant ou descendant. La raison pour laquelle nous obtenons cette erreur est que si nous la retracons en arrière, nous allons actuellement transférer les résultats de barre oblique, donc les résultats de barre oblique à l'intérieur de nos mises en page, à l'intérieur de nos routes vont à l'index point JS barre oblique résultats va à ce contrôleur de l'hôtel des résultats de recherche. Si nous tracons cela en arrière, contrôleur de l'hôtel, puis aller aux résultats de recherche. Nous essayons toujours de soumettre une requête à notre base de données. Incluez également dans un classement par étoiles et triez ces par ordre croissant ou décroissant. Nous devons toujours ajouter quelques informations pour nous assurer que cela est contourné sur cette page. La façon dont on peut le faire est à peu près au sommet. Nous avons nos deux constantes qui stockent dans ces données. Je vais utiliser l'opérateur pour ajouter une valeur si une valeur est soumise. Les deux tuyaux pour toute la valeur d'un, puis le même ci-dessous ou un. Fondamentalement, si nous utilisons dans le formulaire d'en-tête en haut, nous allons recevoir le nombre d'étoiles et aussi une valeur pour l'ordre de tri. Si aucun d'entre eux n'est reçu, nous allons simplement ajouter une valeur d'un, à chacun d'entre eux. Par conséquent, cela ne devrait pas causer de problèmes lors de la recherche dans notre base de données. Maintenant, si nous sauvegardons cela et puis rechargeons, nous obtenons maintenant les résultats de la recherche comme prévu. Cette fois, cependant, ne retourne que l'hôtel actuel que l'utilisateur a sélectionné, mais aussi en transmettant les détails sur le côté droit. Essayons un de plus. Si on va à tous les hôtels. Faites défiler vers le bas, si vous allez à l'hôtel deux, nous avons un formulaire en bas, avec une valeur d'hôtel deux. Essayons cinq, ajoutons n'importe quelle date ici, deux invités et faites défiler vers le bas, et tout fonctionne maintenant correctement. Passons maintenant à la section suivante où nous allons améliorer un peu les choses, et vous apprendrez tout sur l'ajout de comptes d'utilisateurs et l'authentification. 47. Création du modèle utilisateur: Bienvenue dans cette nouvelle section. Ici, vous apprendrez tout sur les comptes d'utilisateurs, connexion, l'enregistrement de nouveaux utilisateurs, l'authentification, et bien plus encore. Pour commencer, comme quand nous avons commencé à créer des hôtels, nous devons utiliser Mongoose pour créer un modèle, mais cette fois pour l'utilisateur. Passons à Visual Studio, ouvrez la barre latérale, puis à l'intérieur de notre dossier de modèles, nous pouvons aller de l'avant et créer un nouveau fichier, celui-ci s'appelle user.js, puis fermez ceci. Nous devons construire notre modèle comme nous l'avons fait avec l'hôtel. Tout d'abord, nous devons ajouter une constante de mongoose, puis exiger le paquet mongoose, laisser un point-virgule à la fin. Si vous vous souvenez de l'hôtel, à l'intérieur du hotel.js, nous avons créé notre schéma d'hôtel, avons défini sur un nouveau schéma de mongoose, puis construit tous nos champs, puis ajouté les types de données et le diverses choses à l'intérieur de chacun. Nous allons obtenir la même chose avec ce user.js. Commençons par créer nos constantes, cette fois celle-ci est appelée UserSchema. Ceci est égal à nouveau à un nouveau schéma de point de mangouste, majuscule S. A l'intérieur ici nous allons passer dans notre objet. Donc, notre utilisateur va être assez simple. Il va avoir un prénom, un prénom, un email, un mot de passe, puis un champ supplémentaire à la fin du col est admin. Viendra à cela plus tard cependant, le premier est pour le prénom. Donc premier nom de soulignement, puis configurez notre structure à l'intérieur des accolades. Le nom va être le type de chaîne séparé par une virgule. Nous devons également rendre ce champ obligatoire, puis le texte dans ce champ est manquant, qui est, le prénom est requis, ajouter une virgule. Nous pouvons couper n'importe quel espace en définissant trim sur true, et un nombre maximum de caractères à séparer par une virgule. Nous pouvons faire la même chose pour le nom de famille, alors ajoutons le nom de famille. C' est notre deuxième domaine. Ouvrez les accolades. Il va toujours être à peu près le même donc ce sera le type de chaîne. Les champs obligatoires. C' est comme ce temps est, le nom de famille est requis, couper à nouveau pour être égal à vrai, et aussi un nombre maximum de caractères à 30. Donc il y a notre prénom, notre nom, ensuite, ouvrez-le pour saisir aussi l'adresse e-mail. L' adresse e-mail sera également le type de chaîne. Cela sera nécessaire aussi avec le texte de l'adresse e-mail est nécessaire, ajouter une virgule. Nous pouvons également couper cela, donc couper pour être vrai. Nous pouvons également définir ce champ pour être unique. En définissant unique pour être vrai, cela permettra de s'assurer que nous n'avons que la même adresse e-mail stockée une fois dans notre base de données. Nous pouvons également nous assurer que cela est stocké en minuscules en définissant les minuscules pour être vrai. Ajoutez une virgule après l'e-mail, et ceci est le mot de passe. Le mot de passe doit être le type de chaîne deux. Il est également requis, donc un mot de passe est requis. Nous allons également ajouter une nouvelle option à bientôt quand nous reviendrons à crypter nos mots de passe, mais pour l'instant nous pouvons simplement laisser ces données telles qu'elles sont, puis passer à la dernière qui est admin. Ouvre ça. Donc admin, ce sera un champ booléen. Le type de booléen, et aussi par défaut, nous voulons définir ceci pour être faux. Ce champ va être utilisé pour ajouter un utilisateur administrateur à notre base de données. Pour le moment, nous allons configurer n'importe quel nouvel utilisateur pour qu'il ne soit pas un administrateur. Par conséquent, nous définissons la valeur par défaut doit être false, et la seule façon d'ajouter ceci est d'aller dans la base de données et de changer ceci pour être vrai. Nous pouvons ensuite exporter notre modèle vers le bas, ajouter un point-virgule, puis exporter le point du module est égal au modèle de point Mongoose, le nom de l'utilisateur, puis passer dans notre UserSchema, que nous avons déclaré en haut juste ici. Nous ajoutons juste avec un point-virgule aux extrémités. Donnez-leur une sauvegarde. Maintenant, c'est notre schéma terminé pour l'instant. Comme nous le savons déjà, ce modèle ne fait rien par lui-même, donc dans la vidéo suivante est sur la création d'un formulaire d'inscription afin que l'utilisateur ne puisse pas s'inscrire. 48. Formulaire d'inscription: Nous avons maintenant notre modèle d'utilisation. Sur la création d'un formulaire d'inscription pour enregistrer un utilisateur. Plus tôt dans le projet, si nous passons à la layout.pug, jusqu'au haut dans la section d'en-tête, nous avons ajouté un lien d'inscription, qui lie à /sign-up. Maintenant, nous pouvons gérer cette route dans le fichier index.js. Allons à ici. Route, index.js. Fermez ça. Si nous faisons défiler vers le bas, donc juste au-dessus du module.exports, nous pouvons créer un commentaire de routes utilisateur. Tout d'abord, nous pouvons ajouter router.get, puisque c'est une requête get, nous pouvons ajouter la route de /sign-up. Ensuite, nous allons créer un UserController en un instant. Ensuite, le nom de la fonction SignupGet, point-virgule à la fin. Nous utilisons cette fois UserController plutôt que HotelController, que nous avons utilisé jusqu'à présent dans ce cours. C' est parce que je vais ajouter un UserController, pour garder les choses organisées et séparées. Ce fichier index.js aura également besoin d'accéder à UserController aussi. Par conséquent, nous pouvons l'ajouter en haut sous notre HotelController. Faites défiler vers le haut, ici nous avons besoin des contrôleurs et jusqu'à présent nous avons seulement l'HotelController, donc juste en dessous, nous pouvons ajouter une constante de UserController. Tout comme ci-dessus, nous pouvons ajouter le require, ajouter le chemin. Ça va être.. /Controllers/UserController, et ajoutez un point-virgule à la fin. Maintenant, nous devons aller de l'avant et créer ce fichier UserController à l'intérieur de notre dossier de contrôleurs. Ouvrez la barre latérale, cliquez sur « Controller » et créez un nouveau fichier. UserController, C.js majuscule. La première chose dont ce fichier a besoin est l'accès au modèle utilisateur. Nous pouvons exiger cela en haut à l'intérieur d'une constante. Constant User, majuscule U égal besoin, puis ajouter le chemin du fichier qui est la chaîne../c'est dans le dossier des modèles /user. Ci-dessous, nous devons créer le SignupGet pour gérer l'affichage du formulaire d'inscription. Donc exporte, c'est configuré comme l'HotelController, le nom de la fonction de SignupGet, c'est égal à notre fonction qui prend dans la requête, la réponse de notre fonction Bonnie. Tout ce que nous devons faire est d'ajouter un res.render pour rendre un modèle de page, que nous voulons appeler sign_up, options possibles seraient le titre de l'inscription de l'utilisateur. Donnez ça une sauvegarde. Avant que nous puissions aller de l'avant et créer ce signe de modèle bien, 1er je vais créer un mixin au formulaire 2. Ouvrez donc la barre latérale, Vues, puis Mixins, créez un nouveau fichier _user_ form.pug. Maintenant, nous pouvons aller de l'avant et créer notre formulaire. Commençons par créer notre nom mixin de UserForm, puis configurez notre formulaire comme d'habitude. L' action sera égale à une chaîne vide, donc il fait une requête de post aux tours en cours, donc la méthode de post, la classe, que nous allons entourer chaque entrée est form_input. Retirez-le dans un niveau, l'étiquette, donc tout comme plus tôt lorsque nous avons créé le formulaire pour ajouter un nouvel hôtel, chacun de ces types d'entrée doit correspondre au nom que nous avons utilisé dans notre schéma, donc le 1er sera pour le prénom, le nom de famille, l'e-mail, et ainsi de suite. Cette étiquette sera pour le prénom, donc prénom, sous le texte du prénom pour apparaître une excellente forme. L' entrée, puisque c'est du texte, nous pouvons ajouter le type d'entrée de texte, donc le type est égal au texte. Nom de first_name, ID correspondant à l'étiquette. Encore une fois, c'est juste premier_name et aussi ce champ est obligatoire. Si nous revenons en arrière et indentons ceci au même niveau que cette entrée de formulaire, nous pouvons ajouter un plus.form_input. Les étiquettes commencent pour le nom de famille. Le texte du nom de famille avec un deux-points, sorte que cette entrée est également la même que ci-dessus. Ce sera le type de texte, le nom de famille, l'ID à correspondre, qui est également le nom de famille, et également marquer ce champ comme nécessaire. Copions cette entrée d'en haut et nous pouvons réutiliser cela pour l'e-mail. L' étiquette de l'e-mail, le texte de l'e-mail, type d'entrée de l'e-mail aussi, puis juste changer les noms à l'intérieur d'ici aussi, l'ID, et ce champ est également requis. Copions ces trois lignes d'en haut aussi bien pour l'e-mail et collez-les dans, parce que nous allons réutiliser une ligne similaire, mais cette fois cela va être pour confirmer l'e-mail. Le 2ème sera confirm_email. Je vais copier ce nom, donc le type va bien, ajoutez ceci dans le nom, ajoutez ceci dans l'ID. Ce champ est également obligatoire, puis il suffit d'ajouter le texte de l'e-mail de confirmation. Le prochain sera pour le mot de passe. Ajoutons le form_input, l'étiquette. Ce sera l'étiquette du champ de mot de passe, l'entrée. L' entrée, nous pouvons ajouter un type de mot de passe et nous allons assurer que le mot de passe n'est pas visible lorsque l'utilisateur tape cela dans le navigateur, sorte que le nom du mot de passe 2, l'ID. Ce champ est également obligatoire. On dirait tout ce dont nous avons besoin pour le mot de passe. Maintenant, copions ceci. En fait, nous devons ajouter le texte du mot de passe et ensuite dupliquer ces trois lignes de code, ajouter ceci juste en dessous, et celui-ci va être pour confirmer le mot de passe. Il suffit d'ajouter pour confirmer, puis un trait de soulignement. On peut copier ça. Modifiez le texte ici pour confirmer le mot de passe. Le type d'entrée est également mot de passe aussi, donc je vais coller cela comme nom et aussi l'ID. Encore une fois, ce champ est également obligatoire. La dernière chose dont nous avons besoin maintenant pour notre formulaire est les entrées avec le type de soumission. Cela va avoir le même wrapper form_input, donc le bouton, mis en type de submit, et aussi une classe de bouton petit. Enfin, nous pouvons terminer avec le texte de confirmation. Donnez ça une sauvegarde. Maintenant, avec tout cela en place, nous pouvons ajouter le modèle d'inscription pour ajouter ce mixin dans, donc dans la barre latérale. Maintenant, pour les vues, nous pouvons créer un nouveau fichier, et cela va être appelé sign_up.pug. Ce fichier de sign_up est celui qui correspond à l'intérieur de notre UserController. C' est celui que nous avons créé ici, donc maintenant nous devons ajouter nos informations de base ici. Nous allons à l'inscription, cela étend notre mise en page. Nous devons également inclure le mixin que nous venons de créer. Dossier Mixins /_user_ formulaire, le contenu du bloc. Maintenant sur notre contenu, nous pouvons ajouter un titre de niveau 2, qui est le titre, une ligne horizontale en dessous du titre, puis en dessous nous pouvons ajouter notre mixin, qui est UserForm. Maintenant, tout ce qu'il reste à faire est d'essayer cela dans le navigateur. Alors dirigez-vous vers le navigateur et passons au lien d'inscription à l'intérieur de l'en-tête, faites défiler vers le bas et voici notre formulaire d'inscription que nous avons créé. Je vais juste changer cela pour être un U majuscule, donc nous UserController. Je le change à l'intérieur d'ici, rechargement, et ça a l'air mieux. Il s'agit de l'étape 1 maintenant terminée. Ensuite, nous allons créer la demande de publication pour gérer l' inscription de l'utilisateur une fois qu'il a soumis ce formulaire. 49. Valider l'entrée utilisateur: Ce formulaire d'inscription que vous avez créé dans la dernière vidéo n'est que des itinéraires d'inscription à la barre oblique avant, et aussi le mélange de formulaire utilisateur, que nous avons créé en haut est poster sur l'URL actuelle, puisque nous avons laissé l'action comme un chaîne. Cela sera affiché sur les itinéraires d'inscription. Par conséquent, nous pouvons créer une demande de poste à l'intérieur du index.js pour gérer cette requête, alors passez au index.js, puis descendez à nos routes utilisateur, donc router.post. Cela va également aller aux routes d'inscription, donc comme une chaîne d'inscription avant slash, nous allons utiliser à nouveau notre contrôleur utilisateur, et cette fois nous allons créer le SignupPost, ajouter un point-virgule à la fin, sur le contrôleur de l'utilisateur, jusqu'au bas, cette fois il est Exports.Inscrivez-vous et puis Post. Cela va être égal à un tableau, sorte que nous avons créé un peu différemment de ce que nous faisons normalement. Nous allons toujours créer une fonction bientôt en bas avec la requête et la réponse, mais cette fois j'ai ajouté dans un tableau. Nous allons d'abord inclure ici quelques fonctions de validation de formulaire pour vérifier l'entrée de l'utilisateur pour toute entrée malveillante ou erreur, alors ajoutons un commentaire. Tout d'abord, nous allons valider les données de l'utilisateur. Cela va essentiellement nettoyer les entrées de l'utilisateur , puis le rendre sûr pour transmettre à notre serveur. Entrées de formulaire, tri moyen commun pour les pirates d'entrer du code, car il s'agit d'une communication directe entre un pirate et aussi le serveur. Par conséquent, nous devons utiliser la validation et désinfection pour nettoyer l'entrée avant qu'elle n'atteigne le serveur. Pour ce faire, je vais inclure un paquet de noeud appelé express validator, que nous installons en tant que paquet npm. Jusqu' au terminal, fermez ceci, sorte que la commande est npm space i, et le paquet est express-validator, appuyez sur Entrée. Ce paquet nous permettra de faire deux choses principales, validation et aussi la désinfection. La validation consiste à s'assurer que l'utilisateur a entré des valeurs dans le bon format, un peu comme nos modèles que nous avons créés pour l'utilisateur et l'hôtel. Il peut s'assurer que le nom d'utilisateur est un nombre minimum de caractères, si le champ contient des données alphanumériques, si un mot de passe correspond, etc. désinfection est un processus qui supprime, remplace les caractères entrés dans les champs d'entrée, qui peuvent être utilisés pour envoyer des données malveillantes au serveur. Express Validator est livré avec des modules que nous pouvons utiliser pour ces deux tâches. Si nous allons dans la barre latérale et ouvrons sur les modules de noeud, faites défiler vers le bas jusqu' au validateur express que nous venons d'installer, donc juste ici, ouvrez ceci. Dans ce dossier, nous allons utiliser à la fois les modules de vérification et de filtre, certains plus dans le fichier userController.js, nous pouvons exiger ceux-ci en haut de ce fichier, donc faites défiler vers le haut, et ensuite nous pouvons ajouter un commentaire de validateur express. Mettre en place une constante, les accolades. Le premier va être check, ce qui est égal à exiger l'express-validator, qui est le nom du paquet, contrôle de barre oblique, qui est le nom du module que nous devons inclure. Rappelez-vous, faire des choses comme ceci, si nous ajoutons les accolades, ceci est utilisé pour importer un seul membre de notre module, puis le stocker à l'intérieur d'un nom de variable appelé check. Cette constante de vérification sera donc utilisée pour valider les données. Ensuite, à partir du même module, nous pouvons également utiliser les résultats de validation, donc ajouter une virgule, ajouter des résultats de validation. Cela exécute la validation et stocke toutes les erreurs de validation dans un objet de résultat, mais plus sur ce bientôt. Ensuite, nous pouvons également exiger le module de filtre et stocker à l'intérieur d'une constante appelée désinfection. Sur la ligne suivante, créez une constante avec le nom de la variable cette fois de désinfecter. Ceci est égal à require, passez dans notre validateur express, le nom du module qui est filtre avant slash. Ce module, comme vous l'avez peut-être deviné, sert à désinfecter les données de l'utilisateur. Commençons par valider les données en utilisant une constante de vérification qui est configurée ci-dessus. Jusqu' à notre tableau, sous les commentaires de données de validation, nous pouvons utiliser notre vérification, qui est la constante. À l'intérieur, nous pouvons ajouter dans notre nom de champ, qui est le premier nom de soulignement. Ces noms de champs doivent correspondre aux noms que vous avez dans notre formulaire utilisateur, donc juste ici, revenez au contrôleur. La première méthode que je vais vérifier est si la longueur est une certaine valeur. Nous le faisons en passant dans un objet d'options, où nous pouvons vérifier si la longueur minimale est égale, je vais le définir à un. Donc IsLength est une méthode qui est fournie par le validateur express, comme le sera tous les autres, que nous allons ajouter maintenant. Nous pouvons également enchaîner jusqu'à la fin autant d'entre eux que nous le voulons. Le prochain que je vais ajouter avec message. A l'intérieur, nous pouvons passer un message si la longueur ne correspond pas à la valeur minimale que vous transmettez. Cela va être une chaîne de texte de « Le prénom doit être spécifié », puis sur la ligne suivante. Je vais aussi enchaîner quelque chose d'autre à la fin. On pourrait continuer à franchir la même ligne, mais je vais ajouter ceci à la ligne suivante, juste pour que ce soit plus clair. Cette fois, nous allons vérifier si le texte est alphanumérique avec point isalphanumérique, les crochets juste après, et puis nous pouvons également enchaîner sur un message comme nous l'avons fait ci-dessus, donc avec message. Ensuite, passez une chaîne que vous allez afficher à l'utilisateur si le résultat n'est pas alphanumérique. Ajoutez une chaîne de texte « Le prénom doit être alphanumérique ». C' est la fin de notre première vérification sur le champ prénom. Nous pouvons ajouter une virgule juste après. Mais aussi à peu près va faire la même chose pour le nom de famille. Copions ces deux lignes, ajoutez-les ci-dessous. La seule différence est le nom du champ. Vérifiez cette fois le nom de famille et puis aussi nous pouvons changer le texte. Le nom de famille doit être spécifié et le nom de famille doit également être alphanumérique. Encore une fois, assurez-vous que la virgule est à la fin, de sorte que vous voyez vérifier. Cette fois, nous allons sélectionner le champ email de notre formulaire. Nous pouvons enchaîner à la fin de ce point est email. C' est une méthode que nous avons fournie écrire avec des données exprès valides qui vérifiera si ce champ correspond à un format email. Si ce n'est pas le cas, nous allons également ajouter le message. Avec message, et cela va être une chaîne de texte d'adresse e-mail non valide. Tout comme ceux ci-dessus, nous devons ajouter une virgule juste après. Nous pouvons également vérifier le champ suivant, qui est l'e-mail de confirmation. Cela doit également être une chaîne. Confirmez l'e-mail de soulignement. Ça va être un peu plus complexe. Nous devons maintenant vérifier si les e-mails correspondent et aussi si les mots de passe correspondent. Étudiants, nous pouvons utiliser un validateur personnalisé. Commençons par configurer la vérification et ajouter notre fonction de validation personnalisée vide juste pour l'instant. Nous avons sélectionné notre nom de champ. Enchaînons à la fin le validateur personnalisé, avec point personnalisé et ensuite nous pouvons également enchaîner sur point avec message et nous reviendrons à celui-ci dans un instant. A l'intérieur d'une coutume et nous pouvons passer dans une fonction. Le premier paramètre est la valeur qu'il reçoit du champ. Ajoutez les crochets à l'intérieur ici, la première valeur, qui vient de notre formulaire. Cela va venir de notre champ email de confirmation. La deuxième valeur va être à l'intérieur d'un objet. Ajouter un objet d'options où nous pouvons passer plusieurs valeurs ici. Mais nous avons seulement besoin d'accéder à l'objet de requête, que nous pouvons également transmettre. Maintenant, cela nous donne toutes les informations dont nous avons besoin. Nous avons la valeur de confirmation email, et nous avons également l'objet de requête, qui a stocké dans tous les autres champs. Nous pouvons maintenant terminer notre fonction en comparant les deux champs. Juste après les crochets, nous pouvons définir pour obéir à la fonction de flèche ES6 pour vérifier si la valeur, qui est notre premier champ. Il s'agit des données provenant de l'e-mail de confirmation. Vérifiez si cela est égal à la requête, qui est l'objet de requête transmis dans l'e-mail de point de corps. Ici, nous saisissons le champ e-mail d'origine, qui est celui-ci juste ici. Ensuite, nous vérifions que c'est la même valeur qui est stockée en valeur que ce champ juste ici. Il ne reste plus qu'à transmettre un message qui est une chaîne d'adresses e-mail ne correspondent pas, avec une virgule à la fin. Les deux derniers champs que j'ai pour le mot de passe et aussi pour confirmer le mot de passe. Nous pouvons faire à peu près la même chose que ce courriel. Tout d'abord, nous allons faire notre première vérification pour les champs de mot de passe initiaux, vérifier le mot de passe. Nous allons vérifier si c'est une longueur minimale. Allons-y pour six personnages. Passage de nos objets, minimum de six. Sur la ligne suivante, nous pouvons utiliser point avec message. Mot de passe non valide Les mots de passe doivent comporter au moins six caractères. Assurez-vous que la virgule est à la fin de cette ligne. Donc maintenant, nous pouvons également confirmer le mot de passe en utilisant le validateur personnalisé. Tout comme l'e-mail ci-dessus, Copions le validateur personnalisé et collez-le juste en dessous du mot de passe. Ici, tout ce qu'on a à faire, c'est changer quelques champs. Le premier est de confirmer le mot de passe, pour saisir ce champ. Cela va également être stocké à l'intérieur de cette valeur comme premier argument. Nous devons également transmettre la demande comme avant. Obtenons toutes les informations de tous les autres champs. Nous vérifions ensuite si la valeur, qui est ce champ juste ici de confirmation, est un mot de passe égal à requête ou body dot, qui est ce champ juste au-dessus. Nous pouvons alors changer le texte. Tous les mots de passe ne correspondent pas. Assurez-vous que la virgule est à nouveau à la fin. Après notre validation, nous pouvons à nouveau définir notre fonction, comme d'habitude, en lui transmettant l'objet requête et réponse ainsi que suivant. Définissons cela comme une fonction de flèche ES6, en passant la requête, la réponse, et aussi la suivante. En haut de ce fichier, nous avons créé une constante appelée résultats de validation juste à l'intérieur d'ici, que nous pouvons maintenant ajouter à l'intérieur de notre fonction prenant dans l'objet de requête. Faites défiler jusqu'à notre fonction, ajoutez les résultats de validation. Transmettez l'objet de requête. Cela extrait toutes les erreurs de validation des objets de requête. Nous pouvons ensuite les stocker dans une constante à utiliser. Au début, nous pouvons stocker une constante avec un nom d' erreurs et définir ceci à nos résultats de validation. Fais juste ça une virgule juste ici. Maintenant, je veux configurer une instruction if pour vérifier si nous avons des erreurs. Passer ces constantes d'erreurs, puis après cela, nous pouvons ajouter point est vide. Ensuite, les crochets juste après et assurez-vous que cela est orthographié correctement. Dot is empty est une méthode de résultat de validation que nous pouvons utiliser pour vérifier s'il y avait des erreurs. Actuellement, nous vérifions si le tableau d'erreurs est vide, mais nous voulons faire le contraire et vérifier s'il y a des erreurs. Nous pouvons faire le contraire en ajoutant un point d'exclamation juste devant. Cette section va gérer toutes les erreurs. Il y a des erreurs. Ensuite, nous pouvons ajouter une autre section. Cette section va être quatre pas d'erreurs. A l'intérieur de la section if, s'il y a des erreurs, nous pouvons ajouter un rendu de points res pour montrer à nouveau le signe de forme et aussi un nouveau titre de s'il vous plaît corriger les erreurs suivantes. Res point rendu, nous pouvons réafficher le même formulaire d'inscription. Signer le soulignement. Ensuite, ajoutez une virgule, passez notre titre à l'intérieur de l'objet. Le titre de s'il vous plaît corriger les erreurs suivantes, puis un point-virgule à la fin. Passons au navigateur et testons cela. Si nous enregistrons ce fichier, rechargez notre itinéraire d'inscription. Semble avoir une erreur. Oh, on doit redémarrer le serveur. [ inaudible] démarrer, recharger notre itinéraire d'inscription. Tout d'abord, testons cela avec des données valides. Ajoutons quelque chose à l'intérieur d'ici qui signifie le nombre minimum de caractères, ainsi que le format de date. On peut ajouter n'importe quoi ici. Cliquez sur Confirmer. Nous ne voyons rien se passer à l'heure actuelle parce que toutes ces données sont valides. Nous n'avons rien mis d'autre à l'intérieur de ce bloc else pour gérer ce qu'il faut faire ensuite. Nous voyons également le même titre d'inscription d'utilisateur, ce qui signifie que nous n'avons pas été redirigés vers cette inscription avec le titre différent. Maintenant, arrêtons cela et nous pouvons ajouter des données invalides. Réduisons le mot de passe à moins de six caractères. Nous pouvons le modifier pour ne pas ressembler à un e-mail, cliquez sur Confirmer. Le navigateur Web nous empêche de le faire parce qu'il est défini sur un champ de messagerie. Restez avec le mot de passe pour l'instant. Cliquez sur Confirmer. Maintenant, nous sommes redirigés vers la même route d'inscription à la barre oblique de pôle, mais cette fois nous utilisons le titre de la page ou s'il vous plaît corriger les erreurs suivantes. Nous n'avons pas encore transmis les erreurs à ce modèle. Mais c'est un bon signe, ce qui signifie que nous détectons maintenant s'il y a des erreurs , puis que nous rendons notre modèle d'inscription avec un titre de page différent. 50. Transmission des erreurs au modèle et au système de nettoyage: Maintenant, avec les erreurs détectées, nous voulons les afficher à l'écran. Pour ce faire, nous pouvons transmettre les erreurs que vous avez stockées dans cette variable locale à notre modèle. Nous pouvons le faire juste après notre titre. Ajouter une virgule, nous pouvons passer le nom des erreurs. Ce nom d'erreurs sera disponible dans les modèles et cela sera égal à un tableau de points d'erreurs, c'est la méthode de tableau. Nous allons obtenir l'ensemble complet des erreurs sous forme de tableau, puis aurons accès à toutes ces erreurs dans notre modèle, utilisant le nom d'erreur que nous avons donné juste ici. Maintenant, nous pouvons afficher ces erreurs sous la forme d'une liste non ordonnée à l'intérieur des modèles. Retournez à notre dossier d'inscription dot prog. Sous la ligne horizontale, nous pouvons dire si des erreurs, ce code ne fonctionnera que si des erreurs sont passées aux modèles. Créons une liste non ordonnée. Ensuite, nous pouvons faire une boucle à travers chacune des erreurs du tableau. Pour erreur, dans les erreurs, nous allons créer une nouvelle liste d'élément, qui sera égale à l'erreur et nous pouvons saisir le message d'erreur avec point MSG. Maintenant, nous pouvons faire une sauvegarde et ensuite tester si tout fonctionne. Enregistrez ceci, puis rechargez. J' ai mal orthographié [inaudible], erreur dans les erreurs. Au contrôleur. Juste là, redonnez-nous un rechargement. agit de nos messages d'erreur d'avant lorsque nous définissons les mots de passe à moins de six caractères. Nous recevons maintenant un message de mots de passe invalides. Les mots de passe doivent comporter au moins six caractères. Retournons en arrière. Ajoutons de petites erreurs afin que nous puissions nous assurer que les adresses e-mail ne correspondent pas. Ajoutons également nos mots de passe qui ne sont pas beaucoup à et aussi sous six caractères de long et confirment. Bien, nos adresses e-mail ne correspondent pas. Nous avons un mot de passe non valide et nos mots de passe ne font pas grand-chose non plus. Ce sont les messages d'erreur que nous définissons dans notre validation dans le contrôleur utilisateur. Ce sont tous des avertissements, qui sont juste ici. Beaucoup de ces messages peuvent même ne jamais apparaître, si nous avons le champ requis défini sur l'ancien formulaire. Si vous venez d'innover couche utile de validation, plus dans le navigateur, une fois que vous obtenez un message d'erreur, tous ces champs que nous avons tapés et maintenant vides. Idéalement, nous voulons conserver les détails que l'utilisateur a entrés, mais nous corrigerons supposons. Ensuite, nous allons passer à la désinfection. Ce sera un peu plus simple que la validation. Allons voir notre contrôleur. Retour au poste d'inscription. Allons vers le bas. Tout d'abord, commentons le reste ou le rendu. Ensuite, nous pouvons remplacer cela par un point rouge JSON passant dans la requête, le corps, qui est les détails du formulaire. Si nous enregistrons ceci et remplissons ensuite le formulaire, revenez en arrière et soumettez à nouveau le formulaire. Ensuite, nous tapons un mot de passe, allons-y pour les tests. Confirmez. Nous voyons maintenant les données JSON qui ont été soumises à partir du formulaire. Si nous cliquons sur le bouton Précédent et puis ajoutons du HTML à l'intérieur de l'un de ces champs. Ouvrez les crochets d'angle tous ces dans, Cliquez sur le pouce. Encore un mot de passe. Confirmez. Ce HTML est également envoyé avec le JSON, que vous pouvez voir dans le prénom, ce qui signifie que cela serait également envoyé à un serveur Web à. Ajouter du code à l'intérieur d'une entrée de formulaire comme celle-ci pourrait être utilisée malicieusement par les pirates, pour envoyer des entrées potentiellement dangereuses au serveur. En règle générale, chaque fois que nous recevons des entrées de l'utilisateur, nous devons toujours les valider et les désinfecter aussi. Nous avons pris soin de la validation. Maintenant, à la désinfection. Tout d'abord, nous pouvons utiliser la variable désinfectée que nous avons créée plus tôt, quand c' est important, le module de filtre. juste ici, nous installons ceci à l'intérieur de la variable sanitize. Allons descendre juste avant que tout fonctionne. On peut accéder à ce que nous avons eu désinfecter. Nous pouvons à nouveau cibler chaque champ individuel comme nous l'avons fait auparavant avec la validation ou nous pouvons passer dans un style qui cible tous les champs. Ensuite, enchaînez à la fin la méthode de garniture, point trim. Cela supprimera tous les espaces avant et après les champs de texte. Enfin, nous pouvons également enchaîner sur les extrémités, point escape et une virgule. Cela supprimera tous les caractères HTML susceptibles d'être utilisés par les pirates informatiques pour créer une attaque par script intersite. Si nous sauvegardons cela, puis revenons au navigateur, et rechargeons. Nous voyons que nous avons maintenant, supprimé nos balises HTML et remplacé par les codes d'entité HTML correspondants. Nous avons maintenant pris soin de valider et de désinfecter les entrées de l'utilisateur. Nous pouvons maintenant passer à la vidéo suivante, qui gère l'enregistrement de ces informations dans notre base de données. 51. Enregistrement de nouveaux utilisateurs: Nous avons maintenant validé et désinfecté les entrées des utilisateurs. Maintenant, l'étape suivante consiste à enregistrer ces données dans la base de données. Pour vous aider à cela, je vais utiliser un middle-ware d' authentification appelé passeports. Passport est disponible sur Passport js.org. Si nous allons ici et puis cliquez sur la Documentation. Sur le côté gauche, nous voyons de nombreuses façons différentes d' utiliser Passport pour authentifier nos utilisateurs de différentes manières, telles que Facebook, Twitter, et bien d'autres encore. Toutes ces méthodes sont appelées stratégies, dans le cadre de ce projet et ce que nous utilisons une combinaison e-mail et mot de passe pour se connecter. Si nous cliquons sur Nom d'utilisateur et mot de passe ici. Chaque fois qu'il est pris à cette section nom d'utilisateur et mot de passe et que nous pouvons voir par cette fonctionnalité, cela est stocké à l'intérieur d'un module appelé Passport hyperlocal. Nous allons aller de l'avant et installer supposons. En plus de cela, il y a aussi un paquet pratique que nous allons utiliser appelé Passport-Local Mongoose. Ceci est un plugin ou une extension pour Mongoose, ce qui rend vraiment facile d'utiliser les passeports, nom d'utilisateur et mot de passe combinaison pour se connecter. Il nous donne une méthode de registre simple qui prendra n'importe quel utilisateur et mot de passe, puis enregistrer cet utilisateur avec Mongoose. abord, nous devons installer tous ces paquets dans Visual Studio, alors fermez le serveur, exécutez NPMI. Ensuite, je veux inclure trois paquets différents. Le premier est les passeports et vous pouvez inclure plusieurs paquets sur la même installation. Séparés par espace, nous pouvons également ajouter Passports-Local, ce qui était la stratégie que vous avez déjà vu dans la documentation du passeport. Ensuite, le troisième et dernier de ce dont nous avons besoin sera Passports-Local-Mongoose. Appuyez sur « Entrée ». Laissez tous ces extractions à partir de MPM, passez au numéro trois, démarrez le serveur avec MPM run DEF start. Dans le user.js, qui est à l'intérieur de nos modèles. Ouvrons ça. Cela verra le schéma que nous avons configuré pour l'utilisateur. Nous pouvons exiger le paquet Passports-Local-Mongoose. Mettez sur le dessus de ce dossier. Mettons en place notre constante appelée Passports-Local-Mongoose. C' est égal à exiger. Cela va nécessiter notre module de noeud, qui est Passport-Local-Mongoose, puisque c'est un plug in Mongoose, nous devons ajouter ce plugin à notre schéma avant de pouvoir l'utiliser. En bas tout en bas sur le schéma de nos utilisateurs. Avec tout le module que nous avons des exportations, nous pouvons cibler notre User schema.plug-in et le plugin que vous voulez ajouter est Passports-Local-Mongoose. C' est le nom constant qui a été mis en place en haut ici. Ensuite, je vais passer un objet Options. Séparé par une virgule, ouvrez les accolades, puis nous pouvons ajouter dans le champ nom d'utilisateur et définir ce égal à ou e-mail. Cet objet peut prendre plusieurs options. Vous pouvez les consulter dans la documentation si vous voulez en savoir plus. Quel est exactement ce champ de nom d'utilisateur ? Comme nous le savons quand il est transmis, deux choses pour se connecter. Nous avons besoin d'une adresse e-mail et aussi d'un mot de passe. Signer ce champ de nom d'utilisateur à l'e-mail signifie que nous voulons utiliser ce champ de courrier électronique du schéma ci-dessus comme nom d'utilisateur pour nous connecter. Par défaut, si nous omettons ce champ de nom d'utilisateur, il va de l'avant et chercher dans notre schéma un champ appelé nom d'utilisateur, que nous n'avons pas. Ensuite, nous devons régler Passport dans le fichier app.js /tête sur app.js. Double-cliquez sur cela et nous allons faire plus d'espace. En haut de ce fichier, passons sous le routeur, va configurer un commentaire. Ceci est pour passports.js. Nous devons configurer passport.js à l'intérieur de ce fichier en exigeant le schéma utilisateur et aussi le module Passport. Donc const-user. Cela va exiger que nous utilisions un modèle. Il s'agit du dossier ./ du modèle. Puis transférer /l' utilisateur. Ensuite, nous pouvons également importer notre module de passeport et le stocker à l'intérieur d'une constante appelée Passport. Nécessite un module de nœud appelé Passport. Dans notre express up, nous devons d'abord initialiser Passport en utilisant le middle-ware passeport.initialize. Soufflez ceci, nous pouvons faire défiler vers le bas et vous pouvez l'ajouter à peu près n'importe où. Une fois sur cela juste après la configuration du moteur de vue, ajoutons un commentaire. Configurez donc le middle-ware Passport. Encore une fois, nous allons utiliser app.use, que nous avons utilisé dans le passé. Allez à, passez dans la variable.initialize possible ; puis une seconde, app.use. Celui-ci est passeport.session ; Cette première ligne va initialiser passeport à utiliser à l'intérieur de notre application. Ensuite, le second, en ajoutant passeport.session, nous permettra d'utiliser des sessions plus tard, ignorer l'utilisateur actuel connecté. Mais on y reviendra plus tard. Nous avons dit plus tôt que l'utilisation d'une combinaison nom d'utilisateur et mot de passe est appelée une stratégie locale de passeport. Cela peut maintenant être configuré à l'aide de passeport.use. Juste en dessous de cela, nous pouvons dire que passeports.use, notre modèle utilisateur u.Creategy. Ces stratégie de création est une méthode d'aide fournie par le module Passports-Local-Mongoose, que nous avons installé, qui ajoute ensuite à notre schéma utilisateur. Il est responsable de la création du suivi de la stratégie Passport-Local, d'annoncer, de profiter du nom d'utilisateur et mot de passe, que vous voulez utiliser à partir des passeports. Nous devons ensuite sérialiser et désérialiser l'utilisateur. La première forme est de taper ceci, et ensuite nous pourrions parler un peu de ce que cela fait. Tout d'abord, passeport.serializeuser. A l'intérieur, nous passons dans nos objets utilisateur, modèle utilisateur en caoutchouc. puis la méthode utilisateur serialize. Ensuite, nous faisons à peu près le contraire, qui est passeport.Deserializeuser. Tout comme une balle, nous ajoutons détruire le modèle utilisateur .Deserializeuser. Cela peut être un peu compliqué pour vous débrouiller la tête , mais le concept principal concerne les sessions. Une session que nous allons examiner plus en détail bientôt, nous permettra essentiellement de stocker les détails de l'utilisateur, sorte qu'ils restent connectés en cliquant d'une page à la suivante. Ces fonctions indiquent à Passport comment obtenir les informations de cet utilisateur objets et quelles informations stocker dans notre session. Il s'agit du chemin sérialisé. Le chemin désérialisé est la fonction qui sera responsable de leur récupération des informations des utilisateurs actuels de notre session, puis de retour dans les objets utilisateur. Par conséquent rester et connecté entre les pages. Mais encore une fois, nous reviendrons aux sessions dans une vidéo ultérieure. Cela devrait être maintenant pour la configuration. Retour au contrôleur utilisateur. Enregistrez le fichier utilisateur ou utilisez un contrôleur. Pour lancer les choses dans le post d'inscription, qui est ce tableau que nous avons créé ici. Assurez-vous que nous avons retiré le res.jayson. Retirez cette ligne, puis réinstaure notre res.render. Juste après ce res.render, je vais ajouter le mot-clé return. Ce mot-clé return sortira des instructions s'il y a des erreurs sur cette étape. Si la section ci-dessus est recherchée s'il y a des erreurs, mais si elles ne le sont pas, nous pouvons aller de l'avant et enregistrer les informations de l'utilisateur à l'intérieur de cette section L. À l'intérieur, nous pouvons configurer une constante appelée nouvel utilisateur. C' est égal à un nouvel utilisateur objets où nous allons passer dans la requête de corps, qui est l'information du formulaire. Ensuite, nous utilisons une autre méthode fournie par Passports-Local-Mongoose, qui enregistrera ensuite notre nouvel utilisateur. Grab je vais utiliser un modèle U.Register. Cette méthode de registre prend en trois arguments. abord, c'est l'utilisateur que nous voulons enregistrer, que nous aurons stocké dans cette constante juste ici. Encore un nouvel utilisateur. Le second est un mot de passe, qui est stocké dans request.body.password. Cela va juste être un utilisateur de test pour l'instant. Stocker ce texte en clair n'est pas un problème, mais bientôt nous allons voir comment nous pouvons crypter son mot de passe avant d'enregistrer, ce qui est quelque chose que nous devrions toujours faire. Le troisième est une fonction de rappel. Il s'agit d'une fonction qui s'exécutera lorsque la méthode de registre est terminée. Ajouter un coma, ajouter une fonction qui prend dans notre erreur, rendons un peu plus petit. Ensuite, créez le corps de la fonction. A l'intérieur de ce rappel. La première chose à faire est de gérer les erreurs, puis de les transmettre le long de notre middle-ware. Nous dirons si une erreur est présente sur un journal de console, avec le message d'erreur lors de l'enregistrement. Ensuite, nous pouvons ajouter une virgule, puis passer le message d'erreur, qui est stocké dans cette variable d'err. Après cela, nous pouvons passer cela le long de notre chaîne de middle-ware. Nous pouvons retourner un accent sur suivant, ce qui prend également dans l'erreur. Faisons le navigateur. Nous pouvons créer un utilisateur de test et vérifier que cela fonctionne. Si nous revenons en arrière et qu'il va à nos itinéraires d'inscription. Permet d'ajouter un utilisateur de test. Alors testez notre test. Confirmez. Le mot de passe est correct. Cliquez sur « Confirmer ». Si nous cliquons sur « Soumettre », l'icône du navigateur en haut continuera à tourner. C' est parce que nous ne lui avons pas encore dit quoi faire ensuite. Mais si nous passons à McLab, puis rechargeons et je fais défiler vers le bas, nous voyons maintenant que nous avons notre collection d'hôtels avec nos documents originaux. Parallèlement à cela, nous avons maintenant la collection de notre utilisateur qui contient plus de documents à l'intérieur. Cliquons sur ceci. Rend plus d'espace. Il y a notre utilisateur de test que nous venons d'ajouter avec le mot de passe de tester plus. Comme je l'ai mentionné précédemment, le mot de passe ne doit pas être stocké en texte brut. C' est la résolution qui va corriger dans la prochaine vidéo, où nous allons regarder le cryptage de mot de passe. 52. Cryptage du mot de passe: Nous avons maintenant enregistré nos utilisateurs dans la base de données, mais c'est quelque chose que nous devons encore corriger. Nous avons enregistré un utilisateur de test dans la base de données, mais le mot de passe est stocké en texte brut. C' est quelque chose que nous ne devrions jamais faire. En fait, aucune entreprise ne devrait jamais enregistrer votre mot de passe dans la base de données comme celle-ci. Si la base de données était piratée, le pirate aurait accès à tous les noms d'utilisateur et mots de passe. Il y a aussi de bonnes chances qu'un utilisateur utilise le même mot de passe sur d'autres sites. C' est un grand risque pour la sécurité. Il y a souvent une idée fausse qu'une grande entreprise, prenons Facebook par exemple. Pourriez-vous simplement aller dans leur propre base de données et voir le mot de passe de tout le monde, s'il a été enregistré. Ce n'est pas et ne devrait pas être le cas pour une entreprise. Au lieu de cela, les mots de passe sont cryptés en premier, et la version cryptée est stockée à l'intérieur de la base de données. Pour comprendre un peu plus à ce sujet, nous devons être conscients du hashin et des sels. Hashin est fondamentalement une façon de brouiller notre mot de passe. Lorsque nous enregistrons en tant qu'utilisateur, la version Scrumble est alors stockée dans la base de données. Chaque fois que nous avons ensuite essayé de vous connecter, notre mot de passe, va entrer est également brouillé à nouveau en utilisant exactement le même algorithme que lorsque nous nous sommes inscrits et cette version émiettée sera vérifiée rapport à la même version brouillée à l'intérieur de la base de données. Ce hashin devrait être un processus à sens unique et il ne devrait pas y avoir moyen de le convertir au mot de passe d'origine. Les pirates peuvent utiliser ce qu'on appelle une attaque de force brute. Cependant, c'est quand ils utilisent un ordinateur pour générer des milliers de hachages à partir de mots de passe jusqu'à ce que l'un d'eux corresponde. Pour essayer de rendre les choses encore plus sécurisées, nous pouvons également résoudre le mot de passe. salage est quand nous ajoutons des données, souvent générées au hasard pour chaque mot de passe. Le sel est ajouté au mot de passe de l'utilisateur, puis haché pour le rendre plus sécurisé. Ce sel est souvent également stocké dans la base de données avec la valeur hachée. Nous allons utiliser un paquet appelé bcrypts, qui prendra soin de ce hashin et le salage suit. C' est la page du package qui s'exécute maintenant. Si nous passons aussi à mongoose bcrypts, qui est aussi un paquet npm. Pour rendre les choses encore plus faciles, nous allons également utiliser ce paquet mongoose bcrpt avec le module bcrypt. Ceci est un plugin mongoose. Tout comme le plugin mongoose nous avons utilisé pour les passeports pour rendre l'intégration avec Mongoose vraiment facile. Tout d'abord, passons à Visual Studio Code et installons les paquets dont nous avons besoin. Jusqu' au terminal, npm i, puis mongoose-bcrypts. Installez juste un instant. Certains savons sont assez simples. Nous ajoutons ceux-ci dans l'user.jsmodel. Nous devons l'exiger en haut. Allez dans le user.js et puis après nos deux nécessite en haut, allons mettre en place une nouvelle constante appelée mongoose bcrypts. Nous définissons cela comme camelcase et c'est donc égal à exiger. Nous allons exiger le nom du module, qui est mongoose-bcrypts. Ensuite, nous ajoutons ceci comme un plugin mongoose, tout comme le module mongoose local de passeport qui a ajouté plus tôt. Faites défiler vers le bas où nous ajoutons nos plugins au-dessus de notre login d'avant, nous pouvons également accéder au schéma utilisateur. Permet le plug-in. Le plugin que nous voulons ajouter cette fois est mongoose bcrypts, qui est notre nom de variable. Ensuite, une fois que nous avons configuré ce plug-in, nous pouvons maintenant ajouter l'option bcrypt à notre champ de mot de passe de schéma. Nous le faisons en définissant l'option bcrypt pour être true. Donc, jusqu'à notre mot de passe. Ajouter une virgule après nécessaire, nous pouvons ajouter l'option bcrypt et définir ceci pour être vrai. donne une sauvegarde et ensuite nous pouvons aller sur le lien d'inscription dans la barre de navigation, et nous pouvons créer un nouvel utilisateur de test du navigateur. En fait, nous devons exécuter npm devstart. C' est le navigateur et je vais passer à mLab et supprimer notre utilisateur de test, puis aller à m'inscrire dans la barre de navigation supérieure, puis ajoutons un utilisateur de test une fois petit. Vous pouvez ajouter n'importe quoi à l'intérieur ici. Appuyez sur « Confirmer ». Puis sur mLab, appuyez sur « Recharger ». Voyons si notre utilisateur de test est maintenant à l'intérieur de là, ce qui est. N' oubliez pas que lorsque nous avons cliqué sur le bouton d'inscription ici, nous n'avons pas encore réglé où aller. Le navigateur restera sur cette page. Retournez à McLab. Maintenant, si vous développez notre vue, testez l'utilisateur, nous pouvons maintenant voir sous les champs de mot de passe, nous avons cette version cryptée maintenant stockée dans notre base de données plutôt que le texte brut d'avant. Maintenant, nous avons ce travail. Supprimons tous nos utilisateurs de mLab. Supprimez celui-ci et tous les utilisateurs que vous pourriez avoir. Nous laisserons si clair quand nous passerons à la prochaine vidéo où nous commencerons à manipuler la fonctionnalité de connexion. 53. Se connecter: Bien sûr, avoir des comptes d'utilisateur à l'intérieur tourne varie, est maintenant utilisé à moins que l'utilisateur enregistré peut également se connecter lors du retour. C' est ce que nous sommes allés gérer dans cette vidéo. En outre, nous ne gérons pas la connexion dans l'utilisateur immédiatement après l'enregistrement, ce qui est une belle petite touche. Nous avons déjà un bouton de connexion à l'intérieur de l'en-tête, qui renvoie aux routes de connexion barre oblique avant. Commençons par gérer cette route à l'intérieur du fichier index.js. Sortons aujourd'hui à l'intérieur du dossier routes, puis descendons à nos routes utilisateur, qui est juste ici. Ce sera une requête Get, donc routée ou Gats. Chemin d'accès à la barre oblique. Utilisons notre contrôleur d'utilisation, puis créer un login obtient ou nous utilisons contrôleur, nous pouvons maintenant configurer cette fonction à l'intérieur ici. A l'intérieur du contrôleur, l'utilisation du contrôleur, puis vers le bas apporter ceci un peu plus exports.login obtient égal à notre fonction qui prend dans la requête et les objets de réponse. Ou corps de la fonction, qui va simplement se reposer ou rendre le modèle, qui est appelé login. Ensuite, les options passent dans le titre de la connexion pour continuer. Alors on y va à la fin. Bien sûr, nous avons également besoin de créer cette connexion sur le modèle aussi. On va le faire maintenant dans la barre latérale. Les routes, désolé, les vues. Cliquez sur « Icône Nouveau fichier », puis login.org. Commençons par étendre nos mises en page. Bloquer le contenu. Titre de niveau 2 avec le titre, qui est passé à nos modèles. Ligne horizontale pour séparer le titre du reste de notre formulaire. Commençons par créer notre formulaire maintenant, et les décisions ont l'action qui va être avant/login. La méthode va être une demande de poste. Nous allons entourer chacune de nos entrées de formulaire avec la classe de formage boots.foam_ input et dit pour notre CSS plus tard. Ce sera une entrée de formulaire simple. Il va avoir l'e-mail dans un groupe, le mot de passe, puis un bouton de soumission vers le bas. Commençons par créer notre e-mail. Étiquette pour le courrier électronique, puis le texte pour l'étiquette de l'e-mail deux. Cette entrée va avoir le type d'e-mail. Cela fournira une certaine validation du navigateur si le type d'e-mail n'est pas correct. Type d'entrée, nous avons également besoin du nom de l'email 2 et aussi de l'ID de l'e-mail afin de correspondre à votre étiquette. Le second, et en fait, nous allons juste copier ce formulaire entrée-groupe alentours ci-dessous. Celui-ci sera pour le mot de passe. Aussi le texte off mot de passe avec le et juste après est également un type d'entrée de mot de passe 2 le nom, et enfin l'ID 2 du mot de passe. La dernière chose que nous devons ajouter en bas est nos entrées de formulaire finales, et c'est pour notre bouton de soumission. Un bouton, cela doit avoir le type de soumission. Soumet un formulaire, nous pouvons également ajouter notre classe CSS de mettre en petit. Gardez le style cohérent, puis le texte de connexion. Compte tenu de notre finale, je sauve maintenant et bacause le navigateur, qui maintenant voir si nous actualisons sur ces routes de connexion, qui maintenant voir notre formulaire vers le bas. Une fois que ce formulaire est soumis, nous devons gérer la demande de poste sur le même itinéraire. Plus dans le index.js, nous pouvons gérer cela maintenant. Dupliquons cette ligne ici. Cette fois-ci veut être un point de routeur. Nous allons envoyer cette demande de poste aux mêmes routes de connexion, mais seulement à faire est de changer notre nom de fonction en poste de connexion. Ou on pourrait utiliser un contrôleur. Nous devons d'abord exiger le module Passport, puisque nous allons utiliser la méthode offense K fournie par ce module jusqu'au sommet, allons configurer notre constante de mots de passe capital P. Nous allons exiger le module Passport , à la fin . Maintenant, sur le message de connexion, que je vais ajouter tout de suite en bas. Exports.login post va être égal aux passeports, qui est notre variable pour le module de mot de passe, puis les adultes des avocats. Nous définissons ce poste de connexion b égal aux cartes de passe, puis méthode d'authentification Callie, qui a fourni avec ce module. Les premiers arguments que nous devons transmettre sont la stratégie locale pour gérer la demande de connexion. Passez un en local à l'intérieur ici, séparé par une virgule. Le second est un objet contenant quelques options. Ouvrez les accolades et je vais l'ajouter sur sa propre ligne. Ici, je vais passer en deux options. Celles-ci redirigent l'utilisateur lorsqu'une connexion a réussi ou échoué. Le premier est une redirection lorsque la connexion a été réussie, et nous le faisons avec succès. Redirections, qui est reconnu par les passeports, puis redirigera l'utilisateur vers la barre oblique, qui est notre route à domicile, séparé par un,. Nous pouvons également ajouter la redirection d'échec à. Nous allons rediriger vers la connexion slash, ce qui gardera l'utilisateur sur la même page de connexion. Vous devriez maintenant être tout ce dont nous avons besoin pour vous connecter, nous avons supprimé seulement les utilisateurs de test tôt de mLab. Maintenant, inscrivons un nouvel utilisateur. Enregistrez ce fichier sur le navigateur, nous devons d'abord signer un nouvel utilisateur. Allons-y pour notre propre utilisateur. Détails à l'intérieur ici. A confirmer O2 mLab, nous donner une actualisation, et sont utilisés est maintenant enregistré alors essayons de vous connecter. Si nous revenons à l'inscription des utilisateurs, revenez à la page d'accueil. Tout d'abord, nous allons cliquer sur l'option Connexion de la navigation ou je ne suis pas une faute de frappe pour voir si nous avons redirigé vers cette route avant/connexion. Faites défiler notre e-mail et à l'intérieur ici, et qui sort un mot de passe incorrect, appuyez sur « Login ». Nous sommes toujours redirigés vers cette barre oblique directe car il y a eu une erreur avec notre mot de passe. Essayons une connexion réussie cette fois et voyons pour redirigé vers cette page d'accueil. Donnons ce logo. Connectez-vous avec les bons détails, et bon. Nous avons maintenant redirigé vers la page d'accueil. Excellent. Nous avons maintenant la fonctionnalité de connexion fonctionne. Nous comptons sur la redirection, alors dites-nous s'il y a une flèche à la minute, mais nous ajouterons des messages flash plus tard pour donner des commentaires à l'utilisateur. La dernière étape consiste à se connecter automatiquement à l'utilisateur après l'enregistrement. C' est assez simple à faire puisque nous avons déjà le message de connexion déjà configuré. Nous pouvons simplement les ajouter aux itinéraires postaux d'inscription. Plus à notre index.js, nous avons cette installation de poste de connexion juste ici donc nous allons copier ceci. Ensuite, nous devons aller à la demande de poste lors de l'inscription. Ensuite, après les messages de signataire, nous pouvons ajouter une virgule, et nous ajouterons ceci sur sa propre ligne à ici. Nous pouvons également ajouter un message de connexion. Une fois que la demande de poste est envoyée aux itinéraires d'inscription, qui est ici, il va ensuite dans l'Affecter un poste, puis se connecter immédiatement avec cette fonction juste ici. Donnez à ce fichier une sauvegarde, et puis ainsi exprimé sait passer au message de slogan, nous devons appeler à côté du post d'inscription. Pour utiliser un contrôleur, allons trouver notre signe un post, qui est juste ici. Si nous faisons défiler vers le bas, nous avons ceci si les sections vérifient s'il y a des zones. Juste après lui et nous pouvons également appeler prochaine et ne tient pas compte des mouvements sur le poste de connexion. Maintenant, j'ai ceci, ceci est ajouté dans la section else, qui signifie qu'il n'y avait pas d'erreurs. A l'intérieur de ce bloc juste ici, et nous pouvons maintenant tester cela en ajoutant un utilisateur de test, alors enregistrez ceci. Allez à vous inscrire, puis c'est un utilisateur de test bizarre. Cliquez sur « Confirmer », puis faites défiler vers le bas. Nous voyons que nous avons une zone en bas de l'index clé en double. Maintenant, ce n'est peut-être pas tout à fait évident ce qui se passe ici. C' est essentiellement à quelques anciens index que nous avons déjà à l'intérieur de notre base de données. Si nous allons sur mLab et jeter un oeil, si nous cliquons sur les utilisateurs, puis ouvrons cela, nous avons notre utilisateur juste ici, que nous configurons. Si nous cliquons ensuite sur les index, nous voyons maintenant que nous avons un e-mail conflictuel et aussi un index de nom d'utilisateur. Nous voulons seulement sortir de l'e-mail, alors menons ce vieux nom d'utilisateur d'avant. Cliquez sur ce bouton, supprime. Maintenant, revenons à l'inscription, et essayons de soumettre à nouveau le formulaire. Bien. Maintenant redirigé directement après l'inscription. Si nous allons à mLab, cliquez sur notre base de données. Nous avons maintenant nos deux utilisateurs, qui est aussi le Test 1 que nous venons d'ajouter auparavant. Il semble maintenant que notre utilisateur est connecté, je reçois également la redirection réussie vers la page d'accueil. Bon ou les utilisateurs peuvent maintenant se connecter, et ensuite nous allons examiner les déconnexions. 54. Se déconnecter: Puisque nous avons maintenant la plupart des choses configurées avec Passport, déconnexion est une fonctionnalité simple à implémenter. Passport nous donne une fonction de déconnexion sur l'objet de requête. Pour mettre fin à la session de connexion, la première chose que nous devons faire est d'ajouter une option de déconnexion à l'intérieur du nerf. Pour le moment, nous n'avons que les boutons d'inscription et de connexion. Donc, ici, mettre en page un fichier carlin. Nous pouvons également ajouter un lien de déconnexion. Jusqu' à nos vues, puis layout.pug. Faites défiler. Nous pouvons créer un nouvel élément de liste après la connexion, donc li, qui va également être un lien avec un href de /logout et aussi le texte de déconnexion aussi. Plus tard, nous nous assurerons qu'un seul des liens de connexion ou de déconnexion s'affiche dans le navigateur, en fonction de l'état de connexion de l'utilisateur. Au-dessus du index.js, nous pouvons maintenant gérer cette route aussi. Index.js sous la route de l'utilisateur, ajoutons router.get. La chaîne de /logout, use controller, et cela va être simplement.logout. Allons créer ceci maintenant, à l'intérieur du contrôleur utilisateur. Faites défiler vers le bas. Exports.Logout, créez notre fonction, demande et réponse. Ici, nous pouvons accéder à la méthode de déconnexion sur les objets de requête, qui est fourni par Passport, request.logout, puis sur les objets de réponse, nous allons faire une redirection pour rediriger l'utilisateur vers la page d'accueil après la déconnexion. C' est tout ce qu'il nous faut faire. Au navigateur, nous pouvons maintenant lui donner un coup d'envoi. Enregistrez ce fichier, rechargez la page d'accueil, et en fait, nous allons essayer de vous connecter d'abord. Connectez-vous. Nous sommes maintenant amenés à la page d'accueil. Aussi l'installation de déconnexion nous redirige vers la page d'accueil aussi. Pour nous assurer que cela fonctionne, passons sur des routes différentes, telles que /all. Essayez de cliquer sur déconnecter, et maintenant ont été redirigés vers la page d'accueil. Donc, je veux juste m'assurer que c'est en minuscules juste pour correspondre au reste. Donc layout.pug, changer ceci et sauver et là nous allons. Donc, tout cela semble fonctionner maintenant, mais nous ne pouvons pas être sûr à 100 pour cent pour le moment. Dans les prochaines vidéos, nous allons fournir des commentaires à l'utilisateur pour lui indiquer quand la connexion ou la déconnexion a réussi en ajoutant des messages vidage. En outre, nous allons faire d'autres choses aussi, comme travailler avec des sessions, ajouter un rendu conditionnel aux liens de connexion et de déconnexion, ainsi que personnaliser l'en-tête en affichant le nom de l'utilisateur lorsqu'il est connecté. 55. Travailler avec des sessions: Lorsque vous travaillez avec des utilisateurs, quelque chose que vous allez bientôt rencontrer, c'est un besoin de gérer une session utilisateur. Les sessions sont essentiellement un moyen d'enregistrer un utilisateur authentifié, sorte qu'elles sont mémorisées entre les visites pendant une certaine durée. Ils peuvent également être utilisés pour diverses utilisations, mais ce sera le but des sessions de ce projet. Imaginez que nous sommes utilisateur et nous connectons à un site Web. Comme vous le savez déjà, lorsque nous cliquons entre les pages, nous ferons une nouvelle demande au serveur. Imaginez à quel point ce serait frustrant si nous devions nous connecter à chaque nouvelle page demandée. Cela est dû au fait que le serveur ne connaît pas les informations de l'utilisateur. Par conséquent, nous utilisons une session comme une sorte de stockage côté serveur pour les informations de l'utilisateur que nous voulons conserver lors de notre visite. Ce qui se passe, c'est lorsqu'un utilisateur se connecte, une session est créée et que les détails de l'utilisateur sont stockés dans la base de données. Nous allons utiliser notre même base de données Mongo pour cela. Un ID de session est transmis au serveur pour chaque requête. Souvent, cet ID est stocké dans ce qu'on appelle un cookie. Le serveur vérifie ensuite cet ID avec les informations qu'il contient pour cet utilisateur, puis renvoie les informations de l'utilisateur si tout va bien. Pour cela, je vais utiliser un paquet npm populaire appelé express-session. C' est le module npm que nous connaissons tous. Ce middleware nous permettra de configurer des sessions pour nos utilisateurs et d'ajouter diverses options que nous examinerons bientôt. Ensuite, nous avons mentionné que nous stockons également les données de session côté serveur. Si nous allons de l'avant et faites défiler vers le bas. C' est assez près du fond. Nous devons trouver nos magasins de session. Ici, nous allons « Magasins de session compatibles ». Nous voyons une liste des magasins que nous pouvons utiliser avec ce module. Puisque nous utilisons déjà Mongo dans nos projets, nous pouvons utiliser le paquet connect-mongo, qui est répertorié juste en bas. C' est celui que nous voulons utiliser. Ce paquet nous permet d'utiliser MongoDB comme magasin de session lors de l'utilisation d'Express. Commençons par installer le paquet dans notre projet. Vers le serveur et se ferme. Nous devons ajouter « npm i » et le paquet est appelé « Express-Session » appuyez sur « Entrée ». Une fois qu'il est tiré de npm, nous pouvons alors exiger ce module dans le principal « app.js ». Ouvrez la barre latérale, ouvrez le « app.js ». Ensuite, juste après notre routeur, ajoutons les commentaires de « For Sessions. » Const Session sera égal à exiger le nom du module « Express-Session ». Pot-virgule à la fin. Puis dans notre magasin Mongo. En bas dans le terminal « npm i ». C' était « Connect-Mongo ». Laissez-nous installer. Nous devons également exiger ce paquet aussi, donc aussi dans le « app.js », juste en dessous de notre session, nous pouvons également ajouter une consonne de « Mongo Store ». Je vais utiliser des majuscules pour cela et exiger « Connect -Mongo. Après cela, nous pouvons ouvrir les crochets et ensuite passer dans la session. Un point-virgule. Que fait exactement cette ligne de code quand on l'a juste ici ? Eh bien, comme d'habitude, nous saisissons le paquet « Connect-Mongo » et le stockons dans une constante appelée « Mongo Store ». « Connect-Mongo » renvoie une fonction. Mettez un charbon normal besoin n'exécutera pas immédiatement la fonction. Au lieu de cela, il va juste le stocker à l'intérieur de cette constante. C' est pourquoi nous devons ajouter les crochets à la fin, pour aller de l'avant et exécuter cette fonction, avec la personne dans la variable de session à cette fonction. Ensuite, ci-dessous, nous pouvons configurer notre session comme « Middleware » pour fonctionner pour chaque requête avec « app.use » et aussi passer à nouveau dans notre variable de session. Défilons vers le bas. Ajoutons ceci juste après notre « app.use » est, donc « app.use » la « Session » avec les crochets juste après. Cette session prend un objet « Options ». Ajoutons les accolades et ajoutez-la à une nouvelle ligne. Cela crée un middleware de session avec les options que nous allons ajouter maintenant. Toutes les options disponibles sont répertoriées dans la documentation. Pour le premier que nous allons utiliser, qui est également nécessaire, est la phrase secrète. Ajoutons le « Secret ». Nous pouvons également stocker cela dans notre fichier « .env », car ce sera des informations sensibles. Donc, d'abord, ajoutons « process.env.secret. » Ce « Secret » est une chaîne de texte de notre choix, qui est utilisée pour signer le cookie d'ID de session. Ensuite, nous pouvons ajouter la chaîne à l'intérieur de notre fichier « .env ». Ouvre ça. Puis en bas, on peut ajouter notre « Secret ». Cela peut être égal à n'importe quelle chaîne de texte de notre choix. Je vais juste ajouter « Travel Session » ajouter un point d'exclamation. Donnez à ce fichier un « Enregistrer » fermez-le. Ensuite, nous devons définir « Enregistrer sur initialisé » pour être faux. Ajouter une virgule après tous les secrets. Ceci est « Enregistrer sur initialisé » et définissez cette valeur sur « False ». Cette valeur signifie qu'une nouvelle session n'est pas enregistrée dans la base de données à moins que cette session ne soit réellement modifiée. Ceci est utile pour un visiteur qui navigue simplement sur nos sites et n'a pas réellement besoin de leurs détails enregistrés dans une session. Cela se traduira par des sauvegardes beaucoup moins inutiles dans notre base de données. Ensuite, ajoutez une virgule et ajoutez l'option de resave pour être false. En définissant cette valeur sur false, notre session n'est pas enregistrée à moins qu'elle ne soit réellement modifiée. Enfin, nous devons utiliser notre magasin MongoDB en utilisant cette option de magasin avec nos constantes MongoDB, que nous avons définies juste au-dessus. C' est un juste ici. Après la réécriture, ajoutez notre option de magasin et nous allons définir ceci à une valeur de nouveau MongoStore, ajoutez les crochets juste après. Ce nouveau magasin prend en option la connexion mongoose, ajoutez les accolades, mongoose.connection. Vérifiez que tout ça a l'air bien. Nous avons mangouste nous avons notre session, notre MongoStore. Nous pouvons maintenant mettre en place un test rapide pour voir cela en action. Vous n'avez pas besoin de suivre cela si vous ne voulez pas. Ce sera juste une démo rapide. En fait, avant de le faire, cela doit être MongooseConnection, le deux-points et là nous allons, c'est égal à mongoose.connection, nous avons également utilisé plus tôt lors de la configuration de notre MongoDB, qui est juste ici. Maintenant, nous allons de l'avant et configurons le test dans le fichier index.js. Alors sauvegardez notre app.js. Ouvrez le index.js, puis faisons défiler vers le haut. Les filtres de la page d'accueil se trouvent sur l'itinéraire de la page d'accueil. Donc je vais juste commenter cette ligne. Nous allons créer une nouvelle fonction de test pour tester si la session fonctionne en se connectant le nombre de visites à la page d'accueil dans la session. Commençons par recréer notre route. Donc router.obtenez la barre oblique avant du routeur maison. Ajoutons une fonction, en passant la requête et aussi la réponse. À l'intérieur ici, la première chose que je vais faire est de créer une instruction if. Si request.session.page_views. Ce module de session express rend nos données de session disponibles dans les objets req.session. Nous pouvons également utiliser les pages vues pour voir combien de fois la page est visitée. Maintenant, nous pouvons incrémenter ce total de pages vues sur chaque demande. Donc, ajoutez dans le req.session.page_views++. Cela augmentera le nombre de pages vues chaque fois qu'il y a une demande sur notre page d'accueil. Ensuite, nous allons afficher le nombre de visites à l'écran en utilisant res.send. Nous allons envoyer en utilisant les backticks, quelques textes de nombre de visites de page, un deux-points. Ensuite, nous pouvons ajouter nos données dynamiques, qui est le req.session.page_views. Bien sûr, nous avons besoin d'une autre déclaration aussi, donc autrement. Ceci si la section gérera s'il y a une vue de page stockée, c'est-à-dire si l'utilisateur a déjà visité. La session else gérera si l'utilisateur visite pour la première fois. Si c'est le cas, nous voulons que le req.session.page_views soit égal à un, puis nous pouvons faire un res.send avec le texte de la première visite. Maintenant, si nous allons au navigateur lors de notre première visite, nous devrions voir ce texte que nous avons mis ici. Ensuite, pour chaque actualisation supplémentaire sur la page d'accueil, nous devrions ensuite incrémenter le nombre de pages vues d' un à chaque fois, puis l'afficher à l'écran. Donnons ça un coup de pouce. Localhost : 3000, il recharger. En fait, nous devons démarrer le serveur de développement. Nous avons une erreur, alors regardons ce que c'est. Passez à notre app.js. On a juste une erreur d'orthographe. Sauvegardez ceci et maintenant repassez au vert. Nous chargeons la page d'accueil et nous avons le texte de la première visite. Maintenant, si nous cliquons sur l'actualisation, cela devrait maintenant incrémenter le nombre de visites de page sur chaque clic. Donc trois visites, 4, 5, 6, 7. Maintenant à mLab pour la base de données. Rafraîchissons. Bien. Maintenant, nous allons voir aux côtés de nos hôtels et utilisateurs, maintenant nous voyons une collection de sessions a également été créée avec un seul document. Si nous cliquons dessus, nous verrons maintenant les détails de la session stockée ici. La session a un identifiant unique en haut, puis quelques informations sur le cookie lui-même, telles que l'âge maximum, dates d'expiration que nous voulons définir, ainsi que le nombre de visites de page, qui nous avons juste regardé à l'intérieur du navigateur de sept. Toutes ces options peuvent être définies bios si nous voulons le faire comme une option. Quand nous allons de l'avant et mettre en place la session. La documentation contient quelques exemples de la façon de procéder si vous souhaitez apporter des modifications. Maintenant, nous savons que notre session fonctionne, nous pouvons maintenant supprimer le code de pages vues et rétablir la page d'accueil d'origine. Au-dessus du index.js, ce code ici peut être supprimé ou commenté. Ensuite, le router.get, qui était la page d'accueil d'origine, peut alors être non commenté. Sauvegardez ceci, rechargez le navigateur sur la page d'accueil et tout devrait maintenant revenir à la normale. Mais cette fois, nous utilisons des sessions. 56. Fournir des commentaires aux utilisateurs avec des messages flash: Plus tôt, lorsque nous nous connections et nous déconnections, nous devions compter sur une redirection de page pour nous faire savoir si c'était une connexion réussie ou non. Cette vidéo va améliorer nos nœuds en ajoutant des messages flash à l'utilisateur, qui vont ensuite apparaître et l'utilisateur peut également cliquer sur un petit X dans le coin pour les supprimer une fois qu'ils ont été lus. Nous avons attendu jusqu'à maintenant pour ajouter des messages flash pour une bonne raison. C' est parce que le message flash est stocké dans la session, donc nous devions le configurer en premier. Je vais utiliser un paquet de nœuds appelé Connect Flash pour fournir ces messages. Installons ceci maintenant. Ceci est la page GitHub, si vous voulez en savoir plus. Mais pour l'instant, je vais passer à Visual Studio Code, fermer le serveur, puis exécuter MPM. Je connecte flash et tire ce paquet de MPM. Une fois cela installé, nous pouvons maintenant aller à notre fichier app.js et ensuite exiger ce paquet en haut. Allons en dessous de nos séances. C' est un commentaire ? Ceci est pour les messages volumineux. Nous allons aller de l'avant et créer une constante appelée flash et cela va nécessiter le module flash, donc ceci a été connecter flash tiret avec un point-virgule et ensuite nous pouvons ajouter le flash comme middleware à utiliser dans notre application. Défilons un peu plus loin et nous pouvons ajouter ceci juste après nos lignes de passeport. Au commentaire, cela va au middleware, donc nous le faisons avec app.use, qui prendra dans le paquet flash, que nous avons juste besoin. Ensuite, nous pouvons également ajouter cette fonctionnalité de chasse à notre propre middleware ci-dessous. Donc, revenons à l'endroit où nous avons créé notre propre middleware, qui est juste ici, puis après ce req.path, nous pouvons également ajouter un nouveau local. Donc res.locals, allons à mon flash local et définissons cela égal au flash req.dot et sortons à la fin. Cela rend la fonctionnalité flash disponible en tant que variable à l'intérieur de tous nos modèles de tracé. Avoir ceci comme une variable, est utile pour le rendu conditionnel. S' il y a des messages à afficher, nous pouvons configurer flash pour n'importe laquelle de nos fonctions. Mais pour commencer, je vais aller aux contrôleurs utilisateur, poste de connexion, alors enregistrez ce fichier, puis allez au contrôleur utilisateur et nous devons trouver le poste de connexion, qui est juste ici. Après le SuccessRedirect, nous pouvons également ajouter un SuccessFlash, puis une chaîne que vous voulez afficher à l'utilisateur de, vous êtes maintenant connecté, donc maintenant va voir cette chaîne de texte est apparu à l'écran, plutôt que d'avoir une redirection pour nous montrer que nous sommes maintenant connectés. Passeport fonctionne avec connect flash par défaut, donc c'est assez simple à ajouter. Il y a aussi un message flash d'échec deux que nous pouvons ajouter pour cette condition de défaillance en bas. Séparé par une virgule et ajouter FailureFash, définissez ceci sur une chaîne, donc la connexion échoue et dira, « s'il vous plaît réessayer ». Maintenant, nous avons besoin d'un moyen d'afficher ces messages à l'utilisateur. Un endroit pratique pour le faire serait dans le fichier layout.pug. Ce fichier contient notre en-tête qui se trouve sur chaque page des projets. Allez à la mise en page .pug. La première chose que je vais faire est de définir deux constantes, les messages flash sont un objet contenant à la fois des clés et des valeurs. Allons pour notre image de plage et nous pouvons ajouter ceci juste au-dessus de cela, donc ce qui est juste ici. Rappelez-vous que JavaScript doit avoir le trait d'union. Donc les valeurs -const vont être égales à objects.values et ensuite nous allons pars dans le flash, donc ici nous analysons dans les messages flash, qui est un objet et nous allons aller de l'avant et utiliser la méthode des valeurs de points, qui renvoie un tableau des valeurs de propriété de l'objet. Rappelez-vous, les objets sont constitués de paires de valeurs clés, nous avons maintenant les valeurs ici, donc je vais dupliquer cette ligne et définir ceci pour être les clés. Changer la constante pour être des clés et c'est là que nous utilisons la méthode des touches de point. Encore une fois, l'analyse dans les messages flash, les clés et le type de message que nous voulons, et je vais créer trois types de message. Le premier est le succès, et ce sera pour des choses telles que les connexions réussies, également un type d'erreur pour les connexions échouées et les erreurs générales. Ensuite, le troisième et dernier type est pour info. Ce sera pour des informations générales telles que « Vous êtes maintenant déconnecté », puis si dans ces lignes, ce qui n'est pas un message général de succès ou d'erreur, nous allons examiner comment définir manuellement ce type de message bientôt lorsque nous ajoutons plus de messages flash dans le contrôleur. Aussi les passeports ajoute ces deux pour le succès et l'échec d'un login, donc ces trois types sont ces clés consommateur créé ici. Maintenant, sur les valeurs. Les valeurs sont essentiellement l'anneau de texte, comme vous « Vous êtes maintenant connecté » ou « Connexion a échoué, veuillez réessayer ». Nous voulons seulement montrer ces messages s'il y en a à montrer, donc nous pouvons ajouter un rendu conditionnel à l'intérieur de notre layout.pug, sous nos deux constantes ajouteront une instruction if. Si keys.length est supérieur à zéro, alors sous un div, qui sera un conteneur pour le message, ce div aura deux classes. La première est une classe de message générale pour le style du message, puis une deuxième classe de soulignement du message, puis le nom de la clé. Le premier type, donc la classe est égale à combien de backticks, puisque cela va être des données dynamiques, donc le premier pour le style est message, puis le second pour le soulignement du message et ensuite nous pouvons ajouter nos données dynamiques de clés. Cela va générer un nom de classe d'informations de message, de succès de message, et aussi d'erreur de message, et nous pouvons ensuite utiliser ces styles libres dans le CSS plus tard pour fournir quelques couleurs différentes pour chaque type de message. Nous avons les messages stockés dans les constantes de cette valeur et nous allons juste ajouter un S à la fin en fait, donc des valeurs. Je vais les mettre dans un des éléments de travée. Juste en dessous de notre intensité div un niveau, nous pouvons créer une étendue qui est égale à nos constantes de valeurs. Ensuite, un deuxième élément de span avec la classe de trait de soulignement proche btn. Cela va fournir une petite croix sur laquelle l'utilisateur peut cliquer pour supprimer ensuite le message flash, sorte que nous pouvons trouver un trait d'union X juste comme ça ou nous pouvons utiliser l'entité HTML de l'esperluette, puis fois avec le point-virgule à la fin, donc à l'intérieur, nous voulons exécuter un événement onclick. Une fois que l'élément span est cliqué, nous voulons exécuter ceci sur JavaScript qui va supprimer toute cette section juste ici. Nous pouvons le faire en sélectionnant le nœud parent. Les nœuds parents étant cette div environnante juste ici, puis appelez la méthode remove. Nous pouvons ajouter la méthode onclick et définir ceci à this.parentNode, qui est encore cette div juste ici et ensuite appel.remove. Il s'agit donc d'une police affichant le message dans notre section d'en-tête. Alors maintenant, passons au navigateur et essayons ceci. Donc, sur votre page, et nous pourrions avoir besoin de redémarrer le serveur. Donc npm exécutez devstart. Une fois qu'il est opérationnel, rechargez le navigateur, puis nous pouvons essayer de vous connecter. Cliquez donc sur Login. En bas, nous pouvons ajouter nos informations de connexion. Donc, au début, nous voulons ajouter une connexion infructueuse, en ajoutant un mot de passe incorrect. Nous recevons maintenant le message de, la connexion a échoué, veuillez réessayer. Donc, nous pouvons maintenant cliquer sur cela, sorte qu'il supprime le message, et essayons un de plus. Cette fois, nous répondrons aux détails corrects, et nous ne voyons pas de message de réussite. Voyons donc ce qui se passe et utilisons un contrôleur. On a juste une erreur d'orthographe là-bas, donc le succès. Rechargez ceci. Essayons de vous déconnecter, puis de vous reconnecter. Nous allons le faire avec succès cette fois, et maintenant nous recevons le message de, vous êtes maintenant connecté. Maintenant, nous pouvons à nouveau cliquer dessus pour supprimer le message. Avec ce travail, nous pouvons maintenant ajouter plus de messages où nous en avons besoin pour les afficher dans le fichier de contrôleur utilisateur dot js. Nous pouvons également ajouter un message pour la déconnexion. Donc, défiler un peu plus loin juste après la demande ou la déconnexion. On peut accéder à req.flush, et on veut passer deux choses ici. Le premier est le type de message. Rappelez-vous avant que nous disions que nous aurions trois types de messages différents : un pour les erreurs, un pour le succès et un pour les informations générales. Eh bien, ce sera un message de type info avec une chaîne de, vous êtes maintenant déconnecté. Donc, à cette fin, avec le point-virgule à la fin, cela nous donnera un test. Assurez-vous que vous êtes toujours connecté, puis cliquez sur déconnexion, et nous avons maintenant notre message en haut de la page. Maintenant, au contrôleur de l'hôtel, cela a également besoin de messages lorsque nous faisons des choses telles que l'ajout d'hôtels et la mise à jour. Alors cliquez sur le contrôleur de l'hôtel, et la première à laquelle je vais aller est de pousser To Cloudinary, qui est l'un des premiers qui ont été ajoutés. Donc, il juste ici, jusqu'à la section catch, ajoutons request.flash. Donc, cela va être un message d'erreur. Donc, le type d'erreur, puis nous pouvons ajouter un message à l'utilisateur lui disant qu'il y avait un problème lors du téléchargement de l'image. Envoyez un texte de, désolé, un problème s'est produit lors du téléchargement de votre image, veuillez réessayer. Une fois que vous avez fait cela, nous pouvons maintenant continuer à créer un poste d'hôtel. Alors faites défiler vers le bas pour créer un poste d'hôtel juste en dessous, et c'est juste ici. Nous allons ajouter cela dans la trisection car ce sera un message de réussite pour dire que l'hôtel a été créé avec succès. Juste après l'attente hotel.save, request.flash, de sorte que le type de message a été le succès séparé par une virgule. Nous devons ajouter cela à l'intérieur des ticks arrière parce que nous allons également afficher le nom de l'hôtel. Comme nos littéraux de modèle, si hôtel, l'hôtel soulignent nom que nous avons accès à en raison de cette variable d'hôtel, puis le texte de créé avec succès. Ok, bien. Le suivant est dans la publication de suppression d'édition. Donc, c'est juste en dessous, alors faites défiler vers le bas. Ce sera un message d'information pour dire qu'aucune correspondance n'a été trouvée. C' est la section d'administration où nous allons modifier ou supprimer un hôtel. Je me souviens d'abord que nous devons passer un nom d'hôtel ou un ID d'hôtel pour ensuite rechercher la base de données. Alors faisons défiler vers le bas. Si les données de l'hôtel sont supérieures à zéro, c'est la section « succès », mais une fois que j'ai ajouté cela dans la section « else », au cas où aucun hôtel ne pourrait être trouvé. Request.flash, ceci est un message d'information d'aucune correspondance ont été trouvés, et avec juste un couple de plus à notre jour maintenant, donc nous allons mettre à jour l'hôtel post, mais bien sûr quand nous mettons à jour l'hôtel. Alors allons dans la section try, et juste avant la redirection, nous pouvons ajouter request.flash. Ce sera un message de réussite, et en utilisant les coches arrière, nous pouvons fournir un message. Encore une fois en utilisant nos données dynamiques pour transmettre le nom de l'hôtel, donc hotel.hotel_name, mis à jour avec succès avec le point-virgule à la fin. Ensuite, le dernier que je vais ajouter est pour supprimer le poste d'hôtel. Ceci est pour une suppression réussie de notre hôtel, avant le flash de demande de redirection. Ce sera un message de type info avec des données dynamiques. Alors ouvrez les ticks arrière, donc l'ID de l'hôtel, nous pouvons ensuite passer dans l'ID de l'hôtel, qui est cette variable juste du haut ici, que nous obtenons de la request.params, a été supprimé. Maintenant, donnez à ce fichier une sauvegarde, puis à l'administrateur du navigateur. Nous devons maintenant aller à /admin au nouvel hôtel. Ajoutons un test pour flash, et à l'intérieur ici, dans nos projets, le dossier public, les images, et allons-y pour le logo pour l'instant cela n'a pas d'importance, commencez à écrire, confirmez. Super. Le test de flash a été créé avec succès. Tout cela semble fonctionner maintenant. C' est maintenant pour les messages flash, mais nous continuerons à les ajouter comme nécessaire pendant le reste de ce projet. 57. Rendu conditionnel des utilisateurs: Dans cette vidéo, nous allons apporter quelques améliorations à l'expérience utilisateur. Sera faire diverses choses telles que rendu conditionnel pour changer les liens nerfs en fonction des états connectés de l' utilisateur sera également afficher le nom d'utilisateur dans l'en-tête, et protéger les routes d'administration. Pour commencer, nous pouvons ajouter d'autres locaux à tous les middleware dans le fichier app.js, puis faire défiler vers le bas jusqu'à notre middleware client. Donc, qui est juste cette fonction juste ici. Je vais en ajouter un de plus comme ça. C' est pour l'utilisateur. Donc à l'intérieur, nous avons besoin d'un avantage commun ici. Donc, disons res.locals.user, va être égal à l'utilisateur point de requête et il devrait y avoir des point-virgules à la fin. Donc devrait rapidement changer cela. Ainsi, l'utilisateur est ajouté à l'objet de demande par passeport. Lorsqu' un utilisateur s'est connecté avec succès. Nous pouvons maintenant utiliser cette variable utilisateur à l'intérieur des modèles pour appliquer un rendu conditionnel. Actuellement, si nous passons à un menu, nous avons l'inscription, avoir une connexion et également déconnecter montrant en même temps. Nous ne voulons afficher les boutons d'inscription et de connexion que lorsque l'utilisateur ne s'est pas connecté. Alors à notre disposition, un PRG, puis allez à notre section nerveuse sur le haut ici. Nous allons ajouter un rendu conditionnel pour afficher uniquement si l'utilisateur est connecté. Donc, juste en dessous du logo sur la liste non ordonnée, en retrait dans un niveau, nous pouvons dire que si vous utilisez est faux, nous allons mettre en retrait dans cet élément de liste pour l'inscription, et aussi se connecter. Ces deux boutons ne s'afficheront que si l'utilisateur n'est pas connecté. Sinon affichera le bouton de déconnexion lorsque l'utilisateur est connecté. Donc, pour ce faire, nous pouvons également améliorer la section de déconnexion dans un seul niveau. Ensuite, nous pouvons ajouter la section else qui s'aligne avec la section if juste au-dessus. Aussi, puisque nous avons accès à cette utilisation de variable que vous venez de voir ici, nous pouvons également afficher dans le menu, le nom d'utilisateur. Nous avons juste à nous déconnecter, nous pouvons demander les parenthèses et ensuite utiliser le hachage deux sorties, des données dynamiques. Alors ouvrez les accolades. Maintenant, nous pouvons accéder au point de l'utilisateur prénom. Donc, il nous donne une sauvegarde et essayer de sons dans le navigateur. Alors rechargez. Actuellement, nous voulons voir le bouton d'inscription et la connexion. Essayons de vous connecter. Je vais voir ce qui se passe si nous ajoutons nos détails en bas. Il se connecte. Super, donc maintenant nous ne voyons que le bouton de déconnexion et aussi notre nom est maintenant affiché à côté de cela. Essayons de cliquer dessus et de se déconnecter. Nous recevons maintenant le message flash ici. Nous ne voyons désormais que les boutons d'inscription et de connexion. Maintenant sur la protection des routes d'administration contre les utilisations non autorisées. Pour ce faire, je vais créer un morceau de middleware à graver à travers où nous devons vérifier si l'utilisateur est un administrateur. Nous pouvons le faire dans l'utilisation de controller.js, et en bas juste souffler notre fonction de logo. Nous pouvons ajouter exports.admin. Cela va être une fonction prenant la requête, la réponse. Ensuite, à l'intérieur, nous allons effectuer deux vérifications. La première consiste à utiliser une méthode appelée est authentifiée. Donc, je vais dire si le point de requête est authentifié, alors il sera accolades juste après. Ensuite, la deuxième consiste à vérifier si l'utilisateur est un administrateur. Tôt lorsque nous avons créé le modèle utilisateur dans le users.js. Ouvrons ça. Nous avons ajouté les champs admin est, qui est un type booléen par défaut de false. Je vais également utiliser ceci dans l'instruction, if pour autoriser uniquement les utilisateurs libres qui est défini sur true. Donc, contrôleur de nouvelles, ainsi que de vérifier si l'utilisateur est authentifié. Nous pouvons également utiliser la double esperluette. Il est également vérifier si la condition de request.user.admin est définie sur true. Ce sera un middleware, c'est pass-through. Donc, nous devons aussi appeler le suivant. Donc, tout d'abord, ajoutez ensuite à l'intérieur ici, qui passera à la page d'administration. Ensuite, le mot-clé return après cela, ce mot-clé return sortira la fonction si c'est vrai. Si cette condition n'est pas remplie, nous pouvons simplement rediriger l'utilisateur vers la page d'accueil. Dehors si déclarations, nous pouvons demander les res.redirections. Ensuite, comme une chaîne juste avant barre oblique pour revenir à la page d'accueil. Maintenant, dans le fichier index.js, nous pouvons et ce middleware à nos routes d'administration. Donc index.js. Si nous trouvons notre section d'administration, ce sont des routes d'administration ici. Le premier que nous voulons protéger est simplement une barre oblique directe Admin. Donc, avant de les prendre à la page d'administration, va également courir à travers la fonction Admin de ces E, qui est également dans le contrôleur d'utilisation. Donc, utilisez le point de contrôleur est admin et séparez-les par une virgule. Ensuite, je vais aussi ajouter une deuxième route 2 qui va attraper toutes les routes commençant par un admin barre oblique, puis une barre oblique avant toute autre route juste après. Je vais te montrer ce que je veux dire avec ce routeur bizarre. Dot devient un tour de contrôle. Donc, pour un tel admin puis une barre oblique avant, nous allons utiliser l'étoile. Donc, cela va attraper toutes les routes qui commencent par l'admin slash, puis n'importe lequel des choses par la suite. Donc, nous allons courir à travers l'utilisation Controller.isAdmin avant qu'ils ne procèdent à l'une de ces routes supplémentaires. Maintenant au navigateur pour tester les dessins sur les amiraux. Donc, à la fois le navigateur et le rechargement. Nous pouvons voir par tous les éléments de menu que nous ne sommes pas actuellement connectés. Essayons d'acheminer/Admin. Nous avons ensuite redirigé vers la page d'accueil. Essayons donc de se connecter. Maintenant, nous nous connectons avec barre oblique ou /admin une fois de plus. Encore une fois, nous sommes redirigés vers la page d'accueil. Donc, pour ces deux cas, nous nous sommes dirigés ici, ce qui signifie que l'authentification a échoué. Comme vous l'avez peut-être déjà deviné, c'est parce que nous nous posions comme un utilisateur et est admin est défini pour être faux. Au McLab. Peut-être qu'il est bas dans le dos. Oui, il n'y a pas le nom d'utilisateur, le mot de passe et la connexion. Nous pouvons maintenant sélectionner notre utilisateur à partir de mLab, puis il définit admin pour être vrai. Cliquez sur notre base de données. Nous avons besoin de la collection de l'utilisateur. Cliquez sur l'icône Modifier. Donc, ici, nous pouvons voir est admin est défini sur false. Nous pouvons changer cela pour être vrai. Cliquez sur Enregistrer et revenir en arrière. Cette entrée dans la base de données n'est pas quelque chose que nous faire chaque fois que nous voulons créer un nouvel administrateur. Mais une fois que nous avons un ensemble d'administrateurs, comme nous le faisons maintenant, un bon défi pour vous serait d'aller de l'avant et de créer quelque chose à partir de l'écran d'administration, pour être en mesure de modifier le paramètre pour ajouter de nouveaux utilisateurs d'administration. Donc maintenant code à barres le projet alors que nous sommes encore connectés. Revenons aux routes d'administration avant/admin. Maintenant, isAdmin est défini sur true. Nous pouvons voir que nous ne sommes plus redirigés et nous resterons sur ces routes d'administration. Maintenant, si nous essayons de cliquer sur déconnecter, nous sommes redirigés vers la page d'accueil. Rappelez-vous que nous avons également ajouté cette capture toutes les routes avec l'étoile. Essayons quelques itinéraires différents ici. Donc admin, avant/ajoute. Nous sommes actuellement ramenés à la page d'accueil. Essayons de vous connecter, et testons ceci à nouveau. Connectez-vous en tant qu'administrateur. Maintenant, nous pouvons essayer avant/admin. Évidemment, cela ira à cela, ce qui est bon. Une fois de plus, nous essaierons de vous connecter. Maintenant, nous sommes redirigés vers la page d'accueil. 58. Le modèle de commande: Bienvenue dans cette toute nouvelle section. Cette section va permettre à l'utilisateur de placer des réservations et aussi la zone des comptes utilisateur aussi. Où l'utilisateur peut voir toute réservation qu'il a effectuée. Nous ajouterons également cela à la section Admin, afin que l'administrateur puisse voir toutes les réservations qui ont été effectuées pour tous les utilisateurs. Cette réservation ou toutes ces informations seront stockées dans une base de données en tant que collection. Par conséquent, nous devons créer un modèle de commande pour enregistrer nos données. Commencez par créer un nouveau fichier appelé order.js à l'intérieur du dossier models, donc modèles nouveau dossier order.js. Ensuite, nous pouvons aller de l'avant et créer notre modèle comme nous avons pour les utilisateurs et aussi pour l'hôtel. Fermons une barre latérale. Ce modèle aura trois choses. abord, l'identifiant de l'utilisateur, afin que nous sachions qui a passé la commande. Deuxièmement, l'hotel_id pour l'hôtel que je veux réserver et le troisième est les détails de la commande. Il s'agit d'un objet contenant les détails des dates de départ, nombre de vols et le nombre d'invités. Comme d'habitude, crée notre constante pour le paquet Mongoose, que nous devons exiger en haut du fichier, donc exiger mongoose, ok ? Ensuite, nous pouvons créer notre constante pour notre schéma de commande et satisfaisant nouveau mongoose.schema capital S, qui prend dans nos objets. Notre premier champ est l'utilisateur underscore_id. Cet identifiant utilisateur va avoir le type de chaîne. Il va aussi être un champ obligatoire, donc nous définissons requis pour être égal à vrai, séparé par une virgule. Notre deuxième champ sera pour l'hotel_id, que l'utilisateur veut aller de l'avant et réserver. Cela va avoir un type différent de ce que nous avons vu auparavant. Cela va être égal à Mongoose.schema.Types avec un T majuscule et le type va être l'ObjectSid. L' hotel_id va utiliser cet ObjectID comme type de données. Ceci est fourni par la mangouste et nous en aurons besoin pour une bonne raison plus loin dans cette section. Nous avons stocké dans l'hotel_id, qui est sur la réservation, mais nous devons également récupérer le reste des détails de l'hôtel à partir de la base de données. L' utilisation de cet ObjectID plutôt qu'une chaîne normale nous permettra comparer correctement cet identifiant à celui qui est stocké dans la base de données ultérieurement. Comprend ce champ doit également être nécessaire pour être vrai. Ensuite, notre troisième champ sera pour les détails de la commande, qui va contenir le type d' objets et ceci est également requis pour être égal à vrai point-virgule à la fin. Ensuite, nous pouvons exporter notre modèle avec notre module.exports familier, qui est égal à notre mongoose.model. Nous passons le nom de l'ordre comme la deuxième valeur que cela prend dans notre nom de variable de schéma d'ordre, qui est celui-ci, juste ici, donc à un point-virgule à la fin et donnez à ceci une sauvegarde. Ceci est suffisant pour notre schéma de commande, nous allons ensuite travailler en créant une page de confirmation de réservation et cela permettra à l'utilisateur d'examiner tous les détails avant de finalement passer une nouvelle commande. 59. Page de confirmation de la réservation: Pour le moment, nous pouvons aller à n'importe quel hôtel que vous voulez. Sélectionnez ceci, puis vers le bas, nous pouvons ajouter nos détails de voyage. Si vous souhaitez réserver cela, nous devons ajouter la durée, les dates de départ, le nombre d'invités, puis effectuer une recherche pour fournir tous les détails. Si nous cliquons sur la recherche reçue, ce résultat de recherche est maintenant personnalisé avec tous les détails qui sont centrés. C' est bon, mais maintenant nous devons ajouter quelques étapes supplémentaires pour permettre à l'utilisateur de réserver cet hôtel. La première étape que je veux ajouter est un bouton Continuer à cette page, qui amènera l'utilisateur à une page de confirmation de réservation où il pourra examiner ses détails finaux avant de passer la commande. Cette vue sur l'hôtel se trouve à l'intérieur des mixins de l'hôtel. Passons à ce fichier dans l'éditeur de texte. Barre latérale, mixins, puis soulignent l'hôtel. En bas, en bas. Faites défiler vers le bas ce fichier, nous pouvons rendre conditionnellement un bouton pour afficher uniquement sur les routes de résultats. Ce sont les routes qui sont actuellement en cours et puis nous allons ajouter un bouton Continuer juste sous le prix total. Ce coût total est ici. Faisons de l'espace et nous pouvons dire si l'URL est égale à /results. Si c'est le cas, nous pouvons fournir un lien avec la classe de bouton, qui va avoir un href égal à et quand il est sur les tiques de débarquement. Ceci est /confirmation, puis notre section Dynamique, qui va être notre requête, puis le texte tout de continuer pour tous les boutons. Pour ce lien, nous allons le lier à une URL de /confirmation, puis transférer une chaîne de requête, qui va la construire à partir des informations nécessaires à cette réservation. Cette chaîne de requête sera une série de paires de valeurs de nom. C' est la même méthode que nous avons utilisée plus tôt dans le cours lorsque nous utilisons l'API iTunes. Créons cette chaîne de requête maintenant ci-dessus. Juste au-dessus de nos instructions if, nous pouvons créer une constante appelée requête, elle correspond ici et cela va être égal à une chaîne dynamique, alors ajoutez les ticks arrière. Comme nous l'avons mentionné précédemment, il s'agit d'une série de paires de valeurs de nom. Le premier sera la carte d'identité de l'hôtel. Définissons l'ID pour être égal à hotel._ id. Rappelez-vous que toutes ces informations sont passées, passées le long de l'URL sous forme de chaîne de requête, puis nous pouvons saisir cette information et l'utiliser dans notre contrôleur. Ensuite, nous avons besoin de l'esperluette pour ajouter une paire de valeur de deuxième nom. Le second sera pour la durée. L' esperluette, donc la durée et cela va être égal à la requête de recherche que nous avons utilisée avant juste au-dessus pour saisir notre durée, la date de départ et aussi le nombre d'invités. searchQuery.duration, après la durée, ce sera les dates de départ et rappelez-vous que ce n'est qu'une longue chaîne et celui-ci va être égal à. Cela va à nouveau être le SearchQuery et tout comme nous l'avons utilisé auparavant, c'est SearchQuery.DateOfDeparture. Après cela, nous pouvons ajouter une nouvelle esperluette, qui sera pour le nombre d'invités. Cela va être égal à searchQuery.numberOfInvités, ajoutez un point-virgule à la fin et toutes ces informations vont maintenant former notre URL. Essayons cela dans le navigateur. Enregistrez ce fichier sur notre navigateur et si vous continuez à défiler sur la page Résultats comme je le suis. Il suffit de recharger le navigateur, de reconfirmer avant la soumission. Je vois maintenant un bouton Continuer en bas. Cliquez sur ce bouton. Nous sommes emmenés sur une route que nous n'avons pas encore gérée. Nous avons un suivi pleine page comme prévu. Mais si nous recherchons l'URL, nous pouvons voir la route que nous avons créée de /confirmation, puis nos paires série ou nom-valeur. Nous avons l'ID égal à l'ID de l'hôtel. Nous avons la durée de sept nuits, les dates, et aussi trouver le nombre d'invités égal à quatre. C' est toutes les informations dont nous avons besoin pour construire une commande. Comme tout le monde le sait, il gère cette route dans le fichier index.jsfile. Passons aux routes index.js et nous pouvons capturer cette chaîne de requête à l'intérieur d'une variable appelée données. Dans nos routes utilisateur sur la déconnexion, nous pouvons ajouter router.get/confirmation/ et nous utilisons un deux-points, puisque ces données sont dynamiques. Cela va être un contrôleur d'utilisateur, je vais appeler la fonction Confirmation de réservation. Ensuite, ou nous utilisons un contrôleur. Nous allons créer cette confirmation de réservation et nous allons descendre en bas juste après la déconnexion. Donc exporte, donc c'est la confirmation de réservation. Ce sera une fonction de synchronisation. Puisque nous allons travailler avec la base de données, passer la réponse de la requête crée un corps de fonction, la transaction, le bloc catch, en passant l'erreur et aussi passer cette erreur à suivante. Puisque nous utilisons l'erreur suivante, nous le transmettons également après la demande et la réponse. La première chose que je vais faire est de capturer la chaîne de requête à partir de l'URL. Rappelez-vous, nous pouvons y accéder depuis le request.params, suivi du nom que nous lui avons donné dans le routeur. Dans la section de formation, nous allons créer une constante appelée données, donc request.params.data. Avant d'aller plus loin, nous pouvons vérifier quelles données nous avons avec un res.json. Donc res.json, les données de notre chaîne de requête. Si nous enregistrons ceci et actualisons maintenant, nous avons maintenant notre carte d'identité, la durée, la date de départ et le nombre d'invités. Cela semble être les données de ceux, mais il n'est pas affiché dans les formats json. C' est juste une corde simple. C' est parce que nous devons d'abord passer la chaîne de requête. Node nous fournit un module appelé chaîne de requête et ceci est un module de base. Nous n'avons pas besoin d'installer quelque chose de plus, tout ce que nous faisons est de l'exiger dans le fichier dans lequel nous voulons l'utiliser. Revenons à surutiliser le contrôleur, jusqu'au haut du fichier et il crée une nouvelle constante appelée chaîne de requête. Ensuite, exiger le module qui est appelé chaîne de requête. Maintenant, nous pouvons passer les constantes de données que nous avons créées ci-dessous et stocker les résultats dans une nouvelle constante, que je vais appeler les données de recherche. Retournez à notre confirmation de réservation. On peut aller juste en dessous des données, créer de nouvelles constantes. Je vais chercher des données, qui vont être égales à notre chaîne de requête que nous venons d'importer. Utilisez la méthode .parse, en analysant les données ci-dessus. Maintenant, nous pouvons ajouter les données de recherche dans le res.json et voir ce qui se passe. Donnez ceci une sauvegarde, puis rechargez le navigateur. Super. Nous avons maintenant les données dans le format avec lequel nous pouvons travailler. Actuellement, nous avons seulement l'identifiant de l'hôtel stocké dans res.json. Nous pouvons maintenant rechercher dans la base de données les détails complets de l'hôtel à l'aide de cet identifiant. Revenons à notre confirmation de réservation. Ci-dessous, je vais chercher des données, nous pouvons écrire une constante appelée hôtel. Cela va être égal à attendre notre modèle d'hôtel dot find et l'information que nous voulons trouver est l'hôtel basé sur l'identifiant de soulignement. L'identifiant que vous voulez rechercher dans la base de données sera stocké dans les données de recherche et ensuite nous pouvons accéder au .id. Recherche data.id et fait utiliser un H à l'intérieur ici, puisque c'est notre modèle. Rappelez-vous lors de la création de notre schéma de commande, dans la dernière vidéo, j'ai dit que l'identifiant de l'hôtel avait besoin d'avoir le type de données de l'identifiant de l'objet. C'est pourquoi nous l'avons fait dans la dernière vidéo. Cet identifiant va maintenant se comparer correctement à un identifiant d'hôtel dans la base de données car il est, s'il s'agissait d'une chaîne, cela ne fonctionnerait pas. Une des choses aussi, si nous allons sur le navigateur, nous voyons que l'hôtel n'est pas défini. C' est parce que nous avons besoin d'importer ce fichier d'hôtel aussi. Allons au sommet. Nous pouvons le dire const de l'hôtel et ensuite nous pouvons exiger le modèle de l'hôtel, donc.. /models dossier et /hotel. Maintenant, nous pouvons descendre et remplacer notre res.json par un res.render. Retour à la conformation de réservation. Nous pouvons ajouter rest.render. Nous allons créer un modèle de confirmation, alors ajoutons cette information maintenant. Ensuite, nos objets d'options passeront dans le titre de confirmer votre réservation. Nous devons également transmettre les données à ce modèle. Nous voulons lui envoyer les constantes de l'hôtel, qui vont contenir toutes les informations de l'hôtel qui avait été commandé. Aussi ces données de recherche juste ici, qui contiendra les informations telles que la date de départ. Hôtel et aussi ces données. Maintenant, nous pouvons aller dans nos vues et créer ces modèles de confirmation comme un fichier carlin. Ouvrez le dossier Vues, puis créez la confirmation.pug, fermez cette option. Ce sera un modèle assez simple qui montrera essentiellement le mixin de l'hôtel avec les données de l'hôtel et les données de recherche, que nous allons passer au mixin. Ce que vous allez dans la mise en page étend. Nous allons inclure à partir du dossier mixin, le contenu du bloc hôtel soulignement. Le titre de niveau 2, qui sera le titre. Nous pouvons ensuite créer une boucle avec chaque œil dans l'Hôtel. Ensuite, comme notre hôtel mixin en bas, qui va prendre dans I, qui est chaque hôtel individuel et aussi les données de recherche qui passeront à ce modèle. N' oubliez pas que cela contient des informations telles que le nombre d'invités et la date de départ. Tout cela sera nécessaire pour la page de confirmation. Si vous nous laissez modifier l'orthographe de la conformation et ainsi renommer, assurez-vous que cela est correct et enregistrez ce fichier. Plus maintenant dans un mixin hôtel, donc soulignent hotel.pug. Cet hôtel reçoit déjà les données à partir du moment où nous avons créé les modèles de résultats. Nous avons déjà l'hôtel, que nous passons à cette variable comme i et la requête de recherche. La plupart des choses sont déjà mises en place pour nous. Si nous sauvegardons ce fichier et puis rechargeons le navigateur, nous voyons que le modèle est affiché, nous avons tous les détails de l'hôtel. En bas, nous avons l'évaluation des étoiles, nous avons le pays, le coût par nuit et le nom de l'hôtel. Mais nous ne voyons aucun des détails de recherche tels que le nombre de nuits. Voyons ça dans le mixin. Si nous faisons défiler vers le bas et que nous regardons la section des résultats, ce mixin a tous les détails SearchQuery dont nous avons besoin rendus conditionnellement. Celles-ci ne sont affichées que si les itinéraires commencent par /results. Nous pouvons également ajouter à la fin les routes de confirmation lui. Si l'URL est égale aux résultats ou si c'est la page que nous sommes actuellement, ce qui est la confirmation, puis nos données dynamiques. Nous pouvons vérifier si l'URL.StartsWith. Nous voulons que celui-ci commence par un /confirmation/. Ensuite, rechargez sur la même page et maintenant si nous faisons défiler vers le bas, nous voyons ces détails de recherche apparaissent également en bas. Nous avons presque terminé maintenant pour ces modèles. Mais il y a encore une petite chose à ajouter. Ceci est censé être la page de confirmation de réservation pour confirmer que les informations de l'utilisateur sont toutes correctes avant de passer la commande. Par conséquent, nous avons besoin d'un bouton pour permettre à l'utilisateur de remettre la commande dans le mixin de l'hôtel. Nous n'avons qu'un bouton Continuer en bas pour la page des résultats. Nous pouvons également en ajouter un pour la deuxième page de confirmation. Sinon, cela devient une section else if, parce que nous allons avoir une dernière section else en bas. Nous allons jeter un oeil à ça dans une vidéo plus tard. C' est URL.StartsWith, nous voulons les tours de /confirmation/. Nous allons alors rendre un bouton comme ci-dessus donc .button (href=' ' ) et je vais juste laisser ceci comme une chaîne vide pour l'instant et nous allons traiter cela plus tard. Passez votre commande et nous continuerons cette section href dans la prochaine vidéo où nous demandons le code pour passer les commandes. Mais maintenant, si nous sauvegardons ce fichier et puis rechargeons sur les itinéraires de confirmation, nous voyons maintenant un bouton en bas pour passer la commande. Bien, les choses vont bien maintenant. Je vous verrai dans la prochaine vidéo où nous passerons à placer les commandes dans la base de données. 60. Passer des commandes: L' étape suivante, une fois que le client a examiné les détails sur cette page de confirmation, est de pouvoir réellement passer commande. Dans le mélange de l'hôtel, nous avons ajouté l'itinéraire dont nous avons besoin pour passer la commande. Nous allons à l'hôtel, puis en bas, nous avons ajouté un itinéraire vide pour le href. Je vais maintenant ajouter ceci en tant que barre oblique, puis l'ordre placé, puis barre oblique avant, nous pouvons ajouter notre requête à l'intérieur ici. Ouvrez les accolades et analysez également la requête, qui est toutes les données dont nous avons besoin pour l'ordre. Mais juste une chose rapide à corriger en premier, nous voulons seulement que ce bouton indique si l'utilisateur est connecté. Nous pouvons utiliser une forme de rendu conditionnel. Après l'autre si nous pouvons également ajouter une section if. Si l'utilisateur est connecté, nous voulons alors afficher ce bouton, donc indenter cela dans un niveau, sinon nous pouvons rediriger l'utilisateur vers l'écran de connexion. Ajoutons la dernière section else en bas, sinon je vais copier ce bouton, puis le coller, et cela peut rediriger l'utilisateur vers la connexion slash, où ils peuvent aller de l'avant et se connecter pour passer une commande. Veuillez vous connecter à la commande. Il y a place à l'amélioration ici si vous vouliez un peu de projets secondaires. Lors de la redirection vers ce formulaire de connexion, nous ne conservons pas actuellement tous les détails de recherche. L' utilisateur devra se connecter, puis effectuer à nouveau la recherche d'hôtel. Mais je vais vous laisser ça comme un défi si vous voulez aller faire ça. Maintenant, sur le index.js. Nous pouvons gérer cette commande passée route. Enregistrez ce fichier, index.js. Ensuite, nous pouvons ajouter un router.get, tourner cela autour pour simplement le créer, qui a été placé barre oblique avant, puis nous allons capturer les données une fois de plus à partir de la chaîne de requête. UserController.OrderPlaced et le point-virgule à la fin. Ensuite, nous créons l'ordre placé dans l'UserController. Juste après la confirmation de réservation, nous allons configurer ceci, Exports.orderPlacé. Cela va être asynchrone, requête, réponse, et aussi suivant. Je vais essayer de bloquer pour commencer. Nous pouvons ensuite attraper toutes les erreurs et ensuite analyser ces erreurs à la suivante. Tout comme nous l'avons fait ci-dessus pour la confirmation de réservation, la première chose que nous devons faire est de créer une constante et de récupérer les données du req.params. En fait, nous pouvons simplement copier cette ligne, coller dans le bloc try, et ensuite nous devons également utiliser le module de chaîne de requête, que nous avons encore utilisé avant d'analyser les données dans JSON. Donc, configurons cela comme une constante, ParsedData, cela va être égal à notre module de chaîne de requête que nous avons importé. Eh bien, pour utiliser la méthode analysée, analyser les données d'en haut. Maintenant, il est temps d'utiliser notre modèle de commande que nous avons créé au début de cette section pour construire un nouvel ordre pour pousser vers la base de données. Soufflez nos ParsedData, puis créez notre constante d'ordre. Je suis réglé sur un nouvel ordre, qui est O. Avant de pouvoir utiliser ce modèle de commande O, nous devons l'exiger en haut de ce fichier. Cela doit être O, puis en haut juste trucs que notre hôtel et créer une nouvelle constante appelée ordre. Exiger du dossier models, qui est.. slash models, puis ordre barre oblique avant. Cet ordre que nous construisons doit être la même structure que le modèle de commande que nous avons créé au début de la section. Si nous passons à ce order.js, cela a trois champs différents, l'identifiant de l'utilisateur, l'identifiant de l'hôtel, et aussi les détails de la commande. abord, ajoutons l'identifiant utilisateur dans notre commande juste ici, donc user_id va être égal à un req.user. _id. Ensuite, l'identifiant de l'hôtel, hotel_id, cela va être égal au parsedData.id. Ensuite, enfin, les détails de l'ordre, qui a le type d'objets, donc order_details, alors nous pourrions configurer ceci comme un objet, comme nous l'avons indiqué dans les détails de la commande. Ces détails de commande contiendront toutes nos informations de notre chaîne de requête, qui est stockée à l'intérieur des données analysées. Le premier est la durée, qui est égale à analysédData.Duration. Le second est la date de départ. Encore une fois, cela est égal aux données analysées, et nous pouvons accéder à cela avec.DateOfDeparture. Le troisième et dernier est le nombre d'invités, qui sera égal à analysédData.NumberOfInvités. Ce sont toutes les informations qui constitueront notre commande, nous avons les détails de l'hôtel et aussi les détails de la commande avec l'utilisateur. Maintenant, tout ce que nous devons faire est d'appeler save sur cette commande, sorte que nous pouvons attendre l'order.save, puis après la sauvegarde, nous pouvons également ajouter un message flash pour informer l'utilisateur que la commande a été passée, donc request.flash. Ce type de message sera Info et une chaîne de texte, donc ce sera, « Merci. Votre commande a été passée. » Ensuite, la dernière chose à faire est d'ajouter une reg.redirection, qui redirige l'utilisateur vers son compte, donc reg.rediriger vers une route de mon compte. Cette route n'a pas encore été créée, mais nous y arriverons très bientôt. Plus dans le navigateur, et puis nous pouvons aller de l'avant et tester cela. Enregistrez ce fichier, sur le navigateur. Seule page de confirmation pour le moment avec le bouton de passer votre commande. Maintenant, si nous rechargeons, nous voyons maintenant que le bouton a été changé en, s' il vous plaît connectez-vous à la commande. Cliquez sur ceci, puis nous allons aller de l'avant et nous nous connecterons. Une fois connecté, nous pouvons maintenant aller à l'hôtel. Allons vers le bas. On peut faire une recherche. Allons au nombre d'invités. Cliquez sur « Rechercher ». Nous sommes maintenant amenés à la page des résultats qui contient nos détails, nous continuerons jusqu'à la page de confirmation, qui contient à nouveau tous les détails de la commande. Cliquez ensuite sur passer votre commande. Nous sommes maintenant pris sur mon compte et nous recevons également le message flash de votre commande a été passée. Si nous faisons défiler vers le bas, nous obtenons également un suivi pour le message. Mais il n'y a rien à craindre pour l'instant. Nous allons aller de l'avant et nous nous occuperons de cette route bientôt. Mais si nous passons maintenant à mLab et nous dirigeons vers notre base de données, à l'intérieur des collections, nous avons maintenant une collection de commandes avec un seul document. Ouvrons ça et voyons ce qu'il contient. Développez la vue. Bien. Il y a notre identifiant pour la commande, avoir l'identifiant pour l'utilisateur, et aussi pour l'hôtel. Nous avons également les détails de la commande pour la durée, la date de départ, ainsi que le nombre d'invités. C'est génial. Nous pouvons maintenant passer à la vidéo suivante où nous allons créer la nouvelle zone de compte utilisateur, où l'utilisateur peut voir toutes les réservations qu'il a effectuées. 61. Zone du compte d'utilisateur: Après avoir passé la nouvelle commande, nous sommes redirigés vers cette section Mon compte, que nous n'avons pas encore configurée. C' est ce que nous allons aller de l'avant et gérer dans cette vidéo. La zone Mon compte sera une section personnelle où l'utilisateur connecté peut voir toutes les commandes qu'il a passées. Juste avant de faire cela, nous devons également enregistrer un nouvel utilisateur pour tester les choses fonctionnent. Allons nous déconnecter et vous pouvez vous inscrire en tant que nouvel utilisateur. Ajoutons simplement ceci en tant que tests. Je vais le tester en tant que mot de passe et confirmer. Bien, nous nous sommes maintenant connectés en tant qu'utilisateur de test. Maintenant, nous devons aller de l'avant et passer une nouvelle commande pour n'importe quel hôtel. Allons-y pour celle-là. Cliquez ici. Ensuite, nous pouvons ajouter tout ce que nous voulons ici pour passer une commande. On y va. Recherchez ceci, continuez jusqu'à la confirmation, puis passez la commande. Si nous passons maintenant à mLab, nous devrions maintenant voir deux enregistrements à l'intérieur de la collection des commandes. Il y a deux commandes de deux utilisateurs différents. Cela nous donne maintenant quelques informations sur lesquelles travailler, afin que nous sachions quoi faire. Maintenant, nous devons d'abord passer au index.js et ensuite nous pouvons gérer cette section Mon compte, donc index.js et permet d'ajouter cela aussi aux routes utilisateur, donc router.get, my- compte, cela sera également géré par le contrôleur utilisateur. Ensuite, nous allons de l'avant et créer myAccounts, donc c'est le contrôleur utilisateur. On peut mettre ça en place maintenant. Juste pour est admin, Exports.myAccounts. Cela va être asynchrone, requête, réponse, et aussi suivant, notre section try, attraper les erreurs, puis passer ceci à la suivante. Lors de la mise en place, nous pourrions aller de l'avant et faire quelque chose comme ce que nous avons regardé. Par exemple, nous pourrions aller const ordres. On l'a utilisé beaucoup de fois auparavant. Les utilisateurs, les commandes, et aussi pour les hôtels. Sélectionnez les commandes.Rechercher. Ensuite, nous pourrions utiliser cette méthode Find pour faire correspondre l'User_ID aux informations de la request.user. _ID. Ensuite, nous pouvons faire un res.json pour sortir les commandes. Au-dessus du navigateur, toujours seulement dans myAccount, vous pouvez cliquer sur « Recharger ». Maintenant, voir le json pour les résultats. Cela fonctionne très bien. Nous voyons la seule réservation de cet utilisateur particulier, donc nous avons cet identifiant utilisateur. Nous avons également les détails de la commande pour la commande unique qui est passée. Le petit problème est que nous voulons probablement montrer à l'utilisateur les détails de l'hôtel tels que le nom et la destination à l'intérieur de leurs comptes. Mais actuellement, nous n'avons que cet identifiant d'hôtel que l'utilisateur ne reconnaîtrait pas. Dans mLab, nous avons différentes collections. Allons à notre base de données. Nous avons les hôtels, les commandes, les sessions et les utilisateurs. Cet identifiant que nous avons actuellement est dans la collecte des commandes de la base de données, mais les détails de l'hôtel dans la collection hôtels. Fondamentalement, nous avons besoin d'un moyen de saisir les détails de l'hôtel d'une autre collection. Nous pouvons le faire en utilisant l'étape de recherche du pipeline d'agrégation de Mongo. Retour à la section MonCompte, nous pouvons réutiliser la constante des commandes. Mais cette fois, nous allons écrire order.aggregate, alors supprimons simplement cette section ici.aggregate, puis plus. Nous avons encore besoin de filtrer par l'utilisateur. On peut le faire dans la phase de match. Ouvrez les accolades, symbole $ correspond comme nous l'avons utilisé auparavant. Ensuite, nous allons écrire les correspondances User_ID à Request.user.id. Cela ne va récupérer que les enregistrements où l'ID utilisateur correspond à l'utilisateur connecté en cours. Ajouter une virgule à la fin, puis nous pouvons ajouter l'étape de recherche avec $ recherche de symbole. abord, nous devons spécifier la collection à partir de laquelle nous voulons obtenir les données. Actuellement, nous dans la collecte des commandes, mais nous voulons récupérer les données de la collection de l'hôtel. Nous pouvons le faire en ajoutant de, puis comme une chaîne, nous pouvons ajouter dans le nom de notre collection, qui est hôtels. Ensuite est le champ local, que nous allons l'envoyer à l'hotel_ID. champ local est le nom du champ de notre collection de commandes, qui est fondamentalement considéré comme les entrées. L' ID de l'hôtel est dans notre fichier order.js. C' est ce moment que vous voyez ici. Ajouter une virgule à la fin, puis après cela, nous pouvons ajouter les champs suivants, et définir ceci à une chaîne d'ID de soulignement. C' est le domaine de l'ID de soulignement de la collection de l'hôtel, auquel nous allons correspondre. Ces données hôtelières auxquelles nous avons apparié seront ajoutées à nos commandes sous forme de tableau. Maintenant, nous donnons à ce champ de tableau un nom de notre choix. Nous utilisons le comme mots-clés et lui donnons ensuite un nom de données hotel_. Maintenant, si nous sauvegardons ce fichier et puis allons dans le navigateur, nous pouvons actualiser le json. Maintenant, nous avons le nouveau champ de données hôtelières et ceci est saisir toutes les informations de l'hôtel de cet ID d'hôtel, mais d'une collection différente. Cela signifie que nous avons maintenant accès à toutes les données de l'hôtel et que nous pouvons les utiliser à l'intérieur de nos modèles. Revenons au contrôleur et créez ce modèle en remplaçant maintenant res.json. Nous pouvons supprimer cette ligne ici et la remplacer par un reste de rendu pour produire un nouveau modèle de user_accounts. Après cela, nous passons nos options. Le titre de mes comptes ainsi que les informations de la commande. Enregistrez ceci, puis nous pouvons créer nos modèles user_account à l'intérieur de nos vues avec l'extension .pug. Ensuite, allez-y et ajoutez le contenu. À l'intérieur, nous répondons à la mise en page familière étend , le contenu du bloc, le titre de niveau 2 du titre et la ligne horizontale juste pour séparer le titre de la constante. Je vais ajouter une instruction if pour vérifier si l'utilisateur est connecté. Si c'est le cas, nous pouvons alors aller et sortir un titre de niveau 3 et les ticks arrière puisque ce sera dynamique avec le message de Hi, puis une virgule, alors nous pouvons sortir le nom de l'utilisateur en sélectionnant user.first_name. Cela dira quelque chose comme, « Salut Chris », avec un point d'exclamation à la fin. Ensuite, nous allons vérifier si des commandes sont présentes dans la base de données. Nous pouvons dire si orders.length est supérieur à 0. Cette section ne s'affichera que s'il y a des commandes. Ensuite, nous ajouterons un titre de niveau 3 avec le texte de vos réservations et pour toutes les réservations. Nous allons parcourir toutes les commandes dans la base de données pour cet utilisateur particulier, puis je vais les mettre à l'intérieur d'une liste non ordonnée. Nous allons parcourir en boucle en utilisant chaque commande dans les commandes, je vais l'entourer dans un div avec la classe de réservations afin que nous puissions ajouter CSS plus tard. Ensuite, nous pouvons construire notre liste non ordonnée. Nous listons d'abord l'élément qui passe par les tiques arrière afin que le texte de l'ordre réf. Ensuite, nous pouvons ajouter la référence de commande qui est stockée dans l'ordre. _id. Sous ce premier élément de liste, qui est pour l'identifiant de commande, nous allons alors créer une deuxième boucle qui va parcourir nos données d'hôtel. Rappelez-vous que les données de l'hôtel sont ce tableau que nous avons ajouté à la fin. Une fois que nous sommes dans cet ordre particulier, nous devons également parcourir ces données d'hôtel pour accéder à toutes les informations à l'intérieur d'ici. Pour ce faire, nous créons une nouvelle boucle avec chacun et nous dirons les données dans order.hotel_data. Tout ce que nous allons faire maintenant est de créer cinq éléments de liste différents qui vont être pour l'hôtel, le pays, la date de départ, le nombre de nuits, et aussi le nombre de clients. Ajoutons notre premier élément de liste. L' hôtel sera égal à data.hotel_name. Les données se réfèrent à toutes les données de cette section de données hôtelières. Nous allons ensuite accéder aux clés individuelles telles que le nom de l'hôtel, le pays et le coût par nuit. Avoir le nom de l'hôtel, fermer les tiques arrière et puis j'allais dupliquer ça quatre fois de plus. Le deuxième est pour le pays, puis données.pays. Le troisième sera le départ. La date de départ n'est pas à l'intérieur des données de l'hôtel. Ceci fait partie de nos informations originales ici afin que nous puissions y accéder avec tous les détails.DateOfDeparture. Supprimons cette section, accédez à notre commande d'origine qui est la première boucle en haut ici, donc order.order_details.DateOfDeparture. La prochaine est pour le nombre de nuits. Copions cette section ici, puis collez-la dans. Tout ce que nous avons à faire est de changer la date de départ pour être la durée. Enfin, le dernier sera pour le nombre d'invités. Nous pouvons supprimer cela et le remplacer par order_details.numberOfGuests. Cette section apparaîtra s'il y a des réservations en utilisant ces déclarations if. S' il n'y en a pas, nous devons ajouter une autre section vers le bas au même niveau. Cela va juste afficher un titre de niveau 3 avec le texte de aucune commande à afficher. Alors nous dirons, pourtant... Ceci est pour toute la section de réservation. Rappelez-vous en haut que nous avons vérifié si l'utilisateur était présent. Nous pouvons également ajouter une déclaration else pour la section 2. Tout en bas, nous pouvons ajouter cela au même niveau que les instructions if. Assurez-vous qu'ils sont alignés, puis nous pouvons ajouter un deuxième titre de niveau 3, qui dit simplement, « Veuillez vous connecter pour voir cette section ». Maintenant, au navigateur, n'oubliez pas de remplacer ce JSON par le reste du rendu. Maintenant, nous pouvons simplement rafraîchir la zone Mon compte, faire défiler vers le bas, et ces détails de notre utilisateur test. Cette réservation est l'hôtel numéro 6 donc c'est bon. Déconnectons-nous et nous pouvons essayer notre autre utilisateur. Connectons-nous. Maintenant, nous pouvons aller dans la zone Mon compte, donc /my-account, faites défiler vers le bas, et ceci est l'hôtel numéro 2 donc c'est une commande différente de celle que nous avons vu juste avant. Nous obtenons maintenant les commandes correctes pour l'utilisateur correct. Juste pour terminer les choses, nous pouvons passer à la mise en page du profil et d'autres liés à cette section Mon compte. Ouvrez la barre latérale, allez à la mise en page .pug. Juste au-dessus de ce lien de déconnexion, nous pouvons ajouter un nouvel élément de liste au même niveau. Ajouter un lien avec le href et cela va à my-comptes avec le texte de mes réservations/comptes. Enregistrez ceci, fermez la barre latérale, puis rechargez et maintenant avoir un bouton et les amener à la section compte. Avec cela fonctionne maintenant, nous allons ensuite faire un peu de travail dans la vue admin pour permettre à l'administrateur de voir une liste complète des réservations par tous les utilisateurs. 62. Afficher toutes les commandes: Dans la dernière vidéo, nous avons créé une zone de compte où l'utilisateur peut voir ses propres réservations. met en admin, nous voulons être en mesure d'avoir toutes les réservations disponibles pour voir pour tous les utilisateurs. Si nous nous connectons en tant qu'administrateur et que nous allons ensuite à l'administrateur slash, nous avons déjà cette vue admin disponible pour nous. Plus tôt lors de la création de cette page, nous avons également ajouté un élément de menu appelé Afficher les réservations, que vous pouvez maintenant utiliser. Ceci est terminé dans le fichier admin.plug. Alors ouvrons cela, à l'intérieur de plus de vues, alors cliquez sur le admin.pug, et ici nous allons, c'est la section de réservation de vue qui renvoie à l'administrateur barre oblique avant, commandes barre oblique. Donc maintenant, nous devons passer au fichier index.js et gérer cette route maintenant. Copions cette route, fermez-le, je fermerai plus de ces fichiers, allez dans le index.js et gardez ceci organisé. Je vais retourner à la section d'administration. Ce sont donc les routes d'administration, puis ajoutez router.get, car il s'agit d'une requête get. Et puis collez dans la chaîne d'ordres de barre oblique avancée admin, cela va également utiliser le contrôleur utilisateur, puis nous allons créer toutes les commandes à l'intérieur du contrôleur utilisateur. Donc, vous donnez à ce fichier une sauvegarde. Laisse la tête à l'utilisateur controller.js. Donc, cette section de toutes les commandes va être très similaire à la section de mon compte que nous avons créée dans la dernière vidéo. Nous pouvons donc copier cette section complète d'avant et ensuite coller juste en dessous. Nous devons changer mes comptes pour être tous les ordres. Donc, la principale différence entre ceci et la section mon compte est que nous n'avons pas besoin de ces étapes du pipeline d'agrégation. C' est parce que nous n'avons pas besoin de trop pour un utilisateur particulier, nous pouvons simplement rechercher toutes les commandes à l'intérieur de notre base de données. Ainsi, nous pouvons supprimer cette étape de correspondance de notre commande, nous avons également besoin que le modèle soit changé pour un modèle appelé commandes, et nous allons créer ceci bientôt et le titre de toutes les commandes. Voilà tous les changements que nous devons apporter. Donc maintenant, nous pouvons créer le modèle de commandes à l'intérieur de nos vues, nous avons besoin de créer des ordres dot carlin. Donc, pour commencer, nous pouvons étendre les mises en page, bloquer le contenu, bloquer le contenu, passer le titre comme un titre de niveau 3, une ligne horizontale. Donc, sous cette ligne horizontale, nous voulons afficher les commandes. Rappelez-vous de la dernière vidéo, nous avons déjà ajouté le code pour afficher les commandes à l'intérieur de ce fichier .pug de compte d'utilisateur. Donc, si nous ouvrons les comptes d'utilisateurs, c'est tout le même code que nous avons ici pour afficher la commande. Donc, plutôt que de taper tout cela à nouveau, il serait logique d'ajouter ceci à un mixin. Copions, ou en fait, nous allons couper uniquement les informations de l'élément de la liste, le nombre d'invités, jusqu'à ce que ces réservations si en haut. Nous découpons cela sur la barre latérale, à l'intérieur des mixins, nous pouvons créer un nouveau fichier, et celui-ci est appelé underscore orders.pug. Ce mixin est créé comme nous le faisons toujours avec le nom en haut, donc ordre mixin. En fait, nous allons appeler ces ordres, qui va prendre dans l'ordre individuel. Puis indenté dans un niveau, nous pouvons coller dans la réservation d'avant. Assurez-vous que tout est en retrait correctement, sinon nous obtenons quelques erreurs. Maintenant, nous avons juste besoin d'ajouter ce mixin dans nos deux fichiers, commençant par le compte d'utilisateur. On découpe ça d'avant. En haut, nous pouvons inclure sont mixin, qui est dans le dossier mixins, puis soulignent les ordres. Ensuite, faites défiler vers le bas, nous pouvons maintenant ajouter notre mixin. Nous voulons que cela apparaisse à l'écran afin que nous venons de bourrer notre boucle, nous pouvons ajouter des commandes. Je vais passer l'ordre individuel de notre boucle, enregistrer ce fichier et ensuite nous pouvons faire la même chose pour le fichier order.pug. Donc, nous sélectionnons ceci, haut, nous pouvons inclure notre mixin, donc mixins avant slash _orders, puis sous la ligne horizontale, nous pouvons créer notre boucle, tout comme nous l'avons fait dans les comptes d'utilisateurs. Chaque commande dans les ordres, alors nous pouvons ajouter nos commandes mixin, qui prend dans l'ordre individuel de notre boucle. Donnez à ce fichier une sauvegarde, revenez à l'administrateur. Nous pouvons maintenant cliquer sur voir les réservations en bas, ce qui nous amène à la barre oblique relative de l'administrateur, faites défiler vers le bas, et maintenant nous pouvons voir deux commandes différentes de deux utilisateurs différents. En plus d'être connecté en tant qu'administrateur et de pouvoir voir toutes les commandes, nous avons également notre propre section de comptes unique en haut. Cliquez sur cela aussi, et maintenant si nous faisons défiler vers le bas, nous devrions voir juste nos propres honneurs, mais nous avons un 404 de pas trouvé. Nous pouvons voir qu'il y a un problème en haut. Nous pouvons le lier à transférer slash admin barre oblique avant mes comptes, et nous ne voulons pas cette section admin à l'intérieur ici. On a juste besoin d'aller sur mon compte. Passons à la disposition du carlin, nous avons juste besoin d'une barre oblique avant mes comptes. Je devrais essayer une fois de plus, en cliquant sur mes réservations, maintenant nous avons juste la réservation unique pour le compte de Chris, et encore une fois si nous allons à Admin, descendez à Voir les réservations. Parce que nous sommes administrateurs, nous pouvons aussi voir les ordres d'autres personnes aussi. En plus de cela, cela signifie également que notre mixin fonctionne également bien, puisque nous voyons maintenant ces informations de commande dans deux fichiers distincts. C' est maintenant pour afficher toutes les commandes à l'intérieur de l'écran d'administration. Dans la vidéo suivante, nous reviendrons à notre style en ajoutant du CSS final. 63. CSS final: Ça fait un peu de temps que nous n'avons pas travaillé avec notre style. Prenons donc quelques instants pour apporter quelques ajustements, en particulier aux fonctionnalités que nous avons ajoutées dans les dernières sections. Je ne vais pas ajouter beaucoup de CSS supplémentaire. Vous pouvez aller encore plus loin si vous voulez maintenant ce qui est faire quelques petits changements, commençant par les boutons. Donc, vous avez probablement déjà remarqué si nous allons à un hôtel, et puis si nous faisons une recherche pour la date, nombre d'invités, une fois que nous avons pris à la page des résultats, nous avons ce bouton juste ici pour continuer. Nous avons également un bouton pour passer la commande. Donc la première chose que je vais commencer par ce sont ces boutons ici. Alors passons au style.css. Donc nous allons passer au dossier public, qui ferme sur ces derniers. Donc, le dossier public. Ensuite, nous devons aller dans les feuilles de style, puis le style.css. Donc, à l'intérieur de ce fichier et aussi en dehors de la requête média, nous pouvons ajouter notre style de bouton, donc faisons défiler vers le bas jusqu'à notre requête multimédia, qui est juste ici. On peut s'assurer qu'on est en dehors de ça. Donc, juste sous le bouton petit, je vais ajouter la classe de bouton, qui est à l'intérieur de notre HTML. Nous pouvons ajouter une couleur d'arrière-plan. Je veux mettre les esprits en bleu cadet, et un petit rayon de frontière, tous les cinq pixels. Aussi un petit rembourrage de 0.5em. Sauvegardez ça. Recharger. Maintenant, notre bouton a l'air beaucoup plus agréable. Si nous passons maintenant à la page du compte en cliquant sur un lien en haut. Ces listes de réservations, que vous avez ajoutées dans les dernières vidéos, ont également besoin d'un peu de travail. C' était à l'intérieur du plus ancien fichier orders.pug de mixins. Cela a un mixins appelé _orders. Alors allons aux mixins et ouvrons ce fichier. Ce mixin était entouré d'un div avec la classe de réservations, que nous pouvons maintenant utiliser dans le CSS. Étincelez vers le fichier style.css. Encore une fois, ajoutez-les en dehors de la requête média afin de cibler les réservations ul. Je vais ajouter une marge de 2em, le haut et le bas, et zéro à gauche et à droite. Les arrière-plans, encore une fois de bleu cadet. Également une petite valeur de remplissage de 10 pixels. Alors sauvegardons ça. Rechargez la section de mon compte. Ensuite, nous voulons cibler les éléments individuels de la liste et les configurer pour être au niveau du bloc, sorte qu'ils sont empilés les uns sur les autres. Donc, après les réservations ul. Ajoutons les réservations li. Définissez le type d'affichage sur bloc. L' arrière-plan, donc cela se démarque du bleu cadet. Je vais ajouter une valeur grise de eee et aussi un rembourrage de 0.5em. Voyons à quoi cela ressemble dans le navigateur. Ajouter un s. On y va. Donc, je ne vais pas aller trop loin dans ce style car beaucoup dépend de préférences personnelles. Mais la dernière chose que je vais changer, c'est les messages flash. Ils sont situés à côté du fichier layout.pug. Alors allons-y et faites défiler vers le bas jusqu'à notre section message, qui est juste ici. Nous voyons une classe de message appliquée à la div, qui contiendra notre style de message général. Puis aussi une classe dynamique de soulignement de message. Ce sera soit info, succès ou erreur. En utilisant ces noms de classe, nous pouvons créer différentes couleurs pour chaque type de message. Par exemple, rouge pour une erreur. Également en dessous de cela, il y a une travée avec la classe du bouton de fermeture. Cela peut également être utilisé pour styliser la croix, ce qui supprime le message. Donc sur le style. Donc, à nouveau, en dehors de la requête média, commençons par le .message. C' était pour nos styles de messages généraux. Donc, une marge de dix pixels en haut et en bas, zéro à gauche et à droite une petite valeur de remplissage de 0,5em, une bordure d'un pixel, et une ligne pleine, un rayon de bordure de cinq pixels. La taille de la police est également de 1.2em. Sauvegardez ça. Essayons de regarder dehors. Donc, cela semble maintenant un peu mieux. Cibonnons maintenant la croix à juste ici et déplacez-la sur le côté droit, en plus de changer le curseur pour être un pointeur. On va planer dessus. Donc, sous le message, nous pouvons cibler le close_btn. On peut flotter ça vers la droite. Donc maintenant, nous pouvons également cibler le bouton de fermeture. Mais cette fois, le vol stationnaire indique. Tout ce que je veux faire ici est de changer le curseur pour être un pointeur. Donc, les trois styles suivants que nous allons ajouter seront tous liés au type de message. Alors rappelez-vous d'avant à l'intérieur des mises en page, nous avons cette section dynamique de message_. Donc [inaudible] _info, le succès et l'erreur. Nous pouvons donc les utiliser pour diviser trois couleurs différentes, suivre les messages flash. Commençons donc par message_info. Le message_success. Ensuite, le dernier est message_error. Donc tout ce que nous allons faire ici, c'est ajouter quelques couleurs. Donc, le premier, je vais ajouter une valeur RVB de 40, 92 et pour le bleu une valeur de 177, pour le succès, la valeur de 39, 87 et 39. Ensuite, pour le message d'erreur, la couleur rouge sera une valeur RVB de 233, 66 et 66. Ajoutons un point-virgule à la fin de ces trois lignes. Enregistrez ce fichier, puis rechargez le navigateur. Donc, tout d'abord, si nous essayons de nous déconnecter, nous obtenons un message bleu pour les infos. Essayons de vous connecter. Donc, tout d'abord, si nous faisons un mot de passe incorrect lors de la connexion, nous obtenons le message d'erreur rouge. Essayons donc à nouveau avec le mot de passe correct cette fois. Maintenant, nous obtenons la couleur verte pour le succès. Excellent. Cela fonctionne maintenant bien. Je vais le laisser ici pour le style CSS. Mais bien sûr, allez-y et changez les choses en fonction de vos besoins. 64. Préparation à la production: Bienvenue de retour. Ce sera une section assez excitante car nous voyons que tout notre travail acharné a finalement porté ses fruits. Nous allons enfin pousser notre projet un serveur web en direct pour que le reste du monde puisse le voir. Tout d'abord, quelques mesures que je vais prendre pour préparer notre application. Tout d'abord, je vais activer la compression. Cela va ajouter la compression gzip, comment nous traitons les fichiers, nous compresser sur notre ordinateur. Ce qui peut diminuer la taille du corps de réponse, ce qui accélère les performances de notre application. C' est un paquet npm, simplement appelé compression, que nous pouvons installer via la ligne de commande comme d'habitude. Off à la compression npm i du projet, puis appuyez sur ENTRÉE. Il tire ce paquet de npm. Une fois cela fait, nous pouvons alors exiger cette finale dans le app.js en haut, tout comme nous le faisons normalement, donc le app.js. Fermons certains de nos nouveaux timbres. Non, pas, le app.js juste en haut, je vais créer une constante appelée compression et exiger ce fichier. Ensuite, nous devons ajouter cette compression en tant que middleware avec app.use. Faites défiler vers le bas et fermons cela après notre application. Disons « Compresser les réponses » avec notre app.use analyse en compression. C' est tout ce que nous devons faire pour mettre en place la compression pour nos réponses. Je dois dire qu'il est noté dans nos en-têtes de réponse plus tard. Suivant est un module de sécurité npm, qui est appelé casque. Ce module ne protégera pas notre application de tous les risques de sécurité, mais l'activer est un pas dans la bonne direction et cela peut causer beaucoup de précautions courantes que nous devrions prendre. Ce module fonctionne comme middleware et définit divers en-têtes HTTP, que nous examinerons dans un instant. Installez d'abord ce module avec npm i et le nom du paquet des casques. Une fois que cela est installé, nous pouvons ensuite passer à notre app.js et ensuite exiger ce module à nouveau en haut, juste sous notre compression, donc const casque, nécessitent le module casques. Cela devrait alors être réglé le plus tôt possible dans la chaîne middleware , encore une fois, en utilisant app.use. Juste après que nous avons mis en place notre application Express, donc faites défiler vers le bas jusqu'à var application égale Express. Nous pouvons avoir cela juste ici, donc app.use l'analyse dans le casque, puis un point-virgule à la fin. Juste avant de travailler avec cela cependant, je vais commenter cette ligne, afin que nous puissions voir à quoi ressemblent nos en-têtes avant d'utiliser des casques. Gardez ceci commenté et puis passez aux outils de développement. Quand il démarre le serveur avec npm, exécutez DevStart. Pour voir nos en-têtes HTTP, nous pouvons aller aux outils de développement à l'intérieur d'un Chrome, donc faites un clic droit et inspectez. Ensuite, si nous allons à l'onglet Réseau, fermons cela, rechargeons , cliquez sur l'hôte local, puis lorsque vous cliquez sur l'onglet en-têtes, qui est juste ici. Je veux parler de ça pour qu'il soit plus visible à l'écran. Les informations qui nous intéressent sont les en-têtes de réponse. Cette information connue sous le nom d'en-tête, est une information analysée avec la requête et la réponse, et mettons ceci sur le côté pour qu'il soit facile à voir. On y va. Super. Il y a nos en-têtes de réponse, que nous pouvons voir juste ici et juste comme une comparaison, je vais prendre une capture d'écran rapide de cela. Je vais m'en servir dans un instant. Il contient des choses telles que notre Content-Type de text/html, il est défini pour avoir un jeu de caractères de utf-8, qui est la norme. Le type d'encodage de gzip, qui était défini de bios avant quand nous clouons une compression. L' une des choses que nous devons aborder ici est la balise X-Powered-By, qui est en bas et qui est définie pour être Express. Helmet masquera ces informations avec d'autres afin que les pirates ne puissent pas exploiter les vulnérabilités connues à l'intérieur du framework dans lequel nous utilisons. Cela ne va pas cacher complètement le fait que nous utilisons Express, il y a d'autres façons de vérifier, mais c'est un pas dans la bonne direction. Maintenant, si nous revenons au projet et décommentons, ce morceau de middleware, sauvegardez le fichier. Maintenant, si nous rechargeons le navigateur, cliquez sur l'hôte local, puis revenez à nos en-têtes de réponse, nous voyons que nous avons maintenant plus d'informations d'en-tête. Remontons les captures d'écran d'avant, double-cliquez dessus. La première chose à remarquer dans ce nouvel en-tête de réponse est que nous n'avons plus cette section Powered-By Express en bas, ceci a été supprimé par les casques. Il y a aussi quelques informations supplémentaires maintenant ajoutées. Je ne vais pas aller trop loin dans tout ici, mais je vais vous donner des informations générales sur ce qui se passe. Nous pouvons voir que nous avons les options Content-Type définies pour être « nosniff ». Cela empêche le navigateur d'essayer de détecter ou de deviner le type de nom. C' est le type de fichier avec lequel nous traitons, tel qu'un fichier PNG ou un fichier JavaScript. Cela empêche le navigateur d'essayer automatiquement de détecter le Content-Type et fondamentalement de le tromper, par conséquent, en exécutant du code qu'il ne devrait pas. Nous avons également le DNS-Prefetch-control réglé pour être désactivé. Il s'agit plus d'une fonctionnalité de performance que de sécurité. Lorsque nous visitons une URL dans un navigateur, le nom de l'URL, tel que Google.com, est essentiellement un alias pour une adresse IP numérique. DNS est un serveur qui contient une base de données de ces URL et aussi les adresses IP pour ensuite les faire défiler vers le haut. Cette URL telle que Google.com, est beaucoup plus facile pour les humains de se souvenir que l'adresse IP numérique réelle. Cette fonctionnalité indique au navigateur de ne pas faire de requête DNS trop tôt avant que l'utilisateur clique sur un lien ou charge une ressource. Nous avons également les options de téléchargement pour être noopen. Cela protège contre une ancienne vulnérabilité d'Internet Explorer, qui permet au navigateur d'exécuter des téléchargements à l'intérieur du contexte de votre site. ce paramètre arrêtera Internet Explorer permettant aux téléchargements HTML malveillants d'être exécutés dans un environnement dangereux. Nous avons l'option Frame-Option définie pour être SAMEORIGIN. Celui-ci contrôlera si vos sites peuvent être chargés dans un iframe ou non. Il devrait être désactivé à moins que vous en ayez un bon besoin. Ensuite, nous avons XSS Protection et XSS signifie « cross-site scripting », et c'est un moyen pour les attaquants d'avoir accès à nos sites Web. Ils le font en trouvant des moyens d'exécuter du code JavaScript à l'intérieur de ces sites. C' est l'une des choses contre lesquelles nous essayons de protéger lors de la désinfection des entrées de l'utilisateur dans toutes les formes et les casques ont également cette option pour aider avec une certaine sécurité de base. Comme vous pouvez l'imaginer, maintenant la sécurité est un sujet profond et consultez les documents du casque pour plus d'informations, si vous souhaitez en savoir un peu plus. Mais pour l'instant, sachez que c'est une protection de base maintenant en place. Dans la prochaine vidéo, nous allons enfin télécharger notre application en production en utilisant Heroku. 65. Pousser notre application express vers Heroku: Je vais maintenant vous montrer comment pousser votre application express finie vers une plate-forme appelée Heroku. Heroku est une plateforme basée sur le cloud qui nous permet de déployer facilement nos applications en production. Il fonctionne avec Ruby on Rails, PHP, Python, Node et [inaudible]. Il y a aussi un niveau gratuit. Ainsi, nous pouvons apprendre à l'utiliser sans frais et nous n'avons besoin de payer que si notre projet grandit. Heroku chambres sur des applications appelées dynodes, qui sont essentiellement des conteneurs entièrement gérés. Pour pousser à Heroku, nous devons d'abord installer un logiciel de contrôle de version appelé git. Ceci est disponible sur gitscm.com. Alors cliquez sur ce lien ici. Nous l'emmenons ensuite sur la page d'accueil de git. Alors passons à la section de téléchargement en bas. Cliquez dessus, puis cliquez sur le téléchargement de votre système d'exploitation. Donc, je vais cliquer sur la version Mac juste là, et déclencher le téléchargement. J' ai déjà git installé sur ma machine. Donc, si vous ne voulez pas aller de l'avant et suivez les instructions d'installation pour votre système d'exploitation particulier. Si vous n'êtes pas familier avec git, il s'agit d'un système de contrôle de version open-source, qui nous permet de travailler sur des projets ou logiciels, puis de pousser nos changements à différentes étapes. Cela nous permet non seulement de garder une trace des changements, mais aussi de revenir aux versions antérieures, si nous gâchons. Git est installé sur notre machine, et nous pouvons également pousser notre code à des services hébergés tels que GitHub, ou dans notre cas nous pouvons l'utiliser pour pousser à Heroku. Donc, une fois que vous êtes prêt, nous devons passer au terminal ou vous pouvez utiliser le terminal intégré dans le code Visual Studio. Donc, à l'intérieur de l'ici en bas, nous pouvons vérifier que git est installé correctement, en utilisant les commandes de version git dash dash. Si un numéro de version nous est retourné, cela signifie que git a été installé avec succès. Les portes Git sont projettent dans ce qu'on appelle un dépôt, que vous pouvez considérer comme un seau de stockage. Nous pouvons initialiser un dépôt vide dans nos projets avec la commande git in it. J' ai déjà le dépôt déjà configuré. Donc, cette réinitialisation est le dépôt git. Vous pouvez obtenir un message légèrement différent, mais tant que votre dépôt a été créé, nous avons maintenant bon de passer à autre chose. Nous pouvons alors vérifier l'état des fichiers de nos projets qui sont poussés à git et qui ne l'ont pas fait, en utilisant la commande appelée git status. Alors appuyez sur Entrée et maintenant voir une liste de fichiers rouges et dossiers de nos projets. Le rouge illustre parce qu'ils sont classés comme non suivis. Nous devons déclarer quels fichiers nous voulons ajouter à git, et ceux que nous ne faisons pas. Mais avant d'aller plus loin, il y a quelque chose que nous voulons faire en premier. Il s'agit de créer un nouveau fichier dans notre projet appelé git ignore. Cela parce que nous avons tous ces fichiers et dossiers, mais nous ne voulons pas toujours qu'ils soient tous partagés sur git. Nous ne voulons pas partager le fichier .env car il contient des informations sensibles. Aussi le dossier des modules de noeud peut être ignoré aussi, car il s'agit d'un dossier énorme qui prendra beaucoup d'espace. Donc, toute la barre de design, à la racine de nos projets, ce qui est fermer tout cela vers le bas. Créez un nouveau fichier appelé .gitignore. Donc, pour ignorer ces fichiers, nous pouvons ensuite les lister à l'intérieur d'ici. Donc, en commençant par le dossier des modules de noeud. Alors ajoutez-les simplement par leur nom. Ainsi, le dossier des modules de noeud, nous pouvons également ignorer le fichier .env, puis enfin à la fin, le DS-Store. Le DS-Store est un fichier qui est souvent ajouté automatiquement lors de l'utilisation d'un Mac. Nous voulons donc le reconnaître aussi, car il ne sera pas nécessaire pour tous les projets. Ce fichier git ignore devient encore plus important si nous poussons ce code à un endroit tel que GitHub. Si nous oublions d'ajouter ceci, nos informations sensibles pourraient être en ligne pour que tout le monde puisse les voir. En outre, les modules de noeud n'est pas nécessaire, car nous pouvons toujours exécuter la commande d'installation de NPM, pour les installer tous à partir de la liste du fichier package.json. Aussi à l'intérieur de ce fichier package.json, je vais ajouter le paramètre [inaudible], et c'est pour déclarer la version des nœuds que nous allons utiliser. Donc, si nous descendons au terminal et tapons le nœud dash-v, je suis sur chrome version10.3.0 Donc, nous pouvons définir cela dans le package.json. Alors ouvrez ceci, puis tout en bas sur les dépendances de dev, nous pouvons définir les moteurs. C' est un objet où nous définissons la version des nœuds comme une chaîne, qui est notre version actuelle. Donc, je sur 10.3.0, et bien sûr cela se trouve être la version actuelle que vous utilisez. Nous définissons la version Node à l'intérieur ici. Ainsi, la version de production de Node correspondra à la même version que nous utilisons pendant le développement. Cela pourrait éviter tout problème potentiel lors de l'utilisation différentes versions dans le développement et la production. Maintenant, si on ferme ça et qu'on y aille, laisse-moi sauver ça d'abord, puis retourne au terminal. Nous pouvons à nouveau exécuter git status, appuyer sur enter, enregistrer le fichier git ignore, puis exécuter git status, appuyer sur enter. Maintenant, nous voyons que nous manquons maintenant le fichier .env et aussi les modules de noeud. Donc maintenant, nous pouvons aller de l'avant et utiliser le git comme commande, suivi du point. Donc, git add dot hit enter. Cela indique à git d'ajouter ou de mettre en scène tous les fichiers qui sont rouges. Nous pouvons également utiliser git add suivi du nom du fichier pour ajouter un fichier ou un dossier à la fois, plutôt que d'utiliser dot, qui utiliserait pour ajouter tous les fichiers. Si nous exécutons à nouveau git status, appuyez sur Entrée, les fichiers et les dossiers sont maintenant définis pour être verts. Cela signifie qu'ils sont maintenant prêts à être engagés dans git. Pour cela, il y a la commande git commit. Donc, tapez git, commit-m, puis à l'intérieur des guillemets, vous pouvez ajouter un message, tel que la validation initiale. Nous ajoutons donc ce message pour décrire les modifications que nous avons apportées en utilisant un indicateur de tiret m, puis un message entre guillemets juste après. Alors appuyez sur Entrée, et cela devrait maintenant valider tous nos fichiers dans notre dépôt vide. Au cours de l'état git, jusqu'à la touche inférieure enter, montrera maintenant qu'il n'y a plus rien à valider. Notre travail dans le bac est propre et il restera ainsi jusqu'à ce que nous modifiions l'un des fichiers. Donc, par exemple, dans le style.css, si nous avons ajouté quelque chose comme padding:1px, enregistrez ceci et [inaudible] git status. Mais maintenant voir la version modifiée du style.css. Mais je ne vais pas pousser à git, car cela va être supprimé. Donc, c'est maintenant notre travail terminé avec git. Maintenant, nous devons passer à Heroku. La première chose que nous devons faire est de nous rendre sur Heroku.com et de créer un compte gratuit. Alors allons-y et inscrivez-vous. Alors ajoutez nos détails à l'intérieur ici. Hors d'un rôle, optez pour un développeur, ajoutez le pays, sélectionnez notre langue principale. Je veux aller de nœud, pas de robots, créer un compte gratuit et ensuite vous devez aller dans vos e-mails et confirmer les comptes. Allez-y et revenez dans quelques instants. D'accord. Bienvenue de retour. Une fois que vous avez confirmé votre nouveau compte et configuré le mot de passe, nous devons continuer, ce qui nous amène à la zone de tableau de bord de Rocchio. À l'intérieur de la zone de tableau de bord, nous pouvons créer un nouveau projet avec cette icône en haut. Cliquez sur Nouveau, créez une nouvelle application. Nous intégrons ensuite un nom d'application. Voyageons, qui n'est pas disponible parce que je l'ai utilisé avant, alors allons-y pour Voyagons à, qui est disponible. Sélectionnez le pays ou la région, puis créez une application. Nous prenons ensuite dans notre application et nous pouvons voir que nous avons cette section des méthodes de déploiement juste ici. Je vais utiliser la méthode Heroku git, que vous voyez ici, qui utilise la CLI Heroku. En utilisant cette méthode, nous devons installer cette CLI. Cliquez sur le lien juste ici et nous l'ouvrirons dans un nouvel onglet. Téléchargez et installez, puis installez pour votre système d'exploitation particulier. Une fois que c'est terminé, vous pouvez cliquer dessus, puis passer par l'installateur. Bien. Une fois cela fait, nous pouvons maintenant retourner au terminal et maintenant nous aurons accès aux commandes Heroku. En bas dans le terminal, nous pouvons ajouter Heroku login puis nous connecter à nos comptes. Je veux changer l'email pour celui que je viens d'enregistrer. Appuyez sur Entrée, puis ajoutez le mot de passe, liez à nos comptes. Super. Maintenant, nous sommes connectés en tant que notre utilisation de courrier électronique juste ici. Je vais taper, Clear, pour nous donner plus d'espace. Revenons au tableau de bord du projet, nous devons maintenant copier cette ligne de code juste ici, qui est Heroku Gits. Ceci est également lié à notre projet Let's Travel, alors copiez-le et collez-le dans le terminal, puis appuyez sur « Entrée ». Donc, cela va définir notre application Heroku comme une version à distance de Gits. Une branche distante est une version de notre projet qui vit ailleurs, sur Heroku ou GitHub. C' est notre version à distance maintenant définie et maintenant la dernière étape est d'aller de l'avant et de pousser de Gits à Heroku. Nous faisons ça avec Gits pousser Heroku. Git push, Heroku puis Master, appuyez sur Entrée. La branche principale est la branche principale ou la branche par défaut de Gits. Donnez-nous quelques instants pour pousser à Heroku. Une fois cela fait, nous pouvons soit copier le lien que nous verrons à l'intérieur du terminal, soit nous pouvons accéder à une commande appelée Heroku Open. Construisons notre projet et poussons le Heroku. Bien. Tout est maintenant fait, donc nous pouvons soit copier le lien que nous voyons ici, soit nous pouvons taper Heroku, puis ouvrir, appuyer sur Entrée. Il devrait maintenant s'ouvrir à l'intérieur de notre navigateur au lien que nous avons vu auparavant. Nous semblons voir une erreur dans le navigateur. C' est parce que dans notre projet, nous configurons des variables d'environnement, mais nous avons ignoré le fichier .env, qui les contient. Maintenant, nous devons ajouter ces variables dans Heroku, revenir sur le tableau de bord et jusqu'au sommet. Nous avons une option de paramètres juste ici et puis à l'intérieur ici, nous avons une section appelée Variables de configuration. Cliquons sur révéler les variables et nous voyons que nous n'avons pas encore de ces configurations. Maintenant, nous pouvons copier les variables à partir de notre .ENVFile. Ouvrons le. Dossier ENV. Le premier est DB. Copions ça. Nous pouvons ajouter notre clé en tant que DB, puis copier notre valeur MongoDB. Collez ceci en tant que valeur, puis ajoutez. Faites la même chose pour notre cloud, et renommez la valeur, la clé API, placez ceci dans. Ensuite, nous avons les secrets de l'API. Celle-là dedans, et puis nous avons juste besoin de retirer ça et juste avoir la clé. Les secrets, puis ajouter ceci. Enfin les secrets de la session de voyage. Ajoute ça, on y va. En plus de ces variables d'environnement, il y en a une de plus que je vais ajouter. En bas, ça va être node_ ENV. Cela va être mis en production, alors ajoutez ceci. Cela changera les environnements de nœuds par défaut du développement à la production. Cela modifiera certains paramètres de l'application, comme la suppression de certains messages d'erreur, que nous ne voulons pas voir l'utilisateur. Il va maintenant encaisser notre CSS et examiner les modèles pour la performance. Il va maintenant ignorer les dépendances de dev du fichier package.json. Vous n'en avez plus besoin en production. Maintenant, si nous revenons à l'onglet du navigateur, cliquez dessus et puis rechargez le navigateur. Nous voyons maintenant que le projet fonctionne à nouveau. C' est maintenant un lien en direct que vous pouvez maintenant prendre et montrer à vos amis et à votre famille. Aussi, si vous avez votre propre domaine personnalisé, vous pouvez l'utiliser pour lire Heroku et vous pouvez savoir comment le faire dans la documentation. Jouez avec cela et tout devrait toujours fonctionner comme d'habitude. Nous devrions toujours pouvoir nous connecter. Donnons un coup d'envoi à ça. Nous sommes maintenant connectés, nous pouvons accéder à nos comptes. Il y a nos réservations, toutes les images semblent toujours fonctionner dans le cloud unary, ce qui est bon. Bien sûr, tout est toujours extrait de Mongo parce que nous avons ajouté la variable d'environnement de mLab. Rappelez-vous que la version de mLab que nous avons utilisée pour les tests n'est pas conçue pour la production, mais c'est très bien juste à des fins d'apprentissage. Pour l'instant, peu de félicitations pour avoir poussé votre application Express à la production. Mais pour l'instant, cependant, une énorme félicitations pour aller aussi loin, et aussi maintenant pousser votre application Express sur un serveur web en direct. 66. Merci: Félicitations pour avoir atteint la fin de ce cours. J' espère que vous êtes maintenant beaucoup plus à l'aise de construire des applications web complètes en utilisant des technologies telles que Node, Express, MongoDB, Hotspot, et bien plus encore. Nous avons commencé dès le début à regarder comment fonctionne Node et Express, plus de construire l'application Let's travel. Nous avons créé des modèles de page, utilisé le routage pour basculer d'une page et appris comment toutes les parties d'une application Node et Express s'intègrent ensemble. Ensuite, nous avons passé à la façon dont nous pourrions intégrer des bases de données dans tous les projets, y compris la modélisation de nos données, en utilisant diverses méthodes pour obtenir les données correctes au besoin, un long avec l'essentiel créer, lire, mettre à jour et supprimer actions. Après cela, nous avons renforcé nos connaissances en créant un plus grand nombre de projets, y compris des vues différentes, des contrôleurs, des variables d'environnement, des téléchargements de fichiers et du stockage dans le cloud, ainsi que de nouvelles techniques d'ES6. Nous avons couvert la gestion des comptes d'utilisateurs, y compris l'enregistrement et la connexion, la validation des entrées de l'utilisateur, travail avec les sessions, les messages flash, ainsi que le rendu conditionnel. Pour compléter le projet, nous avons géré la zone des comptes d'utilisateurs et nous avons également autorisé l'utilisateur à effectuer des réservations. Enfin, nous avons poussé nos projets à un serveur en direct pour que le reste du monde puisse le voir. Au revoir pour l'instant et j'espère vous voir dans un autre cours bientôt. 67. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis une certaine connaissance. Si vous avez apprécié ce cours, assurez-vous de vérifier le reste de mes cours ici sur le partage de compétences. Suivez-moi pour toute mise à jour qui sera informée de toute nouvelle classe dès qu'elle sera disponible. Merci encore, bonne chance. Espérons que je te reverrai dans les prochains cours.