ASP. Développement MVC NET Core 7

1. Introduction: Bonjour et bienvenue dans ce cours sur le développement multiplateforme SP dotnet Core. Je suis votre professeur pour voir Williams et je suis ingénieur logiciel et conférencier depuis plus de dix ans. Dans ce cours, nous allons suivre quelques étapes simples qui peuvent être reproduites sur n'importe quelle plateforme. C'est exact. Vous allez suivre ce cours, que vous utilisiez Mac OS, Linux ou Windows. Et vous serez en mesure de suivre et créer une application asp.net Core MVC, vous apprendrez choses comme Entity Framework Core, et en adoptant une approche de base de données d' abord, nous examinions Bootstrap Five et bibliothèques jQuery. Nous allons intégrer Auth Zero , un fournisseur d'OpenID Connect. Et tout en faisant tout cela, vous vous familiariserez avec GitHub. Sachez que les outils de développement que nous utiliserons sont très importants, prêts à être plus sombres afin que nous puissions héberger une instance SQL Server quel que soit notre système d'exploitation, même si SQL Le serveur est principalement conçu pour la distribution Windows. Nous utiliserons également Visual Studio Code comme studio de données et la CLI dotnet, qui, une fois de plus, fonctionneront sur n'importe quel système d'exploitation. Sachez, juste pour vous concentrer lorsque nous utilisons Visual Studio Code et Azure Data Studio. Des outils de développement multiplateformes tellement polyvalents et très légers, et très légers, peu importe le type de spécifications de votre machine. Ils n'utilisent pas autant de ressources que leurs homologues, comme Visual Studio 2022 et SQL Server Management Studio. Vous pouvez donc utiliser ces outils sur une machine moins puissante. Ils peuvent être réutilisés sur n'importe quel système d'exploitation. Ils proposent des intégrations claires avec plusieurs services tiers et sont suffisamment puissants pour créer n'importe quoi. Maintenant, j'espère que tu es aussi enthousiaste que moi et j'ai hâte de te voir au cours. 2. Créer un compte GitHub: Très bien, les gars, dans cette leçon, nous allons suivre le processus de configuration très simple qui consiste à créer un compte GitHub. Github est donc sans doute la plus grande plateforme de codage social. C'est l'un des bons fournisseurs les plus populaires. Et il appartient à Microsoft et est gratuit pour le développement personnel et open source. Vous pouvez également y avoir des projets privés et organiser ce cours Nous utiliserons GitHub. Donc, si c'est votre première fois, vous avez peut-être entendu parler à la fois de la gestion du contrôle de source et de GitHub. Et tu veux vraiment vivre cette expérience. Ne vous inquiétez pas, nous allons l'utiliser dans ce cours et vous apprécierez cette expérience. Donc, pour commencer, rendez-vous sur github.com et à partir de là, vous pouvez vous inscrire. Donc je suppose que tu n'as pas déjà de cône. Donc, si vous vous inscrivez, vous recevrez un formulaire très simple dans lequel ils vous demanderont votre adresse e-mail afin que vous puissiez la fournir et continuer. Et en fait, je pense que vous n' avez besoin que de votre adresse e-mail et de votre mot de passe, donc j'ai déjà un compte, mais permettez-moi d'essayer d' en saisir une autre. Ensuite, vous créez un mot de passe. Et une fois que vous avez continué à créer ce mot de passe, ils veulent un nom d'utilisateur. Vous pouvez créer ce nom d'utilisateur. Permettez-moi de créer quelque chose d' arbitraire, puis de continuer. Ensuite, ils vous demanderont simplement si vous souhaitez des promotions. Continuez. Et ils sont capturés par chèque. Et puis, en gros, à la fin de tout cela, il vous enverra un e-mail de vérification. Ensuite, une fois que vous vous vérifié, vous pouvez vous connecter. Je vais donc simplement me connecter et vous montrer à quoi ressemblerait cette expérience. Et une fois que vous vous êtes connecté avec votre nom d'utilisateur et votre mot de passe ou votre adresse e-mail et votre mot de passe, vous verrez un écran similaire à celui-ci. J'ai déjà quelques dépôts, donc vous n'avez peut-être rien sur la gauche, alors c'est très bien. C'est pourquoi nous sommes ici. Mais vous verrez que j'ai pas mal de référentiels. Et voici mon profil. Si tu avais besoin d' accéder à mon profil, tu peux toujours te rendre sur github.com en barre oblique mon nom d'utilisateur, qui est simplement mon nom. Et il en serait de même pour vous et tous ceux qui souhaitent accéder à votre profil tous les référentiels sur lesquels vous travaillez une fois qu'ils sont rendus publics sont accessibles. Et c'est ce qui fait la beauté de GitHub. Il vous aide à contribuer à d'autres projets et à partager vos projets afin que d'autres personnes puissent également y contribuer. Une fois que vous avez configuré votre compte, vous pouvez passer à la leçon suivante. 3. Installer . NET 7 SDK: Très bien les gars, nous continuons donc à configurer notre environnement. Et l'étape suivante consiste à installer les réseaux de points d'un SDK. Vous pouvez y accéder simplement en accédant à .net.microsoft.com ou vous pouvez simplement utiliser le SDK google.net. Très bien, je pense que c'est la chose la plus simple à faire, juste Google.net. Donc, le SDK et le premier résultat de recherche vous mèneront sûrement à cette page. Non. Dotnet Seven est la dernière version au moment de l'enregistrement, mais du terme standard, ce qui signifie qu'il sera démodé à la sortie ce qui signifie qu'il sera de Dotnet Eight. Nous avons également une version de l'outil en six points, qui est un support à long terme. Donc, une grande partie de ce que nous allons faire dans ce cours, même si nous utiliserons Dotnet Seven, sera plus ou moins compatible avec ses six, sauf peut-être quelques phrases en do dièse, des ensembles. Je ne manquerai pas de souligner en quoi le code différera entre ce que propose Dotnet Seven et ce que nous pouvons faire dans Dotnet Six. Au moment de cet enregistrement, toutefois, dotnet seven est le plus récent et le meilleur Nous allons donc l'utiliser et vous pouvez continuer à utiliser dotnet seven. Donc, pour commencer, vous devez installer le SDK. Maintenant, il y a deux choses que vous devez installer. Vous souhaiterez installer le SDK pour les ressources de développement. Et bien entendu, vous pouvez choisir votre système d'exploitation en conséquence. Donc, si vous utilisez une machine Windows, vous souhaiterez utiliser le 64 bits et vous pourrez choisir les versions Mac ou Linux en conséquence. Mais à des fins d'hébergement, vous souhaiterez également installer le moteur d'exécution. Vous pouvez donc également installer le pack d'hébergement pour Windows ou la version appropriée en fonction de votre système d'exploitation. Vous pouvez donc télécharger et installer ces deux. Cela étant dit, nous utiliserons Visual Studio Code car Visual Studio Code est multiplateforme. Je ne veux pas m'adapter à tous les systèmes d'exploitation, aux moines, à Mac et à Windows. Nous allons donc utiliser Visual Studio Code. Cependant, si vous utilisez une machine Windows et que vous préférez utiliser Visual Studio, qui est un IDE entièrement puissant et très puissant, vous pouvez simplement vous en tenir à Windows et vous pouvez simplement télécharger et installez Visual Studio 2022, qui sera livré avec le SDK intégré. Donc je suis juste en train de le jeter dehors, non ? Donc, si vous utilisez Visual Studio Code, qui est beaucoup plus léger et compact. Et nous utiliserons de nombreuses commandes CLI dotnet. Ensuite, vous pouvez installer le SDK manuellement. Si vous souhaitez utiliser Visual Studio 2022. Et je vous montrerai comment configurer Visual Studio 2022 dans une prochaine leçon, puis vous pourrez ignorer l'étape de téléchargement du SDK. Cependant, je vous recommande obtenir le runtime malgré tout. Donc, une fois que vous les avez téléchargés et installés, et c'est une installation simple, vous suffit de cliquer sur Suivant, Suivant, Suivant, entouré d'étoiles, puis vous pouvez fermer la fenêtre. Vous pouvez ensuite passer à la leçon suivante où nous allons configurer Visual Studio Code. 4. Installer un code Visual Studio (tout système d'exploitation): Très bien, les gars, bon retour. Nous avons donc installé notre SDK et l'étape suivante consiste à installer Visual Studio Code. Ou Visual Studio Code est un IDE très flexible et léger nous a été fourni par Microsoft. Et en plus de tout cela, il est gratuit et multiplateforme, nous pouvons donc l'utiliser sur Mark, Windows ou Linux. J'utilise une machine Windows, donc bien sûr, je procéderais au téléchargement pour Windows, mais assurez-vous de choisir celui qui convient le mieux, vous savez, le téléchargement et l'installation sont très faciles. Vous obtiendrez un package MSI qui, une fois que vous aurez double-cliqué dessus, lancera le programme d'installation et, après quelques clics, il installera tous les fichiers binaires et sera installé sur votre machine. Et juste en guise d'aperçu, voici ce à quoi vous pouvez vous attendre. Vous pouvez vous attendre à quelque chose comme ça. Cela fait un moment que je l'ai installé et j'ai utilisé une tonne de projets. Vous verrez donc peut-être que j'ai des icônes que vous n'avez peut-être pas prêtes à l'emploi. Par exemple, si c' est la première fois, il se peut que vous n'ayez rien de récent. Mais vous pouvez toujours démarrer Open File, Open Folder, vous pouvez le faire. Et je mets le dépôt sur votre machine. Et puis sur le côté, vous avez la fenêtre de l'Explorateur. Tu peux faire des recherches, tu peux faire des trucs de contrôle de source. Vous pouvez exécuter et déboguer. Ensuite, vous avez Remote Explorer et des extensions. Et puis l'autre point est que j'ai ici d' autres plugins que j'ai issus de projets parallèles pour ce cours. Elles ne sont pas absolument nécessaires. Mais je m'assurerai de vous indiquer les éléments dont vous aurez besoin au fur et à mesure et comment vous pouvez configurer votre environnement et l'optimiser pour le projet sur lequel nous allons travailler. Ainsi, une fois que Visual Studio Code est installé, vous êtes prêt à partir. Il possède de nombreuses fonctionnalités intégrées que nous explorerons en cours de route. Toutefois, si vous préférez utiliser Visual Studio, car le code Visual Studio nécessite utilisation de nombreuses commandes d'interface en ligne de commande. Et Visual Studio fait du bon travail vous aidant à simplement cliquer et à accomplir certaines de ces tâches. Je vais donc vous montrer comment installer Visual Studio 2022, et ce sera dans la prochaine leçon. 5. Alternative - Installer Visual Studio 2022 (Windows et Mac): Très bien, les gars, dans cette leçon, je vais juste vous expliquer tout un week-end à installer Visual Studio sur notre machine. Visual Studio est l'IDE phare. Et ID est l'abréviation d'environnements de développement intégrés, tels que l'IDE phare que nous a proposé Microsoft. Il s'agit d'un IDE verbal complet. Cela nous permet de tout faire, de la conception à la mise en œuvre en passant par la livraison de notre application. Et il est disponible pour plusieurs systèmes d'exploitation, tandis que plusieurs, est-à-dire Windows et Mac OS pour cela, en fait, à partir de ce site Web, Visual Studio.microsoft.com, vous pourriez y aller pour télécharger également Visual Studio Code, qui est le petit frère multiplateforme de Visual Studio. Maintenant, si vous souhaitez obtenir Visual Studio, vous avez trois options. Vous avez l'édition communautaire, professionnelle et professionnelle, des communautés gratuites pour les apprenants individuels ou les utilisations académiques. Et puis les entreprises et les entreprises s'adressent davantage aux entreprises ou aux pratiques de développement commercial. D'accord ? Donc, à tout moment de ce cours, nous utiliserons simplement la communauté car c'est une expérience d'apprentissage pour nous tous. Ils vous aident à choisir l'outil qui vous convient le mieux. Et je suis sûr que lorsque des notes cycliques apparaissent, ils vont suggérer Visual Studio Code pour Linux. Mais ensuite, si je choisis Mark et que je commence à sélectionner certains éléments en fonction de ce que je sélectionne le MAC de Visual Studio Code. Ou ils peuvent voir Visual Studio pour Mac. Et puis si je choisis Windows, peu importe ce que je choisis, Visual Studio sera la meilleure sélection, d' accord, mais pas pour Java. D'accord ? Cela peut donc vous aider à prendre une décision quant aux outils qui vous conviennent le mieux. Cela étant dit, comme je l'ai dit, Visual Studio Code est un peu plus compact, il utilise donc moins de ressources et il est simplement plus facile à utiliser pour des opérations d'édition rapides. Visual Studio est très puissant et il est utilisé pour de nombreuses applications avancées. Dans cette leçon, je vais simplement vous expliquer ce à quoi vous pouvez vous attendre lorsque vous installez Visual Studio. Alors, tout d'abord, vous voudriez télécharger Visual Studio. Ainsi, lorsque vous téléchargez Community, vous obtenez un programme d'installation. Et une fois que vous aurez ce programme d'installation et que vous aurez appris, vous obtiendrez une fenêtre qui ressemble à celle-ci. Je l'ai déjà installé, donc je vous montre simplement certains des modules, à quoi ressemble l' interface utilisateur et comment vous pouvez procéder à partir d'ici. Pour ce cours, nous n'avons vraiment besoin que d'asp.net et de développement Web, ce que nous appellerons une charge de travail. Chacune de ces cases représente notre charge de travail et nous donne accès aux différents types de projets disponibles pour différents types d' activités de développement, n'est-ce pas ? Donc, asp.net et développement Web, nous allons créer une application dotnet sur des applications Web. C'est donc ce que nous voulons absolument. Et il inclura en fait le SDK. Sdk ainsi que d'autres modèles de projet. Les outils dont nous avons besoin pour le développement Web. Cela étant dit, si vous souhaitez avoir d'autres charges de travail, comme pour le développement de postes de travail Dotnet ou le développement de Dotnet Maui. Ensuite, vous pouvez toujours prendre les différentes charges de travail que vous souhaitez avoir. Bien entendu, plus vous cochez la case, plus elle occupera de place sur votre machine. Soyez donc très prudents. Cependant, à ce stade, encore une fois, tout ce dont nous avons vraiment besoin pour ce cours, ce sont les charges de travail d'asp.net et de développement Web. Vous pouvez donc continuer puis cliquer sur Installer, ce qui apparaîtrait ce qui apparaîtrait ici au lieu d'être installé lors du téléchargement. Une fois que vous aurez fait cela, Visual Studio prendra le relais et Visual Studio prendra le relais téléchargera tous les outils nécessaires à cette charge de travail. Et puis cela vous permettra de leur présenter des résultats. Ensuite. Lorsque vous le lancez, vous pouvez être invité à vous connecter. Vous pouvez donc utiliser votre compte réel si vous en avez un ou créer un compte réel et utiliser ce compte pour votre installation de Visual Studio. Maintenant, juste pour vous donner un aperçu rapide de ce à quoi ressemble l'interface utilisateur de Visual Studio 2022. Je vais simplement continuer avec tous les câbles pour lancer simplement l'interface utilisateur. Et ce que nous avons ici serait un explorateur de solutions, qui listera tous les fichiers et dossiers qui feront partie de votre projet lorsque nous le créerons. Et vous pouvez continuer et exécuter le projet reste attaché. Non, comme il est vide, nous pouvons exécuter le projet. Et cette interface utilisateur prend vraiment vie une fois que nous y sommes, si vous avez de nombreuses intégrations, comme avec Git, et que nous pouvons accéder à nos contenus GitHub ici de la même manière que nous pouvons le faire à partir de Visual Studio Code. Et si vous souhaitez utiliser Visual Studio, c'est très bien. Pour les premières leçons, je vais vous montrer les parallèles entre l'utilisation Visual Studio Code et l'utilisation de Visual Studio. Ainsi, au moins, vous pouvez avoir une idée de laquelle pourrait être la meilleure. Mais pendant la majeure partie du cours, nous utiliserons Visual Studio Code simplement parce qu'il est multiplateforme. Ainsi, quel que soit le système d'exploitation que vous utilisez, vous pouvez suivre sans problème. Voilà, pour la configuration hollywoodienne de Visual Studio, c'est assez simple. Et si, à tout moment, vous souhaitez augmenter vos charges de travail, vous pouvez toujours revenir au programme d'installation. Vous pouvez donc simplement rechercher Visual Studio Installer sur votre machine. Cela vous ramènera à ce point. Et vous pouvez sélectionner ou désélectionner les charges de travail selon vos besoins. 6. Installer SQL Server Express (Windows): Bienvenue dans la première vidéo de ce cours, qui présente SQL Server 2017. Et aujourd'hui, nous allons étudier le téléchargement et l'installation de ce logiciel. À présent, une base de données est à peu près une collection logique de données connexes. Et c'est tout, en résumé, si vous avez une expérience préalable avec les bases de données, cela vient probablement de Microsoft Access ou MySQL. Et vous voulez simplement étendre vos connaissances au-delà de cela. Et même si vous n'avez aucune connaissance préalable des bases de données, s' agit d'un excellent cours pour vous familiariser avec les capacités des bases de données, la préparation à mettre en place et la manière dont vous pouvez pour commencer votre parcours vers administrateur de base de données ou simplement pour manipuler les données d' une base de données ou simplement pour manipuler comme je l'ai déjà dit, pour commencer votre parcours vers le poste d'administrateur de base de données ou simplement pour manipuler les données d' une base de données, nous explorerons tous ces concepts à l'aide de Microsoft SQL Serveur 2017. Et je l' ai déjà sur mon écran, la page de téléchargement. J'ai donc inclus l'URL comme indiqué ici dans les notes de cours. Et cela vous permettrait de télécharger le moteur de base de données Microsoft SQL Server 2017 Express. Et la brève description est qu'il s'agit d'un système de gestion de base de données puissant et fiable qui vous permet créer des sites Web et des applications de bureau légers. Donc c'est plutôt bien, assez décent est un bon point de départ. Si vous n'avez pas cette machine haut de gamme haut de gamme, vous avez juste une machine ordinaire, vous voulez juste commencer. Il s'agit d'une excellente option. Il y a d'autres ajouts que vous verrez probablement dans vos recherches, mais si vous suivez ce lien, vous éviterez tout ce bruit et toutes les autres éditions. Et nous pouvons commencer avec Express. Vous pouvez continuer, cliquer sur ce téléchargement et lancer initialement cette procédure de téléchargement. Et puis un autre logiciel qui nous intéresse est le SQL Server Management Studio. Le Management Studio vous permettra désormais d' interagir réellement avec la base de données, interroger les données et écrire ce que nous appelons requêtes dans un langage utilisant Cloud SQL. Nous aborderons toutes ces questions en temps voulu. Mais pour l'instant, vous pouvez à nouveau suivre cette URL dans les notes de cours. Et nous pouvons simplement cliquer sur ce bouton de téléchargement pour initialiser ce téléchargement, qui peut prendre un certain temps. C'est un dossier assez volumineux. Dès que le téléchargement sera terminé, nous nous réunirons à nouveau et nous passerons en revue le processus d'installation. Salut les gars, bon retour. Maintenant que nos téléchargements sont terminés, nous allons commencer par installer notre moteur SQL Express. Il suffit donc de cliquer sur ce fichier d'installation, cliquer sur Exécuter, puis nous serons accueillis par cet écran d'installation. Nous pouvons cliquer sur Basic. Le client vous autoriserait à sélectionner certaines fonctionnalités. À ce stade, nous n'avons pas besoin de le faire. Nous pouvons simplement opter pour le basique nous pouvons aller de l'avant et accepter les termes et conditions. Tu peux le lire jusqu'au bout si tu le souhaites. Si vous avez d'autres idées, vous souhaiterez peut-être modifier ce répertoire. Sinon, vous pouvez tout aussi bien l'utiliser par défaut. Et vous pouvez voir ici que sur 6 Go, nous n'avons vraiment besoin que de 300 Mo. Je vais donc simplement continuer et cliquer sur Installer. Et cela peut prendre un certain temps, nous nous réunirons à nouveau une fois que cela sera terminé. D'accord, donc à la fin de cette procédure d'installation, vous verrez que vous avez réussi à effectuer cette installation. Ensuite, ils vous donnent quelques informations. Ils vous donnent une chaîne de connexion. Donc, si vous vouliez développer une application à partir de cette base de données, vous devriez probablement faire attention à cette partie. Eh bien, ce n'est pas vraiment nécessaire pour le moment. Et ils vous donnent simplement les chemins d'accès aux fichiers journaux et aux autres éléments essentiels de l'application. , un autre élément essentiel de ce processus d'installation Comme mentionné précédemment, un autre élément essentiel de ce processus d'installation consiste à installer le studio du serveur de gestion Sequel. Ensuite, lors de cette installation d'Express Edition, ils vous donneront possibilité de dire installer SSMS. Et cela va vraiment faire apparaître votre navigateur et accéder à, eh bien, je me suis dit que ce discours, le lien vers cette page est déjà inclus dans les notes de cours. Et ici, à partir de là, vous pouvez télécharger directement le Management Studio. Donc, si vous ne l'avez pas fait auparavant, vous pouvez simplement suivre ce lien et obtenir déjà ce fichier, le télécharger ici. Je vais donc simplement lancer cette installation. Tout cela lancera le programme d'installation et ils vous donneront qu'un seul bouton pour cliquer sur celui qui est installé. Bien entendu, vous pouvez modifier cet emplacement si vous avez d'autres idées pour le chemin. Sinon, vous pouvez le laisser comme valeur par défaut et cliquer simplement sur Installer. Cela peut également prendre un certain temps, c'est pourquoi nous nous réunirons à nouveau à la fin de ce processus. D'accord, notre installation est terminée et il ne nous reste plus qu'à redémarrer pour continuer. Nous pouvons donc le faire rapidement. Et nous, dans la prochaine vidéo, nous allons commencer à voir comment nous commençons à tout assembler. Qu'est-ce qu'une base de données et pourquoi l'apprentissage de cette compétence est si important ? Restez à l'affût. 7. Alternative - Installer SQL Server sur Docker (tout système d'exploitation): Dans l'état actuel des choses, Microsoft SQL Server n'est presque exclusivement utilisable que sur des machines Windows. Les étapes d'installation précédentes n'ont peut-être pas bien fonctionné Si vous n'utilisez pas une machine Windows, si vous utilisez Mac ou Linux, ne vous inquiétez pas, il existe toujours une solution pour vous. La solution numéro un serait que vous puissiez utiliser une machine virtuelle, sorte que vous puissiez utiliser VMware ou autre outil prenant en charge la virtualisation. Et vous pouvez lancer une machine virtuelle dotée d'un système d'exploitation Windows, puis l'utiliser. Sachez que cela peut nécessiter beaucoup de ressources. Et je ne vais pas vous faire subir tout cela juste pour utiliser un seul logiciel. L'alternative à un environnement virtualisé pour Windows serait d'utiliser Docker, qui est affiché sur mon écran. Plus sombre, vous pouvez facilement vous y rendre en vous rendant sur docker.com. Darker est une application très rapide qui nous permet d' utiliser ce que nous appelons des conteneurs au lieu d'un environnement virtualisé complet. Ce que nous pouvons faire, c'est utiliser Docker pour simuler l' environnement nécessaire et uniquement l'environnement nécessaire fonctionnement d'une application particulière sans avoir besoin de l' ensemble du système d'exploitation. Nous allons donc utiliser Docker pour simuler un environnement pour SQL Server. Ensuite, nous pourrons nous connecter au serveur SQL pour voir, même si vous n'utilisez pas de machine Windows. Maintenant, la première chose que vous remarquerez, c'est qu'il est disponible pour tous les systèmes d'exploitation, à peu près, n'est-ce pas ? Donc, si vous utilisez Windows, vous pouvez toujours utiliser Docker. Si vous avez un appareil Apple, un appareil basé sur Linux ou un appareil basé sur une puce Intel, vous pouvez faire de même. Nous installons Docker. Alors allez-y, téléchargez-le et installez-le. Je l'ai déjà installé sur mon ordinateur Windows, mais une fois que vous l'aurez installé, vous aurez accès aux commandes de ligne de commande Docker. Une fois que vous l'avez installé, appuyez sur Pause, laissez-le s'installer, puis vous pouvez continuer. Je vous encourage à lancer votre terminal. Encore une fois, j'utilise une machine Windows, mais votre terminal sous Linux ou Mac OSX ressemblerait beaucoup à celui-ci. Et vous pouvez simplement exécuter la commande docker juste pour vous assurer qu'elle est installée. Et si vous voyez quelque chose comme ça, c'est qu'ils n'avaient pas accès aux commandes de la CLI Docker. Très bien, donc ce que nous voulons faire à ce stade c'est exécuter une commande appelée docker. Tirez pour zoomer légèrement pour faciliter la lecture. Nous allons donc faire Docker, Pull, Docker Pull. Nous allons obtenir ce que nous appellerons une image. Docker possède donc des fichiers prédéfinis qui correspondent à l'environnement nécessaire à une application particulière. Et c'est ce qu'on appelle des images. L'image que nous voulons est l'image Microsoft MS SQL Server. Nous allons donc créer un docker, l' appuyer sur cette image pour que vous puissiez appuyer sur Pause, en vous assurant de la taper exactement comme je l'ai fait. Et lorsque vous appuyez sur Entrée, le message « OK, je reçois la dernière version », puis vous verrez le téléchargement s'afficher. J'ai déjà extrait cette image, donc je l' ai déjà sur ma machine. Mais vous allez voir qu'il tire, puis il va commencer à afficher des indicateurs indiquant que le chargement est terminé. Et cela ressemblerait en fait à quelque chose de plus comme ça. Voici donc une capture d'écran que j'ai prise plus tôt lorsque je l'ai téléchargée. Et vous allez voir que cela va faire apparaître ces lignes qui ressemblent à ceci. Et vous allez avoir ces balises de téléchargement. Donc, une fois que c'est terminé, l'étape suivante consiste à l'exécuter. Pour l'exécuter, vous avez besoin de cette commande. Nous allons donc dire Docker, run, puis tiret e, et le EULA sera accepté. Ce qui se passe, c'est que SQL Server contient généralement l'un de ces documents dont vous avez besoin pour accepter les termes et conditions. Nous le mettons donc simplement dans un paramètre indiquant que oui, nous acceptons les termes et conditions. Et puis un autre qui dit un mot de passe. Donc, si vous examinez le processus d'installation lorsque nous utilisons Windows, nous pouvons utiliser l' authentification Windows connecter à la base de données, n'est-ce pas ? Tout ce dont nous avons besoin, c'est d'un nom de machine. Nous pouvons utiliser un utilisateur Windows, l'utilisateur Windows actuel, l' authentification Windows et simplement nous connecter. Maintenant, comme c'est plus sombre et qu'il s'agit d'un conteneur, il n'y a ni fenêtres, ni portes, ni Mark, soit il n'y a pas d'authentification Linux. Ce n'est donc pas vraiment que vous puissiez simplement vous connecter en utilisant l'utilisateur par défaut sur votre ordinateur. Cette étape s' applique donc que vous utilisiez Windows, Mac, Linux, etc. Nous devons donc spécifier un mot de passe SA. AC est donc l'utilisateur par défaut, ce qui signifie administrateur système ou administrateur système. Chaque fois que vous installez un moteur de base de données pour Microsoft SQL Server, vous obtenez cet utilisateur de dissertation. Nous allons configurer ce SA, mot de passe. Et vous pouvez saisir le mot de passe de votre choix. Je suis juste en train de saisir un mot de passe fort ici. Et il est très possible que vous le voyiez dans d'autres démos que vous pourriez regarder n'importe où sur Internet. Ce mot de passe n'est donc pas nécessairement propre à moi ou à cet exercice. Vous pouvez saisir n'importe quelle valeur de mot de passe avec laquelle vous vous sentez à l'aise. Et vous vous souvenez, je divise simplement le mot mot de passe fort, bien sûr, avec des caractères, des chiffres et quelques lettres majuscules. Ensuite, nous indiquons le port. Le port situé sur le front est important et nous voulons le traverser. Le port. À l'autre bout du côlon se trouve le port vers lequel il sera mappé. Cela signifie que SQL Server diffuse par défaut depuis le port 1433, qui est le port par défaut. Donc, sans rien faire, en spécifiant des ports ou quoi que ce soit d'autre, vous passerez toujours par 1433 une fois pour vous connecter. Cependant, Docker fonctionne dans son propre environnement spécialisé, nous devons donc cartographier. Il s'agit du port par défaut, puis c'est la machine à ports qui devra emprunter un tunnel pour accéder à ce sport. Vous pourriez donc simplement laisser cela comme 14331433. Si vous ne voulez pas que SQL Server soit déjà installé et que vous utilisez Mac et Linux, 14, 33, c'est bien. Vous n'avez rien à faire plus. Vous pouvez simplement vous connecter. Cependant, parce que j'utilise une machine Windows et que j'ajoute pour modifier mon port, car 1433 est déjà occupé par mon installation native de SQL Server. Je vous montre donc simplement que vous pouvez en faire 14, 14, 33 par défaut. Ou vous pouvez installer votre propre port si vous le souhaitez. Ensuite, la dernière chose à faire est de dire le tiret D, puis de spécifier l' image que nous voulons exécuter. Donc, en gros, nous disons que docker exécute cette image et s'assure que tous ces paramètres intermédiaires sont configurés. C'est essentiellement ce que nous venons de faire. Ainsi, lorsque vous appuyez sur Entrée et que vous êtes seul, celui-ci pour exécuter, il lance cette image dans l'interface utilisateur la plus sombre. Dans l'interface utilisateur plus sombre, vous allez voir quelque chose qui ressemble à ceci. Il va apparaître sous des conteneurs. Et vous pouvez voir ici que cela fait plusieurs conteneurs, non ? J'ai même un autre conteneur SQL qui ajoute du sel depuis le début. Et voici la nouvelle que je viens d'exécuter cette commande. Il a donc créé un tout nouveau conteneur pour Microsoft SQL Server. Et il fonctionne actuellement, et il fonctionne depuis 30 s. Et le port qu'il utilise est de 1 400, ce qui, si vous ne le modifiez pas et que vous utilisez le port par défaut 1433, serait 1433. Vous pouvez toujours arrêter et démarrer les conteneurs. Vous pouvez également supprimer et regarder ce qui se passe. Vous pouvez donc l'ouvrir dans le terminal et interagir avec lui ici. Vous pouvez également l'inspecter pour en vérifier l'état et examiner certaines configurations. donc quelques-unes des variables d' environnement que nous avions configurées. Quels sont les paramètres que nous transmettons ? Ensuite, vous pouvez également consulter les journaux. Voyez ici qu'il semble avoir démarré avec succès. Donc, une fois que j'aurai confirmé toutes ces choses, je voudrais me connecter. Désormais, pour Windows, nous pouvons utiliser le Microsoft SQL Server Management Studio. Cependant, Management Studio n'est pas nécessairement disponible sur Linux et Mac. L'alternative serait donc d'obtenir Azure Data Studio. Vous pouvez simplement effectuer une recherche sur Google et suivre la documentation Microsoft jusqu'à Azure Data Studio. Data Studio est un outil de base de données multiplateforme destiné aux professionnels. Et il peut fonctionner sous Windows, macOS, Linux. Vous pouvez donc procéder à l'installation de la version appropriée pour vous-même. Et bien sûr, vous pouvez consulter tous les avertissements pour vous assurer que vous êtes dans un état compatible. D'accord ? Le fait est que Data Studio peut faire la plupart des choses que le Management Studio est capable de faire, en particulier dans le cadre de ce cours, où nous en apprenons plus sur le développement de bases de données et les requêtes et tel. L'expérience finale sera légèrement différente. Certaines choses ne se trouveront donc pas au même endroit et pourraient ne pas être appelées de la même manière. fini pour se connecter. Laissez-moi simplement vous montrer comment nous nous connectons à. Vous pouvez donc voir que j'ai connecté pas mal d'ordinateurs au fil du temps ou qu'il a plutôt besoin d' une base, mais ici, je vais connecter Microsoft SQL Server, puis le serveur ici sera une virgule d'hôte locale, le port que vous avez spécifié. Dans mon cas, j'en ai spécifié 1 400 sur mon porche. Vous avez peut-être également spécifié 1 400 ou ce que vous avez spécifié. Une fois réglé, le conteneur devrait fonctionner et si vous ne vous en souvenez pas, vous pouvez simplement y retourner et regarder. Vous spécifiez ce port. Et puis pas l'authentification Windows mais la connexion SQL. Et notre nom d'utilisateur est SE, et notre mot de passe est le mot de passe que nous avons saisi. Et encore une fois, si vous ne vous souvenez pas du mot de passe, vous pouvez toujours accéder au conteneur, puis cliquer sur Inspecter. Et je peux simplement copier cette valeur, puis la coller. Et puis pour l'avenir, tu te souviendras juste du mot de passe. Ensuite, nous pouvons nous connecter. C'est alors le signe d'une connexion réussie. Moi, vous voyez ici cette version du système d'exploitation, donc je suis toujours sur ma machine Windows. Mais la version du système d'exploitation qu'il a détectée est Ubuntu. C'est donc ce que fait le conteneur. Il fonctionne dans un environnement Linux, mais il simule l'environnement, l'environnement exact nécessaire au fonctionnement de SQL Server. Si j'agrandis les bases de données, vous verrez qu'elles sont vides. Et puis, en gros, tout ce que nous pouvons faire depuis le studio de gestion, nous pouvons le faire à partir d'ici. Une chose que vous remarquerez peut-être, c'est que certains outils sont limités. Dans Management Studio, je peux donc facilement, ou plus facilement, cliquer avec le bouton droit de la souris et dire «  faire certaines choses », comme créer une nouvelle base de données, etc. , lors de la gestion dans le Data Studio Cependant, lors de la gestion dans le Data Studio, il devra probablement être écrit par script. C'est quelque chose que vous devez contrôler et créer un nouveau fichier script. Ensuite, pour créer une nouvelle base de données, vous devez dire créer une base de données. Ensuite, indiquez le nom, disons test db, puis F5, puis il sera lancé. Vous pouvez donc actualiser la liste des bases de données et vous verrez TSDB, n'est-ce pas ? Mais dans ce cours, nous allons voir comment créer à fois des scripts et utiliser l'interface utilisateur graphique de Management Studio. Vous devriez donc être capable de suivre très bien. Et quoi qu'il en soit, si vous rencontrez des difficultés, n'hésitez pas à nous contacter. 8. Installer Microsoft Data Studio: Salut les gars. Dans cette leçon, nous allons voir comment télécharger et installer Azure Data Studio. Maintenant, le nom est un peu trompeur car il commence par Azure, mais il ne s'agit pas d'un outil propre à Azure. Il s'agit d'un outil de système de gestion des données multiplateforme qui nous permet de nous connecter à n'importe quel type de source de données. Eh bien, au moins les sources de données Microsoft SQL Server, qu' elles soient hébergées localement, sont hébergées dans Microsoft Azure. Il y a d'autres choses que nous pouvons faire avec cet outil, mais nous ne les ferons pas nécessairement dans ce cours. La raison pour laquelle nous optons pour cet outil, cependant, est le fait qu'il s'agit d'un outil de base de données multiplateforme, qui peut fonctionner sous Windows, Mac OS ou Linux. N'oubliez donc pas que nous nous occupons du développement multiplateforme. J'essaie donc de vous montrer tous les outils qui peuvent nous aider à atteindre nos objectifs quel que soit notre système d'exploitation. Très bien, donc pour commencer, vous pouvez simplement Google Data Studio et vous probablement, ou vous pouvez dire un téléchargement nul de Dtau Studio. Et cela vous mènera à ce site Web, qui se trouve sur Microsoft Learn. D'accord. Et à partir de là, vous pouvez accéder aux différentes options de téléchargement. Donc, pour Windows, nous avons ces options. Et l'installateur utilisateur est un programme d'installation simple, qui serait très similaire à ce que nous avions avec Visual Studio Code. Nous avons le programme d'installation de macOS et nous avons la méthode Linux pour transférer les fichiers sur notre système. Donc, si vous avez besoin d'une instruction détaillée ou d'argent, vous pouvez faire défiler l'écran vers le bas et vous verrez la section ici pour l' installation de Windows. Et vous pouvez voir que vous pouvez simplement télécharger le programme d'installation pour Windows et procéder à l'installation. Vous pouvez également télécharger un fichier zip et le décompresser dans un emplacement, puis l'utiliser directement à partir de là. Très bien, je vais juste faire défiler l'option et voici la section d'installation de MAC OS. Et puis voici la section d'installation de Linux. Mais en fin de compte, nous finirons par obtenir une application qui ressemblera à ceci. Quand tu l'auras, tu pourras changer de thème et tout le reste. J'ai le thème sombre en tête. Vous pouvez toujours modifier ce thème de couleur si vous le souhaitez. Mais en fin de compte, cela nous permet connecter à n'importe quel type de source de données. Et voici les mises à jour en attente. Je le ferai plus tard. Mais nous pouvons connecter nos différents serveurs qu'ils soient ou non sur un hôte local. Par défaut, il s'agit de mon hôte local, l'instance SQL Express. J'ai également une instance Docker à ma disposition Plusieurs instances de Microsoft en tant que juris, tous mes serveurs sont là. D'accord ? Et nous pouvons faire des choses intéressantes. Nous pouvons faire des recherches, créer des blocs-notes et explorer un contrôle de source et des extensions. Comme je l'ai dit, il contient d'autres outils intégrés pour d'autres activités connexes n'y entrent pas. Mais pour l'instant, c'est un outil assez simple qui nous permet d'écrire nos requêtes. Nous pouvons créer notre base de données très simplement. Très bien, donc à notre retour, nous commencerons le développement. 9. Créer un projet MVC de base ASP.NET - Code Visual Studio: Bienvenue à nouveau, les gars. Dans cette leçon, nous allons créer notre application Web asp.net Core MVC. Maintenant, la première chose à faire est de lancer votre terminal. Le terminal peut avoir une apparence différente en fonction du système d'exploitation que vous utilisez. Si vous utilisez Linux, il aura une apparence différente de celle s'il n'est pas marqué. Eh bien, trop souvent, ils se ressemblent beaucoup. Mais si vous utilisez une machine Windows, vous devez rechercher PowerShell ou Command Prompt. J'utilise un PC Windows, donc j'ai en fait cette fenêtre appelée terminal, me donne accès aux différents types de terminaux que j' ai sur ma machine. Vous voyez donc ici que j'ai un onglet appelé Windows PowerShell, un autre onglet appelé invite de commande. Même si votre fenêtre ne ressemble pas nécessairement à ceci, vous pouvez faire tout ce que nous allons faire si vous utilisez une machine Windows, en utilisant l' invite de commande, dans les deux cas, de la même manière les commandes que nous exécuterons sur ma machine fonctionneront sur n'importe quel système d'exploitation. Je vais donc simplement fermer l'un de ces onglets et utiliser la fenêtre PowerShell. Et tout d'abord, nous voulons nous assurer de l'avoir installé. Si vous dites simplement dotnet puis tiret, tiret, tiret, vous verrez un joli petit imprimé ou similaire indiquant tous les temps d'exécution du dotnet que vous avez installés. Je fais du développement dotnet sur cette machine en particulier depuis la version 3.1. Vous voyez ici que j'en ai cinq et j'en ai aussi sept. Et si vous regardez en bas, vous verrez que j' ai également accès à des versions de six. Très bien, c'est la preuve que dotnet est correctement installé et vous voulez vous assurer que vous avez sept, car nous en utiliserons sept. Toutefois, si vous en avez installé six et que vous souhaitez en utiliser six, 90 % de ce que nous sommes en mesure de faire peut fonctionner avec six, là où il y a une différence. Je ne manquerai pas de le signaler. Maintenant que nous avons validé que dotnet est installé et que nous avons accès à l'interface de ligne de commande dotnet. Ce que nous devons faire maintenant, c'est simplement agrandir un peu pour que les commandes soient plus visibles. Ce que nous devons faire, c'est accéder à un répertoire dans lequel nous savons que nous voudrons avoir notre projet. Ensuite, nous créerons notre nouvelle application dotnet. Je vais juste dire CLS pour effacer l'invite de commande. Et puis le plus grand encore. Maintenant, ce que nous pouvons faire, c'est naviguer vers le dossier, qu'il ressemble à un cd, puis vous choisissez votre destination. J'ai donc un dossier spécial sur mon lecteur C que j' utilise pour les projets. Je peux donc accéder à ce répertoire. Ensuite, je vais exécuter une commande qui indique dots net new MVC. Puis je suis allée voir un tiret, ou ce tiret 0 signifie où est-ce que je veux mettre ce projet ? J'ai donc voulu créer un nouveau dossier. Si je ne le fais pas où que je sois, cela créera un dossier. Vous auriez donc pu créer un dossier pour vous-même, que ce soit à l'aide de votre interface utilisateur ou de votre ligne de commande. Et avant d'entrer dans le vif du sujet, permettez-moi de vous montrer comment vous créeriez le répertoire suivant si je disais MK dir directory et que je lui donnais ensuite un nom, disons tester MVC up. Ensuite, cela créerait cela. Ensuite, je pourrais dire cd pour tester l'application MVC. Et vous voyez ici qu'il s' agit d'un certain nombre de dossiers. Et puis je pourrais simplement dire dotnet, nouveau MVC. Et puis cela permettrait de créer un tout nouveau Asp.net Core Web up en utilisant les modèles Model View Controller. C'est donc ce que signifie MVC, au cas où cela ne serait pas clair auparavant. Et ils vous font savoir qu' il a été créé avec succès. Ils vous font donc savoir qu'ils ont créé le projet dans cette voie. Et ils ont donné au projet le même nom que le dossier dans lequel il a été créé. Très bien, c'est donc une bonne façon de créer un nouveau MVC. Cependant, nous n'allons pas travailler sur MVC up, donc je vais juste faire cd point point, ce qui me ramène à un répertoire et me permet de vider nouveau mon écran de tous les messages. Passez simplement en plein écran cette fois-ci. Et puis faisons-le de bout en bout. Donc, si je veux une toute nouvelle application Dotnet MVC, je dis dotnet new MVC, puis je la verrai avec un tiret ou pas zéro, mais tout, puis je lui donnerai le nom du répertoire. Dans ce cours, nous allons maintenant mettre en place une toute petite gestion scolaire. Juste assez pour aider une petite école empêcher les élèves, les professeurs, de suivre les cours qu'ils proposent, non ? Donc je vais juste dire que la gestion de l'école s'améliore, d'accord ? Alors je vais juste dire MVC, juste pour que nous sachions que c' est un MVC à coup sûr. Et puis, lorsque j'appuie sur Entrée, je vais créer ce nouveau répertoire, l' application School of Management point MVC. Et puis, dans ce nouveau directeur, crée le fichier de projet qui l'accompagne. Très bien, donc c'est une autre façon de procéder. Nous pourrions simplement dire dotnet, nouveau tiret MVC puis spécifier le nom du projet. Il fera à la fois le répertoire et le fichier de projet en un seul coup. Maintenant, lorsque nous voulons ouvrir ce projet, nous avons un joli raccourci clavier que nous pouvons utiliser à la place d'un autre raccourci de commande. Donc, si je navigue vers ce dossier et que je dis gestion scolaire de MVC, donc CD, sautez là-bas. Et puis je peux dire des points codés. Regarde ce qui se passe. C'est le cas si vous utilisez du code Visual Studio. Ainsi, une fois que vous avez Visual Studio Code, vous avez cette variable d'environnement dans votre ligne de commande. Et puis, une fois que vous dites code, point final, Visual Studio Code s'ouvre dans le contexte du dossier dans lequel vous avez actuellement accédé dans le terminal. Et bien sûr, nous y sommes avec Visual Studio Code et voici tous les fichiers qui ont été créés dans ce répertoire particulier. Bien sûr, il peut naviguer, ils utilisent votre explorateur si vous le souhaitez. Mais pour l'instant, c' est une preuve suffisante que nos efforts de création de projets ont été couronnés de succès. Je ne vais pas passer par des extensions ou quoi que ce soit d'autre. Je voulais juste vous montrer comment créer un tout nouveau MVC l'aide de la CLI et l' ouvrir complètement à l'aide de Visual Studio Code. Sachez que juste avant de clore cet exercice, je voulais juste souligner qu'il y en a plusieurs. 10. Créer un projet MVC de base ASP.NET - Visual Studio: Très bien, nous avons donc examiné comment créer un nouveau projet à l'aide de la CLI dotnet. Et cela vaut vraiment pour tout type de système d'exploitation, surtout si Visual Studio n'est pas pris en charge sur votre système d'exploitation. Toutefois, si vous souhaitez utiliser Visual Studio pour les exercices de développement, nous allons simplement suivre les étapes simples pour créer un projet similaire à l'aide de Visual Studio. Visual Studio est un IDE très puissant nous a été fourni par Microsoft pour le développement de réseaux Internet. Et il regorge de toutes sortes de fonctionnalités dont vous avez besoin. De nombreuses extensions et de nombreux modules complémentaires avec d'autres outils pour vraiment accomplir les mêmes exploits. Cela dit, d'autres outils sont capables et les ressources à utiliser sont prêtes à l'emploi. Remarque sur la gauche, vous verrez que j'ai une liste de projets récents. Si c'est la première fois que vous utilisez Visual Studio, il se peut que vous n'ayez pas beaucoup de temps libre. C'est très bien. Cependant, nous voulons nous concentrer sur la section Get Started afin de pouvoir commencer par cloner notre référentiel, ouvrir un projet ou une solution existante, ou un dossier contenant peut-être un projet existant ou nous peut créer un nouveau projet. Nous pouvons également continuer sans code. Je pense que nous avons choisi cette option la dernière fois que nous avons examiné Visual Studio. Cependant, cette fois, nous allons dire « Créer un nouveau projet ». Et puis cela va charger un certain nombre de modèles de projet. Ainsi, en fonction des charges de travail que vous auriez sélectionnées pour Visual Studio, il se peut que vous ayez plus ou moins de charges de travail que celles que j'ai ici. D'accord ? La plus importante est celle où la création, qui est MVC sait que c'est une énorme liste nous pouvons filtrer en fonction des langues. Nous voulons donc uniquement voir des modèles C-sharp. Peut-être voulons-nous uniquement voir des modèles pour notre type de plateforme et pour des types de projets particuliers, n'est-ce pas ? Ou on peut simplement chercher. Donc je sais que je veux MVC, je peux simplement rechercher MVC. Et puis ici, ils vont me donner l'API Web. Non, ce n'est pas ce que je veux. Et puis je vois ici qu' ils me proposent une application Web avec le contrôleur de visualisation du modèle MVC. C'est donc celui que je vais sélectionner, choisissez Suivant. Ensuite, ils vont me demander, d' accord, quel devrait être le nom du projet ? Cela va donc aller dans un répertoire par défaut différent de mes précédents. Je vais donc lui donner le même nom juste pour montrer un certain niveau de cohérence. Très bien, donc la direction de l'école met MVC au point. Ensuite, je peux appuyer sur Suivant. Ensuite, il va me demander le type de framework. Nous avons donc déjà remarqué que nous avions différents types de frameworks ou que différents frameworks pouvaient être installés. Et ce que nous allons faire dans ce cours, Let's Seeks, peut le faire à partir de sept ans, peut le faire là où il y a une différence. Je le ferai certainement remarquer. Mais pour ce cours, nous allons utiliser dotnet seven et nous pouvons choisir un type d'authentification par défaut. Maintenant, ce sont des options que nous aurions pu fournir dans la CLI car je n'ai fourni aucune option dans la CLI. Je ne ferai rien de plus ici. Hein ? Et je ne ferai aucune de ces choses. Ce que je vais faire, c'est simplement cliquer sur Créer. Après avoir cliqué sur Créer, vous pouvez ouvrir notre Visual Studio avec nos projets. Nous avons donc l' Explorateur de solutions par défaut, ce panneau se trouve en fait sur le côté droit. Mais je trouve qu'il est plus facile à utiliser lorsqu'il est sur le côté gauche. Vous pouvez donc faire glisser ces panneaux et les placer où vous le souhaitez. Bien sûr, la gauche ou la droite sont généralement un bon endroit pour avoir quelque chose comme ça, c'est-à-dire vous montrer tous les fichiers, mais j'aime bien l'avoir sur la gauche. D'accord ? Vous avez également accès à outils de gestion de base de données intégrés. Ainsi, avec Visual Studio, vous n'avez même pas besoin du Data Studio, car vous pouvez vous connecter à votre base de données depuis ici. Et de l'argent, dans une certaine mesure, en exécutant des requêtes, créant de nouvelles tables et en tant qu'objets de base de données selon les besoins. Très bien, Visual Studio est donc très puissant et lorsque vous voulez exécuter, vous pouvez appuyer sur F5 sur votre clavier ou appuyer sur ce bouton Exécuter en haut, qui contient les lettres HTTPS. Mais si vous utilisez dotnet six, les lettres risquent de ne pas voir HTTPS. se peut qu'ils aient simplement le nom du projet où vous voyez HTTPS ici, cela indiquerait le point MVC de la direction de l'école, et c'est très bien. Ils feront tous les deux la même chose. Il s'agit simplement de savoir comment ils sont classés ou appelés dans ces paramètres de lancement, ce fichier JSON, où il décrit les différents profils. Vous aurez donc un profil HTTP qui s'exécutera sur une configuration HTTP. Ensuite, il est également prêt à l'emploi avec HTTPS, qui fonctionnera avec les paramètres HTTPS. D'accord ? Vous pouvez également être invité à faire confiance au certificat, aux certificats de développement. Si vous êtes invité à cliquer sur Oui. Et je vais juste courir et voir à quoi ça ressemblerait. Donc, il construit le projet, c' est-à-dire qu'il va compiler, examiner tout le code, s'assurer que tout va bien. Et puis si tout va bien, je vais le lancer ici. Le terminal, ou j'ai également un terminal qui fonctionne dans Visual Studio. Et cela me montre qu'il écoute maintenant sur le port HTTPS sports 7212 et le port HTTP 5294. En arrière-plan. Il a également lancé mon navigateur par défaut, et il aurait utilisé par défaut le port HTTPS. Et voici notre application Web exécutée depuis Visual Studio. Encore une fois, Visual Studio est très puissant et il nous permet d' accomplir un certain nombre de choses en cliquant simplement ici et là. Ils nous fournissent de nombreux outils et il est très facile naviguer et de démarrer. Cependant, encore une fois, tous les ordinateurs et tous les systèmes d'exploitation ne sont pas compatibles avec Visual Studio. Nous allons donc nous concentrer sur le développement à l'aide de Visual Studio Code et de la CLI dotnet. Cependant, je ferai de mon mieux pour établir les parallèles où vous pourriez avoir besoin de savoir comment accomplir la même chose avec Visual Studio. 11. Code de studio visuel: Bienvenue à nouveau, les gars. Dans cette leçon, nous allons faire une petite tournée de Visual Studio Code , n'est-ce pas ? C'est un éditeur très polyvalent et il est bon de savoir où en sont les choses et de comprendre certaines des instructions que nous pouvons voir au fur et à mesure. J'ai donc ouvert notre projet point MVC de l'application School of Management que nous avons créé auparavant. Et si vous souhaitez ouvrir notre projet, supposons que Visual Studio Code ferme et que vous souhaitiez y revenir. Vous avez la possibilité d'utiliser l' interface de ligne de commande et d'y accéder. Ou vous pouvez en fait aller dans Fichier et dire Ouvrir le dossier. Ensuite, à partir de là, vous pouvez accéder au dossier, puis sélectionner le dossier. Et puis vous aurez la même expérience avec Visual Studio coder, nous chargerons simplement tous les fichiers qui se trouvent actuellement dans le dossier de cette section appelée Explorateur. Vous pouvez ancrer cet explorateur afin d'obtenir plus d'espace pour votre code. Ou vous pouvez l'avoir sur le côté, il peut le redimensionner à volonté. Écrivez parfois, vous ne voulez tout simplement pas qu'il soit si ouvert. D'accord ? Vous avez également la possibilité de tout rechercher. Donc, si je recherche le dernier MVC, il me montrera simplement tous les endroits que je peux rechercher et remplacer assez facilement. Tout remplacer, c'est en remplacer un à la fois. Bien entendu, je vous suggère un à la fois pour les opérations de masse où vous pourriez avoir des conflits avec ce que vous recherchez, n'est-ce pas ? Vous devez donc toujours faire attention à cette recherche et à ce remplacement, en particulier pour les opérations groupées. Ensuite, nous avons l'accès au contrôle de source. Maintenant, vous pouvez voir ici une option qui vous suggère d'installer Git pour votre système d'exploitation. Maintenant, je suis sous Windows. Donc, si je n'ai pas déjà installé Git, vous verrez installer Git pour Windows. Parce que ce qui se passe, c'est que Visual Studio Code est directement intégré à Git. Et cela vous permet de tout exécuter, d' obtenir des commandes d' ici très confortablement sans avoir à accéder à la CLI. Très bien, donc connaître les commandes Git est cool. Mais avec Visual Studio Code, vous pouvez en quelque sorte être causé par le fait d'en avoir une connaissance approfondie. Vous voulez donc aller de l'avant et accéder à votre système d'exploitation. Nous utiliserons GitHub. Vous voyez donc ici qu'il y a un joli gros bouton rouge qui indique que vous avez publié un GitHub, car en quelques clics, nous pouvons envoyer notre projet sur GitHub et nous le ferons plus tard. Nous n'avons donc pas à nous inquiéter à ce sujet. Ensuite, il y a run and debug. Run and Debug nous permet en fait d'exécuter notre projet. Très bien, grâce à notre expérience Visual Studio, vous avez vu que nous pouvions cliquer sur le bouton et notre projet a été lancé. Eh bien, c'est ce que Runner Depot fait ici. Nous verrons comment cela fonctionne par rapport à la façon dont nous pouvons également le faire dans la CLI. Je ne voulais pas ignorer Remote Explorer. Et je passe cette question parce que vous ne l'avez probablement pas. Cet explorateur à distance est l'un de mes plugins supplémentaires. Et tout ce que vous voyez sur le côté de mon ordinateur et que vous ne voyez pas pour choisir sur votre ordinateur signifie que ce sont des extensions supplémentaires que j'ai installées pour mes propres besoins. Je ne vais pas donner la priorité à ce qui n'est pas absolument nécessaire pour que vous puissiez suivre ce cours. La prochaine icône majeure à laquelle vous devriez prêter attention serait donc celle des extensions. Maintenant, sous Extensions, vous verrez que vous pouvez installer différentes extensions sur support pour différents types de projets en fonction de vos besoins. Je travaille donc avec Azure. J'en ai pas mal car vos extensions sont installées, non ? Mais j'ai aussi des extraits Bootstrap Five pour me faciliter la vie. J'ai aussi un extrait en C-sharp. Et vous avez peut-être vu apparaître des instructions indiquant extension C-sharp est nécessaire en fonction du type de projet. Donc parce que nous allons réaliser un projet C-sharp dans Dotnet. L'extension C-sharp est tout à fait logique car elle prend en charge la syntaxe de codage C-sharp IntelliSense, la saisie automatique , etc. Je suggère donc que vous attendiez avec impatience l'extension C-sharp. Non. Pour installer une extension, vous devez effectuer une recherche le marché des extensions en haut, et vous pouvez simplement écrire C pointu. Et puis celle-ci sera en tête de liste car il s'agit d'une extension Microsoft officielle. Vous pouvez cliquer dessus. Ensuite, lorsque vous voyez tous ces boutons, vous verrez en fait un bouton d' installation d'extension. si je devais cliquer sur un bouton, je n'ai pas le bouton de désinstallation que vous verriez. Vous pouvez donc l'installer et cela pourrait nécessiter redémarrage de votre Visual Studio Code. Il existe un certain nombre d'extensions pratiques et vous devez toujours consulter l'éditeur de l'extension. Et une chose que j' utilise également pour l'évaluer, c' est le nombre de téléchargements qu'il contient. L'éditeur est un, mais le nombre de téléchargements s'ajoute au cas où vous ne le connaîtriez pas nécessairement. Le nombre de téléchargements varie également. Un très bon indicateur de sa stabilité et de son bon usage. Maintenant, une autre chose que vous remarquerez peut-être, et je crois que je l'ai déjà mentionnée, est que code Visual Studio peut vous montrer une petite fenêtre contextuelle suggérant que vous obtenez des extensions particulières. Installez-vous certaines extensions en fonction d'un type de projet ? Vous pouvez vraiment aller de l'avant avec ceux-là. Visual Studio Code ne fait que faire des suggestions pour vous aider à bénéficier de la meilleure expérience possible en fonction de ce sur quoi vous travaillez. A installé un certain nombre d'extensions. Vous pouvez voir ici que j'ai 45 extensions. Il suffit donc de passer aux réseaux sociaux, Visual Studio Codes, à la polyvalence, car je les ai utilisés pour le développement de modèles ARM. Je l'ai utilisé pour le développement d' Angular, je l'ai utilisé pour le développement d' Azure. Je l'ai utilisé pour certains classeurs de données qui sont toujours Azure, est-ce pas ? Larve, PHP, Python. Ce sont toutes des choses pour lesquelles je l'ai utilisée, et ce sont des choses pour lesquelles vous pouvez l' utiliser à l'avenir à mesure que vous vous développez et que vous souhaitez explorer différentes voies. Visual Studio Code ressemble donc presque à un IDE tout-en-un pour différentes plateformes. C'est la première fois que vous utilisez Visual Studio Code. Je vous encourage à aller de l'avant, à explorer et à voir comment il prend en charge d'autres langages et d'autres frameworks et comment vous pouvez l'utiliser à votre avantage. Maintenant, autre chose que je veux, passons aux extensions. Une autre chose que je voulais juste souligner avant de nous lancer dans véritable développement serait le fait qu'il dispose d'un terminal intégré. Donc, avant de savoir tout ce que nous avons fait pour créer le projet, etc. Nous l'avons fait dans le terminal natif de notre système d'exploitation. Cependant, pendant que nous sommes dans Visual Studio Code, nous ne voulons probablement pas entrer et sortir entre les fenêtres. Il a commodément inclus un terminal pour nous. Vous pouvez donc y accéder en utilisant le raccourci clavier qui se trouve ici. Ou vous pouvez simplement cliquer dessus, bien sûr, et cela lancera une fenêtre de terminal. Et cette fenêtre de terminal est basée sur Porsche. Mais devinez quoi ? Nous avons des options. Nous pouvons donc avoir plusieurs terminaux fonctionnant simultanément. Je pourrais donc ajouter une autre fenêtre de terminal. Et si j'en voulais une qui ne soit qu'une invite de commande. Si j'en voulais un qui soit un bash, vous obtiendrez Git Bash une fois que nous aurons installé Git sur votre machine. Et je l'ai déjà mentionné, mais je ne te l'ai pas montré. Pour que tu puisses devenir bon. Vous pouvez donc obtenir en accédant au tiret scm.com, ou vous pouvez simplement obtenir sur Google. Et je suis sûr que le premier résultat de recherche vous donnerait ce site Web. Vous pouvez le télécharger pour différents systèmes d'exploitation tel quel , également multiplateforme. Vous pouvez donc obtenir Windows, le Mach, et vous pouvez l'obtenir pour vos distributions Linux. Et c'est une interface de ligne de commande native, non ? Mais vous disposez de certains outils qui peuvent vous donner une interface utilisateur et Visual Studio Code, encore une fois, est un outil qui vous permettra d' obtenir des commandes connexes ici. D'accord ? Ce sont donc des choses que nous pouvons savoir si je veux qu'elle exécute notre application ici à l'aide de la CLI. Je peux entrer dans le terminal et me laisser fermer les fenêtres, fenêtres du terminal que je n'utilise pas, cette petite poubelle. Vous pouvez simplement cliquer dessus pour fermer la fenêtre. Et je vais passer aux propriétés pour accéder à leur fichier de paramètres de pelouse. Très bien, je vais donc vous faire visiter le dossier afin que vous puissiez comprendre tout ce qui se passe. Mais avant cela, je voulais juste me concentrer sur ce fichier de paramètres de ligne. Nous avons maintenant deux profils HTTP et HTTPS. Si nous voulons qu'il exécute notre application, le HDTP sera utilisé par défaut. Si je dis dotnet run, cela signifierait en fait le profil HTTP par défaut et la version lunch ou HTTP de notre application, version guillemets et guillemets. C'est la même version, le même code, juste un comportement différent en termes de sécurité. Mais si nous voulions exécuter en utilisant le paramètre HTTP s, nous devrions le spécifier dans notre dotnet run. Je vais donc juste désactiver cette fenêtre de terminal un peu plus grande. Et vous pouvez le faire en maintenant la touche Contrôle enfoncée et en appuyant sur Plus pour augmenter la taille globale de votre Visual Studio. Code, interface utilisateur et contrôle en moins pour le réduire, non ? Vous pouvez donc jouer avec cela et l'ajuster à la taille appropriée à votre écran. Et puis qu'est-ce que dotnet run d'autre  ? Ensuite, ils peuvent voir le tiret, le lancement du tiret, le profil du tiret, puis spécifier que je souhaite utiliser le profil de lancement HTTPS. Ou quand j'appuie sur Entrée, ça va se créer. Et il verra la sortie du terminal que notre application écoute maintenant sur notre port HTTP et HTTP, n'est-ce pas ? Je ne l'ai pas fait. Une partie fonctionnerait toujours, mais elle écouterait simplement sur le port HTTP 5246. Très bien, donc ce ne sont que des pépites. Donc, si nous contrôlons le clic sur cette URL, notre navigateur sera lancé. Et puis nous pouvons voir ici qu'il s'agit notre application MVC exécutée depuis Visual Studio Code. Très bien, et quand j'aurai fini de faire ce que je suis en train de faire, je pourrai simplement utiliser la commande C pour arrêter. Donc, quand j' aurai fini de tester, j'ai voulu revenir au code et arrêter le serveur qui fonctionne. Je peux simplement contrôler C , puis il l'arrêtera et me ramènera à l'interface CLI. Très bien, voici une présentation rapide et détaillée de Visual Studio Code et de ce qu'il peut vous apporter. Il y a d'autres petites pépites que nous découvrirons en cours de route. Je ne veux pas vous surcharger d'informations. Je voulais simplement souligner certains des les plus essentiels pour nos tâches de développement. Et au fur et à mesure, nous en verrons plus. Aucune fonctionnalité intéressante. Ce n'est pas absolument nécessaire, mais c'est celui que j'utilise. Et cela influencera probablement l'expérience que vous avez vécue en fonction de la façon dont je fais mon travail. Mais j'utilise la sauvegarde automatique. Si vous allez dans Fichier, vous le ferez aussi. Si vous faites défiler l'écran vers le bas, l'enregistrement automatique Vous verrez donc que c'est coché pour moi. Cela signifie donc que lorsque je tape, code Visual Studio enregistre automatiquement mes modifications. Et si vous l'activez, vous aurez cette expérience similaire. Sinon, bien sûr, après avoir apporté des modifications à notre fichier, vous devez soit le sauvegarder, soit le compiler à chaque fois pour voir le reflet dans l'environnement de test ? sauvegarde automatique peut donc vous faire gagner beaucoup de temps. Quand il s'agit de ça. Nous pouvons également modifier nos paramètres. Si vous souhaitez utiliser un thème de couleur différent, vous pouvez changer votre thème en quoi, clair ou foncé. Je ne vais donc pas changer de couleur, mais tu peux choisir celle que tu aimes. Vous pouvez également activer des éléments tels que Word ou une version ultérieure et modifier la taille de votre police dans les paramètres. Vous pouvez modifier le type de police que vous utilisez. Vous pouvez modifier la taille de police. Le mien a donc 30 ans. Louez, je le sais. Si tu veux un mot ou plus. Vous pouvez le rechercher ici et vous pouvez le modifier, qu' ils souhaitent qu'il soit activé ou désactivé. Je l'ai allumé. À notre retour, nous examinerons les dossiers de nos projets. 12. Visite de fichiers et de dossiers: Très bien, les gars, passons maintenant revue les dossiers de nos projets. C'est donc le niveau des paramètres ouverts. Permettez-moi de clore ceci et repartons à zéro. Je vais aussi zoomer un peu et fermer le terminal pour avoir plus de biens immobiliers. Savoir. Le dossier poubelle. Cela est généré une fois que vous avez créé un projet et qu'il stocke à peu près les actifs qui font fonctionner votre application, n'est-ce pas ? Donc, essentiellement, lorsque vous appuyez sur F5 dans Visual Studio ou que vous utilisez la commande .net dotnet run. Ce qui se passe, c'est que lorsqu'il dit qu'il est en train de créer, il compile tous ces fichiers et actifs et les place dans ce dossier poubelle. Et puis il va exécuter l'application à partir de ce dossier bin. Et puis c'est la manifestation que vous verriez une interaction pendant les tests. autre côté, lorsque vous publiez, cela crée également un ensemble de ressources similaires à celui-ci, et c'est ce que vous placerez sur la machine cible lorsque vous déployez votre application. D'accord ? Non, dotnet Core est multiplateforme Ces actifs fonctionneront donc sur n'importe quel système d'exploitation, sur pratiquement tous les types de serveurs sur lesquels ils doivent être hébergés. Très bien, c'est ce que nous obtenons du dossier bin. Maintenant, nous avons l'un des dossiers clés que nous avons sorti de la boîte avant même de le compiler. Et c'est ce qu'on appelle des contrôleurs. Nous avons maintenant dans le dossier des contrôleurs, les contrôleurs. Et n'oubliez pas que les contrôleurs sont là pour contrôler le flux de votre application, ce qui signifie que chaque demande qui arrive passe par un contrôleur. Ensuite, il est géré et vous obtenez une erreur parce qu'il ne peut pas le gérer correctement, soit une erreur parce qu'il ne peut pas le gérer correctement, vous accédez à la page à laquelle vous essayez d'accéder. Ainsi, chaque fois que vous naviguez sur notre site Web, vous envoyez une demande à chaque clic, vous envoyez une demande lorsque vous vous rendez à destination ou que vous obtenez les résultats que vous attendez, puis vous obtenez une réponse. J'espère que vous obtiendrez la réponse que vous attendez, ou vous pourriez obtenir une réponse d'erreur. Un contrôleur se trouve donc entre cette transaction de réponse à la demande, n'est-ce pas ? Ainsi, par exemple, lorsque nous exécutons notre site Web et que celui-ci charge la page d'accueil, il s'est passé, c'est qu'il est passé à la manette principale, puis la manette principale, puis à l'action d'indexation par défaut, puis à l'index actions consiste à renvoyer une vue. Le contrôleur dispose d'un registre de toutes les racines possibles requêtes racines possibles qu'il peut traiter avec succès. L'index est l'une de ces demandes auxquelles le routage peut répondre. En général, le développement Web et l'index devraient toujours être votre première plage. De plus en plus de serveurs vont essayer d'accéder à l'index point HTML ou point PHP ou pas SPX, non ? Quels que soient le type de fichier et le type d'extension, il recherche toujours un index. D'abord. Le contrôleur domestique possède ce que nous appelons une action, c' est-à-dire une route enregistrée que le contrôleur domestique sait qu'il peut emprunter. Si vous rentrez chez vous, il recherchera automatiquement un index. Et puis, lorsqu'elle recherche un index, cette méthode définit ce qui doit se passer lorsque l'index essaie est navigué en fonction accord et de la magie que nous voulons voir se produire. Il se peut que nous voulions aller chercher des données dans la base de données. Il se peut que nous voulions faire des calculs. Nous faisons tout cela dans le cadre de cette méthode. Fais des trucs. D'accord ? Et nous lisons tout notre code, notre magie et notre logique ici. Et puis nous rendons ce que nous appelons la vue. Très bien, nous allons bientôt accéder au dossier Views, mais vous verrez que nous avons un dossier Views. C'est le C qui contrôle dans MVC, le contrôleur maritime. C'est donc ce que fait un contrôleur. Il accepte la demande qui, selon lui, ne peut pas répondre à la demande. Vous voulez qu'il soit affiché dans l'index ? Oui, j'ai une action d'indexation. Je peux répondre à la demande. Voici ce que je dois faire avant répondre à votre demande ou avant de vous montrer un résultat. Ensuite, la dernière ligne est celle où je renvoie la page que vous avez demandée avec toutes les données supplémentaires qui doivent y figurer. Étant donné qu'il s'agit d'un code standard, vous pouvez voir que c'est très simple. Cela va juste rétablir le pH. Il ne fait rien d'extraordinaire avant de tourner la page. La vue est donc la destination ultime et ce sera généralement la dernière ligne de votre action lorsque vous créerez la vôtre. une autre destination que La confidentialité est une autre destination que connaît le contrôleur domestique. Donc, pour chaque destination que vous souhaitez, vous devez avoir une action. Et cette action renverra une vue ou renverra une réponse favorable à ce que l' utilisateur attend. Ils ont également un autre mythe général, l'action appelée erreur, qui renvoie un modèle de vue des erreurs. Donc, la page d'erreur. Maintenant, si vous regardez ici, vous voyez que celui-ci en fait plus. Premièrement, il contient des annotations qui gèrent la mise en cache. Nous n'avons pas à nous inquiéter à ce sujet, n'est-ce pas ? Non. Mais à l'intérieur de la méthode, vous voyez qu' elle fait un peu plus. Il indique la vue retour, puis il voit la vue retour avec ces données. Donc, en gros, c'est comme une page d'erreur globale. Chaque fois qu'il y a une erreur, moins pendant que vous êtes en train de déboguer , il garde une trace de la nature de cette erreur, des activités et vous permet de la retracer ultérieurement dans votre application. Ce sont donc des choses plus avancées que je n'aborderai pas. Mais ce que je voulais vraiment souligner ici, c'est qu'il ajoute des informations dont la vue a besoin. C'est ainsi que nous transmettons les informations à la vue. La vue de la maison n'a pas besoin d'inflammation. Nous n'avons donc rien eu à faire. C'est vrai. Je n'aurais pas à l'enflammer. Le responsable du traitement de la vie privée n'avait pas non plus besoin d'informations supplémentaires. Cependant, lorsque la page d'erreur est censée s'afficher, nous souhaitons transmettre ces informations supplémentaires provenant du code sous-jacent lorsque nous renvoyons la vue. C'est donc essentiellement ce que cela fait. D'accord ? Non, je ne veux pas commander de MVC. Je vais suivre l'ordre de la structure des dossiers ici. La prochaine étape serait donc celle des modèles. Et un modèle d'affichage des erreurs de modèle est le modèle que nous avons obtenu sur notre photo. Maintenant, le modèle Error View contient ces deux propriétés et à peu près nos modèles slash view models, nos fichiers de classe qui représentent les différents bits de données que nous voulons afficher à notre utilisateur, n'est-ce pas ? Ainsi, un modèle incorporera des chaînes de différents types de données, sous forme de spool, de caractère, etc. Tout ce que vous devez afficher sur votre page doit être dynamique. peu près, vous allez créer un fichier de classe, qui jouera essentiellement le rôle de notre modèle. C'est juste le cours. Rien de trop spécial si 0 p, eh bien, vous ne voulez pas faire de classes et vous connaissez les propriétés. Et essentiellement, ce que nous faisons avec le contrôleur, c'est définir les données. C'est donc ce que nous faisons ici. En fait, nous stockons les données dans ce modèle de vue des erreurs, ou nous créons un objet de cette classe. Et puis, une fois que nous avons créé un objet, dérempli les propriétés avec les différents bits de données qui ne feront qu'un. Nous remplissons donc ici l'identifiant de la demande avec toutes ces informations. Il va soit l'envoyer en fonction de l' identifiant, soit il va envoyer l'identifiant de trace. Si c'est savoir ce cela va le peupler de tout cela, alors il en renverra un objet. La vue dispose donc désormais d'un modèle contenant certaines données. Et la vue saura déjà comment extraire les données de l' objet et afficher celles de l'utilisateur. D'accord. C'est donc ce que représente réellement un modèle : il s'agit simplement d'un objet d'une classe qui stocke les données que la vue va utiliser. Le contrôleur est chargé de renseigner cet objet avec les données avant que la vue ne les affiche. Bien sûr, c'est l'un de ces dossiers arbitraires auxquels nous ne devons pas nécessairement faire très attention. Encore une fois, il contient juste un tas de fichiers générés que nous n'utilisons pas ou avec lesquels nous interagissons trop. Je vais donc ignorer cela. Nous sommes entrés dans les propriétés et nous avons examiné les paramètres de lancement de ce fichier JSON. Donc ici, comme le nom du fichier l'indique, il a juste des configurations différentes dans son ensemble, l'application devrait être lancée, non ? Nous avons donc les paramètres iOS. Si nous voulions exécuter avec une instance locale d'IIS Express, elle s'exécuterait sur ce port. Mais Vizio, sorry.net possède son propre serveur intégré. Nous n'avons donc pas nécessairement à nous fier à ce qui est exprimé comme nous le devions par le passé. Cela nous permet donc d'avoir nos propres profils de lancement en HTTP et HTTPS. Ensuite, cela nous permet d'intégrer ce que nous appellerons des variables d'environnement dans les différents paramètres de lancement selon les besoins. D'accord ? Ce sont donc à peu près les paramètres qui sortent de la boîte. Et vous n'êtes pas obligé de modifier ce fichier à moins de savoir exactement ce que vous faites et d'avoir des besoins très spécifiques à l'origine de vos modifications. Mais d'une manière générale, vous pouvez laisser ce fichier seul. Passons maintenant aux vues et au dossier des vues. Cela peut être très intéressant. Tout d'abord, vous remarquerez que nous en avons deux. Nous avons un dossier qui s'appelle Home. Maintenant, la manette domestique est ouverte simultanément afin de vous montrer quelles sont les attentes à l'égard du système de fichiers et comment tout est lié. Une fois que nous avons suivi cette convention de dénomination, nous avons le contrôleur domestique. Nous avons donc un dossier Views appelé home. Vous remarquerez donc que le Forever Controller que vous créez, le moteur MVC recherchera automatiquement à l'intérieur du contrôleur de vues un dossier portant le même nom que le contrôleur. Je voudrais dire le même nom. Je veux dire, ce qui précède le mot contrôleur. Mais c'est un modèle de dénomination. Donc, si nous ajoutons Students Controller. Ensuite, il y aurait des étudiants. C'est le nom du contrôleur. Les maîtres de mots attendus. D'accord, donc vous devriez toujours avoir le mot contrôleur, mais peu importe ce qui précède, c'est le nom. Il s'attend à voir un dossier portant le même nom au lieu du dossier Views. Et puis à l'intérieur de ce dossier, il s'attend à voir différents fichiers HTML CSS. CSS HTML est donc l'extension donnée à un fichier Razor View, n'est-ce pas ? Et avant d'entrer dans le vif du sujet à quoi ressemble l'un de ces fichiers, je voulais souligner que chaque nom de fichier doit correspondre à un nom d'action. C'est pourquoi, lorsque nous retournons, view sait ce qu'il faut renvoyer. Très bien, alors laisse-moi y revenir. Lorsque vous envoyez une demande, lorsque vous cliquez sur un lien, droite, vous cliquez sur un lien qui doit mener à notre responsable du traitement. Le contrôleur évaluera le lien et vérifiera s'il contient une action qui correspond à l'URL à laquelle vous essayez d'accéder. S'il possède une option, il passera ensuite à cette action, exécutera la magie contenue dans cette action, puis tentera de renvoyer une vue. Cette vue qu'il tente de renvoyer sera le fichier HTML CSS qu' il a spécifié avec le même nom pour cette action. Donc, si vous envoyez une demande et qu' aucune action ne correspond à cette demande, vous obtiendrez une erreur 404. Si vous envoyez une enchère et des demandes, désolé, l'entreprise trouve une option correspondant à la demande. Et puis il essaie de renvoyer la vue et il ne trouve pas le fichier correspondant, puis vous recevrez une demande de fluorophore qui, en gros, empêchera l' ensemble du site Web de fonctionner. Il s'agit donc essentiellement de l' expérience à laquelle vous pouvez vous attendre lorsque vous parcourez votre site ou lorsque vous créez votre site. Et une fois que vous aurez suivi cette convention de dénomination, vous n'aurez aucun problème. Vous verrez donc ici que j'ai indexé le HTML Celsius. J'ai un index en tant qu'action de confidentialité, de confidentialité. Il peut y avoir des exceptions à la règle car il s'agit d'une erreur, mais aucune erreur n'apparaît dans ce dossier. En fait, l'erreur se trouve dans le dossier partagé. C'est très bien. Mais d'une manière générale, vous devez suivre le modèle qui sous-tend l'index et la confidentialité au fur et à mesure. Voyons maintenant ce qui se trouve dans le fichier d'index. Dans le fichier d'index, nous avons à peu près un mélange de HTML et de C-sharp. D'accord, donc c'est du HTML. Il s'agit d'un code qui ressemble à un C-sharp. Le fichier HTML CSS est donc comme un fichier hybride qui nous permet d' écrire une certaine quantité de C-sharp à l'intérieur de ce fichier HTML. Mais en réalité, il ne s'agit que d'un fichier HTML glorifié. Si nous avons besoin de quelque chose de dynamique , nous pouvons introduire C-sharp. Et pour présenter C-sharp, nous avons juste besoin d'un panneau publicitaire. Ensuite, nous pouvons commencer à taper quelque chose, non ? C'est du code C Sharp. Alors voyons voir, je vais d'abord le lancer. Je vais utiliser mon raccourci clavier Control Shift, apostrophe a lancé le terminal, je vais dire dotnet run et laisser cela lancer notre application. Voici donc notre candidature, non ? Et remarquez que c'est parti, il n'a pas précisé où il voulait aller, mais il nous a simplement redirigé vers la page d'index de la manette principale, n'est-ce pas ? Si je clique sur Confidentialité, regardez-le. On va dire que Home Slash Privacy. Alors, qui est le contrôleur ? La protection de la vie privée était l'action. Si j'essaie d'aller sur, essayons, essayons l'index, puis je reviendrai à la page d'accueil. Il connaît donc le Home Slash Index. Mais si j'essayais de rentrer chez moi, je recevrai un 404 car aucune action n'a pu être trouvée pour cet itinéraire. D'accord. Maintenant, ce que je veux faire, c'est vous montrer comment nous pouvons apporter quelque chose de dynamique à ce point de vue. Donc, si je voulais, disons la valeur de la date. Je peux donc dire « à l'heure des signes ». Non. Voyez ça, UTC le sait, d'accord, et sauvegardez ça. Et je vais juste faire le contrôle C à l'intérieur du terminal pour le tuer. Ensuite, appuyez simplement sur le haut pour obtenir la dernière commande d'exécution , puis appuyez à nouveau sur Entrée pour qu'elle redémarre. Ensuite, je reviens au site Web ou je rafraîchis simplement puis je regarde ceci. Je viens de l'ajouter, non ? Il s'agit d'un horodatage basé sur le code que je viens de saisir, qui est le code C-Sharp, datetime, UTC know. D'accord, donc c'est, oui, c'est un fichier HTML, mais je peux mettre mon code C-Sharp. Donc, si je voulais que ce soit, disons dans une balise H1, je pourrais créer un code HTML. Chaque étiquette. Consacrez ce temps. Et cette fois, je vais passer à Control C pour terminer. Et je vais utiliser une commande différente cette fois. Au lieu de Dotnet Run, je vais dire Dotnet Watch. D'accord. Alors regarde ça maintenant. Et j'ai dit Dotnet Watch. Cela va me faire savoir qu' il fera ce qu'on appelle le hot reload. Le rechargement à chaud est activé. Laissez-moi faire défiler l'écran vers le haut afin que nous puissions voir exactement ce que cela signifie. Ici. C'est dans Dotnet Watch Hot Reload activé. Ensuite, nous pouvons voir une liste d'autres options. Ensuite, ils disent d'utiliser Control R pour redémarrer. Ainsi, lorsque nous apportons nos modifications, nous n'avons pas à nous arrêter, à démarrer, à nous arrêter courir, à sauter et à courir dessus. Watch y parviendra un peu plus facilement. Donc, quand je reviens à mon navigateur, voici la date/heure connue sous le nom de balise H1, n'est-ce pas ? Donc, si j'en voulais plus, je peux simplement utiliser Control C, V. Et remarquez que je n'ai pas surligné Quand j'ai contrôlé CV, j'ai simplement cliqué sur la ligne, contrôle C, contrôle V. Ce sera dupliquez la ligne. Et à chaque modification, cela me permet de savoir que le fichier a changé et qu'il est rechargé à chaud. Et puis quand je reviens au navigateur sans m'arrêter ni redémarrer, voici le fruit de mon travail. Très bien, donc je vous montre simplement que le fichier de vue n'est en fait qu'un fichier HTML glorifié qui nous permet d'injecter du code C-Sharp si nécessaire. C'est pourquoi, lorsque nous chargeons un objet avec des données, nous pouvons réellement interagir avec les données provenant de notre objet pointu en C directement dans notre fichier de vue. L'affichage de l'index est assez simple. Laissez-moi simplement supprimer tout cela. Nous avons le point de vue sur la confidentialité, qui n'est pas plus spectaculaire que cela. Sauf qu'ici, vous verrez qu'ils font cette injection en C pointu parce que vous pouvez définir le titre dynamiquement en fonction de la page sur laquelle vous vous trouvez, puis ils impriment simplement cette page dynamique ici. D'accord. Maintenant, lorsque je passe au dossier partagé, nous avons le fichier de mise en page ou le fichier de mise en page. Faites un petit zoom arrière. Le fichier de mise en page est essentiellement le modèle que tout le site Web utilisera pour déduire à quoi il devrait ressembler. Si vous remarquez que lorsque je passe de la page d'accueil à la confidentialité, tout est statique sauf ce qui se trouve entre l' en-tête et le pied de page. Très bien, tout semble cohérent et la cohérence est très importante. Lorsque vous créez des sites Web avec des sites Web statiques, vous devez copier et coller manuellement cette barre de navigation le pied de page et tous les éléments de chaque page. Si vous souhaitez une cohérence, la page de mise en page fournit un modèle HTML. Vous remarquerez que les vues ne commencent pas par les balises HTML et tout le reste. Et à chaque WEBO, ils commencent toujours par votre squelette. Cependant, nous avons le squelette à un seul endroit, nous avons les balises HTML DOCTYPE. Nous avons la tête et le corps dans un seul fichier. Très bien, nous n'avons donc pas à répéter cela pour chaque page de visualisation que nous créons. Cependant, à l'intérieur du corps et nous avons le système de navigation, permettez-moi de réduire les pièces, non ? Nous avons le système de navigation, puis nous commençons par le conteneur, qui est généralement l'endroit où vous commencez à placer votre contenu. Ensuite, nous avons cela, et puis nous avons cette section appelée render body. Le corps du rendu est donc l'endroit où la vue est injectée. C'est pourquoi lorsque nous changeons les pages, tout le reste est statique sauf ce qui se trouve à l'intérieur du corps. D'accord ? Il s'agit de la section contenant, confidentialité. s'agit de notre section de conteneurs qui abandonne le corps parce qu' elle nous montre simplement le fichier de vue ou le contenu du fichier de vue chargé en fonction de l'itinéraire. Cependant, tout le reste est cohérent. Maintenant, si je fais de petits ajustements, exemple en renommant cette section, en reprenant toutes les traces, aliments et en mettant des espaces entre les moyens. Et je l'ai fait dans le titre, la barre de navigation et dans le pied de page. Si nous jetons un coup d'œil ici, nous verrons que tout a changé, non ? Et quelle que soit la page que nous consultons, encore une fois, elle sera toujours cohérente. Non. Je pense que nous comprenons bien notre point de vue et que nous avons d'autres dossiers qui jouent un rôle de soutien que nous aborderons plus tard. Nous avons le dossier root dub, dub, dub, qui contient nos atouts. Nous arrivons donc avec ce CSS. Il s'agit de notre propre fichier CSS intégré que nous pouvons étendre et écrire notre propre CSS, mais nous avons un CSS de site dans pouvons étendre et écrire notre propre CSS, lequel nous pouvons écrire notre propre site, juste dans lequel nous pouvons écrire nos propres fichiers JavaScript. Et puis nous avons le dossier lib qui contient des bibliothèques tierces. Donc, d'une manière générale, lorsque vous installez des bibliothèques tierces, elles sortent de la boîte avec Bootstrap et jQuery end. Ces bibliothèques, vous aurez alors envie de les mettre dans un flip. Elles sont également référencées par défaut dans notre fichier de mise en page. Ici. Vous verrez ici tous les fichiers de script qui sont référencés, n'est-ce pas ? Vous verrez également dans l'en-tête tous les fichiers CSS sont référencés comme clé. Et avec ceux-ci, nous avons Bootstrap, nous avons opté pour le CSS, puis nous avons un fichier CSS spécial spécialement conçu pour les mises en page. Et vous le verrez ici, appelé layout.css ational, ce CSS permet d'écrire encore plus de CSS spécifique à la page de mise en page sans qu'il soit global. Très bien, ensuite, nous avons d' autres fichiers intégrés et nous avons les paramètres de l'application dans ce fichier JSON. Donc, les éléments opposés, comme le fichier JSON, comportent deux parties, ce qui nous permet de créer d'autres environnements, des versions spécifiques. Donc, pour le développement, si nous avons des configurations spécifiques à utiliser, nous pouvons les définir là plutôt que lorsque nous publions ou lorsque nous testons, etc., environnement Basin. Nous pouvons en avoir différents. Nous le modifierons au fur et à mesure. Sachez donc qu'il s'agit d'un fichier clé et que vous devez faire très attention aux modifications que vous y apportez, car si ce n' est pas bien modifié, car si ce n' est pas bien modifié, votre application ne fonctionnera pas. Ensuite, nous avons notre fichier program.cs, qui se trouve dans n'importe quelle application C-Sharp. Program.cs est le premier fichier qui est exécuté. Une fois l'application exécutée, elle recherchera program.cs. Ainsi, le contenu de ce fichier donne le ton au fonctionnement de votre application. Et quand on voit que cela donne le ton, ce que nous faisons tout d'abord, c'est ajouter des services au conteneur. Le conteneur ressemblera à ce que l'application utilisera pour savoir ce qu'elle peut et ne peut pas faire. Je souhaite ajouter autant de services que nécessaire pour que ce conteneur soit créé avant que l'application ne soit créée. Nous voyons donc ici le support IDE pour les contrôleurs avec des vues. Nous faisons un MVC a absolument besoin de contrôleurs et de vues, n' est-ce pas ? Ensuite, nous créons l'application. Et puis il y a quelques vérifications pour dire, d'accord, si nous sommes dans un environnement de développement, ou si nous ne développons pas d'applications , nous pouvons réécrire cette page, quatre flèches et nous pouvons forcer Redirection HTTPS, non ? Donc, en gros, cela signifie que vous ne pouvez utiliser rien d'autre que le HTTPS, un outil strict de sécurité des transports. Mais c'est généralement pour la production. C'est pourquoi c'est dans cette déclaration if. Si nous ne sommes pas en développement, soyez strict à propos de cet en-tête de transport https, n'est-ce pas ? Nous utilisons le protocole HTTPS, la redirection. Vous verrez donc ici qu'un avertissement apparaît chaque fois que nous n' utilisons pas le paramètre HTTPS, c' est-à-dire que le middleware de redirection se trouve pendant notre avertissement, ce sera celui-ci. C'est ce que nous appellerons un intergiciel. Ce sont donc des mini-applications que nous avons ajoutées au pipeline de requêtes. Cela signifie qu'une fois que ma demande arrive, fois que quelqu'un clique sur une URL, il me dit : d'accord, quelle est la commande que je dois faire ? Je devrais d'abord lire Erich pour lire Erich en HTTPS, je devrais utiliser des fichiers statiques, c'est-à-dire ces actifs provenant de la racine. Je devrais utiliser le routage. Je devrais essayer d'autoriser, puis je devrais essayer de cartographier. Alors je devrais courir, non ? Donc, à peu près comme dans l'ordre dans lequel toutes les fonctions sont appelées à chaque demande, nous pouvons ajouter notre propre intergiciel. Nous pouvons modifier la commande, mais la commande compte. Vous devez donc vous assurer que lorsque vous ajoutez des intergiciels à ce fichier, vous les ajoutez dans un ordre particulier fonction de la façon dont vous souhaitez que votre application fonctionne. C'est tout pour la tournée, non ? De nombreuses informations ont été partagées. Vous voulez donc rejouer, vous savez, comment créer des projets supplémentaires. Si vous vouliez créer un projet supplémentaire et essayer de gâcher les fichiers pour voir ce qui ne fonctionne plus, etc. C'est une bonne façon de s'y retrouver. Je suggère que vous ayez plusieurs projets de cette largeur. Mais pour l'instant, nous disposons de tous les dossiers de projet qui sont absolument nécessaires à notre compréhension à ce stade. Dans notre prochaine leçon, nous allons transférer notre projet sur GitHub. 13. Ajouter un projet à GitHub: Très bien, les gars, alors dites-le-nous, poussez notre projet à la vitesse supérieure. Nous utiliserons donc le projet que nous avons créé pour créer un tout nouveau dépôt sur notre compte GitHub. Cela permettra également d' établir un lien entre notre instance Visual Studio Code et l'instance GitHub. Et cela nous permettrait de pousser et de tirer selon nos besoins. Accédez à l'onglet Contrôle de la source. Et vous avez deux options : vous pouvez initialiser un dépôt publié sur GitHub. Donc, une fois Git installé sur votre machine, accédez à un système de gestion de contrôle de source local. Il est donc également appelé système de gestion de contrôle de source distribué . Sur votre propre machine, vous pouvez avoir toutes les modifications souhaitées, tout l'historique, tout ce que vous faites, tout se trouve sur votre machine. Toutefois, si votre machine tombe en panne, vous n'avez aucune sauvegarde. Donc, l' option distante, comme GitHub, où nous l'appelons serveur distant. Il peut donc s'agir de GitHub ou Bitbucket, d'Azure DevOps. Il peut s'agir d'une machine installée dans votre bureau et qui est au service de l'équipe. Peu importe ce que c'est. C'est ce que nous appellerons un serveur distant. Il s'agit donc du référentiel central où vous et de nombreuses autres personnes pouvez transmettre leur code simultanément et le stocker. Vous aurez ainsi vos propres copies locales ainsi qu' une copie centralisée accessible à tous. Maintenant, avant passer au référentiel central, je voudrais expliquer quelque chose à propos des fichiers et des fichiers que nous voulons réellement suivre, et non pendant la visite du projet, de passer au référentiel central, je voudrais expliquer quelque chose à propos des fichiers et des fichiers que nous voulons réellement suivre, et non pendant la visite du projet, J'aurais fait remarquer que certains fichiers sont davantage générés automatiquement en fonction de nos activités. Cela signifie que nous n'avons pas nécessairement besoin de les contrôler à la source. Ou le contrôle à la source est le camion, les incendies que nous soignons réellement, les changements. La seule chose qui sera générée après coup, c'est que nous n'avons pas nécessairement besoin de suivre le contrôle des sources. Donc tout ça pour dire qu'il existe certains répertoires comme OBJ et que c'est la rapidité avec laquelle je suis généré à la volée. C'est vrai. OB-GYN a donc été chargé de la suppression fichiers de publication et autres actifs qui sont compilés. Qui veut créer un dotnet notre dotnet run ou le dotnet watch, ils seront générés afin que nous n'ayons pas nécessairement besoin de ceux qui contrôlent les sources. Donc, ce qui se passe, c'est que Git Hub a le concept de fichier gitignore ou obtient en général un concept de fichier gitignore dans lequel nous pouvons générer ce fichier que nous pouvons spécifier dans des répertoires que nous ne voulons pas. Et étant donné que nous ne sommes pas nécessairement des experts dans tous les annuaires que nous sommes autorisés ou que nous pouvons nous permettre d'ignorer. Il est bon d'ignorer les modèles auxquels nous pouvons accéder. Notre CLI dotnet nous permet de simplement générer un nouveau git ignore dotnet. Ensuite, cela se poursuivra et générera ce fichier gitignore basé sur les modèles Visual Studio. D'accord ? Ce modèle Visual Studio sait que tout projet basé sur Visual Studio basé sur Slash Dotnet n'a pas besoin de ce type de dossiers inclus. Regardez ici la sortie en masse, vous verrez qu'il s'agit d'un OBJ. Et cela signifie quel S majuscule ou commun, ou une fois qu'il contient ces trois lettres, nous devons l'ignorer. C'est ce que Visual représentait. C'est ce que ce fichier gitignore indiquera à get lorsque vous soumettrez à get ignore ces fichiers et les fichiers de ces répertoires. Très bien, c'est donc une très bonne façon de faire en sorte vos enregistrements ou vos commentaires soient assez précis et concis. Et vous pouvez voir ici que vous pouvez obtenir le dernier modèle à partir de cet emplacement sur GitHub. Très bien, donc maintenant, si nous revenons au contrôleur de source, nous disons publié sur GitHub. À ce stade, vous serez peut-être invité à vous authentifier auprès de GitHub Il vous suffira donc de fournir vos informations d'identification et tout le reste. Nous pouvons maintenant dire si nous voulions publier dans un dépôt privé ou public. Privé signifie que vous et toutes les personnes auxquelles vous donnez accès pourrez y accéder. Je ne pourrai donc pas accéder à votre profil pour le voir. Et puis public signifie que toute personne qui tombe sur votre profil peut le voir. Maintenant, au moins, cet exercice vous encouragerait à le rendre public car cela facilite le partage. Cela vous permet de montrer plus facilement au monde ce que vous avez fait et sur quoi vous travaillez. Et les gens pourraient même regarder revoir le code et vous aider en cours de route, non ? Je vais donc le rendre public. Ensuite, une fois que nous aurons cliqué sur Public, nous le publierons. Pour nous aider, il va insérer un message de validation automatique. Ainsi, lorsque nous disons « ouvert dès l'obtention », GitHub sera lancé et vous affichera tous les fichiers de votre projet qui ont été validés. Et notez qu' aucun OBJ n'a été créé et aucun autre dossier n'a pu être généré automatiquement . Exclus, c'est vrai , donc ils auraient été ignorés par R, ignorez le fichier. Nous avons également reçu un premier message de validation automatique. Et ce qui se passe, c'est lorsque nous le faisons, lorsque nous apportons nos modifications et que nous voulons ensuite les soumettre au moteur de contrôle de source. Nous souhaitons inclure un résumé de ce que nous avons fait. Permettez-moi donc d'apporter une petite modification ici dans notre fichier de vues. Je suis allé au bas pour partager la mise en page et le DateTime ici. L'année ici est donc statique. Et si je voulais que ce soit dynamique ? Parce que si ça change l'année prochaine, je ne veux pas avoir à venir mettre à jour ce fichier manuellement. Je peux donc modifier cela pour voir l'heure. Réflexions. Pas d'oreille. L'avantage de pouvoir écrire ou C-Sharp ici. Donc je dis juste de me donner la date et l'heure à partir de ce moment et quelle est l'année. Et puis ce sera dynamique. Donc, quelles que soient l'heure et les actes, notre volonté changera toujours en conséquence. D'accord ? Vous pouvez donc exécuter Dotnet et simplement vérifier que vous voyez toujours la même année. Bien sûr, et cela fonctionne toujours. Mais bien sûr, lorsque cela augmente, lorsque l'année augmente, vous n'avez pas à vous soucier de changer cette non-dualité. C'est juste ce petit changement. Vous pouvez prendre note des repères visuels que vous verrez apparaître, tels ces petits points et m. Cela signifie donc qu'il s'agit désormais d'un fichier de modification. Donc la dernière fois que j'ai reçu tout ce fichier, il ressemblait à ceci. Donc, je veux dire que cela est maintenant modifié, qui signifie que lorsque je vais dans mon onglet de contrôle de source, il m'indiquera que j'ai une modification en attente parce que j'ai modifié au moins un fichier. Maintenant, je peux voir le changement. Disons qu'il faut changer de pied de page et l'année soit dynamique. C'est mon message d'engagement. Maintenant, je peux valider, ce qui enregistrerait les modifications localement dans ma copie locale du référentiel GitHub. Je peux aussi m'engager et pousser, m'engager et sombrer. Donc, commit and push signifie que je vais valider localement et transmettre mes modifications au référentiel distant, qui dans ce cas est GitHub commit. Et sync indique que je vais valider localement, transférer mes modifications sur GitHub et essayer d'obtenir toutes les modifications qui auraient pu se trouver sur GitHub. Et c'est parfait pour notre équipe Lorsque plusieurs personnes contribuent au référentiel distant, vous souhaitez toujours être au courant des dernières modifications. Vous pouvez également, avant de vous engager, et faire respecter notre engagement en vous faisant tirer le litre. Vous pouvez donc réellement utiliser ces trois points. Je peux dire Paul. Et il va regarder et voir, d'accord, quels sont-ils ? fichiers qui ont été modifiés sur le référentiel distant et qui sont différents des vôtres ? Laissez-moi apporter ces modifications. Parfois, vous vous retrouverez avec des conflits si deux d'entre vous ont modifié le même fichier, n'est-ce pas ? Vous pourriez donc vous retrouver avec un conflit. J'espère que tu ne te retrouveras pas avec ça. Mais en gros, vous voulez toujours avoir la dernière version autant que possible. Vous voulez donc faire des piscines irrégulières pendant que vous travaillez. Mais ensuite, je pousse à envoyer vos modifications. D'accord, donc vous avez toujours envie de tirer, peut-être de faire peur en cas de crash avant de pousser, parce que cela aidera l'équipe. Cependant, en ce qui concerne les développeurs solaires pour ce cours, je vous dis simplement oui, mais ce que nous pouvons faire, c'est nous engager et pousser, puisque nous travaillons seuls. Il viendra donc localement, puis il synchronisera les modifications avec GitHub. Et puis quand je reviens sur Git Hub juste pour regarder le référentiel et je rafraîchis. Ensuite, vous allez voir ici qu' un nouveau message de validation est arrivé il y a quelques secondes. Et vous pouvez effectuer une analyse détaillée et voir ce qui a changé. Nous avons remplacé cette ligne par cette ligne. Très bien, c'est la puissance des systèmes de gestion du contrôle des sources lorsque vous élaborez vos projets. Nous ferons donc enregistrements réguliers comme celui-ci et nous assurerons de suivre toutes les modifications que nous apportons au fur et à mesure. 14. Comprendre le fichier de mise en page et Bootstrap: Très bien, les gars, donc dans cette leçon, je voudrais que nous passions un peu plus de temps à regarder ce petit coup d'œil tout à l'heure. Et je voulais juste souligner certains des éléments clés que vous pouvez modifier. Modifiez en toute sécurité si vous souhaitez personnaliser l'ensemble de votre application selon vos besoins. Commençons donc par la première ligne. Nous avons donc le fichier de chargement. Et encore une fois, il s'agit notre fichier modèle HTML pour l'ensemble de notre site Web. Ainsi, les différentes pages n'ont pas besoin de commencer avec toutes les balises HTML comme nous le ferions dans un site Web statique. Il s'agit d'un fichier dynamique qui s' occupera de tout cela pour chaque nouvelle pièce que nous voulons. Il est déjà équipé de toutes les balises META HTML5. Et il inclut également Bootstrap. Donc, dès la sortie de la boîte, nous obtiendrons Bootstrap avec notre application MVC. Maintenant, bootstrap est une bibliothèque d'interface utilisateur très puissante. Si c'est la première fois que vous en entendez parler, c'est très bien. Vous pouvez donc vous y familiariser en vous rendant sur bootstrap.com. C'est leur site officiel. Et vous verrez ici que la dernière version est la 5.2, qui est la version prête à l' emploi avec notre package, avec notre projet, qui vous explique plutôt comment vous l'installeriez. Mais nous n'avons pas à faire tout cela car cela fait déjà partie de notre projet. La documentation est cependant excellente. Donc, s'il y a quelque chose que vous devez comprendre pour savoir comment cela fonctionne, vous pouvez vous rendre sur getbootstrap.com et vous pouvez le parcourir. Voyons donc comment personnaliser quelque chose comme peut-être la barre de navigation. Vous pouvez simplement faire une recherche ici. Et vous pouvez voir la navigation, la barre de navigation. C'est assez juste, bar. Ensuite, ils vous indiqueront comment cela fonctionne. Donc, ici, sur les composants que vous avez dans la barre de navigation, ils expliquent comment cela fonctionne. Ils vous indiquent le contenu pris en charge et voici la mise en page générale du code si vous le souhaitez. Cela signifie donc que le code-barres « Tout était suffisant » commence ici, et c'est entre ces balises de navigation ouvertes sur Android. Donc, pour chaque article que nous voudrions, nous pouvons le mettre là. Donc, si nous voulions le mot barre de navigation, c' est-à-dire notre marque de barre de navigation, si cela méritait une image, nous pourrions mettre l'image, eh bien, devinez quoi ? Nous avons également cette section. Désolée pour ça. Nous avons également cette section. Voici cette étiquette d'ancrage, la marque Navbar. Vous verrez donc que Bootstrap n'est en fait qu'un ensemble de classes que j'ai conçues pour nous aider à faire les choses plus rapidement, car il y a choses que nous voulons toujours faire. Chaque fois que nous avons une application Web, il y a des couleurs, nous voulons toujours avoir leur propre style. Nous voulons toujours les gars Bootstrap, c'est-à-dire ceux qui ont développé Bootstrap, après des années passées à faire la même chose encore et encore. Ils ont créé un fichier CSS glorifié. Très bien, un énorme fichier CSS, qui est ce fichier CSS que nous avons inclus dans notre dub, dub, dub roots lib, Bootstrap, CSS. Ensuite, vous verrez qu'il n'y a aucun tampon, mais celui sur lequel vous souhaitez vous concentrer le main.css ou le point CSS. D'accord ? Dot Min n'est qu'une version minifiée de ce CSS. Mais le fait est qu'il ne s' agit que d'un gros fichier CSS. Regardez ça, tout ce fichier CSS, un code CSS et un style, d'accord, juste pour ne pas avoir à le refaire encore et encore. Nous pouvons simplement utiliser leur feuille de style et tirer parti leur expertise et de leur dur labeur. D'accord, donc c'est un week-end complet à personnaliser suffisamment. Si nous voulions ajouter une image que cela montre, d'accord, si vous vouliez une image, vous pourriez le faire place et ajouter votre logo. Je ne pense pas que nous allons opter pour un logo, mais je cherche à voir les combinaisons de couleurs. OK, on y va, donc tu peux changer la couleur. Nous avons donc trois options. Nous avons du bleu foncé et de la lumière. D'accord ? Ici, cela montre les classes que nous pouvons utiliser pour chacun d'entre eux. Donc, dans la balise de navigation, si je reviens à ma mise en page, à mon fichier CSS HTML, ma balise de navigation, dès que je la vois, utilise actuellement un tiret de barre de navigation. Très bien, donc si je voulais le thème sombre ou si je devais voir, c'est le tiret de la barre de navigation foncé. Oh, eh bien, c'est une grande primaire, donc ça me donnera la bleue. Donc si je voulais du noir, j'utiliserais celui-ci. Donc si je vais ici et qu'elle le sait juste de la barre de navigation claire au tiret BG blanc en passant par le tiret foncé et Biji foncé. Et puis, si j'y jette un œil, il a lancé mon terminal Control Shift et apostrophe, puis dotnet. Je dirais juste Dotnet Watch. Maintenant, regardez bien cette barre de navigation sombre, devinez quoi ? Non, mes textes ne sont pas visibles. C'est vrai. Parce que la maison devrait être là et l'intimité aussi. Mais c'est noir sur noir, donc vous pouvez le voir. Très bien, voyons ce que Bootstrap recommanderait. Ils me recommanderaient donc, eh bien, ils ne me disent pas comment mettre le texte en blanc ici, n'est-ce pas ? Mais ensuite, je peux rechercher différentes couleurs pour le texte. D'accord ? Je fais juste défiler la page parce que je vois, j'essaie de voir s'ils ont des exemples ici, qui est le bon. C'est très bien. Mais si je voulais modifier l'apparence de mon texte, ils ont une section appelée topographie. Et voilà, la typographie passe sous le contenu. Et puis ici, ils nous indiquent les différents styles que nous pouvons utiliser. Donc, simplement en démarrant votre tag H1, vos HDL ressembleront automatiquement à ceci. Vous pouvez leur donner l' apparence d'écrans en utilisant l'affichage des classes 1 à 6. C'est cool, mais je préfère les couleurs différentes. Et je suis désolée, ce n'est pas sur la topographie, cela ne devrait pas être sur les couleurs. Passons donc à la personnalisation et regardons la couleur, n'est-ce pas ? Voici les différentes couleurs. Maintenant, ce qui est cool avec Bootstrap, c' est qu'il est très cohérent. Donc si vous faites du primaire, vous savez, vous allez avoir cette teinte de bleu, cette nuance de gris, soie indique Danger, etc. Donc la lumière nous donnera un peu de gris, couleur légèrement blanche en général. Et vous verrez que vous avez toute une palette de couleurs. Si vous voulez les nuances entre les deux, vous pouvez obtenir toutes ces couleurs sans avoir à connaître la combinaison réelle, I'm Headache ou RGB. C'est ce qui le rend si pratique. Très bien, maintenant, si je voulais que mes textes aient cette couleur en particulier, je peux, dans mon code, accéder aux éléments de navigation que vous voyez ici d'une classe ou dans l'élément de navigation, puis dans l'élément de navigation de la balise d'ancrage qui représente réellement le routage, non ? J'expliquerai ce que signifie B, contrôle et action plus tard. Je ne veux pas me concentrer là-dessus pour le moment, mais je veux changer la couleur de mon texte. Je vais donc modifier cette balise d'ancrage dont le lien de navigation de classe passe du texte au tiret, aux données sombres, tiret de texte clair. D'accord. Maintenant que j'ai modifié ce fichier et qu' il a été rechargé à chaud, permettez-moi de revenir en arrière. Et boum. Non, c'est du texte, Dash Light. vois qu'il est si facile de changer de couleur une fois que je suis l' aise avec les différentes classes et les différentes couleurs qui sont disponibles dans Bootstrap, il m'est facile de simplement faire la transition entre les coiffages quand j'en ai besoin. 15. Modifier la page d'accueil: Très bien, nous allons donc modifier notre page d'accueil. Pour en revenir à notre document bootstrap, je peux passer en revue deux exemples. Je vais juste l'ouvrir dans un nouvel onglet. Et puis, à partir d'exemples, vous voyez ici qu'ils contiennent différents types de sections que vous pouvez ajouter à votre site Web. Alors, comment voulez-vous que votre photo ait la qualité que vous souhaitez ? Différent. Hero Laos, fonctionnalités, ongles, etc. Ils ont même des pages complètes que vous pouvez utiliser et je peux appliquer celle-ci. Il possède donc des commandes intégrées, comme un carrousel, non ? Vous pouvez utiliser ce modèle de connexion pour votre site Web. Tu pourrais utiliser toutes ces choses, non ? Il s'agit simplement de savoir où mettre le code. Ce sont donc différents filtres dont vous pouvez tirer parti. Il s'agit de différents en-têtes. Tu pourrais utiliser. Des héros, des sections de héros, non ? En fonction du type de site Web que vous créez. Je vais cependant utiliser ce modèle de carrousel. Je pense que cela constituerait une bonne mise en page d'accueil pour notre système de gestion scolaire. Ou nous pouvons simplement insérer quelques images et ajouter des textes supplémentaires si nécessaire. Pour obtenir la source dont j'ai besoin sur cette page. Ce que je vais faire, c'est cliquer avec le bouton droit de la souris et accéder à Afficher la source de la page. Et je pense que l'affichage de la source de la page devrait être une option disponible sur tous les navigateurs, tous les navigateurs modernes, n'est-ce pas ? À partir de là, je vois la page HTML complète, dont nous savons que nous n'avons pas besoin de tout car nous ne faisons que modifier notre page d'accueil, donc je n'ai pas besoin de tout. Je n'ai pas besoin, tu sais, de ces étiquettes. J'ai juste besoin de cette section qui est nécessaire pour la vue, non ? Nous pouvons prendre le style parce que je pense que ces styles sont propres au PID. Empruntons donc ces styles, non ? Mais je ne vais pas les mettre dans une étiquette de style. Au lieu de cela, je vais les placer dans notre fichier CSS pour notre site. Très bien, donc ces styles peuvent y être intégrés. Et ce qui se passe, c'est que si vous voulez étendre le bootstrap, comme ce qui se passerait ici. Si vous vouliez étendre Bootstrap, vous ne modifieriez pas le fichier bootstrap. Vous écririez simplement des styles qui remplacent le style existant. Très bien, ainsi de suite prend Dash Light. Si vous vouliez que ce soit une couleur différente, vous pouvez la mettre dans votre propre classe, dans votre propre fichier CSS, et voir ce point prendre Dash Light. Et puis mettre la vôtre prendra peut-être de la couleur ou ce que vous voulez changer. Et puis il remplacera ce fichier, cette classe dans le fichier Bootstrap d'origine. D'accord, donc je porte juste ces styles parce que nous en aurons peut-être besoin, bien sûr. Ensuite, je fais défiler la page vers le bas pour voir où commence le contenu. Donc, le contenu, ou, et il existe également des styles personnalisés pour ce modèle. Laisse-moi regarder ça et je vais aussi les emprunter. D'accord ? Parce que j'en ai eu besoin pour la page ressemble à la démo. Je vais donc juste l'emprunter. Vous pouvez avoir plusieurs fichiers CSS, bien sûr, mais je vais juste mettre en place le fichier CSS de ce site, avec tous ces styles personnalisés. D'accord ? Je vous encourage également à lire les différents styles, car vous verrez ici qu'il s'agit d'un style corporel. Et ce style de carrosserie pourrait étendre notre emprise sur notre style corporel actuel. Il se peut donc que vous les fusionniez. Vous pouvez également le laisser seul ici, vous verrez qu'il ajoute un rembourrage en bas et un haut rembourré. Donc, notre original qui ajoute une marge inférieure, mais nous verrons comment ils ensemble, puis nous ferons les ajustements en conséquence. D'accord ? Nous avons donc cela, nous avons le CSS pour notre One of the pH. Très bien, nous y arriverons lentement mais sûrement. Ensuite, je voudrais prendre cette section qui contient le contenu dont j'ai besoin. Je vais donc commencer par le carrousel, car n'oubliez pas que nous avons déjà une section méchante dans notre mise en page. Il est donc important de remarquer ces choses, non ? J'ai le div, qui est le conteneur, puis j'ai ce principal. Ensuite, je veux rendre le corps et le corps de rendu me montrera les vues. Donc, ce que je veux faire, c'est remplacer le contenu de la vue par le contenu dont j'ai besoin, n'est-ce pas ? Donc, le contenu dont j'ai besoin pour la vue commencerait après cette balise moyenne et irait aussi loin que cela signifie Todd ? Eh bien, voici la balise principale, mais elle se trouve après le pied de page. Je n'ai pas besoin d'un pied de page. Déjà. Prévoyez un pied de page. C'est vrai. faudrait donc que je fasse tout ce chemin jusqu'ici. Permettez-moi donc de prendre ce copier-coller et je le colle dans mon fichier HTML à points d'index. Très bien, laisse-moi zoomer un peu pour voir que c'est un angle un peu amer, non ? Voici donc notre carrousel. Et si vous souhaitez de la documentation sur le carrousel, encore une fois, vous pouvez toujours vous rendre le site Web de Bootstrap pour obtenir de la documentation. Il se trouve sous les composants. Et dès que mes yeux s'adapteront, et encore une fois, si tu ne veux pas passer par tout ça, tu pourras toujours chercher dans le carrousel ce qui fonctionne. C'était juste là. Alors, comment cela fonctionne, vous verrez ici que ce sont des exemples d'endroits où vous pouvez vous procurer un carrousel. D'accord ? Si vous voulez un carrousel avec des boutons de Bach et des boutons avant, voici le code qui vous indiquera ce que vous devez remplacer par des ellipses, n'est-ce pas ? Et c'est individuel et c'est important aussi. Si vous en voulez plus, il vous suffit d'ajouter d'autres diapositives, d' ajouter d'autres sections comme celle-ci pour chaque élément de carrousel ou image que vous souhaitez. Vous voyez donc que c'est très, très flexible. Donc, l'exemple que j'ai copié utilise en quelque sorte cet exemple exact où j'ai, celui-ci contient en fait des boutons. Celui-ci contient un texte d'espace réservé pour que je puisse ajouter des légendes. Voici mes légendes. Et puis à chaque élément, j'ai la possibilité de changer l'image. C'est cher, monsieur, je sais qu'il utilise juste des SVG provenant des incidents du lundi, que nous pourrons éventuellement modifier. Ensuite, nous avons les boutons de navigation. Nous avons également des sections où ils ont une classe OK, une classe de division et ils l' appellent classe marketing. Voici le marketing, qui est, j'en suis sûr, l'un des cours que nous avions empruntés. On y va. Contenu marketing. Voici la classe de marketing. Donc, si nous avions besoin de l'ajuster, le personnaliser selon nos besoins, nous pourrions modifier tout cela si nous le voulions. Il existe de nombreux espaces réservés et images pour que nous puissions les remplir, bien sûr, puis vous avez le séparateur de fonctionnalités et nous pouvons ajouter ce que vous voulez. Maintenant que nous avons effectué cet ajustement et que je suis toujours en train de faire une montre à points, au cas où vous auriez arrêté la montre Dotnet depuis la dernière leçon, vous pourriez simplement démarrer une montre à points. Mais lorsque nous sautons dessus pour prévisualiser notre page, c'est ce que nous obtenons. D'accord ? Maintenant, quelques ajustements seront bien sûr nécessaires car nous voyons ici que nous avons un rembourrage en haut, ce que nous ne voulons pas. Nous ne voulons pas que ce rembourrage soit au-dessus de notre barre de navigation. Je vais donc revenir en arrière et modifier le CSS. C'est pourquoi j'ai dit que nous devions faire attention au CSS et savoir ce que nous ajoutons et modifiions. Je vais donc prendre tout ce haut rembourré. Et une fois que je l'ai vu, c'est tout ce que je sais. Ça a l'air normal, d'accord ? Et puis tout le reste me semble bon, non ? Nous pouvons donc avoir une légende alignée au centre. Nous pouvons remplacer la légende alignée. Nous pouvons avoir une légende alignée à gauche. Et bien sûr, ce sont des images que nous pouvons modifier. Tous. Il s'agit de corps de textes que nous pouvons modifier. Et nous pouvons mettre notre contenu selon nos besoins endroit où je trouve habituellement des images est pixabay.com. C'est une excellente source pour belles images une fois que nous ne les utilisons pas fins commerciales ou que nous ne donnons pas de crédit à l'artiste ou à qui que ce soit d'autre. Je peux donc prendre certaines de ces images. Et ce que je vais faire, c'est ne pas les télécharger. Je vais juste les résoudre. Je ne les téléchargerai pas, mais nous avons la possibilité d'en télécharger une et vous montrer comment intégrer une image dans notre projet. Mais je vais simplement intégrer les deux autres directement depuis le site Web pour pouvoir télécharger gratuitement et télécharger cette petite image du TPR 12 80. Vous pouvez également le réduire. Allons-y donc avec un 12 80 x 853 pour celui-ci. Blackboard, non, je ne suis pas un robot. À travers les poussins, bien sûr. Téléchargez ensuite le fichier. Tous. Maintenant, ce que j'aime faire, c'est faire glisser le fichier depuis le navigateur code Visual Studio et rien de très intéressant à exploiter, n'est-ce pas ? Une fois ce fichier téléchargé, je peux le faire glisser puis le déposer dans Visual Studio Code. Et là où je le veux, c'est dans le dossier racine dub dub real. Et par extension, je le voudrais dans un dossier d'images, alors je l'ai simplement glissé dessus. C'est connaître les racines du dub, du dub, du dub. D'accord. Cependant, je ne veux pas qu'il reste là, tout est organisé. Je veux rester organisé. Je vais donc cliquer avec le bouton droit sur dub, dub, dub root crée un nouveau dossier, je vais l'appeler images. Ensuite, je peux y faire glisser cette image. Ensuite, je renommerais l'image. Donc, dans mon cours en ligne, assurez-vous toujours qu'il est recommandé de renommer l'image le plus facilement possible. Alors Blackboard. Très bien, c'est le nom de l'image que j'ai vue. Je peux savoir modifier. Laisse-moi faire un petit zoom arrière pour pouvoir naviguer un peu plus vite. Je peux maintenant modifier l'image qui est utilisée dans l'un de mes éléments de carrousel listé sur la première voiture afin que l'article utilise ce SVG. Je ne veux pas ce SVG. Je vais donc essayer à la fois de voir à quoi cela devrait ressembler. Voici donc à quoi devrait ressembler l'image de l'élément du carrousel dans le code. D'accord ? Encore une fois, il utilise simplement un tas d' espaces réservés dans les exemples, c' est compréhensible, mais je vais les utiliser pour remplacer ce SVG. Et puis pour l'image SRC, je vais y mettre tilde. Donc, en attendant, c'est le symbole espagnol. Et juste, il suffit de vous informer de la provenance de ces informations. Si je reviens à ma mise en page, vous verrez ici, c'est tout ce que nous référençons à un fichier qui se trouve dans le dossier lib, dans les racines dub, dub, dub, dub, , d' accord, donc live jQuery, jQuery min, voici, voici jQuery, voici ceci, voici le dossier. D'accord. Donc, si je voulais une image du dossier images avec la même racine dub, dub, dub, dub, dub, je dirais tilde slash. Et puis nous reprenons le chemin, donc slash des images, des barres obliques. Et puis je dirais tableau noir, points, GP. D'accord ? Ensuite, je vais choisir l'alternative, il suffit de voir une image au tableau noir. D'accord. Maintenant, quand je reviendrai à mon point de vue, permettez-moi de me rafraîchir. Très bien, voici notre page d'accueil. Tu sais que nous avons ce tableau noir, n'est-ce pas ? Une fois, si je voulais changer le titre, sachez, donc pour le titre du texte ici, exemple de titre, système School of Management. D'accord, donc des textes représentatifs. Donc, vous voyez, je prends juste le code existant, je le modifie pour Hawaï, j'en ai besoin. Et parfois, c'est ainsi que nous commençons, jusqu'à ce que nous devenions de plus en plus créatifs et de plus en plus à l'aise. Meilleur système de gestion scolaire basé sur ESP, dotnet, MVC, Alright, b.net, Core six, soit sept. Parce que ce que nous faisons est réutilisable, d'accord, dès que j'aurai mon mot à dire sur la direction, c'est parti. Donc, pas de système de gestion scolaire, système de gestion des vésicules, inscrivez-vous aujourd'hui. Cela ne fait rien, mais je pense que c'est bien de mettre là au cas où vous fabriqueriez votre produit. Il s'agit donc de notre première diapositive. Vous pouvez donc faire les mêmes étapes avec les autres images si vous le souhaitez. Quand j'ai dit que je n' allais pas les télécharger, j'avais l'intention de faire quand j'ai dit que le lien de l'image avait été copié. Ainsi, une fois que j'ai copié le lien de l'image, il s'agit d'un lien direct vers l'image hébergée, donc je n'ai pas à le copier. C'est un CDN, donc je pourrais simplement l'intégrer sans le télécharger. Donc, si je passe au prochain élément du carrousel et que je remplace cette balise SVG par cette balise d'image. Ensuite, pour le SRC, je vais utiliser ce lien CDN. D'accord ? Et c'est ce que j'y ai placé. D'accord ? Et puis celle-ci sera une image géométrique. Donc, quand j'y retourne et que je regarde, d'accord, voici notre tableau noir, puis voici notre image géométrique. Et celui-ci est assez bruyant. Vous devriez donc peut-être évaluer comment cela se joue avec le légende, n'est-ce pas ? Et puis des enfants en Inde ? Oui, copiez le lien de l'image. Et nous voulons une certaine représentation des enfants qui fréquenteront cette école, n'est-ce pas ? C'est donc la dernière modification que je suis en train d'apporter et je suis juste en train de la massacrer un peu jusqu'à ce que je reprenne mes marques. C'est vrai. Alors on y va. Et disons simplement que nous avons modifié notre page d'accueil pour elle ressemble à ce que nous voulons. D'accord. Je vais également supprimer la section de légende de l'image géométrique. Je ne pense pas que nous ayons besoin de cette légende. Il en faut le moins. Je vais donc supprimer les deux balises P savoir les balises H1 et P. Et je vais laisser le bouton qui dit En savoir plus, non ? Et pour les enfants, un, des étudiants intelligents. D'accord ? Et du monde entier. C'est bon. Je montre juste, je sais que nous pouvons parcourir la galerie. Sympa. Je pense donc que c' est en fait le modèle de page de départ idéal pour ce type de système. D'accord. Je dois être un étudiant intelligent avec cette orthographe. Je m'excuse pour le chant principal. On y va. Très bien, donc je vais partir, je vous laisse personnaliser le reste de ces sections, non ? Et il s'agit simplement de regarder le code et d'y prêter attention. Très bien, donc si vous faites défiler la page et que vous la regardez, voici la section marketing. Voici les espaces réservés, SVG. Vous pouvez les remplacer par vos propres images que vous souhaitez placer dans celles-ci, dans ces petits cercles. Voici le titre, voici le texte sous le titre, et il y a le bouton Afficher les détails, n'est-ce pas ? Ainsi, en fonction du type de produit que vous créez, vous pouvez modifier ces sections pour qu'elles soient plus représentatives de vos besoins. Vous pouvez également simplement supprimer cette section. Il se peut que vous ne vouliez pas cette section sur le site Web. Je sais que nous savons déjà comment ajouter nos images. Donc, pour ces espaces réservés de 500 par 500 ici, encore une fois, les balises SVG que nous pouvons remplacer. Très bien, alors allez-y explorez et amusez-vous avec ça. 16. Ajouter une page à propos: Très bien, les gars, dans cette leçon, nous allons voir comment créer notre propre page. Donc, en ce moment, nous avons une page d' accueil où je garde la confidentialité ou si nous voulions une page à propos de nous ? Comment allons-nous ajouter cela ? Revenons donc à Visual Studio Code. Et je vais commencer par une manette. Nous avons le contrôleur domestique et nous savons que le contrôleur domestique nous permet de naviguer, indexer et de protéger la confidentialité. Et nous avons le troisième bouton d'option. Tout ce dont nous avons besoin est le nôtre, pas construit en un seul, non ? Je vais donc d'abord créer des résultats d'action publique suivant les modèles des précédents. Et puis je vais appeler ça un bateau. Cela signifie que je veux une page intitulée bateau. D'accord, donc l'oxygène a besoin pour voir un bateau. Et puis chaque méthode de résultats d'action doit revenir à la vue. J'aimerais simplement le faire. C'est le squelette que je fais en premier. Avant de commencer à écrire la magie. Garden a dit que c' est une simple fosse, donc il n'y aura aucune magie dans celle-ci en particulier. Mais maintenant, nous avons la vue, désolée, il n'y a aucune chance que la vente aux enchères soit enregistrée dans le contrôleur. Savoir. Si j'essaie de m'y retrouver. Très bien, et je vois du slash, home slash ou des bateaux, alors vous allez avoir ce genre d'erreur, moins pendant que vous testez. Cela va donc dire qu'il s'agit d'une exception d'opération non valide. La demeure d'observation n'a pas été trouvée et ces lieux ont été fouillés. Il cherchait dans View Slash Home un fichier appelé bateau, fait du CSS HTML. Il a également examiné la barre oblique, oblique partagée à ce sujet. L'étui est un OGM. Donc, en substance, c'est pourquoi l'erreur ne doit pas nécessairement se trouver dans le dossier d'accueil. Il peut être partagé car une erreur peut y être trouvée. Ainsi, chaque fois que nous disons renvoyer la vue, il recherche automatiquement à ces emplacements la vue que nous renvoyons pour un fichier portant le nom de la vue que nous avons dit que nous allions renvoyer. Comme il ne le trouve pas, il est devenu fou. Alors, faites-le nous savoir, revenez en arrière et créez ce fichier. Donc je vais juste cliquer avec le bouton droit de la souris sur la page d'accueil, non ? Je n'ai rien remarqué à ces nœuds , ces dossiers ont généralement une carotte et les fichiers apparaissent. Très bien, cela peut prêter à confusion, surtout lorsque vous glissez et déposez, comme lorsque nous avons fait glisser et déposé le tableau noir. Mais il commence à mettre en évidence les différents blocs et sections de fichiers. Et vous verrez ces lignes en cours de route. Fais donc très attention à ces choses. Je vais donc cliquer avec le bouton droit de la souris et dire nouveau fichier, et je mettrai le nom du code HTML CSS Boat Dot. Appuyez sur Entrée, et j'ai maintenant mon fichier de vue. Maintenant, c'est un fichier vide, mais disons que je voulais m'inspirer de : d' accord, quelles sont les premières choses dont j'ai besoin dans le fichier ? Je peux consulter les modèles des fichiers qui l'ont précédé. Ici, je vois qu'il y a une section Afficher les données pour le titre, donc je peux l'ajouter en haut. C'est vrai. Cela me permet de définir le titre de la page qui doit apparaître sur la vue. Parce que n'oubliez pas que sur la mise en page, c'est le titre, non ? Il va donc voir tout ce trouve dans les données d'affichage à ce moment-là. Tirez sur le nom du site Web, c'est le titre sur lequel apparaît la page, Seigneur. Je peux donc préciser qu'il s' agit de la page À propos de nous. Très bien, alors il ne me reste plus qu' à placer le code HTML. Pour ce point de vue, il est peu probable que nous ayons vu que nous n'avons pas besoin l'ensemble des modèles HTML et de tout le reste, nous avons juste besoin des éléments spécifiques. Je vais donc revenir à nos exemples de sites Web Bootstrap. Et je vais juste choisir un exemple très simple. Je vais utiliser cette couverture, non ? Donc, si je passe à ce modèle de cava, je veux vraiment juste ce texte. Je veux juste le texte qui s'y trouve. Je vais juste dire Afficher la source de la page. Je ne vais pas entrer dans le détail en prenant tous les styles et ainsi de suite. Je suis vraiment intéressé par le contenu de cette section principale. Très bien, alors prends-le et je vais le coller ici. D'accord. Ensuite, je pourrai modifier le texte pour que nous en soyons capables. Gardez la société de développement Pebble. D'accord ? Et vous pouvez vous mettre dans le style de paragraphe que vous voulez voir comment l' entreprise et ensuite vous pouvez voir nous contacter, contacter pour plus d'informations. D'accord. Je ne me concentre pas nécessairement sur tout le HTML sophistiqué que nous pouvons intégrer. Je vous montre juste comment nous pouvons nous ressaisir. Un site Web décent pour une application MVC. Donc, si nous l' actualisons, nous voyons notre texte comme il faut. Maintenant. Comment puis-je m'y rendre ? D'accord, à part le fait de taper le slash principal ou les deux ? Comment accéder à cette page ? Parce que je l'ai saisi manuellement, mais nous ne pouvons pas nous attendre à ce que nos utilisateurs sachent que nous devons taper un bouton, nous devons leur donner un moyen de se faire doubler. C'est donc de la même façon qu'ils peuvent rentrer chez eux et retrouver leur intimité. Très bien, donc ce que nous faisons c'est modifier la section de navigation. Revenons donc à notre fichier layout.css, HTML. Et voici, il y a assez d'articles, donc nous avons un article pour la maison, j'en aurai assez pour la confidentialité. J'ai donc besoin d'un autre élément de navigation et je suis prêt à le placer entre les deux, la confidentialité hormonale. D'accord. Celui-ci, je n'ai fait que copier et coller. J'ai donc simplement surligné l'un des éléments de navigation, Open, LI, Anchor Tag, Close Ally, Copier, puis Coller. D'accord, rien de spécial. En faisant cela, je retiens que oui, prend de la cohérence avec Dash Lights, donc je ne le tape pas à partir de zéro au risque d'erreur, contente de copier-coller et de réutiliser. Non, je n'avais pas vu que nous allions examiner quels sont ces attributs SP. s'agit donc pas d'attributs HTML classiques. Ce sont des outils d' aide aux rasoirs. D'accord ? Donc, pour la balise d'ancrage, nous avons un assistant qui nous permet de spécifier une zone. Une zone est une époque et une application Web spéciales, littéralement en particulier. Nous n'avons rien de tout cela, du moins pas encore. Vous n'avez donc pas à vous inquiéter à ce sujet. D'accord ? Mais nous avons une manette. Quelle est la manette laquelle vous souhaitez accéder ? Donc, en HTML normal, vous devez lire H ref est égal à, puis essayer de trouver la barre oblique, ce dossier, pour accéder au fichier que vous souhaitez. Très bien. Dans un environnement dynamique comme celui-ci, dotnet Core nous a facilité la tâche sans aucune sorte de navigation, n'est-ce pas ? Parce qu'il sait qu'il utilise des contrôleurs et des vues. Nous pouvons en fait spécifier que nous voulons accéder à ce contrôleur. Nous pouvons voir chez nous parce que nous utilisons toujours la télécommande domestique. Quelle action souhaitez-vous ? Ainsi, lorsque vous accédez à la balise d'accueil, lorsque vous cliquez sur Accueil, elle doit accéder à la manette principale et à l'action d'indexation. Lorsque vous cliquez sur la balise Privacy Anchor, devez accéder à la manette principale et à l'action de confidentialité. N'oubliez pas que l'action est la méthode définie ici qui doit renvoyer la vue. Donc, si je veux accéder à la page À propos, je dois accéder à leur manette principale et à l'action About. Je peux donc modifier cela dans le code et j'utiliserai celui-ci. L'action que je vais faire est donc un verrou et le texte que je m'attends à voir dans l'ischion est un logiciel de verrouillage qui apporte ces modifications. Lorsque je recharge le site Web, dès que je reçois une erreur 500. Oh, je me rends compte que parfois, lorsque vous modifiez, que vous reconstruisez et que vous passez à la fenêtre, cela devient une sorte de Frisco jusqu'au jour où vous ne pouvez plus changer pendant que je reconstruis. Laissez-le se reconstruire un peu avant de changer. Très bien, j'ai juste dit oui, redémarrez et sachez que c'est redémarré. Je peux revenir en arrière et recharger le site Web. On y va. Je sais que je vois ma nouvelle URL, le lien de notre menu. Lorsque je clique dessus, cela permet d'accéder à la manette d'accueil et à l'action À propos, qui renverra notre page à propos de nous. Très bien, il est donc facile de vraiment configurer vos vues et votre navigation entre vos vues et les différentes sections de votre application. 17. Ajouter à GitHub: Très bien, les gars, nous avons franchi une nouvelle étape et nous avons maintenant une meilleure compréhension de la façon dont nos points de vue la mise en page et le reste se rejoignent. Nous avons ajouté des images, modifié notre vue d'accueil, ajouté de nouvelles vues. Je ne connaissais pas les actions de notre manette et nous nous sommes retrouvés avec de nouveaux fichiers et des fichiers modifiés. Nous devons donc maintenant nous enregistrer ou nous engager plutôt dans notre système de gestion du contrôle des sources , ce qui est une bonne chose. Donc, juste à titre de repère visuel, tout ce qui est vert est marqué par un UV , ce qui signifie qu' il n'est pas suivi, ce qui signifie qu'il s'agit d'un nouveau fichier dont on ne sait rien. Ainsi, chaque fois que vous ajoutez un fichier, il n'est pas suivi et il est vert. Et puis une fois que le fichier existera depuis le dernier poulet et que vous aurez apporté des modifications, il sera orange ou orange et apparaîtra modifié, non ? Nous pouvons donc accéder à notre onglet de contrôle des sources où ils nous indiquent les différentes modifications. Et à partir de là, nous pouvons spécifier si nous voulons qu'il soit ignoré, nous pouvons annuler les modifications, ajouter des informations spécifiques. Tout d'abord, Gitignore. Parfois, nous voulons le faire si nous avons des fichiers de configuration similaires dont nous ne voulons pas de poulet, n'est-ce pas ? On pourrait l'ajouter au Gitignore. Nous pourrions faire comme une scène, comme si vous vouliez commettre un zéro, mais pas tout. On pourrait dire. Scène. Comme je l'ai dit, si vous avez apporté des modifications mais que vous ne les voulez plus, vous pouvez simplement dire «  annuler les modifications ». Et tu pourrais même faire une comparaison. Vous pourriez donc dire « changements ouverts et cela vous montrera une comparaison côte à côte entre la sauvagine et ce qu'elle n'est pas, depuis que vous avez apporté vos modifications. Ce sont donc des outils qui peuvent nous aider à nous assurer que nous ne vérifions pas leurs propres informations et que nous sommes parfaitement sur la bonne voie en ce qui concerne les modifications que nous espérons avoir apportées. Maintenant, nous pouvons voir les vues et la mise en page du site Web ajoutées ou modifiées, n'est-ce pas ? C'est donc notre message sur le poulet. Ainsi, tous ceux qui se rendront compte de nos changements peuvent nous obtenir un résumé de ce qui s'est passé avec ce commit. Et nous allons simplement nous engager et pousser. Très bien, maintenant que cette section est terminée, je vous verrai dans la prochaine leçon. 18. Connectez-vous à base de données avec Azure Data Studio: Très bien les gars, dans cette leçon, nous allons créer notre base de données que nous utiliserons comme épine dorsale de notre système de gestion scolaire. Sachez que nous allons commencer par ouvrir notre Azure Data Studio. Et je vais utiliser l'image docker notre Microsoft SQL Server que nous avons installée à partir d'activités précédentes. C'est là que nous allons créer notre base de données. Vous pouvez donc y revenir. Écoutez juste pour voir comment vous pourriez ouvrir Dark et lancer cette base de données. Mais j'ai déjà plus sombre et je vais juste vous expliquer quelques points au cas où vous auriez arrêté le conteneur à ce moment-là. Et tu dois te refamiliariser avec Hole pour recommencer à courir. D'accord. Vous pouvez donc commencer et ouvrir votre bureau Docker. Je vais juste utiliser le bureau cette fois plutôt que la CLI. Et sous la section Conteneurs, nous pourrions voir tous les conteneurs que nous avons actuellement. Vous n'en avez donc probablement qu'un. C'est très bien. J'en ai plusieurs. D'accord, mais voici celui que nous avons créé plus tôt , à savoir le conteneur Microsoft SQL Server. Hein ? Maintenant, avant de cliquer sur Exécuter ou Démarrer, je voulais juste souligner que si vous avez oublié certains paramètres que vous y avez saisis, vous pouvez revenir en arrière vérifier toutes les configurations. Vous pouvez donc réellement regarder l'inspection. Lorsque vous double-cliquez dessus, vous pouvez accéder à Inspecter. Ensuite, dans l'environnement, vous verrez les variables d'environnement que nous ajoutons transmises lorsque nous l'avons configuré. J'ai donc vraiment oublié mon mot de passe. Hein ? C'est la posture que j'avais utilisée. Je peux donc simplement le copier et garder cela à l'esprit car j'en aurai besoin lors de la connexion. Et n'oubliez pas le numéro du rapport que vous avez indiqué, le numéro d'assistance que vous essayez de connecter à quelqu'un pour démarrer ce conteneur. Et je peux regarder l' écran des journaux juste pour voir s'il démarre correctement et qu'il n'y a aucune erreur nulle part. C'est bien. Maintenant, une fois qu'il est en marche, et si je reviens en arrière, voyez ici qu'il est vert, donc il fonctionne et diffuse sur le port 1 400. Non, je peux m'y connecter à l'aide d'Azure Data Studio. Dans Azure Data Studio, je peux donc cliquer sur cette nouvelle connexion. Vous n'avez peut-être pas autant de contacts que moi. C'est très bien. Mais à partir de là, je vais juste voir comment le Microsoft SQL Server de type Nixon est un hôte local. Et puis, lorsque nous utilisons des visuels, désolé, lorsque nous utilisons SQL Server, utilisez une virgule pour le port, n'est-ce pas ? Donc localhost comma, puis 1 400. D'accord ? Le type d'authentification est la connexion SQL. Le nom d'utilisateur est SE, tel que nous l'avons configuré par défaut ou tel que nous le connaissons par défaut. Et notre mot de passe est celui que vous avez utilisé. Et puis une fois que j'ai fait tout cela et que j'ai cliqué sur Connecter, il m'avertira qu'il a besoin d'un certificat de confiance afin que je puisse simplement activer le certificat de serveur de certificats de confiance . Et une fois que je l'ai fait, non, je suis connecté. J'ai donc localhost Coma 1 400 connecté en tant que SE. Et je peux maintenant continuer à manipuler tous les actifs de ce serveur. L'avantage de Your Data Studio, c' est qu'il vous permet même de catégoriser votre connexion. Vous voyez donc ici que je peux nettoyer certaines de mes catégories. Je peux simplement créer un nouveau groupe de serveurs. Et je dirais comme Azure. Ensuite, je pourrai attirer tous mes regards, vos relations , vers ce groupe. D'accord, donc j'ai moins de bruit et je peux trouver ce que je veux plus facilement. Je peux l'écraser. Ensuite, je pourrai en créer un autre pour le local. D'accord ? Ensuite, je pourrai y mettre cet hôte local. Je pourrais même préciser que l'un d'entre eux est plus sombre que celui-ci n'est pas médecin. Ce sont donc toutes mes instances locales. Comme vous pouvez le constater, j'ai plusieurs instances locales et je me suis déconnectée du dark par inadvertance. Je vais donc juste remettre dans le passé ET maintenant me souvenir de l' analyseur cette fois, pour ne pas avoir à le faire à chaque fois. Et vous verrez ici qu'ils voient cela devrait crypter la connexion. Je peux dire vrai ou faux. Faites confiance au certificat du serveur, à cette clinique. Et je suis prête à y retourner. C'est ainsi que nous nous connectons à notre base de données à l'aide d' Azure Data Studio. Maintenant, quand nous reviendrons, nous passerons à la création de la base de données. 19. Créer une base de données: Très bien, passons donc à la création de notre base de données. Je vais donc ouvrir une nouvelle requête et cette nouvelle requête sera contraire à notre connexion. Nous pouvons toujours changer de connexion en la prenant puis en choisissant l' autre connexion que nous voulons. Mais c'est très bien. Nous allons simplement continuer comme c'est le cas actuellement. Vous remarquerez que cette interface utilisateur est très similaire à l'interface de Visual Studio Codes. D'accord, donc beaucoup de raccourcis clavier pour travailler nous permettent de contrôler, un contrôle rapproché en moins. Nous pouvons ancrer les connexions pour décider de nous donner plus de place. C'est donc une interface utilisateur très familière très propre et facile à utiliser. Nous allons maintenant créer une base de données appelée School Management DB. D'accord ? Et cette base de données est en quelque sorte basée sur la base de données qui a été utilisée dans mon cours de SQL. Vous pouvez donc vérifier cela. Si vous n'êtes pas très familier avec SQL et SQL Server, vous pouvez suivre ce cours. Cependant, si vous avez déjà quelques connaissances en matière de bases de données et que vous vous sentirez comme chez vous. Et je t'expliquerai au fur , juste pour que tu puisses suivre. La première déclaration que nous voulons écrire est donc créer une base de données. Cela nous permet de spécifier le nom de la base de données que nous souhaiterions créer. Très bien, nous allons donc vouloir créer une base de données appelée School Management DB. Ensuite, nous devons définir un objectif. Ensuite, nous devons utiliser la base de données que nous venons de créer en ce moment. Et en écrivant un script, nous pouvons exécuter chaque ligne. Je peux donc le mettre en évidence et dire Exécuter, puis le surligner et dire courir. Parce que ce qui se passe, c'est qu' au moment où ça arrivera, ça n'existera plus, non ? Donc tant que ce n'est pas Ron, cela n'existe pas. Nous allons donc voir cette ligne ondulée rouge représentant une erreur. Mais c'est bien parce que nous pouvons simplement écrire le document entier et il partira de la première ligne, de la deuxième ligne, de la troisième ligne, puis de tout le reste. Nous n'avons donc pas à nous inquiéter de cette ligne ondulée rouge, n'est-ce pas ? Non. Ensuite, nous voyons créer une table. Le premier jour, je vais créer celui d'un étudiant, d'accord. Créez donc une table pour étudiants et elle ouvrira et fermera les parenthèses. Ensuite, nous allons spécifier quelques colonnes. Je vais donc dire id INT. Je recommande toujours que lorsque vous créez une base de données, vous ayez toujours une colonne d'identifiant de clé primaire générée par la base de données. D'accord ? Donc, ici, je vois que id est un entier, c'est une clé primaire et cela devrait être une colonne d'identité. L'identité signifie qu'elle augmentera automatiquement au fur et à mesure. Ensuite, d'autres choses que les élèves auront, notre prénom, notre nom de famille, notre date de naissance. Et en fait, je vais juste les brancher. D'accord, donc je ne t' ennuie pas à taper. Vous pouvez faire une pause et répliquer ces colonnes supplémentaires. Prénom, nous utilisons n var char 50, et il n'est pas autorisé à être nul, non ? Même chose pour le nom de famille, la date de naissance. Nous verrons du deet et nous accepterons que ce soit du nez. Je ne vais pas spécifier une valeur non nulle. Donc, si je sais qu' il entre ici, c'est très bien. D'accord ? Ensuite, le tableau suivant que nous allons avoir concerne les conférences. Pour les conférences, je vais simplement faire le même type de déclaration, sauf que nous utilisons simplement FirstName et LastName. Très bien, j' aurais donc pu simplement copier cet espace pour que les étudiants passent à des conférences et qu'il supprime le rythme. Vous verrez qu'ils ont une structure très similaire. Et puis le dernier que nous voulons, ce sont quatre cours. Donc, comme je l'ai dit, c'est un système de gestion scolaire pour une petite école. Ils veulent simplement être en mesure de savoir qui sont les étudiants. Ils veulent savoir qui sont les conférences. Ensuite, ils ont voulu suivre les cours proposés. Quel est le nom du cours ? Quel est le code du cours ? Et cette neige va avoir une contrainte unique. Cela signifie qu'aucun cours devrait avoir le même accord. D'accord ? On peut soutenir que cela pourrait également être unique en termes de nom, mais les règles commerciales détermineront ces décisions. Et puis le nombre de crédits que comportera ce cours. C'est un système de gestion scolaire simple, très, très simple. Nous avons donc créé notre script de base de données. Je sais que nous voulons réellement créer la base de données, car si nous y revenons en arrière et que nous y réfléchissons, les bases de données sont vides. Ainsi, lorsque nous cliquons sur Exécuter, comme je l' ai dit, le script entier sera exécuté et notre base de données sera créée. Nous obtenons donc ces indices visuels qui ont lancé l'exécution et ensuite tout s'est terminé avec succès. Donc, si j'actualise les bases de données, voir l'EB de la direction de mon école, puis je peux effectuer une recherche détaillée et voir les tableaux qui s'y trouvent. Très bien, il est donc facile de créer une base de données à l'aide de scripts. Et l'avantage des scripts, au cas où vous ne connaîtriez pas trop le SQL et scripts fonctionnent, c'est que je peux enregistrer ce fichier et le réutiliser ultérieurement, n'est-ce pas ? Il s'agit donc simplement d'un fichier de script. C'est juste un fichier texte qui contient des instructions pour créer une base de données, je peux l'enregistrer dans mon système de fichiers local. Si j'ai à nouveau besoin de cette base de données, je peux soit changer le nom ici, soit encore une fois, passe en revue tous ces scénarios dans mon cours de SQL. Maintenant, j'ai créé la base de données. Mon prochain objectif est de le connecter réellement à mon application. Donc, la base de données et son exécution dans une version plus sombre se trouvent facilement sur un autre serveur, n'est-ce pas ? Cela n'a pas vraiment d'importance dans l'ensemble des choses. Ce qui compte, c'est que j'ai besoin mon application voie cette base de données et puisse interagir avec elle. Nous allons donc voir comment tirer parti d'une bibliothèque appelée Entity Framework pour y parvenir avec notre application Web. 20. Base de données d'échafaudage avec noyau de cadre: Très bien les gars, nous avons donc créé notre base de données et tout ce dont nous avons besoin pour nous y connecter via notre application. Et il y a peu de choses que nous devons adapter ou appliquer pour faciliter cela. Il utilisera donc Entity Framework, qui est intégré à notre produit phare de Microsoft pour connectivité et la manipulation des bases de données. ORM est donc l'abréviation de Object Relational Mapper. Accédez à Entity Framework dans notre projet, nous pouvons passer au fichier CSS. Nous pourrions les ajouter manuellement ici, mais nous utiliserons simplement la CLI dotnet. Et vous pouvez voir ce qui se passe dans ce fichier CSV lorsque j' exécute ces commandes. Donc, la commande que je vais exécuter, il suffit d'augmenter et d'augmenter les réalistes immobilier et la taille de l'écran. La commande que nous exécutons ici est dotnet add package. D'accord ? Et cela permettra de contacter le gestionnaire de packages appelé New gets. Vous allez accéder à de nouveaux référentiels Git et obtenir le package, la dernière version du package. Si nous ne le précisons pas, dans ce cas, je ne vais pas spécifier de version. Et ce que je vais essayer d'obtenir, c'est le package pour Microsoft point Entity Framework Core SQL Server. Ce package, nous pouvons simplement plonger dans le package dotnet add Microsoft mais Entity Framework, Core SQL Server. Ce package contient tous les connecteurs et tout le code dont nous avons besoin pour faciliter la communication avec une base de données SQL Server. Entity Framework est open source, multiplateforme et prend également en charge différents types de bases de données. Donc, si vous utilisez Sequel Light, Postgres ou MySQL, il existe des bibliothèques qui proposent des extensions sur les packages plutôt que pour Entity Framework Core pour ces bases de données particulières. Dans ce cas, nous utilisons SQL Server. Je vais donc simplement y aller, le mettre dedans appuyer sur Entrée, puis donner quelques secondes. Et puis il va partir et télécharger cette poche depuis NuGet et elle se trouve dans un fichier RCS bridge, vous voyez apparaître un nouveau nœud indiquant que nous savons avoir une référence de package vers la bibliothèque qui nous venons de créer un outil de référence, et la version est 7.0. Très bien, Entity Framework Core Seven est compatible avec dotnet Seeks. Ainsi, même si vous utilisez dotnet Seeks, vous pouvez utiliser la version 7 d'Entity Framework Core. Maintenant, un autre package que je souhaite installer avant de passer à autre chose serait conçu. Je vais donc simplement appuyer sur le haut pour obtenir la Lira et la commande les plus récentes. Ensuite, je vais supprimer le SQL Server de la commande et le remplacer par le mot design. Et puis j'appuie sur Entrée. Ensuite, il va faire la même chose, contacter, obtenir le package, puis mettre à jour notre fichier CSV avec ce nœud. Vous verrez donc qu'il y a encore quelques éléments à ajouter en plus de la simple référence au compartiment, mais c'est très bien. Maintenant que notre projet intègre Entity Framework, nous devons ajouter ce que nous appelons une chaîne de connexion. La chaîne de connexion est donc comme une adresse, ou elle contient une série d' instructions qui permettent l'application ou à la manière dont elle peut se connecter à la base de données. Cela figure donc dans notre fichier up settings.js, JSON. Ici. Je vais juste le modifier, et ce n'est qu'un fichier JSON normal, non ? C'est donc la syntaxe CMG. Nous savons qu'il s'agit d'une paire clé-valeur. Les chaînes de connexion sont une section. Vous pouvez donc simplement commencer à taper des chaînes de connexion et appuyer sur Entrée pour le remplir pour vous. Laisse-moi le refaire. Les chaînes de connexion entrent et elles se remplissent, elles tiennent. D'accord ? Ensuite, à l'intérieur des chaînes de connexion vous pouvez avoir plusieurs bases de données. Ainsi, vous pouvez avoir autant de paires clé-valeur de chaînes de connexions que vous le souhaitez. Cette première chaîne de connexion dont je vais avoir besoin pour cette application est celle qui se connecte à la base de données de gestion de l'école. Alors ouvrez et fermez les guillemets. Et puis j'y écris le nom de la chaîne de connexion, qui est la connexion à la base de données School of Management. Très bien, alors nous avons les valeurs par deux points, puis nous ouvrons et fermons les guillemets. Voici donc où nous avons réellement inséré la chaîne de connexion. Notre chaîne de connexion indiquera donc que le serveur est égal, puis l' adresse du serveur, qui dans notre cas est localhost virgule 1 400, car nous utilisons notre base de données hébergée plus sombre que nous configuré. Cependant, il ne s'agit que de l' adresse de la base de données. Donc, si j'utilisais mon instance d'hôte locale, je dirais localhost. Si j'utilisais mon instance SQL Express, je dirais SQL Express, non ? Donc, si vous utilisez SQL Express et non plus sombre, voici à quoi ressemblerait cette adresse. D'accord, donc j'utilise une fois de plus Darker, localhost 1 400. Ensuite, nous spécifions la base de données. La base de données ici, je crois que nous l'avons appelée gestion scolaire. Eb peut toujours revenir en arrière et vérifier comment vous l'appelez. donc une base de données. Et notez que nous utilisons des points-virgules. Ensuite, nous devons voir un lien fiable sur le score. Nous devons donc indiquer s' il s'agit d'une connexion fiable, ce que je vais simplement dire faux pour le moment, car la base de données recherche certaines exigences de sécurité seront respectées et nous pouvons réserver cela pour un plus grand nombre de configurations de production que pour quatre développements en cours. Donc, pour l'instant, je vais simplement dire que c'est faux. Et puis nous avons un autre paramètre qui indique un ensemble de résultats actifs multiples. Et cela indique essentiellement si plusieurs connexions sont autorisées simultanément. Oui Et puis le dernier est crypt égal à faux. Enfin, pas enfin, mais la dernière question liée à la sécurité est que crypter équivaut à une chute, en particulier dans EF Core. Ce qui se passe, c'est que dans la version la plus récente d'EF Core, valeur par défaut sera true Vous devez donc indiquer spécifiquement que c'est faux, ou est-ce que cela supposera que c'est crypté et s'il n'est pas configuré correctement, votre connexion ne sera pas établie. Ce lien ne fera que provoquer ces deux baisses dans notre environnement de développement. Ensuite, nous devons spécifier le nom d'utilisateur et le mot de passe. Cette partie est désormais facultative. L'ID utilisateur et le mot de passe sont facultatifs si vous utilisez SQL Express ou si vous utilisez une instance de SQL Server installée localement, ce qui signifie que l' authentification Windows sera utilisée par défaut l' authentification Windows vous n'avez pas besoin de spécifier un nom d'utilisateur et un mot de passe. Dans le cas où vous devez utiliser un utilisateur comme si vous utilisiez SQL Login, que vous l' ayez configuré comme ça ou que vous utilisiez Docker où il n'y a aucune véritable option pour faire autrement, alors vous allez certainement devoir spécifier le nom d'utilisateur. Ensuite, vous devrez spécifier le mot de passe et j'ai oublié mon mot de passe. Laissez-moi simplement revenir à l'obscurité et regardez-moi à mon image. On y va. Continuez à cliquer au mauvais endroit. J'emprunte donc cette valeur de mot de passe pour ma chaîne de connexion, car quelle que soit la manière dont je m'y connecterais, c' est ainsi que l'application devra s'y connecter. Ensuite, cette chaîne de connexion indique comment nous allons réellement nous connecter à la base de données et extraire la base de données. Dans cette leçon, nous allons non seulement établir une chaîne de connexion, mais nous allons également être à l'origine de la toux la base de données dans notre application. Nous avons adopté ce que nous appelons une approche de base de données d'abord, ce qui signifie que nous avons créé une base de données et que nous allons ensuite connecter l'application à celle-ci. L'alternative, c'est peut-être que nous ayons cette application et que nous utilisions du code, c'est-à-dire que nous écrivons du code, des classes et des modèles. Et puis en utilisant cela pour indiquer à la base de données à quoi elle devrait ressembler. C'est ce qu'on appelle Code First. Autres cours où je montre du code pour nous Ce cours, je suis sûr que c'est d'abord dans la base de données, afin que nous puissions avoir une idée de la façon dont nous pouvons intégrer une base de données existante, car la plupart du temps, la base de données est déjà là et nous devons soit mettre à niveau l'application, soit créer une application pour la base de données. Nous avons besoin de connaître un tout pour examiner une base de données existante et la modéliser dans notre application. Donc je vais juste faire du CLS. Nous avons donc une nouvelle fenêtre de terminal ici. Vous êtes des destructions. Ensuite, écrivons un nouveau dotnet. Stephen. Mais avant cela, nous devons installer le jeu d' outils EF dans notre interface de ligne de commande dotnet. Je dois donc dire dotnet new install, puis je vais simplement l'installer globalement. Donc tiret, tiret global. Et puis l'outil que j'installe s'appelle dotnet high F et E f. Donc, une fois que je l'ai fait, vous pouvez voir que je l' ai déjà installé. Ma CLI dotnet l' a déjà installée, mais la vôtre suivra probablement les étapes et intégrera toutes les bibliothèques de support pour cet outil. Une fois cela fait, nous pouvons maintenant passer à nos opérations d' échafaudage EF dotnet. On peut donc parler de contexte dotnet EF BB. D'accord ? Et puis on dit échafaudage. Un échafaudage signifie que je regarde ce qui existe, puis je l' ai modélisé dans l'application. Et puis pour brouiller ce dont j'ai besoin c'est de la chaîne de connexion. Je vais donc copier cette chaîne de connexion que nous venons de mettre dans les paramètres de l'application, ce fichier JSON. Et je vais le coller ici. Très bien, c'est simple et sympa, mais nous l'avons déjà écrit. Et j'espère que c'est déjà exact, non ? Après cela, nous verrons quel pilote ou quel type de base de données. Je dois donc spécifier le type de base de données via la bibliothèque, la mer et Microsoft mais Entity Framework, Core point SQL Server. Et n'ayez pas peur de copier-coller , car cela demande beaucoup de saisie. Donc, même pour cela, vous pouvez revenir au fichier USCS Broach, le copier, puis le coller C'est ce qui vous rend plus efficace. Ensuite, je vais spécifier que je veux cela soit affiché dans un répertoire appelé data. Très bien, donc je peux voir le tiret 0. Ensuite, indiquez le nom du dossier contenant des données. Donc, encore une fois, dotnet EFL aimerait se disputer avec le contexte de la base de données. Où que se trouve cette base de données, optez pour cette base de données. C'est ce que je veux construire. Ce contexte de base de données est désactivé. Nous utilisons un serveur SQL. Et lorsque vous êtes prêt à générer vos fichiers, téléchargez-les dans un dossier appelé data. Je peux appuyer sur Entrée. Et puis, une fois que j'appuie sur Entrée, nous allons voir quelque chose qui a l'air beau ou quelque chose qui ne semble pas bon. Un beau, c'est toujours bien. Nous voyons donc ici que nous avons eu une erreur car il n'a pas réussi à se connecter avec l'utilisateur. Donc, les réponses selon lesquelles la connexion a échoué pour cet utilisateur, et moi, vous n'avez probablement pas eu cette expérience. Mais c'est parce que j' utilise les guillemets doubles ici. Permettez-moi de les remplacer par des guillemets simples. Très bien, remarquez, remarquez la différence. À cause du mot de passe que j'ai choisi, j'ai le signe du dollar. Ainsi, lorsque j'utilise des guillemets doubles, les signes du dollar sont codés pour montrer qu'ils ne sont pas considérés comme des chaînes littérales. Lorsque j'utilise un seul guillemet, tout est d'une seule couleur. Ce sont donc de petites pépites que vous pouvez découvrir par essais et erreurs. Permettez-moi donc d'appuyer sur Entrée et de réessayer. Cette fois. D'accord. Nous avons reçu un petit avertissement indiquant que si votre chaîne de connexion est susceptible de protéger une inflammation sensible, vous devez la retirer du code source. D'accord ? Maintenant, si je passe à mon explorateur, je peux faire défiler l'écran vers le haut et voir un nouveau dossier appelé données. Et lorsque je l'agrandirai, je verrai des fichiers de classe correspondant aux noms de mes tables. Et je vais voir ce fichier appelé fichier contextuel de base de données. Maintenant, dans ce contexte de base de données, nous sommes essentiellement en train de modéliser ou de créer une base de données. Ce contexte de base de données est donc l'incarnation de notre base de données. Dans les versions précédentes antérieures à dotnet Core et EF Core, nous serions en mesure de générer ce diagramme, qui ressemble à un diagramme de relations entre entités ERD qui afficherait en fait ces tables telles qu'elles sont dans la base de données en l' absence du diagramme. Et même derrière le diagramme se trouvait un fichier appelé fichier contextuel de base de données qui ressemble à ceci. Ainsi, dans ce fichier contextuel de base de données, il décrit les différentes parties de la configuration nécessaires. Nous voyons ici où il est initialisé en ensembles de dB. Ainsi, chaque ligne assise en dB représente le tableau. Le nom de la table est donc étudiants, mais l'ensemble de bases de données est basé sur les modèles. Les étudiants ont pris toutes les propriétés de la table appelée étudiants et ont généré une classe correspondant à celle-ci. Donc, les propriétés de la base de données ou de l'identifiant, du prénom, du nom de famille et de la date de naissance. Ils correspondent tous à ce qui figure dans la définition de la base de données. Très bien, ce diagramme représente la version du code de notre base de données. Maintenant, une chose à noter est que nous verrons la même erreur ou le même avertissement que celui que nous avons reçu dans la CLI juste au-dessus de la chaîne de connexion. Maintenant, il s'agit de la même coordination et du même flux que ceux que nous avons utilisés ici dans la commande, nous l' avons déjà dans le bouleversement. Je ne veux vraiment pas encoder. Donc, ce que je vais faire, c'est exécuter une autre commande pour générer la CLI. généré ce diagramme ou plutôt ce contexte, laissez-moi simplement faire un CLS. Je suis allée simplement presser et récupérer la dernière fois que nous nous trouvions sur la seule neige. Tout ce qu'il faut noter ici. Premièrement, j'ai déjà des dossiers. Si j'essaie d'exécuter cette commande, encore une fois, je vais obtenir une erreur car les fichiers que j'essaie de générer existeront déjà. Maintenant, cela peut poser problème lorsque vous souhaitez réellement apporter des modifications, sorte que la base de données change, alors vous voulez que le code reflète que vous devrez réexécuter cette commande. Maintenant, ils disent que nous devons utiliser le drapeau de force pour remplacer les fichiers. Cela signifie donc que dans la commande SAM, je dois ajouter un tiret, non ? Ou tiret, force du tiret. Cela signifie que peu importe, même s'il existe déjà, je veux une dérogation. La prochaine chose que nous voulons insérer est une commande qui vous indique de ne pas l' inclure dans est une commande qui vous indique de ne pas l' inclure la configuration ou dans la section de configuration. Nous n'avons pas besoin de ce rapport sexuel avec la chaîne de connexion. Je peux donc voir un tiret, un tiret, tiret se configurer, je sais configurer, non ? Lorsque j'appuie sur Entrée, un message d'erreur s'affiche. Et c'est parce que cela concerne davantage la configuration et je m'excuse, n' est pas une question de configuration. Essayons encore une fois. Donc, pas de configuration, puis c'est la construction, et puis c'est fait. Et si nous revenons aux valeurs de nos contextes, verrons que nous n'en avons plus lors de la configuration de la méthode. Très bien, nous n'avons donc aucun modèle qui crée ce que nous n' avons pas lors de la configuration. Nous n'avons pas besoin de cette pièce. C'est ainsi que lorsque nous modifierons notre base de données, nous devrons exécuter cette commande. Il va simplement régénérer tous les fichiers pour nous à chaque fois. D'accord ? , la dernière chose à faire est de s'assurer que notre application connaît la base de données, car oui, les fichiers sont là, mais il n'y a toujours aucune connaissance réelle de la base de données et de l'application réelles. Nous devons accéder à notre fichier program.cs, puis nous devons faire ce que nous appelons l'enregistrement ou l'injection ou la distribution de dépendances. Nous devons donc enregistrer que cette base de données existe dans l' application afin de pouvoir utiliser Entity Framework et y accéder. Donc, tout d'abord, je vais dire que var avec est égal à. Ensuite, je vais accéder à notre fichier de configuration. Je peux donc voir la configuration du Builder Dogs, la configuration au moment où l'application ou le handicap est initialisé. Il recherchera tous les paramètres de l'application et tous les autres fichiers de paramètres et les intégrera simplement dans cet objet, puis créera la configuration. Et puis il y a une méthode qui dit « get connection string, nice and clean ». Ensuite, il ne nous reste plus qu'à connaître le nom de la chaîne de connexion. Donc, si tu as oublié le nom, c'est très bien. Sautez par-dessus, saisissez le nom, copiez, revenez en arrière et collez. Nous avons maintenant la chaîne de connexion. Nous devons réellement ajouter le contexte de base de données. Donc, la startup, disons un constructeur point services. Et il indiquera le contexte B2B point AD. Et nous allons le placer dans le contexte de la base de données. Et je vais juste passer en revue la copie du nom et la coller ici. Nous ajoutons donc ce contexte de base de données, n'est-ce pas ? Ensuite, nous devons transmettre les options. Donc q points, c'est juste une expression Lambda. Si vous n'êtes pas familier avec les expressions lambda, vous allez utiliser de nombreuses portes. Mais il s'agit d'une expression lambda. Nulle part nous disons d'utiliser SQL Server. Et voici la chaîne de connexion. Très bien, maintenant il me manque quelques références. Il suffit de cliquer dessus et de dire Conduits de commande. Cela me permettra d'ajouter cette déclaration d'utilisation. On y va. Et puis voici à nouveau les données onshore, et cela me permet d'ajouter cette déclaration d'utilisation. Et non, il n'y a pas de flèches. Donc, en gros, nous voyons quand l'application démarre, j'ai saisi la chaîne de connexion. Utilisez ensuite la chaîne de connexion pour initialiser une connexion réelle à la base de données dont ce contexte de base de données est un modèle. Et voici cette chaîne de connexion que vous devez utiliser. Très bien, maintenant c'est ce que nous appelons la section des options. C'est donc ce qui est transmis dans notre contexte de base de données lorsque nous voyons des options. D'accord ? Je vous montre donc simplement toutes les petites pièces mobiles afin que vous puissiez apprécier à quel point tout cela est lié. Nous avons donc maintenant créé une connexion entre notre application et SQL Server. Ainsi, chaque fois que nous exécutons un dotnet à partir de non, il établit cette connexion au démarrage de l' application. Maintenant, la prochaine chose que nous allons faire est de commencer à créer des fonctionnalités interaction avec la base de données. Parce que nous avons ici ce que nous appellerons des modèles de base de données, non ? Et si nous voulions commencer à créer des cours, des conférences, des étudiants ? Nous avons donc besoin de contrôleurs, de vues, fonctionnalités intermédiaires pour transmettre cela. Nous verrons donc comment commencer dans la prochaine leçon. 21. Vues et contrôleurs d'échafaudage - Partie 1: Dans cette leçon, nous allons utiliser notre manette et voir le mot « sabordé ». Nous l'avons déjà utilisé, et cela signifie essentiellement que nous générons du code basé sur quelque chose, n'est-ce pas ? Nous avons donc pu créer un contexte de base de données en générant le contexte de base de données et les fichiers de classe, des fichiers modèles basés sur la structure de notre base de données. Dans cette situation, nous allons utiliser des contrôleurs et des vues d'échafaudage basés sur l'un de ces modèles. Très bien, alors n'oubliez pas que nous avons un Model View Controller. Nous avons maintenant le modèle. Ainsi, le dossier de données, tout ce qu'il contient représente les modèles. Ces dossiers de classe sont donc des modèles oraux, des cours magistraux, et les étudiants, ce sont nos modèles. Elles représentent les données. Nous avons maintenant besoin des vues qui nous permettent de visualiser les données et d' interagir avec les données, l'interface utilisateur liée au modèle. Et nous avons besoin du contrôleur pour contrôler trafic et les demandes, ainsi que toute logique liée à la manipulation des données et à l'affichage de la vue. Maintenant, pour les créer, nous avons la possibilité de créer manuellement un contrôleur, créer manuellement une vue et de les câbler. Et je pense qu'à ce stade, surtout si vous êtes débutant, il vaut mieux montrer le code généré et vous l' expliquer. Et alors vous apprécierez mieux ce qu'il faut pour le créer à partir de zéro, non ? CLI dotnet nous permet donc d' échafauder tout le code qui nous permettrait d'effectuer des opérations crud de base, créer, de lire, de mettre à jour, de supprimer, d'accord. donc de vues, de contrôleurs et fonctionnalités qui nous permettent de créer des enregistrements, de lire des enregistrements, mettre à jour des enregistrements ou de supprimer des enregistrements en fonction de l'un de ces modèles et de ce qu'il représente dans la base de données. Alors, assez de mon monologue, entrons dans le vif du sujet. La première chose que nous voulons faire est d'installer un autre outil , le générateur de code ASP NET. Je vais donc réduire le panneau latéral et agrandir un peu ma CLI. Et nous ferons également du CLS. Débarrassez-vous de tout ce bruit. On y va. Très bien, nous devons maintenant exécuter la commande qui dit dotnet tool. Tu l'as déjà vu. Installez. Et je vais voir si vous pouvez dire tiret, tiret global comme nous l'avons fait la dernière fois ou tiret g. Très bien. Ensuite, ont été installés dans le dotnet.net tiret ASP, outil générateur de code de tiret NET. Très bien, alors appuyons sur Entrée et laissons cela fonctionner. OK, eh bien, ça fonctionnerait pour toi, quoi ? Je l'ai déjà installé, d'accord, donc parce que nous l'avons installé, je reçois cette erreur. Cependant, vous auriez en fait une expérience très similaire à celle que nous avons vécue lorsque nous avons installé le dotnet EF2. D'accord. Maintenant que cela est installé, nous devons exécuter une commande qui nous permet d' échafauder le contrôleur en fonction du modèle. Et nous voulons exploiter les points de vue qui nous aident à mener à bien des opérations de foule. Mais avant cela, nous avons besoin de quelques paquets supplémentaires, non ? Vous avez donc déjà le serveur SQL Entity Framework. Nous avons déjà Entity Framework. Design. Ce dont nous avons besoin, c'est le package dotnet add. Et nous voulons que cette conception soit cogénérée par Microsoft Visual Studio point Web Dot. Il s'agit donc d'un multiple. Appuyez sur Pause et assurez-vous de le réécrire tel que vous le voyez à l'écran, n'est-ce pas ? Donc, dotnet add package, Microsoft Visual Studio point Web Dot Cogénération qui a conçu. Ce package soutient réellement cette ambition de cogénération selon laquelle, une fois qu' il aura été réalisé et qu' il aura été couronné de succès, je me contenterai de faire du CLS. Ensuite, ce que nous pouvons faire une fois que nous l'avons inclus, c'est d'aller de l'avant et de faire notre échafaudage. Si vous utilisez Mac OS X, Mac OS ou Linux, vous devez exécuter cette commande qui indique que chemin d' exportation est égal signe dollar home, Slashdot, net, dotnet. C'est vrai. On y va. Dot.net ou Full Stop.net outils slash, puis chemin du signe dollar à deux points. D'accord. Donc, en gros, pour OS , Mac OS et Linux, où le gars de base est juste assis sur le chemin, et ce devrait être le signe dollar, et non le hashtag home. Je m'excuse. Cela signifie donc simplement que le répertoire du fichier de projet ou du fichier program.cs se trouve à la racine, n'est-ce pas ? Les outils dotnet doivent donc pointer vers la racine du projet. Donc, si vous utilisez Mac OS ou Linux, vous devez d'abord exécuter cette commande. Après avoir exécuté cette commande, la partie suivante s'adresse à tous ceux qui diront que dotnet est génération de code B net Dash, quatre générations. On y va. Contrôleur. Hein ? Maintenant, nous voyons Dotnet et nous savons que c' est le nom de l'outil car nous venons de l'installer. Et nous voulons créer un contrôleur. Ensuite, nous pouvons ajouter des éléments tels que le nom. Je peux donc dire un tiret. Et commençons par le contrôleur des cours. Nous voulons créer un contrôleur pour les opérations de nos cours. Je vais donc voir que le nom du tiret est un escroc, bien sûr, bien sûr. Bien sûr, sa manette, parce que c'est la convention de dénomination. Ensuite, nous pouvons spécifier le modèle. Je peux donc dire tiret m. Et quel modèle utilisons-nous ? Eh bien, le modèle que nous utilisons est bien sûr, d'accord ? Nous voyons donc un tiret m, puis nous voyons la trajectoire. D'accord ? Ensuite, nous devons spécifier le contexte des données ou le contexte des données. Et je ne veux pas tout écrire manuellement, alors je vais juste sauter là-bas, copier le nom et le coller dans la ligne de commande. On y va. Ensuite, nous avons d'autres choses. Cela générera donc ce contrôleur, mais je veux qu' il soit placé dans le dossier spécifique des alertes de contrôle, n'est-ce pas ? Je vais donc juste voir un tiret, un trait d' union, le chemin relatif du dossier est égal à celui des contrôleurs. Eh bien, il n'y a pas de signe égal. Je m'excuse, mais je ne dis pas égal. Ensuite, nous pouvons spécifier les éléments que nous voulons utiliser dans la mise en page par défaut. Et si nous voulons faire référence à des bibliothèques de scripts, la combinaison de tous ces éléments générera le contrôleur portant ce nom en utilisant ce modèle et ce contexte de données. Et cela ouvrira les contrôleurs dans ce dossier. Mais nous voyons ensuite utiliser la mise en page par défaut, ce qui signifie que les vues générées avec un contrôleur adopteront cette option dans laquelle nous voulions simplement utiliser le fichier de mise en page par défaut. Très bien, nous pourrions également avoir d'autres options. Vous verrez donc généralement ces autres options dans l'interface utilisateur lorsque vous utilisez Visual Studio. Nous pouvons donc voir ici des bibliothèques de scripts de référence. Laisse-moi m'en débarrasser. Référencez les bibliothèques de scripts , puis nous pouvons dire « faux ». Très bien, ce sont d'autres options que nous pouvons envisager. Bien entendu, si vous voulez voir toutes vos options, vous pouvez toujours utiliser dotnet, ASP, NET, tiret de cogénération H ou Control H pour voir toutes vos options. Cependant, poursuivons dans cette voie. Je vais appuyer sur Entrée. Oh mon dieu, je m'excuse. J'ai écrit cette commande complètement incorrectement. Cela ne devrait pas être de la cogénération, cela devrait être appelé générateur. Très bien, c'est ce chariot. Permettez-moi donc de faire un CLS abord et de relire la commande à partir de zéro. Donc générateur de code ASP NET. On y va. Appuyez donc sur Entrée et laissez-le fonctionner à nouveau. Très bien, et en quelques secondes, il aurait construit notre projet et généré du code pour nous. Voyons donc ce qu'il a fait. Il a fait la construction, puis il a dit de trouver le contrôleur du générateur et de faire fonctionner le contrôleur du générateur. C'est donc ça. D'accord. Et puis il s'assure qu'il va déterminer les méta-données Entity Framework pour le contexte et le modèle de base de données appelés course. Ensuite, il a ajouté le contrôleur à la barre oblique du contrôleur ce nom de fichier de répertoire. Très bien, puis il a ajouté les vues. Alors regardez, il est ajouté pour les vues, l'indexation, la suppression, les détails, la modification et la création. Ensuite, il nous a dit que le temps d'exécution était de 18 s. Maintenant, si nous examinons la structure de nos fichiers , nous voyons bien sûr un nouveau contrôleur. C'est un peu plus petit. Très bien, nous voyons donc que nous avons une nouvelle manette appelée course. Bien sûr, c'est un contrôleur. Et nous voyons ici qu'il injecte le contexte de base de données. Et je ne vais pas entrer dans les détails maintenant, je vais revenir en arrière et tout expliquer, mais je veux juste que nous jetions un coup d'œil à ce que nous avons obtenu. Nous avons notre page d'index, nous avons des détails sur les mesures à prendre ou autres. Il y a beaucoup d'options de détails. Nous avons notre action de création pour créer des actions réellement. Nous allons donc découvrir pourquoi nous devons le faire. Nous avons le montage. Nous avons en fait deux modifications. Encore une fois, nous avons supprimé et nous avons un autre Supprimer. D'accord ? Ensuite, si nous regardons dans notre dossier de vues, nous verrons que nous avons un nouveau dossier appelé cours. N'oubliez donc pas qu'une fois que vous avez ce contrôleur, vous avez besoin du dossier de vues correspondant. Et si nous l'étendons, nous verrons des fichiers d'affichage correspondant à chacune des actions que nous avons effectuées dans notre manette. Donc, avant de commencer à explorer le code, vérifions s'il fonctionne. Je vais donc faire une course par dotnet. Ensuite, lorsque la page se charge, nous allons simplement naviguer manuellement. Nous allons régler tout cela plus tard, mais je peux simplement dire «  slash ». Et n'oubliez pas qu' il recherchera toujours d' abord l'action de l'indice. Donc, lorsque je fais cela et que j'appuie sur Entrée, notre page de liste est chargée. Nous verrons donc ici tous les cours du système. Nous pouvons également procéder à la création de nouveaux. Donc, si je clique sur Créer un nouveau, j'accède à un formulaire. Permettez-moi d' ajouter un nouveau cours. Examinons le développement open source. D'accord. Le code du cours est CS101, par exemple. Il s'agit d'un cours de trois crédits qui nous permet créer puis d'examiner cela. Tout cela n'est donc pas dynamique. Je n'ai écrit aucun de ce code 12, vous savez que tout ce qui affiché sur une page HTML devait être écrit statiquement est affiché sur une page HTML devait être écrit statiquement ou chargé dynamiquement. Cela vient donc directement de la base de données en ce moment, non ? Si nous allons modifier, nous verrons que l'inflammation nous est achetée. Si je réponds « OK », cela ressemble plus un cours à deux crédits et à un cours à trois crédits. Je peux économiser. Là, il est édité. Je peux en voir les détails. Et c'est essentiellement ce que nous entendons par foule, non ? C'est donc le lire. We Can't Details est en train de le lire. Nous pouvons modifier et supprimer. Donc, si je dis supprimer, supprimer, c'est parti. Nous venons donc de générer fonctionnalité de foule avec une seule commande dans la CLI r.net. notre retour, nous allons décomposer le code et voir exactement ce que nous avons retiré de cet exercice d' échafaudage. 22. Comprendre le contrôleur échafaudé: Bienvenue les gars. Dans cette leçon, nous allons explorer notre contrôleur de cours, et nous voulons simplement prendre notre temps et comprendre ce que fait le code. J'ai donc réduit mon terminal et je vais l' effondrer et le décompresser dans l'Explorateur au fur et à mesure que nous explorerons le code, n'est-ce pas ? Vous pouvez donc continuer et ouvrir le contrôleur de cours. Ensuite, ce que vous verrez fois que nous aurons parcouru l'ensemble de l'utilisation du bloc , de l'espace de noms et du contrôleur de cours public, qu'il hérite de la classe de base du contrôleur, ce qui est assez standard. Nous allons voir que nous avons cette injection de dépendance à la base de données. Maintenant, laissez-moi vous expliquer ce que cela signifie quand je parle d'injection. Habituellement, lorsque vous avez une classe et que vous voulez un objet de la classe, vous voyez quelque chose comme ça et je vais simplement le taper ici. Vous diriez que le nom d'un objet de type de données est égal à une nouvelle instance de ce type de données. Sachez alors que vous avez l'objet, vous pouvez commencer à l'utiliser. Cependant, cela peut poser des problèmes en fonction de sa nature, en particulier pour une connexion à une base de données par exemple. Parce que chaque fois que vous faites du neuf, en couplant étroitement la classe et l'objet, n'est-ce pas ? Donc non, j'ai étroitement couplé My Courses Controller au contexte de la base de données. Si je change, cela doit être dû à de tels contextes. Par exemple, cela me donne une erreur parce que maintenant je dois fournir certains paramètres et comment être responsable de la prévention de ces paramètres chaque fois que j'utilise cet objet, invoquez un objet de ce type. Ce n'est donc pas vraiment durable et maintenable à long terme. Le concept d'injection de dépendance signifie donc que je peux avoir la classe. Je peux modifier cette classe autant de fois que nécessaire, par exemple dans les contextes de base de données. Il peut évoluer, il peut avoir besoin de plus de paramètres ou autre. Mais au fur et à mesure qu'il évolue, je n'ai pas à modifier chaque endroit où je fais référence. Je peux simplement l' injecter dans mon code. Et en arrière-plan, l'application fera tout ce qu'elle doit faire. C'est ce que nous appellerons l'injection de dépendance. Nous avons dû configurer l'injection de dépendances ou configurer le contexte de base de données et le préparer pour l' injection de dépendances lorsque nous avons créé notre contexte de base de données plus tôt. Donc, si nous passons à program.cs, n' oubliez pas que nous avons placé cette ligne ici et qu'elle disait « ajouter des services au conteneur ». Le conteneur ici, le retrait du conteneur IOC ou l' inversion du contrôle, non ? Donc, tout ce concept d' inversion du contrôle et d' injection de dépendance va de pair. Cela signifie que nous configurons l'application pour pouvoir injecter ce que nous appellerons des dépendances où qu'elles se trouvent. Donc, même si nous pouvons modifier la classe réelle ici, lorsqu'elle est injectée en tant que dépendance. Le destinataire reçoit des cours, comme dans ce cas, le contrôle des cours n'a pas à se soucier de l'alimenter avec toutes ses dépendances. Parce que le conteneur IOC s' occupe de tout cela. Très bien, c'est un concept plutôt cool qui conduit à un code beaucoup plus propre, à une maintenabilité beaucoup plus efficace à long terme. Ainsi, ce conteneur IoC est entièrement intégré à asp.net Core . Dans le passé, vous n'aviez pas besoin de bibliothèques tierces. Et certaines personnes ont encore recours à des bibliothèques tierces, mais ce n'est pas absolument nécessaire de nos jours lorsqu'on utilise dotnet Core. Donc, après avoir injecté une dépendance, qui dans ce cas est un contexte RDB, il s'agit d'une dépendance parce que nous avons besoin du contexte de base de données pour communiquer avec données ou le contexte de base ou l'objet de type db context représente dans ce cas la connexion à la base de données. Ainsi, lorsque nous cliquons sur la page des cours et que celle-ci charge l'index, elle se connecte à la base de données, obtient les données et les affiche. Cela nous amène donc à la partie suivante , à savoir l'action. Que se passe-t-il maintenant dans l'action ? Tout d'abord, nous vérifions si le cours est Table, guillemets et guillemets existe réellement dans la base de données, n'est-ce pas ? Donc, une fois que cela existe réellement dans la base de données, nous allons renvoyer la vue avec les données. Ceci est écrit en une seule ligne. Je veux dire que c'est un opérateur ternaire. Donc, s'il s'agit d'une déclaration sur plusieurs lignes, il s'agit vraiment d'une déclaration d'une seule ligne. Cela pourrait donc créer une certaine confusion. Bien entendu, cela a été généré pour nous. Mais à peu près ce que cela fait, c'est voir. Et je vais simplement lire ceci dans un bloc de commentaires et essayer de l' écrire en pseudocode. C'est donc logique. la table de base de données existe, non ? C'est donc ce que fait cette première ligne. Si cela existe, nous voulons renvoyer la vue. Ou en fait, laissez-moi vous voir si vous souhaitez exécuter une requête. Nous disons donc que les enregistrements var dans une table seraient égaux à la requête. Donc, dans ce cas, notre requête est une pondération, des contextes, points, des cours, et cette liste d' outils est un puits. Nous utilisons donc un dialecte en do dièse appelé link, non ? lien ci-dessous indique ce qu'utilise EF Core. Il y a la bibliothèque pour accéder à la base de données, récupérer les enregistrements en fonction de la requête qu' elle peut générer à partir de notre instruction En gros, je la convertit simplement en une instruction SQL qui dit sélectionnez une étoile dans ce tableau. Cependant, nous n'avons pas besoin de l'écrire dans le code car nous avons un lien vers le dialecte pour le traduire pour nous. Donc, en gros, nous voyons que cela me permet d'obtenir les records dans le tableau. J'attendrai une connexion à la base de données, me procurer les tables et tout obtenir sous forme de liste. Maintenant, vous remarquerez que certains mots-clés sont asynchrones. Je vais attendre et assigner une tâche. Lorsque nous faisons de la programmation asynchrone, cela rend les requêtes et les opérations plus efficaces. Et syntaxiquement, nous devons simplement nous assurer inclure ces déclarations au fur et à mesure. Je les expliquerai au fur et à mesure qu'ils apparaîtront. Mais je ne veux pas m' attarder là-dessus pour le moment. C'est bon. Nous obtenons donc les enregistrements de la table et nous savons ensuite que nous les avons. Nous allons vous renvoyer la vue que vous avez déjà vue avec ce nom et l'endroit où il a été affiché avec les données provenant de la base de données. C'est donc à peu près ce que font ces deux lignes. D'accord ? Si la table existe, c'est cette partie. D'accord ? Et puis je n'active aucun opérateur, le point d'interrogation. Et ensuite, ce que nous devons faire, nous disons essentiellement renvoyer la vue avec ces données. Cependant, tout ce que j'ai fait ici, c'est diviser cela en deux lignes, récupérer les données, puis les afficher à nouveau. C'est donc à peu près la même chose, non ? Je pense que ce format pourrait se lire un peu mieux à long terme, mais si vous l'appréciez ici, alors c'est très bien. Ensuite, si cela n'est pas considéré comme vrai, nous allons faire une autre déclaration de retour dans laquelle nous renvoyons ce problème. Vous voyez que quelque chose ne va pas avec la base de données, n'est-ce pas ? Le problème est juste un objet spécial qui nous permet de voir qu' il y a eu une erreur. Chaque fois qu'il y a une erreur, nous pouvons renvoyer le problème et l'application l' affichera en conséquence. Cela signifie donc que l'entité siège dans le contexte de la base de données de gestion de l'école n'a pas été correctement définie. Ce n'est pas qu'il n'existe pas ou, vous savez, quelque chose ne va pas, c'est de ne pas le trouver. est donc ce que contient cette seule ligne. Permettez-moi donc de laisser ceci, ce commentaire. Cela vous aidera peut-être à mieux analyser cette ligne de code. résume donc ce qui se passe lorsque nous avons chargé notre page d'index. Très bien, lorsque nous examinerons les vues, vous verrez comment nous relions les données du backend au front-end. Mais c'est ce que j'entendais par la magie que fait la manette avant de désactiver la vue. Request Gaming est allée dans la base de données, a obtenu nos données, puis nous avons renvoyé la vue, qui était les données. Maintenant, si nous examinons les détails, il y a encore peu de choses qui se passent dans les détails. Lorsque nous essayons de charger les informations, vous verrez qu'il essaie de le faire ou qu'il s'attend à voir une valeur d'identifiant. Voici à quoi ressembleront les racines. Les cours sont marqués d'une barre oblique, d'une barre oblique et de la valeur de l'identifiant. Et cette valeur d'identifiant entre dans une variable de paramètre que nous appelons id, n'est-ce pas ? La première chose que nous faisons est de nous assurer que cet identifiant n'est pas nul. Il indique donc si l'identifiant est nul ou la table de base de données rencontre le même problème que nous avons rencontré ici. Cela n'existe pas, puis nous y retournons. Pas drôle, pas pour eux, c'est la même chose qu'un fluorophore. C'est pourquoi lorsque vous allez sur sites Web et que vous cliquez sur certaines choses, vous pouvez voir un quatre ou quatre parce qu'il ne les trouve pas. Eh bien, en voici un exemple vivant. Si tel est le cas, si aucun de ces éléments n'est obtenu, nous passerons à la section de recherche de cours où nous verrons la base de données. Donne-moi les cours de table, puis donne-moi le premier enregistrement qui correspond à l'identifiant que j'ai fourni. C'est donc ce que nous appellerons une expression lambda. Nous l'avons déjà vu, nous l'avons déjà fait. D'accord, mais pour écrire des requêtes, elles sont utiles lorsque nous voulons spécifier certaines conditions. Nous voyons donc, donnez-moi le premier enregistrement par défaut en étoile où, puis nous commençons à l' expression lambda avec ce jeton, puis cette flèche. Ensuite, nous disons colonne à points de Tolkien que nous souhaitons comparer pour savoir si elle sera égale, égale, inférieure , supérieure , supérieure à égale, etc. Quel que soit le type de comparaison, la valeur que nous souhaitons. Très bien, non, cela signifie d' abord que c'est notre valeur par défaut, car la première signifie qu'elle obtiendra le premier enregistrement correspondant à la condition. Ainsi, même s'il en voit plusieurs, il renverra le premier. Ou par défaut, cela signifie que si vous n'avez rien vu, la valeur est renvoyée nulle. D'accord ? C'est pourquoi, par la suite, il sera indiqué si le cours était nul, alors le retour n'a pas été trouvé. Parce qu'il se peut que je l'aie demandé, bien sûr avec l'ID 50. Quand il n'y a pas de cours avec l'idée de 50. Donc, si après cela il ne pouvait pas le trouver, ce serait nul. Et si l'on sait que nous ne voyons rien trouvé. Une fois tout cela passé, nous allons renvoyer la vue avec les données, avec l'objet, avec le modèle ou un objet différent du type de modèle. C'est donc ce qui se passe dans les moindres détails. Et la façon dont c'est écrit est un peu plus simple que la seule doublure ici. Je n'ai pas besoin d'écrire d'annotations ici. Ensuite, nous allons dans Create et vous verrez que cela crée de la maladresse, là-haut. D'accord, nous avons donc l'opération Create, get, notre F crée un post et l'opération GET est généralement celle que nous utilisons pour récupérer l'inflammation. Donc, ici, il va simplement revenir à affichage car lorsque nous cliquons sur Créer, cela renvoie simplement la vue qui est le formulaire qui nous permet de créer. Toutefois, lorsque nous cliquons sur Soumettre dans le formulaire, il est recommandé de soumettre les données avec une demande de publication. Et c'est pourquoi nous avons créé la publication. Nous avons donc le get created et nous avons le post create. Le post-script reçoit ici une annotation indiquant « publication HTTP ». Il valide également un jeton anti-falsification pour nous assurer que nous ne le faisons pas ou que nous limitons le nombre de soumissions qui arriveront au cas où notre corps serait susceptible de spammer ou quoi que ce soit d'autre. Chaque fois que des données arrivent, tout au plus ont ce jeton, qui n'est connu que par le serveur. Le serveur sait donc comment valider ce jeton qui provient du formulaire. Si nous ne pouvons pas le valider, il rejettera cette tentative. D'accord ? Ensuite, dans la liste des paramètres nous voyons ici que nous faisons une liaison. Le lien ici indique essentiellement que je suis intéressé par les champs portant ces noms qui auraient pu être soumis dans cet objet. Très bien, vous pouvez étendre cette liste. D'accord ? Si Chorus recevait une nouvelle chronique et que nous voulions y répondre, nous pourrions étendre cette liste en conséquence. Et nous ajoutons simplement une virgule, le nom du champ suivant. Nous pourrions également créer un modèle de vue, mais nous n'en parlerons pas pour le moment. Mais vous pouvez lire et dire pour protéger contre les attaques de surpublication, vous pouvez spécifier les propriétés afin savoir plus sur ce qui se passe dans ce paramètre. Mais en gros, nous disons simplement que quelles que soient les données soumises, nous sommes tous intéressés par les données portant ces noms. Quelqu'un a donc essayé d'envoyer plus de données que ce qui était nécessaire pour ce formulaire en particulier, puis ces champs supplémentaires automatiquement rejetés car ils ne répondaient pas à ces conditions de valeur. D'accord. Ensuite, nous passons à la vérification de la validité de l'état des modèles. point d'état du modèle est valide. À peu près. La validation est basée sur nos propres règles de validation que nous pouvons créer ultérieurement. Et les règles de validation que C-sharp déduit en fonction des types de données utilisés. Nous avons donc ici une chaîne. La chaîne n'est pas annulable. Donc, cela dirait essentiellement que « Hé, je m'attends à une valeur ici, mais dans celle-ci, elle est nulle ». Donc, si je reçois un objet de type, bien sûr, et celui-ci s'avère nul pour une raison quelconque. Et vous verrez ici qu' il y a un peu comme un vieux poulet ou une réserve pour s'assurer qu'il a toujours de la valeur. Mais voyons voir. Il est arrivé avec une valeur nulle, puis cette validation indiquerait automatiquement qu'elle n'est pas valide car je m'attends à une chaîne et je reçois une valeur nulle, elle n'est pas valide. Que se passe-t-il s'il n'est pas valide ? Il va ignorer cela car cela est évalué comme faux. Et cela va simplement renvoyer la vue avec l'objet qui a été soumis. D'accord. C'est pourquoi, lorsque vous soumettez un formulaire et qu'il contient une erreur, oui. En fait, il recharge le formulaire avec les données que vous venez de soumettre. C'est donc tout ce qui se passe ici. Cependant, s'il est valide, alors nous allons de l'avant et disons base de données, nous ajoutons cet enregistrement. Je sais que vous voulez sauvegarder la chaîne, donc c'est ce qui la valide réellement dans la base de données. Ensuite, nous redirigeons vers l'action avec l'index des noms. Alors, lisez Derek, la vente aux enchères est la raison pour laquelle elle reviendra à la page de l'annonce, puis vous montrera un enregistrement récemment créé qui connaît la base de données. C'est donc tout ce qui se passe. Au lieu des Créations. Si nous allons voir l'éditeur, verrons que c'est en quelque sorte très similaire à la page de très similaire à détails parce qu'elle reçoit un identifiant. La valeur vérifie que c'est un identifiant valide valeur. Il part pour trouver le cours, même si cette requête est écrite un peu différemment, mais elle fait la même chose. Trouvez le cours par identifiant. Et ensuite, s'il est nul, nous le montrons. Si ce n'est pas nul, nous avons affiché la page La page d'édition aura en fait un formulaire similaire à la page Créer, mais cette fois, elle reçoit réellement les données. C'est pourquoi, lorsque nous cliquons sur Modifier, nous voyons les données sous la même forme qu'un décret, mais nous obtenons les données. Ensuite, lorsque nous soumettons, vous remarquez qu'il s'y oppose également. Il effectue la même validation du jeton anti-contrefaçon. Nous prenons et validons l'identifiant filtrons les champs qui arrivent. Très bien, même concept que le post que nous venons de consulter pour le Create. Ensuite, nous procédons à quelques validations supplémentaires où nous disons, d'accord, assurez-vous que l'identifiant qui apparaît ici dans le lien correspond à l'identifiant provenant du formulaire. Sinon, renvoyez une erreur. Ensuite, nous disons que si l'état du modèle est valide, nous essaierons de mettre à jour l' enregistrement et d'enregistrer les modifications. Maintenant, dans certains cas, j'ai peut-être pris le compte rendu pour le mettre à jour et vous avez peut-être fait de même. Ensuite, nous avons essayé de le soumettre, ou au moment où vous soumettez, je l'ai déjà soumis. Vous modifiez donc une ancienne version. Cela provoquera donc ce que nous appellerons une exception de concurrence de base de données. D'accord ? Et si cela se produit, il est indiqué si le cours existe ou si, bien sûr, il n'existe pas, puis ne répondez pas au téléphone. Sinon, supprimez simplement l'exception car nous ne savons pas trop comment la gérer, n'est-ce pas ? Mais ce serait rare, mais cela arrive. C'est donc une bonne chose de mettre en place cette éventualité. Ensuite, après tout cela, nous lisons Erich sur la page d'index, comme pour la création. À la fin de cette période, nous renvoyons également la vue avec les données si elles n'étaient pas valides. Très bien, vous allez donc commencer à voir que le code est très similaire parce que c'est du code de cette façon. C'est ce que l'on appelle la réaffectation des détails et tout ce qui se passe ici est similaire à ce qui se passe avec une création. Très bien, alors nous passons à la suppression. Nous transmettons donc un identifiant pour la suppression. Il va faire la même chose que détails et la modification viennent où il vérifie l'identifiant, trouve le cours, en vérifiant s'il est nul, s'il n'est pas tout, nous allons obtenir une page qui nous montre les détails du cours. Ensuite, il y a eu un bouton de suppression. Si vous vous souvenez de notre test, sachez simplement que lorsque nous cliquons dessus, un message sera envoyé. Nous le savons déjà, non ? Et cette fois, il s'agit simplement de dire qu'il utilise un nom d'action différent, non ? La méthode est donc différente, mais si nous voulons qu'elle accède à un nom en particulier, nous pouvons spécifier cette annotation et dire que vous vous identifiez comme étant supprimée, même si vous êtes appelée suppression confirmée. Très bien, nous validons toujours le jeton anti-contrefaçon. Alors cette fois où nous vérifions si la base de données existe, c'est très bien. Nous allons suivre le cours sur présentation d'une pièce d'identité. Ensuite, si nous pouvions trouver le cours, nous avons essayé de le supprimer de la base de données. Une fois supprimé, nous enregistrons les modifications. Et puis encore une fois, nous lisons Erich pour indexer. C'est pourquoi, chaque fois que nous terminons une opération, celle-ci revient toujours à la page de liste car chaque opération, si celle-ci revient toujours à la page de liste car chaque opération, réussie, nous indiquerons redirection vers la page d'index. La dernière méthode à l'intérieur de ce contrôleur vérifie simplement si le cours existe. Et cela n'a vraiment été utilisé que dans la section d'édition, non ? Où nous voyons s'il n' existe pas , alors grâce à Introuvable. C'est donc juste une autre façon de voir s' il existe dans la base de données la méthode any. Donc, les contextes sont un tableau à points, un point quelconque. Ensuite, nous pouvons dire quel est l'état que nous vérifions ? Existe-t-il donc un enregistrement qui répond à cette condition, qui, dans ce cas, indique où l'identifiant correspond à la valeur de l'identifiant que nous transmettons. Et puis nous obtenons soit la valeur qui serait vraie par défaut, qui serait nulle. C'est à peu près ce qui se passe dans notre manette. Maintenant, c'était une visite rapide et sale. Nous n'allons pas le modifier. Nous allons laisser le code standard. Et plus tard, nous commencerons à écrire notre propre logique personnalisée. Mais pour l'instant, il est bon de comprendre le code standard et de savoir ce qu'il fait. À notre retour, nous examinerons les points de vue correspondants pour chacune de ces actions et apprécierons la manière dont se déroule la liaison. 23. Comprendre les vues échafaudées: Très bien les gars, alors progressons et commençons à examiner notre point de vue. Je vais donc fermer toutes les baignoires qui ne sont pas absolument nécessaires à cette activité. Ensuite, regardons dans le dossier des vues, puis cherchons le dossier du cours. Et puis commençons par l'index. Je vais donc le faire dans l' ordre dans lequel nous visiterons probablement les pages. Et bien entendu, la vue de l'index est la première qui apparaît , car l'action d'index est la première action appelée. Et si vous vous en souvenez, l'action d'indexation consiste en fait à interroger la base de données, puis à renvoyer ces données à la vue. Ainsi, lorsqu'il renvoie ces données à notre index de vue, c'est là que se produit toute la liaison. Passons donc à la première ligne. La première ligne indique le modèle. D'accord ? Donc, le modèle Sine n'est qu'un mot clé que vous verrez en haut des vues relatives aux liaisons de données, n'est-ce pas ? Ensuite, le type de données est spécifié. Cela signifie donc que le type de données selon lequel cette vue est outil tronqué est un nombre infini, ce qui est un type de collection, ce qui est logique puisque nous passons revue une liste d'objets. C'est donc notre collection, non ? Bien sûr, des objets. C'est donc ce à quoi elle s'attend. Maintenant qu'il sait qu'il doit se lier à ce modèle, nous pouvons désormais accéder aux différentes parties. Nous avons la section des données d' affichage standard. Nous l'avons déjà vu. Nous avons ici une balise H1 qui indique index. Nous avons une balise p hébergeant une balise d'ancrage qui nous permet de naviguer vers l'action de création, n'est-ce pas ? Remarquez donc ici qu' il ne s'agit que d'une action. heure, lorsque nous regardions la petite page que vous verrez dans ASP Controller, cela équivaut à et vous auriez vu de l'action et du contrôleur chez vos pairs. Toutefois, si nous ne précisons pas le contrôleur, cela suppose automatiquement qu'il recherche l'enchère dans le même contrôleur que celui d'où provient la vue actuelle. L'indice de vue actuel provient donc du contrôleur du cours. Il supposera donc qu' il devrait accéder à l' action de création dans le même contrôleur. Très bien, ensuite nous allons voir une table. Rappelez-vous donc que nous avons vu la liste des records. Et puis dans ce tableau, nous avons quelques méthodes d'assistance. Et celui-ci est appelé nom d'affichage pour. Très bien, il s'agit donc d'une méthode d'extension HTML qui examinera essentiellement le nom de la propriété dans la classe modèle, n'est-ce pas ? Vous remarquez donc qu'il utilise une expression lambda. Et il semblait modéliser ce genou, code point modèle, crédits point modèle. Et elle les connaît grâce au modèle qui a été spécifié. Donc, si je change ce type de modèle juste pour être provocateur pendant un moment, si je le change en étudiant, remarque que cela commence à s'allumer car aucune de ces propriétés n'appartient à ce type de données de modèle. Il est donc très, très sensible, très fortement typé et très sensible au type de données qu'ils utilisent ici par rapport aux propriétés auxquelles vous accédez. Je reviens. Vous verrez que les lumières s'éteignent. Ce que nous faisons ici, c'est spécifier pour le tableau. L'en-tête. La première ligne doit comporter des colonnes d'en-tête de tableau indiquant un nom et des crédits. Ensuite, nous avons un th vide, et nous verrons pourquoi celui-ci est vide. Ensuite, nous descendrons vers le corps. C'est donc la tête. Nulle part dans le corps de la table. Pour le corps, nous utilisons une boucle foreach. Et n'oubliez pas que chaque fois que nous voulons utiliser C-Sharp dans le code HTML, nous avons juste besoin d'un signe arobase pour pouvoir écrire notre code C-Sharp. Nous voyons donc ici pour chaque article du modèle. Donc, modélisez ici l'objet réel qui prend le type de données spécifié ici. Remarquez la différence, celui-ci est au modèle sinusoïdal. Il s'agit du modèle M majuscule. D'accord ? Donc, je veux dire, donnez-moi chaque article de ce modèle ou de cet objet qui est du type collection, bien sûr des objets. Nous connaissons maintenant cette boucle. C'est donc la meilleure façon de parcourir les collections, non ? Parcourez donc la collection et, pour chacune d'entre elles que vous trouvez, créez une nouvelle ligne TR ou une nouvelle ligne de tableau, et créez une colonne qui affiche le nom, une colonne qui affiche le code ou une colonne qui affiche les crédits. En réalité, je pourrais simplement dire « à Sign Item Point Credits », n'est-ce pas ? Je n'ai donc vraiment pas besoin de dire affichage, car ces méthodes d' assistance nous aident réellement , c'est la façon dont s'affiche, parce que parfois vous voulez un affichage spécial, comme une case à cocher. S'il s'agit d'un booléen, cela générera une case à cocher. Si nous le saisissons manuellement, le mot vrai s'affichera, non ? C'est pourquoi nous voudrions parfois l'utiliser. Lorsque nous voulions réellement afficher dynamiquement un contrôle adapté au type de données de la propriété. Je ne fais que vous montrer les options, non ? Donc, pour ces chaînes et ces valeurs numériques, nous n'avons probablement pas besoin de considérations particulières. En fait, nous pourrions simplement dire, je dirais modèle à points de l'article manuellement. Mais pour le booléen et d'autres, vous voudrez probablement leur permettre de le générer pour vous. Ensuite, nous avons le td qui correspond au MTT H, et celui-ci contient les actions. Nous avons donc un bouton d'option pour modifier un bouton d' action pour plus de détails sur un bouton d'action à supprimer. Je remarque qu'ils écriront tous aux actions appropriées. D'accord, mais ils transmettent également, c' est-à-dire la valeur de l'identifiant du tiret P, qui est l'identifiant du point de l'élément. Alors, quelle est la pertinence de cela ? N'oubliez pas que dans le contrôleur pour, examinons la méthode d'édition. Si nous examinons la méthode d'édition, l'EDI obtient, il attend cet identifiant. Cela signifie donc que le lien qui va appeler cette méthode d'édition doit transmettre cet identifiant. C'est pourquoi nous devons dire SP Dutch Root Dash ID. Parce qu'une fois de plus, c'est une pièce d'identité. S'ils disaient chiot, il faudrait voir ASP Dash, Dash Puppy. C'est exactement comme ça que ça fonctionne. La liaison se fera donc automatiquement. Ensuite, la valeur que nous transmettons est la valeur d'identification de l'élément cours de traitement dans ce rôle particulier. D'accord ? Et il en va de même pour les détails et la suppression. Et c'est tout pour la page d'index. Examinons maintenant la page de création, car elle est vide. Nous voulons donc créer un record. C'est probablement la première chose que nous voulons faire. Nous avons maintenant un formulaire. Et c'est un concept très similaire où non, il s'agit de créer un modèle, mais notez que nous spécifions notre modèle en haut. Mais dans le contrôleur, nous ne lui avons donné aucune donnée, n'est-ce pas ? Tout ce que nous avons fait, c'est renvoyer la vue sans aucune donnée. Alors pourquoi spécifions-nous un modèle sur cette page ? Eh bien, comme il s'agit d'un forum où spécifier le type d' objets que nous voulons former pour remplir, je spécifie un modèle ici, nous pouvons l'utiliser pour donner le ton ou définir le contexte pour le reste du formulaire. Nous commençons donc par sauter les parties standard compréhensibles et en accédant directement à l'onglet forum. Le formulaire ici va renvoyer ASB action equal create, equal grades. Cela signifie donc qu'une fois le formulaire soumis, il essaiera de passer à la création et, par défaut, il publiera, n'est-ce pas ? Bien sûr, vous verrez généralement quelque chose comme « méthode égale publication ». D'accord ? Mais c'est implicite. Nous n'avons donc pas besoin de le dire. Et il sait que lorsqu'il soumis, il sera envoyé au Create. Et nous avons déjà vu que nous devions créer le get, puis nous avons le post. D'accord ? Donc, une fois que nous l'avons fait, après avoir déclaré un formulaire, il y a une section ici qui dit, nous devons afficher le résumé, le résumé de validation qui s' avère utile lorsque c'est faux, si la validation échoue et que nous renvoyons la vue avec les données, cette section affichera en fait quels champs manquaient, quelles données, n'est-ce pas ? C'est donc pratique. Examinons une partie des commandes. Il s'agit donc d'un formulaire bootstrap standard. Si vous souhaitez en savoir plus sur les formulaires Bootstrap, vous pouvez toujours consulter la documentation et comment ils vous recommandent de présenter vos formulaires. Donc, les éléments clés ici, nous avons l'étiquette et remarquons que c'est le nom ASP. Quel est son nom ? Le nom vient du modèle. Il s'agit donc de l'ASP ou de l'étiquette la propriété name du modèle qui a été spécifié, ce qui correspond à une similitude de cours pour les entrées, nous avons l'ASP pour Nim, ce qui signifie que, quelle que soit la valeur que vous entrez ici, il sera automatiquement lié à la propriété name de l'objet. Bien entendu, lorsque nous soumettons , cette propriété nominative apparaît ici et nous pouvons y accéder via nos objets. C'est donc tout fluide, non ? Je pense que c'est à peu près le cas pour toutes les autres propriétés. Nous avons le bone d'entrée pour coder, nous avons le bone d'entrée, deux crédits. D'accord. Maintenant, cela générera également le meilleur type de contrôle, contrôle HTML pour le type de données. Notez donc que nous ne précisons pas le type d'entrée ou quoi que ce soit de ce genre. Nous ne voyons que des informations et un ESP pour le terrain. Très bien, donc si nous avons un booléen, il générera automatiquement une case à cocher. C'est à quel point ces aides HTML sont puissants ces aides HTML sont lorsque nous traitons des pages Ariza. D'accord ? Ensuite, nous avons notre bouton d'envoi. Une fois que vous avez cliqué dessus, une fois de plus, une soumission sera lancée ou ASP créera réellement. Et nous savons ce qui se passera ensuite. Donc, une fois que c'est fait, si c'est valide et tout, nous rechargeons la page d'index. Maintenant, alors que je suis sur la page suivante, j'ai cliqué sur les détails. Voyons donc la page de détails. N'oubliez donc pas que c'est dans la manette. Les détails demanderont une pièce d'identité. D'accord. Il va aller chercher l'enregistrement, puis renvoyer la vue avec ces données. Ou la page de détails doit en connaître un, quel est le type de données attendu. Ensuite, il effectuera le même type d'affichage, nom et d'affichage pour chacune des propriétés. C'est pourquoi, sur la page de détails, vous verrez le nom du mot, puis la valeur que ce nom contenait le mot cordon, puis la valeur qui a été mise dans le noyau, les crédits du mot et la valeur cela a été crédité. est donc tout ce que Detail fait. Ensuite, à la fin de cela, nous pouvons choisir d'accéder à la page d'édition où il spécifiera à nouveau la valeur de l'identifiant de l'itinéraire et transmettra l'identifiant point du modèle. Ou nous pouvons revenir à l'indice et aux doses extérieures revenir à la liste. Maintenant, si nous choisissons l'édition, à quoi nous heurte-t-on ? avons rencontré un formulaire qui est en fait identique à notre formulaire de création, n'est-ce pas ? C'est vraiment la même forme, il y a juste quelques différences. Le modèle sera donc le même. Encore une fois, contrôleur. Quand nous avons essayé de le modifier, je vais le trouver rapidement. Lorsque nous avons essayé de le modifier, il allait récupérer l'enregistrement, puis renvoyer la vue avec cet enregistrement. C'est pourquoi, lorsque la page d'édition se charge, nous avons des données dans le formulaire. Vous remarquerez également que nous avons saisi l'identifiant haut du formulaire et qu'il s'agit d'un identifiant masqué. Pourquoi ça ? Eh bien, nous devons connaître l'identifiant lorsque le formulaire est soumis, car il y a des vérifications dans la publication qui permettent de s'assurer que l'identifiant envoyé ou l' identifiant qui entre, le paramètre ici correspond au Si cela a été soumis sur le formulaire, n'est-ce pas ? Voici donc la reliure entre l' identifiant et bien sûr cet identifiant. accord, donc ça correspond. manière générale, vous avez besoin l'identifiant pour effectuer une mise à jour. Parce que lorsque l' Entity Framework réellement toutes les mises à jour, cet objet doit avoir une valeur d'identifiant afin qu'il sache qu'il est censé effectuer une mise à jour et non une insertion. Très bien, pour un insert, nous n'avons vraiment pas besoin de l'identifiant. Vous pouvez donc supprimer cette reliure en toute sécurité, pouvez donc supprimer cette reliure en toute sécurité car nous ne devrions pas autoriser quelqu'un à envoyer une pièce d'identité alors qu'il est créer un enregistrement. Je pourrais donc le supprimer. accord, cependant, pour les modifications, c'est absolument nécessaire car la base de données doit connaître cet identifiant afin de pouvoir répondre à cette mise à jour lorsque nous recevrons la modification. Très bien, à l'intérieur de cela, tout le reste est à peu près le même que ce que nous avons vu avec la création. Donc, bien sûr, l' action est différente car elle sera publiée dans Edit Post. Et en raison de la liaison et du fait que les données ont été envoyées, les balises d'entrée contiendront automatiquement les données correspondant à l' objet envoyé lors de l'opération d'obtention. D'accord ? Mais en dehors de cela, c'est à peu près la même forme que celle que nous avons vue pour le Create. Ensuite, nous passons à la suppression. Maintenant, les pages de suppression sont assez simples. Nous savons déjà ce que c'est. Il va juste essayer de trouver l' enregistrement, comme cela s'est passé avec les modifications et les détails. Ensuite, il reviendra à la vue avec le disque. Non. Eh bien, nous sommes en train de supprimer des pages qui demandent : Êtes-vous sûr ? Et puis il s'agit simplement de montrer les détails de l'enregistrement que nous sommes en mesure de supprimer. C'est donc presque identique au discours détaillé. Cependant, il y a un minuscule formé ici qui nous permet de lier l'identifiant de l'enregistrement qui est sur le point d'être supprimé. Ensuite, nous pouvons cliquer sur Supprimer pour soumettre le formulaire, ou nous pouvons incliner la ceinture vers le haut et revenir à la liste. Donc, si nous choisissons de soumettre ce qui se passe, cette Heidi Valley passe la charge utile des données à notre méthode de suppression de publication. Ainsi, lorsque nous passons à la méthode de suppression de la publication, elle reçoit cet identifiant. Ensuite, il effectue cette opération de suppression comme prévu, puis il retourne à l'index. Et c'est à peu près tout ce que nous pensons. Et nous l'avons vu, nous avons fait des tests complets. Nous voyons que tout est branché, que tout fonctionne, toutes les navigations fonctionnent entre les pages et c'est très important. Cependant, nous avons besoin de l'outil de navigation, au moins de la page d'index. Quelqu'un est accro à la mise en page et nous l'avons déjà fait. Donc je vais juste le refaire. Nous avions introduit la page « À propos ». Je vais juste copier tout ce collage. Et puis cette fois, l'ASP sera contrôlé par des chevaux. L'action ASB est un indice. Ensuite, les textes que nous allons voir ici seraient des cours. Très bien, nous avons maintenant un nouvel élément qui, une fois cliqué, sera redirigé vers l'action d'indexation de notre page de cours. Très bien, vous pouvez donc apporter cette modification. Allez-y, appuyez sur Dotnet Run et juste les pensées et laissez-moi voir. Pour un aldol, nous avons vérifié que tout fonctionne et nous voyons comment tout est branché. À notre retour, nous allons donc recommencer les activités d' échafaudage pour nos autres modèles de notre base de données. 24. Vues et contrôleurs d'échafaudage - Partie 2: Très bien, les gars, sachez que nous voyons quel point il est facile de générer des fonctionnalités crud pour soutenir nos tables de base de données. Allons-y et faisons-le pour les autres, non ? Nous avons donc déjà suivi le cours. Faisons de même. Je vais juste faire Control Shift et apostrophe pour lancer le terminal. Je vais me débarrasser de certaines choses à l'écran pour avoir plus de biens immobiliers. Ensuite, nous allons répéter la commande que nous avons exécutée précédemment, contrôleur du générateur de code de tiret dotnet ASP NET. Nous pouvons simplement apporter des modifications ici car nous voulons le même type de paramètres. La seule différence, c'est qu'aujourd'hui nous n'avons pas affaire à des cours. Nous avons affaire, disons, à des conférenciers. Et puis le modèle ici serait conférencier. Et nous avons le CMD, ce sont tous des contextes qui s'effondrent de la même manière relative. Tout le reste est à peu près pareil. Donc, si je fais cela, appuyez sur Entrée puis donnez-lui quelques secondes, nous verrons qu'il a bien fonctionné, n'est-ce pas ? Maintenant, nous nous disputons avec les contrôleurs et les points de vue de notre table de cours. Et je vais le faire encore une fois. Ensuite, vous pourrez le faire pour nos étudiants. Les étudiants contrôlent donc et les étudiants sont le modèle. Appuyez sur Entrée. Et on y va. Maintenant, nous pouvons revenir en arrière et voir que nous avons des contrôleurs et des vues supplémentaires. va de même, bien sûr, pour les conférences des étudiants. Et dans notre dossier réservé aux points de vue, nous avons des cours, des conférences complètes sur le Web, nous les avons partagées et nous demandons à des étudiants d'écrire. Le code est à peu près le même. Donc, la seule différence majeure que vous pouvez vous attendre à voir ici est qu'au lieu de voir un nom de table, vous allez voir un autre nom de table, n'est-ce pas ? Vous allez voir la même injection de contexte de base de données, le même type de code standard, sauf qu'il recherche des cours plutôt que des étudiants, des cours plutôt que des professeurs, etc. Donc tout est relatif au contrôleur actuel et au modèle qui a été utilisé. Maintenant, si je veux accéder à chacun d'entre eux, faites de même et assurez-vous de le mettre dedans pour avoir la navigation du cours. Je vais juste le dupliquer deux fois. Et je vais mettre en place un système de navigation pour les professeurs. Celui-ci devrait donc aller à l'index de l'action du contrôleur du conférencier. Et ensuite, ici, nous le ferons pour les étudiants. Et c'est tout. Faisons fonctionner dotnet et testons notre application. Très bien, lorsque notre application sera lancée, nous verrons que nous avons toutes les propriétés de navigation. Donc, si je clique sur des cours, signifie que nous les avons déjà validés. Nous pouvons créer un nouveau cours, spécifier un nom. Donc introduction au développement Web. Nous pouvons lui donner le code CS101, ce qui représente un cours de trois crédits. Ensuite, nous créons, puis nous avons notre premier cours dans le système, ou du moins à ce stade, le deuxième cours du système, n'est-ce pas ? Lorsque vous cliquez sur ces boutons de navigation, vous pouvez également prendre note de l'URL générée ou Ajouter des cours, modifier barre oblique deux, c'est notre identifiant. Et puis nous savons ce qui se passe dans les coulisses, pourquoi nous voyons les données sur chacune de ces pages. Si j'essayais d'aller dans les détails pour un record de 20, alors c'est là que nous obtenons ce chiffre pour centaine d'erreurs. D'accord ? C'est donc la norme, le comportement standard prêt à l'emploi. D'accord ? Nous avons donc confirmé que le cours était déjà bondé. Validons le nombre de participants afin que je puisse créer la première conférence du système. Et il s'appelle Troy pour Williams. Remarquez maintenant que nos étiquettes ici ressemblent littéralement aux étiquettes qui se trouvent dans la classe, juste à côté du nom des propriétés de la classe. Plus tard, nous voudrons l'embellir un peu. Vous ne voulez pas nécessairement le boîtier camel ou boîtier Pascal ici au niveau de l'écran. Mais pour non, c'est valider que cela fonctionne. n'avons donc pas travaillé. Et bien sûr, je suis sûr que vous pouvez le tester. Soigné et détails. Mais passons maintenant aux étudiants. Et les étudiants et le système seraient, disons, Tyrone Cooper. Et puis remarquez la date de naissance, où un sélecteur de date sait automatiquement que j'ai vu que la balise de saisie déduira le meilleur type de contrôle en fonction du type de données. Donc, si je passe à la page de création pour l'étudiant, vous verrez que cela ne signifie pas qu' il doit s' agir d'un type de date. Il ne voit que les entrées pour ce champ. Non. ASP.Net Core, lorsqu'il va afficher la page, sait qu'il s'agit d'un champ de date. Il génère donc automatiquement la balise d'entrée avec le type de date, dateheure locale. C'est donc ce qui se passe dans les coulisses. D'accord ? Maintenant, si je ne fournis pas la valeur nécessaire, vous remarquerez que la validation me saute aux yeux presque immédiatement. Si j'essaie de cliquer sur Créer, je ne pourrai aller nulle part tant que je n'aurai pas fourni de valeur, n'est-ce pas ? Je peux donc simplement dire Cooper encore une fois. Et puis, lorsque j'ai créé, la date de naissance était facultative. Je peux donc créer des étudiants sans cette valeur particulière. Si j'essaie à nouveau, puis que j' essaie de cliquer sur Créer, validation s'allume et m'indique que ces champs sont obligatoires. C'est donc une sorte de validation complète intégrée. Nous pouvons étendre cela, mais pour l'instant, je pense que c'est suffisant pour protéger l' intégrité de nos données. Et il nous suffit de commencer à faire la démonstration de ce logiciel. Nous pouvons maintenant nous rendre dans l' école pour laquelle nous avons créé le logiciel et lui dire : « Hé, vous savez, c'est une preuve de concept, dites-moi si cela répond à vos besoins. Donc, à notre retour, nous allons étendre un peu plus notre application. 25. Ajouter à GitHub: C'est bon. Donc, avant d'aller de l'avant, nous allons procéder à un enregistrement ou à un engagement. C'est donc toujours une bonne pratique de vous engager lorsque vous atteignez une étape importante. Je vais donc simplement passer à la section de gestion du contrôle de source et je parlerai base de données ajoutée, de vues et de contrôleurs échafaudés. C'est le message du poulet. Nous pouvons donc continuer et vous voyez que j'ai trop d'informations et que j'ai trop d'informations ajouté une base de données, des vues et des contrôleurs. La base de données est donc sur des contrôleurs. On y va. Ensuite, nous pouvons nous engager et pousser. Très bien, nous pouvons maintenant passer à l' embellissement ou à l'application. 26. Personnaliser les vues et les éléments - Aperçu: Dans cette leçon, nous allons nous concentrer sur l'amélioration un peu de notre application. Et quand je dis « embellir », si nous passons à certaines de nos pages d'échafaudage, nous verrons que, oui, cela utilise un peu le bootstrap, mais qu'il peut y avoir place à l'amélioration ou au bouton Créer ou bouton d'édition. Ces boutons, les boutons axonaux, sont simplement standard. Donc, ce que nous voudrions faire, c'est probablement les embellir un peu, corriger une partie de la mise en forme, mettre de l'espace entre ces sections. Et même pour la table ici, il s'agit d'une table Bootstrap standard, mais nous pouvons probablement l' embellir. Donc, pour toute cette section, nous allons nous concentrer sur l'ajout de certains éléments de design. Dans la prochaine leçon, nous allons donc ajouter du style Bootstrap aux pages et les formater un peu afin d'avoir un semblant d' utilisateur plus cohérent interface. 27. Ajouter un motif de boostrap: Très bien, commençons par certains de nos boutons sur la page du cours Je vais modifier l'apparence de ces liens. Ce qui est cool avec Bootstrap, c'est que je peux facilement transformer une balise d'ancrage normale en bouton. Si je saute par-dessus, laisse-moi fermer tout ce qui est nécessaire et je m' occuperai des cours. Créez de la neige. Commençons par l'index. Désolée. Très bien, c'est sur la page d'index. Qu'est-ce que nous avons ? Nous avons la balise H1 qui indique index. Index, d'accord ? Bien entendu, je suis en train de changer le mot index des cours parce que le mot index signifie beaucoup moins pour quelqu'un que de lui faire savoir qu'il consulte la page contenant les cours. Ce sont donc de petites choses. Mais j'ai parlé d'embellissement. Ensuite, pour la balise d'ancrage qui nous permet de naviguer vers le Create, je peux ajouter des classes Bootstrap. Si vous voulez savoir si la classe existe à nouveau, vous pouvez toujours consulter la documentation Bootstrap et ils pourront consulter les boutons. Mais je connais certains d'entre eux par cœur car ils sont si cohérents et si faciles à utiliser. Donc d'abord, je peux voir BTN. Btn, nous allons le transformer pour que le lien ait l'air disparu, non ? Ensuite, je peux spécifier quel type de BT et je souhaite la maison. Donc, pour nos créations, je voudrais peut-être quelque chose comme boutons verts pour pouvoir dire BTN, Dash Success. Et si vous vous souvenez de la palette de couleurs, succès nous donnera un bouton vert. D'accord ? Et puis je pourrai même le personnaliser un peu. Mettez-y un signe plus, entreprend ce que c'est. C'est à vous de décider pour la partie texte, mais je vous montre simplement à quel point il est facile de transformer lien irrégulier en un bel élément visuel ressemblant à un bouton. Et cela fonctionne toujours parce que si je clique dessus, nous irons toujours sur cette page. Faisons donc la même chose pour les détails et supprimons. Maintenant, ce qui est cool, c' est que nous pouvons le faire une fois parce qu'ils répètent toujours en fonction de cela, pour la bonne raison. Je n'ai donc pas à le faire pour chaque disque, je fais juste une boucle une fois. Donc ici, plus est égal à btn. C'est Edit vendu, cela devrait probablement donner une plage en néerlandais. Je vais simplement les écrire pour que vous puissiez les regarder une fois par la suite. Donc, avertissement BTN Dash, celui-ci, je vais lui donner un principal BTN. Laisse-moi faire un petit zoom arrière. Et puis pour le supprimer, je vais donner à celui-ci un BT et un danger. D'accord, maintenant qu'est-ce que cela signifie ? Chacune d'elles représente une couleur dans la palette de Bootstrap. Vous ne pouvez donc pas regarder les couleurs une fois de plus, mais ce sera toujours, désolée, un avertissement sera toujours une sorte de primaire REM slash Amber, mais pour nous donner cette teinte de bleu et delete va nous donner ce rouge. D'accord ? Ensuite, je pourrai mettre toutes ces pipes entre ces barreaux. Ces barres, je peux les retirer. Et oui, ça a l'air bien mieux. Très bien, donc non, chaque cours créé. Donc, si je vais ici et que je dis « donnez-moi un nouveau cours », revenons au développement open source. Le code est CS1 ou deux, et les crédits seront deux crédits. Et puis je clique sur Créer, puis vous voyez qu'ils ont cette cohérence. Avec l'apparence de tous les boutons, plus il y a de boutons, plus cette interface utilisateur devient colorée et attrayante , n'est-ce pas ? C'est tout pour la page d'index, du moins pour l'instant, non ? Vous pouvez effectuer vos propres personnalisations car vous pensez que vous pouvez même utiliser couleurs différentes de celles que j'utilise ici. Cela dépend entièrement de vous et de votre vision des chromosomes de votre application. Passons à la plage de Create. À partir de la création, il crée et bien sûr, et puis nous avons les zones de texte, non ? Sautons donc par-dessus pour créer. Et ce que je vais faire dans un premier temps, c'est fusionner ces outils. Alors créez un cours et débarrassez-vous de cet âge pour Todd, quittez les ressources humaines. Et puis pour les entrées, je vais mettre un petit BR entre ces rouges. Je ne les veux pas si proches l'un de l'autre. Donc, dans le formulaire, je place simplement ce pont entre chaque div du groupe de formulaires. C'est ce groupe de formulaires div, puis BR, puis de nouveau ce div de groupe de formulaires, BR, etc. Maintenant, après cela, le formulaire semble un peu plus espace. Nous avons une ligne en haut qui est évidente. Créez un cours, non ? Ensuite, pour les boutons, je vais faire en sorte qu'il ne s'agisse pas d'un groupe de formulaires. C'est le bouton Créer. J'utilise facilement BTN Primary. Et puis Back to List est une balise d'ancrage en elle-même. Je vais donc simplement prendre cette balise d'ancrage, placer dans le même groupe de formulaires, puis je pourrai lui donner une classe. Et appelons-le BTN, BTN Dash, Dark. Très bien, alors maintenant, quand j'y repense, regarde ça. Donc non, je peux créer un cours, remplir le formulaire, d'accord, puis je peux soit créer, soit retourner à la liste. Cela me semble donc un peu plus clair pour ce formulaire. D'accord, et si je clique pour revenir à la liste, cela revient simplement au formulaire d'édition est très similaire au formulaire de création, n'est-ce pas ? Je pense donc que nous pouvons apporter le même type de modification ici. Je vais donc simplement copier cette modification de la balise d'ancrage, passer à Modifier. Je vais supprimer celui-ci car ils vont de toute façon accéder au même espace, à la même URL. Donc, le même ancre. Pour en revenir à la liste, je vais lancer un je vais lancer avertissement BTN et je vais dire Enregistrer les modifications. C'est donc le texte du bouton que je souhaite voir apparaître sur le formulaire d'édition. Et je veux que tu saches que lorsque tu es prête à le faire, plus c' est court, c'est ce que tu veux faire. Je lance donc cet avertissement et nous avons même bouton noir qui renvoie à LR. Et puis pour le formulaire lui-même, je dois le modifier ici. Cela va donc dire Modifier le cours en une seule ligne. Et nous pouvons ajouter des balises de rupture. C'est ce qui se passe lorsque vous manquez un clic. Ajoutons donc des balises BR entre les sections de nos groupes de formulaires. Bien, maintenant, après avoir fait tout cela, nous y voilà. Modifier le cours, nommé ainsi, celui-ci de plus avant la section des boutons. OK, on y va. D'accord. Vous savez maintenant que si vous enregistrez les modifications, assurez-vous que c'est ce que vous voulez faire et nous pourrons y revenir. Très bien, jusqu'à présent, ça a l'air bien. Revenons donc à la liste, puis passons à tous les détails du discours sur la page des détails, l'interprétation de l'apparence que vous souhaitez donner aux détails. C'est encore plus nouveau. Je vais vraiment me concentrer sur la mise en page ici. Je vais donc simplement indiquer les détails du cours en haut. Et nous pouvons supprimer cela pour le C'est ce que nous appellerons une table de données en HTML. Et vous avez essentiellement un d t, et le d, ou d, n'est-ce pas ? Donc, une liste de données, puis vous avez les lignes de données et les colonnes de données. À peu près. Ce serait l'étiquette , puis ce seraient les données réelles. Si vous souhaitez le modifier, vous pouvez. Votre interprétation de cela dépend bien sûr de ce que vous pensez de cette page. Je ne vais pas modifier la mise en page elle-même. Ce que je vais faire, c'est me concentrer sur les deux boutons que nous voyons ici. Eddy retourne la liste en arrière. Je vais donc simplement réutiliser les cours que nous avons. Btn, BTN Dash Warning si vous voulez aller jusqu'au bout. Et pour Buck to List BTN, BTN Dash Dark. Très bien, et cela enlèvera le tuyau qui se trouve entre les deux. Et puis ce sont les détails. Je ne veux donc pas en faire trop ici. Si nous revenons à la liste, nous pourrons en faire plus avec la suppression. Supprimer nous affichera quelque chose, comme la confirmation, la page de détails, désolé. Ensuite, soit nous confirmons, soit nous supprimons, soit nous revenons à la liste. Je ne vais pas modifier la page de suppression car plus tard, nous allons modifier la fonctionnalité de suppression de telle sorte que lorsqu' une personne clique sur modifier la fonctionnalité de suppression de telle sorte que lorsqu' Supprimer à partir d'ici, nous l'y invitons. Tu es sûre ? Et ensuite, s'ils le confirment, nous allons simplement le faire. Donc, ce double saut où vous affichez puis supprimez, je vais le supprimer. Je ne vais donc pas dépenser d' énergie pour modifier cette page. Mais non, je pense que nous avons amélioré l'apparence de notre site Web, il est plus coloré. Et ces couleurs, bien sûr, racontent une histoire. La couleur indique à l'utilisateur ce qu'il pourrait faire lorsqu'il choisit cette option particulière. Si vous voulez d'autres couleurs, bien sûr, vous pouvez consulter les palettes Bootstrap, voir quelles sont les autres couleurs disponibles et quelles sont couleurs les plus faciles à utiliser et les utiliser ou les personnaliser en fonction vos préférences ou vos besoins en matière de marque ? Non. En attendant, je vous encourage à poursuivre et à faire la même eutrophisation pour les professeurs et les étudiants que nous venons de subir ensemble pendant les cours. Le défi que je vous lance est d'aller de l'avant et d'ajouter vos propres éléments de style aux professeurs et aux étudiants en fonction de nos points de vue. Dans la leçon suivante, nous allons maintenant implémenter cette fonctionnalité de suppression plus dynamique. Et je te verrai alors. 28. Supprimer en utilisant jQuery: Bienvenue à nouveau les gars. Dans cette leçon, nous allons implémenter une opération de suppression plus dynamique. Maintenant, la réalité est que pour supprimer, nous n'avons pas nécessairement besoin de supprimer puis de passer à une autre page. Encore une fois, même si c'est une bonne mesure pour s'assurer que nous sommes sûrs que nous sommes tous les deux supprimés l'enregistrement du panier. Mais ce que nous voulons faire, c'est permettre à l'utilisateur de simplement confirmer ici. Et puis une fois qu'ils ont confirmé, nous procédons à la suppression en arrière-plan , puis rechargeons la page. Très bien, nous allons donc implémenter un écran de confirmation. J'utiliserai cette bibliothèque appelée suites alerts. Seats alert est une bibliothèque très utile qui nous permet de créer belles invites contenant un échantillon. Et je vais juste passer directement à l'exemple que nous allons utiliser, qui est un dialogue confirmé avec un bouton de confirmation. Donc, lorsque nous disons « Essayez-moi », vous le verrez apparaître et il vous sera simplement demandé : Êtes-vous sûr de ne pas être en mesure de revenir en arrière ? Bien entendu, nous pouvons personnaliser les messages qui apparaissent. Ensuite, nous pouvons autoriser l'utilisateur à confirmer la suppression ou à annuler ce qu'il était sur le point de faire. Alors voici l'exemple de code dont nous avons besoin, non ? Commençons donc par l'installation. Je vais donc simplement passer à la page d'installation et ils nous expliqueront comment l'installer. Nous pouvons utiliser npm, mais nous n'allons pas utiliser npm. Nous allons simplement utiliser le lien CDN qu' ils nous ont proposé. Un CDN est à peu près une version hébergée du fichier script ou des ressources dont vous auriez besoin pour utiliser la bibliothèque, n'est-ce pas ? Nous pouvons donc utiliser un CDN. Sinon, nous pourrions récupérer les actifs réels, les fichiers J, S, etc., et les mettre dans le projet. Mais comme je l'ai dit, nous utiliserons simplement le CDN. Ainsi, lorsque nous copierons ceci, nous reviendrons simplement à notre Visual Studio. Code. Les projets qui n'apparaissent pas dans les vues passent à la mise en page. Et nous allons mettre le lien CDN ici même dans la mise en page. Je vais le mettre après le jQuery car cela dépend de jQuery. ordre compte donc. Cela doit venir après le jQuery. D'accord ? Donc jQuery, puis ceci, puis les autres fichiers de script que nous avons. D'accord. Donc, une fois que nous l'avons incluse, il suffit de copier-coller, car cette URL sera réellement générée. Permettez-moi simplement de vous montrer que cela nous amènera réellement à l'œil assis juste là. s'agit du fichier script qui sera Il s'agit du fichier script qui sera toujours référencé une fois que ce CDN sera disponible. Non, nous pouvons utiliser l'échantillon sur nos sites Web. Je suis donc prêt à emprunter ce code. Je vais sauter en arrière et commencer par les chevaux, non ? Page d'index. Maintenant, il existe plusieurs manières d' exécuter un script Java dans R au niveau de l'application principale, n'est-ce pas ? Nous pouvons écrire le JavaScript ici même dans la mise en page. Ce point est plus global car, bien sûr , la page de mise en page s'adresse à chaque page, mais nous ne voulons pas nécessairement que le JavaScript se déclenche ou soit disponible sur chaque page. Donc, lorsque nous voulons qu'il soit disponible sur chaque page, nous le plaçons ici dans le monde entier, n'est-ce pas ? Que nous soyons prêts à créer notre propre section de script ou que nous fassions référence à un fichier de script complet. Nous pouvons le faire à l'échelle mondiale dans cette section. Mais vous remarquerez également qu' en dessous de tout cela, nous avons ce qu' on appelle la section de rendu. Et cette section s'appellera scripts. Maintenant, qu'est-ce que cela signifie ? Cela signifie que sur toute vue que je souhaite exécuter un code ou un script JavaScript spécifique, je peux invoquer la présence de cette section dans cette vue spécifique et écrire le code JavaScript spécifique à cette vue . Par exemple, si je veux juste que ma douce alerte soit disponible sur la page d'index des cours. Oui, le lien CDN l'est, ou l'ensemble du fichier script est disponible dans le monde entier, mais j'invoque sa fonctionnalité uniquement dans cette vue. Je peux créer cette section à la fin du fichier. Je le place généralement à la fin du fichier, mais il sera généré dynamiquement par créneaux. Ou nous disons que je préfèrerais la section scientifique. Et puis nous appelons le sexuel par son nom, qui, souvenez-vous, s'appelle scripts. On voit toujours les scripts ici, d'accord ? Je peux donc l'invoquer par son nom. Ensuite, je peux y mettre ma balise de script et commencer à écrire les scripts JavaScript que j'ai l'intention de faire exécuter pour cette section. Très bien, je vais donc tout d'abord créer une section jQuery complète. Nous invoquons la fonction. Et puis je vais voir ça impur. Donc, lorsque l'on clique sur ce bouton de suppression, c'est ce que je voulais vraiment. Comment puis-je identifier les boutons dont j'ai besoin ? Donc, si vous voulez vous rafraîchir sur JavaScript, encore une fois, consultez mon cours de développement Web où il passe par JavaScript. Mais chaque fois que je veux un élément spécifique, je dois le référencer soit par nom, soit une classe à laquelle je pense que je vais simplement lui donner une autre classe. Je vais juste l'appeler Deep Btn. C'est donc mon cours. Cela ne servira à rien de lui donner un style. Je lui donne juste un nom de classe, non ? Ensuite, je vais dire quand on clique sur ce bouton, donc le signe dollar et j'utiliserai simplement jQuery, bien sûr, point désolé, guillemet, mais supprimer btn, à droite, indique obtenir l'élément qui a la croix supprimer btn. Puis je suis allée m' inscrire, je clique sur les événements. Donc, onClick, je veux lancer cette fonction et j'utiliserai E pour l'argument de l'événement. Très bien, un objet jQuery assez gros. Et puis à l'intérieur de cela, nous sommes plutôt notre fonction. Et puis, à l'intérieur de cela, nous surveillons les événements de clic sur tout élément ayant la classe delete btn, qui dans notre cas est notre véritable bouton Supprimer. Quand cela se produit, non, je peux coller cet exemple de code que nous venons de retirer du site Web Swell et formater pour qu'il soit un peu plus logique. D'accord. Donc, à peu près, laisse-moi partir. À peu près. Nous constatons que lorsque vous cliquez dessus, vous déclenchez ces alertes de merle, n'est-ce pas ? Titre. Es-tu sûr que tu ne pourras pas revenir en arrière ? Et c'est une icône d'avertissement. Ensuite, nous affichons le bouton Annuler. Ensuite, nous pouvons définir la couleur de confirmation et la couleur du bouton d'annulation. Nous voyons qu'ils reviennent à l'hexagone, mais c'est très bien. Ensuite, vous pouvez dire oui, supprimez-le. Et puis s'ils confirment, alors remarquez que non, il lance d' abord cette partie, c'est le prompt. Ensuite, il est dit d'évaluer les résultats. Les résultats seraient ceux sur lesquels ils cliquent pour annuler notre confirmation. Non. Ils diront que si c'est confirmé, si le résultat est confirmé, est-à-dire que vous avez cliqué sur le bouton Confirmer, que devons-nous faire ? Très bien, donc ce que nous allons faire, c'est qu'il y aura différentes parties. Ce que nous voulons faire, c'est lancer la suppression. Nous pouvons afficher la confirmation, oui, mais nous voulons également lancer l'opération de suppression dans le back-end. Donc, pour ce genre d'opération, j'ai tendance à créer un formulaire car nous en avons déjà la fonctionnalité, n'est-ce pas ? Nous avons déjà la fonctionnalité dans nos cours, nous sommes en cours. Permettez-moi donc de passer par-dessus le fait que c'est bien sûr contrôlé et de vous montrer ce que cela signifie. Nous avons déjà la fonctionnalité qui nous permet accepter l'identifiant, n'est-ce pas ? Ensuite, nous le transmettons au besoin, puis il lira Erich à indexer. Je n'ai donc vraiment pas besoin d' écrire quelque chose de trop spécial. Au lieu de cela, je vais créer un formulaire similaire au formulaire réel qui se trouve ici dans la méthode de suppression. Très bien, donc je vais juste le copier, besoin de tout ce qu'il contient. Il suffit de le copier. Je n'ai pas besoin d'un dollar pour m'inscrire. Je n'ai même pas besoin d'un bouton d'envoi car je souhaite utiliser un jQuery pour effectuer la soumission en mon nom. D'accord, c'est là que ça devient passionnant. D'accord ? Nous avons donc notre option ASB Supprimer. Et puis nous avons cette entrée qui a une liaison pour ID. Maintenant, je reçois toutes ces erreurs n'est-ce pas parce que cela signifie que l'œil innombrables ne contient pas définition de l'identification, n'est-ce pas ? L'œil innombrables là-haut, qui est une collection, n'a pas d'identifiant C'est pourquoi nous avons dû faire le ForEach pour accéder à l'élément ID. Il y a donc un certain nombre d'ajustements ici. Premièrement, je dois transformer cette balise d'ancrage en bouton, car les boutons envoient des formulaires, pas des balises d'ancrage, n'est-ce pas ? Si vous parcourez tous les formulaires, vous remarquerez qu'il s'agit soit de saisies contenant des types de viande, soit de véritables balises. Je vais donc simplement créer le nouvel élément au lieu de détruire celui qui est là. Je voulais en créer un nouveau. Je vais donc dire bouton. Nous allons lui donner un attribut de données. C'est une méthode intéressante qui lui permet d' attribuer une valeur à un élément en HTML afin que la valeur que j'attribue soit la valeur de l'identifiant de l'élément. D'accord ? Je voulais te donner le même cours parce que, bien sûr , il faut que ce soit le bouton Supprimer. Donc, puisque je l'ai comme bouton Supprimer, je vais le supprimer de la balise d'ancrage. Et puis je vais lui dire que son type est égal à un bouton. Il n'essaie donc pas encore de soumettre de formulaire. C'est juste censé s'asseoir et écouter, non ? Et puis nous pouvons simplement dire bouton Supprimer, texte. D'accord. Je vais juste signaler celui-ci. Supprimez l'ancien pour ne pas manquer le clic. Nous avons donc maintenant un bouton qui a la classe delete btn. Et cela va déclencher notre douce alerte. Chaque fois que vous cliquez dessus, sachez quand vous cliquez dessus. Que voulons-nous faire ? Nous voulons prendre la valeur de l' identifiant à partir de là, la saisir dans le formulaire, puis le soumettre pour qu'il ne puisse pas le faire, passer au contrôleur et faire ce qu'il aurait fait naturellement. Nous sommes donc en train de le découper avec précision. Nous utilisons JavaScript pour nous aider à utiliser ces raccourcis. Très bien, modifions d'abord les entrées. Je ne veux donc pas qu'il dise « c'est avant » , mais je dois lui donner une pièce d'identité. Donc, ce qui se passe, c'est qu'ASB je crois que nous l'avons déjà examiné, configure automatiquement les attributs d'identifiant et de nom pour l'élément qui, selon elle, se trouve avant. D'accord ? Nous pouvons donc réellement annuler cela. Nous pouvons les insérer manuellement. Je peux donc voir que c' est l'identifiant du cours. Il s'agit plutôt du nom ou de l'identifiant de l'élément. Et puis le nom ici serait simplement Id. D'accord ? Id, car cela doit correspondre au paramètre attendu ici. D'accord ? Alors maintenant, ce que nous pouvons faire, c'est quand la personne confirme qu' elle effectue cette suppression, d'accord ? Je peux dire qu'il est supprimé. Mais vraiment, je tiens à vous dire de me faire parvenir le bouton sur lequel vous avez cliqué. Le bouton var est donc égal à. Et puis en utilisant simplement le signe du dollar, cela me donnera l'objet qui a déclenché l'événement, à savoir le bouton sur lequel on a cliqué. Ensuite, je veux me procurer l'identifiant à partir du bouton. Je vais donc dire BTN point data et me donner l'identifiant. D'accord ? Ainsi, chaque fois que vous utilisez ces attributs de données dans votre code HTML et que vous souhaitez obtenir le contenu de ces attributs de données comme valeur. Ensuite, en JavaScript, vous pouvez toujours dire obtenir les données de l'élément point , puis la clé de ces données. Data Dash ID fait donc de l'informatique cette clé. Très bien, maintenant que j'ai les données du bouton, je vais voir le pétrole exploser avant que nous ne tirions sur le formulaire. En fait, je dois lui donner une valeur. Il y a donc un certain nombre d'étapes, mais nous allons simplement les parcourir pour assurer que nous sommes sur la bonne voie. Donc, signez le dollar, ouvrez, augmentez, mettez entre guillemets. Et puis c'est l'identifiant du cours, le hashtag, l'identifiant du cours, non ? Ensuite, nous définissons la valeur de cet identifiant de cours avec hashtag comme étant la valeur de l'identifiant indiqué sur le bouton. Je le fais juste ligne par ligne. Tout cela pourrait se faire en une seule ligne, mais je vais le diviser pour que nous puissions tout voir clairement. Ensuite, nous voulons soumettre ce formulaire. Donc, ce que je vais faire, c'est donner une valeur d'identification à ce formulaire afin que je puisse l'appeler par son identifiant. Nous pouvons appeler ce cours supprimer la ferme. accord ? Ensuite, ce que je vais faire, c'est dire que je veux plutôt soumettre ce formulaire ou ce signe du dollar. Et puis le hashtag, le cours supprime les sous-réseaux de points du formulaire. Très bien, c'est une méthode agréable et propre et nous tirons parti du code existant. Passons donc en revue exactement ce qui se passe ici. Premièrement, je change cette balise d'ancrage pour en faire un bouton. Lorsque vous cliquez sur ce bouton, il n'essaie pas de naviguer. Au lieu de cela, il déclenchera ces événements de clic. Cet événement de clic déclenchera ensuite une alerte douce au cours de laquelle nous informerons l'utilisateur. Tu es sûre ? S'ils répondent oui, sont-ils certains que cette partie est facultative ? Nous pouvons donc évaluer si nous le voulions vraiment plus tard. Mais nous voulons obtenir les données, obtenir le bouton, puis obtenir les données du bouton, qui est la valeur d'identifiant sur laquelle il a été imprimé. Très bien, donc Data Dash ID. Ensuite, nous voulons définir cette valeur d'identifiant dans le formulaire lui-même , puis soumettre le formulaire. Cependant, le comportement attendu est qu'une fois que nous avons défini cette valeur d'identifiant ici et que nous avons soumis l'intégralité du formulaire, passerons à cette action de suppression avec cette valeur d'identifiant. Et cela déclenchera cette opération de suppression, qui reviendra ensuite à l'index. Cela donnera l'illusion qu' il a été supprimé et que la page sera rafraîchie. Ce n'est pas une illusion. C'est en fait ce qui va se passer. D'accord ? Je fais donc de la montre Dotnet depuis tout ce temps. Sautons par-dessus et testons le sel. Donc, si j'y reviens et que je crée ça, je vois que je viens de créer un cours de charabia, d'accord ? Et je reçois cette vilaine erreur. Je pense que c'est simplement à cause du type de données saisies. Alors laissez-moi, je pense que c'est celui-ci parce que j'ai limité le nombre d'éléments qu'il contient. Permettez-moi donc simplement de dire CBS, CW que nous créons à nouveau. On y va. D'accord. C'est donc à cela que nous devons prêter attention à la manière dont nous gérons ces exceptions, mais essayons notre nouvelle fonctionnalité de suppression. Nous avons donc maintenant ce bouton de suppression. Si je clique sur Supprimer, ce message s'affiche. Très bien, donc cette partie fonctionne. Si je clique sur Annuler, rien ne se passe. Laisse-moi réessayer. Si je supprime et que je dis oui, supprimez-le. Nous avons reçu les instructions. Oui, il a été supprimé mais nous avons quand même été actualisés. Et voilà. Non, il n'y a pas de double saut. Nous recevons juste une simple confirmation. Et puis, soit vous confirmez , soit vous annulez. D'accord. Maintenant, le défi que je vous lance est de moderniser l'autre page d'index pour qu' elle ait un comportement similaire, n'est-ce pas ? Modifiez ce bouton de suppression de manière qu'il utilise une alerte douce qui vous invite, vous devez saisir le formulaire, mettre les différents boutons, mettre les différents boutons, les informations dont vous avez cet exemple pour supprimer. Je peux donc maintenant supprimer ceci, cette balise d'ancrage, et c' est maintenant mon bouton Supprimer. Et vous voyez, même s'il s'agit d'un bouton et de balises d'ancrage, si je ne vous montrais pas le code, vous ne le sauriez pas. Il n'y a aucun moyen de savoir lequel est lequel. Alors laisse-moi juste reconstruire. On y va. y a donc aucun moyen de savoir laquelle est une balise d'ancrage et laquelle est un bouton à moins que vous n'inspectiez un élément ou que vous ne fassiez quelque chose de très intrusif. Et si nous inspectons l'élément, nous verrons ici que la valeur de l'identifiant des données est de trois. Tout comme Waouh, l'URL aurait comporté un trois dedans. L'élément d'identification des données en comporte trois, donc il les saisit et les place sous cette forme, qui, je le sais, est vide, n'est-ce pas ? Cela n'a aucune valeur là-dedans. Mais une fois que nous cliquons sur Supprimer, cette valeur y est placée , puis elle est soumise. Et vous voyez, c'est le jeton anti-contrefaçon dont nous avons parlé plus tôt dans le cours. C'est donc très important pour la sécurité, car vous ne voulez pas que les utilisateurs puissent simplement envoyer demandes de suppression pour un élément portant l'ID trois. Très bien, c'est donc très important pour la protection, car ce jeton anti-falsification est validé au moment où la demande est faite avant que la suppression ne soit effectuée. C'est pourquoi je recommande que nous utilisions ce formulaire pour ce type d'opération. Chaque fois que nous allons augmenter les données, nous devons toujours utiliser un formulaire. Maintenant que nous avons une opération de suppression plus interactive, nous pouvons passer à la création de tableaux plus interactifs. notre retour, nous verrons comment améliorer l' affichage des ArrayLists à l'aide de tables de données. 29. Ajouter des données: Dans cette leçon, nous allons installer des tables de données, une bibliothèque basée sur jQuery qui étend les fonctionnalités de nos tables classiques. Maintenant, voici un exemple spécialement conçu pour Bootstrap 5. Très bien, et vous pouvez y arriver en vous occupant de Data Tables.net Slash Example Slash Styling Slash Bootstrap File Dot HTML. À partir de là, vous verrez que c'est à cela que cela transformera notre table. Il est livré avec la pagination et offre la possibilité d' afficher plus ou moins d'entrées à la fois et une recherche dynamique. Donc, si je cherche quelque chose avec les lettres TR, le filtrage commencera immédiatement. Depuis, c'est un moyen très intéressant de rendre nos tableaux plus attrayants et davantage axés sur les données. Ci-dessous, ils montrent également comment nous pouvons procéder à l'intégration. Nous devons donc faire cette ligne d'initialisation en JavaScript. Nous avons l'exemple du tableau en HTML, nous en aurons où je ne manquerai pas de tableaux, donc c'est très bien. Et puis nous avons les ressources CSS nécessaires, n'est-ce pas ? Commençons donc par les parties JavaScript. Ils nous ont donné quelques liens CDN. Donc, le premier dont nous avons besoin est jQuery. Nous avons déjà jQuery parce que cela est sorti des sentiers battus avec nos projets et ils se contentent de revenir à la mise en page. Nous pouvons voir que nous avons déjà jQuery. C'est très bien De quoi d'autre avons-nous besoin ? Nous avons besoin du lien CDN vers le fichier de tables de données jQuery, et nous avons besoin d'un lien CDN vers le fichier Bootstrap JS. Donc, ce que je vais faire, c'est dupliquer ces deux lignes. Est-ce que cette file d'attente pour les bonbons est en alerte. Ensuite, je vais simplement copier les nouveaux liens CDN. Très bien, donc ils sont vigilants. Donc le prochain, le premier doublon, je vais le remplacer par le CDN link two data tables min. Et puis le second, je vais tout de même remplacer. D'accord. Nous avons donc maintenant les fichiers JavaScript pour les tables de données inclus dans notre fichier de mise en page. Ensuite, nous avons besoin du CSS, et ils nous fournissent également les liens CDN. Et encore une fois, il est important de suivre l'ordre lequel ils les listent dans le CSS. Je peux aller jusqu'en haut et je vais simplement dupliquer le bootstrap. Lubrifiez donc le Bootstrap. Ensuite, nous allons prendre le premier lien CDN pour le fichier CSS et remplacer la première référence CSS Bootstrap dupliquée. Ensuite, nous prendrons celui-ci et ferons de nouveau la même chose. D'accord. Donc, comme les tables de données nécessitent bien entendu Bootstrap, nous avons d'abord besoin de la feuille de style Bootstrap. Ensuite, on pourra mettre le poignet. Et puis notre propre site, le CSS, arrive en dernier. Parce que si nous en avons besoin pour remplacer quelque chose dans les trois premiers, nous pourrions le faire dans notre propre fichier CSS. Très bien, et puis celui-ci se trouve même en dessous de ce fichier CSS. Donc, c'est très bien. Maintenant que les actifs sont inclus, faites-le nous savoir et regardez comment nous les initialisons. Donc, si je reviens à l'exemple JavaScript, montre qu'une fois que le document est prêt, nous pouvons simplement initialiser la table de données. Je vais donc le copier et revenir à des cours qui ressemblent à des cours qui ressemblent à des fonctionnalités innovantes ou à des fonctionnalités innovantes. Et ce que nous avons ici, c'est une table avec la table des classes. Je vais donc utiliser la table des classes pour identifier la table qui se trouve déjà dans la page. Très bien, ce que je peux faire est déjà en cours d'exécution de cette méthode ou fonction jQuery. Je vais donc placer cette initialisation pour la table de données ici. Nous avons donc l'événement de clic, c' est-à-dire qu'il est enregistré lorsque la page est prête. Nous allons faire la même chose ici avec un tableau de données. Mais l'élément que nous ciblons est le tableau à points, c'est-à-dire tout élément contenant la table des classes, dont nous avons un élément avec une table de classes. Très bien, alors quand je le ferai, jetons un coup d'œil à la page des cours après cette modification ou cette droite. Si vous le regardez, vous verrez que non, je reçois tous les éléments visuels que nous venons de voir. Et je peux faire le tri. Je peux trier par nom, par code ou par nombre de crédits. Je peux Celui-ci ne demande aucune recherche car ils sont tous identiques. Si je voulais filtrer, je peux voir « Ouvrir » et le filtre sera automatiquement filtré, n'est-ce pas ? Donc, juste comme ça, j'ai transformé tout cela. Je veux dire, c'était déjà une belle table car il s'agissait d' un thème Bootstrap. Mais c'était assez simple. Très bien, j'ai transformé cette table plane en table de données en ajoutant simplement une ligne de code après l'avoir saisie dans les ressources. Les actifs. C'est une activité ponctuelle, car devinez quoi ? Je peux le faire sur chaque page où j'ai un tableau que je souhaite afficher sous forme de tableau de données. Prenons donc, par exemple, les cours. Regardons les cours de littérature. Aucune modification. Lectures est toujours en cours. Si je voulais modifier cela, je passe simplement à la page d' index des quatre conférences, et je l'ai déjà modifiée pour ajouter des alertes intéressantes. Je vais donc simplement insérer ce nouveau code de table de données dans cette section. Et puis le tour est joué, laissez-le simplement se transformer. Maintenant, l'inconvénient des tableaux de données prêts à l' emploi, c'est que, selon la façon dont l'application est écrite, elle affiche en fait une étoile de sélection à tout moment. Donc, si nous avons 1500 à 500 000 enregistrements, peu importe le nombre d'enregistrements, ils essaieront toujours de tous les charger sur la page une fois. L'avantage des tableaux de données est qu' ils nous permettent automatiquement de parcourir les pages et limitent le nombre d'éléments affichés à la fois. Cependant, en fin de compte, il y aura toujours les 500 000 disques sur le front-end. C'est à ce moment-là que vous commencez à penser aux activités de pagination côté serveur, etc. Pour que cela ne ramène en fait que X sur le nombre total d' enregistrements étant donné que notre système est si petit, je ne vais pas m'inquiéter à ce sujet pour l'instant. Mais c'est une bonne activité pour nettoyer complètement nos éléments. Regardez sur notre site. Je vais donc simplement l'ajouter à la page d'index, puis nous pourrons arrêter cette activité. Une fois que nous aurons validé cette transformation. Dans la prochaine leçon, nous verrons comment nettoyer l'affichage de nos étiquettes. 30. Ajouter des étiquettes personnalisées: Bienvenue à nouveau les gars. Dans cette leçon, nous allons voir comment nettoyer un peu l'affichage des étiquettes, n'est-ce pas ? Non, les labels nous montrent des textes identiques au nom de la propriété, ce qui n'est pas idéal car ce n'est pas vraiment lisible par l'homme en tant que programmeurs . Cela nous convient parce que c'est tout ce que nous avons pour écrire le code. Mais pour nos clients et les utilisateurs réels du système. Ça n'a pas vraiment l'air très bien, non ? Ce que nous voulons faire, c'est les corriger de manière à ne pas avoir à le faire manuellement sur chaque page, car nous devrons le corriger dans l'index. Nous devrons les corriger lors de la création de la modification, des détails, etc. Nous voulons donc les corriger une fois pour ne pas avoir à répéter cela. Aucune solution simple à cela ne serait de suivre le cours Data, n' est-ce pas, pour les étudiants. Très bien, commençons par le cours parce que nous ne sommes pas étudiants. Des étudiants parce qu'ils ont vraiment le boîtier Pascal, non ? Je vais donc utiliser la classe de l'étudiant pour commencer cet exemple. La solution simple serait d'ajouter des annotations ici, car on peut facilement voir cette pièce. Et puis définissez le nom. Ensuite, nous incluons simplement les informations manquantes en utilisant la référence, les annotations de données qui s'y trouvent dans le composant point du système , ce sont des annotations. Ensuite, nous pourrions voir que le nom est égal à et nous définissons la valeur que nous voulons, qui serait le premier nom d'espace. Juste en faisant ça. Très bien, juste en faisant ça, si je rafraîchis l'interface utilisateur, vous verrez que non, elle porte le prénom. Si je dois créer un nouveau premier nom d'espace, d'accord, donc c'est une solution pour chaque étrange affichage. Et c'est parce que c' est cette annotation de données qui informera la réalité. Lorsque nous avons eu notre table, nous avions un nom d'affichage pour celle-ci. On y va. D'accord, donc ce sont des cours. Permettez-moi de vous le montrer sur l'index pour les étudiants. Très bien, alors affichez le nom du prénom. Ainsi, même s'il s' agit de l'élément, le nom d'affichage de cette annotation sera tiré de ses instructions. Sachez que cela fonctionne. L'inconvénient, cependant, c'est que si la base de données change et nous devons fermer une voiture de course ou des éléments, tout sera réinitialisé et cela ne sera plus maintenable. Ce serait un effort inutile car chaque fois que la base de données change, nous devons nous disputer à nouveau et chaque fois que nous sommes bagarrés, nous devrions la parcourir et recommencer. Et c'est littéralement une perte de temps. La solution consiste maintenant à créer une classe étendue de cette classe. Très bien, donc, tous les éléments générés par l' activité d' échafaudage sont partiels, écrivez les modèles sont tous partiels, même le contexte de base de données est partiel. Dans C-Sharp, un partiel signifie que je peux avoir plusieurs plans du même fichier. Très bien, voici les plans que EF Core nous a fournis. Mais ensuite, je pourrai créer un autre plan qui complète celui-ci. Et c'est ce que nous allons faire pour remédier à la situation. Je vais donc créer une nouvelle classe et je vais la créer dans le dossier des modèles. Et vous archivez, je veux l' appeler données des étudiants. Et puis j'ai besoin de mon espace de noms, qui sera le cas, et je suis très paresseux. Parfois, je vais simplement emprunter tout cela et dire namespace, name point models. D'accord ? Ensuite, nous avons notre classe, qui est constituée de données sur les étudiants. D'accord ? Non, bien sûr, c'est un cours public. Hein ? Maintenant, dans notre classe publique, les données sur les mentors des étudiants, je peux définir des propriétés qui correspondent à celles de l' étudiant d'origine, n'est-ce pas ? Disons donc que je voulais ces trois éléments et j'utilise ces trois-là parce que je n'ai pas vraiment besoin de remplacer quoi que ce soit par ID. D'accord ? Je vais donc utiliser ces trois éléments et les placer ici. Ensuite, je peux placer mes annotations pour pouvoir dire afficher. Et le nom est égal à. Le nom est égal à. Et bien sûr, j'ai besoin de mon absence en utilisant des déclarations. On y va. Et puis ce sera l'espace réservé aux prénoms. Ensuite, je vais simplement le copier et le réutiliser pour le nom de famille et la date de naissance, corriger le formatage, bien sûr, puis ajuster le texte affiché. Ainsi, la date de naissance correspond à la date de naissance, espèce alimentaire et le nom de famille sont perdus. D'accord. Maintenant, nous les avons définis et nous pouvons également faire d'autres choses, comme des validations spécifiques, n'est-ce pas ? Donc, si je le voulais. Pour le dire, d'accord, cela ne doit jamais dépasser 50 caractères lorsque c'est saisi sur l'interface utilisateur, je peux mettre une longueur de chaîne de 50, non ? Je pourrais le dire. OK, sur l'interface utilisateur, peut-être que ce n'est pas dans la base de données, à la fois sur l'interface utilisateur. Je veux répondre à cette exigence, non ? Ce sont donc des choses que nous pouvons faire pour forcer les validations et les affichages côté client ou sur l'interface utilisateur, n'est-ce pas ? Je ne vais pas m' obliger à simplement montrer et je n'ai pas besoin que la longueur de la chaîne soit 50, donc c'est très bien. Maintenant que nous avons ce fichier de métadonnées, comment l' associer au modèle de données réel ? Eh bien, juste en dessous, dans le même dossier, je vais juste avoir une déclaration concernant les étudiants des classes partielles publiques. Alors n'oubliez pas qu'une partie me permet d'avoir les implémentations sont des plans plutôt à plusieurs endroits. Ce sera donc un plan vide, non ? Mais quand tout sera compilé, tout ce que j'ai mis dans ce plan sera compilé avec ce que j'ai mis dans ce plan. Et puis tout ne sera plus qu'un seul grand plan à la fin de la journée. Donc non, je dois associer ce plan aux métadonnées des étudiants. Je vais donc donner la classe partielle et l'annotation, c'est le type de métadonnées de son modèle. Il se peut que vous deviez inclure une référence d'utilisation. Donc, si vous obtenez une erreur, lorsque vous associez ce modèle à un type de données, nous contrôlons simplement les points et utilisons des instructions, n'est-ce pas ? Ensuite, nous voyons apparaître un type de métadonnées sur les étudiants. C'est donc l'associée, cette classe de métadonnées qui sait partiellement que lorsque je passe en revue et actualise nos pages, elle ne fonctionne pas. Cela ne fonctionne pas. C'est parce que je me trouve dans le mauvais espace de noms. Très bien, j'ai donc mis l'espace de noms en fonction du dossier. Je veux dire, évidemment, mais la classe partielle réelle se trouve dans un espace de noms différent. Donc, pour que ce partiel sache qu'il est partiel à l'autre. Un moyen facile de le savoir est que si je clique dessus avec le bouton Contrôle, il n'y aura aucune référence de téléphone, n'est-ce pas ? Mais si je modifie ces données, change l'espace de noms en données, puis que je les laisse s' actualiser lorsque je clique dessus, sans cliquer dessus, je saurai que, d' accord, il y a un nombre partiel d'étudiants ici, et il y a aussi un étudiant partiel ici, non ? L'espace de noms est donc très important. On peut dire que vous pourriez placer ces méta-données dans le dossier de données. L' activité d'échafaudage ne fera que remplacer les fichiers, ignore un verrou. Tout ce qui s'y trouve déjà ne sera pas supprimé, mais c'est à vous de décider. Je vais simplement laisser les choses telles quelles et réessayer. Donc, quand je me rafraîchis, c'est parti. Donc prénom, nom de famille, date de naissance. Et cela semble beaucoup plus facile à lire. Beaucoup plus convivial si je vais dans les détails, c'est aussi un fil fixe. Si je vais dans Modifier, c'est également corrigé. Je n'ai donc pas à parcourir chaque page et à modifier cette modification en HTML, en ne faisant qu' un seul endroit et cela aura de la valeur partout ailleurs. C'est donc un moyen simple et pratique de modifier l'affichage et les sections d' étiquette de notre interface utilisateur à partir de nos cours. Vous pouvez donc essayer la même chose avec la lecture. Allez-y, créez cette conférence et cette classe de métadonnées. La partie dont je me souviens, doit correspondre à l'espace de noms. Ensuite, vous pouvez ajouter vos propres noms d'affichage et vos validations si nécessaire. 31. Gestion des modifications de base de données: Très bien les gars, nous avons donc reçu des commentaires ce que nous avons fait via l'interface utilisateur, les fonctionnalités, tout le reste, et nous avons reçu d'excellents commentaires. Ils adorent ça. Le client meurt d'envie d'utiliser le système. Mais ils ont dit que, d'accord, avant de pouvoir utiliser pleinement le système, nous avions besoin de deux fonctionnalités supplémentaires. D'accord ? Les deux fonctionnalités demandées nécessiteront donc des modifications de la base de données. Dans ce cas, ils veulent pouvoir suivre les cours. Et une classe est définie par un professeur qui donne un cours à un moment précis. Ensuite, ils veulent être en mesure suivre les inscriptions des étudiants, ce qui signifie qu'un étudiant est inscrit à un cours. Très bien, cela signifie que nous avons besoin de deux tables supplémentaires. Maintenant, j'ai le Data Studio et je suis déjà connecté à mon instance qui fonctionne dans le noir. Vous pouvez donc appuyer sur Pause, ouvrir votre Data Studio, lancer votre Dark Dark si nécessaire. Si vous avez besoin d'un rappel à ce sujet, vous devriez avoir une interface utilisateur plus sombre où vous pouvez simplement accéder à la liste des conteneurs et rechercher votre conteneur Microsoft et celui que vous avez configuré Je peux simplement cliquez sur le bouton Play. Ensuite, une fois que cela est opérationnel, vous pouvez vous connecter à l'aide de Data Studio. Et Data Studio conserve généralement bien les détails de connexion. Maintenant, nous devons écrire un nouveau script. Je vais donc publier un nouveau script et vous verrez reprends là où je m'étais arrêté la dernière fois ici. Mais dans cette fenêtre de script, je vais commencer par une instruction d'utilisation, afin que nous sachions que nous devons utiliser la base de données de gestion scolaire. Maintenant, l'avantage de Data Studio est que vous pouvez utiliser cette instruction d'utilisation, mais vous pouvez également sélectionner la base de données dans cette liste déroulante. J'ai tendance à le faire quand même, car parfois vous oubliez faire cette partie et vous risquez de finir par exécuter un script sur la base de données. Commencez donc toujours par vos instructions d'utilisation. Non, je dois créer deux nouvelles tables. Je vais donc créer une table et vous allez me voir enfreindre la discipline parce que le SQL ne distingue pas vraiment les majuscules et les minuscules. Au début, j'ai donc fait de mon mieux pour mettre les mots clés en majuscule. Je vais me détendre cette fois et ne pas être aussi prudente. D'accord ? Nous créons donc une table appelée classes et elle obtiendra un identifiant qui est int, clé primaire et une identité censée toujours être là. Et à part le fait que je suggère simplement qu'elle devrait toujours être là, Entity Framework adore voir quand il existe une clé primaire. Très bien, donc cet esprit a beaucoup de mal à la tête quand il s'agit d'utiliser EF Core. Tenez la boîte d' une manière très puissante. Alors, à quoi d'autre la classe de la classe aura notre référence, l'identifiant de la conférence. C'est donc la première fois que nous allons utiliser une clé étrangère ici. L'ID de lecture, qui est un entier, est une clé étrangère qui fait référence à la table des cours et à la colonne id. Encore une fois, si vous n'êtes pas très familier avec les clés et les relations étrangères , pour ne citer que mon cours de développement de bases de données, Microsoft SQL Server pour tous. Cependant, si c'est le cas, cela devrait vous sembler très familier, car nous devons évidemment associer le cours au cours magistral. Et le cours doit également être associé à un cours. Nous devons donc faire la même chose et introduire, introduire un identifiant de cours, qui est également un entier et une clé étrangère qui référence le cours est stable et la colonne id. Eh bien, pour Non, ils ont dit qu'ils voulaient juste avoir du temps. Supposons donc qu' une fois ce temps écoulé, cela une fois ce temps écoulé, signifie que cette conférence enseignera ce cours à cette heure, tous les jours de la semaine. Et c'est ce qui constituera notre classe. Et ce que nous faisons ici ou nos décisions ici sont basés sur les règles commerciales et les exigences commerciales du client. C'est bon. J'essaie donc de rester très simple. Ce n'est peut-être pas le système le plus réaliste dans l'ensemble du système de gestion des écoles de l'eau. Mais je reste simple pour que nous puissions comprendre certains de ces concepts. D'accord ? Le tableau suivant serait le tableau des inscriptions, et je vais simplement le mettre ici. Nous avons des inscriptions à Create Table. Nous avons toujours notre identifiant de clé primaire. Ensuite, une inscription est définie par un étudiant. Nous avons donc besoin de l'identifiant de l'étudiant, clé étrangère faisant référence à la colonne ID dans le tableau des étudiants. Et puis le cours que suit l'étudiant. Cet identifiant de classe, faisant référence à la classe, est stable. C'est pourquoi nous devons nous assurer de créer le cours avant de créer les inscriptions, car il y a une dépendance sur le tableau des classiques. Maintenant, nous pouvons courir. Et cela a été réalisé avec succès. Donc, si je baisse, je verrai que j' ai maintenant des cours et deux nouvelles tables ont été créées pour les inscriptions. Maintenant, comment intégrer ces deux nouveaux tableaux dans notre application, n'est-ce pas ? Nous avons donc déjà un professeur, étudiants savent que nous avons besoin de nouveaux cours. Je vais donc arrêter ma montre Dotnet. Et affichons ces bribes terminologiques. J'en parle donc et je vais augmenter la taille de notre police. Je vais donc créer la même commande que celle que nous utilisons pour la première fois pour intégrer tous ces éléments. J'ai donc la commande ici et nous pouvons vous rafraîchir la mémoire quant à ce que chaque section construit. Mais juste une ou deux, ce que j'ai fait par le passé, c'est créer un fichier partiel dans lequel cette commande vivrait, car cette commande ne la changerait jamais en traitant une seule base de données C'est le moment, non ? Donc, au lieu d' essayer de le réécrire de mémoire ou de le mettre quelque part et d'oublier où je l'ai mis. Je l'ai mis dans un fichier partiel et je l'ai intégré au projet. Donc, ce que je ferais, c'est simplement exécuter ce fichier Porsche qui exécuterait cette commande. Et cela me donnera juste le niveau de constance dont j'ai besoin. C'est quelque chose que nous pouvons probablement examiner dans la section bonus de ce cours. Mais pour l'instant, réorganisons simplement la commande. Nous avons donc dotnet, EF, EV, querelle de contexte, puis nous avons notre chaîne de connexion. Et n'oubliez pas que si votre chaîne de connexion contient des caractères spéciaux, en particulier dans le mot de passe que j'avais avec ces deux signes du dollar, vous devez utiliser un seul guillemet, d'accord ? Pour récupérer la chaîne de connexion, bien sûr, vous pouvez simplement passer aux éléments opposés, comme le fichier JSON. Vous pouvez le copier et le coller ici. Ensuite, nous avons le fournisseur, qui dans notre cas est SQL Server, que nous forçons de manière à forcer l' échafaudage afin qu'il remplace tous les fichiers phone du répertoire de sortie, qui sont des données. Et nous ne voulons pas qu'il soit configuré parce que nous ne le voulons pas, nous ne voulons pas que le contexte de base de données essaie d'avoir sa propre copie de la chaîne de connexion dans le noyau. Très bien, après avoir fait tout cela, nous appuyons sur Entrée et l' autorisons à s'exécuter, et il construit un projet avec succès. Lorsque nous reviendrons dans notre explorateur de fichiers, nous verrons que nous avons maintenant ces nouveaux fichiers. Laisse-moi faire un petit zoom arrière. Très bien, maintenant nous avons le cours I, l'identifiant du cours. Vous avez du temps avec les propriétés de navigation, le cours et les inscriptions, n'est-ce pas ? C'est donc ce que la classe apporte. L'inscription comprend l'inscription, l'identifiant de l'étudiant, identifiant de la classe, les étudiants de la classe primaire. D'accord. Nous avons donc maintenant une table supplémentaire. Donc, ce que je vous mets au défi de faire , c'est de parcourir et de fouiller les pages réservées à la foule pour ces deux tables. Vous remarquerez également que lors du test de votre interface utilisateur, comme nous avons créé les classes de métadonnées, nous n'avons pas perdu nos étiquettes, donc c'est une bonne chose. Très bien, vous pouvez maintenant faire le même type d'extension de métadonnées pour ceux-ci. Si nécessaire. Vous pouvez consulter l'interface utilisateur et voir dans quelle mesure elle est basique et modifiée pour capturer avec précision les données qui doivent être capturées. 32. Correction des erreurs de syntaxe: Très bien, les gars. J'étais donc en train de préparer les contrôleurs pour les nouveaux modèles de données. Et j'ai commencé par les cours et j'ai rencontré un tas d'erreurs. Je ne vous cache donc pas la Terre , parce que si j'ai des erreurs, vous avez des flèches, je veux que nous les résolvions ensemble. Je voulais vous aider à comprendre pourquoi nous recevons ces erreurs. Maintenant, la classe de mots est un mot-clé en C Sharp dans la plupart des classes de langues, non ? Le problème ici est que nous avons ce que nous appellerons la langue du domaine, la langue spécifique au domaine, qui dans ce cas serait celle de la création d'un système de gestion scolaire. Le mot classe signifie donc quelque chose de différent pour une école par rapport à un langage de programmation. Il est tout simplement ironique que le mot clé soit si essentiel dans le langage de programmation qu'il provoque un conflit avec certains éléments. Donc, ici, dans le contrôleur de classes, vous remarquerez que les éléments que je fais défiler passent des erreurs pour nous afin que nous puissions comprendre les différentes syntaxes que nous pouvons voir. Ici, vous allez voir sur Sign Class que le dicton publicitaire est comme un tueur de mots clés. Donc, si nous prononcions le mot classe seul, cela provoquerait une erreur car classe, encore une fois, est un mot clé utilisé lors de la définition d'une classe réelle dans le code. Nous ne pouvons donc pas utiliser ce mot clé comme variable. Si vous devez utiliser un mot clé comme variable, vous pouvez placer le signe d'ajout devant celui-ci. Et puis cela activera en quelque sorte son statut de mot clé. En C-Sharp. Sachez que les erreurs que nous recevons entourent ce signe. Et il essayait de générer , je crois qu'il essayait juste d' être intelligent, et il s'est perdu en cours de route, non ? Donc, tous ces signes ici, au lieu des expressions lambda, ne sont pas des caractères illégaux car il ne peut pas simplement avoir une couche d'oxyde sur laquelle nous pouvons facilement échanger tous ces signes avec un lambda jeton d'expression. J'utilise toujours Q. Tu peux utiliser C si tu veux. Peu importe, mais je voulais juste m' assurer de souligner la cause de ces erreurs, quels sont ces signes. Vous n'avez donc pas eu l'impression d'avoir fait quelque chose de mal parce que c'est probablement plus de ma faute et c'est à vous d' utiliser un mot clé comme celui-ci que c'est à vous d' utiliser un mot clé comme celui-ci sans en souligner les dangers, n'est-ce pas ? Donc, une fois que nous aurons fait tout cela, nous devrions être en mesure de créer un réseau de points. Laissez-moi donc refaire une compilation de dotnet. D'accord, et j'ai quelques avertissements, mais rien à redire à propos des bateaux. C'est quelque chose à propos de la référence nulle. Nous en reparlerons un peu plus tard. En fait, j'étais en train d'échafauder les inscriptions. D'accord. Ce sont de petits bateaux. Je suis sûr que vous l'êtes déjà. Je suis au top. Mais si je fais un CLS et que réactive cette commande pour les inscriptions. Essayons donc de regrouper les inscriptions. Et au bout de quelques secondes, le contrôleur des inscriptions et les vues sont maintenant terminés. Très bien, donc je voulais juste intervenir et au cas où vous partageriez cette difficulté, vous montrer que j'ai également eu une difficulté et qu'il existe une solution. Alors, à la prochaine leçon. 33. Ajouter à GitHub: Très bien, ce module nous a permis découvrir quelques activités discrètes. Nous avons envisagé de nettoyer l'interface utilisateur à l' aide de Bootstrap Styling Whole afin d'ajouter quelques bibliothèques tierces jQuery à notre flux de travail. Comment personnaliser les étiquettes de manière à ce qu'elles ne soient pas écrasées à chaque fois nous effectuons une activité d'échafaudage et que nous rencontrions quelques erreurs de syntaxe ensemble et que nous trouvions la solution. C'est ce qu'est réellement la programmation. Nous allons commettre des erreurs, mais il ne s'agit pas de les éviter. Il s'agit de corriger les erreurs et de triompher dans les domaines, n'est-ce pas ? À ce stade, nous avons atteint un autre point de contrôle majeur. Et ce que nous allons faire, c'est configurer notre message d'enregistrement ou de validation. Disons donc que vous avez terminé de personnaliser les vues et les éléments. Oui, je pense que c'est bien. Vous pourriez aussi probablement ajouter cela. Vous avez ajouté des cours et des inscriptions. C'est très bien, mais allons-y, engageons-nous et poursuivons dans cette voie. Rendez-vous dans la prochaine leçon. 34. Comprendre l'authentification: Très bien, les gars, dans cette section du cours, nous allons examiner l'authentification pourquoi elle est importante et quelles sont nos options. Non, l'authentification est importante lorsque nous voulons contrôler l'accès à notre application qui fait partie de notre application. Eh bien, l'authentification régit principalement l'ensemble de l'application. Ce sont donc soit certaines parties de son besoin d'authentification, soit les dortoirs. D'accord ? Ainsi, par exemple, n'importe qui pourrait accéder à la page d'accueil, non ? Et regardez et dites ce qui n'est pas ouvert. Cependant, seuls les utilisateurs connectés devraient être en mesure de voir ces liens. Et même s'ils peuvent mémoriser le lien, je sais qu'ils peuvent voir les cours slash, puis essayer de s'y retrouver. Ils devraient être tenus de se connecter ou de s'authentifier avant de pouvoir aller plus loin. Ce sont donc des éléments que l'authentification apporte , n'est-ce pas ? L'authentification exige que vous identifiiez qui vous êtes et que nous vérifiions qui vous êtes. Ensuite, il y a une autre partie appelée autorisation, ce qui signifie qu'une personne peut être autorisée à créer un cours, mais qu'elle n'est peut-être pas autorisée à supprimer le cours. La fin du cours ne sera peut-être pas autorisée, mais ils sont autorisés à consulter la liste et à examiner les détails, n'est-ce pas ? L'autorisation signifie que pouvez-vous faire dans ma candidature ? Maintenant, en termes d'options, nous avons la possibilité d'avoir notre propre système d'authentification. ASP.Net Core est livré avec sa propre bibliothèque, Identity Core, qui nous permet d'intégrer facilement et en toute transparence des services d'authentification à notre site Web. Maintenant, avec quelques commandes, nous pouvons réellement activer toutes les fonctionnalités, ou au moins 90 % des fonctionnalités nécessaires pour y parvenir. Mais il va y avoir certaines limites car il s'agit d'une application Web. Mais peut-être que le client souhaitera à l'avenir avoir une application mobile. Ou peut-être auraient-ils aimé avoir plusieurs applications utilisant le plusieurs applications utilisant même nom d'utilisateur, mot de passe et informations d'identification. Donc, à ce moment-là, vous devez voir les choses en grand. Il faut sortir des sentiers battus, non ? Dois-je créer différents systèmes d'authentification pour tous ces différents scénarios , puis essayer de tout faire fonctionner ? Ou est-ce que j'essaie de le centraliser, mais je dois quand même le maintenir à jour ? Ou dois-je simplement sous-traiter cela à un fournisseur tiers qui fournit tous ces services ? Quoi qu'il en soit, pour ce cours, nous allons choisir la dernière option, à savoir utiliser une plateforme tierce qui fait tout cela de toute façon. La plateforme que nous allons utiliser est donc désactivée. 0.0 fournit des fonctionnalités d'authentification et de sécurité utilisateur sécurisées et sécurisées. Il se présente sous la forme d'un SaaS. Cela signifie que nous n'avons pas à héberger nos propres données en cas de panne de notre base Nous avons toujours toutes les données utilisateur hébergées par cette plateforme, elle est facile à intégrer car elles contiennent de nombreux préréglages les intégrations sont de nombreuses considérations que nous prendrions en compte pour sécuriser ou renforcer celles qui ont déjà été prises en charge et avec lesquelles elles déjà été prises en charge sont très faciles à intégrer. Vous pouvez donc créer un compte en utilisant off zero, donc zero.com, puis vous pouvez simplement vous connecter avec votre compte GitHub car vous devriez déjà avoir un compte GitHub et la mise en route est gratuite. Et dans la prochaine leçon, nous verrons quelle est la prochaine étape. 35. Inscrivez-vous pour Auth0: Très bien les gars, donc je suppose que vous êtes déjà allés de l'avant et que vous vous êtes inscrits. Si vous utilisez votre compte GitHub ou l'une des autres icônes sociales déjà créées, créez vos colonnes manuellement. Nous devrions tous nous retrouver sur un écran comme celui-ci. Cela ne commence pas. La première chose qu'ils voient est donc intégrée à zéro dans votre application. Ensuite, nous pouvons continuer et créer une application. Maintenant, ils vont se demander quel type d' application allez-vous créer ? Cela montre donc la gamme de support qu'ils offrent, n'est-ce pas ? Parce que si nous n'étions pas censés créer notre propre authentification pour tous ces appareils, cela pourrait entraîner de lourdes dépenses de maintenance. Vous voulez donc toujours choisir vos batailles. Vous voulez toujours vous assurer de prendre la meilleure décision pour votre client et pour le projet en cours. Donc, de ce point de vue, nous pourrions aller de l'avant et voir que nous créons un ordinateur mobile ou une interface de ligne de commande basée sur applications d'une seule page à l'aide de l'un de ces frameworks de spa. Faisons-nous notre application Web habituelle en utilisant un framework de développement traditionnel pour le Web ? Ou faisons-nous une CLI ou des démons ? Je pense donc que pour celui-ci, nous voudrions certainement utiliser Web normal car nous voyons asp.net dans la liste. Ensuite, nous pourrons lui donner le nom. Disons simplement que c'est une gestion scolaire. D'accord. Ensuite, nous pouvons aller de l'avant et créer. Maintenant, la prochaine chose qu'ils me demandent, c'est me dire quelle technologie utiliser, n'est-ce pas ? Voici donc une plus grande liste de toutes les technologies possibles que nous pourrions utiliser en fonction de notre sélection. Mais bien sûr, nous utilisons asp.net Core. Et nous choisirons la version en trois points de l'outil, car à partir de trois, tout était en quelque sorte standardisé. Nous pouvons donc continuer et sélectionner celui-ci. Et non, ils nous donnent cet identifiant client et nous pouvons passer revue différents paramètres et ils nous montrent même comment procéder à l'intégration , d'accord, et voici l'assistance. 3.1. 565 est également compatible avec la version 6.7, fonctionne parfaitement ensemble afin que nous puissions définitivement poursuivre ce que nous faisons ici. Donc, si nous faisons simplement défiler le guide pour savoir exactement ce que nous devons faire, obtenez les clés de votre application. Une fois que vous vous êtes inscrit, vous devez accéder aux paramètres des applications, puis vous pouvez continuer à configurer certaines choses. Très bien, commençons par passer aux paramètres de l'application et nous devons définir quelques URL, non ? Je vais donc juste l' ouvrir dans un nouvel onglet. Et puis, dans la liste, vous aurez probablement déjà une application par défaut et votre mise à jour vient d'être créée pour que vous puissiez sélectionner celle-ci. Il s'agit donc de notre domaine, de notre identifiant client. Nous avons besoin de ces configurations pour plus tard, mais pour l'instant, nous devons configurer notre URL. Nous avons ce que nous appellerons une URL de rappel de chargement , puis un logo de chargement demain, et ainsi de suite. Ces URL doivent utiliser l'URL de l'application. Permettez-moi de revenir à notre projet depuis notre dossier de propriétés, lawn settings.js. Nous allons emprunter cette URL. Et le format de l'URL doit être la barre oblique du mot callback. Et puis pour le logo demain, nous pourrons simplement laisser l'URL standard. Maintenant, si nous avions besoin de faciliter plusieurs URL de rappel, par exemple, cela indique où nous en sommes en développement. Ensuite, nous aurons peut-être un environnement de mise en scène, un environnement acuité et l' environnement de production proprement dit. Nous allons avoir plusieurs de ces URL pour la même application, non ? Nous pouvons donc simplement les séparer par une virgule et chacun représentera simplement l'URL selon les besoins. Donc tant que nous y sommes, nous pouvons le laisser comme ça. Après avoir défini ces valeurs, assurons-nous de descendre ici et de cliquer sur Enregistrer les modifications. Maintenant, une fois cela fait, nous voulons continuer et ajouter les fichiers de configuration ou ces fichiers clés spécifiques à notre application. Nous allons donc revenir au code Visual Studio. Cette fois, nous allons accéder aux paramètres de notre application, puis nous pourrons créer une nouvelle section. Et je vais juste le faire sur un chargement d'hôtes et nous annulerons cela à zéro. Et puis cette section aura deux clés, elle aura un domaine. Laissez-moi saisir mon domaine rouge. On y va. Et cela va avoir une valeur. Ensuite, nous allons passer à l'identification du client. Ce sont donc des valeurs qui aideront zéro à savoir quelle application fait une demande. Ces valeurs nous sont donc données ici. Très bien, c'est notre domaine, c'est notre identifiant client. Je vais donc emprunter cette valeur de domaine et la coller là-bas. Et je vais emprunter cette valeur de centralité, la coller ici. Maintenant que nous l' avons, nous devons intégrer le package NuGet, non ? Laissez-moi donc arrêter l'application en cours d'exécution ici et laissez-moi tout effacer. Nous avons donc besoin du package dotnet add, et nous ajoutons. Authentification par points ASP NET Core sans point zéro. Ainsi, lorsque nous faisons cela, nous lui donnons quelques secondes et nous savons qu'il est installé, nous pouvons passer à l'étape suivante. Donc, avant de passer à la diapositive suivante, je voulais juste souligner que tout ce que je vois est en fait documenté ici. Donc, entre ce que je vois et ce que voit ce document, nous faisons la même chose, n'est-ce pas ? C'est donc une étape que nous venons de franchir. Le package installé serait si vous utilisez Visual Studio et que vous utilisez le gestionnaire de packages NuGet , où ce n'est pas le cas. Nous utilisons donc le package dotnet add, semble-t-il vieux com, non ? La prochaine chose que nous voulons faire est d'ajouter à nos services les configurations que nous savons que nous allons utiliser à zéro. Non. La syntaxe ici est un peu différente, et c'est principalement parce que c' est vraiment pour dotnet Core 3.1, 56.7 ont tous un program.cs d' apparence différente, mais c'est le même concept, non ? Nous pouvons donc l'emprunter, accéder à notre projet goto dans notre fichier program.cs. Et permettez-moi de faire un petit zoom arrière pour que vous puissiez le voir un peu mieux. On y va. Permettez-moi de fermer ce terminal à l'intérieur des services juste au-dessus contrôleurs AD avec des vues que je souhaite ajouter et extraites de l'exemple. Maintenant, il y a évidemment une erreur car ce ne sont plus des services. Il s'agit désormais de Builder Point Services, mais c'est la seule différence majeure. Ensuite, nous pouvons ajouter les instructions using pour cette bibliothèque manquante où nous avons une configuration et où il ne sera pas question de configuration par points du générateur Je peux donc simplement remplacer ces deux références de devis de configuration. On y va. Maintenant, il va falloir examiner la configuration et trouver, trouver la section zéro, puis utiliser la valeur booléenne. Et puis il en va de même pour la clé client. Enfin, nous voulons ajouter l'authentification. Nous voulons donc ajouter le middleware qui prend en charge l'authentification. avons donc déjà un qui prend en charge l'autorisation. Je vais juste le dupliquer et utiliser celui du haut pour dire utiliser l' authentification et tout le reste. C'est très important. commande est importante car, dans le pipeline, nous devons nous authentifier avant de demander une autorisation. Souvenez-vous, cela signifie me dire qui vous êtes, puis celui-ci signifie « OK », que pouvez-vous et pouvez-vous faire ? Nous ne voulons pas commencer à déterminer ce que vous pouvez et ne pouvez pas faire avant de déterminer qui vous êtes, n'est-ce pas ? C'est donc très important pour le sol. Très bien, maintenant que nous avons terminé l'enregistrement du service et que nous connaissons la configuration du middleware d'authentification. Passons à la connexion. Maintenant, ils nous donnent un exemple de contrôleur de compte, non ? Je vais donc simplement copier ce bloc de code , revenir à notre code Visual Studio. Et dans le dossier des contrôleurs, je vais créer un nouveau fichier qui ne veut pas l' appeler Cone Controller point cs. Et puis je vais juste coller. Très bien, je vais aussi lui donner un espace nominatif juste pour m' assurer que nous avons une certaine uniformité, explique contrôleurs MVC de l'application School of Management, n'est-ce pas ? Puis un point-virgule. Et le contrôleur a besoin de cette instruction d'utilisation pour cela. Très bien, maintenant nous avons un contrôleur à cône et ce contrôleur d'icônes sera l'endroit à partir duquel la connexion sera invoquée. L'URL de retour signifie essentiellement que chaque fois que vous vous connectez, revenez à la page d'accueil. Mais ici, nous disons que les propriétés d'authentification var sont égales à la nouvelle authentification de connexion sur Properties Builder. Et puis cela indique que nous sommes passés à un lecteur avisé après ma connexion, et ainsi de suite, non ? C'est donc cette URL de retour. Donc, si tu voulais qu'ils aillent ailleurs, tu pourrais le faire. La plupart du temps, lorsque des personnes cliquent sur les boutons de connexion d'une certaine page, c'est l'URL de cette page qui apparaît ici. Il s'agit donc de la valeur par défaut aucune URL de retour n'a été donnée, elle redirigera simplement vers celle-ci. Sinon, nous redirigerons toujours vers cette URL de retour. Ensuite, nous allons voir des problèmes contextes UP qui mettent au défi de relever ce défi, async vient avec ou sans point, authentification par points ASP NET Core, référence à la bibliothèque. Et puis à peu près, il s'agit simplement configurer le schéma d'authentification, qui provient de cette classe de constantes, qui provient également de cet espace de noms. Et nous transférons les propriétés en conséquence. Très bien, une fois que cela se produira, cela nous redirigera vers une pêche à zéro. Il va donc passer de notre application à cette application, qui est entièrement nulle, charger l'utilisateur pour s'authentifier, puis le renvoyer. Et puis il programmera le lecteur à cette URL de retour. La prochaine partie de l'application ou cette configuration à laquelle je veux faire attention, nous pouvons faire le profil utilisateur. Je pense que ce serait une bonne idée également. Nous pouvons donc le copier car il se trouve dans le même contrôleur d'icônes. Remarquez bien qu'il possède cette autorisation en matière de notation. Permettez-moi de le copier et de le coller dans notre contrôleur d'icônes existant. Ensuite, je vais juste me déconnecter et le copier également. Ensuite, nous pourrons examiner exactement ce que nous examinons. Ici. Autorise une annotation qui indique essentiellement à cette action qu' elle nécessite qu'un utilisateur authentifié puisse y accéder. Non, il manque des instructions depuis la Terre, donc des points de contrôle et ensuite nous obtenons cela en utilisant une instruction. Pour les types 3M, il manque également des instructions d'utilisation. Alors les réclamations, que sont les réclamations ? Les réclamations sont des informations incluses dans ce que nous appelons un jeton. Très bien, alors laissez-moi vous expliquer cela. Lorsque nous passerons à zéro et que nous nous authentifierons, ils renvoient un jeton. Ce jeton sera juste un bloc de chaîne codée contenant toutes les informations vous concernant. Eh bien, toutes les informations pertinentes, je l' espère, rien de sensible. C'est pourquoi il est important de faire appel à ces autorités sur le sujet. Juste pour comprendre comment vous vous y prendriez pour créer le vôtre. Parce que tout ce que tu n'as pas envisagé, ils l'ont déjà fait. All Zeros est donc l'une des principales autorités sécurité des utilisateurs, n'est-ce pas ? Ce que je vois ici, c'est que le jeton renvoyé est utilisé par notre application pour indiquer que vous êtes authentifié. La présence d'un jeton signifie donc que vous êtes authentifié. Sachez que le contenu de ce jeton inclura votre nom en fonction de ce que vous avez fourni lors de l'enregistrement de votre adresse e-mail, même une image de profil si vous l' importez sur ce type de contenu. Ces affirmations proviennent donc toutes du Tolkien, et ce ne sont que des bribes d' informations qui indiquent qui vous êtes, à quoi vous servez, ce que vous pouvez et ne pouvez pas faire. Ainsi, même les rôles et le moi peuvent être intégrés dans cette boîte à outils. Non, l'autorisation signifie encore une fois que vous ne pouvez pas atteindre ce point de terminaison à moins d'avoir un jeton. Ce qui signifie que si j'essaie de naviguer pour me connecter, c'est très bien. Si j'essayais de naviguer vers d' autres parties de mon set, c'est très bien. Si j'essaie de naviguer ici avec autorisation activée, je ne peux pas. Cela me forcera à me connecter. Même chose pour la déconnexion. Cela m'obligera à me connecter ou à être connecté afin de pouvoir me déconnecter si je ne suis pas connecté. Ensuite, une fois le logo créé, nous les redirigerons vers la page d'accueil. C'est bon. Le panneau en haut se termine donc en deux parties. Nous avons les sandales asynchrones, qui envoient vraiment les contextes dans lesquels nous sommes connectés à zéro. C'est pourquoi c'est le schéma d'authentification qui est utilisé avec le même ancien. Cela ressemble beaucoup au défi de voir où nous utilisons le même schéma d'authentification, n'est-ce pas ? Le supernode suivant n'est plus dans le cookie désactivé. Parce que ce qui se passe, c' est que lorsque le jeton est transmis à zéro, il est stocké dans un cookie localement sur notre site Web, n'est-ce pas ? Ce sera alors manière établie par laquelle l'application saura qu'une personne est authentifiée. C'est pourquoi nous utilisons l'authentification par cookie par défaut. Ainsi, lorsque vous vous déconnectez, nous devons vous attribuer un identifiant. Laissez asp.net Core gérer n'importe quelle connexion Aesop pour le système d'authentification des cookies. Très bien, c'est donc à peu près ce que font ces deux lignes. Mais la combinaison ou le résultat combiné est que vous n' aurez plus de jeton valide, vous n'aurez plus de session RBC valide et en tant qu'utilisateur authentifié, et vous serez redirigé vers la partie connexion, désolé pour la page d'index. Maintenant, si je reviens à la documentation, vous verrez que nous en sommes à la fin. Rien ne dit : OK, quelle est la prochaine étape ? Vous pouvez donc commencer à examiner des éléments tels que l'ajout d'une autorisation basée sur les rôles. Ils disposeront donc de nombreux exemples que vous pourrez examiner pour déterminer comment vous pouvez les intégrer dans votre application pour nœud. Ou nous voulons tester et nous assurer que nous pouvons forcer les utilisateurs à se connecter. Je vais donc préciser que pour le contrôleur du cours, vous devez être autorisé, disons, à créer l'index. Nous avons les détails, mais je vais placer un indicateur d'autorisation ou une notation juste au-dessus de la création. Vous devez être autorisé. Et puis nous pouvons contrôler les points manquants en utilisant une référence. Ensuite, dans la prochaine leçon, nous allons tester cela et voir comment cela fonctionne. 36. Authentification de test: Très bien, maintenant j'ai mon application en cours d'exécution. Et ce que nous voulons faire, c'est tester pour voir si notre authentification fonctionnera comme prévu et à quoi ressemblera l'ensemble de l' expérience utilisateur. Je peux donc naviguer sur le site Web. Je veux dire, je ne verrouille quelques endroits et un endroit où je me suis assurée que c'est beaucoup lors d' une leçon précédente était créer des cours à partir de quatre. Ainsi, lorsque je clique sur Créer, je ne quitte pas mon site Web. C'est donc ce domaine qui m' a été donné, non ? C'est le domaine, bien sûr, lorsque nous payons et que nous souscrivons à un plan payant avec osteo Weekend, personnalisez ces choses. Mais pour l'instant, c'est très bien. Cela permet désormais à un utilisateur de fournir votre adresse e-mail, mot de passe ou de continuer à utiliser Google. Ils peuvent même s'inscrire. Alors laissez-moi voir à quoi cela ressemble une fois qu'ils s' inscrivent. Pour vous inscrire. Et encore une fois, tout cela peut être personnalisé. Vous pouvez modifier le logo, nous pouvons étendre ce formulaire d'inscription. Mais la plupart de ces choses sont liées au paiement du service. Mais en général, vous n'avez besoin que d'une adresse e-mail et d'un mot de passe. Et encore une fois, c'est très pratique car il possède l'autorisation sociale ou authentification sociale , une sorte de grosse boîte. Ou nous pouvons ajouter d'autres plateformes sociales, Microsoft, LinkedIn, GitHub, etc., tout dans cet écran. Et nous pouvons le faire sans écrire trop de lignes de code supplémentaires. C'est donc très pratique. Allons-y et je vais utiliser l'un de ces tests, les adresses e-mail que j'ai. Je vais juste dire SEM. Sem et mon mot de passe spécial , Here's wins, VP, Essence W or d one. Vous pouvez voir ici que toute cette validation est en cours pour moi. Je peux cliquer sur Continuer, puis ils s'assureront simplement tester et de voir si vous souhaitez autoriser cette application à accéder à votre profil. Je vais dire oui. Et j'obtiens cette exception. Je sais, vous me connaissez, que je ne vais pas cacher les exceptions parce qu'il est important que nous le fassions et que comprenions pourquoi nous obtenons certaines choses. Maintenant, ce qui se passe ici, c'est qu'il parle de ce champ de corrélation. Et je pense juste que c'est principalement parce que nous utilisons le protocole HTTP. Le protocole HTTPS est préféré lorsque nous faisons ce genre de choses. D'accord ? Donc, ce que nous allons faire, c'est revenir à notre configuration d'authentification zéro pour le maximum. Et juste au cas où vous ne vous rappelleriez pas comment vous y rendre depuis votre panneau de démarrage. Vous pouvez en fait, eh bien, vous pouvez simplement accéder aux applications, puis aux applications ici. On y va. Et puis tu choisis ta tasse. D'accord ? Ensuite, nous allons ajouter les URL HTTPS à notre identifiant et à notre rappel. Très bien, donc l'URL HTTPS, si vous revenez aux paramètres de vos poumons, se trouve sous le profil HTTPS , vous trouverez les deux URL , l'une HTTPS et l'autre HTTP. Vous pouvez donc simplement copier les deux et les coller. Assurez-vous de mettre Slash Call Buck. Et au lieu d'un point-virgule, mettez une virgule selon les instructions juste après l'authentification de l'utilisateur pour utiliser uniquement l'une des URL. Et ils constatent qu'ils préfèrent le HTTPS. D'accord ? Je vais donc mettre les deux, mais vraiment, nous voulons que le HTTP S1 soit utilisé. Et il en va de même pour le logo. D'accord ? Et puis n'oubliez pas qu'une fois que vous aurez enregistré ces modifications, la notification vous indiquera d'attendre environ 30 secondes. Ce que je vais faire, c'est dans notre réseau de points, dans notre code VS, nous allons exécuter avec le profil HTTPS. Je pense que nous l'avons fait plus tôt disant dotnet run, puis en disant tiret, tiret. Laisse-moi juste effacer l'écran pour qu'il soit un peu plus clair. Nous voyons un tiret sur Dotnet Run, un profil de lancement avec tiret. Je sais que nous utilisons le HTTPS. Donc, une fois que nous l'avons fait, appuyez sur Entrée. Nous pouvons maintenant exécuter notre application à partir de l'un ou l'autre. Mais le middleware contenu dans le fichier program.cs forcera toujours la redirection HTTPS de toute façon. Allons-y et refaisons le même test en utilisant le HTTPS. Vous remarquerez également que même si vous avez cette erreur, vous êtes déjà authentifié car si vous essayez de revenir sur cette page, vous pourrez y accéder. Cela signifie donc que vous parlez est présent. Et si vous regardiez la console ou la fenêtre du terminal, vous verrez que Tolkien est venu à Buck et toute cette poignée de mains avec OpenID. All Zeros fournit donc les services OpenID Connect. Et c'est comme une poignée de main entre votre site Web. Et puis le résultat final de cette prise de contact est que votre application reçoit un jeton et qu'aucun nœud n'est authentifiée. Malheureusement, nous n'avons pas encore configuré le bouton de déconnexion Nous sommes donc authentifiés sans aucun moyen de nous authentifier. Donc, ce que je vais faire, c'est prendre cette URL et la tester à nouveau Nous utilisons notre fenêtre privée, donc techniquement, nous arrivons à zéro, aucune authentification n'a eu lieu. Nous suivons des cours, nous pouvons voir les cours que nous pourrions créer de nouveaux. Ensuite, nous sommes obligés de nous connecter ou de nous inscrire. Je vais juste utiliser les mêmes cônes que ceux que nous venons de créer admin chez SEM avec un mot de passe et cliquez sur Continuer. Et voilà, il n'y a pas d'erreur et nous sommes authentifiés et redirigés vers notre pH sécurisé. Il est donc bon de voir ce qui peut mal tourner et de comprendre car il faut un peu de finesse pour s'y habituer à OpenID Connect . Mais grâce à des services tels que Auth Zero vous éviterez de nombreuses complications. L' authentification est assez facile à mettre en place et à utiliser. ne nous reste plus qu'à terminer nos fonctionnalités. Nous allons mettre cette page de profil ou une petite partie ici qui indique que lorsque vous êtes connecté, vous utilisez donc votre adresse e-mail et affichez un bouton logo. Et l'adresse e-mail associée à la page de profil que nous avons créée. C'est donc ce que nous allons faire ensuite. 37. Configurer les pages connexes: Salut les gars. Dans cette leçon, nous voulons modifier ou modifier une autre barre afin d'avoir nos boutons supplémentaires. Nous voulons donc un bouton qui indique connexion, déconnexion, et un bouton qui nous permet de voir quel utilisateur est connecté à ce moment-là, n'est-ce pas ? Revenons donc à notre projet. Et ce que je vais faire, c'est créer une nouvelle vue partielle. Et l'avantage des partiels, c'est qu'ils peuvent être partagés entre plusieurs thèses et injectés, n'est-ce pas ? Nous allons donc créer notre première partie ensemble. Je vais donc cliquer avec le bouton droit de la souris et créer un lien de soulignement, code HTML CSS à points partiels. Et dans ce fichier, nous allons faire quelque chose de simple comme celui-ci. Donc, tout ce que j'ai ici, c'est une liste non ordonnée avec une barre de navigation de classe, non ? Donc, avec Bootstrap, lorsque nous voulons avoir barre de navigation vers la gauche et une section vers la droite, ils ont une apparence très différente. Ce qui peut arriver, c'est que nous pouvons établir une autre UL et lui attribuer la même classe, navbar-nav. Mais bien sûr, toutes les autres classes n' aiment pas les films, les Grow et tout ce que contiendraient les ensembles originaux d'éléments de la barre de navigation. Cela lui permettrait en fait de s' aligner correctement le long de cette barre de navigation. Donc, dans cette nouvelle liste non ordonnée, je vais avoir une instruction if. Je suis en train de vérifier si l'identité d' un utilisateur authentifié ressemble à un super objet qui représente ce que nous appellerons un principe de réclamation. Les applications asp.net Core ont donc le concept d' un principe utilisateur ou d'un principe de réclamation, qui est une combinaison de toutes les affirmations dont nous avons discuté. La présence de tous peut être combinée pour nous donner un IPL propre, puis le principe des disclaims peut être décomposé pour les différents éléments d'information. Nous voyons donc ici que la personne est l'objet qui revendique le principe. Y a-t-il une personne authentifiée ? Représente-t-il une personne authentifiée ? Il est toujours présent, mais sans prétendue inflammation, ce serait comme un objet vide. Mais cela signifierait que la personne n'est probablement pas authentifiée si nous n'avons aucune information. Nous pouvons donc nous fier à cette instruction if car tout cela est configuré au cours du flux d'authentification que nous avons déjà connu. Si la personne est authentifiée, je souhaite accéder aux objets. Le premier est, et bien sûr, souvenez-vous que nous devons voir un autre lien, d'abord l'élément de navigation LaS , puis la classe est lien de navigation et le tiret de texte. Comme nous utilisons une barre de navigation noire, nous n'avons même pas besoin de spécifier la zone. J'ai vraiment copié et collé, mais c'est très bien. Nous allons voir si nous allons accéder au compte et au profil. Et ce que nous montrons, c'est l'identité de l'utilisateur, le nom du point. Ce nom est l'origine de la réclamation. L'outil peut soustraire les femmes au principe de réclamation qui aurait été mis en place lors de notre authentification. Très bien, c'est donc un moyen simple et pratique de connaître le nom d'utilisateur. Eh bien, dans ce cas, utilisez-les comme étant identiques l'adresse e-mail de l'utilisateur authentifié. Nous l'affichons donc et lorsque nous cliquons dessus, nous devons accéder à sa page de profil, que nous n'avons pas encore créée. Ensuite, nous avons le suivant, qui est le bouton du logo. Donc, si la personne est authentifiée et que nous voulons lui permettre de se déconnecter. Sinon, allez-y et affichez un bouton de connexion, qui indiquera leur contrôleur Cone et l'action de connexion. Et puis, bien sûr, cela les redirigerait vers le service d'authentification tiers. Maintenant que nous avons cette configuration partielle de connexion, nous devons l' ajouter à la barre de navigation dans le point de mise en page CSS, HTML. Css. Nous pouvons ajouter que nous utilisons dans cette seule ligne et c'est ce qui rend partiel. C'est tellement cool. Vous pouvez créer cette section statique des sites, trop de vues statiques et vous pouvez simplement injecter partout où vous en avez besoin. Juste cette ligne, nous voyons juste que le nom partiel équivaut à la connexion partielle, cette obligation indiquera qu'elle doit rechercher avec assurance n'importe quel fichier portant ce nom, et puis elle affichera cette section juste là. Notez que c'est là que se termine la barre de navigation d'origine. Ensuite, nous commencerons notre partie partielle dans laquelle nous avons défini une autre section de la barre de navigation. Laissez-nous donc passer en revue cela. Voici donc à quoi ressemble l' application. Nous avons donc les quatre URL originales. Je sais que nous avons le login sur la droite. Très bien, ça a l'air bien. Si nous cliquons sur « Se connecter », nous allons les parcourir ici. Ensuite, nous pouvons procéder à l' authentification en utilisant l'utilisateur avec lequel nous nous sommes déjà inscrits. Et puis non, cela me montrera que je suis connecté en tant administrateur chez SCM et que je peux me déconnecter si je clique sur Déconnexion quoi cela sert-il ? Ça me connecte. Nous le savons tous. Ce que nous devons faire, c'est configurer cette page de profil pour qu'elle aille réellement quelque part. Parce que si je clique sur cette URL, cela va me donner même erreur que celle que nous avons vue la première fois lorsque nous n'avions pas de vue. Alors allons-y. Et configurez cela. Très bien, donc de retour dans notre contrôleur d'icônes, nous avons notre option de profil. Et ce que nous faisons, c'est rétablir le point de vue qui devrait exister à un moment donné avec un nouveau type que nous appellerons anonyme. Il s'agit donc d'un type anonyme ou d'un objet anonyme. Il n'existe aucun moyen réel de déterminer quel type de données est envoyé. Vous pouvez voir ici que c'est juste un, est-ce que c'est juste anonyme. Qu'est-ce qu'un ? Nous allons maintenant examiner le concept de modèle de vue, n'est-ce pas ? Donc, je vais commencer par créer une classe Nous avons déjà un concept de modèle de vue avec le modèle de vue d'erreur Je vais créer un nouveau fichier. Je vais appeler ce modèle d'affichage du profil utilisateur. Dans certaines conventions de dénomination, les gens disent simplement VM et il s'agit d'un nouveau fichier de classe. Donc, point cs, nous commençons par notre espace de noms. Et ce sont les modèles point MVC point de l'application de gestion scolaire , n'est-ce pas ? Point-virgule. Ensuite, nous avons un cours public que nous appelons un modèle d'affichage du profil utilisateur. Maintenant, cette classe va avoir les différents points de données que nous avons l'intention de montrer. Et l'avantage modèles de visualisation, c'est qu' ils sont vraiment utilisés pour contrôler ce que nous affichons à l'écran. Il s'agit d'un concept puissant, en particulier lorsque nous voulons arrêter d'afficher tous les champs de nos classes de données sur cet écran, nous créerions des modèles de vue spécifiques à chaque vue et puis disposez d'une logique qui convertit le modèle de vue en classe de données et vice versa. Je n'aborderai pas tout cela dans ce cours, vous pouvez consulter mon cours, terminer le développement d'asp.net et d'Entity Framework Core, où je vous apprends toutes ces dynamiques et abstractions pour cela, nous voulons juste être opérationnels et comprendre comment créer une application simple avec un minimum d'effort, n'est-ce pas ? Pour ce modèle de profil utilisateur, je vais définir des propriétés qui reviendront à ce que je m'attends à envoyer depuis le profil. Et laisse-moi vraiment essayer ça. Je voulais essayer de tromper le système. Je vais parler du modèle d'affichage du profil utilisateur ici. Très bien, incluez la référence manquante. Et puis, bien sûr, rien de tout cela n'existe. Je vais donc regarder ça. Je peux juste voir le nom de la variable generate, nom de notre propriété dans la classe dans laquelle j'aurais aimé qu'elle se trouve. que je voulais faire. Ensuite, allons voir le cours. Et nous y voilà. C'est comme ça qu'on triche, non ? Au lieu d'essayer de tous les taper manuellement, je vais juste profiter de la situation qui se présente. Je souhaite donc renvoyer un nouveau modèle de vue. C'est donc un type fort. Maintenant, je sais exactement le type de données renvoyé. Et puis ce sont les propriétés qui s'y trouvent. Ils n'y étaient pas avant. J'ai donc autorisé Visual Studio Code à les générer pour moi. Très bien, donc une fois cela fait, vous remarquerez qu' ils sont également générés avec ces ensembles internes d'annotations, ce qui signifie que cela ne peut pas être défini depuis n'importe où en dehors de l'initialisation, ce qui me convient. D'accord ? À ce moment-là, nous ramènerons ce modèle de vue à ce point de vue. Ce point de vue n'existe pas et nous n'allons pas être des échafaudages. Nous devons le faire manuellement. Passons donc aux points de vue. Et la première chose dont nous avons besoin, c'est d'un dossier qui renvoie à notre manette, n'est-ce pas ? affichages cliquent donc avec le bouton droit de la souris, cliquent sur Nouveau , puis nous voyons, désolé , pas Nouveau fichier, Nouveau dossier, dossier. On y va. Et puis nous l'appelons cône parce que c'est le nom de la manette. Ensuite, à l'intérieur d'un cône, à l'intérieur de ce dossier, nous pouvons maintenant créer un nouveau fichier que je vais appeler Profile point CSS HTML. Pourquoi un profil ? Parce que le profil doit être redirigé vers l'action appelée profil. Nous avons donc vécu cela, nous l'avons déjà fait avec qui et à peu près. La seule chose, c'est que nous créons également notre propre dossier. Maintenant, pour ce qui est du contenu de cette page, je ne vais pas essayer de faire preuve de créativité. Je vais juste regarder l'échantillon en arrière. Donc, si je reviens au tableau de bord de gestion entièrement zéro, me souviens qu'au début, nous aurions pu le télécharger sous forme sampler pour consulter l' exemple sur GitHub, n'est-ce pas ? Quelqu'un qui vous sauvera sur GitHub va lancer le projet sur GitHub. Et puis, quand je reviens à la semaine, commence un grand exemple de slash, de slash d' accueil, de profil de barre oblique, de style CSS HTML. Nous allons voir la vue qu'ils ont utilisée dans l'échantillon. Je pense que c'est suffisant pour que nous puissions commencer. D'accord ? Donc, nous voulons que ce soit sexuel, je veux dire, vous pouvez tout prendre pour que nous puissions simplement copier tout le contenu. Et puis, bien sûr, nous devons modifier la référence de l'espace de noms ici, car ce modèle d'affichage du profil utilisateur se trouve dans un espace de noms différent, mais tout le reste peut rester le même. Donc, une fois cette opération terminée, c'est à cela que nous nous retrouvons, non ? Donc, dans ce fichier HTML CSS à points de profil, j'ai un modèle puis un espace de noms par rapport à endroit où se trouve réellement mon modèle de vue. Et puis j'ai le même titre, puis tout le reste est pareil. fois tout cela fait, je vais actualiser mon application et y jeter un coup d'œil et c'est ce que j'obtiens. Très bien, donc c'est l'administrateur du profil utilisateur chez SCM, c'est l'adresse e-mail. Et ce serait la photo de profil provenant d'Auth Zero. C'est donc ce que nous entendons par nettoyage. Cette inflammation s'est produite à un moment donné, mais chaque fois que l' utilisateur s'authentifie, cette inflammation figurera dans les informations relatives à sa réclamation. Très bien, vous pouvez maintenant commencer et essayer de désactiver différentes parties de votre application, car tout est une question de sécurité. Et il s'agit de savoir qui peut faire quoi et pourquoi. 38. Touches de finitions: Très bien, les gars, dans cette leçon, nous allons nettoyer un peu notre interface utilisateur. Et je vais commencer par la mise en page pour payer. Donc, dans notre mise en page, qui est partagée, voilà, je ne veux pas que quelqu'un qui n'est pas authentifié voie l'un de ces liens. Tout d'abord, je ne pense pas que le lien de confidentialité doive plus figurer dans la barre de navigation. J'aurais probablement plus envie de le dire. C'est déjà fait ici, dans le pied de page. Quelqu'un va le supprimer de la barre de navigation supérieure. Très bien, et cela est supprimé, alors je ne veux pas qu' un utilisateur authentifié puisse voir la section Gestion des cours, des professeurs et des étudiants. Devinez quoi ? Je peux utiliser les instructions if que nous avons dans la partie de connexion ici. Je peux voir si le point d'identité de l'utilisateur est authentifié. Alors je veux cette section. Je vais donc simplement mettre toutes ces balises LI dans cette instruction if. Cela montre à quel point il est facile de rendre notre affichage dynamique en fonction l'état authentifié de la personne. Nous pouvons masquer les options du menu et les manipuler selon que cette personne est connectée ou non. Et nous pouvons également aller de l'avant et verrouiller certaines de nos manettes. Donc, par exemple, si nous voulons vraiment que personne ne le voie, mais qu'il serait toujours capable de naviguer s'il connaissait l' URL juste là, il serait toujours en mesure de dire une barre oblique sur le site les cours slash index et y arriver. Nous voulons donc non seulement verrouiller l'accès, désolé pour l'équipage, mais tout verrouiller ici. Pour le contrôleur du cours, on peut simplement mettre un auteur. J'ai commencé par le haut de toute cette manette. Non, personne ne peut s'approcher ici sans y être autorisé. Très bien, nous pouvons donc le faire avec toutes les manettes pour lesquelles nous voulons ce type de restriction de type boule bleue. Je vais donc le faire pour la gestion des cours, et je peux le faire pour les inscriptions. Et bien sûr, nous devons ajouter des déclarations manquantes. Permettez-moi donc de retourner aux cours et de le faire. On y va, on peut quitter la maison. Et puis parfois, ce que vous voulez faire c'est être très explicite fait que ce contrôleur en particulier peut autoriser l'anonymat. Il y a donc en fait une annotation ici qui dit « autoriser l'anonymat », qui signifie que tout ce qui se trouve à l'intérieur de cette manette, ou si vous le placez au-dessus d'une action, signifie que n'importe qui peut accéder à cette adresse particulière sans avoir besoin d'autorisation. C'est le paramètre par défaut, mais vous voulez parfois être encore plus explicite. Très bien, nous allons donc autoriser et les étudiants, nous autoriserons également non, aucun accès non autorisé n' est autorisé à aucune de ces routes dans ces contrôleurs. Et même dans ce cas, même si nous verrouillons l' intégralité de la manette, mais que nous voulions qu'une seule soit accessible, nous pourrions facilement la dépasser et dire, bonjour, Anonymous, j'adore au-dessus du action, c'est-à-dire, et autoriser l'anonymat. Ces artistes sont donc des choses que vous pouvez faire pour contrôler l'accès ? Je n'ai pas ajouté de liens supplémentaires. Vous l'avez probablement déjà fait, donc vous n'êtes pas obligé de le faire. Mais je n'ai pas participé au cours. Laissez-moi voir la gestion de l'herbe ici. C'est pour le contrôleur de classes. D'accord. Et je n'ai pas saisi d'inscriptions, et je n'ai probablement même pas à saisir les inscriptions directement parce que nous allons écrire des méthodes personnalisées pour les tableaux des inscriptions parce que c'est un peu par rapport à la gestion de classe. Je pense donc que c'est une bonne loi à avoir. Ainsi, à notre retour, nous vérifierons simplement que nous avons franchi une nouvelle étape. 39. Ajouter à GitHub: Très bien les gars, maintenant que nous avons frappé un autre musulman, allons-y et procédons à tous nos changements. Nous pouvons voir le zéro ajouté et l'interface utilisateur. D'accord ? Ensuite, nous pouvons nous engager et faire pression. Et je te verrai dans la section suivante.