ASP. Desenvolvimento do NET Core 7 MVC

1. Apresentação: Olá e bem-vindo a este curso, desenvolvimento multiplataforma SP dotnet Core. Sou seu instrutor para voir Williams e sou engenheiro de software e palestrante há mais de uma década. Neste curso, seguiremos algumas etapas simples que podem ser replicadas em qualquer plataforma. Isso mesmo. Você fará este curso se estiver usando Mac OS, Linux ou Windows. E você poderá acompanhar e criar um aplicativo asp.net Core MVC, aprenderá coisas como o Entity Framework Core e adotará uma abordagem inicial de banco de dados, que estávamos analisando Bootstrap five e bibliotecas jQuery. Faremos a integração com o auth zero, que é um provedor do OpenID Connect. E ao fazer tudo isso, você se familiarizará com o GitHub. Saiba que as ferramentas de desenvolvimento que usaremos são muito importantes, são muito importantes, dispostas a algo mais sombrio, para que possamos hospedar uma instância do SQL Server independentemente do nosso sistema operacional, mesmo que o SQL O servidor foi projetado principalmente para distribuição do Windows. Também usaremos o Visual Studio Code como seu Data Studio e a CLI dotnet, , mais uma vez, trabalharemos em qualquer sistema operacional. Saiba, só para nos concentrar enquanto estamos usando o Visual Studio Code e o Azure Data Studio. Ferramentas de desenvolvimento multiplataforma tão versáteis e muito leves, então não importa que tipo de especificações sua máquina tenha. Eles não usam tantos recursos quanto seus colegas, como o Visual Studio 2022 e o SQL Server Management Studio. Assim, você pode usar essas ferramentas em uma máquina menos potente. Eles podem ser usados novamente em qualquer sistema operacional. Eles oferecem integrações claras com vários serviços de terceiros e são poderosos o suficiente para criar qualquer coisa. Agora espero que você esteja tão empolgado quanto eu e mal posso esperar para vê-lo no curso. 2. Criar conta do GitHub: Tudo bem, pessoal, então, nesta lição, vamos passar por processo de configuração muito simples de criar uma conta no GitHub. Portanto, o github é sem dúvida a maior plataforma de codificação social. É um dos fornecedores de bens mais populares. E é de propriedade da Microsoft e é gratuito para código aberto e desenvolvimento pessoal. Você também pode ter projetos privados lá e iniciar este curso, usaremos o GitHub. Então, se esta é sua primeira vez, talvez você esteja ouvindo falar do gerenciamento de controle de fontes e do GitHub. E você realmente quer ter essa experiência. Não se preocupe, vamos usá-lo neste curso e você aproveitará essa experiência. Então, para começar, acesse github.com e, a partir daqui, você pode se inscrever. Então, estou supondo que você ainda não tenha um cone a. Portanto, se você se inscrever, receberá um formulário muito simples em que eles solicitam seu endereço de e-mail para que você possa fornecê-lo e continuar. E, na verdade, acho que você só precisa do seu endereço de e-mail e senha, então eu já tenho uma conta, mas deixe-me tentar inserir outro endereço de e-mail. E então você cria uma senha. E depois de continuar criando essa senha, eles querem um nome de usuário. Você pode criar esse nome de usuário. Deixe-me criar algo arbitrário e continuar. E então eles perguntarão se você gostaria de algumas coisas promocionais. Continuar. E eles são cheques capturados. E, basicamente, até o final de tudo isso, ele enviará um e-mail de verificação. E depois de se verificar, você pode fazer login. Então, vou entrar e mostrar como seria essa experiência. E depois de fazer login com seu nome de usuário e senha ou seu endereço de e-mail e senha, você verá uma tela semelhante a esta. Eu já tenho alguns repositórios, então você pode não ter nada à esquerda, então tudo bem. É por isso que estamos aqui. Mas você verá que eu tenho alguns repositórios. E esse é o meu perfil. Se você precisar acessar meu perfil, você sempre pode acessar github.com e cortar meu nome de usuário, que é simplesmente meu nome. E seria algo parecido para você e para qualquer pessoa que queira navegar até seu perfil todos os repositórios nos quais você trabalha depois de tornados públicos podem ser acessados. E essa é a beleza do GitHub. Isso ajuda você a contribuir com outros projetos e compartilhar seus projetos que os de outras pessoas também possam contribuir para eles. Depois de configurar sua conta, você pode prosseguir para a próxima lição. 3. Instale . SDK NET 7: Tudo bem, pessoal, então continuamos configurando nosso ambiente. E a próxima etapa é instalar as redes de pontos de um SDK. Você pode chegar aqui simplesmente acessando.net.microsoft.com ou simplesmente google.net SDK. Tudo bem, acho que é a coisa mais fácil de fazer, basta google.net. Então, tenho certeza de que o SDK e o primeiro resultado da pesquisa levariam você a esta página. Não. Dotnet seven é o lançamento mais recente no momento da gravação, no entanto, o termo padrão de lançamento, que significa que ele sairá de moda quando o dotnet eight for lançado. Também temos a versão da ferramenta de seis pontos, que é suporte de longo prazo. Então, muito do que faremos neste curso, mesmo que usemos dotnet seven, ele será mais ou menos compatível com seus seis, exceto talvez algumas frases em C nítido, conjuntos. Com certeza vou apontar onde o código será diferente entre o que o dotnet seven oferece e o que podemos fazer no dotnet six. No momento desta gravação, no entanto, o dotted seven é o melhor e mais recente, então vamos usá-lo e você pode ficar à vontade para continuar usando o dotnet seven. Então, para começar, você vai querer instalar o SDK. Agora, há duas coisas que você vai querer instalar. Você vai querer instalar o SDK para recursos de desenvolvimento. E, claro, você pode escolher seu sistema operacional adequadamente. Portanto, se você estiver em uma máquina Windows, convém usar a versão de 64 bits e escolher as versões para Mac ou Linux adequadamente. Mas, para fins de hospedagem, você também gostaria de instalar o runtime. Assim, você também pode instalar o pacote de hospedagem para Windows ou a versão apropriada com base no seu sistema operacional. Assim, você pode baixar e instalar esses dois. Dito isso, usaremos o Visual Studio Code porque nós, Visual Studio Code , somos multiplataforma. Não quero atender a todos os sistemas operacionais, aos monges, ao Mac e ao Windows. Então, usaremos o Visual Studio Code. No entanto, se você estiver em uma máquina Windows e preferir usar o Visual Studio, que é um IDE totalmente poderoso, muito , muito poderoso, você pode simplesmente ficar com as janelas e simplesmente fazer o download e instale o Visual Studio 2022, que virá com o SDK integrado. Então eu só estou jogando isso lá fora, certo? Então, se você estiver usando o Visual Studio Code, que é muito mais leve e compacto. E usaremos muitos comandos da CLI dotnet. Em seguida, você pode instalar o SDK manualmente. Se você quiser usar o Visual Studio 2022. E mostrarei como configurar o Visual Studio 2022 em uma lição subsequente, que você possa realmente pular a etapa de download do SDK. No entanto, eu recomendo que você obtenha o tempo de execução de qualquer maneira. Então, depois de baixá-los e instalá-los, e é uma instalação simples, basta clicar em Avançar, Avançar, Avançar plantados em estrelas e fechar a janela. Em seguida, você pode prosseguir para a próxima lição em que vamos configurar o Visual Studio Code. 4. Instalar o código do Visual Studio (qualquer sistema operacional): Tudo bem, pessoal, bem-vindos de volta. Então, instalamos nosso SDK e a próxima etapa é instalar o Visual Studio Code. Ou o Visual Studio Code é um IDE muito flexível e leve fornecido pela Microsoft. Além de tudo isso, é gratuito e multiplataforma, então podemos usá-lo no Mark, no Windows ou no Linux. Estou usando uma máquina Windows, então, é claro, eu gostaria de fazer o download para Windows, mas certifique-se de escolher a que é mais apropriada para, você sabe, baixar e instalar é muito fácil. Você receberá um pacote MSI que, depois de clicar duas vezes nele, iniciaremos o instalador e, após alguns cliques, ele instalará todos os binários e estará em sua máquina. E só como prévia, isso é o que você pode esperar. Você pode esperar algo assim. Já instalei isso há algum tempo e usei vários projetos. Então você pode ver que eu tenho alguns ícones que você pode não ter prontos para uso. Por exemplo, se esta é sua primeira vez, você pode não ter nada menos que recente. Mas você sempre pode iniciar Open File, Open Folder, é verdade. E eu obtenho o repositório para sua máquina. E então, ao lado, você tem a janela do Explorer. Você pode pesquisar, você pode fazer algumas coisas de controle de fonte. Você pode executar e depurar. Então você tem o Explorer e extensões remotos. E a outra coisa é que eu tenho aqui alguns outros plug-ins que eu tenho de projetos paralelos para este curso. Esses não são absolutamente necessários. Mas vou me certificar de apontar as coisas que você precisará à medida que avançarmos e como você pode configurar seu ambiente e otimizá-lo para o projeto em que trabalharemos. Então, depois de instalar o Visual Studio Code, você está pronto para começar. Ele tem muitos recursos integrados que exploraremos ao longo do caminho. No entanto, se você preferir a ideia de usar o Visual Studio, porque o Visual Studio Code exige que usemos muitos comandos de interface de linha de comando. E o Visual Studio realmente faz um bom trabalho ajudar você a clicar ao ajudar você a clicar e realizar algumas dessas coisas. Então, mostrarei como instalar o Visual Studio 2022, e isso será na próxima lição. 5. Alternativa - instale o Visual Studio 2022 (Windows e Mac): Tudo bem, pessoal, então, nesta lição, vou mostrar a vocês um fim de semana inteiro configurando o Visual Studio em nossa máquina. Visual Studio é o IDE principal. E ID é a abreviação de ambientes de desenvolvimento integrados, como o IDE principal fornecido pela Microsoft. É um IDE verbal completo. Isso nos permite fazer tudo, desde a concepção até a implementação e a entrega de nosso aplicativo. E está disponível para vários sistemas operacionais, embora vários, ou seja, Windows e Mac OS Na verdade , neste site, que é Visual studio.microsoft.com, você poderia realmente ir Também baixei o Visual Studio Code, que é o irmão mais novo multiplataforma do Visual Studio. Agora, se você quiser obter o Visual Studio, você tem três opções. Você tem a Community Edition, profissional e empresarial, comunidades gratuitas para alunos de código aberto e individuais ou para usos acadêmicos. E então, profissional e empresarial são mais para empresas ou para práticas de desenvolvimento comercial. Tudo bem? Então, a qualquer momento deste curso, usaremos apenas a comunidade porque essa é uma experiência de aprendizado para todos nós. Eles ajudam você a escolher qual ferramenta é melhor para você. E tenho certeza de que, quando anotarem ciclicamente, eles sugerirão o Visual Studio Code para Linux. Mas então, se eu escolher Mark e começar a selecionar algumas das coisas com base no que eu seleciono o MAC do Visual Studio Code. Ou eles podem ver o Visual Studio para Mac. E então, se eu escolher o Windows, é mais do que provável, não importa o que eu escolha, dirá que o Visual Studio é a melhor seleção, ok, mas não para Java. Tudo bem? Portanto, isso pode ajudá-lo a tomar uma decisão sobre quais ferramentas podem ser melhores para você. Dito isso, como eu disse, Visual Studio Code é um pouco mais compacto, então ele usa menos recursos e é mais fácil de usar para operações de edição rápidas. Visual Studio é muito poderoso e é usado para muitas coisas avançadas. Então, nesta lição, vou mostrar o que você pode esperar ao instalar o Visual Studio. Então, quando, em primeiro lugar, você gostaria de baixar o Visual Studio. Então, quando você baixa a comunidade, o que você obtém é um instalador. E depois de ter esse instalador e aprender, você terá uma janela semelhante a essa. Eu já o tenho instalado, então estou apenas mostrando alguns dos módulos e qual é a aparência da interface do usuário e como você pode proceder a partir daqui. Para este curso, realmente precisamos apenas do asp.net e do desenvolvimento web, o que chamaremos de carga de trabalho. Então, cada uma dessas caixas representa nossa carga de trabalho e nos dá acesso aos diferentes tipos de projetos que estão disponíveis para diferentes tipos de atividades de desenvolvimento, certo? Então, asp.net e desenvolvimento web, criaremos um aplicativo dotnet em aplicativos web. Então, definitivamente queremos isso. E, na verdade, incluirá o SDK. Sdk, bem como outros modelos de projeto. As ferramentas que precisamos para o desenvolvimento web. Dito isso, se você estiver interessado em ter outras cargas de trabalho, como para desenvolvimento de desktops dotnet ou desenvolvimento de dotnet Maui. Então, você sempre pode usar as diferentes cargas de trabalho que deseja ter. Obviamente, quanto mais você clicar, mais espaço ela ocupará em sua máquina. Portanto, tenha muito cuidado. No entanto, neste momento, mais uma vez, tudo o que realmente precisamos para este curso é o asp.net e as cargas de trabalho de desenvolvimento web. Então você pode prosseguir e pegar isso e clicar em Instalar, que é o que apareceria aqui em vez de instalado durante o download. E depois de fazer isso, Visual Studio assumirá o controle, baixe todas as ferramentas necessárias para essa carga de trabalho. E então isso permitirá que você lance resultados para eles. Depois. Ao iniciá-lo, você pode ser solicitado a fazer o login. Assim, você pode usar sua conta ativa se tiver uma ou criar uma conta ativa e usar essa conta para a instalação do Visual Studio. Agora, só para dar uma prévia rápida da aparência da interface de usuário do Visual Studio 2022. Vou continuar com todo o cabo para que ele inicie a interface do usuário. E o que temos aqui seria um Solution Explorer, que listará todos os arquivos e pastas que farão parte do seu projeto quando o criarmos. E você pode continuar e executar o projeto permanece anexado, não, porque está vazio, podemos executar o projeto. E essa interface de usuário realmente ganha vida quando entramos, se você tiver muitas integrações, como com o Git, e pudermos acessar nossas coisas do GitHub aqui da mesma forma que podemos fazer isso no Visual Studio Code. E se você quiser usar o Visual Studio, tudo bem. Nas primeiras lições, mostrarei os paralelos entre o uso Visual Studio Code e o uso do Visual Studio. Então, pelo menos você pode ter uma ideia de qual deles pode ser melhor. Mas, durante a maior parte do curso, usaremos o Visual Studio Code apenas porque ele é multiplataforma. Portanto, independentemente do sistema operacional que você está usando, você pode acompanhar sem problemas. Então é isso para Hollywood configurar o Visual Studio, é muito fácil. E se, em algum momento, você quiser mais cargas de trabalho, sempre poderá voltar ao instalador. Portanto, você pode simplesmente pesquisar em sua máquina o Visual Studio Installer. Isso o levará de volta a esse ponto. E você pode selecionar ou desmarcar as cargas de trabalho conforme necessário. 6. Instalar o SQL Server Express (Windows): Bem-vindo ao primeiro vídeo deste curso, introdução ao SQL Server 2017. E hoje vamos analisar o download e a instalação desse software. Agora, um banco de dados é basicamente uma coleção lógica de dados relacionados. Resumindo, se você tem experiência anterior com bancos de dados, provavelmente veio com o Microsoft Access ou o MySQL. E você só quer estender seu conhecimento além disso. E mesmo que você não tenha nenhum conhecimento prévio de bancos de dados, este é um excelente curso para que você se familiarize com o que os bancos de dados são capazes de fazer, qual preparação precisa feita e como você pode fazer iniciar sua jornada para se tornar um administrador de banco de dados ou simplesmente manipular dados em um banco de dados é, como eu disse antes, exploraremos todos esses conceitos usando o Microsoft SQL Servidor 2017. E eu já a tenho na minha tela, a página para download. Por isso, incluí o URL conforme descrito aqui nas notas da aula. E isso faria com que você baixasse o mecanismo de banco de dados expresso do Microsoft SQL Server 2017. E a breve descrição é que é um sistema de gerenciamento de banco de dados poderoso e confiável que permite criar sites leves e aplicativos de desktop. Então isso é muito bom, muito decente é um ponto de partida decente. Se você não tem aquela máquina de alta especificação e de última geração, você só tem uma máquina normal, você só quer começar. Essa é uma excelente opção. Há outras adições que você provavelmente veria em sua pesquisa, mas se você seguir este link, ele eliminará todo esse ruído e todas as outras edições. E podemos começar com o Express. Você pode clicar nesse download e iniciar inicialmente o procedimento de download. E outro software em que estamos interessados é o SQL Server Management Studio. Agora, o Management Studio será sua porta de entrada para realmente interagir com o banco de dados, interrogar os dados e escrever o que chamamos consultas em uma linguagem com o Cloud SQL. Vamos abordar todas essas coisas no devido tempo. Mas, por enquanto, você pode seguir esse URL mais uma vez nas notas da aula. E podemos simplesmente clicar nesse botão Download para inicializar o download, o que pode levar algum tempo. É um arquivo bem grande. Assim que o download for concluído, nos reuniremos novamente e, em seguida, passaremos pelo processo de instalação. Ei pessoal, bem vindos de volta. Agora que nossos downloads terminaram, começaremos instalando nosso mecanismo SQL Express. Então, basta clicar nesse arquivo de instalação, clicar em Executar e, em seguida, seremos recebidos com essa tela de instalação. Podemos clicar em básico. O cliente permitiria que você selecionasse determinados recursos. Neste estágio, não precisamos fazer isso. Podemos simplesmente usar o básico podemos seguir em frente e concordar com os termos e condições. Você pode lê-lo até o fim, se desejar. Se você tiver outras ideias , talvez queira alterar esse diretório. Caso contrário, você também pode usar como padrão. E você pode ver aqui que de 6 GB, nós realmente só precisamos de 300 mb. Então, vou clicar em Instalar. E isso pode demorar um pouco, então nos reuniremos novamente quando isso terminar. Ok, então, no final desse procedimento de instalação, você verá que conseguiu fazer essa instalação. E então eles te dão algumas informações. Eles fornecem uma cadeia de conexão. Então, se você quisesse desenvolver um aplicativo sobre esse banco de dados, provavelmente gostaria de prestar atenção a essa parte. Bem, isso não é realmente necessário agora. E eles apenas fornecem os caminhos para os arquivos de log e outros bits essenciais do aplicativo. Outra parte essencial desse processo de instalação, conforme mencionado anteriormente, é instalar o sequel management server studio. Então, nesta instalação da Express Edition, eles realmente oferecerão a opção de dizer instalar o SSMS. E isso realmente abrirá seu navegador e navegará até, bem, imaginei que esse discurso, o link para esta página já está incluído nas notas da aula. E aqui, a partir daqui, você pode fazer o download direto para o Management Studio. Então, se você não fez isso antes, você pode simplesmente seguir este link e obter esse arquivo já, baixá-lo aqui. Então, vou iniciar esta instalação. Tudo isso iniciará o instalador e, na verdade, eles fornecerão apenas um botão para clicar no qual está instalado. Obviamente, você pode mudar esse local se tiver outras ideias para o caminho. Caso contrário, você pode deixá-lo como padrão e clicar em Instalar. Isso também pode levar algum tempo, então nos reuniremos novamente no final desse processo. Ok, então nossa instalação está concluída e tudo o que precisamos fazer é reiniciar para continuar. Então, podemos fazer isso rapidamente. E nós, no próximo vídeo, começaremos a ver como começamos a juntar tudo. O que é um banco de dados e por que aprender essa habilidade é tão importante. Fique atento. 7. Alternativa - instale o SQL Server no Docker (qualquer sistema operacional): Atualmente, o Microsoft SQL Server só pode ser usado quase exclusivamente em máquinas Windows. Portanto, as etapas de instalação anteriores podem não ter funcionado bem Se você não estiver usando uma máquina Windows, se estiver usando Mac ou Linux, não se preocupe, ainda há uma solução para você. A solução número um seria que você pode usar uma máquina virtual, para poder usar o VMware ou alguma outra ferramenta que suporte a virtualização. E você pode ativar uma máquina virtual que tenha um sistema operacional Windows e depois usá-la. Saiba que isso pode exigir muitos recursos. E eu não vou fazer você passar por tudo isso apenas para usar um único software. A alternativa a um ambiente virtualizado para Windows seria usar o Docker, que é o que eu tenho na minha tela. Mais escuro, você pode facilmente chegar aqui acessando docker.com. Darker é um aplicativo muito rápido que nos permite usar o que chamamos contêineres em vez de um ambiente virtualizado completo. Então, o que podemos fazer é usar Docker para simular o ambiente necessário e somente o ambiente necessário para um determinado aplicativo seja executado sem precisar de todo o sistema operacional. Então, o que vamos fazer é usar o Docker para simular um ambiente para o SQL Server. E então poderemos nos conectar ao SQL Server apenas para ver, mesmo se você não estiver usando uma máquina Windows. Agora, a primeira coisa que você notará é que ele está disponível para todos os sistemas operacionais, praticamente certo? Portanto, se você estiver usando o Windows, ainda poderá usar o Docker. Se você tiver um dispositivo Apple ou baseado em Linux ou um dispositivo baseado em chip Intel, você pode fazer o mesmo. Nós instalamos o Docker. Então vá em frente, baixe e instale. Eu já o tenho instalado na minha máquina Windows, mas depois de instalá-lo, o que você terá é acesso aos comandos da linha de comando do Docker. Depois de instalá-lo, clique em pausar, deixe-o instalar e, em seguida, você poderá continuar. Eu encorajaria você a lançar seu terminal. Então, mais uma vez, estou usando uma máquina Windows, mas seu terminal no Linux ou Mac OSX seria muito parecido com este. E você pode simplesmente executar o comando docker apenas para ter certeza de que ele está instalado. E se você ver algo parecido com isso, eles não tinham acesso aos comandos do Docker CLI. Tudo bem, então o que queremos fazer neste momento é executar um comando chamado docker. Puxar é ampliar um pouco para que seja mais fácil de ler. Então, vamos fazer docker, pull, docker pull. Vamos extrair isso que chamaremos de imagem. Portanto, o Docker tem arquivos predefinidos que revestem o ambiente necessário para um aplicativo específico. E elas são chamadas de imagens. A imagem que queremos é a imagem do Microsoft MS SQL Server. Então, vamos fazer um docker, puxar essa imagem para que você possa clicar em pausar, certifique-se de digitá-la do jeito que eu tenho. E quando você pressiona Enter, ele diz: “Ok, estou recebendo as últimas novidades e, em seguida, você verá o download. Eu já tirei essa imagem, então eu já a tenho na minha máquina. Mas você verá que está puxando e, em seguida, começará a mostrar métricas do carregamento concluído. E na verdade seria algo mais parecido com isso. Portanto, esta é uma captura de tela que tirei antes de fazer o download. E você vai ver que isso vai gerar um monte de linhas parecidas com essas. E você terá essas tags de download. Então, uma vez concluído, o próximo passo é realmente executá-lo. Para executá-lo, você precisa desse comando. Então, vamos dizer Docker, run, depois hífen e, e isso fará com que o eula aceite. Então, o que acontece é que o SQL Server geralmente tem um desses documentos que você precisa para aceitar os termos e condições. Então, estamos apenas colocando em um parâmetro que, sim, aceitamos os termos e condições. E depois outro que diz a senha SA. Então, se você analisou o processo de instalação quando estamos usando o Windows, podemos usar a autenticação do Windows para nos conectarmos ao banco de dados, certo? Então, tudo o que precisamos é de um nome de máquina. Podemos usar um usuário do Windows, o usuário atual do Windows, autenticação do Windows e apenas nos conectar. Agora, como isso é mais escuro e é um contêiner, não há janelas ou portas ou Mark ou não há autenticação Linux. Portanto, não é realmente possível se conectar usando o usuário padrão do seu computador. Portanto, essa etapa é aplicável se você estiver usando Windows, mac, Linux etc. Portanto, o que precisamos fazer é especificar uma senha SA. Portanto, AC é o usuário padrão, o que significa administrador do sistema ou administrador do sistema. Toda vez que você instala um mecanismo de banco de dados para o Microsoft SQL Server, você recebe esse usuário de redação. Vamos configurar essa senha SA. E você pode inserir qualquer senha que desejar. Estou apenas inserindo uma senha forte aqui. E isso é realmente possível que você veja em outras demonstrações que você pode assistir em qualquer lugar na Internet. Portanto, essa senha não é necessariamente exclusiva para mim ou para este exercício. Você pode inserir qualquer valor de senha com o qual se sinta confortável. E você se lembra, estou apenas dividindo a palavra senha forte, é claro, com caracteres, números e algumas letras maiúsculas. Em seguida, especificamos a porta. É importante atravessar o porto aqui na frente . O porto. Na outra extremidade do cólon está a porta para a qual ele será mapeado. O que isso significa é que o SQL Server por padrão, transmite a partir da porta 1433, que é a porta padrão. Portanto, sem fazer nada, especificar qualquer porta ou qualquer coisa, sempre passará por 1433 uma vez ou se conectará. No entanto, o Docker está sendo executado em seu próprio ambiente especializado, então precisamos mapear. Essa é a porta padrão e, em seguida, essa é a máquina de portas que desejará passar por um túnel para chegar a esse esporte. Então, na verdade, você poderia simplesmente deixar isso como 14331433. Se você não quiser ter o SQL Server já instalado e estiver executando Mac e Linux, então 14, 14, 33 está bem. Você não precisa fazer nada extra. Você pode simplesmente se conectar. No entanto, porque estou usando uma máquina Windows e adiciono para alterar minha porta porque 1433 já está ocupado pela minha instalação nativa do SQL Server. Então, estou apenas mostrando que você pode fazer 14, 14, 33 por padrão. Ou você pode colocar sua própria porta específica, se desejar. Em seguida, a próxima e última coisa é dizer o hífen D e, em seguida, especificamos a imagem que queremos executar. Então, basicamente, estamos dizendo que o docker executa essa imagem e certeza de que todos esses parâmetros intermediários estão configurados. Isso é essencialmente o que acabamos de fazer. Então, quando você pressiona Enter e só você, esse para executar, o que ele fará é iniciar aquela imagem dentro da interface mais escura. Na interface mais escura, você verá algo parecido com isso. Ele vai aparecer em contêineres. E você pode ver aqui que existem vários contêineres, certo? Eu até tenho outro contêiner SQL que está adicionando sal de antes. E aqui está o novo de eu que acabei de executar esse comando. Então, ele criou um novo contêiner para o Microsoft SQL Server. E ele está em execução no momento e está sendo executado há 30 s. E a porta que ele usa é 1.400, que se você não alterasse isso e usasse o 1433 padrão , seria 1433. Você sempre pode parar e iniciar os contêineres. Você também pode excluir e observar o que está acontecendo. Assim, você pode abri-lo no terminal e interagir com ele aqui. Você também pode inspecionar para ver a integridade e ver algumas das configurações. Então, essas são algumas das variáveis de ambiente que configuramos. Quais são os parâmetros que passamos? Depois, você também pode ver os registros. Veja aqui que parece ter sido iniciado com sucesso. Então, depois de confirmar todas essas coisas agora, eu gostaria de me conectar. Agora, para Windows, podemos usar o Microsoft SQL Server Management Studio. No entanto, o Management Studio não está necessariamente disponível no Linux e no Mac. Portanto, a alternativa aqui seria obter o Azure Data Studio. Você pode simplesmente fazer uma pesquisa no Google e seguir em frente e seguir a documentação da Microsoft até o Azure Data Studio. Data Studio é uma ferramenta de banco de dados multiplataforma para profissionais. E pode funcionar em Windows, macOS, Linux. Assim, você pode instalar a versão apropriada para si mesmo. E, claro, você pode analisar qualquer aviso apenas para se certificar de que está em um estado compatível. Tudo bem? Então, o fato é que o Data Studio pode fazer maioria das coisas que o Management Studio pode fazer, especialmente dentro dos limites deste curso, em que estamos aprendendo sobre desenvolvimento e consultas de bancos de dados e tal. A experiência final será um pouco diferente. Então, certas coisas não estarão no mesmo lugar e podem não ser chamadas da mesma coisa. Para se conectar. Deixe-me mostrar como nos conectamos a. Então você pode ver que conectei algumas unidades ao longo do tempo ou, ao contrário, ela precisa de uma base, mas aqui vou conectar Microsoft SQL Server e, em seguida, o servidor aqui será a vírgula do host local, a porta que você especificou. No meu caso, especifiquei 1.400 na minha varanda. Você também pode ter especificado 1.400 ou o que você especificou. Quando configuramos, o contêiner deve funcionar e, se você não se lembra, pode simplesmente voltar e dar uma olhada. Você especifica essa porta. E então não a autenticação do Windows, mas o login do SQL. E nosso nome de usuário é SE, e nossa senha é a senha que digitamos. E mais uma vez, se você não lembrar qual é essa senha, você sempre pode ir até o contêiner e clicar em Inspecionar. E eu posso simplesmente copiar esse valor e depois colá-lo. E então, para o futuro, basta lembrar a senha. Então, podemos nos conectar. Então, isso é um sinal de uma conexão bem-sucedida. Eu, você vê aqui essa versão do sistema operacional, então eu ainda estou na minha máquina Windows. Mas a versão do sistema operacional que ele detectou é o Ubuntu. Então é isso que o contêiner está fazendo. Ele está sendo executado em um ambiente Linux, mas está simulando o ambiente, ambiente exato necessário para que o SQL Server possa ser executado. Se eu expandir bancos de dados, você verá que está vazio. E então, basicamente, tudo o que podemos fazer a partir do Management Studio, podemos fazer a partir daqui. Uma coisa que você pode notar, porém, é que algumas das ferramentas são limitadas. Então, no Management Studio, eu posso facilmente, ou mais facilmente, clicar com o botão direito do mouse e dizer, fazer certas coisas, como criar um novo banco de dados e assim por diante. No entanto, no gerenciamento do Data Studio , provavelmente ele precisará ser programado. É algo que você teria que controlar e criar um novo arquivo de script. E então, para criar um novo banco de dados, você teria que dizer criar banco de dados. E então diga o nome, digamos teste db, depois F5 e então ele é lançado. Então você pode atualizar a lista de bancos de dados e então você verá o TSDB, certo? Mas, neste curso, veremos como fazer os dois scripts e usar a interface gráfica do usuário no Management Studio. Portanto, você deve ser capaz de acompanhar muito bem. E, de qualquer forma, se você tiver dificuldades, sinta-se à vontade para entrar em contato. 8. Instale o Microsoft Data Studio: Oi pessoal. Nesta lição, veremos como podemos baixar e instalar o Azure Data Studio. Agora, o nome é meio enganador porque começa com o Azure, mas não é uma ferramenta exclusiva do Azure. É uma ferramenta de sistema de gerenciamento de dados multiplataforma e nos permite conectar-se a qualquer tipo de fonte de dados. Bem, pelo menos a fonte de dados do Microsoft SQL Server, seja ela hospedada localmente, está hospedada no Microsoft Azure. Há outras coisas que podemos fazer com a ferramenta, mas não necessariamente as faremos neste curso. A razão pela qual estamos optando por essa ferramenta, no entanto, é o fato de ser uma ferramenta de banco de dados multiplataforma e podermos trabalhar em Windows, Mac OS ou Linux. Portanto, lembre-se de que estamos focando no desenvolvimento multiplataforma. Então, estou tentando mostrar a você todas as ferramentas que podem nos ajudar a atingir nossos objetivos, independentemente do nosso sistema operacional. Tudo bem, então, para começar, você pode, na verdade, apenas o Google Data Studio e provavelmente, ou você pode dizer um download do Studio com zero dados. E isso o levará a este site, que está no Microsoft Learn. Tudo bem. E a partir daqui, você pode rolar para baixo até as diferentes opções de download. Então, para o Windows, temos essas opções. E o instalador do usuário é um instalador simples, que seria uma instalação muito semelhante à que tínhamos com o Visual Studio Code. Temos o instalador do macOS e temos a maneira Linux de colocar os arquivos em nosso sistema. Portanto, se você precisar de uma instrução ou dinheiro, basta rolar para baixo e ver a seção aqui para a instalação do Windows. E você pode ver que você pode simplesmente baixar o instalador para Windows e prosseguir com a configuração. Ou você pode baixar um arquivo zip e descompactá-lo em um local e usá-lo diretamente de lá. Tudo bem, vou apenas percorrer a opção e aqui está a seção de instalação do MAC OS. E então aqui está a seção de instalação do Linux. No final das contas, acabaremos com um aplicativo parecido com esse. Ao obtê-lo, você poderá mudar seu tema e tudo mais. Eu tenho o tema sombrio em execução. Você sempre pode alterar esse tema de cores, se desejar. Mas, em última análise, isso nos permite conectar-se a qualquer tipo de fonte de dados. E aqui eu tenho uma atualização pendente. Eu farei isso mais tarde. Mas podemos conectar nossos diferentes servidores , independentemente de estarem no host local. Portanto, esse padrão é meu host local, instância do SQL Express. Eu também tenho uma instância do docker disponível para mim. Agora várias instâncias na Microsoft, todos os meus servidores estão lá. Tudo bem? E podemos fazer algumas coisas legais. Podemos pesquisar, fazer alguns cadernos e explorar coisas de controle e extensão de fontes. Como eu disse, ele tem outras ferramentas integradas para outras atividades relacionadas não entrem nelas. Mas, por enquanto, é uma ferramenta bastante simples que nos permite escrever nossas consultas. Podemos criar nosso banco de dados de forma bastante simples. Tudo bem, então, quando voltarmos, começaremos com o desenvolvimento. 9. Crie o projeto ASP.NET Core MVC - Código do Visual Studio: Bem vindos de volta, pessoal. Nesta lição, criaremos nosso aplicativo web asp.net Core MVC. Agora, a primeira coisa que você vai querer fazer é iniciar seu terminal. O terminal pode parecer diferente com base no sistema operacional em que você está. Se você estiver no Linux, ele terá uma aparência diferente de se não estiver marcado. Bem, muitas vezes, na verdade, parecerá muito parecido. Mas se você estiver em uma máquina Windows, procure PowerShell ou o Command Prompt. Estou usando um PC com Windows, então na verdade tenho essa janela chamada terminal, que na verdade me dá acesso aos diferentes tipos de terminais que tenho na minha máquina. Então você vê aqui que eu tenho uma guia chamada Windows PowerShell, outra guia chamada prompt de comando. Mesmo que você seja uma janela que não tenha necessariamente essa aparência, você pode fazer tudo o que estamos prestes a fazer se estiver usando uma máquina Windows, usando o prompt de comando, de qualquer forma, da mesma forma os comandos que executaremos na minha máquina funcionarão em qualquer sistema operacional. Então, vou fechar uma dessas guias e usarei apenas a janela do PowerShell. E antes de tudo, queremos ter certeza de que o instalamos. Se você disser apenas dotnet e, em seguida, hífen, informações sobre hífen, verá uma pequena impressão ou semelhante mostrando todos os tempos de execução do dotnet que você instalou. Eu tenho feito o desenvolvimento de dotnet nesta máquina em particular desde que a versão 3.1 estava em andamento. Você vê aqui que eu tenho cinco e também tenho sete. E se você olhar aqui embaixo, verá que eu também tenho acesso às versões de seis. Tudo bem, então isso é uma evidência de que o dotnet foi instalado com sucesso e você quer ter certeza de que tem sete, porque usaremos sete. No entanto, se você instalou e deseja usar seis, 90% do que podemos fazer pode funcionar com seis, onde há uma diferença. Eu vou me certificar de apontar isso. Agora que validamos que dotnet está instalado e temos acesso ao dotnet CLI. O que precisamos fazer agora é tornar isso um pouco maior para que os comandos fiquem mais visíveis. O que precisamos fazer é navegar até um diretório em que sabemos que queremos ter nosso projeto. Em seguida, criaremos nosso novo aplicativo dotnet. Vou apenas dizer CLS para limpar o prompt de comando. E então o maior novamente. Agora, o que podemos fazer é navegar até a pasta, que pareça algo como cd, e então você escolhe seu destino. Então, eu tenho uma pasta especial na minha unidade C que eu uso para projetos. Então, eu posso navegar até esse diretório. E então vou executar um comando que diz dots net new MVC. E então eu fui ver um hífen, ou esse hífen 0 significa onde eu quero colocar esse projeto? Então, eu queria criar uma nova pasta. Se eu não fizer isso onde quer que eu esteja, ele criará uma pasta. Portanto, você poderia ter criado uma pasta para si mesmo, usando sua interface de usuário ou sua linha de comando. E antes de entrar nisso, deixe-me mostrar como você criaria isso a seguir se eu dissesse diretório MK dir e depois desse um nome a ele, digamos, testaria o MVC. Então, isso criaria isso. Então eu poderia dizer cd para testar o aplicativo MVC. E você vê aqui que se trata de uma série de pastas. E então eu poderia simplesmente dizer dotnet, novo MVC. E então o que isso faria é criar um novo asp.net Core Web usando os modelos do controlador de visualização do modelo. Então é isso que MVC significa, caso isso não estivesse claro antes. E eles estão informando que ele foi criado com sucesso. Então, eles estão informando que criaram o projeto nesse caminho. E eles deram ao projeto o mesmo nome da pasta em que ele foi criado. Tudo bem, então essa é uma boa maneira limpa criar um novo MVC. No entanto, não vamos trabalhar no MVC up, então vou fazer cd dot dot, que me traz de volta a um diretório e me permite limpar minha tela mais uma vez de todas as mensagens. Basta ir para a tela cheia desta vez. E então vamos fazer isso de ponta a ponta. Então, se eu quiser um novo aplicativo dotnet MVC, digo dotnet new MVC, e então vou ver o hífen ou não zero, mas tudo, e então darei o nome do diretório. Agora, neste curso, vamos construir uma gestão escolar muito pequena. Apenas o suficiente para ajudar uma pequena escola a afastar os alunos, os professores, dos cursos que eles oferecem, certo? Então, vou dizer que a gestão escolar está boa, certo? Então vou dizer MVC, só para sabermos que este é um MVC, com certeza. E então, quando eu pressiono Enter, o que vou fazer é criar esse novo diretório, aplicativo School of Management dot MVC. E então, nesse novo diretor, cria o arquivo do projeto para acompanhá-lo. Tudo bem, então essa é outra maneira de fazermos isso. Poderíamos simplesmente dizer dotnet, novo hífen MVC e depois especificar o nome do projeto. Ele fará o diretório e o arquivo do projeto em uma única varredura. Agora, quando queremos abrir este projeto, temos um bom atalho de teclado que pode ser usado em vez de outro atalho de comando. Então, se eu navegar até esta pasta e eu disser gestão escolar do MVC, então CD, vá até lá. E então eu posso dizer pontos de código. Veja o que acontece. Isso ocorre se você estiver usando o código do Visual Studio. Então, depois de ter o Visual Studio Code, você tem essa variável de ambiente na sua linha de comando. E então, quando você disser código, ponto final, ele abrirá o Visual Studio Code no contexto da pasta para a qual você navegou atualmente no terminal. E, com certeza, estamos lá com o Visual Studio Code e aqui estão todos os arquivos que foram criados nesse diretório específico. Claro, ele pode navegar, eles estão usando seu Explorer, se você quiser. Mas, no momento, isso é prova suficiente de que nossos esforços de criação de projetos foram bem-sucedidos. Não vou passar por nenhuma extensão nem nada. Eu só queria mostrar como você criaria um novo MVC usando a CLI e o abriria totalmente usando o Visual Studio Code. Saiba que, antes de encerrarmos este exercício, eu só queria ressaltar que existem vários. 10. Crie o projeto ASP.NET Core MVC - Visual Studio: Tudo bem, então analisamos como podemos criar um novo projeto usando a CLI dotnet. E isso é realmente para qualquer tipo de sistema operacional, especialmente se o Visual Studio não for compatível com seu sistema operacional. No entanto, se você quiser usar Visual Studio para os exercícios de desenvolvimento, seguiremos as etapas simples para criar um projeto semelhante usando o Visual Studio. Visual Studio é um IDE muito poderoso fornecido pela Microsoft para o desenvolvimento de dotnet. E vem repleto de todos os tipos de recursos de que você precisa. Muitas extensões e muitos complementos com outras ferramentas para realmente realizar os mesmos feitos. Dito isso, outras ferramentas são capazes e os recursos a serem executados são prontos para uso. Nota à esquerda, você verá que eu tenho uma lista de projetos recentes. Se esta é a primeira vez que você usa o Visual Studio, talvez você não tenha muita vida desse lado. Isso é bom. No entanto, queremos nos concentrar na seção Introdução para que possamos começar clonando nosso repositório, abrindo um projeto ou solução existente ou uma pasta onde possa haver um projeto existente ou nós pode criar um novo projeto. Também podemos continuar sem código. Acho que escolhemos essa opção na última vez que analisamos o Visual Studio. No entanto, desta vez, vamos dizer Crie um novo projeto. E então isso carregará vários modelos de projeto. Portanto, com base nas cargas de trabalho que você selecionou para o Visual Studio, você pode ter mais ou menos cargas de trabalho do que eu tenho aqui. Tudo bem? A mais importante é aquela em que a criação, que é o MVC, sabe que essa é uma lista enorme que podemos filtrar com base nos idiomas. Portanto, queremos ver apenas modelos C-sharp. Talvez queiramos ver apenas modelos para nosso tipo específico de plataforma e para tipos de projetos específicos, certo? Ou podemos simplesmente pesquisar. Então, eu sei que quero o MVC, posso simplesmente pesquisar o MVC. E aqui eles vão me dar a API da web. Não, não é isso que eu quero. E então vejo aqui que eles estão me dando um aplicativo web com o controlador de visualização do modelo MVC. Então esse é o que vou selecionar, escolha Avançar. E então eles vão me perguntar, ok, qual deve ser o nome do projeto? Então, isso vai para um diretório padrão diferente dos meus anteriores. Então, vou dar o mesmo nome apenas para mostrar um nível de consistência. Tudo bem, então a gestão escolar não é MVC. E então eu posso clicar em Avançar. Em seguida, ele vai me perguntar o tipo de estrutura. Então, já analisamos o fato de termos diferentes tipos de estruturas ou podermos ter diferentes estruturas instaladas. E o que vamos fazer neste curso, vamos procurar, pode fazer isso a partir das sete, pode fazer isso onde há uma diferença. Eu definitivamente indicaria. Mas, para este curso, usaremos o dotnet seven e podemos escolher um tipo de autenticação padrão. Agora, essas são opções que poderíamos ter fornecido na CLI porque eu não forneci nenhuma opção na CLI. Eu não vou fazer nada extra aqui. Certo? E eu não vou fazer nenhuma dessas coisas. O que vou fazer é clicar em Criar. Depois de clicar em Criar, você abre nosso Visual Studio com nossos projetos. Portanto, temos o Solution Explorer por padrão, esse painel está, na verdade, no lado direito. Mas acho mais fácil de usar quando está no lado esquerdo. Assim, você pode realmente arrastar esses painéis e colocá-los onde quiser. É claro que a esquerda ou a direita geralmente são um bom lugar para ter algo assim, que mostra todos os arquivos, mas eu gosto de tê-lo à esquerda. Tudo bem? Você também tem acesso às ferramentas de gerenciamento de banco de dados integradas. Então, com o Visual Studio, você nem precisa do Data Studio porque você pode realmente se conectar ao seu banco de dados a partir daqui. E dinheiro, até certo ponto, executando consultas, criando novas tabelas e como objetos de banco de dados, conforme necessário. Tudo bem, então o Visual Studio é muito poderoso e quando você quiser executar, você pode pressionar F5 no teclado ou pressionar o botão Executar na parte superior, que tem as letras HTTPS. Mas se você estiver usando dotnet six, as letras podem não ver HTTPS. Eles podem ter apenas o nome do projeto, onde você vê HTTPS aqui, ou seja, gestão escolar ponto MVC, e tudo bem. Os dois farão a mesma coisa. É só uma questão de como eles são classificados ou chamados nessas configurações de inicialização, aquele arquivo JSON, onde ele descreve os diferentes perfis. Portanto, você terá um perfil HTTP que será executado em uma configuração HTTP. Em seguida, ele também sai da caixa com HTTPS, que será executado com as configurações de HTTPS. Tudo bem? Você também pode receber uma solicitação para confiar no certificado, nos certificados de desenvolvimento. Se você receber essa solicitação, clique em Sim. E eu vou correr e ver como isso ficaria. Então, o que ele faz é construir o projeto, seja, ele vai compilar, examinar todo o código e garantir que tudo esteja bem. E então, se tudo estiver bem, vai lançá-lo aqui. O terminal, ou eu também tenho um terminal em execução no Visual Studio. E está me mostrando que agora está ouvindo na porta HTTPS sports 7212 e HTTP 5294. Em segundo plano. Ele também lançou meu navegador padrão e teria como padrão a porta HTTPS. E aqui está nosso aplicativo web sendo executado de dentro do Visual Studio. Então, mais uma vez, o Visual Studio é muito poderoso e nos permite realizar várias coisas clicando aqui e ali. Eles nos fornecem muitas ferramentas e é muito fácil navegar e começar a trabalhar. No entanto, mais uma vez, nem todo computador, nem todo sistema operacional oferece suporte ao Visual Studio. Então, vamos nos concentrar no desenvolvimento usando o Visual Studio Code e a CLI dotnet. No entanto, farei o meu melhor para executar os paralelos em que talvez você precise saber como fazer a mesma coisa usando o Visual Studio. 11. Código do Visual Studio: Bem vindos de volta, pessoal. Nesta lição, vamos visitar o Visual Studio Code por um tempo, certo? É um editor muito versátil e é bom saber onde estão as coisas e entender algumas das instruções que podemos ver à medida que avançamos. Então, eu tenho aberto nosso projeto MVC dot MVC do aplicativo School of Management que criamos antes. E se você quiser abrir nosso projeto, digamos que o Visual Studio Code feche e você queira voltar lá. Você tem a opção de usar a CLI e navegar até lá. Ou você pode realmente ir para Arquivo e dizer Abrir pasta. E, a partir daqui, você pode navegar até a pasta e selecionar a pasta. E então você teria a mesma experiência com a codificação do Visual Studio, nós apenas carregaremos todos os arquivos que estão atualmente na pasta nesta seção chamada Explorer. Você pode acoplar esse Explorer para obter mais espaço para seu código. Ou você pode tê-lo na lateral, ele pode redimensioná-lo à vontade. Escreva às vezes que você simplesmente não quer que seja tão aberto. Tudo bem? Você também tem a capacidade de pesquisar tudo. Então, se eu pesquisar o MVC mais recente, ele vai me mostrar todos os lugares que aparecem que eu posso fazer uma pesquisa e substituir com bastante facilidade. Substituir tudo é substituir um de cada vez. Obviamente, eu sugeriria uma de cada vez para operações em massa, nas quais você pode ter alguns conflitos com o que está procurando, certo? Portanto, você sempre deve ter cuidado com essa busca e substituição, especialmente para operações em massa. Então, temos acesso ao controle da fonte. Agora, aqui você pode ver uma opção que sugere que você instale o Git no seu sistema operacional. Agora estou no Windows. Então, se eu ainda não tivesse o Git instalado, você veria instalar o Git para Windows. Porque o que acontece é que Visual Studio Code tem uma integração direta com o Git. E permite que você execute tudo isso, obtenha comandos daqui com bastante conforto, sem precisar entrar na CLI. Tudo bem, então conhecer os comandos do Git é legal. Mas com o Visual Studio Code, você pode ser causado por sem ter um conhecimento íntimo deles. Então você quer ir em frente e entrar no seu sistema operacional. Nós usaremos o GitHub. Então você vê aqui que há um grande botão vermelho que diz que publiquei um GitHub porque com apenas alguns cliques, podemos realmente enviar nosso projeto para o GitHub e faremos isso mais tarde. Portanto, não precisamos nos preocupar com isso. Depois, há execução e depuração. Executar e depurar realmente nos permite executar nosso projeto. Tudo bem, então, com nosso experimento do Visual Studio, você viu que poderíamos clicar no botão e ele lançou nosso projeto. Bem, isso é o que a Runner Depot oferece aqui. Veremos como isso funciona versus como também podemos fazer isso na CLI. Não queria pular o Explorer remoto. E eu estou ignorando isso porque você provavelmente não tem isso. Este Explorer remoto é um dos meus plug-ins adicionais. E qualquer coisa que você esteja vendo na lateral do meu computador que não esteja vendo para decidir sobre o seu computador significa que essas são extensões adicionais que eu instalei para meus próprios propósitos. Não vou priorizar nada que não seja absolutamente necessário para você concluir este curso. Portanto, o próximo ícone importante ao qual você gostaria de prestar atenção seriam as extensões. Agora, em Extensões, você verá que tem acesso para instalar extensões diferentes para oferecer suporte a diferentes tipos de projetos com base em suas necessidades. Então, eu trabalho com o Azure. Eu tenho algumas como suas extensões instaladas, certo? Mas também tenho trechos Bootstrap five para facilitar minha vida. Eu também tenho um trecho em C nítido. E você deve ter visto algumas sugestões sobre a necessidade de uma extensão C-sharp e C-sharp com base no tipo de projeto. Então, porque vamos fazer um projeto C-sharp no dotnet. A extensão C-sharp faz muito sentido porque adiciona suporte para sintaxe de sentido porque adiciona suporte para codificação C-sharp e IntelliSense, preenchimento automático e várias coisas. Então, eu sugiro que você aguarde a extensão C-sharp. Não. Para instalar uma extensão, o que você faz é pesquisar no mercado de extensões aqui, e você pode simplesmente escrever C sharp. E então essa estará no topo da lista porque é uma extensão oficial da Microsoft. Você pode clicar nele. Então, quando você vê todos esses botões para mim, você realmente vê um botão de instalação de extensão. Como se eu clicasse em um, não tenho o botão de desinstalação que você veria. Portanto, você pode prosseguir e instalá-lo , e talvez seja necessário reiniciar o Visual Studio Code. Existem várias extensões úteis e você sempre deve consultar editor da extensão. E uma coisa que eu também uso para avaliá-lo é quantos downloads ele tem. O editor é um, mas o número de downloads, caso você não esteja necessariamente familiarizado com o editor. O número de downloads também varia. Um indicador muito bom de sua estabilidade e de quão bem usado é. Agora, outra coisa que você pode notar, e acho que mencionei antes, é que código do Visual Studio pode mostrar um pequeno pop-up sugerindo que você obtenha extensões específicas. Você está instalando determinadas extensões com base em um tipo de projeto? Você pode realmente prosseguir com eles. Visual Studio Code está apenas fazendo sugestões para ajudar você a ter a melhor experiência possível com base no que você está trabalhando. Instalou várias extensões. Você pode ver aqui que eu tenho 45 extensões. Então, basta usar o Visual Studio Codes e a versatilidade, porque eu os usei para o desenvolvimento de modelos ARM. Eu o usei para desenvolvimento angular, usei para desenvolvimento em Azure. Eu o usei para algumas coisas de pasta de trabalho de dados que ainda são Azure, certo? Larval, PHP, Python. Essas são todas as coisas que eu o usei para fazer, e essas são coisas para as quais você pode usá-lo no futuro medida que se desenvolve e deseja explorar caminhos diferentes. Portanto, o Visual Studio Code é quase como um IDE tudo-em-um para várias plataformas. Esta é a primeira vez que você usa o Visual Studio Code. Eu encorajo você a explorar e ver como ele suporta outras linguagens e outras estruturas e como você pode usá-lo a seu favor. Agora, outra coisa que eu quero, vamos passar das extensões. Outra coisa que eu só queria ressaltar antes de entrarmos em qualquer desenvolvimento real seria o fato de ele ter um terminal embutido. Então, antes de saber tudo o que fizemos para criar o projeto e assim por diante. Fizemos isso no terminal nativo do nosso sistema operacional. No entanto, enquanto estamos no Visual Studio Code, provavelmente não queremos entrar e sair e entre janelas. Convenientemente, incluiu um terminal para nós. Assim, você pode chegar lá usando o atalho de teclado que está aqui. Ou você pode simplesmente clicar nele e sair do curso e isso abrirá uma janela de terminal. E essa janela do terminal é baseada na Porsche. Mas adivinhe? Temos opções. Portanto, podemos realmente ter vários terminais funcionando simultaneamente. Então, eu poderia realmente adicionar outra janela de terminal. E se eu quisesse um, fosse apenas um prompt de comando. Se eu quisesse um que fosse um bash, você receberá o Git Bash assim que instalarmos o Git em sua máquina. E eu mencionei isso antes, mas eu não te mostrei. Então você pode ficar bom. Portanto, você pode acessar o hífen scm.com ou simplesmente obter o Google. E tenho certeza de que o primeiro resultado da pesquisa forneceria esse site. Você também pode baixá-lo para vários sistemas operacionais, plataformas. Assim, você pode obter o Windows, o Mach e obtê-lo para suas distribuições Linux. E é uma interface de linha de comando nativa, certo? Mas você tem certas ferramentas que podem fornecer uma interface de usuário e o Visual Studio Code , mais uma vez, é uma ferramenta que permitirá que você obtenha comandos relacionados aqui. Tudo bem? Então, essas são coisas que podemos saber se eu quiser que ele execute nosso aplicativo aqui usando a CLI. Eu posso entrar no terminal e deixar eu fechar o Windows, Terminal Windows que eu não estou usando, aquela pequena lixeira. Você pode simplesmente clicar nele para fechar a janela. E vou acessar as Propriedades para ver o arquivo de configurações do gramado. Tudo bem, então eu vou te dar uma olhada no arquivo para que você possa entender tudo o que está acontecendo. Mas antes disso, eu só queria me concentrar nesse arquivo de configurações de linha. Agora, temos dois perfis de HTTP e HTTPS. Se quisermos que ele execute nosso aplicativo, o padrão seria HDTP. Se eu disser dotnet run, na verdade usaria como padrão o perfil HTTP e a versão Lunch ou HTTP do nosso aplicativo, entre aspas. É a mesma versão, o mesmo código, apenas um comportamento diferente em termos de segurança. Mas então, se quiséssemos executar usando a configuração HTTP s, teríamos que especificar em nosso dotnet run. Então, vou silenciar essa janela do terminal um pouco maior. E você pode fazer isso mantendo pressionada a tecla Control e pressionando Plus para aumentar o tamanho geral do seu Visual Studio. Código, interface de usuário e controle menos para reduzi-lo, certo? Assim, você pode brincar com isso e ajustá-lo para um tamanho apropriado para sua tela. E então o que mais é dotnet run? E então eles podem ver o hífen, o lançamento do hífen, o perfil do hífen e, em seguida, especificar que eu quero usar o perfil de lançamento HTTPS. Ou quando eu pressiono Enter, ele vai construir. E ele verá a saída do terminal que nosso aplicativo está ouvindo agora em nossa porta HTTP e HTTP, certo? Eu não fiz isso. Parte dela ainda funcionaria, mas estaria apenas ouvindo na porta HTTP de 5246. Tudo bem, então essas são apenas algumas pepitas. Portanto, se controlarmos o clique nesse URL, ele iniciará nosso navegador. E então podemos ver aqui que esse é nosso aplicativo MVC executado de dentro do Visual Studio Code. Tudo bem, e quando eu terminar de fazer o que estou fazendo, posso simplesmente usar o Controle C para desligar. Então, quando eu terminar testar e quiser voltar ao código, quero parar o servidor que está sendo executado. Eu posso simplesmente controlar C e , em seguida, ele o desligará e me retornará à interface CLI. Tudo bem, então esse é um bom tour rápido e sujo do Visual Studio Code e o que ele pode fazer por você. Há outras pequenas pepitas que descobriremos ao longo do caminho. Não quero sobrecarregar suas informações. Eu só queria destacar algumas das coisas mais essenciais para nossas tarefas de desenvolvimento. E à medida que avançarmos, veremos mais. Não há um recurso interessante. Não é absolutamente necessário, mas é um que eu uso. E isso provavelmente influenciará a experiência que você teve com base em como eu faço minhas coisas. Mas eu uso o salvamento automático. Se você for ao Arquivo, você também o fará. Se você rolar para baixo, verá o salvamento automático, então você verá que está marcado para mim. Isso significa que, enquanto eu digito, código do Visual Studio salva automaticamente minhas alterações. E se você habilitá-lo, você terá uma experiência semelhante. Caso contrário, é claro, depois de fazer alterações em nosso arquivo, você precisará salvá-lo ou eu crio sempre para ver o reflexo no ambiente de teste? Portanto, o salvamento automático pode economizar muito tempo. Quando se trata disso. Também podemos alterar nossas configurações. Se você quiser usar um tema de cor diferente, você pode mudar seu tema para o quê, claro ou escuro. Então, eu não vou mudar do escuro, mas você pode escolher o que você gosta. Você também pode ativar itens como Word ou superior e alterar o tamanho da fonte nas configurações. Você pode alterar o tipo de fonte que está usando. Você pode alterar o tamanho da fonte. Então o meu é 30. Alugue agora. Se você quiser falar ou falar. Você pode procurá-lo aqui e alterá-lo, o que eles querem que ele ligue ou desative. Eu o tenho ligado. Agora, quando voltarmos, faremos um tour pelos arquivos do nosso projeto. 12. Tour de arquivos e pastas: Tudo bem, pessoal, agora vamos dar uma olhada nos arquivos do nosso projeto. Então esse é o nível das configurações abertas. Deixe-me fechar isso e começar do zero. Também vou ampliar um pouco e fechar o terminal para que tenhamos mais imóveis. Saber. A pasta bin. Isso é gerado depois que você cria um projeto e, basicamente, armazena os ativos que fazem seu aplicativo funcionar, certo? Então, basicamente, quando você pressiona F5 no Visual Studio ou usa o comando.net dotnet run. O que acontece é que, quando diz que está sendo construído, está compilando todos esses arquivos e ativos e os colocando nessa pasta bin. E então ele executará o aplicativo a partir dessa pasta bin. E então essa é a manifestação de que você veria um interativo durante o teste. Por outro lado, quando você está publicando, ele também criaria um conjunto de ativos semelhante a esse, e é isso que você colocaria na máquina de destino ao implantar seu aplicativo. Tudo bem? Não, o dotnet Core é multiplataforma, portanto, esses ativos funcionarão em qualquer sistema operacional, em praticamente qualquer tipo de servidor em que precisem ser hospedados. Tudo bem, isso é o que obtemos da pasta bin. Agora, temos uma das principais pastas que retiramos da caixa antes mesmo de fazermos uma compilação. E isso é chamado de controladores. Agora temos na pasta controladores, os controladores. E lembre-se de que os controladores existem para controlar o fluxo do seu aplicativo, o que significa que cada solicitação recebida passa por um controlador. E então ele é tratado e você recebe um erro porque não consegue lidar com isso corretamente, ou você realmente acessa a página que está tentando acessar. Então, toda vez que você navega em nosso site, você envia uma solicitação com cada clique, envia uma solicitação quando vai ao destino ou obtém os resultados esperados recebe uma resposta. Espero que você receba a resposta que espera ou receba uma resposta de erro. Então, um controlador está entre essa transação de resposta à solicitação, certo? Então, por exemplo, quando executamos nosso site e ele carregou a página inicial, o que aconteceu é que ele foi para o controlador doméstico e, por padrão, foi para a ação de índice e, em seguida, para o índice ações é retornar uma visualização. O controlador tem um registro de todas as possíveis raízes das solicitações que ele pode atender com êxito. Uma dessas solicitações que podem ser atendidas é o índice. Em geral, o desenvolvimento web, o índice deve ser sempre sua primeira praia. Mais servidores tentarão acessar o índice dot HTML ou ponto PHP ou não SPX, certo? Não importa qual seja o tipo de arquivo e o tipo de extensão, ele está sempre procurando por um índice. Primeiro. controlador doméstico tem o que chamamos de ação, que é uma rota registrada que o controlador doméstico sabe que pode seguir. Se você for para casa, procurará automaticamente o índice. E então, quando ele procura um índice, esse método define o que deve acontecer quando o índice está tentando navegado com base em qual acorde e qual mágica queremos que aconteça. Talvez queiramos buscar dados do banco de dados. Talvez queiramos fazer cálculos. Fazemos tudo isso dentro desse método. Faça coisas. Tudo bem? E lemos todo o nosso código, magia e lógica aqui. E então retornamos o que chamamos de vista. Tudo bem, logo chegaremos à pasta de visualizações, mas você verá que temos uma pasta de visualizações. Este é o C no controle no MVC, o controlador de mares. Então é isso que um controlador faz. Ele aceita a solicitação que diz que não pode atender à solicitação. Você quer que ele vá para o índice? Sim, eu tenho uma ação de índice. Eu posso atender à solicitação. Aqui está o que eu preciso fazer antes de atender sua solicitação ou antes de mostrar um resultado. Em seguida, a linha final é onde eu retorno a página que você solicitou junto com quaisquer dados adicionais que precisem estar lá. Como esse é um código padronizado, você pode ver que é muito simples. Só vai retornar o pH. Não está fazendo nada sofisticado antes de virar a página. Portanto, a vista é o destino final e essa geralmente será a última linha sua ação quando você estiver criando a sua própria. Outro destino que o controlador doméstico conhece é a privacidade. Então, para cada destino que você deseja, você precisa ter uma ação. E essa ação retornará uma visualização ou retornará alguma resposta favorável ao que o usuário está esperando. Eles também têm outro mito geral, ação chamada erro, que está retornando um modelo de visualização de erros. Então, a página de erro. Agora, se você olhar aqui, verá que este está fazendo mais. Um deles tem algumas anotações que lidam com o cache. Não precisamos nos preocupar com isso, certo? Não. Mas dentro do método, você vê que ele está fazendo um pouco mais. Diz visualização de retorno e, em seguida, está vendo visualização de retorno com esses dados. Então, essencialmente, isso é como uma página de erro global. Sempre que houver um erro, pelo menos durante a depuração , ele acompanhará quais são os raios desse erro, quais são as atividades e permitirá que você o rastreie no futuro em seu aplicativo. Então, isso é algum tipo de coisa mais avançada que eu não vou abordar. Mas o que eu realmente queria ressaltar aqui é que ela está adicionando as informações de que a visualização precisa. Então, é assim que passamos as informações para a exibição. A vista inicial não precisa de inflamação. Então, não precisávamos fazer nada. Certo. Eu não precisaria causar nenhuma inflamação. O controlador de privacidade também não precisou de nenhuma informação adicional. No entanto, quando a página de erro deve aparecer, queremos passar essas informações adicionais do código por trás quando retornarmos a visualização. Então, isso é essencialmente o que isso faz. Tudo bem? Não, não estou disposto a pedir o MVC. Estou seguindo a ordem da estrutura de pastas aqui. Então, os próximos seriam os modelos. E um modelo de visualização de erros de modelo é o único modelo que obtivemos em nossa foto. Agora, o modelo Error View contém essas duas propriedades e, basicamente , nossos modelos de visualização de barra, nossos arquivos de classe que representam os diferentes bits de dados que queremos exibir para nosso usuário, certo? Assim, um modelo incorporará cadeias de caracteres em diferentes tipos de dados, em spool, char, etc. Tudo o que você precisa exibir em sua página, que precisa ser dinâmico. Praticamente, você criará um arquivo de classe, que basicamente desempenhará o papel do nosso modelo. É só a aula. Nada muito especial se 0 p, Bem, você não quer classes e sabe quais são as propriedades. E, essencialmente, o que fazemos com o controlador é definir os dados. Então é isso que estamos fazendo aqui. Na verdade, estamos colocando os dados dentro desse modelo de visualização de erros ou estamos criando um objeto dessa classe. E depois de criarmos um objeto, despreenchemos as propriedades com os diferentes bits de dados que serão um. Então, aqui preenchemos o ID da solicitação com todas essas informações. Ou ele enviará isso de acordo com o ID ou enviará o identificador de rastreamento. Se for isso, saiba o que vai preenchê-lo com tudo isso, então ele retornará um objeto disso. Portanto, a visualização agora tem um modelo que tem alguns dados. E a visualização já saberá como extrair os dados do objeto e exibir os do usuário. Tudo bem. Então, isso é o que um modelo realmente representa, é apenas um objeto de uma classe que armazena dados que a visualização vai usar. O controlador é responsável por preencher esse objeto com os dados antes que a exibição os exiba. Obj, essa é uma daquelas pastas ou arbitrárias não precisamos necessariamente prestar muita atenção. Mais uma vez, ele tem apenas um monte de arquivos gerados com os quais não interagimos ou com os quais interagimos demais. Então, vou pular isso. Analisamos as propriedades e analisamos as configurações de inicialização desse arquivo JSON. Então aqui, como o nome do arquivo sugere, ele só tem configurações diferentes para o todo, o aplicativo deve ser iniciado, certo? Portanto, temos as configurações do iOS. Se quiséssemos executar com uma instância local do IIS Express, seria executado nessa porta. Mas Vizio, sorry.net tem seu próprio servidor embutido. Portanto, não precisamos necessariamente confiar no expresso, como precisávamos no passado. Portanto, isso nos permite ter nossos próprios perfis de lançamento em HTTP e HTTPS. E isso nos permite inserir o que chamaremos de variáveis de ambiente às diferentes configurações de inicialização, conforme necessário. Tudo bem? Então, essas são basicamente as configurações que saem da caixa. E você não precisa necessariamente modificar esse arquivo, a menos que saiba absolutamente o que está fazendo e tenha necessidades muito específicas por trás de suas modificações. Mas, de um modo geral, você pode deixar esse arquivo sozinho. Agora, vamos passar para as visualizações e a pasta de visualizações. Isso pode ser muito interessante. Em primeiro lugar, você notará que temos dois. Temos uma pasta lá chamada lar. Agora, tenho o controlador doméstico aberto simultaneamente para que eu possa mostrar a expectativa do sistema de arquivos e como tudo se encaixa. Depois de seguirmos essa convenção de nomenclatura, temos o controlador doméstico. Portanto, temos uma pasta de visualizações chamada home. Então, o que você notará é que, para sempre , o controlador que você cria, o mecanismo MVC procurará automaticamente dentro do controlador de visualizações uma pasta com o mesmo nome do controlador. Eu quero dizer o mesmo nome. Quero dizer, o que vem antes da palavra controlador. Mas isso é um padrão de nomenclatura. Então, se adicionarmos o controlador de estudantes. Então seriam estudantes. Esse é o nome do controlador. A palavra controladores esperados. Tudo bem, então você deve sempre ter a palavra controlador, mas o que vem antes disso é o nome. Ele espera ver uma pasta com o mesmo nome em vez da pasta de visualizações. E então, dentro dessa pasta, ele espera ver diferentes arquivos CSS HTML. Então CSS HTML é a extensão dada aos arquivos de visualização rápida, certo? E antes de falar sobre a aparência de um desses arquivos, gostaria de salientar que cada nome de arquivo precisa corresponder a um nome de ação. É por isso que, quando retornamos, a visão sabe o que devolver. Tudo bem, então deixe-me passar por isso de novo. Quando você envia uma solicitação, ao clicar em um link, à direita, você está clicando em um link que deve navegar até nosso controlador. O controlador avaliará o link e verificará se ele tem uma ação que corresponde à URL que você está tentando acessar. Se tiver uma opção, ele então executará essa ação, executará qualquer mágica que esteja nessa ação e, em seguida, tentará retornar uma visão. Essa visualização que ele tenta retornar será o arquivo HTML CSS que ele especificou com o mesmo nome dessa ação. Portanto, se você enviar uma solicitação e houver nenhuma ação que corresponda a essa solicitação , você receberá um erro 404. Se você enviar um leilão e solicitar, desculpe, e ele encontrará uma opção que corresponda à solicitação. E então ele tenta retornar a visualização e não consegue encontrar o arquivo correspondente, então você receberá uma solicitação de fluoróforo e isso basicamente fará com que todos os sites funcionem. Então, essa é essencialmente a experiência que você pode esperar quando está navegando na hora de criar seu site. E depois de seguir essa convenção de nomenclatura, você não terá nenhum problema. Então você verá aqui que indexei o HTML em Celsius. Eu tenho o índice como uma ação de privacidade, privacidade. Pode haver exceções à regra porque há um erro, mas você não vê um erro dentro dessa pasta. Na verdade, o erro está na pasta compartilhada. Isso é bom. Mas, de um modo geral, você quer seguir o padrão por trás do índice e da privacidade à medida que avança. Agora, vamos dar uma olhada no que está no arquivo de índice. No arquivo de índice, temos praticamente uma mistura de HTML e C-sharp. Tudo bem, então isso é HTML. Este é um código com aparência de C nítido. Portanto, o arquivo HTML CSS é como um arquivo híbrido que nos permite escrever uma certa quantidade de C-sharp dentro desse arquivo HTML. Mas, na verdade, é apenas um arquivo HTML glorificado. Se precisarmos que algo seja dinâmico podemos introduzir o C-sharp. E para apresentar o C-sharp, precisamos apenas de um cartaz publicitário. E então podemos começar a digitar alguma coisa, certo? Esse é o código C Sharp. Então, vamos ver, vou primeiro executar isso. Vou usar meu atalho de teclado Control Shift, apóstrofo lançou o terminal, vou dizer dotnet execute e deixe que isso inicie nosso aplicativo. Então, aqui está nosso aplicativo, certo? E observe que foi, não especificou para onde queria ir, mas apenas nos direcionou para a página de índice do controlador doméstico, certo? Se eu clicar em privacidade , veja isso. Vai dizer que o home reduz a privacidade. Então, quem é o controlador? privacidade foi a ação. Se eu tentar acessar, vamos tentar, vamos tentar indexar, então ele voltará para a página inicial. Portanto, ele conhece o índice de barra inicial. Mas se eu tentar ir para casa e cortar meu nome , isso me dará um 404 porque não há nenhuma ação que possa ser encontrada para essa rota. Tudo bem. Agora, o que eu quero fazer é mostrar como podemos injetar algo dinâmico nessa visão. Então, se eu quisesse, digamos que o valor da data. Então, posso dizer na hora da escritura. Não. Veja isso, UTC sabe, tudo bem, e guarde isso. E eu vou fazer o Controle C dentro do terminal para matá-lo. Em seguida, basta pressionar para obter o comando de execução mais recente e pressionar Enter novamente para que ele reinicie. E então eu volto para o site ou apenas atualizo e vejo isso. Acabei de adicionar isso, certo? Esse é um carimbo de data e hora baseado no código que acabei de inserir, que é código C-Sharp, data e hora, UTC conhecidos. Tudo bem, então isso é, sim, é um arquivo HTML, mas eu posso colocar meu código C-Sharp. Então, se eu quisesse que isso fosse, digamos que em uma tag H1, eu poderia realmente criar um HTML. Cada uma das etiquetas. Dedique esse tempo. E desta vez eu vou terminar o Controle C. E vou usar um comando diferente desta vez. Em vez de dotnet run, vou dizer dotnet watch. Tudo bem. Então assista isso agora. E eu disse “Dotnet Watch”. Isso vai me dizer que ele fará o que eles chamam de hot reload. Hot Reload está ativado. Deixe-me rolar para cima para que possamos ver exatamente o que está dizendo. Aqui. Está no dotnet watch Hot Reload ativado. E então podemos ver uma lista de outras opções. Em seguida, eles dizem usar o Control R para reiniciar. Dessa forma, quando fazemos nossas mudanças, não precisamos parar e começar, parar e correr, pular e correr, pular e correr. O Watch resolverá isso um pouco mais facilmente para nós. Então, quando eu volto para o meu navegador, aqui está a data e hora conhecida como tag H1, certo? Então, se eu quiser mais desses, posso simplesmente usar o Controle C, V. E observe que eu não destaquei, quando eu controlei o CV, eu apenas cliquei na linha, controle C, controle V. posso simplesmente usar o Controle C, V. E observe que eu não destaquei, quando eu controlei o CV, eu apenas cliquei na linha, controle C, controle V. duplique a linha. E a cada alteração, ele me informa que o arquivo foi alterado e ele é recarregado rapidamente. E então, quando eu volto para o navegador sem parar e começar, aqui está um fruto do trabalho. Tudo bem, então estou apenas mostrando que o arquivo de visualização é, na verdade apenas um arquivo HTML glorificado que nos permite injetar algum código C-Sharp quando necessário. E é por isso que, quando carregamos um objeto com dados, podemos realmente interagir com os dados provenientes do nosso objeto C sharp aqui mesmo em nosso arquivo de visualização. A visualização do índice é bem simples. Deixe-me remover tudo isso. Temos a visão da privacidade, que não é mais espetacular do que isso. Exceto que aqui você verá que eles estão fazendo essa injeção de C-sharp porque você pode definir o título dinamicamente da página em que está e, em seguida, eles estão apenas imprimindo essa página dinâmica aqui. Tudo bem. Agora, quando vou para a pasta compartilhada, temos o arquivo de layout ou o arquivo de layout. Diminua um pouco o zoom. O arquivo de layout é basicamente o modelo que todo o site usará para inferir como deve ser. Se você notar, quando eu vou entre casa e privacidade, tudo é estático, exceto o que está entre o cabeçalho e o rodapé. Tudo bem, tudo parece consistente e a consistência é muito importante. Ao criar sites com sites estáticos, você precisaria copiar e colar manualmente a barra de navegação , o rodapé e todos os ativos em cada página. Se você quiser uma consistência, a página de layout fornece um modelo HTML. Você notará que as visualizações não começam com as tags HTML e tudo mais. E em cada WEBO eles sempre começam com seu esqueleto. No entanto, temos o esqueleto em um só lugar, temos as tags HTML DOCTYPE. Temos a cabeça e o corpo em um só arquivo. Tudo bem, então não precisamos repetir isso para cada página de visualização que criamos. No entanto, dentro do corpo e temos a navegação, deixe-me meio que recolher as partes, certo? Temos o nav e depois começamos com o contêiner, que geralmente é onde você começa a colocar seu conteúdo. Então temos isso, e então temos essa seção chamada corpo de renderização. Portanto, o corpo de renderização é onde a visualização é injetada. É por isso que, quando mudamos as páginas, todo o resto é estático exceto o que está dentro do corpo. Tudo bem? Esta é a seção de contêineres, privacidade. Essa é a nossa seção de contêiner que rende o corpo porque está apenas nos mostrando o arquivo de visualização ou o conteúdo do arquivo de visualização que está sendo carregado com base na rota. No entanto, todo o resto é consistente. Então, agora, se eu fizer pequenos ajustes, como renomear esta seção, seguir todos os passos, alimentos e colocar espaços entre os meios. E eu fiz isso no título, na barra de navegação e no rodapé. Se dermos uma olhada aqui , veremos que tudo mudou, certo? E não importa em qual página visitemos, mais uma vez, ela sempre será consistente. Não. Acho que temos uma boa compreensão de nossas opiniões e temos outros arquivos que desempenham um papel coadjuvante que abordaremos mais tarde. Temos a pasta raiz dub, dub, dub, dub, que tem nossos ativos. Então, nós viemos com esse CSS. Este é o nosso próprio arquivo CSS incorporado para que possamos estender e escrever nosso próprio CSS, mas temos o CSS do site no qual podemos escrever nosso próprio site, apenas no qual podemos escrever nossos próprios arquivos JavaScript. E então temos a pasta lib que tem bibliotecas de terceiros. Então, de um modo geral, quando você instala bibliotecas de terceiros, como se saíssem da caixa com o Bootstrap e o jQuery terminam. Essas bibliotecas, então você vai querer colocá-las em um piscar de olhos. Por padrão, eles também são referenciados em nosso arquivo de layout. Aqui. Aqui você verá todos os arquivos de script que estão sendo referenciados, certo? Você também verá no cabeçalho, todos os arquivos CSS sendo referenciados como a chave. E com eles, temos o Bootstrap, decidimos o CSS e, em seguida, temos um arquivo CSS especial projetado especificamente para layouts. E você o verá aqui chamado layout.css ational, ou seja, CSS, podemos escrever ainda mais CSS específico para a página de layout sem que ela seja global. Tudo bem, a seguir, temos alguns outros arquivos integrados e as configurações do aplicativo desse arquivo JSON. Portanto, as coisas opostas, como o arquivo JSON, têm duas partes para que possamos criar outros ambientes, versões específicas. Portanto, para o desenvolvimento, se tivermos configurações específicas que queremos usar, podemos defini-las lá em vez de quando publicamos versus quando estamos testando, etc., no ambiente Basin. Podemos ter outros diferentes. Vamos modificar isso à medida que avançarmos. Portanto, saiba que é um arquivo de chave e você deve ter muito cuidado com as modificações feitas aqui, pois se a modificação for incorreta, seu aplicativo não será executado. Em seguida, temos nosso program.cs, que está em qualquer aplicativo C-Sharp. O Program.cs é o primeiro arquivo executado. Depois que o aplicativo for executado, ele procurará por program.cs. Portanto, o que está nesse arquivo define o tom de como seu aplicativo funcionará. E quando vemos que isso define o tom, o que estamos fazendo antes de tudo é adicionar serviços ao contêiner. O contêiner será parecido com o que o aplicativo usará para saber o que ele pode ou não fazer. Deseja adicionar quantos serviços precisarmos para esse contêiner antes que o aplicativo seja criado. Então, aqui estamos vendo o suporte de IDE para controladores com visualizações: estamos fazendo um MVC absolutamente precisa de controladores e visualizações, certo? Em seguida, criamos o aplicativo. E então há algumas verificações para dizer, ok, se estamos em um ambiente que é de desenvolvimento, ou se não estamos no desenvolvimento de aplicativos, podemos reescrever essa página, quatro setas e podemos forçar Redirecionamento de HTTPS, certo? Então, basicamente, isso dirá que você não pode usar nada além de HTTPS, segurança de transporte rigoroso. Mas isso geralmente é para produção. É por isso que está nessa declaração if. Se não estivermos em desenvolvimento , seja rigoroso quanto ao cabeçalho de transporte https, certo? Nós usamos HTTPS, o redirecionamento. Então você verá aqui que há um aviso que surge sempre que não estamos usando a configuração HTTPS, seja, o middleware de redirecionamento está durante nosso aviso, que será esse. Então, isso é o que chamaremos de middleware. Então, esses são miniaplicativos que adicionamos ao pipeline de solicitações. Ou seja, quando eu solicito, quando alguém clica em um URL, vai dizer, ok, qual é a ordem que devo fazer? Eu deveria primeiro ler Erich para ler Erich em HTTPS, devo usar arquivos estáticos, ou seja, esses ativos desde a raiz. Eu deveria usar o roteamento. Eu deveria tentar autorizar e depois tentar mapear. Então eu deveria correr, certo? Então, basicamente, é como a ordem em que todas as funções são chamadas com cada solicitação, podemos adicionar nosso próprio middleware. Podemos mudar a ordem, mas a ordem importa. Portanto, certifique-se de que, ao adicionar middlewares a esse arquivo, você o esteja adicionando em uma ordem específica com base em como deseja que seu aplicativo funcione. Isso é tudo para a turnê, certo? Muitas informações foram compartilhadas. Então, você quer mais uma vez brincar, você sabe, como criar projetos adicionais. Se você quiser criar um projeto adicional e tentar bagunçar os arquivos e ver o que para de funcionar e assim por diante. Essa é uma boa maneira de aprender como se orientar. Eu sugeriria que você tenha vários projetos com essa largura. Mas, por enquanto, temos todos os arquivos do projeto que são absolutamente necessários para nossa compreensão nesta fase. Em nossa próxima lição, vamos levar nosso projeto para o GitHub. 13. Adicionar projeto ao GitHub: Tudo bem, pessoal, então nos avise, impulsionem nosso projeto para começar. Então, usaremos o projeto que criamos para criar um novo repositório em nossa conta do GitHub. E isso também estabelecerá um link entre nossa instância do Visual Studio Code e a instância do GitHub. E isso nos permitiria empurrar e puxar conforme necessário. Vá até a guia Controle de código-fonte. E você tem duas opções para inicializar um repositório e publicá-las no GitHub. Então, o que acontece é que, depois instalar o Git em sua máquina, tenha acesso a um sistema de gerenciamento de controle de fonte local. Por isso, também é chamado de sistema distribuído de gerenciamento de controle de fonte. Em sua própria máquina, você pode ter todas as mudanças que quiser, todo o histórico, tudo o que você está fazendo, está tudo em sua máquina. No entanto, se sua máquina cair , você não terá backup. Então, a opção remota, como o GitHub, em que a chamamos de servidor remoto. Então, pode ser o GitHub ou o Bitbucket, pode ser o Azure DevOps. Pode ser uma máquina em seu escritório que está sendo instalada e está servindo a equipe. Seja o que for. Isso é o que chamaremos de servidor remoto. Então esse é o repositório central onde você e muitos outros podem enviar seu código simultaneamente e armazenar. Assim, você terá suas próprias cópias locais, bem como uma cópia centralizada para acesso de todos. Agora, antes de realmente irmos para o repositório central, quero explicar algo sobre os arquivos e quais arquivos realmente queremos rastrear, e não durante a turnê do projeto, eu teria apontado que certos arquivos são mais gerados automaticamente com base em nossas atividades. E isso significa que não precisamos necessariamente mantê-los sob controle de origem. Ou o controle da fonte é o caminhão, os incêndios em que realmente curamos as mudanças. A única coisa que será gerada após o fato que não precisamos necessariamente rastrear o controle da fonte. Então, tudo isso para dizer que existem certos diretórios como OBJ e a rapidez com que eu sou gerado rapidamente. Certo. Então, OB-GYN tem o debulk ou os arquivos de lançamento e outros ativos que estão sendo compilados. que quer fazer com que um dotnet construa nosso dotnet run ou o dotnet watch, eles serão gerados para que não precisemos necessariamente deles no controle de origem. Então, o que acontece é que o Git Hub tem o conceito de um arquivo gitignore ou , em geral, tem conceito de um arquivo gitignore, onde podemos gerar esse arquivo que podemos especificar diretórios. que não queremos. E dado que talvez não sejamos necessariamente especialistas em todos os diretórios que podemos ou podemos nos dar ao luxo de ignorar. É bom ignorar os modelos aos quais podemos ter acesso. Nossa CLI dotnet nos permite, na verdade, apenas gerar dotnet new git ignore. E então isso prosseguirá e gerará esse arquivo gitignore com base nos modelos do Visual Studio. Tudo bem? Esse modelo do Visual Studio sabe que, em qualquer projeto baseado no Visual Studio, não precisamos incluir esses tipos de pastas. Veja aqui o lançamento em massa, você verá que foi um OBJ. E isso significa o que S é maiúsculo ou comum, ou uma vez que tenha essas três letras, devemos ignorá-lo. Isso é o que o visual representava. é o que esse arquivo gitignore dirá quando você estiver enviando para ignorar esses arquivos e os arquivos nesses diretórios. Tudo bem, então essa é uma maneira muito boa de manter seus check-ins ou comentários bastante precisos e concisos. E você pode ver aqui que você pode obter o modelo mais recente desse local no GitHub. Tudo bem, então agora, se voltarmos ao controlador de origem, dizemos publicado no GitHub. Nesse momento, você pode ser solicitado a se autenticar com o GitHub, então basta fornecer suas credenciais e tudo mais. Agora podemos dizer se queríamos publicar em um repositório privado ou em um repositório público. Privado significa que você e todas as pessoas a quem você conceder acesso poderão acessá-lo. Portanto, não poderei acessar seu perfil e vê-lo. E então público significa que qualquer pessoa que se deparar com seu perfil pode vê-lo. Agora, pelo menos esse exercício encorajaria que você se tornasse público , pois facilita o compartilhamento. Isso torna mais fácil mostrar ao mundo o que você fez e no que está trabalhando. E as pessoas poderiam até mesmo examinar e fazer revisões de código e ajudá-lo ao longo do caminho, certo? Então, vou fazer isso em público. Então, quando clicarmos em público , publicaremos isso. Para nos ajudar, ele colocará uma mensagem de confirmação automática. Então, quando dizemos abrir ao receber, ele realmente iniciará o GitHub e mostrará todos os arquivos do seu projeto que foram confirmados. E observe que não existe um OBJ e qualquer outra pasta que possa ter sido lead gerado automaticamente. Excluído, certo, então esses teriam sido ignorados por R, ignore o arquivo. Também recebemos uma primeira mensagem automática de confirmação. E o que acontece é que, quando fazemos nossas alterações , queremos enviá-las para o mecanismo de controle de origem. Queremos incluir um resumo do que fizemos. Então, deixe-me fazer uma pequena alteração aqui em nosso arquivo de visualizações. Fui até lá para compartilhar o layout e o DateTime aqui. Então, o ano aqui é estático. E se eu quisesse que isso fosse dinâmico? Porque se mudar no próximo ano, não quero ter que atualizar esse arquivo manualmente. Então, eu posso mudar isso para ver a hora. Pensamentos. Sem orelha. Vantagem de poder escrever para C-Sharp aqui. Então, estou apenas dizendo que me dê a data e hora a partir deste momento e qual é o ano. E então isso será dinâmico. Então, seja qual for a hora e o que for, nossa vontade sempre mudará de acordo. Tudo bem? Assim, você pode fazer o dotnet run e apenas validar que ainda está vendo o mesmo ano. Claro, e ainda funciona. Mas, é claro, quando isso aumenta, quando o ano aumenta, você não precisa se preocupar em mudar essa não-dualidade. Essa é apenas uma pequena mudança. Você pode observar os sinais visuais que você verá aparecendo como aqueles pequenos pontos e m. Então isso significa que agora este é um arquivo modificador. Então, da última vez que recebi todo esse arquivo, ficou assim. Então, diga que isso agora está modificado, o que significa que quando eu vou para minha guia de controle de código-fonte, ela me dirá que tenho uma alteração pendente porque modifiquei pelo menos um arquivo. Agora eu posso ver a mudança. Digamos que mude o rodapé, o ano para ser dinâmico. Essa é a minha mensagem de compromisso. Agora posso confirmar, o que salvaria as alterações localmente na minha cópia local do repositório do GitHub. Eu também posso cometer e empurrar e comprometer e afundar. Então, commit and push significa que eu confirmarei localmente e enviarei minhas alterações para o repositório remoto, que neste caso é o commit do GitHub. E a sincronização diz que vou me comprometer localmente, enviar minhas alterações para o GitHub e tentar obter quaisquer alterações que possam estar no GitHub. E isso é perfeito para nossa equipe. Quando você tem várias pessoas contribuindo para o repositório remoto, você quer sempre ter as mudanças mais recentes. Você também pode antes de se comprometer e cumprir nosso compromisso de ver retirado do litro. Então você pode realmente usar esses três pontos. Eu posso dizer Paul. E vai olhar e ver, ok, o que eles são? Arquivos que foram alterados no repositório remoto que são diferentes dos seus? Deixe-me fazer essas mudanças. Às vezes, você acabará com conflitos se dois de vocês tiverem modificado o mesmo arquivo, certo? Então você pode acabar com um conflito. Espero que você não acabe com isso. Mas, essencialmente, você sempre quer ter a versão mais recente , tanto quanto possível. Então, você quer fazer piscinas irregulares enquanto trabalha. Mas então eu pressiono que enviarei suas alterações. Tudo bem, então você sempre quer puxar, talvez assustar qualquer acidente antes de empurrar, porque isso ajudará a equipe. No entanto, quando desenvolvemos energia solar para este curso, estou apenas dando um sim absoluto, mas o que podemos fazer é se comprometer e pressionar, já que estamos trabalhando sozinhos. Então, ele virá localmente e, em seguida, sincronizará as alterações com o GitHub. E então, quando eu volto para o Git Hub só para ver o repositório e atualizo. Então você verá aqui que há uma nova mensagem de confirmação que chegou há alguns segundos. E você pode detalhar e ver o que mudou. Mudamos essa linha para essa linha. Tudo bem, esse é o poder dos sistemas de gerenciamento de controle de fonte enquanto você constrói seus projetos. Portanto, faremos check-ins regulares como esse e garantiremos que acompanharemos todas as alterações que fizermos à medida que avançamos. 14. Compreender o arquivo de layout e o Bootstrap: Tudo bem, pessoal, então, nesta lição, quero que passemos mais tempo analisando esse pequeno relance anterior. E eu só queria destacar algumas das partes principais que você pode modificar. Modifique com segurança se quiser personalizar todo o aplicativo de acordo com suas necessidades. Então, vamos começar da linha número um. Então, temos o arquivo de carregamento. E mais uma vez, este é o nosso arquivo de modelo HTML para todo o nosso site. Portanto, as diferentes páginas não precisam começar com todas as tags HTML como faríamos em um site estático. Este é um arquivo dinâmico que cuidará de tudo isso para cada nova peça que quisermos. Ele já vem adaptado com todas as metatags HTML5. E também inclui o Bootstrap. Então, pronto para uso, obteremos o Bootstrap com nosso aplicativo MVC. Agora, o bootstrap é uma biblioteca de interface de usuário muito poderosa. Se é a primeira vez que você ouve falar sobre isso, tudo bem. Então, você pode realmente se familiarizar com isso acessando bootstrap.com. Esse é o site oficial deles. E você verá aqui que a versão mais recente é a 5.2, que é a versão que saiu da caixa com nosso pacote, com nosso projeto, em vez explicar como você o instalaria. Mas não precisamos fazer tudo isso porque ele já está incluído em nosso projeto. A documentação, no entanto, é excelente. Portanto, se houver algo que você precise entender sobre como isso funciona, acesse getbootstrap.com e navegue até lá. Então, vamos ver como podemos personalizar algo como talvez a barra de navegação. Você poderia simplesmente fazer uma pesquisa aqui. E você pode ver nav, nav bar. Isso é um bar bastante justo. Em seguida, eles permitirão que você veja como funciona. Então, aqui nos componentes que você tem navbar, eles falam sobre como ela funciona. Eles informam o conteúdo suportado e esse é o layout geral do código, se você quiser uma barra suficiente parecida com esta. Então, isso significa que o código de barras tudo foi suficiente começa aqui e está entre essas etiquetas de navegação abertas no Android. Então, para cada item que gostaríamos, podemos colocar lá. Então, se quiséssemos a palavra barra de navegação, essa é a nossa marca de barra de navegação, se fosse necessária uma imagem lá, poderíamos colocar a imagem, bem, adivinhe? Também temos essa seção. Desculpe por isso. Também temos essa seção. Aqui temos aquela etiqueta âncora, marca navbar. Então você verá que o Bootstrap é, na verdade apenas um monte de classes que eu criei para nos ajudar a fazer as coisas mais rápido, porque há coisas que sempre queremos fazer. Sempre que temos um aplicativo web, existem cores, sempre queremos seus estilos específicos. Sempre queremos que os caras do Bootstrap sejam os caras que desenvolveram o bootstrap, depois de anos fazendo a mesma coisa repetidamente. Eles criaram um arquivo CSS glorificado. Tudo bem, um arquivo CSS enorme, que é esse arquivo CSS que incluímos em nosso dub, dub, dub roots lib, Bootstrap, CSS. E então você verá que não há buffers lá, mas aquele em que você deseja focar seria o main.css ou o CSS de pontos. Tudo bem? Dot Min é apenas uma versão reduzida desse CSS. Mas a questão é que esse é apenas um grande arquivo CSS. Veja isso, todo esse arquivo CSS, um código CSS e um estilo, certo, só para que não precisemos fazer isso repetidamente. Podemos simplesmente usar sua folha de estilo e aproveitar sua experiência e seu trabalho árduo. Tudo bem, então este é um fim de semana inteiro, personalize o suficiente. Se quiséssemos adicionar uma imagem, isso mostra, tudo bem, se você quisesse uma imagem, você poderia fazer isso e adicionar seu logotipo. Acho que não vamos usar nenhum logotipo, mas quero ver como os esquemas de cores. Ok, vamos lá, para que você possa mudar a cor. Portanto, temos três opções. Temos azul escuro e temos luz. Tudo bem? Aqui, isso mostra as classes que podemos usar para cada uma. Então, na tag nav, se eu voltar para o meu layout, arquivo HTML CSS, minha tag de navegação, assim que a vejo, atualmente usando a luz de hífen da barra de navegação. Tudo bem, então se eu quisesse o tema escuro ou precisaria ver, hífen da barra de navegação é escuro. Oh, bem, esta é a primária primária, então isso me dará a azul. Então, se eu quisesse o escuro, eu usaria este. Então, se eu for aqui e ela soubesse apenas do hífen claro e bg branco até o hífen da barra de navegação escuro e Biji escuro. E então, se eu der uma olhada nisso, ele lançou meu terminal Control Shift e apóstrofo e depois dotnet. Vou apenas dizer dotnet watch. Agora veja bem aquela barra de navegação escura, adivinhe? Não, minhas mensagens não podem ser vistas. Certo. Porque o lar deveria estar aqui e a privacidade deveria estar aqui. Mas isso é preto sobre preto, então você pode ver. Tudo bem, então vamos ver o que o bootstrap recomendaria. Então eles recomendariam, bem, eles não estão me dizendo como colocar o texto em branco aqui, certo? Mas então eu posso procurar cores diferentes para o texto. Tudo bem? Estou apenas rolando porque estou vendo, estou tentando ver se eles têm algum exemplo aqui, qual é o único. Isso é bom. Mas se eu quiser modificar a aparência do meu texto, eles têm uma seção chamada topografia. Aí está, a tipografia está abaixo do conteúdo. E aqui eles nos dizem os diferentes estilos que podemos usar. Então, apenas inicializando sua tag H1, seus HDLs ficarão assim automaticamente. Você pode fazer com que pareçam exibições usando a tela da classe de um a seis. Isso é legal, mas eu gosto mais de cores diferentes. E me desculpe, isso não está na topografia, não deveria estar nas cores. Então, vamos começar a personalizar e ver as cores, certo? Aqui estão as cores diferentes. Agora, o legal do Bootstrap é que ele é muito consistente. Então, se você fizer o primário, você sabe, você vai ter aquele tom de azul, secundário, aquele tom de cinza, seda diz Danger , etc., etc. Então a luz nos dará um pouco de cinza, cor ligeiramente branca em geral. E você verá que tem uma paleta de cores completa. Se você quiser tons intermediários, pode obter todas essas cores sem precisar saber a combinação real, estou com dores de cabeça ou a combinação RGB. É isso que o torna tão conveniente. Tudo bem, agora, se eu quiser que meus textos tenham essa cor específica, posso, em meu código, ir para os itens de navegação que você vê aqui de uma classe ou no item nav, nav e, em seguida, no item nav de a tag âncora que realmente representa o roteamento, certo? Vou explicar o que isso é, B, controle e ação significam mais tarde. Não quero me concentrar nisso agora, mas quero mudar a cor do meu texto. Então, vou mudar essa tag âncora que tem o link de navegação da classe de hífen de texto, hífen escuro, hífen de texto claro. Tudo bem. Agora que alterei esse arquivo e ele não foi recarregado, deixe-me voltar. E boom. Não, é texto, luz de traço. Veja que é tão fácil mudar a cor quando me sinto confortável com as diferentes classes e as diferentes cores que estão disponíveis para mim no Bootstrap, é fácil para mim fazer a transição entre estilos quando eu preciso. 15. Modificando a página inicial: Tudo bem, então o que vamos fazer é modificar nossa página inicial. Então, voltando ao nosso documento de bootstrap, posso pular dois exemplos. Vou abrir isso em uma nova guia. E então, a partir dos exemplos, você vê aqui que eles têm diferentes tipos de amostras de seções que você pode adicionar ao seu site. Então, como você quer que sua foto tenha a qualidade que você deseja que ela tenha? Diferente. Hero Laos, recursos, unhas, etc. Eles até têm páginas inteiras que você pode usar e eu posso aplicar esta. Então, ele tem controles embutidos, como um carrossel, certo? Você pode usar esse modelo de login para o seu site. Você poderia usar todas essas coisas, certo? É só uma questão de saber onde colocar o código. Portanto, esses são filtros diferentes dos quais você pode aproveitar. Esses são cabeçalhos diferentes. Você poderia usar. Heróis, seções de heróis, certo? Com base no tipo de site que você está criando. Mas vou usar esse modelo de carrossel. Acho que isso seria um bom layout de página inicial para nosso sistema de gestão escolar. Ou podemos simplesmente inserir algumas imagens e colocar alguns textos adicionais, se necessário. Para obter a fonte que eu preciso nesta página. O que vou fazer é clicar com o botão direito do mouse e ir para Exibir fonte da página. E acho que visualizar o código-fonte da página deve ser uma opção que todo navegador, todo navegador moderno tem, certo? Então, a partir daqui, estou vendo a página HTML completa, que sabemos que não precisamos de tudo porque estamos apenas modificando nossa página inicial, então eu não preciso de tudo. Eu não preciso das, você sabe, dessas etiquetas. Eu só preciso dessa seção que é necessária para a visualização, certo? Podemos escolher o estilo porque acho que esses estilos são exclusivos do PID. Então, vamos usar esses estilos, certo? Mas não vou colocá-los em uma etiqueta de estilo. Em vez disso, o que vou fazer é colocá-los dentro do nosso arquivo CSS do nosso site. Tudo bem, então esses estilos podem entrar lá. E o que acontece é que se você quiser estender o bootstrap, como o que estaria acontecendo aqui. Se você quisesse estender o Bootstrap, não modificaria o arquivo bootstrap. Você simplesmente escreveria estilos que substituíssem o existente. Tudo bem, então vai pegar a luz do Dash. Se você quiser que seja de uma cor diferente, você pode colocar sua própria classe, em seu próprio arquivo CSS e ver se o ponto tira a luz do Dash. E então, colocar a sua, talvez ganhe cor ou o que quer que você queira mudar. E então ele substituirá esse arquivo, essa classe no arquivo Bootstrap original. Tudo bem, então eu só estou usando esses estilos porque talvez precisemos deles, é claro. E então eu estou rolando para baixo para ver onde o conteúdo começa. Então, o conteúdo, ou, na verdade, também há estilos personalizados para esse modelo. Deixe-me dar uma olhada nisso e eu vou pegá-los emprestados também. Tudo bem? Porque eu precisei deles para a página se parecesse com a demonstração. Então, vou pegar isso emprestado. Você pode ter vários arquivos CSS, é claro, mas vou colocar esse arquivo CSS do site, com todos esses estilos personalizados. Tudo bem? Eu também encorajo você a ler os diferentes estilos, porque aqui você verá que esse é um estilo corporal. E esse estilo corporal pode estender nossa substituição ao nosso estilo corporal existente. Então, pode ser que você os mescle. Você também pode simplesmente deixá-lo sozinho aqui, você verá que está adicionando uma parte inferior acolchoada e uma parte superior acolchoada. Então, nosso original é adicionar uma margem inferior, mas veremos como eles funcionam juntos e, em seguida, faremos os ajustes necessários. Tudo bem? Então, temos isso, temos o CSS para o nosso Um dos pH. Tudo bem, então estamos chegando lá devagar, mas com segurança. Em seguida, quero pegar esta seção que tem o conteúdo que eu preciso. Então, vou começar do carrossel porque lembre-se de que já temos uma seção média em nosso layout. Então, é importante notar essas coisas, certo? Eu tenho o div, que é o contêiner, e depois tenho esse principal. E então eu quero renderizar o corpo e renderizar o corpo me mostrará as vistas. Então, o que eu quero fazer é substituir o conteúdo na exibição pelo conteúdo que eu preciso, certo? Então, o conteúdo que eu preciso para a visualização realmente começaria depois dessa tag média e chegaria até isso significa Todd? Bem, aqui está a tag principal, mas depois do rodapé. Eu não preciso de um rodapé. Já. Tenha um rodapé. Certo. Então eu teria que vir até aqui. Então, deixe-me pegar esse Copiar e colar e vou colar isso dentro do meu arquivo HTML de ponto de índice. Tudo bem, deixe-me diminuir um pouco para que possamos ver que é um ângulo um pouco amargo, certo? Então aqui está nosso carrossel. E se você quiser documentação sobre o carrossel, mais uma vez, você sempre pode acessar site do Bootstrap para obter a documentação. Está abaixo dos componentes. E assim que meus olhos se ajustarem e, mais uma vez, se você não quiser passar por tudo isso, você sempre pode pesquisar no carrossel o que funciona. Estava ali mesmo. Então, como funciona, você verá aqui que essas são amostras de onde você pode obter um carrossel. Tudo bem? Se você quer um carrossel com botões de Bach e botões de avanço, bem, aqui está o código que mostrará o que você precisa substituir usando reticências, certo? E isso é individual e isso também é importante. Se você quiser mais, basta adicionar mais slides, adicionar mais seções como essa para cada item de carrossel ou imagem que desejar. Então você vê que é muito, muito flexível. Então, o exemplo que copiei meio que usa exatamente aquele exemplo que eu tenho, este na verdade tem botões. Este tem texto de espaço reservado para que eu possa adicionar legendas. Aqui estão minhas legendas. E então, em cada item, eu tenho a capacidade de mudar a imagem. Isso é caro, senhor, eu sei que ele está apenas usando alguns SVGs de incidentes de segunda-feira, que podemos mudar eventualmente. Em seguida, temos os botões de navegação. Também temos algumas seções em que eles têm uma classe boa de div e a chamam de aula de marketing. Aqui está o marketing, que tenho certeza que é uma das aulas que pedimos emprestadas. Aí vamos nós. Conteúdo de marketing. Aqui está a classe de marketing. Então, se precisássemos ajustá-lo, personalizá-lo de acordo com nossas necessidades, poderíamos modificar tudo isso se quiséssemos. Existem muitos espaços reservados e imagens para que possamos preenchê-los, é claro, então você tem o divisor de recursos e podemos adicionar o que você quiser. Agora que fizemos esse ajuste e eu ainda estou fazendo um relógio dotnet, caso você tenha parado o relógio dotnet desde a última lição, você poderia simplesmente iniciar um relógio dotnet. Mas quando passamos para pré-visualizar nossa página, é isso que obtemos. Tudo bem? Agora, alguns ajustes, é claro, serão necessários porque aqui vemos que temos um acolchoamento na parte superior que não queremos. Não queremos esse preenchimento acima da nossa barra de navegação. Então, vou voltar e modificar o CSS. É por isso que eu disse que devemos prestar atenção ao CSS e saber o que estamos adicionando e modificando. Então eu vou pegar toda aquela blusa acolchoada. E uma vez que eu vejo isso, isso é tudo que eu sei. Parece normal, certo? E então todo o resto parece bom para mim, certo? Assim, podemos ter uma legenda alinhada ao centro. Podemos sobrescrever uma legenda alinhada. Podemos ter uma legenda alinhada à esquerda. E, claro, essas são imagens que podemos mudar. Tudo. Esses são conjuntos de textos que podemos mudar de antigamente. E podemos colocar nosso conteúdo, pois precisamos colocar onde costumo obter algumas imagens em pixabay.com. É uma excelente fonte para algumas imagens interessantes, uma vez que não as usamos comercialmente nem damos créditos ao artista ou a quem quer que seja o crédito da imagem. Então eu posso tirar algumas dessas imagens. E o que vou fazer é não baixá-los. Vou apenas resolvê-los. Não vou baixá-los, mas temos a opção de baixar um e mostrar como colocamos uma imagem em nosso projeto. Mas vou incorporar os outros dois diretamente do site para que eu possa fazer o download gratuito e baixar aquela pequena imagem do TPR 12 80. Você também pode reduzi-lo. Então, vamos usar 12 80 por 853 para este. Blackboard, não, eu não sou um robô. Através das garotas, é claro. Em seguida, baixe o arquivo. Tudo. Agora, o que eu gosto de fazer é arrastar o arquivo do navegador para o código do Visual Studio e nada que seja um recurso muito, muito legal de aproveitar, certo? Assim, depois que o arquivo for baixado, posso arrastá-lo e soltá-lo dentro do Visual Studio Code. E onde eu quero, está dentro da pasta raiz real do dub dub. E, por extensão, eu o gostaria em uma pasta de imagens, então simplesmente o arrastei. É conhecer dub, dub, dub roots. Tudo bem. No entanto, não quero que fique lá, tudo está organizado. Eu quero me manter organizado. Então, vou clicar com o botão direito do mouse em dub, dub, dub root para criar uma nova pasta, vou chamá-la de imagens. E então eu posso arrastar essa imagem para dentro. Em seguida, eu renomearia a imagem. Portanto, em meu curso on-line, sempre certifique-se de que é melhor renomear a imagem da forma mais conveniente possível. Então, Blackboard. Tudo bem, esse é o nome da imagem que vi na minha opinião. Eu sei modificar. Deixe-me diminuir um pouco o zoom para que eu possa navegar um pouco mais rápido. Agora posso modificar a imagem que está sendo usada em um dos itens do meu carrossel listado no primeiro carro, então item está usando esse SVG. Eu não quero esse SVG. Então, vou fazer uma combinação de ver como deveria ser. Então, aqui está a aparência da imagem do item do carrossel no código. Tudo bem? Mais uma vez, ele está apenas usando vários espaços reservados nos exemplos, compreensivelmente, mas vou usar isso e substituir esse SVG. E então, para a imagem SRC, vou colocar tilde lá. Então, até o, esse é o símbolo espanhol. E apenas informe de onde estou obtendo essas informações. Se eu voltar para o meu layout, você verá aqui, isso é tudo o que fazemos referência a um arquivo que está na pasta lib nas raízes dub, dub, dub, dub, certo, então live jQuery, jQuery min, aqui está jQuery, aqui está isso, aqui está o arquivo. Tudo bem. Então, se eu quisesse uma imagem da pasta de imagens e a mesma dub, dub, dub root, devo dizer que é tilde slash. E então seguimos o caminho, então corte as imagens, corte. E então eu vou dizer quadro preto, pontos, GP. Tudo bem? E então eu vou transformar isso em uma alternativa, basta ver uma imagem de quadro negro. Tudo bem. Agora, quando eu voltar à minha visão, deixe-me atualizar. Tudo bem, então aqui está nossa página inicial. Sabe que temos aquela lousa, certo? Uma vez, se eu quisesse mudar o título, saiba, então, para o título do texto aqui, título de exemplo, sistema School of Management. Tudo bem, então textos representativos. Então você vê que estou apenas pegando o código existente, estou modificando-o para o Havaí, eu preciso dele. E às vezes é assim que começamos até ficarmos cada vez mais criativos e cada vez mais confortáveis. Melhor sistema de gestão escolar baseado em ESP, dotnet, MVC, Alright, b.net, Core six, são sete. Porque o que estamos fazendo é reutilizável, tudo bem, assim que eu começar a falar sobre a gerência, tudo bem, vamos lá. Portanto, nenhum sistema de gestão escolar, sistema de gerenciamento de vesículas, inscreva-se hoje. Isso não faz nada, mas acho que é bom colocá-lo lá caso você esteja construindo seu produto. Então esse é o nosso primeiro slide. Assim, você pode realmente fazer as mesmas etapas com as outras imagens, se quiser. Quando eu disse que não iria baixá-los, o que eu pretendia fazer quando disse que foi copiado o link da imagem. Então, depois de copiar o link da imagem, ele é um link direto para a imagem hospedada, então não preciso copiá-lo. É um CDN, então eu poderia simplesmente incorporá-lo sem baixá-lo. Então, se eu for para o próximo item do carrossel e substituir essa tag SVG por aquela tag de imagem. E então, para o SRC, vou usar esse link CDN. Tudo bem? E foi isso que eu coloquei lá. Tudo bem? E então essa será uma imagem geométrica. Então, quando eu volto e olho, tudo bem, aqui está nosso Blackboard e depois aqui está nossa imagem de geometria. E esse é meio barulhento. Então, você pode querer avaliar como ele funciona com a legenda, certo? E depois crianças na Índia? Sim, copie o link da imagem. E queremos alguma representação das crianças que estarão nessa escola, certo? Então, essa é a modificação final que estou fazendo e estou apenas estragando um pouco até me orientar. Certo. Então, lá vamos nós. E deixe que tenhamos modificado nossa página inicial para parecer algo parecido com o que queremos. Tudo bem. Também vou remover a seção de legenda da imagem geométrica. Acho que não precisamos dessa legenda. Leva o mínimo. Então, vou remover as duas tags P, são apenas as tags H1 e p. E vou deixar o botão que diz Saiba mais, certo? E para as crianças, um, estudantes inteligentes. Tudo bem? E de todo o mundo. Tudo bem. Só estou mostrando, sei que podemos navegar na galeria. Bom. Então, acho que essa é, na verdade a página de modelo inicial perfeita para esse tipo de sistema. Tudo bem. Eu preciso ser um estudante inteligente com essa ortografia. Peço desculpas pelo canto principal. Aí vamos nós. Tudo bem, então eu vou embora, eu vou deixar você ir em frente e personalizar o resto dessas seções, certo? E, na verdade, trata-se apenas de olhar e prestar atenção ao código. Tudo bem, então se você simplesmente percorrer e dar uma olhada, aqui está a seção de marketing. Aqui estão os espaços reservados, SVG. Você pode substituí-las por suas próprias imagens que desejar nelas, nesses pequenos círculos. Aqui está o título, aqui está o texto abaixo do título e o botão Exibir detalhes, certo? Portanto, com base no tipo de produto que você está criando, você pode modificar essas seções representar mais o que você precisa. Você também pode simplesmente remover essa seção. Pode ser que você não queira essa seção no site. Sei que já sabemos como adicionar nossas imagens. Então, para esses espaços reservados de 500 por 500 aqui, as tags SVG mais uma vez que podemos substituir. Tudo bem, então vá em frente e explore e divirta-se com isso. 16. Adicionando uma página sobre nós: Tudo bem, pessoal, então, nesta lição, vamos dar uma olhada em como podemos criar nossa própria página. Então, agora temos uma casa onde eu tenho privacidade ou se quiséssemos uma página Sobre nós? Como vamos adicionar isso? Então, vamos voltar ao Visual Studio Code. E vou começar com um controlador. Temos o controlador doméstico e sabemos que o controlador doméstico nos permite navegar, indexar e ter privacidade. E temos o terceiro botão de opção. Tudo o que precisamos é nosso, não construído em um, certo? Então, vou primeiro criar resultados de ações públicas seguindo os modelos das anteriores. E então eu vou chamá-lo de barco. Então isso significa que eu quero uma página chamada barco. Tudo bem, então o oxigênio precisa ver um barco. E então, todo método de resultados de ação precisa voltar à exibição. Eu gostaria de fazer isso. Esse é o esqueleto que eu faço primeiro. Antes de começar a escrever a mágica. Garden disse que este é um poço simples, então não haverá mágica neste em particular. Mas agora temos a visão, desculpe, de jeito nenhum eu tenho o leilão no controlador. Saber. Se eu tentar navegar até lá. Tudo bem, e eu vejo slash, home slash ou boats, então você receberá esse tipo de erro, pelo menos enquanto estiver testando. Então, vai dizer que é uma exceção de operação inválida. A vista da morada não foi encontrada e esses foram os locais pesquisados. Ele procurou na barra inicial um arquivo chamado barco, faz CSS HTML. Também é uma barra de visualização, barra compartilhada sobre isso. Cse é OGM. Então, em essência, é por isso que erro não precisa necessariamente estar na pasta inicial. Ele pode ser compartilhado porque o erro pode ser encontrado lá. Portanto, sempre que dizemos exibição de retorno, ele automaticamente procurará nesses locais a visualização que estamos retornando por um arquivo com o nome da visualização que dissemos que retornaremos. Então, como não conseguiu encontrá-lo, ficou louco. Então, avise-nos, volte e crie esse arquivo. Então, vou clicar com o botão direito do mouse em casa, certo? Não percebi que essas pastas geralmente têm uma cenoura e os arquivos amanhecem. Tudo bem, isso pode ficar confuso, especialmente quando você está arrastando e soltando, como quando arrastamos e soltamos o Blackboard. Mas ele começa a destacar os diferentes blocos e seções de arquivos. E você verá essas linhas ao longo do caminho. Portanto, tenha cuidado com essas coisas. Então, vou clicar com o botão direito do mouse e dizer novo arquivo, e colocarei o nome de boat dot CSS HTML. Pressione Enter e agora eu tenho meu arquivo de visualização. Agora é um arquivo vazio, mas digamos que eu queira seguir uma sugestão de, ok, quais são as primeiras coisas que eu preciso no arquivo? Posso ver os modelos dos arquivos que o precederam. Aqui, vejo que há uma seção de visualização de dados para o título, então posso adicioná-la na parte superior. Certo. Isso me permite definir o título da página que deve aparecer na exibição. Porque lembre-se que no layout, esse é o título, certo? Então, ele verá o que está nos dados de visualização no momento. Passe o nome do site, esse é o título que a página aparece, Senhor. Portanto, posso especificar que esta é a página Sobre nós. Tudo bem, então tudo o que preciso fazer é colocar o HTML. Eu quero essa visão, improvável que tenhamos visto que não precisamos todos os modelos de HTML e tudo mais, só precisamos de coisas específicas. Então, vou voltar aos nossos exemplos para sites Bootstrap. E vou escolher um exemplo muito simples. Eu vou usar essa capa, certo? Então, se eu pular para este modelo de cava, eu realmente só quero esse texto. Eu só quero o texto que está lá. Vou apenas dizer Exibir fonte da página. Eu não vou entrar no conjunto usando todos os estilos e assim por diante. Na verdade, estou interessado apenas no que está nesta seção principal. Tudo bem, então pegue e eu vou colar aqui. Tudo bem. Então eu posso mudar o texto para que sejamos capazes. Mantenha a empresa de desenvolvimento da Pebble. Tudo bem? E você pode colocar em qualquer parágrafo que quiser para ver como tanto a empresa quanto você pode ver , entre em contato conosco, contato para obter mais informações. Tudo bem. Não estou necessariamente focando em todo o HTML sofisticado que podemos inserir. Só estou te mostrando como podemos juntar as peças. Um site de aparência decente para o aplicativo MVC. Então, se atualizarmos lá, veremos nosso texto corretamente. Agora. Como faço para chegar aqui? Certo, além de digitar a barra inicial ou ambas? Como faço para chegar a esta página? Como eu o digitei manualmente, mas não podemos esperar que nossos usuários saibam que precisamos digitar o botão, precisamos dar a eles uma maneira de serem duplicados. Portanto, é da mesma forma que eles podem chegar em casa e ter privacidade. Tudo bem, então o que fazemos é modificar a seção de navegação. Então, vamos voltar para o nosso layout.css, HTML. E aqui estão, há itens suficientes, então temos itens para casa, vou ter itens suficientes para privacidade. Então, eu preciso de outro item de navegação e estou disposto a colocar sua privacidade hormonal intermediária. Tudo bem. Esse, tudo o que fiz foi copiar e colar. Então, acabei de destacar um dos itens de navegação, Open, LI, anchor tag, close ally, copy e depois cole. Tudo bem, nada de especial. Ao fazer isso, afirmo que sim, assume a consistência das luzes do Dash, então não estou digitando do zero sem correr o risco de errar, apenas copiando, colando e reutilizando. Não, não vi que examinaremos quais são esses atributos do SP. Portanto, esses não são atributos HTML regulares. Esses são ajudantes de etiquetas de barbear. Tudo bem? Então, para a tag âncora, temos um auxiliar que nos permite especificar uma área. Uma área é uma aplicação especial, literalmente, especialmente para a era e para a web. Não temos nada disso, pelo menos ainda não. Então você não precisa se preocupar com isso. Tudo bem? Mas nós temos um controlador. Qual é o controlador o qual você gostaria de navegar? Então, em HTML normal, você teria que ler H ref é igual a e, em seguida, tentar descobrir a barra, essa pasta, cortar aquela pasta para chegar ao arquivo desejado. Tudo bem. Em um ambiente dinâmico como esse, dotnet Core facilitou para nós a figura sem nenhum tipo de navegação, certo? Porque ele sabe que está usando controladores e visualizações. Na verdade, podemos especificar que queremos ir para esse controlador. Podemos ver a casa porque ainda estamos usando o controle doméstico. Qual ação você quer? Então, quando você acessa, ao clicar em página inicial, a tag de âncora inicial, ela deve ir para o controlador doméstico e para a ação de índice. Quando você clica na etiqueta âncora de privacidade, ela deve ir para o controlador doméstico e para a ação de privacidade. Lembre-se de que a ação é o método definido aqui que deve retornar a exibição. Então, se eu quiser ir para a página Sobre, preciso acessar o controle inicial deles e a ação sobre. Então, eu posso modificar isso no código e vou usar este. Então, a ação que vou fazer é um parafuso e o texto que espero ver no ísquio é um software de parafusos fazendo essas modificações. Quando eu recarrego o site, logo recebo um erro 500. Oh, eu percebo que às vezes quando você modifica e está reconstruindo e você muda para a janela, na verdade ela fica meio Frisco até o dia você não pode trocar enquanto eu estou reconstruindo. Deixe-o reconstruir um pouco antes de trocar. Tudo bem, acabei de dizer que sim, reinicie e saiba que foi reiniciado. Posso voltar e recarregar o site. Aí vamos nós. Sei que vejo meu novo URL, link do nosso menu, em vez disso, quando clico nele, ele navega até o controle inicial e a ação sobre, que retornará nossa página sobre nós. Tudo bem, então é fácil realmente configurar suas visualizações e sua navegação entre suas visualizações e as diferentes seções do seu aplicativo. 17. Adicionar ao GitHub: Tudo bem, pessoal, então atingimos outro marco e agora temos uma melhor compreensão de como nossas visões o layout e tudo se combinam. Adicionamos imagens, modificamos nossa visualização inicial, adicionamos novas visualizações. Eu não conhecia as ações do nosso controlador e acabamos com alguns arquivos novos e alguns arquivos modificados. Então, agora precisamos fazer o check-in ou nos comprometer com nosso sistema de gerenciamento de controle de origem , o que é bom. Então, apenas por meio de dicas visuais, qualquer coisa que seja verde tem um UV configurado para significar que não está rastreada, o que significa que é um novo arquivo que não conhece. Então, toda vez que você adiciona um arquivo, ele fica sem controle e fica verde. E então, uma vez que o arquivo exista desde a última galinha e você tenha feito modificações, ele será laranja ou âmbar e aparecerá modificado, certo? Assim, podemos ir até nossa guia de controle de origem, onde eles nos informam sobre nossa guia de controle de origem, onde as diferentes mudanças. E a partir daqui, podemos realmente especificar se queremos que seja, como ignorar, podemos desfazer as alterações, podemos adicionar algo específico. Em primeiro lugar, gitignore. Às vezes, queremos fazer isso se tivermos arquivos de configuração que não queremos uma galinha, certo? Poderíamos adicioná-lo ao gitignore. Poderíamos fazer como um estágio, como se você quisesse cometer algo nulo, mas não tudo. Poderíamos dizer. Estágio. Como eu disse, se, se você fez mudanças, mas não as quer mais, pode simplesmente dizer descartar as alterações. E você pode até mesmo fazer uma comparação. Então, você pode dizer que abra as mudanças e isso realmente mostrará uma comparação lado a lado entre a existência de aves aquáticas e o que elas não são, desde que você fez suas modificações. Então, essas são ferramentas que podem nos ajudar a garantir que não estamos verificando suas próprias coisas e que estamos definitivamente no caminho certo com as mudanças que esperamos ter feito. Agora, podemos ver visualizações e layouts de sites adicionados ou manipulados, certo? Então essa é a nossa mensagem de frango. Então, qualquer pessoa que apareça e veja nossas mudanças pode nos dar uma sinopse do que aconteceu com esse compromisso. E vamos apenas nos comprometer e pressionar. Tudo bem, agora que resolvemos esta seção, nos vemos na próxima lição. 18. Conecte-se ao banco de dados com o Azure Data Studio: Tudo bem, pessoal, nesta lição, vamos criar nosso banco de dados que usaremos como a espinha dorsal do nosso Sistema de Escola de Gestão. Saiba, vamos começar abrindo nosso Azure Data Studio. E vou usar a imagem do docker para nosso Microsoft SQL Server que instalamos a partir de atividades anteriores. É aí que criaremos nosso banco de dados. Então você pode revisitar isso. Ouça só para ver como você abriria o Darker e lançaria esse banco de dados. Mas eu já tenho mais escuro e vou explicar algumas coisas para o caso de você parar o contêiner a partir desse momento. E você precisa se familiarizar com o buraco para começar a funcionar. Tudo bem. Assim, você pode abrir sua área de trabalho Docker. Desta vez, vou usar a área de trabalho em vez da CLI. E, abaixo da seção Contêineres, poderíamos ver todos os contêineres que temos atualmente. Então você provavelmente só tem um. Isso é bom. Eu tenho vários. Tudo bem, mas aqui está o que criamos anteriormente, que é o contêiner do Microsoft SQL Server. Certo? Agora, antes de clicar em executar ou iniciar, eu só queria ressaltar que, caso você tenha esquecido algumas das configurações que colocou lá, você pode realmente voltar verificar todas as configurações. Então você pode realmente examinar a inspeção. Ao clicar duas vezes nele, você pode ir para Inspecionar. E então, no ambiente, você verá as variáveis de ambiente que adicionamos passadas quando as configuramos. Então, eu realmente esqueci minha senha. Certo? Essa é a postura que eu usei. Então, posso simplesmente copiar isso e ter isso em mente, pois precisarei dele quando estiver me conectando. E lembre-se de qual é o número do relatório que você colocou, aquele número de suporte que você está tentando conectar a alguém para iniciar esse contêiner. E eu posso assistir à tela de registros só para ver se ela está iniciando com sucesso e se não há erros em nenhum lugar. Isso é bom. Agora, quando estiver em funcionamento, e se eu voltar, veja aqui que está verde, então está funcionando e está transmitindo na porta 1.400. Não, posso me conectar a ele usando o Azure Data Studio. Então, no Azure Data Studio, posso clicar nessa nova conexão. Você pode não ter tantas conexões quanto eu. Isso é bom. Mas a partir daqui, vou ver como Microsoft SQL Server do tipo Nixon é um host local. E então, quando estamos usando recursos visuais, desculpe, quando estamos usando o SQL Server, use uma vírgula para a porta, certo? Então, vírgula localhost e, em seguida, 1.400. Tudo bem? O tipo de autenticação é login SQL. O nome de usuário é SE, conforme configuramos por padrão ou como sabemos por padrão. E nossa senha é a senha que você usou. E então, quando eu fizer tudo isso e clicar em Conectar, ele me avisará que precisa um certificado confiável para que eu possa simplesmente habilitar o certificado do servidor de certificados de confiança. E uma vez que eu faço isso, não, eu estou conectado. Portanto, eu tenho o coma de 1.400 localhost conectado como SE. E agora posso manipular todos os ativos desse servidor. O interessante disso, o Your Data Studio, é que ele permite até mesmo categorizar sua conexão. Então você vê aqui que eu posso limpar algumas das minhas categorias. Eu posso simplesmente criar um novo grupo de servidores. E eu vou dizer como o Azure. E então eu posso arrastar todos os meus olhos, suas conexões, para esse grupo. Tudo bem, então eu tenho menos barulho e posso encontrar o que eu quero que seja mais facilmente. Eu posso derrubá-lo. E então eu posso criar outro para o local. Tudo bem? E então eu posso colocar aquele anfitrião local lá. Eu poderia até especificar que um é mais sombrio do que este não é médico. Então, essas são todas as minhas instâncias locais. Como você pode ver, eu tenho várias instâncias locais e, inadvertidamente, me desconectei da mais escura. Então, vou voltar ao passado E agora me lembro do parser desta vez, então não preciso fazer isso todas as vezes. E você verá aqui que eles estão vendo que deveria criptografar a conexão. Eu posso dizer verdadeiro ou falso. Confie no certificado do servidor, nesta clínica. E eu estou pronto para ir novamente. É assim que nos conectamos ao nosso banco de dados usando o Azure Data Studio. Agora, quando voltarmos, começaremos a criar o banco de dados. 19. Criar banco de dados: Tudo bem, então vamos começar a criar nosso banco de dados. Então, vou abrir uma nova consulta e essa nova consulta será contra nossa conexão. Sempre podemos mudar a conexão pegando essa conexão e escolhendo a outra conexão que queremos. Mas tudo bem. Vamos continuar como está agora. Você notará que essa interface de usuário é muito semelhante à interface do Visual Studio Codes. Tudo bem, então podemos controlar muitos atalhos de teclado , um controle próximo menos. Podemos conectar as conexões para decidir nos dar mais espaço. Portanto, é uma interface de usuário muito familiar , muito limpa e fácil de usar. Agora vamos criar um banco de dados chamado banco de dados de gerenciamento escolar. Tudo bem? E esse banco de dados é um pouco baseado no banco de dados que foi usado no meu curso de SQL. Então você pode conferir isso. Se você não está muito familiarizado com o SQL e o SQL Server , pode conferir esse curso. No entanto, se você já tem algum conhecimento de banco de dados e se sentirá em casa. E vou explicar à medida que avança , só para que você possa acompanhar. Portanto, a primeira declaração que queremos escrever é criar banco de dados. E isso nos permite especificar o nome de um banco de dados que gostaríamos de criar. Tudo bem, então vamos querer criar um banco de dados chamado banco de dados de gerenciamento escolar. Em seguida, temos que especificar uma meta. E então temos que usar o banco de dados que acabamos de criar agora. E escrevendo um roteiro, podemos executar cada linha. Então, eu posso destacar isso e dizer Corra, e depois destacar isso e dizer correr. Porque o que está acontecendo é que quando chega aqui, isso não existe, certo? Então, até que esse seja Ron, isso não existe. Então, veremos aquela linha vermelha ondulada representando um erro. Mas tudo bem, porque podemos simplesmente escrever o documento inteiro e ele será executado a partir da linha um, linha dois, linha três e depois de todo o resto. Portanto, não precisamos nos preocupar com aquela linha vermelha ondulada, certo? Não. Em seguida, vemos criar tabela. No primeiro dia disso, vou criar um aluno, tudo bem. Então, crie alunos de mesa e ela abrirá e fechará parênteses. E aí vamos especificar algumas colunas. Então eu vou dizer id INT. Sempre recomendo que, ao criar um banco de dados, você sempre tenha uma coluna de ID de chave primária gerada pelo banco de dados. Tudo bem? Então, aqui estou vendo que id é inteiro, é uma chave primária e deveria ser uma coluna de identidade. Identidade significa que ela será automaticamente incrementada à medida que avança. Depois, outras coisas que os alunos terão, nosso primeiro nome, sobrenome, data de nascimento. E, na verdade, vou apenas conectá-los. Tudo bem, então eu não te aborreço com a digitação. Você pode pausar e replicar essas colunas adicionais. Primeiro nome, estamos usando n var char 50 e não é permitido ser nulo, certo? A mesma coisa com sobrenome, data de nascimento. Veremos os dentes e permitiremos que seja nariz. Não vou especificar um que não seja nulo. Então isso significa que se eu souber que entra aqui, tudo bem. Tudo bem? Então, a próxima mesa que teremos são palestras. Para palestras, vou fazer o mesmo tipo de declaração, exceto que estamos usando apenas FirstName e LastName. Tudo bem, então eu poderia realmente ter copiado esse espaço que transformava os alunos em palestras e removesse o ritmo. Você verá que eles são muito semelhantes em estrutura. E então o último que queremos é um a quatro cursos. Então, como eu disse, é um sistema de gestão escolar para uma pequena escola. Eles só querem poder rastrear quem são os alunos. Eles querem rastrear quem são as palestras. E então eles queriam acompanhar quais cursos estão sendo oferecidos. Qual o nome do curso? Qual é o código do curso? E essa neve terá uma restrição única. Isso significa que dois cursos nunca devem ter o mesmo acorde. Tudo bem? Provavelmente, isso também pode ser exclusivo para o nome, mas as regras de negócios orientarão essas decisões. E então o número de créditos que esse curso terá. É um sistema de gestão escolar simples, muito, muito simples. Então, agora criamos nosso script de banco de dados. Eu sei que queremos realmente criar o banco de dados, porque se voltarmos e olharmos, os bancos de dados estão vazios. Então, quando clicarmos em Executar, como eu disse, ele percorrerá todo o script e criará nosso banco de dados. Então, obtemos essas dicas visuais que iniciaram a execução e, em seguida, tudo foi concluído com sucesso. Então, se eu atualizar bancos de dados, fui ver meu EB de gestão escolar e, em seguida, posso detalhar e ver as tabelas que estão lá. Tudo bem, então é fácil criar um banco de dados usando scripts. E o legal dos scripts, caso você não esteja muito familiarizado com SQL e script funcione, é que eu posso salvar esse arquivo e reutilizá-lo posteriormente, certo? Portanto, é apenas um arquivo de script. É apenas um arquivo de texto que contém instruções sobre como o buraco para criar um banco de dados, posso salvá-lo no meu sistema de arquivos local. Se eu precisar desse banco de dados novamente, posso alterar o nome aqui ou, mais uma vez, ele percorrerá todos esses cenários em meu curso de SQL. Agora, eu tenho o banco de dados criado. Meu próximo objetivo é realmente conectá-lo ao meu aplicativo. Então, o banco de dados e ele está sendo executado de forma mais escura estão facilmente em outro servidor, certo? Isso realmente não importa no grande esquema das coisas. O que importa, porém, é que eu preciso meu aplicativo veja esse banco de dados e possa interagir com ele. Então, veremos como podemos aproveitar uma biblioteca chamada Entity Framework para fazer isso com nosso aplicativo web. 20. Banco de dados de andaimes com o Entity Framework: Tudo bem, pessoal, então criamos nosso banco de dados e tudo o que precisamos para nos conectar a ele por meio de nosso aplicativo. E há poucas coisas que precisamos adaptar ou aplicar para facilitar isso. Então, ele usará o Entity Framework, que é incorporado pela Microsoft em nosso carro-chefe ou para conectividade e manipulação de bancos de dados. Portanto, ORM é a abreviação de mapeador relacional de objetos. Acesse o Entity Framework em nosso projeto, podemos ir para o arquivo CSS. Poderíamos adicioná-los manualmente aqui, mas na verdade usaremos apenas a CLI dotnet. E você pode ver o que acontece nesse arquivo CSV quando executo esses comandos. Então, o comando que vou executar é apenas aumentar e aumentar os realistas, apenas aumentar e aumentar os realistas sejam imóveis e o tamanho da tela. Então, o comando que estamos executando aqui é dotnet add package. Tudo bem? E o que isso fará é entrar em contato com o gerenciador de pacotes chamado New gets. Você entrará em contato com novos repositórios git e obterá o pacote, a versão mais recente do pacote. Se não especificarmos, nesse caso, não vou especificar uma versão. E o que vou tentar obter é o pacote para o Microsoft dot Entity Framework Core SQL Server. Neste pacote, podemos simplesmente mergulhar no dotnet add package Microsoft, mas Entity Framework, Core SQL Server. Neste pacote, ele tem todos os conectores e todo o código que precisamos para facilitar a comunicação com um banco de dados do SQL Server. Entity Framework é de código aberto, é multiplataforma e também tem suporte para diferentes tipos de bancos de dados. Portanto, se você estiver usando sequel light, Postgres ou MySQL, existem bibliotecas que são extensões em pacotes, em vez de Entity Framework Core para esses bancos de dados específicos. Nesse caso, estamos usando o SQL Server. Então, vou colocar isso e pressionar Enter e esperar alguns segundos. E então ele vai sair e ele vai baixar aquele bolso do NuGet e eles estão no arquivo RCS bridge, você vê um novo nó aparecendo informando que sabemos que temos uma referência de pacote para a biblioteca que acabamos de criar a ferramenta de referência, e a versão é 7.0. Tudo bem, o Entity Framework Core seven é compatível com dotnet seeks. Portanto, mesmo se você estiver usando dotnet eks, você pode usar a versão sete do Entity Framework Core. Agora, outro pacote que eu quero instalar antes de seguir em frente seria projetado. Então, vou pressionar para obter a Lira e o comando mais recentes. E então vou remover o SQL Server do comando e substituí-lo pela palavra design. E então eu pressiono Enter. E então ele fará a mesma coisa, contato, pegará o pacote e, em seguida, atualizará nosso arquivo CSV com esse nó. Então, aqui você verá que ele tem mais algumas coisas para adicionar além da referência do bucket, mas tudo bem. Então, agora que temos o Entity Framework em nosso projeto, precisamos adicionar o que chamamos de cadeia de conexão. Portanto, a cadeia de conexão é como um endereço ou tem uma série de instruções que permitem ao aplicativo ou como ele pode se conectar ao banco de dados. Então, isso está em nosso arquivo up settings.js, JSON. Aqui. Vou apenas modificar isso, e isso é apenas um arquivo JSON normal, certo? Então, é a sintaxe do CMG. Sabemos que é um par de valores-chave. As cadeias de conexão são uma seção. Então, você pode realmente começar a digitar as cadeias de conexão e pressionar Enter e ele as preencherá para você. Deixe-me fazer isso de novo. As cadeias de conexão entram e ela preenche, ela segura. Tudo bem? Então, dentro das cadeias de conexão você pode ter vários bancos de dados. Assim, você pode ter quantos pares de cadeias de conexões com valores-chave precisar. Essa primeira cadeia de conexão que vou precisar para este aplicativo é aquela que se conecta ao dB de gerenciamento escolar. Então, abra e feche aspas. E aí eu estou escrevendo o nome da string de conexão, que é a conexão de banco de dados da School of Management. Tudo bem, então temos os valores, então, dois pontos e, em seguida, abrir e fechar aspas. Então, aqui é onde realmente colocamos a cadeia de conexão. Portanto, nossa string de conexão dirá que servidor é igual e, em seguida, o endereço do servidor, que em nosso caso é localhost vírgula 1.400, porque estamos usando nosso banco de dados hospedado mais escuro que configurado. No entanto, esse é apenas o endereço do banco de dados. Então, se eu estivesse usando minha instância de host local, eu diria localhost. Se eu estivesse usando minha instância do SQL Express, eu diria SQL Express, certo? Então, se você estiver usando o SQL Express e não estiver mais escuro, é assim que esse endereço seria. Tudo bem, então estou usando darker, mais uma vez, localhost 1.400. E então especificamos o banco de dados. O banco de dados aqui, acho que o chamamos de gestão escolar. Eb sempre pode voltar e verificar como você o chama. Então, isso é banco de dados. E observe que estamos usando ponto e vírgula. E então temos que ver uma conexão confiável no placar. Portanto, temos que declarar se é ou não uma conexão confiável, o que neste momento vou dizer apenas falso, porque o banco de dados está procurando determinados requisitos de segurança sejam atendidos e podemos reservar isso para mais configurações de produção do que quatro empreendimentos sentados. Então, por enquanto, vou dizer que isso é falso. E então temos outra configuração que diz vários conjuntos de resultados ativos. E isso basicamente especifica se várias conexões são permitidas simultaneamente. Sim. E então a última é criptografar igual a falsa. Bem, não finalmente, mas a última relacionada à segurança é criptografar é igual a quedas, especialmente no EF Core. O que acontece é que, na versão mais recente do EF Core, o padrão será verdadeiro, então você deve declarar especificamente que é falso, ou isso assumirá que está criptografado e então, se não estiver configurado corretamente, sua conexão não será concluída. Essa conexão apenas definirá essas duas quedas em nosso ambiente de desenvolvimento. Em seguida, precisamos especificar o nome de usuário e a senha. Agora, essa parte é opcional. ID de usuário e senha são opcionais se você estiver usando o SQL Express ou se estiver usando uma instância do SQL Server instalada localmente, isso significa que o padrão será a autenticação do Windows em você não precisa especificar um ID de usuário e uma senha. No caso de você precisar usar um usuário como se estivesse usando o SQL Login, se você o configurou dessa forma ou usando o Docker, onde não há nenhuma opção real de fazer o contrário, então você definitivamente terá que especificar o ID do usuário. E então você terá que especificar a senha e eu esqueci minha senha. Deixe-me voltar para o escuro e olhar na minha imagem. Aí vamos nós. Continue clicando no lugar errado. Então, estou emprestando esse valor de senha para minha string de conexão porque de qualquer forma que eu me conecte a ela, é assim que o aplicativo precisará se conectar a ela. Então, essa cadeia de conexão é como realmente nos conectaremos ao banco de dados e obteremos o banco de dados. Então, nesta lição, não estamos apenas criando uma cadeia de conexão, mas também o que causará tosse, incorporando o banco de dados em nosso aplicativo. Adotamos o que chamamos de abordagem que prioriza o banco de dados, que significa que criamos um banco de dados e depois um banco de dados e depois conectaremos o aplicativo a ele. A alternativa, pode ser que tenhamos esse aplicativo e usemos código, significa que estamos escrevendo código, classes e modelos. E depois usar isso para informar o banco de dados sobre sua aparência. Isso é chamado de Code First. Outros cursos em que mostro código para nós , este curso, tenho certeza de que primeiro é o banco de dados, para que possamos ter uma ideia de como podemos inserir um banco de dados existente, porque muitas vezes o banco de dados é já existe e precisamos atualizar o aplicativo ou criar um aplicativo para o banco de dados. Precisamos conhecer um todo para examinar um banco de dados existente e modelá-lo em nosso aplicativo. Então, eu vou fazer apenas o CLS. Portanto, temos uma nova janela de terminal aqui. Vocês são destruições. E então vamos escrever um novo dotnet. Estêvão. Mas antes de fazer isso, na verdade precisamos instalar o conjunto de ferramentas EF em nossa CLI dotnet. Então, preciso dizer dotnet new install e depois vou instalá-lo globalmente. Então, hífen, hífen global. E então a ferramenta que estou instalando se chama dotnet high F e E f. Então, uma vez que eu faço isso, você pode ver que eu já a tenho instalada. Então, meu dotnet CLI já tem isso instalado, mas o seu provavelmente seguirá em frente e realmente obterá todas as bibliotecas de suporte para essa ferramenta. Feito isso, no entanto, agora podemos prosseguir com nossas operações de andaimes dotnet EF. Portanto, podemos dizer dotnet EF BB context. Tudo bem? E então dizemos andaime. Um andaime significa que estou vendo o que existe e depois fui modelá-lo no aplicativo. E então, para confundir, o que eu preciso é a string de conexão. Então, vou copiar essa mesma string de conexão que acabamos de colocar nas configurações do aplicativo, esse arquivo JSON. E eu vou colar aqui. Tudo bem, bonito e simples, mas nós já o escrevemos. E espero que já esteja correto, certo? Depois disso, veremos qual driver ou tipo de banco de dados. Então, eu tenho que especificar o tipo de banco de dados por meio da biblioteca, do mar e da Microsoft, exceto Entity Framework, Core dot SQL Server. E não tenha medo de copiar e colar, pois isso é muita digitação. Mesmo assim, você pode voltar para o arquivo de brocha do USCS, copiá-lo e depois colar É o que o torna mais eficiente. Em seguida, vou especificar que quero que isso seja enviado para um diretório chamado data. Tudo bem, então eu posso ver o hífen 0. Em seguida, indique o nome da pasta que é data. Então, mais uma vez, isso significa que dotnet EFL gostaria de entrar em conflito com o contexto do banco de dados. Onde quer que esse banco de dados esteja, vá para esse banco de dados. É isso que eu quero construir. Esse contexto de banco de dados está desativado. Estamos usando um servidor SQL. E quando estiver pronto para gerar seus arquivos, envie-os para uma pasta chamada data. Eu posso pressionar Enter. E então, quando eu pressionar Enter, vamos ver algo que parece bom ou algo que parece ruim. Um bom é sempre bom. Então, aqui vemos que recebemos um erro porque ele falhou ao fazer o login com o usuário. Então, as respostas de que o login falhou para esse usuário, e eu, você provavelmente não teve essa experiência. Mas isso é porque eu uso as aspas duplas aqui. Deixe-me alterá-los para aspas simples. Tudo bem, observe, observe a diferença. Por causa da minha escolha de senha, eu tenho os cifrões. Então, quando estou usando aspas duplas, os cifrões estão sendo codificados para mostrar que não estão sendo vistos como cadeias de caracteres literais. Quando eu uso aspas simples, tudo está em uma cor. Então, essas são pequenas pepitas que você descobre por tentativa e erro. Então, deixe-me pressionar Enter e tentar novamente. Dessa vez. Ok. Recebemos um pequeno aviso e diz que para proteger inflamações sensíveis em sua cadeia de conexão, você deve retirá-la do código-fonte. Está bem? Agora, se eu for até o meu Explorer, posso rolar para cima e ver uma nova pasta aqui chamada data. E quando eu expandi-lo, vou ver arquivos de classe que correspondem aos nomes das minhas tabelas. E eu vou ver esse arquivo chamado de arquivo de contexto do banco de dados. Agora, nesses contextos de banco de dados, estamos basicamente modelando ou banco de dados. Portanto, esse contexto de banco de dados é a personificação do nosso banco de dados. Nas versões anteriores ao dotnet Core e ao EF Core, poderíamos gerar esse diagrama, algo parecido com um diagrama de relacionamento de entidades ERD que realmente mostraria essas tabelas como elas estão no banco de dados encerrado na ausência do diagrama. E mesmo por trás do diagrama havia um arquivo chamado arquivo de contexto de banco de dados que se parece com isso. Portanto, neste arquivo de contexto de banco de dados, ele está descrevendo as diferentes partes da configuração que são necessárias. Vemos aqui onde ele é inicializado em conjuntos de dB. Portanto, cada linha de ajuste de dB representa a tabela. Portanto, o nome da tabela é students, mas o conjunto de banco de dados é baseado nos modelos. Os alunos pegaram todas as propriedades da tabela chamada estudantes e geraram uma classe que corresponde a ela. Portanto, as propriedades do banco de dados ou ID, nome, sobrenome e data de nascimento. Todos eles correspondem ao que está na definição do banco de dados. Tudo bem, então esse diagrama representa a versão do código do nosso banco de dados. Agora, uma coisa a observar é que veremos o mesmo erro ou aviso que recebemos na CLI logo acima da string de conexão. Agora, essa é a mesma coordenação e fluxo que usamos aqui no comando, assim como já a temos na perturbação. Eu realmente não quero codificar. Então, o que vou fazer é executar outro comando para gerar a CLI. Gerei esse diagrama ou esse contexto, em vez disso, deixe-me fazer um CLS. Fui apenas pressionar e recuperar a última vez que estivemos na única neve. Todas as coisas a serem anotadas aqui. Primeiro, eu já tenho arquivos. Se eu tentar executar esse comando, novamente, receberei um erro porque verá os arquivos que estou tentando gerar já existem. Agora, isso pode ser um problema quando você realmente gosta de fazer alterações, então o banco de dados muda, então você quer que o código reflita que você precisará executar esse comando novamente. Então, agora eles estão dizendo que precisamos usar o sinalizador de força para sobrescrever os arquivos. Isso significa que no comando SAM, eu preciso adicionar hífen, certo? Ou hífen, força do hífen. Isso significa que qualquer coisa, mesmo que já esteja lá, eu quero uma substituição. A próxima coisa que queremos inserir é um comando que diz para você não incluí-lo na configuração ou na seção de configuração. Não precisamos desse sexo com a cadeia de conexão. Então eu posso ver hífen, hífen, hífen configurando, sei configurar, certo? Quando pressiono Enter, recebo um erro. E isso porque isso é mais uma questão de configuração e peço desculpas , não de configuração. Vamos tentar isso de novo. Portanto, não é necessário configurar e depois está sendo construído e pronto. E se voltarmos aos valores de nossos contextos, veremos que não temos mais isso no método de configuração. Tudo bem, então temos um modelo criando o que não temos na configuração. Não precisamos dessa parte. É assim que, quando fizermos alterações em nosso banco de dados, teremos que executar esse comando. Ele funcionará e apenas regenerará todos os arquivos para nós a cada vez. Tudo bem? Agora, a última coisa é garantir que nosso aplicativo conheça o banco de dados, porque sim, os arquivos estão lá, mas ainda não há um conhecimento real do banco de dados e do aplicativo reais. Temos que acessar nosso program.cs E então temos que fazer o que chamamos de registro ou injeção ou distribuição de dependência. Portanto, precisamos registrar que esse banco de dados existe no aplicativo para que possamos usar o Entity Framework e acessá-lo. Então, primeiro, vou dizer que var con é igual a. E então eu vou entrar no nosso arquivo de configuração. Assim, posso ver a configuração e a configuração do Builder Dog no momento que o aplicativo ou a deficiência é inicializada. Ele procurará todas as configurações do aplicativo e todos os outros arquivos de configuração e simplesmente as inserirá nesse único objeto criará a configuração. E então ele tem um método que diz get connection string, nice and clean. E então tudo o que precisamos fazer é saber o nome da cadeia de conexão. Então, se você esqueceu o nome, tudo bem. Pule, pegue o nome, copie, volte e cole. Então, agora temos a cadeia de conexão. Precisamos realmente adicionar o contexto do banco de dados. Então, a startup, digamos, uma construtora de serviços. E dirá o contexto do AD B2B. E vamos colocá-lo no contexto do banco de dados. E vou revisar a cópia do nome e colá-la aqui. Então, estamos adicionando esse contexto de banco de dados, certo? Então temos que passar as opções. Então, q pontos, é apenas uma expressão Lambda. Se você não estiver familiarizado com expressões lambda, faremos muitas portas. Mas essa é uma expressão lambda. Em nenhum lugar dizemos usar o SQL Server. E aqui está a cadeia de conexão. Tudo bem, agora faltam algumas referências. Basta clicar nele e dizer Dutos de controle. Isso me permitirá adicionar essa declaração usando. Aí vamos nós. E aqui estão os dados terrestres novamente, e isso me permite adicionar essa declaração usando. E não, não há flechas. Então, basicamente, estamos vendo quando o aplicativo é inicializado, pegou a string de conexão. Em seguida, use a cadeia de conexão para inicializar uma conexão real com o banco de dados da qual esse contexto de banco de dados é um modelo. E aqui está a cadeia de conexão que você deve usar. Tudo bem, agora isso é o que chamamos de seção de opções. Então, isso é o que é transmitido para o nosso contexto de banco de dados quando vemos opções. Tudo bem? Então, estou apenas mostrando todas as pequenas partes móveis para que você possa apreciar como tudo se encaixa. Então, agora nós realmente criamos uma conexão entre nosso aplicativo e o SQL Server. Portanto, sempre que fizermos uma execução do dotnet a partir do no, ele realmente estabelecerá essa conexão quando o aplicativo estiver sendo inicializado. Agora, a próxima coisa que vamos querer fazer é começar a criar funcionalidades relacionadas à interação com o banco de dados. Porque temos aqui o que chamaremos de modelos do banco de dados, certo? E se quiséssemos começar a criar cursos, criar palestras, criar estudantes? Então, precisamos de controladores, precisamos de visualizações, precisamos de funcionalidades intermediárias para distribuir isso. Então, veremos como podemos começar com isso na próxima lição. 21. Visualizações e controladores de andaimes - parte 1: Nesta lição, vamos montar nosso controle e ver a palavra confuso. Já o usamos antes, e isso basicamente significa que estamos gerando código com base em algo, certo? Assim, conseguimos criar um andaime ou contexto de banco de dados gerando o contexto de banco de dados e os arquivos de classe, arquivos modelo com base em nossa estrutura de banco de dados. Nessa situação, vamos montar controladores de andaimes e visualizações com base em um desses modelos. Tudo bem, então lembre-se de que temos o controlador de visualização do modelo. Agora temos o modelo. Então, a pasta de dados, tudo nela representa os modelos. Então, esses arquivos de aula são modelos orais, cursos teóricos e estudantes, esses são nossos modelos. Esses representam os dados. Agora, precisamos de visualizações que nos permitam visualizar os dados e interagir com os dados, a interface do usuário relacionada ao modelo. E precisamos que o controlador controle o tráfego, as solicitações e qualquer lógica relacionada à manipulação dos dados e à exibição da visualização. Agora, para criá-los, temos a opção de criar manualmente um controlador, criar manualmente uma visualização e conectá-los. E acho que neste momento, especialmente se você for iniciante, é melhor mostrar o código gerado e explicar isso para você. E então você apreciará melhor o que é preciso para criá-lo do zero, certo? Portanto, o dotnet CLI nos permite estruturar todo o código que nos permitiria fazer operações básicas crud, criar, ler, atualizar, excluir, tudo bem. Portanto, visualizações, controladores e funcionalidades que nos permitem criar registros, ler registros, atualizar registros ou excluir registros com base em qualquer um desses modelos e no que ele representa no banco de dados. Então, chega do meu monólogo, vamos falar sobre isso. A primeira coisa que queremos fazer é instalar outra ferramenta, que é o gerador de código ASP NET. Então, vou reduzir o painel lateral e tornar minha CLI um pouco maior. E também faremos o CLS. Livre-se de todo o barulho. Aí vamos nós. Tudo bem, agora precisamos executar o comando que diz dotnet tool. Você já viu isso antes. Instalar. E vou ver que você pode dizer hífen, hífen global como fizemos da última vez ou hífen g. Tudo bem. Em seguida, foram instalados na ferramenta geradora de código de hífen dotnet.net, ASP, NET. Tudo bem, então vamos pressionar Enter e deixar isso funcionar. Ok, bem, o que funcionaria para você? Eu já o tenho instalado, tudo bem, então, como está instalado, estou recebendo esse erro. No entanto, você realmente teria uma experiência muito semelhante à de quando instalamos o dotnet EF2. Tudo bem. Agora que temos isso instalado, precisamos executar um comando que nos permita montar o controlador com base no modelo. E queremos estruturar as visões que nos ajudem a realizar operações coletivas. Antes de fazer isso, porém, precisamos de mais alguns pacotes, certo? Então, já tem o Entity Framework SQL Server. Já temos o Entity Framework. Desenho. O que precisamos saber do pacote dotnet add. E queremos que o Microsoft Visual Studio dot web dot co-gere esse design. Então esse é um múltiplo. Clique em pausar e certifique-se de escrevê-lo volta como você o vê na tela, certo? Então, dotnet add package, Microsoft Visual Studio dot web dot cogeração que projetou. Este pacote, na verdade, apoia a ambição de cogeração que nós, uma vez executada e bem-sucedida, faremos apenas CLS. E então o que podemos fazer depois de incluirmos isso é ir em frente e fazer nosso andaime. Se você estiver usando Mac OS X, Mac OS ou Linux, precisará executar esse comando onde você vê que o caminho de exportação é igual cifrão home, Slashdot, net, dotnet. Certo. Aí vamos nós. dot.NET ou full stop.net Ferramentas de corte dot.NET ou full stop.net e, em seguida, o caminho do cifrão de dois pontos. Tudo bem. Então, basicamente para OS, Mac OS e Linux, onde o cara da base está sentado no caminho aqui, e isso deveria ser o cifrão para casa, não a hashtag home. Peço desculpas. Então, isso está apenas dizendo que a página inicial do arquivo do projeto ou do arquivo program.cs está na raiz, certo? Portanto, as ferramentas dotnet devem apontar para a raiz do projeto. Portanto, se você estiver usando Mac OS ou Linux, precisará executar esse comando primeiro. Depois de executar esse comando, no entanto, a próxima parte é para todos que dirão que dotnet é geração de código B net dash, de quatro gerações. Aí vamos nós. Controlador. Certo? Agora estamos vendo dotnet e sabemos que esse é o nome da ferramenta porque acabamos de instalá-la. E queremos criar um controlador. Então, podemos colocar coisas como o nome. Então eu posso dizer o nome do hífen. E vamos começar com o controlador dos cursos. Queremos criar um controlador para as operações do nosso curso. Então, vou ver que o nome do hífen é contra, é curso, curso está certo. Claro, seu controlador, porque essa é a convenção de nomenclatura. Em seguida, podemos especificar o modelo. Então, posso dizer traço m. E qual modelo estamos usando? Bem, o modelo que estamos usando é claro, certo? Então, vemos um traço m e depois vemos o curso. Tudo bem? Em seguida, precisamos especificar o contexto dos dados ou o contexto dos dados. E eu não quero escrever tudo manualmente, então vou até lá, copiar o nome e colá-lo na linha de comando. Aí vamos nós. Então temos algumas outras coisas. Então, isso realmente gerará esse controlador, mas eu quero que ele vá para a pasta específica dos alertas de controle, certo? Então, vou ver o hífen, o caminho relativo da pasta do hífen é igual aos controladores. Bem, não há sinal igual. Peço desculpas, não vou dizer igual. Em seguida, podemos especificar as coisas que queremos usar no layout padrão. E se quisermos referenciar bibliotecas de scripts , a combinação de todas essas coisas gerará o controlador com esse nome usando esse modelo e esse contexto de dados. E isso abrirá os controladores nessa pasta. Mas então estamos vendo usar o layout padrão, o que significa que as visualizações geradas junto com um controlador assumirão essa opção em que só queríamos usar o arquivo de layout padrão. Tudo bem, também poderíamos ter outras opções. Então, essas outras opções você normalmente verá na interface do usuário quando estiver usando o Visual Studio. Então, aqui podemos ver bibliotecas de scripts de referência. Deixe-me desmaiar disso. Referencie bibliotecas de scripts e então podemos dizer como false. Tudo bem, essas são outras opções que podemos analisar. Se você quiser ver todas as suas opções, é claro, você sempre pode dizer dotnet, ASP, NET, hífen, traço H de cogeração ou Control H e ver todas as suas opções. No entanto, vamos prosseguir com isso. Vou pressionar Enter. Meu Deus, peço desculpas. Eu escrevi esse comando completamente incorretamente. Isso não deveria ser cogeração, deveria ser chamado de gerador. Tudo bem, esse é o carrinho. Então, deixe-me fazer um CLS primeiro e ler o comando novamente do zero. Então, gerador de código ASP NET. Aí vamos nós. Então, vamos pressionar Enter e deixá-lo funcionar novamente. Tudo bem, e em alguns segundos, ele teria construído nosso projeto e gerado algum código para nós. Então, vamos ver o que isso fez. Ele fez a construção, depois disse encontrar o controlador do gerador e está executando o controlador do gerador. Então é isso. Tudo bem. E então verá que ele descobrirá metadados do Entity Framework para o contexto e o modelo de banco de dados , chamados de curso. Em seguida, é adicionado o controlador à barra do controlador o nome do arquivo de barra do diretório. Tudo bem, e depois adicionou as visualizações. Então, veja aqui, ele foi adicionado para ver, indexar, excluir, detalhar, editar e criar. E então ele nos disse que o tempo de execução era de 18 s. Agora, se olharmos em nossa estrutura de arquivos , com certeza, veremos um novo controlador. Isso é um pouco menor. Tudo bem, então vemos que temos um novo controlador chamado curso. Claro que é controlador. E vemos aqui que ele está injetando o contexto do banco de dados. E não vou entrar em muitos detalhes agora, vou reverter e explicar tudo, mas só quero que demos uma olhada no que temos. Temos nossa página de índice, temos detalhes, ações ou outras. Há muitas opções de detalhes. Temos nossa ação de criação para criar ações, na verdade. Então, vamos explorar por que precisamos , temos a edição. Na verdade, temos duas edições. Mais uma vez, temos delete e temos outro Delete. Tudo bem? E então, se olharmos em nossa pasta de visualizações, veremos que temos uma nova pasta chamada cursos. Portanto, lembre-se de que, depois de ter esse controlador, você precisa da pasta de visualizações correspondente. E se o expandirmos, veremos arquivos de visualização que correspondem a cada uma das ações que obtivemos em nosso controlador. Então, antes de começarmos a explorar o código, vamos verificar se ele funciona. Então, vou fazer uma corrida com dotnet. Então, quando a página for carregada, navegaremos manualmente. Vamos corrigir tudo isso mais tarde, mas posso dizer apenas cursos de corte. E lembre-se de que ele sempre procurará primeiro a ação do índice. Então, quando eu faço isso e pressiono Enter, ele carrega nossa página de listagem. Então, aqui veríamos todos os cursos do sistema. Também podemos prosseguir com a criação de novos. Então, se eu clicar em Criar novo, eu chego a um formulário. Deixe-me adicionar um novo curso. Vamos ver o desenvolvimento de código aberto. Tudo bem. O código do curso é CS101, por exemplo. E este é um curso de três créditos e nos permite criar e depois analisá-lo. Então, tudo isso não é dinâmico. Eu não escrevi nada desse código 12, você sabe que qualquer coisa que é exibida em uma página HTML precisa ser escrita estaticamente ou está sendo carregada dinamicamente. Então, isso está vindo diretamente do banco de dados agora, certo? Se formos editar, veremos que compramos a inflamação. Se eu dissesse ok, isso é mais como um curso de dois créditos e um curso de três créditos. Eu posso economizar. Lá, ele é editado. Eu posso ver os detalhes disso. E isso é basicamente o que queremos dizer com uma multidão, certo? Então, isso é ler isso. Não podemos detalhar é lê-lo. Podemos editar e também podemos excluir. Então, se eu disser excluir, excluir, vamos lá. Então, aqui mesmo, acabamos de gerar a funcionalidade coletiva com um único comando no r.net CLI. Então, quando voltarmos, vamos detalhar o código e ver exatamente o que obtivemos desse exercício de andaime. 22. Entenda o controlador com andaimes: Bem vindos de volta, pessoal. Nesta lição, exploraremos nosso controlador de cursos e queremos apenas dedicar nosso tempo e entender o que o código está fazendo. Então, eu colapsei meu terminal e vou entrar em colapso e desmoronar no Explorer à medida que exploramos o código, certo? Então você pode ir em frente e abrir o Controlador de Cursos. Então, o que você verá depois de analisarmos todo o bloco usando o bloco, o namespace e o controlador público do curso de classe, que é herdado da classe base do controlador, que é bastante padrão. Vamos ver se temos essa injeção da dependência no banco de dados. Agora, deixe-me explicar o que isso significa quando digo injeção. Normalmente, quando você tem uma classe e quer um objeto da classe, você realmente vê algo parecido e eu simplesmente digito aqui. Você diria que o nome do objeto do tipo de dados é igual a uma nova instância desse tipo de dados. Então saiba que você tem o objeto, você pode começar a usá-lo. No entanto, isso pode causar problemas com base na natureza, especialmente para algo como uma conexão de banco de dados. Porque toda vez que você faz algo novo, na verdade une fortemente a classe e o objeto, certo? Portanto, não, eu acoplei fortemente o My Courses Controller ao contexto do banco de dados. Se eu mudar isso precisa ser, são contextos como esse. Por exemplo, está me dando um erro porque agora preciso fornecer certos parâmetros e como ser responsável por evitar esses parâmetros toda vez que uso esse objeto, invoco um objeto de desse tipo. Portanto, isso não é realmente sustentável e sustentável a longo prazo. Portanto, o conceito de injeção de dependência significa que eu posso ter a classe. Posso modificar essa classe quantas vezes eu precisar para me referir a contextos de banco de dados. Ele pode evoluir, pode precisar de mais parâmetros ou qualquer outra coisa. Mas, por mais que ele evolua, não preciso modificar todos os lugares em que estou fazendo referência a ele. Eu posso simplesmente injetá-lo no meu código. E em segundo plano, o aplicativo fará o que for necessário. Então isso é o que chamaremos de injeção de dependência. Tivemos que configurar a injeção de dependência ou configurar o contexto de banco de dados e prepará-lo para injeção de dependência quando criamos nosso contexto de banco de dados anteriormente. Então, se formos para program.cs, lembre-se de que colocamos essa linha aqui e ela diz adicionar serviços ao contêiner. O contêiner aqui, a retirada do contêiner do COI ou a inversão do controle, certo? Então, todo esse conceito de inversão de controle e injeção de dependência, esses dois andam de mãos dadas. Isso significa que estamos configurando o aplicativo para poder injetar o que chamaremos de dependências em qualquer lugar. Portanto, por mais que possamos modificar a classe real aqui, quando ela é injetada como uma dependência. O destinatário está recebendo uma aula, como neste caso, o controle de cursos não precisa se preocupar em alimentá-la com todas as suas dependências. Porque o contêiner do COI está cuidando de tudo isso. Tudo bem, é um conceito muito legal e leva a um código muito mais limpo e a uma manutenção muito mais eficiente a longo prazo. Portanto, esse contêiner de IoC totalmente embutido no asp.net Core . No passado, você não precisava de bibliotecas de terceiros. E algumas pessoas ainda recorrem a bibliotecas de terceiros, mas isso não é absolutamente necessário atualmente ao usar o dotnet Core. Então, depois de injetarmos nossa dependência, que neste caso são contextos RDB, e é uma dependência porque precisamos do contexto do banco de dados para conversar com o o contexto do banco de dados ou o objeto do tipo db context, neste caso, representa a conexão com o banco de dados. Então, quando clicamos na página do curso e ela carrega o índice, ele se conecta ao banco de dados, obtemos os dados e os exibimos. Então, isso nos leva à nossa próxima parte, que é a ação. Agora, o que está acontecendo na ação? Em primeiro lugar, estamos verificando se o curso é Table, quote unquote realmente existe no banco de dados, certo? Então, quando isso realmente existir no banco de dados, retornaremos a visualização com os dados. Isso está escrito em uma linha. Quero dizer, é um operador ternário. Então, se estiver em várias linhas, é na verdade uma declaração de uma linha. Então, isso pode causar alguma confusão. Claro, isso foi gerado para nós. Mas basicamente o que isso está fazendo é ver. E vou ler isso em um bloco de comentários e tentar escrevê-lo em pseudocódigo. Então, faz sentido. a tabela do banco de dados existir, certo? Então é isso que essa primeira linha faz. Se isso existir, queremos retornar a visualização. Ou, na verdade, deixe-me ver você que deseja executar uma consulta. Então, dizemos que os registros var em uma tabela seriam iguais à consulta. Então, nesse caso, nossa consulta é um peso de contextos, pontos, cursos e essa lista de ferramentas é sumidouro. Então, estamos usando um dialeto de C-sharp chamado link, certo? link aqui é o que o EF Core usa. Aí está a biblioteca para acessar o banco de dados, buscar os registros com base na consulta que ela pode gerar a partir da nossa declaração aqui diz basicamente, eu acabei de converter isso em uma instrução SQL que diz selecione uma estrela nesta tabela. No entanto, não precisamos escrevê-lo no código porque vinculamos o dialeto para traduzi-lo para nós. Então, aqui estamos basicamente vendo que me dá os registros na tabela. Vou esperar uma conexão com o banco de dados, pegar as tabelas e obter tudo na forma de uma lista. Agora, algumas palavras-chave que você notará são assíncronas. Vou esperar e fazer uma tarefa. Quando fazemos programação assíncrona, isso torna as consultas mais eficientes e as operações mais eficientes. E sintaticamente, só precisamos nos certificar de incluir essas declarações à medida que avançamos. Vou explicá-los assim que aparecerem. Mas eu não quero me especializar nisso agora. Tudo bem. Então, estamos pegando os registros da tabela e depois sabemos que temos os registros. Vamos retornar a visualização em que você viu esse nome antes e onde ele foi exibido com os dados provenientes do banco de dados. Então é isso que essas duas linhas estão fazendo, basicamente. Tudo bem? Se a tabela existe, essa é essa parte. Tudo bem? E então eu ligo nenhum operador, o ponto de interrogação. E então, o que devemos fazer, basicamente dizemos retornar a visualização com esses dados. No entanto, tudo o que fiz aqui foi dividir isso em duas linhas, obter os dados e retorná-los para visualização. Então é praticamente a mesma coisa, certo? Acho que esse formato pode ser um pouco melhor a longo prazo, mas se você gostar aqui, tudo bem. Então, se isso não for avaliado como verdadeiro, faremos outra declaração de retorno que retornaremos esse problema. vendo que algo está errado com o banco de dados, certo? O problema é apenas um objeto especial que nos permite ver que houve um erro. Sempre que houver um erro, podemos retornar o problema e o aplicativo o exibirá adequadamente. Então, aqui está dizendo que a entidade situada no contexto do banco de dados de gestão escolar não foi configurada corretamente. Não é, não existe ou, você sabe, algo está errado, não é encontrá-lo. Então é isso que essa linha. Então, deixe-me deixar isso, esse comentário. Talvez isso ajude você a dissecar melhor essa única linha de código. Então, isso resume o que acontece quando carregamos nossa página de índice. Tudo bem, quando analisarmos as visualizações, você verá como vinculamos os dados do back-end ao front-end. Mas isso é o que eu quis dizer com a mágica que o controlador faz antes de desligar o View. Request Gaming foi para o banco de dados, obteve nossos dados e retornamos a visualização, quais foram os dados. Agora, se continuarmos com os detalhes, há mais algumas coisas acontecendo dentro dos detalhes. Quando tentamos carregar os detalhes, você verá que ele está tentando ou espera ver um valor de id. Então, é assim que as raízes ficarão. barra de detalhes dos cursos e o valor do id. E esse valor de ID entra em uma variável de parâmetro que estamos chamando de id, certo? A primeira coisa que fazemos é garantir que esse ID não seja nulo. Então, diz se o ID é nulo ou a tabela do banco de dados se depara com o mesmo problema que tivemos aqui. Não existe, então retornamos. Não é divertido, não para eles é a mesma coisa que um fluoróforo. É por isso que quando você acessa sites e clica em certas coisas, pode ver quatro ou quatro porque ele não consegue encontrá-las. Bem, aqui está um exemplo ao vivo disso. Então, se isso acontecer, se nenhum deles for obtido, iremos para a seção de busca de cursos , onde vemos o banco de dados. Me dê os cursos de mesa e, em seguida, me dê o primeiro registro que corresponda ao ID que forneci. Então isso é o que chamaremos de expressão lambda. Já vimos isso antes, já fizemos isso antes. Tudo bem, mas ao escrever consultas, elas são úteis quando queremos especificar determinadas condições. Então, aqui estamos vendo, me dê o primeiro registro padrão de estrela, onde, e então começamos a expressão lambda com esse símbolo e, em seguida, essa seta. E então dizemos a coluna de pontos de Tolkien que estamos interessados em comparar se será igual, igual, menor que, maior que, maior que igual, etc., etc. Seja qual for o tipo de comparação, o valor que desejamos. Tudo bem, não, isso significa primeiro nosso padrão, porque primeiro significa que ele obterá o primeiro registro que corresponda à condição. Portanto, mesmo que veja vários, ele retornará o primeiro. Ou padrão significa que, se você não viu nada, retornou nulo. Tudo bem? É por isso que depois dirá se o curso foi nulo, então retorna não encontrado. Porque pode ser que eu tenha pedido, é claro com o ID 50. Quando não há curso com a ideia de 50. Então, se depois disso ele não conseguisse encontrá-lo, isso seria nulo. E se é sabido que não vemos encontrado. Depois de passar por tudo isso, no entanto, retornaremos a visualização com os dados, com o objeto, com o modelo ou um objeto fora do tipo de modelo. Então é isso que está acontecendo dentro dos detalhes. E da forma como está escrito, é um pouco mais simples do que a única frase aqui. Não preciso escrever nenhuma anotação aqui. Em seguida, entramos em Criar e você verá que cria clumsy in, aqui em cima. Tudo bem, então temos o Create, get, nosso F cria um post e operação GET geralmente é o que usamos para recuperar a inflamação. Então, aqui ele só vai voltar à visualização porque quando clicamos em Criar, ele retornará apenas a visualização, que é o formulário que nos permite criar. No entanto, quando clicamos em enviar no formulário, é recomendável enviar dados com uma solicitação de postagem. E é por isso que criamos a postagem. Então, temos o get created e temos o post criado. O postscript recebe uma anotação aqui que diz postagem HTTP. Também faz nossa validação de um token antifalsificação para garantir que não o façamos ou limitamos o número de envios que chegarão caso nosso corpo tenha força para enviar spam ou algo assim. Cada vez que os dados chegam, no máximo temos esse token, que é algo conhecido apenas pelo servidor. Então, o servidor sabe como validar esse token que vem do formulário. Se não pudermos validá-lo , ele rejeitará essa tentação. Tudo bem? Então, na lista de parâmetros vemos aqui que estamos fazendo uma ligação. O link aqui basicamente diz que estou interessado em campos com esses nomes que possam ter sido enviados neste objeto. Tudo bem, você pode estender essa lista. Tudo bem? Se o coro tivesse uma nova coluna e quiséssemos preenchê-la, poderíamos estender essa lista de acordo, de acordo com ela. E apenas adicionamos vírgula, o próximo nome do campo. Também poderíamos criar um modelo de visualização, mas não entraremos nisso neste momento. Mas você pode ler e dizer que para se proteger contra ataques de postagem excessiva, você pode especificar as propriedades para que você possa ler mais sobre o que está acontecendo nesse parâmetro. Mas basicamente estamos apenas dizendo que, quaisquer que sejam os dados enviados, estamos todos interessados nos dados com esses nomes. Então, alguém tentou enviar mais dados do que o necessário para esse formulário específico e, em seguida, esses campos adicionais seriam rejeitados automaticamente porque não atendem a essas condições de valor. Tudo bem. Em seguida, vamos ver se o estado dos modelos é válido. ponto do estado do modelo é válido. Praticamente. A validação é baseada em nossas próprias regras de validação , que podemos criar posteriormente. E as regras de validação que C-sharp está inferindo com base nos tipos de dados em uso. Então, aqui temos uma corda. A string não é anulável. Então, basicamente, diria que, Ei, eu estou esperando um valor aqui, mas neste é anulável. Então, se eu receber um objeto do tipo course, e isso acabar sendo nulo por qualquer motivo. E você verá aqui que existe uma espécie de galinha velha ou uma contingência para garantir que ela sempre tenha um valor. Mas vamos ver. Ele veio com um valor que é nulo, então essa validação veria automaticamente que não é válida porque estou esperando uma string e estou recebendo nula, não é válida. O que acontece quando não é válido? Isso vai ignorar isso porque foi avaliado como falso. E ele apenas retornará a visualização com o objeto que foi enviado. Tudo bem. É por isso que quando você envia um formulário e há um erro nele, sim. Na verdade, ele recarrega o formulário com os dados que você acabou de enviar. Então isso é tudo o que está acontecendo aqui. No entanto, se for válido, então vamos dizer banco de dados, estamos adicionando esse registro. Eu sei que você quer salvar a cadeia, então isso é o que realmente a coloca no banco de dados. E então redirecionamos para a ação com o índice de nomes. Então, leia Derek, o leilão é o motivo pelo qual ele voltará para a página do anúncio e mostrará um registro recém-criado que conhece o banco de dados. Então isso é tudo o que está acontecendo. Em vez do Creates. Se formos até o editor, veremos que é meio que, bem, é muito semelhante à página de é muito semelhante à detalhes porque está recebendo um valor de id e verificando se é um ID válido valor. Ele sai para encontrar o curso, embora essa consulta tenha sido escrita de forma um pouco diferente, mas está fazendo a mesma coisa. Encontre o curso por ID. E então, se for nulo, mostramos. Se não for nulo, mostramos a página. Na verdade, a página de edição terá um formato semelhante à página Criar, mas desta vez ela está realmente recebendo os dados. É por isso que, quando clicamos em Editar, vemos os dados na mesma forma de um decreto, mas na verdade obtemos os dados. Então, quando enviamos, você percebe que ele também se opôs. Ele faz a mesma validação do token antifalsificação. Pegamos e validamos o ID, bem como examinamos os campos que estão chegando. Tudo bem, então o mesmo conceito da postagem que acabamos de ver para o Create. Em seguida, fazemos mais algumas validações, nas quais dizemos, ok, certifique-se de que o ID que está chegando aqui no link corresponda ao ID que vem do formulário. Caso contrário, retorne um erro. Em seguida, dizemos que se o estado do modelo for válido, tentaremos atualizar o registro e salvar as alterações. Agora, há casos em que eu poderia ter usado o registro para atualizá-lo e você pode ter feito o mesmo. E então tentamos enviar, ou quando você está enviando, eu já o enviei. Então você está editando uma versão mais antiga. Então, isso causará o que chamaremos exceção de simultaneidade de banco de dados. Tudo bem? E se isso acontecer, então diz se o curso existe ou se, claro, não existe, então não retorne o telefone. Caso contrário, basta lançar a exceção porque não temos certeza de como lidar com isso, certo. Mas isso seria raro, mas acontece. Portanto, é bom ter essa contingência implementada. Depois de tudo isso, lemos Erich na página de índice, assim como na criação. Ao final disso, também retornamos a visualização com os dados, caso não sejam válidos. Tudo bem, então você começará a ver que o código é muito semelhante porque é um código dessa forma. Isso se chama reatribuir os detalhes e tudo o que acontece aqui é muito do que acontece aqui é semelhante ao que acontece com um Create. Tudo bem, então vamos para a exclusão. Então, estamos passando um ID para a exclusão. Ele fará a mesma coisa que os detalhes e a edição acabaram de fazer, onde verificar o id é encontrar o curso, verificar se é nulo, se não for tudo, obteremos uma página que nos mostra os detalhes do curso. Em seguida, havia um botão de exclusão. Se você se lembra do nosso teste, saiba que quando clicarmos nele, ele enviará uma postagem. Já sabemos disso, certo? E desta vez está apenas dizendo que está usando um nome de ação diferente, certo? Portanto, o método é diferente, mas se quisermos que ele navegue até um nome específico, podemos especificar essa anotação e dizer que você se identifica como exclusão, mesmo que seja chamado de exclusão confirmada. Tudo bem, ainda validamos o token antifalsificação. Então, desta vez, em que estamos verificando se o banco de dados existe, tudo bem. Nós vamos e pegamos o curso por identificação. E então, se pudéssemos encontrar o curso, tentamos removê-lo do banco de dados. Depois de removido, salvamos as alterações. E então, mais uma vez, lemos Erich para indexar. É por isso que, depois de cada vez que concluímos uma operação, ela sempre volta para a página do anúncio, porque cada operação, uma bem-sucedida, diremos redirecionar para a página de índice. O método final dentro desse controlador apenas verifica se o curso existe. E isso foi realmente usado apenas dentro da seção de edição, certo? Onde estamos vendo se não existe, então através de não encontrado. Portanto, essa é apenas outra maneira de ver se existe onde no banco de dados temos o método any. Então, contextos, tabela de pontos, pontos qualquer. E então podemos dizer qual é a condição que estamos verificando? Então, há algum registro que atenda a essa condição, que neste caso é ver onde o ID corresponde ao valor do id que estamos passando. E então obtemos o valor que seria verdadeiro até o nosso padrão, que seria nulo. Isso é basicamente o que acontece em nosso controlador. Agora foi uma turnê rápida e suja. Não vamos modificá-lo. Vamos deixar o código padronizado. E mais tarde começaremos a escrever nossa própria lógica personalizada. Mas, por enquanto, é bom entender o código padronizado e saber o que ele está fazendo. Quando voltarmos, daremos uma olhada nas visões correspondentes de cada uma dessas ações e apreciaremos como a vinculação acontece. 23. Entenda vistas com andaimes: Tudo bem, pessoal, então vamos progredir e começar a analisar nossas opiniões. Então, vou fechar todas as banheiras que não são absolutamente necessárias para essa atividade. Em seguida, vamos examinar a pasta de visualizações e depois procurar a pasta do curso. E então vamos começar com o índice. Então, farei isso na ordem em que provavelmente visitaríamos as páginas. E, claro, a visualização do índice é a primeira que aparece porque a ação do índice é a primeira ação chamada. E, se você se lembrar, a ação de índice realmente consultará o banco de dados e retornará esses dados para a exibição. Então, quando ele retorna esses dados para nosso índice de visualização, é aqui que toda a vinculação acontece. Então, vamos partir da linha um. A linha um estipula o modelo. Tudo bem? Então, at seno model é apenas uma palavra-chave que você verá no topo das visualizações que são vinculação de dados, certo? Em seguida, o tipo de dados é especificado. Então, aqui está dizendo que o tipo de dados em que essa visualização é uma ferramenta integrada é inumerável, que é um tipo de coleção, o que faz sentido, pois estamos passando por cima de uma lista de objetos. Então essa é a nossa coleção, certo? Claro, objetos. Então é isso que está esperando. Agora que ele sabe que deve se vincular a esse modelo, agora podemos acessar as diferentes partes. Temos a seção de visualização regular de dados. Já vimos isso antes. Temos uma tag H1 aqui que diz índice. Temos uma tag p que hospeda uma tag âncora que nos permite navegar até a ação de criação, certo? Então, observe aqui que é apenas ação. Anteriormente, quando estávamos vendo a pequena página que você verá que controlador ASP é igual a e você teria visto ação e controlador em pares. No entanto, quando não especificamos o controlador, isso pressupõe automaticamente que ele está procurando o leilão no mesmo controlador vem a visualização atual. Portanto, o índice de visualização atual vem do controlador do curso. Portanto, ele assumirá que deve ir para a ação de criação no mesmo controlador. Tudo bem, então vamos ver uma mesa. Então, lembre-se de que vimos a lista de registros. E então, nesta tabela, temos alguns métodos auxiliares. E este é chamado de nome de exibição para. Tudo bem, então esse é um método de extensão HTML que basicamente examinará o nome da propriedade na classe do modelo, certo? Então você percebe que ele está usando uma expressão lambda. E parecia modelo daquele joelho, modelo de código de pontos, créditos de pontos modelo. E sabe disso por causa do modelo que foi especificado. Então, se eu mudar esse tipo de modelo apenas para ser provocativo por um tempo, se eu mudar para estudante, observe que isso começa a acender porque nenhuma dessas propriedades pertence a esse tipo de dados de modelo. Portanto, é muito, muito sensível, é muito fortemente digitado e muito sensível ao tipo de dados que eles estão usando aqui versus às propriedades que você está acessando. Eu reverto. Você verá que as luzes se apagarão. O que estamos fazendo aqui é especificar para a tabela. O cabeçalho. A primeira linha deve ter colunas de cabeçalho de tabela que especificam um nome chamado e créditos. Então temos um th em branco e veremos por que esse está em branco. Em seguida, desceremos até o corpo. Então essa é a cabeça. Em nenhum lugar no corpo da mesa. Para o corpo, estamos usando um laço de antebraço. E lembre-se de que sempre que quisermos C-Sharp no HTML, só precisamos de um sinal de arroba e, em seguida, podemos escrever nosso código C-Sharp. Então, aqui estamos vendo para cada item no modelo. Portanto, o modelo aqui é o objeto real que assume o tipo de dados especificado aqui. Observe a diferença, este está no modelo senoidal. Este é o modelo M maiúsculo. Tudo bem? Então, aqui estou dizendo, me dê cada item neste modelo ou neste objeto que é do tipo coleção, é claro objetos. Agora conhecemos esse loop. Então, a melhor maneira de analisar as coleções, certo? Então, percorra a coleção e, para cada uma que você encontrar, crie uma nova linha TR ou tabela e crie uma coluna que exiba o nome, uma coluna que exiba o código ou uma coluna que exibe os créditos. Na verdade, eu poderia simplesmente dizer ao assinar créditos de pontos, certo? Então, eu realmente nem preciso dizer que o que esses métodos auxiliares realmente nos ajudam é a forma como são exibidos, porque às vezes você quer uma tela especial como uma caixa de seleção. Se for um booleano, isso gerará uma caixa de seleção. Se digitarmos manualmente, ele realmente imprimirá a palavra verdadeiro, certo? É por isso que gostaríamos de usar isso às vezes. Quando queríamos realmente exibir dinamicamente um controle apropriado ao tipo de dados da propriedade. Então, estou apenas mostrando as opções, certo? Portanto, para esses valores numéricos e de string, provavelmente não precisamos de considerações especiais. Na verdade, poderíamos dizer, eu diria modelo de pontos do item manualmente. Mas então, para Boolean e alguns outros, você provavelmente gostaria de permitir eles gerassem isso para você. Então temos o td que corresponde ao MTT H, e esse tem as ações. Portanto, temos um botão de opção para editar um botão de ação para obter detalhes de um botão de ação para excluir. Percebo que todos eles escreverão as ações apropriadas. Tudo bem, mas eles também estão passando, ou seja, o valor do ID do traço raiz do traço P, que é o ID do ponto do item. Então, qual é a relevância disso? Lembre-se de que, no controlador para, vamos ver o método de edição. Se analisarmos o método de edição, obtido pelo EDI, estamos esperando esse ID. Isso significa que qualquer link que chamará esse método de edição precisa passar esse ID. É por isso que temos que dizer SP dutch root dash ID. Porque, mais uma vez, é uma identificação. Se eles dissessem cachorrinho , teríamos que ver ASP dash, dash puppy. É assim que funciona. Portanto, a vinculação acontecerá automaticamente. E então o valor que estamos transferindo é o valor do id do item que está sendo processado nessa função específica. Tudo bem? E o mesmo acontece com detalhes e exclusão. E isso é tudo para a página de índice. Agora vamos dar uma olhada na página Criar porque ela está vazia. Então, queremos criar um registro. Essa é provavelmente a primeira coisa que queremos fazer. Agora, aqui temos um formulário. E é um conceito muito semelhante em que não, é fazer um modelo, mas observe que estamos especificando nosso modelo acima. Mas no controlador, na verdade não fornecemos nenhum dado, certo? Tudo o que fizemos foi retornar a visualização sem dados. Então, por que estamos especificando um modelo nesta página? Bem, porque é um fórum em que especificar que tipo de objetos queremos formar para preencher e especificar um modelo aqui em cima, podemos usar isso para definir o tom ou definir o contexto para o resto do formulário. Então, começamos pulando as partes padrão compreensíveis e indo direto para a guia do fórum. O formulário aqui retornará uma ação ASB igual a cria, é igual a notas. Isso significa que, quando o formulário for enviado, ele tentará ir para a criação e, por padrão, fará um envio de postagem, certo? É claro que você normalmente vê algo como método é igual a postagem. Tudo bem? Mas então isso está implícito. Portanto, não precisamos dizer isso. E sabe que, quando enviado, ele irá para o Create. E já vimos que temos que criar o get, e depois temos o post. Tudo bem? Então, depois de termos feito isso, depois de declararmos um formulário, há uma seção aqui que diz, devemos mostrar o resumo, o resumo da validação que útil quando isso é falso, se a validação falhar e retornarmos a visualização com os dados, esta seção realmente imprimirá quais campos estavam faltando, quais dados, certo? Por isso, é útil. Vamos dar uma olhada em alguns dos controles. Portanto, esse é um formulário de bootstrap padrão. Se você quiser saber mais sobre os formulários do Bootstrap, você sempre pode verificar a documentação e ver como eles recomendam que você crie seus formulários. Então, a parte principal aqui temos o rótulo e notamos que isso é ASP para o nome. Qual é o nome dele? O nome vem do modelo. Então, isso é ASP ou o rótulo para a propriedade de nome do modelo que foi especificado, que é a semelhança de curso para as entradas, temos o ASP para Nim, que significa que, qualquer valor que você insere aqui, ele será automaticamente vinculado à propriedade name do objeto. É claro que, quando enviamos , essa propriedade de nome vem aqui e podemos acessá-la por meio de nossos objetos. Então, isso é tudo que flui, certo? Eu sou basicamente esse o caso de todas as outras propriedades. Temos o osso de entrada para o código, temos o osso de entradas, dois créditos. Tudo bem. Agora, isso também gerará o melhor tipo de controle, controle HTML para o tipo de dados. Portanto, observe que não estamos especificando o tipo de entrada ou algo parecido. Estamos apenas vendo informações e ESP para o campo. Tudo bem, então, se tivermos um booleano, ele gerará automaticamente uma caixa de seleção. Isso é o quão poderosos esses ajudantes de HTML são quando lidamos com páginas de Ariza. Tudo bem? Em seguida, temos nosso botão de envio. Depois de clicado, mais uma vez, ele acionará um envio para ou o ASP realmente criará. E sabemos o que acontece depois disso. Então, uma vez feito isso, se for válido e tudo mais, recarregamos a página de índice. Agora, enquanto estava na próxima página comigo, cliquei em detalhes. Então, vamos ver a página de detalhes. Então lembre-se de que está no controlador. Os detalhes vão levar um documento de identidade. Tudo bem. Ele vai buscar o registro e depois retornar a visualização com esses dados. Ou a página de detalhes precisa saber qual é o tipo de dados esperado. Em seguida, ele fará o mesmo tipo de exibição, nome e exibição para cada uma das propriedades. É por isso que, na página de detalhes, você verá o nome da palavra e, em seguida o valor que esse nome tinha, o cordão de palavras e, em seguida, o valor que foi colocado no núcleo, a palavra créditos e o valor. que foi colocado em créditos. Então, isso é tudo o que os detalhes estão fazendo. Depois, no final, podemos optar por ir para a página de edição, onde ele especificará novamente o valor do ID da rota e passará o ID do ponto do modelo. Ou podemos voltar ao índice e as doses externas voltarem à lista. Agora, se escolhermos a Edição , o que nos depararemos? Recebemos um formulário que na verdade é idêntico ao nosso formulário Criar, certo? Na verdade, é a mesma forma, existem apenas algumas diferenças. Então, o modelo vai ser o mesmo. Mais uma vez, controlador. Quando tentamos editar, funcionou, deixe-me descobrir isso rapidamente. Quando tentamos editar, ele buscava o registro e depois retornava a visualização com esse registro. É por isso que, quando a página de edição é carregada, temos dados no formulário. Você também notará que temos uma entrada aqui na parte superior do formulário para o ID e está oculta. Por que isso? Bem, precisamos saber o id quando o formulário é enviado porque há verificações na postagem que garantem que o ID enviado ou o id que chega, o parâmetro aqui corresponde ao ID que foi enviado no formulário, certo? Então, aqui está a vinculação para ID e, claro, essa identificação. Tudo bem, então ela corresponde a isso. De um modo geral, você precisa do ID quando é capaz de fazer uma atualização. Porque quando o Entity Framework realmente carrega todas as atualizações, esse objeto precisa ter um valor de id para saber que deve fazer uma atualização e não uma inserção. Tudo bem, para uma inserção, realmente não precisamos da ID, então é seguro remover essa vinculação porque não devemos permitir que alguém possa enviar uma identificação quando estiver criando um registro. Então, eu poderia realmente deletar isso. Tudo bem, no entanto, para as edições, é absolutamente necessário porque o banco de dados precisa saber esse ID para que possa atender essa atualização quando recebermos a alteração. Tudo bem, dentro disso, todo o resto é praticamente o mesmo que vimos com a criação. Então, é claro que a ação é diferente porque ela vai para o Editar Post. E devido à vinculação e ao fato de os dados terem sido enviados, as tags de entrada terão automaticamente os dados que correspondem ao objeto que foi enviado durante a operação get. Tudo bem? Mas, fora isso, é praticamente a mesma forma que vimos para o Create. Em seguida, vamos para o Delete. Agora, a exclusão de páginas é bastante simples. Já sabemos quais são essas. Só vai tentar encontrar o registro exatamente como aconteceu com as edições e os detalhes. E então ele retornará a visualização com o registro. Não. Bem, estamos excluindo páginas perguntando Tem certeza? E, na verdade, está apenas mostrando os detalhes do registro que podemos excluir. Então, na verdade, é quase idêntico ao discurso detalhado. No entanto, há uma pequena formação aqui que nos permite vincular o ID do registro que está prestes a ser excluído. Em seguida, podemos clicar em Excluir para enviar o formulário, ou podemos aumentar a inclinação e voltar para a lista. Portanto, se optarmos por enviar o que acontece neste vale de Heidi transfere a carga útil de dados para nosso método de exclusão de postagem. Então, quando passamos para o método delete post, ele está recebendo esse ID. E então ele está realizando a operação de exclusão conforme o esperado e, em seguida, retorna ao índice. E isso é praticamente tudo o que nossos pontos de vista fazem. E vimos, fizemos um teste completo de rugosidade. Vemos que tudo está conectado, tudo funciona, todas as navegações funcionam entre as páginas e isso é muito importante. No entanto, precisamos da ferramenta de navegação, pelo menos da página de índice. Alguém é um idiota com o layout e já fizemos isso antes. Então, eu vou fazer isso de novo. Introduzimos a página sobre. Eu só vou copiar toda essa pasta. E então, desta vez, o controle do ASP será de cavalos. A ação do ASB é indexada. E então os textos que vamos ver aqui seriam cursos. Tudo bem, agora temos um novo item que, quando clicado, vai para a ação de índice da nossa página de cursos. Tudo bem, então você pode fazer essa modificação. Vá em frente e aperte dotnet run e apenas os pensamentos e deixe-me ver. Para um aldol, validamos que tudo funciona e vemos como tudo está conectado. Então, quando voltarmos, vamos repetir as atividades de andaime para nossos outros modelos em nosso banco de dados. 24. Visualizações e controladores de andaimes - parte 2: Tudo bem, pessoal, saibam que vemos como é fácil realmente gerar funcionalidades crud para suportar nossas tabelas de banco de dados. Vamos fazer isso pelos outros, certo? Então, nós já fizemos o curso. Vamos fazer a mesma coisa. Vou fazer o Control Shift e apóstrofo para lançar o terminal. Vou me livrar de certas coisas na tela, para ter mais imóveis. E então vamos repetir o comando que executamos anteriormente, que é o controlador gerador de código de hífen dotnet ASP NET. Podemos simplesmente fazer modificações aqui porque queremos o mesmo tipo de configuração. A única diferença agora é que não estamos lidando com cursos. Estamos lidando, digamos, com professores. E então o modelo aqui seria palestrante. E temos o CMD, todos os contextos são o mesmo relativo desmoronam. Todo o resto é praticamente o mesmo. Então, se eu fizer isso, pressione Enter e aguarde alguns segundos, então veremos que ele foi executado com sucesso, certo? Então, agora discutimos os controladores e as visualizações de nossa mesa de palestras. E eu vou fazer isso mais uma vez. E então você pode fazer isso para nossos alunos. Então, estudantes controladores e estudantes são o modelo. Pressione Enter. E aí vamos nós. Agora podemos voltar e ver que temos controladores e visualizações adicionais. Então, é claro, são boas palestras de estudantes. E em nossa pasta de visualizações, temos cursos, temos palestras completas na web, compartilhamos e temos alunos que escrevem. O código é praticamente o mesmo. Então, a única grande diferença que você pode esperar ver aqui é que, em vez de ver o nome de uma tabela, você verá outro nome de tabela, certo? Você verá a mesma injeção do contexto do banco de dados, o mesmo tipo de código padronizado, exceto que está procurando palestras em vez de estudantes, está procurando cursos em vez de professores, etc. Então tudo é relativo ao controlador real e ao modelo que foi usado. Agora, se eu quiser navegar até cada um deles, siga o exemplo e me certifique de colocá-lo para ter a navegação do curso. Vou duplicar isso duas vezes. E eu vou colocar uma navegação para os professores. Portanto, este deve ir para a ação de indexação do controlador do palestrante. E então, aqui embaixo, faremos isso para estudantes. E é isso mesmo. Vamos executar o dotnet e testar nosso aplicativo. Tudo bem, então, quando nosso aplicativo for lançado, veremos que temos todas as propriedades de navegação. Então, se eu clicar em cursos, já validamos os cursos. Podemos criar um novo curso, especificar um nome. Então, introdução ao desenvolvimento web. Podemos dar a ele um código CS101, e esse é um curso de três créditos. E então criamos, e então temos nosso primeiro curso no sistema, ou pelo menos neste momento, o segundo curso no sistema, certo? Ao clicar nesses botões de navegação, você também pode anotar a URL que é gerada ou Adicionar cursos, barra, editar barra, barra dois, essa é a nossa identificação. E então sabemos o que está acontecendo nos bastidores, por que estamos vendo os dados em cada uma dessas páginas. Se eu tentasse acessar os detalhes para obter um recorde de 20, então é aí que obtemos o valor de cem por erro. Tudo bem? Então esse é o padrão, o comportamento padrão pronto para uso. Tudo bem? Então, validamos que o curso já está lotado. Vamos validar a multidão de palestras para que eu possa criar a primeira palestra no sistema. E o nome dele é Troy para Williams. Agora observe que nossos rótulos aqui são literalmente parecidos com os rótulos que estão na classe, ali mesmo o nome das propriedades da classe. Então, mais tarde, vamos querer embelezar isso um pouco. Você não quer necessariamente a caixa de camelo ou a caixa Pascal aqui no nível da tela. Mas, por enquanto, isso é validar que funciona. Então, não estamos trabalhando. E, claro, tenho certeza de que você pode testá-lo. Limpo e detalhista. Mas vamos passar para os estudantes. E os estudantes e o sistema seriam, digamos, Tyrone Cooper. E então observe a Data de nascimento, que fazer com que um selecionador de data saiba automaticamente que eu vi que a tag de entrada inferirá o melhor tipo de controle com base no tipo de dados. Então, se eu pular para a página Criar para o aluno, você verá que não está dizendo que deveria ser um tipo de data. Ele está vendo apenas entradas para esse campo. Não. O ASP.Net Core, quando vai renderizar a página, sabe que é um campo de data. Portanto, ele está gerando automaticamente a tag de entrada com o tipo de data, datetime local. Então é isso que está acontecendo nos bastidores. Tudo bem? Agora, se eu não fornecer um valor necessário, você percebe que a validação está surgindo quase imediatamente. Se eu tentar clicar em Criar, não conseguirei ir a lugar nenhum até fornecer um valor, certo? Então, posso dizer Cooper mais uma vez. E então, quando eu criei, a data de nascimento era opcional. Assim, eu posso criar estudantes sem esse valor específico. Se eu tentar novamente e clicar em Criar, validação estará acesa e me informando que esses campos são obrigatórios. Então, esse tipo de validação completa está embutida. Podemos estender isso, mas, por enquanto, acho que isso é bom o suficiente para protegermos a integridade de nossos dados. E é o suficiente para começarmos a demonstrar esse software. Agora podemos ir para a escola para a qual estamos construindo o software e dizer: Ei, você sabe, isso é uma prova de conceito, me avise se isso está atendendo às suas necessidades. Então, quando voltarmos, vamos estender nosso aplicativo um pouco mais. 25. Adicionar ao GitHub: Tudo bem. Então, antes de prosseguirmos, faremos um check-in ou um compromisso. Portanto, é sempre uma boa prática que, ao atingir um marco, você se comprometa. Então, vou para a seção de gerenciamento de controle de origem e direi que foram adicionados bancos de dados e visualizações e controladores de andaimes. Essa é a mensagem da galinha. Então, podemos prosseguir e aqui você está vendo que eu tenho muitas informações e adicionei banco de dados, visualizações e controladores. Portanto, o banco de dados está nos controladores. Aí vamos nós. E então podemos nos comprometer e pressionar. Tudo bem, agora podemos passar para o embelezamento ou aplicação. 26. Personalizando visualizações e elementos - visão geral: Nesta lição, vamos nos concentrar em embelezar um pouco nosso aplicativo. E quando digo embelezamento, se pularmos para algumas de nossas páginas de andaime, veremos que, sim, está usando pouco o bootstrap, mas pode haver espaço para melhorias ou o botão Criar ou botão de edição. Esses botões, os botões axônicos, são apenas padrões. Então, o que gostaríamos de fazer é provavelmente entrar e embelezá-los um pouco e corrigir parte da formatação aqui, colocar algum espaço entre essas seções. E mesmo para a tabela aqui, essa é uma tabela padrão do Bootstrap, mas provavelmente podemos embelezá-la. Então, em toda essa seção, vamos nos concentrar em adicionar alguns elementos de design. Então, na próxima lição, o que faremos é adicionar um pouco de estilo Bootstrap às páginas e formatá-las um pouco para que possamos ter mais aparência de um usuário com aparência mais coesa interface. 27. Adicionando o estilo do Boostrap: Tudo bem, então vamos começar com alguns dos nossos botões na página do curso Vou mudar a aparência desses links. O legal do Bootstrap é que eu posso transformar uma tag âncora regular de link em um botão com bastante facilidade. Se eu pular, deixe-me fechar tudo o que for necessário e eu vou lidar com os cursos. Crie neve. Vamos começar com o índice. Desculpe. Tudo bem, está na página de índice. O que temos? Temos a tag H1 que diz índice. Index, tudo bem? É claro que estou mudando o índice de palavras dos cursos porque o índice de palavras significa muito menos para alguém do que avisar que está vendo a página com os cursos. Então, essas são pequenas coisas. Mas eu disse embelezamento. Então, para a tag âncora que nos permite navegar até o Create, o que posso fazer é adicionar algumas classes de Bootstrap. Se você quiser saber se a classe está novamente, você sempre pode acessar a documentação do Bootstrap e eles podem ver os botões. Mas eu conheço alguns deles de cor porque são muito consistentes e fáceis de usar. Então, primeiro que eu posso ver btn. A propósito, vamos transformar isso para que o link pareça ter desaparecido, certo? Então eu posso especificar que tipo de bunda e eu desejo a casa. Então, para nossas criações, talvez eu queira algo como botões verdes para poder dizer BTN, sucesso acelerado. E se você se lembrar da paleta de cores, o sucesso nos dará um botão verde. Tudo bem? E então eu posso até personalizar isso um pouco. Coloque um sinal positivo aí, empreende o que quer que seja. Depende de você na parte do texto, mas estou apenas mostrando como é fácil transformar link de aparência irregular em um belo elemento visual que parece um botão. E ainda funciona porque, se eu clicar nele, ainda iremos para essa página. Então, vamos fazer a mesma coisa com os detalhes e excluir. Agora, o legal é que podemos fazer isso uma vez porque eles estão sempre repetindo com base nisso da maneira certa. Então, eu não preciso fazer isso para cada disco, eu apenas repito uma vez. Então, aqui, mais é igual a btn. Isso é Edit vendido, provavelmente dá a isso um aviso de praia em holandês. Vou apenas escrevê-los que depois você possa examiná-los uma vez. Então, um aviso de traço BTN, este, vou dar um primário de BTN. Deixe-me diminuir um pouco. E então, para excluir, darei a este um BT e um perigo. Tudo bem, agora o que isso significa? Cada um deles representa uma cor na paleta do Bootstrap. Portanto, você não pode mais uma vez ver as cores, mas sempre será, desculpe, um aviso sempre será uma espécie de primárias de âmbar de corte REM, mas para nos dar aquele tom de azul e delete vai nos dar aquele vermelho. Tudo bem? E então eu posso pegar todos aqueles canos entre essas barras. Essas barras, eu posso tirá-las. E sim, isso parece muito melhor. Tudo bem, então não, todos os cursos que são criados. Então, se eu entrar aqui e disser que me dê um novo curso, vamos voltar ao desenvolvimento de código aberto. O código é CS1 ou dois, e os créditos serão dois créditos. E então eu clico em Criar, então você vê que eles têm essa consistência. Com toda a aparência dos botões, quanto mais botões entrarem, mais colorida e atraente essa interface de usuário começa a se tornar, certo? Então, isso é tudo para a página de índice, pelo menos por enquanto, certo? Você pode fazer suas próprias personalizações, pois acha que pode até usar cores diferentes das que estou usando aqui. Isso depende inteiramente de você e mantém sua visão dos cromossomos de aplicação. Vamos até a praia de criação. partir da criação, ele cria e tudo mais, é claro, e então temos as caixas de texto, certo? Então, vamos começar a criar. E o que vou fazer primeiro é mesclar essas ferramentas. Então, crie um curso e livre-se dessa idade para Todd, deixe o RH. E então, para as entradas, vou colocar um pouco de BR entre essas vermelhas. Eu não quero que eles fiquem tão próximos um do outro. Então, no formulário, estou apenas colocando essa ponte entre cada div de grupo de formulários. Ela é aquela div de grupo de formulário, depois BR, e depois div de grupo de formulários novamente, BR, etc. Agora, depois de fazer isso, o formulário parece um pouco mais espaço. Temos uma linha no topo que é óbvia. Crie um curso, certo? E então, para os botões, o que eu vou fazer é, então, o que acontece é que isso não é um grupo de formulários. Esse é o botão Criar. É fácil usar o BTN primário. E depois, de volta à Lista, há uma tag âncora por si só. Então, na verdade, vou pegar essa tag de âncora, colocá-la no mesmo grupo de formulários e depois dar uma aula. E vamos chamá-lo de btn, btn dash, dark. Tudo bem, então agora, quando eu olho para trás, olhe para isso. Então não, eu posso criar um curso, preencher o formulário, tudo bem, e então eu posso criar ou posso voltar para a Lista. Então, para mim, parece um pouco mais limpo para este formulário. Tudo bem, e se eu clicar em voltar para a lista, ele simplesmente volta para o formulário de edição é muito semelhante ao formulário de criação, certo? Então, acho que podemos fazer o mesmo tipo de modificação aqui. Então, vou copiar essa modificação da tag âncora e ir até Editar. Vou remover esse porque eles vão para o mesmo espaço de qualquer maneira, o mesmo URL. Então, a mesma âncora. Voltando a listar este, vou fazer um vou fazer aviso de btn e vou dizer Salvar alterações. Então esse é o texto do botão que eu quero no formulário de edição. E eu quero que você saiba que quando você é um parafuso para fazer isso, quanto mais curto, é isso que você quer fazer. Então, estou fazendo esse aviso e temos mesmo botão preto que volta para o LR. E então, para o formulário em si, preciso editar aqui. Então, isso vai dizer Editar curso em uma linha. E podemos adicionar algumas etiquetas de quebra. Isso é o que acontece quando você perde um clique. Então, vamos adicionar algumas tags BR entre as seções do nosso grupo de formulários. Tudo bem, agora, depois de fazer tudo isso, vamos lá. Editar curso, chamado assim, mais um antes da seção do botão. Ok, lá vamos nós. Tudo bem. Agora você sabe que, se salvar as alterações, certifique-se de que é isso que você quer fazer e podemos voltar a isso. Tudo bem, parece bom até agora. Então, vamos voltar para a Lista e, em seguida, vamos fazer o discurso de todos os detalhes na página de detalhes, a interpretação de como você deseja que os detalhes apareçam. Isso é mais uma novidade. Na verdade, vou me concentrar apenas no layout aqui. Então, vou dizer Detalhes do curso no topo. E podemos remover isso para o, então isso é o que chamaremos de tabela de dados em HTML. E você tem basicamente um d t, e o d, ou d d, certo? Então, lista de dados e, em seguida, você tem as linhas de dados e as colunas de dados. Praticamente. Isso seria o que é o rótulo e , em seguida, esses seriam os dados reais. Se você quiser modificar isso, você pode. Sua interpretação disso, é claro, é relativa a como você se sente em relação a esta página. Não vou modificar o layout em si. O que vou fazer é focar nos dois botões que vemos aqui e que temos. Eddy, devolva a lista. Então, vou reutilizar as aulas que temos. Aviso de traço Btn, btn, se você quiser ir até o final. E para buck listar btn, btn dash dark. Tudo bem, e isso removerá o cano entre eles. E então esses são os detalhes. Então, eu não estou disposto a fazer muita coisa aqui. Se voltarmos à Lista, poderemos fazer mais com a exclusão. Excluir nos mostrará algo como a confirmação, a página de detalhes, desculpe. E então confirmamos ou excluímos ou voltamos à lista. Não vou modificar a página de exclusão porque, posteriormente, vamos modificar a funcionalidade de exclusão de forma que, quando uma pessoa clica em excluir daqui, nós a avisemos. Você tem certeza? E então, se eles confirmarem, seguiremos em frente e faremos isso. Então, aquele salto duplo em que você vê e depois exclui, eu vou removê-lo. Portanto, não vou gastar energia modificando esta página. Mas não, acho que temos uma aparência melhor em nosso site, é mais colorido. E essas cores, é claro, contam uma história. A cor é informada ao usuário sobre o que ele pode estar fazendo ao escolher essa opção específica. Se você quiser outras cores, é claro, você pode conferir os paletes de bootstrap, ver quais outras cores existem e quais estudiosos são fáceis de usar e usá-las ou personalizá-las com base em suas preferências ou necessidades de marca? Não. Enquanto isso, eu encorajaria você a seguir em frente e fazer a mesma eutrofização para professores e estudantes que acabamos de fazer juntos em cursos. Meu desafio para você é adicionar seus próprios elementos de estilo aos professores e alunos com base em nossas opiniões. Agora, na próxima lição, o que vamos fazer é implementar essa funcionalidade de exclusão mais dinâmica. E eu vou te ver então. 28. Excluir usando o jQuery: Bem vindos de volta, pessoal. Nesta lição, implementaremos uma operação de exclusão mais dinâmica. Agora, a realidade é que, para a exclusão, não precisamos necessariamente excluir e depois ir para outra página. outro lado, mesmo que seja uma boa medida garantir que tenhamos certeza de que ambos excluímos o registro do carrinho. Mas o que queremos fazer é permitir que o usuário confirme aqui mesmo. E depois que eles confirmam, prosseguimos e excluímos em segundo plano e recarregamos a página. Tudo bem, então o que vamos fazer é implementar uma tela de confirmação. Vou usar essa biblioteca chamada alertas de suítes. O alerta de assentos é uma biblioteca muito útil que nos permite criar lindos prompts que, na verdade, têm uma amostra. E vou direto para a amostra que vamos usar, que é um diálogo confirmado com um botão de confirmação. Então, quando dizemos Experimente-me, você o verá aparecer e ele apenas pergunta: Tem certeza de que não conseguirá reverter isso? Obviamente, podemos personalizar as mensagens que aparecerem. E então podemos permitir que o usuário confirme a exclusão ou cancele o que estava prestes a fazer. Então aqui está o código de exemplo que precisamos, certo? Então, vamos começar com a instalação. Então, vou direto para a página de instalação e eles nos descreverão como instalá-lo. Podemos usar o npm, mas não vamos usar o npm. Vamos usar apenas o link CDN que eles nos ofereceram. Uma CDN é basicamente uma versão hospedada do arquivo de script ou dos ativos que você precisaria para usar a biblioteca, certo? Então, podemos usar um CDN. Caso contrário, poderíamos realmente pegar os ativos reais, os arquivos J, S e assim por diante, e colocá-los no projeto. Mas, como eu disse, usaremos apenas o CDN. Então, quando copiarmos isso, voltaremos ao nosso Visual Studio. Código. Projetos que não divididos nas visualizações vão para o layout. E vamos colocar o link da CDN aqui mesmo no layout. Vou colocá-lo depois do jQuery porque depende do jQuery. Portanto, a ordem é importante. Tem que vir depois do jQuery. Tudo bem? Então jQuery, depois isso e depois os outros arquivos de script que temos. Tudo bem. Então, depois de incluí-lo, basta copiar e colar, porque esse URL realmente renderá. Deixe-me mostrar que isso realmente nos trará aos olhos, está aí. Esse é o arquivo de script que sempre será referenciado quando o CDN estiver lá. Não, podemos usar a amostra em nossos sites. Então, estou disposto a emprestar esse código. Eu vou pular de volta e começar com cavalos, certo? Página de índice. Agora, existem várias maneiras de fazer com que o script Java em R seja feito no aplicativo principal, certo? Podemos escrever o JavaScript aqui mesmo no layout. Nesse ponto, é mais global porque, é claro , a página de layout é para cada página, mas não queremos necessariamente que o JavaScript acionado ou esteja disponível em todas as páginas. Então, quando queremos que ele esteja disponível em todas as páginas, nós o colocamos aqui globalmente, certo? Se estamos prontos para criar nossa própria seção de scripts ou se estamos fazendo referência a um arquivo de script inteiro. Podemos fazer isso globalmente nesta seção. Mas você também notará que, por baixo de tudo isso, temos essa coisa chamada seção de renderização. E essa seção será chamada de scripts. Agora, o que isso significa? Isso significa que, em qualquer visualização que eu queira que um código ou script JavaScript específico execute, posso invocar a presença dessa seção nessa visualização específica e escrever o código JavaScript específico para essa visualização. . Por exemplo, se eu quiser apenas que meu doce alerta esteja disponível na página de índice dos cursos. Sim, o link do CDN é, ou todo o arquivo de script está disponível globalmente, mas estou invocando sua funcionalidade somente nesta visualização. Posso criar essa seção no final do arquivo. Eu costumo colocá-lo no final do arquivo, mas ele será gerado dinamicamente com fenda. Ou dizemos que eu seria a seção de ciências. E então chamamos o sexual pelo nome, que, lembre-se, é chamado de scripts. Isso sempre vê aqui os roteiros, certo? Então eu posso invocá-lo pelo nome. E aí eu posso colocar minha tag de script e começar a escrever os JavaScripts que pretendo executar nesta seção. Tudo bem, então vou primeiro criar uma seção inteira do jQuery. Nós invocamos a função. E então eu vou ver aquele impuro. Então, quando esse botão de exclusão é clicado, é isso que eu realmente queria. Como vou identificar esses botões de necessidade? Então, se você quiser uma atualização sobre JavaScript, novamente, confira meu curso de desenvolvimento web onde ele passa por JavaScript. Mas sempre que eu quero um elemento específico, preciso referenciá-lo por alguma forma de nome ou alguma classe que eu acho que vou dar a ele outra classe. Vou chamá-lo de deep btn. Então essa é minha aula. Não servirá ao propósito de lhe dar nenhum estilo. Estou apenas dando a ela um nome de classe, certo? Então eu vou dizer que quando esse botão é clicado, então o cifrão e eu vou usar apenas jQuery, é claro , não, aspas, mas excluir btn, certo, diz obter o elemento que tem a cruz exclua btn. E então fui me registrar, cliquei em eventos. Então, onClick, quero acionar essa função e usarei E para o argumento do evento. Tudo bem, então um objeto jQuery muito grande. E então, dentro disso, somos mais nossa função. E, dentro disso, estamos observando os eventos de clique em qualquer elemento que tenha a classe delete btn, que no nosso caso é nosso botão Excluir real. Quando isso acontece, não, posso colar aquele código de amostra que acabamos de retirar do site da Swell e formatá-lo para que pareça um pouco mais sensato. Tudo bem. Então, basicamente, deixe-me ir. Praticamente. Estamos vendo que, quando clicado, dispare esses alertas de venda, certo? Título. Tem certeza de que não conseguirá reverter isso? E é um ícone de aviso. Em seguida, mostramos o botão Cancelar. Em seguida, podemos definir a cor de confirmação e a cor do botão de cancelamento. Vemos que eles estão voltando para o hexadecimal aqui, mas tudo bem. E então você pode dizer sim, excluí-lo. E então, se eles confirmarem, então observe que não, é o primeiro a disparar essa parte, esse é o aviso. Em seguida, diz “ avalie os resultados”. Os resultados seriam o que eles clicassem em cancelar nossa confirmação. Não. Eles dirão se for confirmado, se o resultado for confirmado, que significa que você clicou no botão Confirmar, o que fazemos? Tudo bem, então o que faremos terá partes diferentes. O que queremos fazer é realmente iniciar a exclusão. Sim, podemos mostrar a confirmação, mas na verdade também queremos iniciar a operação de exclusão no back-end. Então, para esse tipo de operação, o que eu costumo fazer é criar um formulário porque já temos a funcionalidade, certo? Já temos a funcionalidade em nossos, estamos em cursos. Então, deixe-me analisar isso, é claro, é controlado e mostrar o que isso significa. Já temos a funcionalidade em que aceitamos o id, certo? E então repassamos o texto necessário, e então ele lerá Erich para indexar. Então, eu realmente não preciso escrever nada muito especial. Em vez disso, o que vou fazer é criar um formulário semelhante ao formulário real que está aqui no método delete. Tudo bem, então vou copiar isso, mas preciso de tudo nele. Basta copiá-lo. Eu não preciso de um dinheirinho para listar. Eu nem preciso de um botão de envio porque quero usar um jQuery para fazer o envio em meu nome. Tudo bem, mas é aqui que as coisas ficam excitantes. Tudo bem? Portanto, temos nossa opção ASB Excluir. E então temos essa entrada que tem uma vinculação para ID. Agora, estou recebendo todos esses erros não está aqui porque está dizendo que o curso Eye Inumerable não contém uma definição de ID, certo? O olho inumerável aqui em cima, que é uma coleção, não tem ID, é por isso que tivemos que fazer o forEach para chegar ao elemento ID. Então, alguns ajustes aqui. Primeiro, preciso transformar essa tag âncora em um botão, porque os botões enviam formulários, não tags âncora, certo? Se você examinar todos os formulários, notará que todos esses são entradas com tipos de carne ou etiquetas de botão reais. Então, vou apenas criar o novo elemento em vez de destruir o que está lá. Eu queria criar um novo. Então eu vou dizer botão. Vamos dar a ele um atributo de dados. Essa é uma maneira interessante de permitir que ele realmente atribua um valor a um elemento em HTML para que o valor que estou atribuindo seja qualquer valor que seja o ID do item. Tudo bem? Eu queria te dar a mesma aula porque é claro que precisa ser o botão Excluir. Então, como eu tenho isso como botão Excluir, vou removê-lo da tag âncora. E então eu vou dizer que seu tipo é igual ao botão. Portanto, ainda não está tentando enviar nenhum formulário. É só para sentar e ouvir, certo? E então podemos simplesmente dizer botão Excluir, texto. Tudo bem. Vou apenas sinalizar este. Exclua o antigo para que não percamos o clique. Agora temos um botão que tem a classe delete btn. E isso vai disparar nosso doce alerta. Sempre que for clicado, saiba quando é clicado. O que queremos fazer? Queremos pegar o valor do id daqui, conectá-lo ao formulário e, em seguida, enviar o formulário para que ele não possa, ir até o controlador e fazer o que ele teria feito naturalmente. Então, estamos basicamente cortando tudo com precisão. Estamos usando JavaScript para nos ajudar com esses atalhos. Tudo bem, então vamos primeiro modificar as entradas. Então, eu não quero que diga que é antes, em vez disso, eu tenho que dar uma identificação. Então, o que acontece é que o ASB, para eu acho que já o analisamos antes, configura automaticamente os atributos de ID e nome para o elemento que diz ser anterior. Tudo bem? Então, podemos realmente ignorar isso. Podemos colocá-los manualmente. Então eu posso ver que esse é o ID do curso. Esse é o nome ou ID do elemento. E então o nome aqui seria apenas Id. Tudo bem? Id, porque isso precisa corresponder ao parâmetro esperado aqui. Tudo bem? Então, agora o que podemos fazer é quando a pessoa confirma que está fazendo essa exclusão, certo? Posso dizer que foi excluído. Mas, de verdade, quero dizer que me dê o botão que foi clicado. Portanto, o botão var é igual a. E então, usando o cifrão, isso me dará o objeto que acionou o evento, que foi o botão que foi clicado. Então eu quero me dar o ID do botão. Então, vou dizer dados de pontos BTN e me dar o ID. Tudo bem? Então, sempre que você usa esses atributos de dados em seu HTML e deseja obter o que está nesses atributos de dados como valor. Então, em JavaScript, você sempre pode dizer obtenha os dados de pontos do elemento e , em seguida, a chave para esses dados. Portanto, o data dash ID torna a TI essa chave. Tudo bem, agora que tenho os dados do botão, vou ver o fogo sair do óleo antes que o fogo saia do formulário. Na verdade, preciso dar a isso o valor. Portanto, há várias etapas, mas vamos simplesmente percorrê-las para ter certeza de que estamos no caminho certo. Então, cifrão, abra, aumente, aspa. E então isso é ID do curso, hashtag, ID do curso, certo? Em seguida, definimos o valor desse ID do curso com hashtag esse valor de identificação no botão. Só estou fazendo isso linha por linha. Tudo isso poderia ser feito em praticamente uma linha, mas estou dividindo para que possamos ver tudo claramente. Então, queremos enviar este formulário. Então, o que vou fazer é dar a este formulário um valor de ID para que eu possa chamá-lo por seu ID. Podemos chamar isso de uma fazenda de exclusão de curso. Tudo bem? E então o que vou fazer é dizer que, em vez disso, quero enviar esse formulário ou cifrão. E depois a hashtag, o curso exclui as sub-redes de pontos do formulário. Tudo bem, essa é uma maneira agradável e limpa e estamos aproveitando o código existente. Então, vamos analisar exatamente o que está acontecendo aqui. Primeiro, estou mudando essa etiqueta de âncora para ser um botão. Quando esse botão é clicado, ele não tentará navegar em nenhum lugar. Em vez disso, ele acionará esses eventos de clique. Esse evento de clique então acionará um ótimo evento de alerta, no qual solicitamos ao usuário. Você tem certeza? Se eles disserem que sim, eles têm certeza de que essa parte é opcional? Assim, podemos avaliar se realmente queríamos mais tarde. Mas queremos obter os dados, obteremos o botão e, em seguida, obteremos os dados do botão, que é o valor de id no qual ele foi impresso. Tudo bem, então data dash ID. Em seguida, queremos definir esse valor de id no próprio formulário e , em seguida, enviar o formulário. Embora o comportamento esperado seja que, depois de definirmos esse valor de ID aqui e enviarmos o formulário inteiro, ele passará para essa ação de exclusão com esse valor de ID. E isso acionará essa operação de exclusão, que então retornará ao índice. Isso dará a ilusão de que foi excluído e a página foi atualizada. Não é uma ilusão. Isso é realmente o que vai acontecer. Tudo bem? Então, eu tenho feito dotnet watch todo esse tempo. Vamos pular e testar o sal. Então, se eu voltar e criar isso, veja que acabei de criar um curso sem sentido, certo. E estou recebendo esse erro terrível. Acredito que isso seja apenas por causa do tipo de dados inseridos. Então, deixe-me, acho que é esse porque eu limitei o número de elementos nele. Então, deixe-me dizer CBS, CW que criamos novamente. Aí vamos nós. Tudo bem. Então, essas são as coisas às quais queremos prestar atenção na forma como lidamos com essas exceções, mas vamos experimentar nossa nova funcionalidade de exclusão. Agora temos esse botão de exclusão. Se eu clicar em Excluir, receberemos esse aviso. Tudo bem, então essa parte está funcionando. Se eu clicar em Cancelar, nada acontece. Deixe-me tentar isso de novo. Se eu excluir e disser que sim, exclua-o. Recebemos as instruções. Sim, foi excluído, mas fomos atualizados de qualquer maneira. E aí está. Não, não há salto duplo. Acabamos de receber uma confirmação simples. E então, de qualquer forma , confirme ou cancele. Tudo bem. Então, agora meu desafio para você é atualizar a outra página de índice para ter um comportamento semelhante, certo? Modifique esse botão de exclusão que ele use um aviso de alerta, você deve colocar no formulário, colocando os diferentes botões, coisas das quais você tem que usar esta amostra. Agora posso remover isso, essa tag de âncora, e agora é meu botão Excluir. E veja, mesmo que seja um botão e sejam etiquetas âncora, se eu não mostrasse o código, você não saberia. Não há como saber qual é qual. Então, deixe-me reconstruir. Aí vamos nós. Portanto, não há como saber qual é uma etiqueta de ancoragem e qual é um botão, a menos que você inspecione elemento ou faça algo muito intrusivo. E se inspecionarmos o elemento, veremos aqui que o valor do ID de dados aqui é três. Assim como, uau, o URL teria um três. O elemento de ID de dados tem três, então ele o pega e o coloca nesse formulário, que eu sei que está em branco, certo? Não tem valor nisso. Mas quando clicamos em excluir, esse valor é colocado lá e depois enviado. E veja aqui, esse é o símbolo antifalsificação falamos no início do curso. Portanto, isso é muito importante para a segurança, porque você não quer que as pessoas possam simplesmente enviar solicitações de exclusão de elementos com o ID três. Tudo bem, então isso é muito importante para a proteção em que esse token antifalsificação validado no momento em que a solicitação é feita antes que a exclusão seja realizada. É por isso que eu recomendaria que aproveitássemos esse formulário para esse tipo de operação. Sempre que vamos aumentar os dados, devemos sempre usar um formulário. Agora que temos uma operação de exclusão mais interativa, podemos continuar criando mais tabelas interativas. Então, quando voltarmos, veremos como podemos melhorar a exibição de ArrayLists usando tabelas de dados. 29. Adicionar dados: Nesta lição, instalaremos tabelas de dados, que é uma biblioteca baseada em jQuery que estende a funcionalidade de nossas tabelas típicas. Agora, aqui está um exemplo especialmente ajustado para o Bootstrap five. Tudo bem, e você pode chegar lá lidando com tabelas de dados.net slash example slush styling slash bootstrap file dot HTML. Então, a partir daqui, você verá que é isso que transformará nossa mesa. Ele vem com paginação e vem com a capacidade de mostrar mais ou menos entradas por vez e uma pesquisa dinâmica. Então, se eu pesquisar alguma coisa com as letras TR, ela começará a filtrar imediatamente. É uma maneira muito legal de fazer com que nossas tabelas pareçam mais atraentes e mais orientadas por dados. Abaixo, eles também mostram como podemos fazer a integração. Então, temos que fazer essa linha de inicialização em JavaScript. Temos a amostra da tabela em HTML, teremos onde não faltam tabelas, então tudo bem. E então temos os ativos de CSS necessários, certo? Então, vamos começar com as partes do JavaScript. Eles nos deram alguns links de CDN. Então, o primeiro que precisamos é o jQuery. Já temos o jQuery porque ele saiu da caixa com nossos projetos e eles simplesmente voltaram para o layout. Podemos ver que já temos o jQuery. Isso é bom. O que mais precisamos? Precisamos do link CDN para o arquivo de tabelas de dados jQuery e precisamos de um link CDN para o arquivo Bootstrap JS. Então, o que vou fazer é duplicar essas duas linhas. Essa linha é para alertas de doces. E então vou simplesmente copiar os novos links da CDN. Tudo bem, então eles estão bem alertas. Então, na próxima, a primeira duplicata, vou substituí-la pelo link CDN de duas tabelas de dados no mínimo. E então o segundo eu vou substituir da mesma forma. Tudo bem. Então, agora temos os arquivos JavaScript para tabelas de dados incluídos em nosso arquivo de layout. Em seguida, precisamos do CSS, e eles também estão nos dando os links do CDN. E, mais uma vez, é importante seguir a ordem que eles os estão listando no CSS. Eu posso ir até o topo e vou simplesmente duplicar o bootstrap. Então lubrifique o Bootstrap. Em seguida, pegaremos o primeiro link CDN para o arquivo CSS e substituiremos a primeira referência CSS duplicada do Bootstrap. E então pegaremos essa e faremos a mesma coisa novamente. Tudo bem. Então, como as tabelas de dados exigem bootstrap, é claro, precisamos primeiro da folha de estilo do Bootstrap. E então podemos colocar no pulso. E então nosso próprio site, CSS, vem por último. Porque então, se precisarmos substituir qualquer coisa entre os três primeiros, poderíamos fazer isso em nosso próprio arquivo CSS. Tudo bem, e então este vem ainda abaixo desse arquivo CSS. Então, tudo bem. Agora que temos os ativos incluídos, avise-nos e veja como os inicializamos. Então, se eu voltar para o exemplo de JavaScript, mostrar que quando o documento estiver pronto, podemos simplesmente inicializar a tabela de dados. Então, vou copiar isso e voltar para cursos que são como o Grown 04 ou uma funcionalidade inovadora. E o que temos aqui é uma mesa com a mesa da turma. Então, vou usar a tabela de classes para identificar a tabela que já está na página. Tudo bem, então o que eu posso fazer já tem esse método ou função jQuery em execução. Então, vou colocar essa inicialização para a tabela de dados ali mesmo. Então, temos o evento de clique, que é registrado quando a página está pronta. Vamos fazer a mesma coisa aqui com uma tabela de dados. Mas o elemento que estamos visando é a tabela de pontos, ou seja, qualquer elemento que tenha a tabela de classes, que temos um elemento com uma tabela de classes. Tudo bem, então, quando eu fizer isso, vamos dar uma olhada na página dos cursos após essa modificação ou certo. Se você olhar, verá que não, estou recebendo todos esses elementos visuais que acabamos de ver. E eu posso fazer a classificação. Eu posso classificar por nome, posso classificar por código ou posso classificar pelo número de créditos. Eu posso. Este não precisa ser pesquisado porque são todos iguais. Se eu quiser filtrar, posso ver aberto e ele filtrará automaticamente, certo? Então, desse jeito, eu transformei isso. Quero dizer, já era uma tabela bonita virtude de ser um tema Bootstrap. Mas foi meio claro. Tudo bem, transformei essa tabela plana em uma tabela de dados incluindo apenas uma linha de código após colocá-la nos ativos. Os ativos. Essa é uma atividade única, porque adivinhe? Posso fazer isso em cada página em que tenho uma tabela que eu quero que seja exibida como uma tabela de dados. Então, vamos fazer, por exemplo, os cursos. Vamos dar uma olhada nas palestras de literatura. Sem modificação. As palestras ainda estão em andamento. Se eu quisesse modificar isso, vou até a página de índice de quatro palestras e já a modifiquei para fazer as melhores coisas de alertas. Então, vou inserir esse novo código da tabela de dados nessa seção. E então pronto, deixe que seja transformado. Agora, a desvantagem das tabelas de dados prontas para uso é que, bem, da forma como o aplicativo é escrito, ele está, na verdade, fazendo uma estrela de seleção o tempo todo. Então, se tivermos 1500500.000 registros, não importa quantos registros, eles sempre tentarão carregar todos eles na página uma vez. A vantagem das tabelas de dados é que elas automaticamente nos permitem folhear e limitar o número de elementos que são exibidos por vez. No entanto, no final das contas, ele ainda terá os 500.000 discos no front-end. É aí que você começa a pensar nas atividades de paginação do lado do servidor e assim por diante. Para que, na verdade, ele traga de volta apenas o número X do número total de registros, já que nosso sistema é muito pequeno, não vou me preocupar com isso ainda. Mas essa é uma boa atividade para simplesmente limpar todos os nossos elementos. Veja nosso p.sit. Então, vou adicionar isso à página de índice e, em seguida, poderemos encerrar essa atividade. Depois de validarmos essa transformação. Na próxima lição, veremos como podemos limpar a exibição de nossas etiquetas. 30. Adicionando etiquetas personalizadas: Bem vindos de volta, pessoal. Nesta lição, veremos como podemos limpar um pouco a exibição das etiquetas, certo? Não, os rótulos estão nos mostrando textos idênticos ao nome da propriedade, o que não é ideal porque não é realmente legível por humanos como programadores, parece bom para nós porque isso é tudo o que temos para escrever o código. Mas para nossos clientes e os usuários reais do sistema. Isso realmente não parece muito bom, certo? Então, o que queremos fazer é corrigi-los de uma forma que não precisemos fazer isso manualmente em cada página, porque teremos que corrigi-los no índice. Teremos que corrigi-los na criação edição, detalhes, etc. Portanto, queremos corrigi-los uma vez para que não precisemos repetir isso. Nenhuma solução simples para isso seria ir para a aula de dados, certo, para estudantes. Tudo bem, vamos começar com o curso porque não somos estudantes. Estudantes porque eles realmente têm o invólucro Pascal, certo? Então, vou usar a turma do aluno para começar esse exemplo. A solução simples seria adicionar anotações aqui, porque podemos ver facilmente essa peça. E então defina o nome. Em seguida, incluímos apenas as anotações que faltam usando quais dados estão presentes no componente de pontos do sistema , suas anotações. E então pudemos ver que o nome é igual a e definir o valor que queremos, que seria o primeiro nome do espaço. Só fazendo isso. Tudo bem, só de fazer isso, se eu atualizar a interface do usuário, você verá que não, ela tem o primeiro nome. Se eu for criar um novo primeiro nome de espaço, tudo bem, então essa é uma solução para cada estranho que isso seja exibido. E isso porque essa anotação de dados é o que informará o real. Quando tínhamos nossa mesa, tínhamos um nome de exibição para ela. Aí vamos nós. Tudo bem, então isso são cursos. Deixe-me mostrar isso no índice para estudantes. Tudo bem, então mostre o nome para FirstName. Portanto, mesmo que esse seja o elemento, o nome de exibição de obterá as instruções dessa anotação. Saiba que isso funciona. A desvantagem aqui, no entanto, é que, se o banco de dados mudar e tivermos que correr em dobras ou elementos, tudo será redefinido e isso não poderá ser mantido. Isso seria um esforço desperdiçado porque toda vez que o banco de dados muda, temos que ser confusos e, toda vez que estamos dificuldades, teríamos que ler e fazer isso novamente. E isso é literalmente uma perda de tempo. Agora, a solução para isso é criar uma classe estendida dessa classe. Tudo bem, então primeiro, todos os elementos que foram gerados a partir da atividade de andaime, onde parciais, escrever os modelos são todos parciais, até mesmo o contexto do banco de dados é parcial. Em C-Sharp, uma parcial significa que eu posso ter vários projetos do mesmo arquivo. Tudo bem, então aqui estão os projetos que o EF Core nos deu. Mas então eu posso criar outro projeto que complemente este. E é isso que vamos fazer para remediar a situação. Então, vou criar uma nova classe e criá-la na pasta de modelos. E você arquiva, eu quero chamá-lo de dados do aluno. E então eu preciso do meu namespace, que será, e eu sou muito preguiçoso. Às vezes, vou pegar tudo isso emprestado e dizer namespace, nomeie modelos de pontos. Tudo bem? Em seguida, temos nossa turma, que são os dados do aluno. Tudo bem? Não, claro que isso é público, classe pública. Certo? Agora, em nossa classe pública, com dados de mentores de estudantes, posso realmente definir propriedades que correspondam ao aluno original, certo? Então, digamos que eu queria esses três elementos e estou usando esses três porque, id, eu realmente não preciso substituir nada por ID. Tudo bem? Então, vou usar esses três e colocá-los aqui. Então eu posso colocar minhas anotações para que eu possa dizer “exibir”. E o nome é igual a. O nome é igual a. E, claro, preciso das minhas declarações de uso perdidas. Aí vamos nós. E então esse será o espaço do primeiro nome. E então vou copiar isso e reutilizá-lo para sobrenome e data de nascimento, corrigir a formatação, é claro, e depois ajustar o texto que está sendo exibido. Assim, a data de nascimento recebe a data de nascimento, espécie de alimento e o sobrenome recebem o nome espacial perdido. Tudo bem. Então, agora os definimos e também podemos fazer outras coisas, como validações específicas, certo? Então, se eu quisesse. Para colocar isso, ok, isso nunca deve ter mais de 50 caracteres quando inserido na interface do usuário, eu posso colocar um comprimento de string de 50, certo? Eu poderia afirmar isso. Ok, na interface do usuário, talvez não esteja no banco de dados, tanto na interface do usuário. Eu quero atender a esse requisito, certo? Então, essas são coisas que podemos fazer para forçar validações e exibições no lado do cliente ou na interface do usuário, certo? Não vou exigir que eu esteja apenas mostrando e não preciso que tenha o comprimento 50 da corda, então tudo bem. Agora que temos esse arquivo de metadados, como associamos isso ao modelo de dados real? Bem, logo abaixo, no mesmo arquivo, vou ter apenas uma declaração de alunos públicos de turma parcial. Então, lembre-se de que uma parcial me permite ter o, as implementações são os projetos em vez de em vários lugares. Então, isso vai estar em um plano vazio, certo? Mas quando tudo estiver compilado, tudo o que eu colocar nesse plano será compilado com o que eu coloquei nesse plano. E então, tudo será apenas um grande projeto no final do dia. Portanto, não, preciso associar esse plano aos metadados do aluno. Então, vou dar a classe parcial e a anotação, que é o tipo de metadados do modelo dele. Talvez seja necessário incluir uma referência de uso. Então, se você receber um erro, quando você vincula esse modelo a um tipo de dados, nós apenas controlamos os pontos e as instruções de uso, certo? Então, estamos vendo um tipo de metadado do aluno. Então esse é o associado, essa classe de metadados com o conhecimento parcial quando eu examino e atualizo nossas páginas, ela não está funcionando. Não está funcionando. Isso é porque estou no namespace errado. Tudo bem, então eu coloquei o namespace com base na pasta. Quero dizer, obviamente, mas a classe parcial real está em um namespace diferente. Então, para que essa parcial saiba que é parcial à outra. Uma maneira fácil de saber que é se eu Control clicar aqui, ele dirá que não há referência ao telefone, certo? Mas então, se eu alterar esses dados, mudar o namespace para dados e, em seguida, permitir que eles sejam atualizados quando eu clicar neles, sem clicar no controle, ele saberá que, ok, há uma parte dos alunos aqui, e também há um aluno parcial aqui, certo? Portanto, o namespace é muito importante. Provavelmente, você poderia colocar esses metadados dentro da pasta de dados. A atividade de andaime realmente só substituirá os arquivos, ignorando um parafuso. Qualquer coisa que já esteja lá não será excluída, mas isso depende de você. Vou deixar isso como está e vamos tentar de novo. Então, quando eu refresco, lá vamos nós. Então, primeiro nome, sobrenome, data de nascimento. E isso parece muito mais fácil de ler. Muito mais fácil de usar se eu entrar em detalhes, também é um tópico fixo. Se eu for para Editar, também será corrigido. Portanto, não preciso percorrer todas as páginas e fazer essa mudança para HTML, criando um lugar e ela terá valor em qualquer outro lugar. Essa é uma maneira fácil e agradável de modificar a exibição e as seções de rótulos de nossas, bem, a exibição em nossa interface de usuário a partir de nossas aulas. Então você pode tentar a mesma coisa com uma palestra. Vá em frente e crie essa palestra e a aula de MetaData. A parte que me lembro é que o namespace precisa corresponder. E então você pode adicionar seus próprios nomes de exibição e validações, se necessário. 31. Gerenciando alterações de banco de dados: Tudo bem, pessoal, então recebemos feedback sobre o que estamos fazendo por meio da interface de usuário, funcionalidade, de tudo, e recebemos um ótimo feedback. Eles adoram isso. O cliente está morrendo de vontade de usar o sistema. Mas eles disseram que, tudo bem, antes de podermos usar totalmente o sistema, precisamos de mais dois recursos. Tudo bem? Portanto, os dois recursos que eles estão solicitando exigirão alterações no banco de dados. Nesse caso, eles querem poder acompanhar as aulas. E uma aula é definida por um professor ministrando um curso em um horário específico. E então eles querem poder rastrear as matrículas dos alunos, o que significa que um aluno está matriculado em uma turma. Tudo bem, isso significa que precisamos de duas tabelas adicionais. Agora, eu tenho o Data Studio e já estou conectado à minha instância em execução no escuro. Assim, você pode clicar em pausar, abrir seu Data Studio e ativar o Darker, se precisar. Se você precisar de uma atualização sobre isso, você deve ter uma interface de usuário mais escura onde você pode simplesmente acessar a lista de contêineres e procurar seu Microsoft Container e que você configurou, eu posso clique no botão Reproduzir. E depois que isso estiver instalado e funcionando, você poderá se conectar usando o Data Studio. E o Data Studio geralmente faz um bom trabalho em reter os detalhes da conexão. Então, agora o que precisamos fazer é escrever um novo roteiro. Então, vou abrir um novo roteiro e então você pode ver estou retomando de onde parei da última vez aqui. Mas nesta janela de script, vou começar com uma declaração de uso, então sabemos que precisamos usar o banco de dados de gerenciamento escolar. Agora, o interessante sobre o Data Studio é que você pode fazer essa instrução de uso, mas também pode selecionar o banco de dados nessa lista suspensa do topo. Eu costumo fazer isso de qualquer maneira porque às vezes você pode esquecer fazer essa parte e acabar executando um script no banco de dados. Portanto, sempre comece com suas declarações de uso. Não, preciso criar duas novas tabelas. Então, vou criar uma tabela e você vai me ver meio que quebrar a disciplina porque o SQL não diferencia maiúsculas de minúsculas. Então, inicialmente, tentei o meu melhor para capitalizar as palavras-chave. Vou relaxar desta vez e não ter tanto cuidado. Tudo bem? Então, estamos criando uma tabela chamada classes e ela obterá um ID que é int, chave primária e identidade que sempre deveria estar lá. Além de eu sugerir que ela deveria estar sempre lá, Entity Framework adora ver quando há uma chave primária. Tudo bem, então isso gera muita dor de cabeça quando se trata de usar o EF Core. Segure a caixa de uma forma muito poderosa. Então, o que mais a turma da turma terá nossa referência, o ID da aula. Então, esta é a primeira vez que vamos fazer uma chave estrangeira aqui, ID da aula, que é inteira, é uma chave estrangeira que faz referência à tabela de palestras e à coluna id. Então, mais uma vez, se você não está tão familiarizado com chaves estrangeiras e relacionamentos para revestir meu curso de desenvolvimento de banco de dados, Microsoft SQL Server para todos. No entanto, se você for, isso deve parecer muito familiar para você , porque obviamente precisamos associar a classe à palestra. E a turma também precisa estar associada a um curso. Então, temos que fazer a mesma coisa e apresentar, introduzir um ID do curso, que também é um número inteiro e uma chave estrangeira que faz referência ao curso é estável e a coluna id. Bem, para Não, eles disseram que só querem tempo. Então, vamos supor que, uma vez que esse horário esteja no sistema, isso significa que esta palestra ministrará este curso neste horário, todos os dias da semana. E é isso que constituirá nossa classe. E o que fazemos aqui ou as decisões aqui são baseadas nas regras de negócios e nos requisitos de negócios do cliente. Tudo bem. Então, estou apenas tentando mantê-lo de forma muito simples. Pode não ser o sistema mais realista no grande esquema do sistema de gestão de escolas aquáticas. Mas estou apenas mantendo as coisas simples para que possamos entender alguns desses conceitos. Tudo bem? A próxima tabela seria a tabela de inscrições, e vou colocá-la aqui. Temos inscrições no Create Table. Ainda temos nosso ID de chave primária. E então uma matrícula é definida por um aluno. Portanto, precisamos da identificação do aluno, chave estrangeira que faz referência à coluna ID na tabela dos alunos. E depois a aula que o aluno está cursando. Esse ID de classe, referenciando a classe, é estável. É por isso que temos que ter certeza de criar a classe antes de criarmos as inscrições, porque há uma dependência ali mesmo na tabela de clássicos. Agora temos o que podemos correr. E isso foi concluído com sucesso. Então, se eu desistir, vou ver que agora tenho aulas e inscrições de duas novas tabelas foram criadas. Agora, como colocamos essas duas novas tabelas em nosso aplicativo, certo? Então, já temos o professor do curso, aluno sabe que precisamos de novos cursos. Então, vou parar meu relógio dotnet. E vamos mostrar esses trechos de terminologia. Então, estou trazendo isso à tona e deixe-me aumentar o tamanho da fonte. Então, vou criar o mesmo comando que usamos pela primeira vez para trazer todos esses elementos. Então, eu tenho o comando aqui e podemos atualizar sua memória sobre o que cada seção cria. Mas apenas em um ou dois, o que eu fiz no passado foi criar um arquivo parcial no qual esse comando residiria, porque esse comando nunca o mudaria de lidar com um banco de dados inteiro a hora, certo? Então, em vez de tentar reescrevê-lo da memória ou colocá-lo em algum lugar e esquecer onde eu o coloquei. Eu o coloquei em um arquivo parcial e o coloquei no projeto. Então, o que eu faria é apenas executar aquele arquivo Porsche que executaria esse comando. E isso só vai me dar o nível de consistência que eu preciso. Isso é algo que provavelmente podemos ver na seção de bônus deste curso. Mas, por enquanto, vamos reordenar o comando. Então, temos dotnet, EF, EV, contexto confuso e, em seguida, temos nossa string de conexão. E lembre-se de que, se você tiver caracteres especiais em sua cadeia de conexão, especialmente como na senha que eu tinha com esses dois cifrões , você precisaria usar uma única aspa, tudo bem? Para recuperar a string de conexão, é claro, você pode simplesmente ir para as coisas opostas, como o arquivo JSON. Você pode copiá-lo e colá-lo lá. Então temos o provedor, que em nosso caso é o SQL Server, estamos forçando a forçar o andaime para que ele substitua todos os arquivos do telefone no diretório de saída, que são dados. E não queremos nada na configuração porque não queremos, não queremos que contexto do banco de dados tente ter sua própria cópia da string de conexão no núcleo. Tudo bem, depois de fazer tudo isso, pressionamos Enter e permitimos que ele seja executado, e ele constrói um projeto com sucesso. Quando voltarmos ao nosso Explorador de Arquivos, veremos que agora temos esses novos arquivos. Deixe-me diminuir um pouco. Tudo bem, agora temos a aula I, a ID do curso. Você tem tempo com as propriedades de navegação, o curso e as matrículas, certo? Então é isso que a turma traz para a mesa. A inscrição inclui matrícula, carteira de estudante, ID da turma, alunos da turma primária. Tudo bem. Então, agora temos uma tabela adicional. Então, o que eu desafiaria você a fazer é, na verdade, ler e arranhar as páginas da multidão dessas duas mesas. Você também notará que ao testar sua interface de usuário , como fizemos as classes de metadados, não perdemos nossos rótulos, então isso é bom. Tudo bem, agora você pode fazer o mesmo tipo de extensão de metadados para eles. Se necessário. Você pode ver a interface do usuário e ver como ela é básica e ajustá-la para capturar com precisão os dados que precisam ser capturados. 32. Corrigir erros de sintaxe: Tudo bem, pessoal. Então, eu estava preparando os controladores para os novos e novos modelos de dados. E eu comecei com a aula e me deparei com vários erros. Então, não estou escondendo a Terra de vocês porque se eu tiver os erros, vocês têm flechas, quero que os resolvamos juntos. Eu queria ajudá-lo a entender por que estamos recebendo esses erros. Agora, a classe de palavras é uma palavra-chave em C Sharp na maioria das classes de idiomas, certo? Então, o problema aqui é que temos o que chamaremos de linguagem de domínio, linguagem específica do domínio, que neste caso seria a construção de um sistema de gestão escolar. Portanto, a palavra classe significa algo diferente para uma escola do que para uma linguagem de programação. É irônico que a palavra-chave seja tão importante na linguagem de programação que esteja causando um conflito com certas coisas. Então, aqui no controlador de classes, você notaria que os elementos que estou percorrendo são erros para que possamos entender a sintaxe diferente que podemos estar vendo. Aqui você verá na aula de sinais que dizer um anúncio é como um assassino de palavras-chave. Então, se disséssemos a palavra classe por si só, isso causaria um erro porque classe, mais uma vez, é uma palavra-chave usada ao definir uma classe real no código. Portanto, não podemos usar essa palavra-chave como uma variável. Se você precisar usar uma palavra-chave como variável, você pode colocar o sinal de adição na frente dela. E então isso meio que ativará seu status de palavra-chave. Em C-Sharp. Saiba que os erros que estamos cometendo envolvem isso no signo. E estava tentando gerar, acho que estava apenas tentando ser inteligente e se perdeu ao longo do caminho, certo? Então, todos esses sinais aqui, em vez das expressões lambda, não são caracteres ilegais porque ele não pode simplesmente ter uma camada de óxido que podemos facilmente trocar todos esses sinais por uma lambda token de expressão. Eu sempre uso Q. Você pode usar C se quiser. Realmente não importa, mas eu só queria ter certeza de apontar o que está causando esses erros, quais são esses sinais. Então você não sentiu que fez algo errado porque provavelmente a culpa é mais minha e é sua em termos de usar uma palavra-chave como essa sem apontar os perigos, certo? Então, uma vez que fizermos tudo isso, poderemos fazer uma construção de dotnet. Então, deixe-me fazer uma compilação de dotnet novamente. Tudo bem, e eu tenho alguns avisos, mas nada a escrever sobre barcos. Isso é algo sobre a referência nula. Discutiremos isso um pouco mais tarde. Na verdade, eu estava no processo de arquivar as matrículas. Tudo bem. São pequenos barcos. Tenho certeza que vocês já estão. Estou em cima disso. Mas se eu fizer um CLS e depois reativar esse comando para as inscrições. Então, vamos tentar organizar as matrículas juntos. E depois de alguns segundos, agora temos o controlador de inscrições e o suporte de visualizações. Tudo bem, então eu só queria entrar e , caso você esteja compartilhando essa dificuldade, mostrar que eu também tive uma dificuldade e que há um gráfico de saídas. Então, nos vemos na próxima lição. 33. Adicionar ao GitHub: Tudo bem, então esse módulo nos ajudou a realizar algumas atividades silenciosas. Analisamos a limpeza da interface do usuário usando o Bootstrap Styling como um todo para adicionar algumas bibliotecas jQuery de terceiros ao nosso fluxo de trabalho. Como personalizar rótulos de forma que não sejam sobrescritos toda vez realizamos uma atividade de andaime e nos deparamos com alguns erros de sintaxe e encontramos uma saída. Isso é o que a programação realmente é. Vamos cometer erros, mas não se trata de evitar erros. Trata-se de corrigir os erros e triunfar sobre as áreas, certo? Neste ponto, chegamos a outro grande posto de controle. E o que vamos fazer é configurar nossa mensagem de check-in ou confirmação. Então, digamos que tenha terminado de personalizar visualizações e elementos. Sim, eu acho que isso é bom. Você provavelmente também poderia adicionar isso. Você adicionou aulas e matrículas. Tudo bem, mas vamos seguir em frente, nos comprometer e insistir nisso. Nos vemos na próxima lição. 34. Compreender a autenticação: Tudo bem, pessoal, então, nesta seção do curso, vamos analisar a autenticação e por que ela é importante e quais são nossas opções. Não, a autenticação é importante quando queremos controlar o acesso ao nosso aplicativo como parte do nosso aplicativo. Bem, predominantemente a autenticação rege todo o aplicativo. Portanto, é parte de sua necessidade de autenticação ou dos dormitórios. Tudo bem? Então, por exemplo, qualquer pessoa pode acessar a página inicial, certo? E olhe e diga o que quer que seja fechado. No entanto, somente usuários logados talvez possam ver esses links. E mesmo que eles consigam memorizar o link, eu sei que eles podem ver os cursos de barra serem cortados e, em seguida, tentar navegar até lá. Eles devem ser obrigados a fazer login ou se autenticar antes de prosseguirem. Então, essas são as coisas que autenticação traz para a mesa, certo? A autenticação exige que você identifique quem você é e verifiquemos quem você é. Depois, há outra parte chamada autorização, o que significa que alguém pode estar autorizado a criar um curso, mas pode não estar autorizado a excluir o curso. Pode não ser autorizado o final do curso, mas eles estão autorizados a ver a lista e ver os detalhes, certo? Autorização significa o que você pode fazer na minha inscrição? Agora, em termos de nossas opções, temos a opção de ter nosso próprio sistema de autenticação. O ASP.Net Core vem com sua própria biblioteca, o núcleo de identidade, que nos permite integrar de forma fácil e perfeita os serviços de autenticação em nosso site. Agora, com alguns comandos, poderíamos realmente ativar todas ou pelo menos 90% das funcionalidades necessárias para fazer isso. Mas haverá algumas limitações porque se trata de um aplicativo da web. Mas talvez o cliente, no futuro, queira ter um aplicativo móvel. Ou talvez eles gostariam de ter vários aplicativos que usassem vários aplicativos que usassem o mesmo nome de usuário, senha e credenciais. Então, nesse ponto, você tem que pensar bem. Você tem que pensar fora da caixa, certo? Eu crio sistemas de autenticação diferentes para todos esses cenários diferentes e, em seguida, tento fazer tudo funcionar. Ou eu tento centralizá-lo, mas ainda preciso mantê-lo? Ou eu apenas terceirizo isso para um provedor terceirizado que fornece todos esses serviços. De qualquer forma, para este curso, vamos escolher a última opção, que é usar uma plataforma de terceiros que faça tudo isso de qualquer maneira. Então, a plataforma que vamos usar está desativada. 0.0 fornece recursos de autenticação e segurança do usuário seguros e protegidos. Está na forma de um SaaS. Então, isso significa que não precisamos hospedar nossos próprios dados se nosso banco de dados falhar, ainda temos todos os dados do usuário hospedados por esta plataforma. É fácil de integrar porque eles têm muitas predefinições as integrações são muitas considerações que faríamos para realmente proteger ou melhorar, elas já foram resolvidas e com as quais é muito fácil integrá-las. Assim, você pode se registrar em uma conta usando off zero, então zero.com, e então você pode simplesmente entrar com sua conta do GitHub porque você deveria, neste momento, já ter uma conta do GitHub e começar a usar gratuitamente. E na próxima lição, veremos qual é a próxima etapa. 35. Registre-se para o Auth0: Tudo bem, pessoal, então presumo que vocês já se inscreveram. Se você usa sua conta do GitHub ou um dos outros ícones sociais, suas colunas já foram criadas manualmente. Todos nós deveríamos acabar em uma tela como essa. Isso não está começando. Então, a primeira coisa que eles veem é integração do zero em seu aplicativo. E então podemos prosseguir e criar um aplicativo. Agora eles vão perguntar: que tipo de aplicativo você vai criar? Então, isso só mostra a variedade de suporte que eles oferecem, certo? Porque se não devêssemos criar nossa própria autenticação para todos esses dispositivos, isso poderia causar muita sobrecarga de manutenção. Então você sempre quer escolher suas batalhas. Você sempre quer ter certeza de que está tomando a melhor decisão para seu cliente e para o projeto que está em questão. Então, a partir dessa perspectiva, poderíamos ver que estamos criando um desktop móvel ou uma interface de linha de comando baseada em aplicativos de uma única página usando uma dessas estruturas de spa. Estamos fazendo nosso aplicativo web regular usando uma estrutura de desenvolvimento tradicional para a web? Ou estamos fazendo uma CLI ou demônios? Então, acho que, para este, definitivamente gostaríamos de usar a web normal porque vemos o asp.net na lista. E então podemos dar o nome a ele. Vamos chamar isso de gestão escolar. Tudo bem. E então podemos seguir em frente e criar. Agora, a próxima coisa que eles estão perguntando é me dizer qual tecnologia usar, certo? Então, aqui está uma lista maior de todas as tecnologias possíveis que poderiam ser usadas com base em nossa seleção. Mas é claro que estamos usando o asp.net Core. E escolheremos a versão da ferramenta de três pontos porque, a partir de três, tudo foi meio que padronizado. Então, podemos seguir em frente e selecionar esse. E não, eles estão nos dando esse ID de cliente e podemos passar por diferentes configurações e até nos mostram como podemos prosseguir com a integração, tudo bem, e aqui está o suporte. 3.1. 565 também é suporte 6.7, funcionam perfeitamente em conjunto para possamos definitivamente prosseguir com o que estamos fazendo aqui. Então, se simplesmente percorrermos a explicarmos exatamente o que precisamos fazer, obtenha suas chaves de inscrição. Depois de se inscrever, você precisa acessar as Configurações de aplicativos e, em seguida, configurar certas coisas. Tudo bem, então vamos começar acessando as configurações do aplicativo e precisamos definir alguns URLs, certo? Então, vou abrir isso em uma nova guia. E então, na lista, você provavelmente já terá o aplicativo padrão e terá sua atualização recém-criada para poder selecioná-la. E esse é o nosso domínio, esse é o nosso ID de cliente. Precisamos dessas configurações para mais tarde, mas, por enquanto, o que precisamos fazer é configurar nosso URL. Temos o que chamaremos de URL de retorno de chamada de carregamento e, em seguida, um logotipo de carregamento amanhã, e assim por diante. Precisamos usar esses URLs para usar o URL do aplicativo. Deixe-me voltar para o nosso projeto a partir da nossa pasta de propriedades, lawn settings.js, e vamos emprestar esse URL. E o formato do URL precisa ser esse URL e cortar a palavra callback. E então, para o logotipo amanhã, podemos simplesmente deixar o URL padrão. Agora, se precisássemos facilitar vários URLs de retorno de chamada, como indica onde estamos em desenvolvimento. E então talvez tenhamos um ambiente de teste, um ambiente acuidade e o ambiente real de produção. Teremos vários desses URLs para o mesmo aplicativo, certo? Assim, podemos apenas colocar uma vírgula, separá-los e cada um representará apenas o URL conforme necessário. Então, enquanto estivermos lá, podemos deixar as coisas assim. Depois de colocar esses valores, vamos nos certificar de que vamos até aqui e clicamos em Salvar alterações. Agora, depois de fazer isso, queremos adicionar os arquivos de configuração ou esses arquivos-chave específicos ao nosso aplicativo. Então, voltaremos ao código do Visual Studio. Dessa vez, acessaremos as configurações do nosso aplicativo e, em seguida, poderemos criar uma nova seção. E eu vou fazer isso em um host de carga e cancelaremos isso de zero. E então esta seção vai ter duas chaves, vai ter domínio. Deixe-me obter meu domínio vermelho de digitação. Aí vamos nós. E isso vai ter um valor. E então vamos fazer o ID do cliente. Portanto, esses são valores que ajudarão zero a saber qual aplicativo está fazendo uma solicitação. Então, esses valores nos são dados aqui. Tudo bem, então esse é o nosso domínio, esse é o nosso ID de cliente. Então, vou pegar emprestado esse valor de domínio e colá-lo lá. E vou pegar emprestado esse valor de centralidade, colá-lo aqui. Agora que temos isso, precisamos nos integrar com o pacote NuGet, certo? Então, deixe-me interromper o aplicativo em execução aqui e deixar eu limpar tudo. Então, precisamos do pacote dotnet add e estamos adicionando. Autenticação de pontos ASP NET Core sem zero pontos. Então, quando fazemos isso, damos alguns segundos e sabemos que está instalado, podemos passar para a próxima etapa. Então, antes de passar para o próximo slide, eu só queria ressaltar que tudo o que estou vendo está realmente documentado aqui. Então, entre o que estou vendo e o que esse documento real está vendo, estamos fazendo a mesma coisa, certo? Então esse é um passo que acabamos de dar. pacote instalado seria se você estivesse usando o Visual Studio e usando o gerenciador de pacotes NuGet, onde não. Então, usamos o pacote dotnet add, parece antigo com, certo? A próxima coisa que queremos fazer é adicionar aos nossos serviços as configurações que sabemos que usaremos do zero. Não. A sintaxe aqui é um pouco diferente, principalmente porque isso é realmente para o dotnet Core 3.1, 56.7, todos têm um program.cs de aparência diferente, mas é o mesmo conceito, certo? Então, podemos pegar isso emprestado, pular para o nosso projeto goto em nosso arquivo program.cs. E deixe-me diminuir um pouco o zoom para que você possa ver um pouco melhor. Aí vamos nós. Deixe-me fechar esse terminal dentro dos serviços logo acima controladores AD com visualizações que eu quero adicionar e extraídas da amostra. Agora, obviamente, há um erro aqui porque não são mais serviços. Agora são serviços Builder Dot, mas é a única grande diferença. E então podemos adicionar as instruções de uso para aquela biblioteca ausente onde temos configuração e não vai dizer configuração de pontos do construtor, então eu posso simplesmente substituir essas duas referências de citações de configuração. Aí vamos nós. Então, agora o que vai fazer é examinar a configuração e encontrar, encontrar a seção zero e, em seguida, usar o valor booleano. E então a mesma coisa para a chave do cliente. Por fim, queremos adicionar a autenticação. Então, queremos adicionar o middleware que oferece suporte à autenticação. Portanto, já temos um que oferece suporte à autorização. Vou apenas duplicá-lo e usar o primeiro para dizer use autenticação e tudo mais. Isso é muito importante. ordem é importante porque, no processo, precisamos nos autenticar antes de tentarmos autorizar. Lembre-se, isso significa me dizer quem você é, então este significa ok, o que você pode e pode fazer? Não queremos começar a determinar o que você pode ou não fazer antes de determinarmos quem você é, certo? Então, isso é muito importante para o chão. Tudo bem, agora que concluímos o registro do serviço e conhecemos a configuração do middleware de autenticação. Vamos passar para o login. Agora eles estão nos dando uma amostra de um controlador de conta, certo? Então, vou copiar esse bloco de código voltar para o nosso Visual Studio Code. E na pasta de controladores, vou criar um novo arquivo que não quero chamá-lo de controlador de cone dot cs. E então eu vou colar. Tudo bem, também vou dar a ele um espaço de nome apenas para garantir que tenhamos alguma uniformidade, diz os controladores MVC do aplicativo School of Management, certo? E depois ponto e vírgula. E o controlador precisa dessa declaração de uso para isso. Tudo bem, agora temos um controlador de cone e esse controlador de ícones será de onde o login será invocado. O URL de retorno basicamente significa que sempre que você fizer login, volte para o que está na barra, que é a página inicial. Mas aqui embaixo dizemos que as propriedades de autenticação var são iguais à nova autenticação de login no construtor de propriedades. E isso indica que aqui estamos indo para um usuário leitor astuto depois de eu fazer o login e tal e tal, certo? Então esse é o URL de retorno. Então, se você quisesse que eles fossem para outro lugar, você poderia fazer isso. Muitas vezes, quando as pessoas clicam nos botões de login de uma determinada página, essa página é URL, é o que entra aqui. Portanto, esse é o valor padrão, caso nenhum URL de retorno tenha sido fornecido , ele apenas redirecionará para ele. Caso contrário, sempre redirecionaremos para esse URL de retorno. Em seguida, veremos problemas contextos de UP que desafiam esse desafio, async é cortesia da autenticação de pontos ASP NET Core Core de zero pontos, referência de biblioteca. E, basicamente, basta configurar o esquema de autenticação, que vem dessa classe de constantes, que também vem desse namespace. E estamos repassando as propriedades adequadamente. Tudo bem, quando isso acontecer, ele realmente nos redirecionará para um pêssego fora de zero. Então, ele sairá do nosso aplicativo até esse aplicativo, que é tudo zero, carregará o usuário para autenticação e depois será enviado de volta. E então será o leitor de agendamentos para esse URL de retorno. Na próxima parte do aplicativo ou nessa configuração à qual eu quero prestar atenção, podemos fazer o perfil do usuário. Eu acho que essa também seria uma boa. Então, podemos copiar isso porque está no mesmo controlador de ícones. Observe, porém, que ele tem essa autorização na notação. Deixe-me copiar isso e colá-lo em nosso controlador de ícones existente. E então eu vou sair e copiar isso também. E então podemos ver exatamente o que estamos vendo. Aqui. Autoriza uma anotação que basicamente informa a essa ação que ela exige que um usuário autenticado possa acessá-la. Não, está faltando usar declarações desde a Terra, então controle pontos e então obtemos isso usando a declaração. Para os tipos 3M, também faltam declarações de uso. Então, reivindicações, o que são reivindicações? As reivindicações são informações incluídas no que chamamos de token. Tudo bem, então deixe-me explicar isso para você. Quando passarmos para zero e nos autenticarmos, eles devolverão um token. Esse token será apenas um bloco de string codificada que contém todas as informações sobre você. Bem, todas as informações relevantes , espero que nada sensível. E é por isso que é importante usar essas autoridades sobre o assunto. Até mesmo para entender como você faria a sua própria. Porque qualquer coisa que você não tenha considerado, eles já o fizeram. Então, all zeros é uma das principais autoridades em segurança de usuários, certo? Então, o que estou vendo aqui é que o token que é enviado de volta é usado pelo nosso aplicativo para indicar que você está autenticado. Portanto, a presença de um token significa que você está autenticado. Saiba que o conteúdo desse token incluiria seu nome com base no que você forneceu ao registrar seu endereço de e-mail, até mesmo uma imagem de perfil, se você a enviasse em algo assim. Então, todas essas afirmações vêm do Tolkien, e todas elas são informações para indicar quem você é, que propósito você serve, o que você pode ou não fazer. Portanto, até mesmo os papéis e o eu podem ser incluídos nesse kit de ferramentas. Não, o autorizado, mais uma vez, significa que você não pode atingir esse endpoint a menos que tenha um token. O que significa que, se eu tentasse navegar para fazer o login, tudo bem. Se eu tentasse navegar para qualquer outra parte do meu set, tudo bem. Se eu tentei navegar aqui com a autorização ativada, não consegui. Isso me forçará a fazer o login. A mesma coisa para sair. Isso me forçará a fazer login ou a fazer login para que eu possa sair se não estiver logado. E depois que esse logotipo estiver pronto, nós os redirecionaremos para a página inicial. Tudo bem. Portanto, a placa na parte superior termina em duas partes. Temos as sandálias assíncronas, o que, na verdade, está enviando os contextos em que estamos conectados até o zero. É por isso que esse é o esquema de autenticação que está sendo usado com o mesmo antigo. Parece muito semelhante ao desafio ver onde estamos usando o mesmo esquema de autenticação, certo? O próximo supernodo está fora do cookie. Porque o que acontece é que quando o token é passado do zero, ele é armazenado em um cookie localmente em nosso site, certo? Então, essa será a forma estabelecida pela qual o aplicativo sabe que há alguém autenticado. É por isso que estamos usando o padrão de autenticação de cookies. Então, quando você sair, precisamos nos atribuir como está. Deixe o asp.net Core lidar com qualquer login no Aesop para o esquema de autenticação de cookies. Tudo bem, então é basicamente isso que essas duas linhas estão fazendo. Mas a combinação ou o resultado combinado é que você não terá mais um token válido, RBC de sessão válido e como um usuário autenticado, e será redirecionado para a parte de login, desculpe pela página de índice. Agora, se eu voltar para a documentação, você verá que agora estamos no final. Não há como dizer, Ok, o que vem a seguir? Assim, você pode começar a analisar coisas como adicionar uma autorização baseada em funções. Portanto, eles terão muitas amostras que você poderá examinar para descobrir como integrá-las ao seu aplicativo para node. Ou queremos testar e ter certeza de que podemos forçar os usuários a fazer login. Então, vou afirmar que, para o controlador do curso, você precisa estar autorizado a, digamos, criar o índice. Temos os detalhes, mas vou colocar uma bandeira de autorização ou uma notação logo acima da criação. Você tem que ser autorizado. E então podemos controlar os pontos que estão faltando usando a referência. E então, na próxima lição, vamos testar isso e ver como funciona. 36. Teste de autenticação: Tudo bem, agora eu tenho meu aplicativo em execução. E o que queremos fazer é testar para ver se nossa autenticação funcionará como esperávamos e como será toda a experiência do usuário. Para que eu possa navegar pelo site. Quero dizer, eu só fechei alguns lugares e um lugar em que me certifiquei muito fazer isso em uma lição anterior foi o formulário de criação de quatro cursos. Então, quando eu clico em Criar, ele não sairá do meu site. Então esse é o domínio que me foi dado, certo? Esse é o domínio, é claro, quando pagamos e nos inscrevemos em um plano pago com osteo weekend para personalizar essas coisas. Mas, por enquanto, está tudo bem. Agora, isso permite que um usuário forneça seu endereço de e-mail, senha ou continue com o Google. Eles podem até se inscrever. Então, deixe-me ver como fica quando eles se inscrevem. Para se inscrever. E mais uma vez, tudo isso pode ser personalizado. Você pode alterar o logotipo, podemos estender esse formulário de registro. Mas a maioria dessas coisas vem com o pagamento do serviço. Mas, de um modo geral, tudo o que você realmente precisa é de um endereço de e-mail e uma senha. E, mais uma vez, é muito conveniente porque tem autorização social ou autenticação social, uma espécie de lata grande. Ou podemos colocar em outras plataformas sociais, microsoft, LinkedIn, GitHub, etc, tudo nessa tela. E podemos fazer isso sem escrever muitas outras linhas de código. Portanto, é muito conveniente. Então, vamos em frente e eu vou usar um desses testes, endereços de e-mail que eu tenho. Vou apenas dizer SEM. Sem e minha senha especial, aqui estão as vitórias, VP, essence W ou d one. Você pode ver aqui que toda essa validação está sendo feita para mim. Posso clicar em Continuar e, em seguida, eles se certificarão testar e ver se você deseja conceder consentimento para que o aplicativo acesse seu perfil. Eu vou dizer que sim. E estou recebendo essa exceção. Eu sei, você me conhece, não vou esconder as exceções porque é importante que façamos isso e entendamos por que obtemos certas coisas. Agora, o que está acontecendo aqui é que está dizendo esse campo de correlação. E eu suspeito que seja principalmente porque estamos usando o protocolo HTTP. O Https é o preferido quando fazemos esse tipo de coisa. Tudo bem? Então, o que vamos fazer é voltar para nossa configuração de autenticação zero para cima. E caso você não se lembre de como chegar aqui a partir do seu painel de introdução. Na verdade, você pode simplesmente ir para Aplicativos e depois para Aplicativos aqui. Aí vamos nós. E então você escolhe seu up. Tudo bem? Em seguida, o que vamos fazer é adicionar os URLs HTTPS ao nosso login e ligar de volta. Tudo bem, então o URL HTTPS, se você voltar às configurações do seu pulmão, estiver abaixo do perfil HTTPS , você encontrará os dois URLs , encontrará um HTTPS e o HTTP. Então, você pode simplesmente copiar os dois e colar. Certifique-se de colocar o Slash Call Buck. E em vez de um ponto e vírgula, coloque uma vírgula de acordo com as instruções logo após a autenticação do usuário e usará apenas um dos URLs. E eles estão vendo que preferem HTTPS. Tudo bem? Então, vou colocar os dois, mas de verdade, queremos que o HTTP S1 seja usado. E a mesma coisa com o logotipo. Tudo bem? E então lembre-se, uma vez que você atenda essas alterações, salve as alterações, a essas alterações, salve as alterações, a notificação manda esperar cerca de 30 s. O que eu vou fazer é em nosso dotnet, em nosso VS Code, vamos executar com o perfil HTTPS. Acho que fizemos isso antes, quando dissemos dotnet run e depois dizemos hífen, hífen. Deixe-me limpar a tela para que fique um pouco mais clara. Vemos dotnet executar hífen, perfil de lançamento de hífen. Eu sei que estamos fazendo HTTPS. Então, quando fizermos isso, pressione Enter. Agora podemos executar nosso aplicativo a partir de qualquer um deles. Mas o middleware que está no program.cs sempre forçará o redirecionamento de HTTPS de qualquer maneira. Então, vamos prosseguir e fazer o mesmo teste novamente usando o HTTPS. Você também notará que embora tenha recebido esse erro, você já está autenticado porque, se tentar voltar para essa página, poderá acessar a página. Então isso significa que você está falando está presente. E se você estivesse assistindo ao console ou à janela do terminal, você verá que o Tolkien veio Buck e todo aquele aperto de mão do OpenID. Portanto, todos os zeros fornecem serviços do OpenID Connect. E isso é como um aperto de mão entre seu site. E o resultado final desse aperto de mão é que seu aplicativo recebe um token e, sem nós, é autenticado. Infelizmente, ainda não configuramos o botão de sair, então estamos autenticados sem nenhuma forma de autenticação. Então, o que vou fazer é pegar esse URL e testar novamente, estamos usando nossa janela privada, então, tecnicamente, estamos chegando de novo, nenhuma autenticação ocorreu. Frequentamos cursos, podemos ver os cursos que poderíamos criar novos. E então somos forçados a fazer login ou nos inscrever. Vou usar os mesmos cones que acabamos de criar admin no SEM com uma senha e clicar em Continuar. E eis não há nenhum erro e somos autenticados e redirecionados para nosso pH seguro. Portanto, é bom ver o que pode dar errado e entender porque o OpenID Connect pode exigir um pouco de sutileza para se acostumar. Mas com serviços como o auth zero eliminando muitas das complicações que existem. É bastante fácil começar a usar a autenticação. Agora, o que precisamos fazer é finalizar nossa funcionalidade. Vamos colocar aquela página de perfil ou uma pequena parte aqui que diz que, quando você está logado, você está usando seu endereço de e-mail e mostra um botão de logotipo. E o endereço de e-mail que ele vai para a página de perfil que configuramos. Então é isso que faremos a seguir. 37. Páginas relacionadas com o usuário de configuração: Oi pessoal. Nesta lição, o que queremos fazer é modificar outra barra para que possamos ter nossos botões adicionais. Então, queremos um botão aqui que diga login, logout e um que nos permita ver qual usuário está logado no momento, certo? Então, vamos voltar ao nosso projeto. E o que vou fazer é criar uma nova visão parcial. E o interessante das parciais é que elas podem ser compartilhadas entre várias teses e injetadas, certo? Então, criaremos nossa primeira parcial juntos. Então, vou clicar com o botão direito do mouse e criar um login de sublinhado, HTML CSS de pontos parciais. E neste arquivo vamos fazer algo simples como isso. Então, tudo o que tenho aqui é uma lista não ordenada que tem uma barra de navegação de classe, certo? Então, com o Bootstrap, quando queremos ter barra de navegação à esquerda e uma seção à direita, elas parecem muito diferentes. O que pode acontecer é que possamos estabelecer outro UL e, em seguida, dar a ele a mesma classe, navbar-nav. Mas é claro que nem todas as outras classes como os filmes o crescimento e outras coisas que os conjuntos originais de itens da barra de navegação teriam. Na verdade, isso permitiria que ele ficasse alinhado corretamente ao longo dessa barra de navegação. Então, dentro dessa nova lista não ordenada, vou ter uma declaração if. Estou verificando se a identidade de ponto do usuário que é o usuário autenticado é como um superobjeto que representa o que chamaremos de princípio de reivindicações. Portanto, os aplicativos asp.net Core têm o conceito de um princípio de usuário ou princípio de reivindicações, que é uma combinação de todas as afirmações que discutimos. A presença de todos eles pode ser combinada para nos fornecer um IPL de sprints limpo e, em seguida, o princípio de isenção pode ser dividido em diferentes partes de informação. Então, aqui vemos que a pessoa é o objeto que reivindica o princípio. Tem uma pessoa autenticada? Isso representa uma pessoa autenticada? Está sempre presente, mas sem alegar inflamação, seria como um objeto vazio. Mas isso significaria que a pessoa provavelmente não está autenticada se não tivermos informações. Portanto, podemos confiar nessa declaração if porque tudo isso é configurado durante o fluxo de autenticação que já experimentamos. Se a pessoa for autenticada, quero navegar pelos itens. O primeiro é, e é claro, lembre-se de que temos que ver outro link: primeiro o item de navegação do LaS e , em seguida, a classe é o link de navegação e a luz do hífen de texto. Como estamos usando uma barra de navegação preta , nem precisamos especificar a área. Realmente copiado e colado, mas tudo bem. Vamos ver se vamos acessar a conta e o perfil. E o que estamos mostrando é a identidade do usuário, o nome do ponto. Esse nome é a reivindicação de origem. A ferramenta pode diferenciar as mulheres a partir do princípio de reivindicações que teria sido configurado quando nos autenticamos. Tudo bem, então essa é uma maneira fácil e agradável de saber o nome de usuário. Bem, nesse caso, usá-los como o mesmo endereço de e-mail do usuário autenticado. Então, estamos exibindo isso e, quando clicado, devemos navegar até a página de perfil, que ainda não criamos. Depois, temos o próximo, que é o botão do logotipo. Então, se a pessoa estiver autenticada e quisermos permitir que ela possa sair. Caso contrário, vá em frente e exiba um botão de login, que vai para o controlador de cone e para a ação de login. E, claro, isso os redirecionaria para o serviço de autenticação de terceiros. Agora que temos essa configuração parcial de login, o que precisamos fazer é adicioná-la à barra de navegação no layout dot CSS, HTML. Css. Podemos acrescentar que usamos nesta única linha e é isso que torna parcial. Tão legal. Você pode criar essa seção estática dos sites, a visualização estática e estática em excesso e pode simplesmente injetá-la em qualquer lugar que precisar. Apenas aquela linha aqui, estamos vendo que nome parcial é igual a login parcial, essa obrigação saberá que ela deve procurar seguro qualquer arquivo com esse nome e, em seguida, ele será renderizado aquela seção ali mesmo. Observe que é aqui que a barra de navegação original termina. E depois disso, iniciaremos nossa parcial na qual definimos outra seção da barra de navegação. Então, vamos analisar isso. Então, essa é a aparência do aplicativo. Portanto, temos todos os quatro URLs originais. Eu sei que temos o login à direita. Tudo bem, isso parece bom. Se clicarmos em, o login será exibido aqui. E então podemos prosseguir e autenticação usando o usuário com o qual já nos inscrevemos. E então não, isso me mostrará que estou logado como administrador no SCM e posso sair se clicar em sair, o que isso faz? Isso me registra lá fora. Todos nós sabemos. O que precisamos fazer é configurar essa página de perfil para realmente ir a algum lugar. Porque se eu clicar nesse URL, isso me dará mesmo erro que vimos na primeira vez quando não tínhamos uma visualização. Então, vamos em frente. E configure isso. Tudo bem, então, de volta ao nosso controlador de ícones, temos nossa opção de perfil. E o que estamos fazendo é retornar a visão que deveria existir em algum momento com um tipo novo e o que chamaremos de anônimo. Portanto, esse é um tipo anônimo ou objeto anônimo. Não há uma maneira real de determinar qual tipo de dados está sendo enviado. Você pode ver aqui que é apenas um, é apenas anônimo. O que é um? Então, agora vamos analisar o conceito de um modelo de visualização, certo? Então, vou começar com a criação de uma classe e já temos mais um conceito de modelo de visualização com o modelo de visualização de erros, vou criar um novo arquivo. Vou chamar esse modelo de visualização de perfil de usuário. Em algumas convenções de nomenclatura, você veria as pessoas simplesmente dizerem VM e é um novo arquivo de classe. Então, dot cs, começamos com nosso namespace. E isso é o aplicativo de gerenciamento escolar dot MVC dot models, certo? e vírgula. Então, temos uma classe pública e a chamamos de Modelo de Visualização de Perfil de Usuário. Agora, essa classe terá os diferentes pontos de dados que pretendemos mostrar. E o interessante dos modelos de visualização é que eles são realmente usados para controlar o que mostramos na tela. Esse é um conceito poderoso, especialmente quando queremos parar de mostrar todos os campos de nossas classes de dados nessa tela. Na verdade, criaríamos modelos de visualização específicos para cada visualização e em seguida, tenha uma lógica que converte do modelo de visualização para a classe de dados e vice-versa. Não vou abordar tudo isso neste curso, você pode conferir meu curso, você pode conferir meu curso, concluir o desenvolvimento do asp.net e do Entity Framework Core, onde eu ensino todas essas dinâmicas e abstrações para isso, só queremos começar a trabalhar e entender como podemos criar um aplicativo simples com o mínimo de esforço, certo? Para esse modelo de perfil de usuário, o que vou fazer é definir propriedades que voltarão ao que eu espero enviar do perfil. E deixe-me realmente tentar isso. Eu queria tentar enganar o sistema. Eu vou dizer o modelo de visualização do perfil do usuário aqui. Tudo bem, inclua a referência que falta. E então, é claro, nada disso existe. Então, vou dar uma olhada nisso. Eu posso ver o nome da variável generate, nome da nossa propriedade dentro da classe em que eu gostaria que estivesse. Eu queria fazer isso. E então vamos conferir a aula. E aí vamos nós. É assim que você trapaceia, certo? Em vez de tentar digitar todos manualmente, vou aproveitar a situação obtida. Então, eu quero retornar um novo modelo de visualização. Portanto, é um tipo forte. Agora eu sei exatamente o tipo de dados que está sendo retornado. E então essas são as propriedades que estão lá. Eles não estavam lá antes. Então, permiti que o Visual Studio Code os gerasse para mim. Tudo bem, então, uma vez feito isso, você notará que eles também estão sendo gerados com esses conjuntos internos de anotação, o que significa que isso não pode ser definido de qualquer lugar fora da inicialização, o que é bom para mim. Tudo bem? Então, nesse ponto, retornaremos esse modelo de visualização para essa visualização. Essa visão não existe e não vamos montar andaimes. Temos que fazer isso manualmente. Então, vamos ver as visualizações. E a primeira coisa que precisamos é de uma pasta que retorne ao nosso controlador, certo? Então, as visualizações clicam com o botão direito do mouse, clicam em Novo e então vemos, desculpe , não Novo arquivo, nova pasta, pasta. Aí vamos nós. E então nós o chamamos de cone porque esse é o nome do controlador. Então, dentro de um cone, dentro dessa pasta, agora podemos criar um novo arquivo e eu o chamarei de Profile dot CSS HTML. Por que perfil? Porque o perfil precisa ser mapeado de volta para a ação chamada perfil. Então, já passamos por isso, já fizemos isso com quem e sobre isso. A única coisa, porém, é que também estamos criando nossa própria pasta. Agora, quanto ao conteúdo dessa página, não vou tentar ser criativo. Vou apenas dar uma olhada na amostra. Então, se eu voltar ao painel de gerenciamento totalmente zero, lembre-se de que, quando começamos, poderíamos ter feito o download enquanto sampler visualizava a amostra no GitHub, certo? Alguém para salvar você no GitHub, que lançará o projeto no GitHub. E então, quando eu navego até o início da semana, uma grande amostra de barra de visualização de barra, perfil de barra inicial que CSS HTML. Vamos ver a visão que eles usaram na amostra. Acho que isso é bom o suficiente para começarmos. Tudo bem? Então, queremos esse sexo, quero dizer, você pode pegar a coisa toda para que possamos simplesmente copiar todo o conteúdo. E, é claro, temos que alterar a referência do namespace aqui porque o modelo de visualização do perfil do usuário está em um namespace diferente, mas todo o resto pode permanecer o mesmo. Então, quando essa operação é concluída, é isso que acabamos fazendo, certo? Portanto, nesse arquivo HTML CSS de pontos de perfil, tenho modelo e namespace em relação a onde meu modelo de visualização realmente está. E então eu tenho o mesmo título, então todo o resto é o mesmo. Com tudo isso feito, vou atualizar meu aplicativo e dar uma olhada nele, e é isso que eu recebo. Tudo bem, então esse é o administrador do perfil do usuário no SCM, esse é o endereço de e-mail. E essa seria a foto do perfil vinda da autenticação zero. Então é isso que queremos dizer com limpeza. Essa inflamação ocorreu uma vez, mas toda vez que o usuário se autentica, essa inflamação estará presente nas informações de suas reivindicações. Tudo bem, agora você pode experimentar o encerramento de diferentes partes do seu aplicativo porque tudo gira em torno de segurança. E tudo gira em torno de quem pode fazer o quê e por quê. 38. Retoques finais: Tudo bem, pessoal, então nesta lição vamos limpar um pouco nossa interface de usuário. E vou começar com o layout para pagar. Então, em nosso layout, que é compartilhado, pronto, eu não quero que ninguém que não esteja autenticado veja nenhum desses links. Em primeiro lugar, acho que o link de privacidade não precisa mais estar na barra de navegação. Eu provavelmente gostaria mais de colocar isso. Isso já foi feito aqui no rodapé. Alguém o removeu da navegação superior. Tudo bem, e foi removido o fato de eu não querer nenhum usuário autenticado possa ver a seção de Gestão de cursos, professores e estudantes. Adivinha o que? Posso usar as declarações if que temos na parte de login aqui. Posso ver se o ponto de identidade do usuário está autenticado. Então eu quero essa seção. Então, vou colocar todas essas tags LI dentro dessa declaração if. Isso só mostra como é fácil tornar nossa exibição dinâmica com base no estado autenticado da pessoa. Podemos ocultar as opções do menu e manipulá-las com base no fato de essa pessoa estar ou não logada. E também podemos bloquear alguns de nossos controladores. Então, por exemplo, se realmente não quisermos que ninguém o veja, mas eles ainda conseguissem navegar se soubessem o URL ali mesmo, ainda seriam capazes de dizer uma barra no site cursos reduzem o índice e cheguem lá. Portanto, queremos não apenas bloquear o get, desculpe pela equipe, mas também por cima bloquear tudo aqui. Para o controlador do curso, podemos simplesmente colocar um autor. Comecei na parte superior de todo o controle. Não, ninguém pode chegar perto daqui a menos que esteja autorizado. Tudo bem, então podemos fazer isso com todos os controladores nos quais queremos esse tipo de restrição de bola azul. Então, eu vou fazer isso para o gerenciamento de aulas, e eu posso fazer isso para a matrícula. E, claro, temos que acrescentar que faltam usando declarações. Então, deixe-me voltar às aulas e fazer isso. Aí vamos, podemos sair de casa. E, às vezes, o que você quer fazer é deixar bem explícito que esse controlador em particular pode permitir o anonimato. Então, na verdade, há uma anotação aqui que diz permitir anônimo, o que significa que qualquer coisa que esteja dentro desse controlador, ou se você a colocar acima de uma ação, significa que qualquer pessoa pode acesse esse endereço específico sem precisar de autorização. Essa é a configuração padrão, mas às vezes você quer ser ainda mais explícito. Tudo bem, então autorizaremos e, estudantes, também autorizaremos que não, nenhum acesso não autorizado é permitido a nenhuma dessas rotas nesses controladores. E mesmo assim, mesmo que bloqueássemos todo o controle, mas queríamos que talvez apenas um estivesse acessível, poderíamos facilmente ir acima dele e dizer, olá, Anônimo, eu amo acima do ação, ou seja, e permitir o anonimato. Então, esses artistas são coisas que você pode fazer para controlar o acesso? Eu não coloquei os links adicionais. Você provavelmente já fez isso, então não precisa fazer isso. Mas eu não entrei na aula. Deixe-me ver o manejo da grama aqui. Isso é para o controlador de classes. Tudo bem. E eu não coloquei inscrições, e provavelmente nem preciso colocar inscrições diretamente porque vamos escrever alguns métodos personalizados para as tabelas de inscrições, porque isso é meio que relativo ao gerenciamento de classes. Então eu acho que é uma boa ideia ter isso legal. Então, quando voltarmos, verificaremos se estamos em outro marco. 39. Adicionar ao GitHub: Tudo bem, pessoal, agora que atacamos outro muçulmano, vamos fazer todas as nossas mudanças. Podemos ver a adição de zero e da interface do usuário. Tudo bem? E então podemos nos comprometer e pressionar. E nos vemos na próxima seção.