ASP. NET Core 7 MVC Development

1. Introduction: Hello and welcome to this course, SP dotnet Core cross-platform development. I am your instructor for voir Williams and I've been a software engineer and lecture for over a decade. In this course, we're going to be following a few simple steps that can be replicated across any platform. That's right. You're going to do this course whether you're using Mac OS, Linux, or Windows. And you will be able to follow along and build an asp.net Core MVC application will be learning things like Entity Framework Core, and taking a database first approach, we were looking at Bootstrap five and jQuery libraries. We'll be integrating with auth zero, which is an OpenID Connect provider. And while doing all of this will be getting familiar with GitHub. Know that development tools that we will use, this is very important, willing to a darker so that we can host an SQL Server instance regardless of our operating system, even though SQL Server is designed mostly for Windows distribution. We'll also use Visual Studio Code as your Data Studio and the dotnet CLI, all of which, once again, we will work on any operating system. Know, just to zone in on while we're using Visual Studio Code and Azure Data Studio. So versatile cross-platform development tools, and they're very lightweight, so it doesn't matter what kind of specifications your machine has. They don't use as many resources as their counterparts, like Visual Studio 2022 and the SQL Server Management Studio. So you can use these tools on a less powerful machine. They can be used once again on any operating system. They boast clean integrations with several third-party services and they're powerful enough to build anything. Now I hope you're as excited as I am and I can't wait to see you in the course. 2. Create GitHub Account: All right guys, so in this lesson we're going to go through the very simple setup process of creating a GitHub account. So github is arguably the largest social coding platform. It is one of the most popular good providers. And it is owned by Microsoft and it is free for open source and personal development. You can also have private projects there and throw this course, we'll be using GitHub. So if this is your first time, maybe you've been hearing are both source control management and GitHub. And you really want to have that experience. Don't worry, we're going to be using it in this course and you will enjoy that experience. So to get started, you go to github.com and from here you can sign up. So I'm assuming you don't already have an a cone. So if you sign up, you'll get a very simple form where they ask you for your email address so you can provide that and continue. And actually I think you only need your email address and password, so I already have an account, but let me just try and put in another email address. And then you create a password. And once you continue from creating that password, then they want a username. You can create that username. Let me just create something arbitrary and then continue. And then they'll just ask if you would like some promo stuff. Continue. And they do are captured check. And then basically by the end of all of that, it will send you a verification email. And then once you have verified yourself, you can sign in. So I'm just going to go ahead and sign in and show you what that experience would look like. And once you have signed in with your username and password or your email address and password, you'll see a screen looking similar to this. I have a few repositories already, so you may not have anything to the left, then that's fine. That's why we're here. But you'll see that I have quite a few repositories. And this is my profile. If you needed to get to my profile, you could always go to github.com slash my username, which is simply my name. And it would be a similar thing for you and anybody who would like to navigate to your profile, all the repositories that you work on once they're made public can be accessed. And that is the beauty of GitHub. It helps you to contribute to other projects and share your projects that other person's may also contribute to them. Once you have set up your account, you can go on to the next lesson. 3. Install .NET 7 SDK: Alright guys, so we're continuing to set up our environment. And the next step is to install the dot nets of an SDK. You can get here simply by going to.net.microsoft.com or you can just google.net SDK. Alright, I think that's the easiest thing to do, just google.net. So SDK and the first search result I'm sure would lead you to this page. No. Dotnet seven is the latest release at the time of recording, however, the standard term release, meaning that it will go out of style when dotnet eight comes out. We also have version six point tool, which is long-term support. So a lot of what we'll be doing in this course, even though we'll be using dotnet seven, it will be more or less compatible with its six barring maybe a few C-sharp phrases, ensembles. I'll be sure to point out where the code will differ between what dotnet seven offers and what we can do in dotnet six. At the time of this recording, however, dotted seven is the latest and greatest, and so we will use that and you can feel free to proceed using dotnet seven. So to get started, you'll want to install the SDK. Now, there are two things that you'll want installed. You'll want to install the SDK for development resources. And of course, you can choose your operating system accordingly. So if you're on a Windows machine, you'll want to use the 64 bit and you can choose Mac or Linux versions accordingly. But then for hosting purposes, you would also want to install the runtime. So you can also install the hosting bundle for Windows or the appropriate version based on your operating system. So you can download and install those two. That being said, we'll be using Visual Studio Code because we, Visual Studio Code is cross-platform. I don't want to cater for all the operating systems, the monks, Mac and Windows. So we'll be using Visual Studio Code. However, if you are on a Windows machine and you prefer to use Visual Studio, which is a fully powered, very, very powerful IDE, then you can just stick to the windows and you can actually just download and install Visual Studio 2022, which will come with the SDK built-in. So I'm just throwing that out there, right? So if you'll be using Visual Studio Code, which is far more lightweight and compact. And we'll be using a lot of dotnet CLI commands. Then you can go ahead and install the SDK manually. If you want to use Visual Studio 2022. And I'll be showing you how to set up Visual Studio 2022 in a subsequent lesson, then you can actually skip the SDK download step. However, I do recommend that you get the runtime regardless. So once you download and install those, and it's a simple installation, you just hit Next, Next, Next, Next planted in stars, and then you can close the window. Then you can go on to the next lesson where we'll be setting up Visual Studio Code. 4. Install Visual Studio Code (Any Operating System): All right guys, welcome back. So we've installed our SDK and the next step is to install Visual Studio Code. Or Visual Studio Code is a very flexible and lightweight IDE given to us by Microsoft. And on top of all of that, it is free and it is cross-platform, so we can use it on mark, on Windows or on Linux. I'm using a Windows machine, so of course, I would proceed to download for Windows, but be sure to choose the one that is most appropriate for, you know, downloading and installing is very easy. You'll get an MSI package that once you double-click it, we will launch the installer and after a few clicks, it will install all the binaries and be on your machine. And just by way of preview, this is what you can expect. You can expect something like this. I've had this installed for a while now and I've used a ton several projects. So you may see that I have some icons that you may not have out-of-the-box. For instance, if this is your first time, you may not have anything under recent. But you can always start Open File, Open Folder, you can true. And I get repository to your machine. And then to the side you have the Explorer window. You can search, you can do some source control stuff. You can run and debug. Then you have remote Explorer and extensions. And then the other thing is that I have here are some other plugins that I have from side projects for this course. Those are not absolutely necessary. But I will make sure to point out things that you will need as we go along and how you can set up your environment and optimize it for the project that we will be working on. So once you have Visual Studio Code installed, then you're good to go. It has a lot of built-in features that we will explore along the way. However, if you prefer the idea of using Visual Studio, because the Visual Studio Code requires that we use a lot of command line interface commands. And Visual Studio actually does a good job of helping you to just click around and accomplish some of those things. So I will be showing you how to install Visual Studio 2022, and that will be in the next lesson. 5. Alternative - Install Visual Studio 2022 (Windows and Mac): All right guys, so in this lesson, I'm just going to walk you through a whole weekend set up Visual Studio on our machine. Visual Studio is the flagship IDE. And ID is short for integrated development environments, such as the flagship IDE given to us by Microsoft. It is a verbal full IDE. It allows us to do everything from conception to implementation to delivery of our application. And it is available for several operating systems, while several, meaning Windows and Mac OS for it actually from this website, which is Visual studio.microsoft.com, you could actually go over to download Visual Studio Code as well, which is cross-platform little brother of Visual Studio. Now, if you want to get Visual Studio, you have three options. You have the Community Edition, professional and enterprise, communities free for open source and individual learners or academic uses. And then professional and enterprise are more for companies or for commercial development practices. Alright? So at any point for this course, we'll just be using community because this is a learning experience for us all. They do help you to choose which tool is best for you. And I'm sure when cyclically notes, they're going to suggest Visual Studio Code for Linux. But then if I chose Mark and then start selecting some of the stuff based on what I select the MAC of Visual Studio Code. Or they may see Visual Studio for Mac. And then if I choose Windows more than likely, no matter what I choose, it's going to say Visual Studio is the best selection, okay, not for Java though. Alright? So this can help you to make a decision as to which tools might be better for you. That being said, like I said, Visual Studio Code is kind of more compact, so it uses fewer resources and it's just easier to use for quick editing operations. Visual Studio is very powerful and it's used for a lot of advanced things. So in this lesson, I'm just going to walk you through what you can expect when you're installing Visual Studio. So when, first of all, you would want to download Visual Studio. So when you download community, what you get is an installer. And once you have that installer and you learn, you're going to get a window that looks similar to this. I already have it installed, so I'm just showing you some of the modules and what's the user interface looks like and how you can proceed from here. For this course, we really only need the asp.net and web development, what we'll call a workload. So each one of these boxes represents our workload and it gives us access to the different project types that are available for different types of development activities, right? So asp.net and web development, we'll be building a dotnet application on web applications. So we definitely want this. And it will actually include the SDK. Sdk as well as other project templates. The tools that we need for web development. That being said, if you are interested in having other workloads, like for dotnet desktop development or dotnet Maui development. Then you can always take the different workloads that you wish to have. Of course, the more you tick is, the more space that it will take upon your machine. So be very careful. However, at this point, once again, all we really need for this course is the asp.net and web development workloads. So you can go ahead and take that and then you can click Install, which is what would come up down here instead of installed while downloading. And once you do that, Visual Studio will takeover, download all of the tools needed for that workload. And then it will allow you to launch results to them. Afterwards. When you launch it, you may be prompted to login. So you can use your live account if you have one or you can create a live account and use that account for your Visual Studio installation. Now just to give you a quick preview of what the Visual Studio 2022 user interface looks like. I'm going to just continue with all cord so that it will just launch the user interface. And what we have here would be a Solution Explorer, which is going to list out all the files and folders that will be a part of your project when we create it. And you can go ahead and run the project stays attached, no, because it's empty, we can run the project. And this user interface really comes to life once we're in, if you have a lot of integrations like with Git, and we can access our GitHub stuff here the same way we can do that from Visual Studio Code. And if you want to use Visual Studio, that's fine. For the first few lessons, I'm going to show you the parallels between using Visual Studio Code and using Visual Studio. So at least you can get a feel for which one might be better. But for the, for the majority of the course, we'll be using Visual Studio Code just because it is cross-platform. So regardless of the operating system you're using, you can follow along seamlessly. So that's it for Hollywood set up Visual Studio, it's quite easy. And if at any point you want more workloads, you can always go back to the installer. So you can actually just search on your machine for Visual Studio Installer. It will bring you back to this point. And you can select or deselect the workloads as you need. 6. Install SQL Server Express (Windows): Welcome to the first video in this course, introduction to SQL Server 2017. And today we'll be looking at downloading and installing this bit of software. Now, a database is pretty much a logical collection of related data. And that's it in a nutshell, if you have prior experience with databases, it probably came with Microsoft Access or MySQL. And you just want to extend your knowledge beyond that. And even if you have no prior knowledge of databases, this is an excellent course to get you up to speed with what databases are capable of, what preparation needs to go in place, and how you can go about starting your journey towards becoming a database administrator or just manipulating data in database is altogether, as I said before, we will be exploring all of these concepts using Microsoft SQL Server 2017. And I already have it up on my screen, the page for download. So I have included the URL as outlined here in the class notes. And this would get you to downloading the Microsoft SQL Server 2017 express database engine. And the short description is that it's a powerful and reliable database management system that allows you to build lightweight websites and desktop applications. So this is pretty good, pretty decent is a decent starting place. If you don't have that high spec, high-end machine, you just have a regular machine, you just want to get started. This is an excellent option. There are other additions that you would probably see in your research, but if you follow this link, it will cut through all of that noise and all the other editions. And we can get started with Express. You can go ahead and click that download and initially initiate that download procedure. And then another bit of software that we're interested in is the SQL Server Management Studio. Now the Management Studio will be your gateway into actually interacting with the database, interrogating the data, and writing what we call queries in a language with Cloud SQL. We'll get into all of those things in due time. But for now, you can follow this URL once again in the class notes. And we can just click this Download button to initialize this download, which may take awhile. It's a pretty big file. So as soon as that download is done, we'll reconvene and then we'll walk through the installation process. Hey guys, welcome back. Now that our downloads are finished, we'll start by installing our SQL Express engine. So we just click on that installation file, click Run, and then we will be greeted with this installation screen. We can click basic. Customer would allow you to select certain features. At this stage, we don't need to be doing that. We can just go with basic we can go ahead and agree to the terms and conditions. You can read it through if you wish. If you have other ideas, then you may want to change this directory. Otherwise you may as well use as a default. And you can see here that off 6 gb, we only really need 300 mb. So I'm just going to go ahead and click Install. And this may take awhile, so we will reconvene once this is finished. Okay, So at the end of that installation procedure, you'll see that you are successful in doing this installation. And then they give you some information. They give you a connection string. So if you wanted to develop an application on top of this database, you'd probably want to pay attention to this part. Well, that's not really necessary right now. And they just give you the paths for the log files and other essential bits of the application. Another essential part of this installation process, as mentioned before, is to install the sequel management server studio. Then this Express Edition installation, they will actually give you an option to say install SSMS. And this will really bring up your browser and navigate to, well, I figured this speech, the link to this page is already included in the class notes. And here, from here you can get a direct download to the Management Studio. So if you didn't do it before, you may just follow this link and get that file already, have it downloaded here. So I'll just initiate this installation. All of this will launch the installer and they really just give you one button to click which is installed. Of course, you can change this location if you have other ideas for the path. Otherwise you may leave it as the, as the default and just click Install. This may also take awhile, so we will reconvene at the end of this process. Okay, so our installation is finished and all we have to do is restarts to continue. So we can just do that quickly. And we, in the next video, we will start looking at how we start piecing everything together. What's a database is, and why learning this skill is so important. Stay tuned. 7. Alternative - Install SQL Server on Docker (Any Operating System): Now as it stands, Microsoft SQL Server is almost exclusively only usable on Windows machines. So the previous installation steps may not have gone down well, if you are not using a Windows machine, if you're using Mac or Linux, don't worry, there's still a solution for you. Solution number one would be that you can use a virtual machine, so you can use VMware or some other tool that supports virtualization. And you can spin up a virtual machine that has a Windows OS and then use that. Know that can be resource intensive. And I'm not going to put you through all of that just to use the one software. The alternative to a virtualized environment for Windows would be to use Docker, which is what I have up on my screen. Darker, you can easily get here by going to docker.com. Darker is a very fast application that allows us to use what we call containers instead of a whole virtualized environment. So what we can do is use Docker to simulate the environment needed and only the environment needed for a particular application to run without needing the entire operating system. So what we're going to do is use Docker to simulate an environment for SQL Server. And then we'll be able to connect to the SQL Server just to see, even if you're not using a Windows machine. Now, the first thing you'll notice is that it is available for every operating system, pretty much right? So if you're using Windows, you can still use Docker. If you have an Apple device or Linux-based device or Intel chip based device, you can just the same. We install Docker. So go ahead, download and install it. I already have it installed on my Windows machine, but once you have installed it, what you will get is access to the Docker command line commands. Once you have it installed, hit pause, let it install, and then you can continue. I would encourage you to launch your terminal. So once again, I'm using a Windows machine, but your terminal on Linux or Mac OSX would look very similar to this. And you can simply run the command docker just to make sure that it's installed. And if you see something looking like this, they didn't have access to the Docker CLI commands. Alright, so what we want to do at this point is run a command that's called docker. Pull is zoom in a bit so it's easier to read. So we're going to do docker, pull, docker pull. We're going to pull this what we'll call image. So Docker has predefined files that line the environment that is needed for a particular application. And these are called images. The image that we want is the Microsoft MS SQL Server image. So we're going to do a docker, pull against that image so you can hit pause, make sure you type it in just the way I have it. And when you press Enter, it is going to go ahead and say, Okay, I'm getting latest and then you're going to see downloading. I already pulled that image, so I already have it on my machine. But you're going to see it's pulling and then it's going to start showing metrics of it done loading. And it would actually look something more like this. So this is a screenshot I took earlier from when I was downloading it. And you're going to see that it's going to spawn up these bunch of lines looking similar to this. And you're going to have these downloading tags. So once that is completed, the next step is to actually run it. To run it, you need this command. So we're going to say Docker, run, then hyphen e, and it will do the eula accept. So what happens is that SQL Server usually it has one of those documents that you need to accept the terms and conditions. So we're just putting it in a parameter that yes, we accept the terms and conditions. And then another one that says SA password. So if you looked at the installation process when we're using Windows, we can use Windows authentication to connect to the database, right? So all we need is a machine name. We can use a Windows user, the current Windows user, Windows authentication and just connect. Now because this is darker and it's a container, There's no windows or doors or Mark or there's no linux Authentication. So it's not really that you can just connect using the default user on your computer. So this step is applicable whether you're using Windows, mac, Linux, etc. So what we need to do is specify an SA password. So AC is the default user, which means system admin or system administrator. Every time you install a database engine for Microsoft SQL Server, you get this essay user. We're going to set up this SA, password. And you can put in any password you wish. I'm just putting in a strong password here. And this is really possible that you might see in other demos that you might watch anywhere on the Internet. So this password is not necessarily unique to me or to this exercise. You can put in any password value that you feel comfortable with. And you remember, I'm just splitting the word strong password of course with Characters, numerals, and a couple of capital letters. Then we specify the port. The port here at the front is important that we want to go through. The port. On the other end of the colon is the port that it will map to. What this means is SQL server by default broadcasts from port 1433, that's the default port. So without doing anything, specifying any ports or anything, will always go through 1433 once or connecting. However, Docker is running in its own specialized environment, so we need to map. This is the default port, and then this is the port machine that will want to tunnel through to get to this sport. So you could actually just leave that as 14331433. If you don't want to have SQL Server installed already and you're running Mac and Linux, then 14, 14, 33 is fine. You don't have to do anything extra. You can just connect. However, because I'm using a Windows machine and add to change my port because 1433 is already occupied by my native SQL Server installation. So I'm just showing you that you can do 14, 14, 33 by default. Or you can put in your own specific port if you so desire. Then the next and final thing is we say hyphen D, and then we specify the image that we want to run. So basically we're saying docker run this image and being sure that all of these parameters in-between are configured. That's essentially what we just did. So when you press Enter and you alone, this one to run, what it will do is launch that image inside of the darker UI. In the darker UI, you're going to see something looking like this. It's going to appear under containers. And you can see here that's how several containers, right? I even have another SQL container that's adding salt from earlier. And here's the new one from my just running that command. So he created a brand new container for Microsoft SQL Server. And it is currently running, and it's been running for 30 s. And the port it uses is 1,400, which if you didn't change that and use the default 1433, would be 1433. You can always stop and start the containers. You can also delete and you can also watch what is happening. So you can open it into terminal and you can interact with it here. You can also inspect to see the health of it and look at some of the configurations. So these are some of the environment variables that we had set up. What are the parameters that we pass? Then you can also look at the logs. See here that it seems to have started up successfully. So after I've, I've confirmed all of these things now, I would want to connect. Now for Windows, we can use the Microsoft SQL Server Management Studio. However, Management Studio is not necessarily available on Linux and Mac. So the alternative here would be to get the Azure Data Studio. You can simply do a Google search and you can go ahead and follow the Microsoft documentation to the Azure Data Studio. Data Studio is a cross-platform database tool for professionals. And it can work on Windows, macOS, Linux. So you can go ahead and install the appropriate version for yourself. And of course, you can look at any warnings just to make sure that you are in a compatible state. Alright? So the thing is that the Data Studio can do most things that the Management Studio can do, especially within the confines of this course where we're learning about database development and queries and such. The experience over will be slightly different. So certain things won't be at the same place and might not be called the same thing. Over to connect. Let me just show you how we connect to. So you can see I've connected quite a few ups over time or it needs a base is rather, but here I'm going to connect Microsoft SQL Server and then the server here is going to be local host comma, the port that you specified. In my case, I specified 1,400 on my porch. You might have specify 1,400 as well or whatever it is that you specified. When we set the container should run and if you don't remember, you can just go back over and look. You specify that port. And then not Windows authentication but SQL login. And our username is SE, and our password is the password that we typed. And once again, if you don't remember what that password is, you can always go to the container and then click Inspect. And I can just copy this value and then paste it. And then for future, you just remember password. Then we can connect. Then this is a sign of a successful connection. I, you see here that OS version, so I am still on my Windows machine. But the OS version that it has detected is Ubuntu. So that is what the container is doing. It is running in a Linux environment, but it's simulating the environment, exact environment needed for SQL Server to be able to run. If I expand databases, you'll see it's empty. And then basically everything that we can do from the Management Studio we can do from here. One thing that you may notice though, is that some of the tooling is limited. So in the Management Studio, I can easily, or more easily to right-click and say, do certain things like create a new database and so on. In the management in the Data Studio, however, it will probably have to be scripted. It's something that you'd have to control and creates a new script file. And then to create a new database, you'd have to say create database. And then state the name, let's say test db, then F5, and then it gets thrown. So then you can refresh the list of databases and then you'll see TSDB, right? But in this course we're going to be looking at how to do both scripts and use the graphical user interface in Management Studio. So you should be able to follow along quite fine. And at any rate, if you run into difficulties, feel free to reach out. 8. Install Microsoft Data Studio: Hi guys. In this lesson we're going to be looking at how we can download and install the Azure Data Studio. Now, the name is kind of misleading because it starts with Azure, but it's not a tool that is unique to Azure. It is a cross-platform data is management system tool, and it allows us to connect to any kind of data source. Well, at least Microsoft SQL Server data source, whether it's locally hosted, are hosted in Microsoft Azure. There are other things that we can do with the tool, but we won't necessarily do them in this course. The reason we're going for this tool, however, is the fact that a cross platform database tool, and we can work on Windows, Mac OS, or Linux. So remember that we're catering to cross-platform development. So I'm trying to show you all of the tools that can help us to accomplish our goals regardless of our operating system. Alright, so to get started, you can actually just Google Data Studio and you probably, or you can say a zero dtau Studio download. And it will lead you to this website, which is on the Microsoft Learn. Alright. And from here you can scroll down to the different download options. So for Windows, we have these options. And the user installer is a simple installer, which would be a very similar install it to what we had with Visual Studio Code. We have the MacOS installer and we have the Linux way of getting the files onto our system. So if you need a blow by blow per instruction or money while you can actually scroll down and you'll see the section here for the Windows installation. And you can see that you can just download the installer for Windows and go ahead with the setup. Or you can download a zip file and unzip in a location and then use it directly from there. Alright, I'm just going to scroll through option and here's the MAC OS installation section. And then here's the Linux installation section. Ultimately though, we'll end up with an application looking like this. When you get it, you'll be able to change your theme and everything. I have the dark theme running. You can always change that color theme if you wish. But ultimately it does allow us to connect to any kind of data source. And here I have a pending updates. I'll do that later on. But we can connect our different servers regardless of whether they are on local host. So this default is my local host, SQL Express instance. I also have a docker instance available to me now several instances across Microsoft as juris, all of my servers are right there. Alright? And we can do some cool things. We can search, we can do some notebooks and explore a source control and extension stuff. Like I said, it has other built-in tools for other related activities will not get into those. But for now, it is a simply enough tool that allows us to write our queries. We can create our database quite simply. Alright, so when we come back, we'll actually get started with the development. 9. Create ASP.NET Core MVC Project - Visual Studio Code: Welcome back guys. In this lesson, we're going to be creating our asp.net Core MVC web application. Now, the first thing that you'll want to do is launch your terminal. Terminal may look different based on the operating system you're on. If you're on Linux, it will look different from if it's unmarked. Well, too often will actually look pretty similar. But if you're on a Windows machine, then you want to look for either PowerShell or Command Prompt. I'm using a Windows PC, so I actually have this window that's called terminal, and it actually gives me access to the different kinds of terminals that I have on my machine. So you see here I have one tab called Windows PowerShell, another tab called command prompt. Even if you're a window doesn't necessarily look like this, you can do everything that we're about to do if you're using a Windows machine, using the command prompt, either way, the same commands that we will be running on my machine will work on any operating system. So I'm just going to close one of these tabs and I'll just use the PowerShell window. And first of all, we want to make sure that we have done it installed. If you just say dotnet and then hyphen, hyphen info, then you'll see a nice little print or like this showing all of the dotnet run times you have installed. I have been doing dotnet development on this particular machine since 3.1 was the in thing. You see here that I have five and I also have seven. And if you look down here, you'll see that I also have access to versions of six. Alright, so that's evidence that dotnet is successfully installed and you want to make sure that you have seven because we'll be using seven. However, if you installed and want to use six, 90% of what we're able to do can work with six where there's a difference. I will make sure to point it out. Now that we've validated that dotnet is installed and we have access to the dotnet CLI. What we need to do now is I'll just make this a little bigger so the commands are more visible. What we need to do is navigate to a directory where we know we'll want to have our project. And then we will create our new dotnet application. I'll just say CLS to clear the command prompt. And then the bigger again. Now, what we can do is navigate to the folder, so that looks something like cd, and then you choose your destination. So I have a special folder on my C drive that I use for projects. So I can navigate to that directory. And then I'm going to run a command that says dots net new MVC. And then I went to see a hyphen, or this hyphen 0 means where do I want to put this project? So I wanted to create a new folder. If I don't do this wherever I am, it will create a folder. So you could have created a folder for yourself, whether using your user interface or your command line. And before I get into that, let me just show you how you would create that follows if I said MK dir directory and then give it a name, let's say test MVC up. Then it would create that. Then I could say cd to test MVC app. And you see here that's about a number of folders. And then I could just say dotnet, new MVC. And then what that would do is create a brand new asp.net Core Web up using the model view controller templates. So that's what MVC means just in case that wasn't clear before. And they're letting you know it was created successfully. So they're letting you know that they have created the project in that path. And they gave the project the same name as the folder it was created in. Alright, so that's a nice clean way to create a new MVC up. However, we're not going to be working on MVC up, so I'm just going to do cd dot dot, which brings me back up a directory and let me clear my screen once more of any messages. Just go full screen this time around. And then let's do this end-to-end. So if I want a brand new dotnet MVC application, so I say dotnet new MVC, and then I'll see it hyphen or not zero, but all, and then give it the name of the directory. Now in this course, we're going to building a very small school management up. Just enough to help a small school keep truck off the students, the teachers, on the courses that they offer, right? So I'm just going to say school management up, alright? Then I'll just say MVC, just so we know that this is an MVC up for sure. And then when I press Enter, what is going to do is go ahead and create that new directory, School of Management app dot MVC. And then in that new director creates the project file to go with it. Alright, so that's another way that we could do it. We could just say dotnet, new MVC hyphen and then specify the project name. It will do both directory and project file in one sweep. Now, when we want to open this project, we have a nice keyboard shortcut that we can use another command shortcut rather. So if I navigate to this folder and I say school management of MVC, so CD, jump over there. And then I can say code dots. Look at what happens. This is if you're using Visual Studio code. So once you have Visual Studio Code, you have that environment variable in your command line. And then once you say code, full stop, it will open Visual Studio Code to the context of the folder that you have currently navigated to in the terminal. And sure enough, we are there with Visual Studio Code and here are all of the files that have been created in that particular directory. Of course, he can navigate, they're using your Explorer if you wish. But right now, this is enough proof that our project creation efforts have been successful. I'm not going to go through any extensions or anything. I just wanted to show you how you would go about creating a brand new MVC using the CLI and wholly open it using Visual Studio Code. Know right before we close this exercise, I just wanted to point out that there are several. 10. Create ASP.NET Core MVC Project - Visual Studio: Alright, so we looked at how we can create a new project using the dotnet CLI. And that is really for any kind of operating system, especially if Visual Studio is not supported on your operating system. However, if you want to use Visual Studio for the development exercises, we'll just go through the simple steps to create a similar project using Visual Studio. Visual Studio is a very powerful IDE given to us by Microsoft for dotnet development. And it comes chock full of all sorts of features that you need. A lot of extensions and a lot of add-ons with other tools to really accomplish the same feats. That being said, other tools are capable and resource to do is capable out-of-the-box. Note to the left, you'll see that I have a list of recent projects. If this is your first time using Visual Studio, you may not have that much life to that side. That's fine. However, we want to focus on the Get Started section so we can start off by cloning our repository, opening an existing project or solution, or a folder where there might be an existing project or we can create a new project. We can also continue without code. I think we chose that option on the last time we're looking at Visual Studio. However, this time we're going to say Create a new project. And then that is going to load a number of project templates. So based on the workloads that you'd have selected for Visual Studio, you may have more or fewer workloads than I do have here. Alright? The most important one is the one where creating, which is MVC know this is a huge list we can filter based on the languages. So we only want to see C-sharp templates. Maybe we only want to see for templates for our particular kind of platform and for particular project types, right? Or we can just search. So I know I want MVC, I can just search for MVC. And then here they're going to give me the web API. No, that's not what I want. And then I see here that they're giving me a web app with the MVC model view controller. So that's the one I'll select, choose Next. And then they're going to ask me, okay, what should the project name? So this is going to go to a different default directory from my previous ones. So I'll give it the same name just to show a level of consistency. Alright, so school management dot MVC. And then I can hit Next. Then it's going to ask me for the framework type. So we already went through the fact that we have different kinds of frameworks or might have different frameworks installed. And what we're going to be doing in this course, Let's seeks, can do it starting at seven, can do it where there's a difference. I would definitely pointed out. But for this course we're going to use dotnet seven and we can choose a default authentication type. Now, these are options that we could have provided in the CLI because I didn't provide any options in the CLI. I won't do anything extra here. Right? And I won't do any of these things. What I'll do is just hit Create. After hitting Create, you get our Visual Studio open with our projects. So we have the Solution Explorer by default, this panel is actually on the right-hand side. But I find it easier to use when it's on the left-hand side. So you can actually drag these panels and place them wherever you want. Of course, left or right is usually a good place to have something like this, which is showing you all of the files, but I like to have it over on the left. Alright? You also have access to database management tools built-in. So with Visual Studio, you actually don't even need the Data Studio because you can actually connect to your database is from right here. And money, To some extent, running queries, creating new tables, and as database objects as needed. Alright, so Visual Studio is very powerful and when you want to run, you can either press F5 on your keyboard or you can hit this Run button up top, which has the letters HTTPS. But if you're using dotnet six, the letters may not see HTTPS. They may just have the name of the project does in where you see HTTPS here, it would say school management dot MVC, and that's fine. The both of them will do the same thing. It's just a matter of how they are classified or called in this launch settings, that JSON file, where it outlines the different profiles. So you'll have an HTTP profile which will run on an HTTP setup. Then it also comes out of the box with HTTPS, which will run with HTTPS settings. Alright? You may also get a prompt to trust the certificate, the development certificates. If you do get that prompt to click Yes. And I'll just run and let's see what this would look like. So what it does is build the project, meaning it's going to compile, look at all the code, makes sure everything looks good. And then if everything looks good, is going to launch it here. The terminal, or I have a terminal running in Visual Studio as well. And it's showing me that it is now listening on the HTTPS sports 7212 and HTTP port 5294. In the background. It's also launched my default browser, and it would have defaulted to the HTTPS port. And here is our web application running from inside Visual Studio. So once again, Visual Studio is very powerful and it allows us to accomplish a number of things by just clicking here and there. They give us a lot of tools and it's very easy to navigate and get up and running. However, once again, not every computer, not every operating system supports Visual Studio. So we'll be focusing on development using Visual Studio Code and the dotnet CLI. However, I will do my best to run the parallels where you may need to know how to accomplish the same thing using Visual Studio. 11. Tour Visual Studio Code: Welcome back guys. In this lesson we're going to be touring Visual Studio Code for a little, right? It's a very versatile editor and it's good to just know where things are and understand some of the prompts that we may see as we go along. So I have our School of Management app dot MVC project open that we created before. And if you want to open our project, let's say Visual Studio Code closes and you want to get back there. You have the option of using the CLI and navigating there. Or you could actually go to File and say Open Folder. And then from here you can navigate to the folder and then select folder. And then you'd have the same experience where Visual Studio code, we'll just load all the files that are currently in the folder in this section called the Explorer. You can dock this Explorer so you get more real estate for your code. Or you can have it on the side, it can re-size it at will. Write sometimes you just don't want it that open. Alright? You also have the ability to search through everything. So if I search for the latest MVC, then it's going to just show me all of the places that appears I can do a search and replace quite easily. Replacing all are replacing one at a time. Of course, I would suggest one at a time for bulk operations where you might have some clashes with what you're searching for, right? So you always want to be careful with that search and replace, especially for bulk operations. Then we have source control access. Now, here you might see an option that suggests that you install Git for your operating system. Now I'm on Windows. So if I didn't have Git installed already, you would see install Git for Windows. Because what happens is that Visual Studio Code has a direct integration with Git. And it allows you to run all of it, get commands from right here quite comfortably without you ever having to get into the CLI. Alright, so knowing Git commands is cool. But with Visual Studio Code, you can kind of caused by without having an intimate knowledge of them. So you want to go ahead and get, get on your operating system. We will be using GitHub. So you see here that there's a nice big red button that says published a GitHub because it's a few clicks, we can actually push our project to GitHub and we will be doing that later on. So we don't have to worry about that. Then there's run and debug. Run and debug actually allows us to execute our project. Alright, so with our Visual Studio experiment, you saw that we could click the button and it launched our project. Well, that's what runner depot goes here. We'll look at how this works versus how we can do it in the CLI as well. Not wanted to skip over remote Explorer. And I'm skipping over that because you probably don't have that. This remote Explorer is one of my additional plugins. And anything that you're seeing to the side on my computer that you're not seeing to decide on your computer means that these are additional extensions that I have installed for my own purposes. I'm not going to prioritize anything that is not absolutely necessary for you to complete this course. So the next major icon that you'd want to pay attention to would be extensions. Now under Extensions, you'll see that you have access to install different extensions on support for different project types based on your needs. So I work with Azure. I have quite a few as your extensions installed, right? But then also have snippets for Bootstrap five to make my life easier. I also have a C-sharp snippet. And you might've seen some prompts coming up about C-sharp, C-sharp extension being needed based on the project type. So because we are going to be doing a C-sharp project in dotnet. The C-sharp extension makes a lot of sense because it's add support for C-sharp coding syntax and IntelliSense and autocompletion and a number of things. So I would suggest that you look forward to C-sharp extension. No. To install an extension, what you do is search the extensions marketplace up top here, and you can just simply write C sharp. And then that one will top the list because it's an official Microsoft extension. You can click it. Then where you see all of these buttons for me, you would actually see an install extension button. Like if I was to click one, I don't have there's what you would see uninstall button. So you can go ahead and install it and it might require that you restart your Visual Studio Code. There are a number of handy extensions and you always want to look at publisher of the extension. And one thing that I use to gauge it as well is how many downloads it has. The publisher is one, but then the number of downloads in case you're not necessarily familiar with the publisher. The number of downloads is also vary. A very good indicator as to its stability and how well used it is. Now another thing that you may notice, and I think I mentioned before is that Visual Studio code might show you a little pop-up suggesting that you get particularly extensions. Are you install certain extensions based on a project type. You can actually go ahead with those. Visual Studio Code is just making suggestions to help you to have the best experience that you can based on what you're working on. Installed a number of extensions. You can see here that I have 45 extensions. So just go social, Visual Studio Codes, versatility, because I've used it for ARM template development. I've used it for Angular development, I've used it for Azure development. I've used it for some data workbook stuff that's still Azure, right? Larval, PHP, Python. These are all things that I have used it to do, and these are things that you can use it for in the future as you develop and you want to explore different avenues. So Visual Studio Code is almost like an all-in-one IDE for various platforms. This is your first time using Visual Studio Code. I do encourage you to go ahead and explore and see how it supports other languages and other frameworks and how you can use it to your advantage. Now, another thing that I want to, Let's move on from extensions. Another thing I just wanted to point out before we get into any real development would be the fact that it has a built-in terminal. So before know all of what we did to create the project and so on. We did in the native terminal of our operating system. However, while we're in Visual Studio Code, we probably don't want to be jumping in and out and between windows. It conveniently has included a terminal for us. So you can get there by using the keyboard shortcut that is here. Or you can just click it off course and that will launch a terminal window. And this terminal window is based on Porsche. But guess what? We have options. So we can actually have multiple terminals running simultaneously. So I could actually add another terminal window. And if I wanted one that was just command prompt. If I wanted one that was a bash and you'll get Git Bash once we install Git on your machine. And I mentioned it before, but I didn't show you. So you can get good. So you can get by going to get hyphen scm.com, or you can just Google get. And I'm sure the first search result would give you this website. You can download it for various operating systems as it is, cross platform as well. So you can get the windows, the Mach, and you can get it for your Linux distros. And it's natively command line interface, right? But then you do have certain tools that can give you a user interface and Visual Studio Code, once again, is such a tool that will allow you to do get related commands here. Alright? So those are things that we can know if I want it to run our application here using the CLI. I can in the terminal and let me just close the Windows, Terminal Windows that I'm not using, that little rubbish bin. You can just click that to kill the window. And I'm going to jump over to the Properties for their lawn settings file. Alright, so I'm going to give you a tour of the file so you can understand everything that's happening. But before that, I just wanted to focus on this line settings file. Now, we have two profiles of HTTP and HTTPS. If we want it to run our application, it would default to HDTP. If I say dotnet run, it would actually defaulted the HTTP profile and lunch or HTTP version of our application, quote unquote version. It's the same version, same code, just different behavior security wise. But then if we wanted to run using the HTTP s setting, then we would have to specify in our dotnet run. So I'm just going to mute this terminal window bit bigger. And you can do that by holding down Control and pressing Plus to increase the overall size of your Visual Studio. Code, User Interface and Control minus to reduce it, right? So you can play around with that and get to adjust it to an appropriate size for your screen. And then what else is dotnet run? And then they can see hyphen, hyphen launch, hyphen profile, and then specify that I want to use the HTTPS launch profile. Or when I press Enter, it's going to build. And it will see the terminal output that our application is now listening on our HTTP port and HTTP, Right? I didn't do this. Part of it would still run, but it would just be listening on the HTTP port of 5246. Alright, so those are just some nuggets. So if we control click this URL, it will launch our browser. And then we can see here that this is our MVC application running from inside of Visual Studio Code. Alright, and when I'm finished doing what I'm doing, I can just use Control C to shut down. So when I'm finished testing and I wanted to get back into code, and I want to stop the server that's running. I can just Control C and then it will shut it down and return me to the CLI interface. Alright, so that's a nice quick and dirty tour of visual Studio Code and what it can do for you. There other little nuggets that we will discover along the way. Don't want to give you information overload. I just wanted to point out some of the most essential things for our development tasks. And as we go along we will see more. No one nice feature. It's not absolutely necessary, but it's one that I use. And it will probably influenced the experience that you have based on how I do my thing. But I use autosave. If you go to File, you will too. If you scroll down, you'll see autosave, so you'll see that it's ticked for me. So that means as I type, Visual Studio code is automatically saving my changes. And if you enable it, you will have that similar experience. Otherwise, of course, after you make changes to our file, you need to either save it or do I build every time to see the reflection in the testing environment? So autosave can save a lot of time. When it comes to that. We also can go and change our settings. If you want to use a different color theme there it is, you can change your theme to what, a light or dark. So I'm not going to change from dark, but you can choose the one that you like. You can also enable things like Word or up and change your font size from the settings. You can change the font type that you're using. You can change the font size. So mine is 30. Rent know. If you want word or up. You can search for it here and you can change it, what they want it on or off. I have it on. Now when we come back, we'll take a tour of our project files. 12. Tour of Files and Folders: Alright guys, so now let us take a tour of our project files. So that's the level on settings open. Let me close this and let us start fresh. I'm also going to zoom in a bit and close the terminal so we have more real estate. Know. The bin folder. This gets generated after you do a project built and pretty much it is storing the assets that make your application run, right? So essentially when you press F5 in Visual Studio or you would use the.net dotnet run command. What happens is that when it says it's building, it's compiling all of these files and assets and putting them in this bin folder. And then it is going to execute the application from this bin folder. And then that is the manifestation that you would see an interactive while testing. On the flip side, when you are publishing, it would also create a set of assets similar to this, and that's what you would place on the target machine when you are deploying your application. Alright? No, dotnet Core is cross-platform, so these assets will work on any operating system, on virtually any type of server where it needs to be hosted. Alright, That's what we get from the bin folder. Now, we have one of the key folders that we got out of the box even before we did a build. And that is called controllers. Now we have in the controllers folder, the controllers. And remember that controllers are there to control the flow of your application, which means that every request that comes in goes through a controller. And then it gets handled and you either get an error because it can't handle it correctly, or you actually get to the page that you are trying to go to. So every time you navigate on our website, you send a request with every click, you send a request when you go to the destination or get the results that you're expecting, then you get a response. Hopefully you get the response you're expecting, or you might get an error response. So a controller is sitting in-between that request response transaction, right? So for instance, when we run our website and it loaded the homepage, what happened is that it went to the home controller and then it went by default the index action, and then the index actions is return a view. The controller has a register of all of the possible roots are requests that it can fulfill successfully. One such requests are routed can fulfill is the index. In general, web development, index should always be your first Beach. More servers are going to try to go to the index dot HTML or dot PHP or not SPX, right? No matter what the file type and the extension type, it's always looking for index. First. Home controller has what we call an action, which is a registered route that home controller knows that it can go to. If you go to home, is automatically going to look for index. And then when it looks for index, this method defines what should happen when index is trying is navigated to based on what chord and what magic we want to happen. We may want to go and fetch data from the database. We may want to do calculations. We do all of that inside of this method. Do stuff. Alright? And we read all of our code and magic and logic here. And then we return what we call the view. Alright, so we'll soon get to the views folder, but you'll see that we have a Views folder. This is the C in control in MVC, the seas controller. So this is what a controller does. It takes the request it says cannot fulfill the request. You want it to go to index? Yes, I have an index action. I can fulfill the request. Here's what I need to do before fulfilling your request or before showing you a result. Then the final line is where I return the page that you requested alongside whatever additional data needs to be there. Given that this is boilerplate code, you can see that it's very simple. It's just going to return the pH. It's not doing anything fancy before it turns the page. So the view is the ultimate destination and this is generally going to be the last line in your action when you are creating your own. Another destination that the home controller knows is privacy. So every destination that you want, you need to have an action. And that action will return a view or returns some response that is favorable to what the user is expecting. They also have another general myth, action called error, which is returning an error view model. So the error page. Now, if you look here, you see that this one is doing more. One it has some annotations which are handling caching. We don't have to worry about that, right? No. But inside of the method you see that it's doing a bit more. It says return view and then it's seeing return view with this data. So essentially, this is like a global error page. Whenever there's an error, at least while you are debugging, then it's going to keep track of what rays that error, what activities are, and allow you to trace it down the line in your application. So that's some kind of more advanced stuff that I won't get into. But what I really wanted to point out here is that it is adding information that the view needs. So this is how we pass information into the view. The home view doesn't need an inflammation. So we didn't have to do stuff. Right. I wouldn't have to give it any inflammation. The privacy controller also didn't need any additional information. However, when the error page is supposed to come up, we want to pass in this additional information from the code behind when we return the view. So that's essentially what that does. Alright? No, I'm not willing to order of MVC. I'm going in the order of the folder structure here. So the next would be the models. And a model error view model is the one model that we got in our photo. Now, Error View model contains these two properties and pretty much our models slash view models, our class files that represent the different bits of data that we want to display to our user, right? So a model will embody strings in a different data types, in spool, char, etc. Whatever it is that you need to display on your page that needs to be dynamic. Pretty much you're going to create a class file, which is basically going to play the role of our model. It's just the class. Nothing too special if 0 p, Well, you don't want to classes and you know what the properties are. And essentially what we do with the controller is we set the data. So that's what we're doing here. We're actually sitting the data inside of this error view model, or we're creating an object of this class. And then once we have created an object, unpopulated the properties with the different bits of data that will be one. So here we populate the request ID with all of that information. It's either going to send over that according to ID or it's going to send over the trace identifier. If that is know what it's going to populate it with all of that, then it's going to return an object of that. So the view now has a model that has some data. And the view will already know how to extract the data from the object and display the user's. Alright. So that's what a model really represents, is just an object of a class that stores data that the view is going to use. The controller is in charge of populating that object with the data before the view displays it. Obj, this is one of those arbitrary or folders that we don't necessarily have to pay attention to very much. Once again, it just has a bunch of generated files that we don't or interact with too much. So I'll skip over that. We have gone into properties and we have looked at the launch settings that JSON file. So here, as the file name suggests, it just has different configurations for whole, the application should launch, right? So we have iOS settings. If we wanted to run with a local IIS Express instance would run on that port. But Vizio, sorry.net has its own built-in server. So we don't necessarily have to rely on as expressed like we had to in the past. So it allows us to have our own launch profiles in HTTP and HTTPS. And then it does allow us to plug in what we'll call it environment variables into the different launch settings as needed. Alright? So those are pretty much the settings that come out of the box. And you don't necessarily have to modify this file unless you absolutely know what you're doing and have very specific needs behind your modifications. But generally speaking, you can leave this file alone. Now, let's go over to views and the views folder. It can be very interesting. First of all, you'll notice we have two. We have a folder in there called home. Now, I have the home controller open simultaneously so that I can show you the expectation of the file system and how everything ties together. Once we follow this naming convention, we have the home controller. So we have a Views folder called home. So what you'll notice is that forever controller that you create, the MVC engine is automatically going to look inside of the views controller for a folder with the same name as the controller. I want to say the same name. I mean, what comes before the word controller. But that's a naming pattern. So if we add students controller. Then it would be students. That's the name of the controller. The word controllers expected. Alright, so you should always have the word controller, but whatever comes before that is the name. It's expecting to see a folder with the same name instead of the views folder. And then inside of that folder It's expecting to see different CSS HTML files. So CSS HTML is the extension given to a razor view files, right? And before I get into what one of those files looks like, I wanted to point out that each file name needs to correspond with an action name. So that's why when we return view knows what to return. Alright, so let me go through that again. When you send a request, when you click on a link, right, you are clicking on a link that should navigate to our controller. The controller will evaluate the link and check to see if it has an action that matches the URL that you are trying to get to. If it does have an option, it will then go to that action, execute whatever magic is in that action, and then attempt to return a view. This view that it attempts to return will be the CSS HTML file that he is specified with the same name off that action. So if you send over a request and there's no action that matches that request, then you will get a 404 error. If you send over an auction and requests, sorry, and it finds an option that matches the request. And then it attempts to return the view and it cannot find that matching file, then you will get a fluorophore request and that's basically hold the whole websites work. So that is essentially the experience that you can expect when you are browsing your sights on when you're building your site. And once you follow this naming convention, you'll have no problem. So you'll see here I've indexed Celsius HTML. I have index as an action f privacy, privacy. There can be exceptions to the rule because here is error, but you don't see a error inside of that folder. In fact, error is in the shared folder. That's fine. But generally speaking, you want to follow the pattern behind index and privacy as you go along. Now, let's take a look at what is in the index file. In the index file, we pretty much have a mixture of HTML and C-sharp. Alright, so that's HTML. This is some C-sharp looking code. So the CSS HTML file is like a hybrid file that allows us to write some amount of C-sharp inside of this HTML file. But really and truly it's just a glorified HTML file. If we need something to be dynamic than we can introduce C-sharp. And to introduce C-sharp, we just need an ad sign. And then we can start typing something, right? That is C Sharp code. So let's see, I'm going to first run this. I'm going to use my keyboard shortcut Control Shift, apostrophe launched the terminal, I'm going to say dotnet run and let that launch our application. So here is our application, right? And notice that it went, it didn't specify where it wanted to go, but it just directed us to the index page of the home controller, right? If I click privacy, then look at that. It's going to say home slash privacy. So who is the controller? Privacy was the action. If I tried to go to, let's try, let's try index, then it's going to go back to the homepage. So it knows home slash index. But if I tried to go to home slash my name, then it's going to give me a 404 because there is no action that could be found for that route. Alright. Now, what I want to do is show you how we can inject something dynamic on this view. So if I wanted, let's say the date value. So I can say at sign deeds time. No. See that, UTC know, alright, and save that. And I'll just do Control C inside of the terminal to kill it. And then just press up to get the most recent run command and then press Enter again, so it restarts. And then I navigate back to the website or just refresh then look at this. I just added that, right? That is a timestamp based on the code that I just put in, which is C-Sharp code, datetime, UTC know. Alright, so this is, yes, it's an HTML file, but I can put in my C-Sharp code. So if I wanted this to be, let's say in an H1 tag, I could actually create an HTML. Each one tag. Put in that time. And this time I'm going to Control C to end. And I'm going to use a different command this time. Instead of dotnet run, I'm going to say dotnet watch. Alright. So watch this now. And I said dotnet watch. It's going to let me know that it will do what they call hot reload. Hot Reload is enabled. Let me scroll up so we can see exactly what it's saying. Here. It's in dotnet watch Hot Reload enabled. And then we can see a list of other options. Then they say use Control R to restart. So that way, when we make our changes, we don't have to be stopping and starting and stopping and running and jumping and running dot on it. Watch will meet that a bit easier for us. So when I go back to my browser, here is the datetime know as an H1 tag, right? So if I wanted more of those, I can just use Control C, V. And notice I didn't highlight, when I did control CV, I just clicked on the line, control C, control V. It will duplicate the line. And with each change, it's letting me know that the file has changed and it does a hot reload. And then when I go back to the browser without stopping and starting, here is a fruit of the labor. Alright, so I'm just showing you that the view file is really just a glorified HTML file that allows us to inject some C-Sharp code where necessary. And that is why when we load up an object with data, we can actually interact with the data coming over from our C sharp object right here in our view file. The index view is quite simple. Let me just remove all of that. We have the privacy view, which is not any more spectacular than that. Except here you'll see that they are doing that C-sharp injection because you can set the title dynamically off the page that you're on, and then they're just printing that dynamic page here. Alright. Now, when I go over to the shared folder, we have the layout file or the layout file. Zoom out a bit. The layout file is basically just the template that all of the website will use to infer what it should look like. If you notice, when I go between home and privacy, everything is static except what is in-between the header and the footer. Alright, well, everything looks consistent and consistency is very important. When building websites with static websites, you'd have to manually copy and paste that navbar and the footer and all of the assets on every single page. If you want a consistency, the layout page provides one HTML template. You'll notice that the views don't start off with the HTML tags and everything. And at each WEBO is they always start with your skeleton. However, we have the skeleton one place, we have the DOCTYPE HTML tags. We have the head and we have the body all in one file. Alright, so we don't have to repeat that for every single view page that we build. However, inside of the body and we have the nav, let me just kinda collapse the parts, right? We have the nav and then we start off with the container, which is usually where you start putting your content. Then we have that, and then we have this section called render body. So render body is where the view gets injected into. That is why when we change the pages, everything else is static except what is inside of the body. Alright? This is the container section, privacy. That's our container section that surrender body because it's just showing us the view file or the content of the view file that is being loaded based on the route. However, everything else is consistent. So now if I make tiny adjustments, like renaming this section, taking all the footsteps, foodstuffs and putting spaces between the means. And I did that in the title, the nav bar, as well as the footer. If we take a look over here, then we will see everything changed, right? And no matter what page we go on, once again, it's always going to be consistent. No. I think we have a good understanding of our views and we have other other files that play a supporting role that we'll get into later on. We have the dub, dub, dub root folder, which has our assets. So we come with that CSS. This is our own CSS file that comes built in that we can extend and writing our own CSS, but we do have site CSS that we can write our own site, just that we can write our own JavaScript files in. And then we have the lib folder that has third-party libraries. So generally speaking, when you install third-party libraries, like it comes out of the box with Bootstrap and jQuery end. Those libraries, then you'll want to put them inside a flip. Those are also by default referenced in our layout file. Here. Here you will see all of the script files that are being referenced, right? You'll also see in the header, all of the CSS files being referenced as the key. And with those, so we have Bootstrap, we have decided CSS, and then we have a special CSS file that is specifically designed for layouts. And you'll see it here called layout.css ational that CSS, we can write even more CSS specific to the layout page without it being global. Alright, next up, we have some other built-in files and we have the app settings that JSON file. So the opposite things like JSON file has two parts so we can create other environments, specific versions. So for development, if we have specific configurations want to use, we can set them there versus when we publish versus when we're testing etc, Basin environment. We can have different ones. We'll be modifying this as we go along. So know that it's a key file and you want to be very careful of the modifications you make here, because if this is poorly modify, then your app will not run. Then we have our program.cs, which is in any C-Sharp application. Program.cs is the first file that gets run. Once application on runs, it's going to look for program.cs. So whatever is in this file sets the tone for how your application will work. And when we see it sets the tone, what we're doing first of all, is adding services to the container. The container will be like what the app will use to know what it can and cannot do. Want to add as many services as we need so that container before the app gets built. So here we're seeing IDE support for controllers with views were doing an MVC absolutely needs controllers and views, right? Then we build the app. And then there are some checks to say, okay, if we're in an environment that is development, or if we're not in the app development, than we can rewrote that page, four arrows and we can force HTTPS redirection, right? So basically this will say that you can't use anything other than HTTPS, strict transport security hitter. But then that's usually for production. So that's why it's in that if statement. If we're not in development, then be strict about that https transport header, right? We do use HTTPS, the redirection. So you'll see here that there's a warning that comes up whenever we're not using HTTPS setting, that is, the redirection middleware is during our warning, that will be this. So these are what we'll call a middleware. So these are mini apps that we have added to the request pipeline. Meaning once I request comes in, once somebody clicks a URL, is going to say, okay, what's the order that I should do? I should first read Erich to read Erich to HTTPS, I should use static files, meaning those assets from the root. I should use routing. I should tried to authorize, and then I should try and map. Then I should run, right? So pretty much that's like the order in which all of the functions get called with every request, we can add our own middleware. We can change the order, but the order does matter. So you want to make sure that when you add middlewares to this file, you are adding it in a particular order based on how you want your app to function. That is it for the tour, right? A lot of information was shared. So you want to once again play around, you know, how to create additional projects. If you wanted to create an additional project and try and mess up the files and see what stops working and so on. That's a good way to learn your way around. I would suggest that you have multiple projects that you do that width. But for now, we have toward all of the project files that are absolutely necessary for our understanding at this stage. In our next lesson, we're going to push our project up to GitHub. 13. Add Project to GitHub: All right guys, so let us know, push our project to get up. So we'll use the project that we've created to create a brand new repository on our GitHub account. And that will also establish a link between our Visual Studio Code instance and the GitHub instance. And that would allow us to push and pull as we need to. Go over to the Source Control Tab. And you have two options you can initialize a repository are published to GitHub. So what happens is that once you have Git installed on your machine, get access a local source control management system. So it's also called a distributed source control management system. On your own machine, you can have all the changes that you want, all of the history, everything that you're doing, it's all on your machine. However, if your machine goes down, then you have no backup. So the remote option, like GitHub, where we call it a remote server. So it could be GitHub or Bitbucket, it could be Azure DevOps. It could be a machine in your office that has getting installed on it and it's serving the team. Whatever it is. That is what we'll call a remote server. So that is the central repository where you and many others can push their code simultaneously and store. So you'll have your own local copies as well as a centralized copy for everybody's access. Now, before we actually go and push to the central repository, I want to explain something about the files and what files we actually want to track and not while touring the project, I would have pointed out there are certain files that are more auto-generated based on our activities. And that means that we don't necessarily need to keep them in source control. Or source control is the truck, the fires that we actually curable the changes. The only thing that's going to get generated after the fact, we don't necessarily need to track in source control. So all that to say that there are certain directories like OBJ and been that how fast I get generated on the fly. Right. So OB-GYN been have the debulk or the release files and other assets that are getting compiled. Which wants to do a dotnet build our dotnet run or the dotnet watch, they're going to get generated so we don't necessarily need those in source control. So what happens is that Git Hub has the concept of a gitignore file or gets in general has a concept of a gitignore file where we can generate this file that we can specify directories that we don't want. And given that we might not necessarily be experts in all of the directories that we are allowed or we can afford to ignore. There are good to ignore templates that we can get access to. Our dotnet CLI allows us to actually just generates dotnet new git ignore. And then that will go ahead and generates that gitignore file based on the Visual Studio templates. Alright? This Visual Studio template knows that any project that is Visual Studio based slash dotnet based, we don't need these kinds of folders included. See here the bulk release, you'll see been an OBJ. And this means what S capital or common, or once it has those three letters than we are to ignore it. That's what visual stood. That's what this gitignore file will be telling get when you're submitting to get ignore these files and the files in these directories. Alright, so this is a very nice way to keep your check-ins or your comments rather very precise and concise. And you can see here that you can get the latest template from this location on GitHub. Alright, so now if we go back to source controller, we say published to GitHub. At this point you might be prompted to authenticate with GitHub, so you just provide your credentials and everything. Now we can say whether we wanted to publish to a private repository or public repository. Private means that you and all the persons you give access will be able to access it. So I won't be able to go on your profile and see it. And then public means that anybody who stumbles upon your profile can see it. Now, for at least this exercise would encourage that you do public because it makes it easier to share. It makes it easier to show the world what you have done and what you are working on. And people could even look and do code reviews and help you along the way, Right? So I'll do public. Then once we click public is going to publish that. To get up for us, it's going to put in an automatic commit message. So when we say open on getting, it will actually launch GitHub and show you all of your project files that have been committed. And notice there are no been an OBJ and any other folder that may have been auto-generated lead that will be. Excluded, right, so those would have been ignored by R, ignore file. We also got an automatic first commit message. And what happens is that when we do, when we make our changes and then we want to submit the changes to the source control engine. We want to include some summary of what we have done. So let me make a tiny change here in our views file. I went to go down to shared the layout and the DateTime here. So the year here is static. What if I wanted that to be dynamic? Because if it changes the next year, I don't want to have to come and update this file manually. So I can change this to see the time. Thoughts. No ear. Advantage of being able to write or C-Sharp here. So I'm just saying give me the datetime as of this moment and what is the year. And then this will be dynamic. So whatever the time and did, our will always change accordingly. Alright? So you can do dotnet run and just validate that you're still seeing the same year. Of course, and it still works. But then of course, when this increments, when the year increments, you don't have to worry about changing that non-duality. That's is just that tiny change. You can take note of the visual cues that you'll see appearing like those little dots and m. So that means that this is now a modifier file. So the last time gets all this file, it looked like this. So get you saying that this is now modified, which means that when I go to my source control tab, it's going to tell me that I have one pending change because I've modified at least one file. Now I can see changed. Let's say change footer, year to be dynamic. That's my commit message. Now I can commit, which would save the changes locally to my local copy of the GitHub repository. I can also do commit and push and commit and sink. So commit and push means I'll commit locally and push my changes to the remote repository, which in this case is GitHub commit. And sync says that I will commit locally, push my changes to GitHub and try and get any changes that might have been on GitHub. And that's perfect for our team sitting, right when you have multiple persons contributing to the remote repository, you want to always have the latest changes. You can also before you commit and push our commitment seeing pulled on the liter. So you can actually use these three dots. I can say Paul. And it will look and see, okay, what are they? Files that have changed on the remote repository that are different from yours? Let me pull in those changes. Sometimes you'll end up with conflicts if two of you might have modified the same file, right? So you might end up with a conflict. Hopefully you don't end up with that. But essentially you always want to have the latest version as much as possible. So you want to do irregular pools as you work. But then I push is going to send your changes up. Alright, so you always want to pull, maybe startled any crashes before you push, because that will help team. However, where solar developers for this course, I'm just giving you a dead yes, but what we can do is this commit and push, since we are working alone. So it will come it locally, and then it will sync the changes with GitHub. And then when I go back over to Git Hub just to look at the repository and I refresh. Then you're going to see here that there's a new commit message that came in a few seconds ago. And you can drill down and see what changed. We changed that line to this line. Alright, so that's the power of source control management systems while you're building your projects. So we'll be doing regular check-ins like this and making sure that we keep track of all the changes we make as we go along. 14. Understanding the layout file and Bootstrap: All right guys, so in this lesson, I want us to spend some more time looking at this little kind of glanced over it earlier. And I just wanted to point out some of the key parts that you can modify. Modify safely if you wanted to customize your entire application to your needs. So let's start off from line number one. So we have the load file. And once again, this is our HTML template file for our entire website. So the different pages do not need to start off with all the HTML tags as we would in a static website. This is a dynamic file that will take care of all of that for each new piece that we want. It already comes retrofitted with all of the HTML5 Meta tags. And it also includes Bootstrap. So out of the box we will get Bootstrap with our MVC application. Now, bootstrap is a very powerful UI library. If it's the first time you're hearing about it, that's fine. So you can actually get acquainted with it by going to get bootstrap.com. That is their official website. And you'll see here that the latest version is 5.2, which is the version that came out of the box with our package, with our project, rather, walk you through how you would install it. But we don't have to do all of that because it's already included with our project. The documentation, however, is excellent. So if there's anything that you need to understand as to how it works, you can go to getbootstrap.com and you can scroll through. So let us look at how we can customize something like maybe the navbar. You could just do a search here. And you can see nav, nav bar. That's fair enough bar. Then they'll let you navigate to how it works. So here on the components you have navbar, they talk about how it works. They tell you the supported content and this is the general code layout if you want it enough bar looking like this. So that means that all were enough bar code starts here, and it's in-between these nav tags open on Android. So for every item that we would want, we can put there. So if we wanted the word navbar, that is our navbar brand if warranted an image there instead we could put the image, well, guess what? We have that section as well. Sorry about that. We have that section as well. Here we have that anchor tag, navbar brand. So you'll see that Bootstrap is really just a bunch of classes that I've been built for us to kind of help us to do things faster because there are things that we always want to do. Whenever we have a web application, there are colors, we always wants their certain styles. We always want the guys at Bootstrap where the guys who developed bootstrap, after years of doing the same thing over and over. They made a glorified CSS file. Alright, a huge CSS file, which is this CSS file that we have included in our dub, dub, dub roots lib, Bootstrap, CSS. And then you'll see there are no buffers there, but the one that you want to focus on would be the main.css or the dot CSS. Alright? Dot Min is just a minified version of that CSS. But the point is that this is just a large CSS file. Look at that, all of that CSS file, a CSS code and Styling, right, just so that we don't have to do it over and over. We can just use their style sheet and leverage their expertise and their hard work. Alright, so this is whole weekend customize enough. If we wanted to add an image this shows, okay, if you wanted an image, you could do that instead and add your logo. I don't think we're going to go with any logo, but I'm looking to see like the color schemes. Okay, here we go, so you can change the color. So we have three options. We have dark blue and we have light. Alright? Here this shows the classes that we can use for each one. So in the nav tag, if I jump back over to my layout, CSS HTML file, my nav tag, as soon as I see it, currently using navbar hyphen light. Alright, so if I wanted the dark theme or that would have to see, is navbar hyphen dark. Oh, well this is bg primary, so that will give me the blue one. So if I wanted dark, I would use this one. So if I go over here and she knew just from navbar hyphen light and bg white to navbar hyphen dark and Biji dark. And then if I take a look at that, it launched my terminal Control Shift and apostrophe and then dotnet. I'll just say dotnet watch. Now look at that navbar dark well, guess what? No, my texts can't be seen. Right. Because home should be here and privacy should be here. But that's black on black, so you can see it. Alright, so let us see what bootstrap would recommend. So they would recommend, well, they're not telling me how to put the text in white right here, right? But then I can look for different colors for text. Alright? I'm just scrolling because I'm seeing, I'm trying to see if they have any examples here, which is the one. That's fine. But if I wanted to modify what my text looks like, they have a section called topography. There we go, typography reds under content. And then here they tell us the different styles that we can use. So just by having bootstrap your H1 tag, your HDLs will look like this automatically. You can meet them look like displays by using the class display one through six. That's cool, but I'm more after different colors. And I'm sorry, that's not on the topography, that shouldn't be on the colors. So let's jump up to customize and look at color right? Here are the different colors. Now, the cool thing about Bootstrap is that it's very consistent. So if you do primary, you know, you're going to get that shade of blue, secondaries, that shade of gray, silk says Danger, etc., etc. etc. So light will give us a slightly gray, slightly white color in general. And you'll see that you have a whole color palette. If you want the shades in between, you can get all of those colors without needing to know the actual, I'm headaches or the RGB combination. That's what makes it so convenient. Alright, now, if I wanted my texts to have that particular color, I can in my code go over to the nav items you see here of a class or in the nav, nav item, and then in the nav item of the anchor tag that actually represents the routing, right? I'll explain what this is, B, control and action mean later on. I don't want to focus on that right now, but I want to change the color of my text. So I'm going to change this anchor tag which has the class nav link from being text hyphen dark data, being text hyphen light. Alright. Now that I've changed that file and it has been hot reloaded, let me jump back over. And boom. No, it is text, dash light. See that that's so easy to change the color once I get comfortable with the different classes and the different colors that are available to me in Bootstrap, it's easy for me to just transition between stylings when I need to. 15. Modifying the homepage: Alright, so what we're going to do is modify our homepage. So jumping back to our bootstrap document, I can jump over two examples. I'll just open that in a new tab. And then from examples you see here that they have different kind of samples of sections that you can add to your website. So how do you want your photo to the quality you want to hit it to look. Different. Hero Laos, features, nails, etc. They even have full pages that you could use and I can apply this one. So it has built-in controls like a carousel, right? You could use this sign-in template for your website. You could use all of these things, right? It's just a matter of knowing where to put the code. So these are different filters that you can take advantage of. These are different headers. You could use. Heroes, heroes sections, right? Based on the type of website you're building. I'm going to use this carousel template though. I think this would make a nice homepage layout for our school management system. Or we can just plug in a few images and putting some additional texts if need be. To get the source that I need from this page. What I'm going to do is right-click and go to View Page Source. And I think view page source should be an option that every browser, every modern browser has, right? So from here, I'm seeing the full HTML page, which we know we don't need everything because we're only modifying our homepage, so I don't need everything. I don't need the, you know, those tags. I just need this section that is needed for the view, right? We can take the style because I think these styles are unique to the PID. So let us borrow these styles, right? I'm not going to put them in a style tag though. Instead, what I'm going to do is place them inside of our CSS file for our site. Alright, so these styles can go in there. And what happens is that if you want to extend bootstrap, like what would be happening here. If you wanted to extend Bootstrap, you wouldn't be modifying the bootstrap file. You would just write styles that override the existing one. Alright, so forth takes Dash light. If you wanted it to be a different color, you can put in your own class, in your own CSS file and see that dot takes Dash light. And then putting your own maybe takes color or whatever it is you wanted to change. And then it will overwrite that file, that class in the original Bootstrap file. Alright, so I'm just wearing those styles because we might need them, of course. And then I'm scrolling down to see where the content starts. So the content, or, and there's actually custom styles for this template as well. Let me just look at this and I'm going to borrow these as well. Alright? Because I went to need these for the page to look like the demo. So I'm just going to borrow that. You can have multiple CSS files, of course, but I'm just going to put up this site CSS file, with all of those custom styles. Alright? I do encourage you as well to read through the different styles because here you will see that this is a body style. And that body style might extend our override our existing body style. So it could be that you merge them. You could also just leave it alone right here, you'll see that it's adding a padding bottom and padding top. So our original one that is adding a margin bottom, but we'll see how they play together and then make adjustments accordingly. Alright? So we have that, we have the CSS for our One of the pH. Alright, so we're getting there slowly but surely. Next, I want to take this section that has the content that I need. So I'm going to start from the carousel because remember we already have a mean section in our layout. So it's important to notice these things, right? I have the div, which is the container, and then I have this main. And then I want to render body and render body will show me the views. So what I want to do is replace the content in the view with the content that I need, right? So the content I need for the view would actually start after that mean tag and go as far as that mean Todd? Well, here's the main tag, but that's after the footer. I don't need a footer. Already. Have a footer. Right. So I would have to come all the way up to here. So let me take that Copy and Paste and I'm pasting that inside of my index dot HTML file. Alright, let me zoom out a bit so we can see it's a bit bitter angle, right? So here's our carousel. And if you want documentation on the carousel, once again, you can always go to the Bootstrap website for the documentation. It is under components. And as soon as my eyes adjust and once again, if if you don't want to go through all of that, you can always search carousel what works. It was right there. So how it works and then you'll see here that these are samples of where you can get a carousel. Alright? If you want a carousel with Bach buttons and forward buttons, well, here's the code that will show you what you need to replace using ellipsis, right? And this is one-to-one and that's important too. If you want more, you just add more slides, add more sections like this for each carousel item or image you want. So you see it's very, very flexible. So the example I copied kind of uses that exact example where I have, this one actually has buttons. This one has placeholder text so I can add captions. Here are my captions. And then each item, I have the ability to change the image. That is dear, sir, I know he's just using some SVGs from Monday incidents, which we can change eventually. Then we have the navigation buttons. We also have some sections where they have okay, div class and they call it marketing class. Here is marketing, which I'm sure is one of the classes that we had borrowed. There we go. Marketing content. Here is the class of marketing. So if we needed to adjust it, customize it to our needs, we could modify all of that if we wanted to. There are lots of placeholders and images so we can fill those in, of course, then you have the feature divider and we can add whatever it takes you want. So now that we've made that adjustment and I'm still doing a dotnet watch just in case you had stopped the dotnet watch since the last lesson, you could just start a dotnet watch. But when we jump over to preview our page, that's what we get. Alright? Now, a few adjustments of course, will be needed because here we see that we have a padding at the top which we don't want. We don't want that padding above our navbar. So I'm going to jump back over and I'm going to modify the CSS. So that's why I said we have to pay attention to the CSS and know what we're adding and modify. So I'm going to take all that padding top. And once I see it, That's all I know. It looks normal, alright? And then everything else looks good to me, right? So we can have a center aligned caption. We can overwrite aligned caption. We can have a left aligned caption. And of course, these are images that we can change. All. These are bodies of texts that we can change old. And we can put in our content as we need to place where I usually get some images is pixabay.com. It's an excellent source for some nice images once we don't use them commercially or give the artist credits or whoever image credit. So I can take some of these images. And what I'll do is I won't download them. I'll just solve these. I won't download them, but we do have the option to download one and show you how we put an image into our project. But I'll just embed the other two directly from the website so I can do free download and I'll download that tinny TPR 12 80 image. You can also reduce it. So let's go with a 12 80 by 853 for this one. Blackboard, no, I'm not a robot. Through the chicks, of course. Then download the file. All. Now what I like to do is drag the file from the browser and into Visual Studio code and nothing that's a very, very cool feature to take advantage of, right? So once that file is downloaded, I can drag it and then drop it inside of Visual Studio Code. And where I want it is inside of the dub dub real root folder. And by extension, I would want it in an images folder, so I just dragged it over. It's knowing dub, dub, dub roots. Alright. However, I don't want it sitting there, everything is organized. I want to stay organized. So I'm going to right-click dub, dub, dub root creates a new folder, I'll call it images. And then I can drag that image inside there. Then I would rename the image. So in my web course, always sure that it's best practice to rename the image as conveniently as possible. So Blackboard. Alright, that's the name of the image saw in my view. I can know modify. Let me zoom out a bit so I can navigate a bit faster. I can now modify the image that is being used in one of my carousel items listed the first car so item is using this SVG. I don't want that SVG. So I'm going to do a combination of looking at what it should look like. So here's what the carousel item image should look like in code. Alright? Once again, he's just using a bunch of placeholders in the examples, understandably so, but I'll use that and replace this SVG. And then for the image SRC, I'm going to put tilde there. So till the, that's the Spanish symbol. And just, just Inform you as to where I'm getting this information from. If I jump back over to my layout, you'll see here, this is all we reference a file that is in the lib folder in the dub, dub, dub roots, right, so live jQuery, jQuery min, here's, here's jQuery, here's this, here's the file. Alright. So if I wanted an image from the images folder and the same dub, dub, dub root, I'll have to say is tilde slash. And then we go on the, on the path, so slash images, slash. And then I'll say black board, dots, GP. Alright? And then I'll turn it the alternative, just see a blackboard image. Alright. Now, when I go back to my view, let me refresh. Alright, so there's our homepage. Know we have that blackboard right? Once if I wanted to change the headline know, so for the headline of the text here, example headline, School of Management system. Alright, so representative texts. So you see I'm just taking existing code, I'm modifying it to Hawaii, I need it to. And sometimes that's how we get our start until we get more and more creative and more and more comfortable. Best school management system based on ESP, dotnet, MVC, Alright, b.net, Core six, that's seven. Because what we're doing is reusable, Alright, As soon as I get my spilling on the management, alright, there we go. So no school management system, vesicle management system sign up today. This does nothing but I think it's nice to put it there in case you are building your product. So that is our first slide. So you can actually do the same steps with the other images if you want. When I said I wasn't going to download them, what I intended to do when I said it was copied the image link. So once I copy the image link, it's a direct link to the hosted image, so I don't have to copy it down. It's a CDN, so I could actually just embed it without downloading it. So if I go to the next carousel item and replace that SVG tag with that image tag. And then for the SRC, I'm going to use this CDN link. Alright? And that is what I placed there. Alright? And then this one is going to be geometry image. So when I go back and look, okay, here's our Blackboard and then here's our geometry image. And this one is kind of noisy. So you may want to gauge how it plays with the with the caption, right? And then children in India? Yes, copy image link. And we want some representation of the children who will be in this school, right? So that is the final modification that I'm making and I'm just butchering it a bit until I get my bearings. Right. So there we go. And just let that we have modified modified our homepage to look something like what we want. Alright. I'm also just going to remove the caption section from the geometry image. I don't think we need that caption. Takes that least. So I'm going to remove the two P tags are the just the H1 and the p tags. And I'll leave the button that says Learn More, right? And for the children, one, intelligent students. Alright? And from all over the world. All right. I'm just showing, I know we can browse gallery. Nice. So I think this is actually like the perfect starting template page for this kind of system. Alright. I need to be an intelligent student with that spelling. I apologize into lead chant. There we go. Alright, so I'll leave, I'll leave you to go ahead and customize the rest of these sections, right? And it's really just about looking at and paying attention to the code. Alright, so if you just scroll through and you look at it, Here's the marketing section. Here are the placeholders, SVG. You can replace those with your own images that you want in those, in those little circles. Here's the heading, Here's the text underneath the heading, and there's the View Details button, right? So based on the kind of product you're building, you can modify those sections would be more representative of what you need. You could also just remove that section. It could be that you don't want that section on the website. I know we already know how to add our images. So for those 500 by 500 placeholders here, the SVG tags once again that we can replace. Alright, so go ahead and explore and have some fun with that. 16. Adding an About Us page: All right guys, so in this lesson we're going to take a look at how we can create our own page. So right now we have home where I've privacy or what if we wanted an About Us page? How do we go about adding that? So let's jump back over to Visual Studio Code. And I'm going to start off with a controller. We have the home controller and we know the home controller allows us to navigate, to index and to privacy. And we have the third option button. All we need our own, not built in one, right? So I'm going to firstly create public action results just following the templates of the previous ones. And then I'm going to call it a boat. So that means I want a page called a boat. Alright, so the oxygen needs to see a boat. And then every action results method needs to return to view. I'd like to just do this. This is the skeleton that I do first. Before I start writing the magic. Garden said this is a simple pit, so there won't be any magic in this particular one. But now we have the view, sorry, no way I have the auction in the controller. Know. If I attempt to navigate there. Alright, and I see slash, home slash or boats, then you're going to get this kind of error, at least while you're testing. So it's going to say that it's an invalid operation exception. The view abode was not found and these were locations searched. It looked in view slash home for a file called a boat, does CSS HTML. It's also looked in view slash, shared slash about that. Cse is GMO. So in essence, that is why error doesn't necessarily have to be in the home folder. It can be shared because error can be found there. So whenever we say return view, it is automatically going to be looking in those locations for the view that we're returning for a file with the name of the view that we said we're going to return. So since it can't find it, it went went crazy. So let us know, go back and create that file. So I'm just going to right-click on home, right? I naught these nodes that these folders usually have a carrot and the files dawns. Alright, so that can get confusing, especially when you're dragging and dropping like when we dragged and dropped the Blackboard. But it does start to highlight the different blocks and sections of files. And you'll see those lines along the way. So be careful attention to those things. So I'll right-click and I'll say new file, and I'll put in the name of boat dot CSS HTML. Press Enter, and now I have my view file. Now it's an empty file, but let's say I wanted to take a cue from, okay, What are the first few things I need in the file? I can look at the templates of the files that preceded it. Right here I see that there's a view data section for the title, so I can add that at the top. Right. This allows me to set the title of the page that should appear on the view. Because remember on the layout, this is the title, right? So it's going to see whatever is in the view data at the time. Dash though name of the website, that is a title that the page gets on, Lord. So I can specify that this is the About Us page. Alright, then all I have to do is place the HTML. I want for this view, unlikely we've seen we don't need the entire HTML templates and everything, we just need the specific stuff. So I'm going to jump back over to our examples for Bootstrap websites. And I'm just going to choose a very simple example. I'm going to use this cover, right? So if I jump over to this cava template, I'm really just want this text. I just want the text that is there. I'm just going to say View Page Source. I'm not going to get into the whole taking all of the styles and so on. I'm really just interested in what's in this main section. Alright, so take and I'll paste it here. Alright. Then I can change the text so we are capable. Keep Pebble development company. Alright? And you could put you in whatever one paragraph spiel you wanted to see how both the company and then you can see contact us, contact for more info. Alright. I'm not necessarily focusing on all of the fancy takes them HTML that we can put in. I'm just showing you how we can piece together. A decent looking website for MVC application. So if we refresh there, we see our text right. Now. How do I get here? Right, apart from typing in home slash or both? How do I get to this page? Because I typed it in manually, but we can't expect our users know that we need to type button, we need to give them a way to get doubled. So it's just the same way they can get home and to privacy. Alright, so what we do is we modify the navigation section. So let's jump back over to our layout.css, HTML. And here are, are enough items, so we have item for home, I'll have enough item for privacy. So I need another nav item and I'm willing to put its in-between hormone privacy. Alright. This one, all I did was copy and paste. So I just highlighted one of the nav items, Open, LI, anchor tag, close ally, copy, and then paste. Alright, nothing special. By doing that, I'm retaining that yes, takes Dash lights consistency, so I'm not typing it from scratch on risking error, just copying and pasting and reusing. No, I didn't see that we'll go through what these SP attributes are. So these are not regular HTML attributes. These are razor tag helpers. Alright? So for the anchor tag, we have a helper That's allows us to specify an area. An area is a special, literally especially era and web application. We don't have any of that, at least not yet. So you don't have to worry about that. Alright? But we do have a controller. What is the controller that you would like to navigate to? So in regular HTML, you would have to read H ref is equal to and then try and figure out the slash, this folder slash that folder to get to the file you want. Fine. In a dynamic setting like this, dotnet Core has made it easy for us the figure without kind of navigation, right? Because it knows it's using controllers and views. We can actually specify that we want to go to this controller. We can see home because we're still using the home controller. Which action do you want? So when you go to, when you click home, the home anchor tag, it should go to the home controller and the index action. When you click on the privacy anchor tag, it should go to the home controller and privacy action. Remember that the action is the method that is defined here that should return the view. So if I want to go to the About page that I need to go to their home controller and the about action. So I can modify that in code and I'll use this one. So the action I'm going to is a bolt and the text I expect to see in the ischium is a bolt software making those modifications. When I reload the website, soon as I'm getting a 500 error. Oh, I realize that sometimes when you modify and it's rebuilding and you switch to the window, it will actually kind of Frisco until the day you can't switch while I'm rebuilding. Let its rebuild a little before you switch. Alright, just said yes, restart and know that it's restarted. I can go back and reload the website. There we go. I know I see my new URL, our menu link rather, when I click it, it will navigate to the home controller and the about action, which will return our about us page. Alright, so that's how easy it is to really configure your views and your navigation between your views and the different sections of your application. 17. Add To GitHub: All right guys, so we've hit another milestone and now we have a better understanding of how our views and the layout and everything comes together. We have added images, we modified our home view, we added new views. I didn't knew actions to our controller and we ended up with some new files and some modified files. So now we need to check in or commit rather to our source control management system, which is good. So just by way of visual cues, anything that is green has a UV set it to mean that it's untracked, meaning that it's a new file that doesn't know about. So every time you add a file, you get it in an untracked state and it's green. And then once the file existed since the last chicken and you have made modifications, then it will be orange or amber and show modified, right? So we can jump over to our source control tab where they're telling us the different changes. And from here we can actually specify if we want it to like ignore, we could undo the changes, we could add specific. Firstly, gitignore. Sometimes we want to do that if we have like configuration files that we don't want a chicken, right? We could add it to the gitignore. We could do like a stage, like if you wanted to commit some null, but not everything. We could say. Stage. Like I said, if, if you made changes but you don't want them anymore, you can just say discard changes. And you could even do a comparison. So you could say open changes and it will actually show you a side-by-side comparison of waterfowl was and what it is no, since you made your modifications. So these are tools that can help us to make sure that we're not checking in their own thing and that we are definitely on track with the changes that we hope that we made. Now, we can see added or manipulated website views and layout, right? So that is our chicken message. So anybody who comes along and sees our changes can get us synopsis of what happened with this commit. And we'll just do a commit and push. Alright, so now that we have this section out of the way, I'll see you in the next lesson. 18. Connect to Database with Azure Data Studio: All right guys, In this lesson we're going to be creating our database that we'll be using to as the backbone of our School of Management System. Know, Let's start off by opening up our Azure Data Studio. And I'm going to use the docker image for our Microsoft SQL Server that we installed from earlier activities. That's where we will be creating our database. So you can revisit that. Listen just to see how you would open up darker and launch that database. But I already have darker and I'm just going to walk you through a few things in case you stopped the container from that time. And you need to reacquaint yourself with hole to get to cranked up and running. Alright. So you can go ahead and open up your Docker desktop. I'm just going to use the desktop this time as opposed to the CLI. And we would underneath the Containers section be able to see all of the containers that we currently have. So you probably only have one. That's fine. I have several. Alright, but here's the one that we created earlier, which is the Microsoft SQL Server container. Right? Now, before I click run or start, I just wanted to point out that in case you forgot some of the settings that you put in there, you can actually go back, check all of the configurations. So you can actually look at the inspect. When you double-click it, you can go to Inspect. And then in environment you'll see the environment variables that we add passed in when we, when we set it up. So I actually genuinely forgot my password. Right? That's the posture that I had used. So I can just copy that and keep that in mind because I will need it when I'm connecting. And do remember that what the report number you put that support number that you're trying to connect to someone to start up this container. And I can watch the logs screen just to see that it is starting successfully and that there are no errors anywhere. That's good. Now, once it's in a running state, and if I jump back over, see here that it is green, so it's running and it's broadcasting on port 1,400. No, I can go ahead and connect to it using Azure Data Studio. So in Azure Data Studio, I can click this new connection. You might not have as many connections as I do. That's fine. But from here, I'm just going to see how Nixon type Microsoft SQL Server server is local host. And then when we're using visuals, sorry, when we're using SQL server, use a comma for the port, right? So localhost comma, then 1,400. Alright? The authentication type is SQL login. Username is SE, as we configured by default or as we know by default. And our password is the password that you used. And then once I do all of that and click Connect, it will warn me that it needs a trusted certificate so I can just enable trust cert server certificate. And once I do that, no, I am connected. So I have localhost coma 1,400 connected as SE. And I can now go ahead and manipulate all of the assets on that server. The cool thing about this, Your Data Studio is that it even allows you to categorize your connection. So you see here I can clean up some of my categories. I can just creates a new server group. And I'll say like Azure. And then I can drag all of my eyes, your connections, over into that group. Alright, so I have less noise and I can find what I want that'd be more easily. I can collapse it. And then I can create another one for local. Alright? And then I can put that local host there. I could even specify that one is darker versus this one is not doctors. So these are all my local instances. As you can see, I have several local instances and inadvertently disconnected from the darker. So I'm just going to put back in the past AND now remember parser this time, so I don't have to do it every time. And you'll see here that they're seeing should do encrypt the connection. I can say true or false. Trust the server certificate, this clinic. And I'm good to go again. So that is how we connect to our database using the Azure Data Studio. Now when we come back, we'll actually jump into creating the database. 19. Create Database: Alright, so let us jump into creating our database. So I'm going to open up a new query and this new query will be against or connection. We can always change connection by taking that and then choosing the other connection that we want. But that's fine. We'll just continue as it's now. You'll notice that this user interface is very similar to Visual Studio Codes interface. Alright, so a lot of keyboard shortcuts to work we can do control, a close control minus. We can dock the connections to decide to give ourselves more room. So it's a very familiar user interface and it's very clean and easy to use. Now we're going to be creating a database called school management DB. Alright? And this database is somewhat based off the database that was used in my SQL course. So you can check that out. If you're not very familiar with SQL and SQL Server, then you can check out that course. However, if you already have some database knowledge and you'll feel right at home. And I will explain as I go along just so you can keep track. So the first statement that we want to write is create database. And what this does is it allows us to specify the name of a database that we would wish to create. Alright, so we'll want to create a database called school management DB. Then we have to specify a goal. And then we have to use the database that we have just created right now. And writing a script, we can run each line. So I can highlight this and say Run, and then highlight this and say run. Because what's happening is that by the time it gets here, this doesn't exist, right? So until this is Ron, this doesn't exist. So we will see that red squiggly line depicting an error. But that's fine because we can just write the entire document and it will run from line one, line two, line three, then everything else. So we don't have to worry about that red squiggly line, right? No. Then we see create table. The first day of that I'm going to create a student's, alright. So create table students and it will open and close parentheses. And then in there we're going to specify some columns. So I'm going to say id INT. I always encourage that when you're creating a database, you always have a database generated primary key ID column. Alright? So here I am seeing id is integer, it's a primary key and it should be an identity column. Identity means it will automatically increment as it goes along. Then other things that the students will have, our first name, last name, date of birth. And I'm actually just going to plug these in. Alright, so I don't bore you with typing. You can pause and you can replicate those additional columns. First name, we're using n var char 50, and it's not allowed to be null, right? Same thing with last name, date of birth. We will see deet and we will allow it to be nose. I'm not going to specify a not null. So that means if I know goes in here, That's fine. Alright? Then the next table that we're going to have is lectures. For lectures, I'm just going to do the same kind of statement except we're just using firstName and lastName. Alright, so I could have actually just copied this space that it changed students to lectures and remove the beat. You'll see that they're very similar in structure. And then the final one that we want is one-four courses. So like I said, it's a school management system for a tiny school. They just want to be able to track who the students are. They want to track who the lectures are. And then they wanted to track what courses are being offered. What's the name of the course? What is the code for the course? And this snow is going to have a unique constraint. So that means no two courses should ever have the same chord. Alright? Arguably, this could also be unique for name, but business rules will drive these decisions. And then the number of credits that that course will have. Its a simple, very, very simple school management system. So now we have created our database script. I know we want to actually create the database, because if we go back over and look, databases is empty. So when we click Run, like I said, it's going to run through the entire script and create our database. So we get these visual cues that started the execution and then everything was completed successfully. So if I refresh databases, went to see my school management EB, and then I can drill down and see the tables that are there. Alright, so that's how easy it is to create a database using scripts. And the cool thing with scripts in case you're not so familiar with SQL and scripting works is that I can save this file and reuse it at a later date, right? So it's just a scripting file. It's just a text file that contains instructions on to as the hole to build a database, I can save it to my local file system. If I need this database again, I can either change the name here or once again, it goes through all of those scenarios in my SQL course. Now, I have the database created. My next objective is to actually get it connected to my application. So the database and it's running in darker equaled have easily been on another server, right? That doesn't really matter in the grand scheme of things. What matters though is that I need my application to see this database and be able to interact with it. So we'll be looking at how we can leverage a library called Entity Framework to accomplish that with our web application. 20. Scaffold Database with Entity Framework Core: All right guys, so we have created our database and all we need to connect to it through our application. And there are few things that we need to retrofitting or application in order to facilitate that. So it'll be using Entity Framework, which is Microsoft's built in our flagship or for database connectivity and manipulation. So ORM is short for object relational mapper. Get to Entity Framework into our project, we can go over to the CSS file. We could manually add them here, but we'll actually just use the dotnet CLI. And you can see what happens in this CSV file when I run these commands. So the command that I'm going to run, the me just increase and increase the realists be real estate and the display size. So the command that we're running here is dotnet add package. Alright? And what this will do is reach out to the package manager called New gets. You will reach out to new git repositories and get the package, the latest version of the package. If we don't specify, in this case, I'm not going to specify a version. And what I'm going to try and get is the package for Microsoft dot Entity Framework Core SQL Server. This package, we can just dive into dotnet add package Microsoft but Entity Framework, Core SQL Server. On this package, it has all of the connectors and all the code that we need in order to facilitate communicating with an SQL Server database. Entity framework is open source, it is cross-platform and it has support for different types of databases as well. So if you're using sequel light or Postgres or MySQL, there are libraries are extension on packages rather for Entity Framework Core for those particular databases. In this case, we are using SQL Server. So I'll just go ahead, put that in and press Enter and then give it a few seconds. And then he's going to go off and it's going to download that pocket from NuGet and they're in RCS bridge file, you see a new node appearing stating that we know have a package reference to the library that we just made reference tool, and the version is 7.0. Alright, Entity Framework Core seven is compatible with dotnet seeks. So even if you're using dotnet seeks, you can use version seven of Entity Framework Core. Now another package that I want to install before I move on would be designed. So I'll just press up to get the most recent Lira and command. And then I'm going to remove the SQL Server from the command and replace it with the word design. And then I press Enter. And then it's going to do the same thing, reach out, get the package, and then it's going to update our CSV file with that node. So here you'll see that it has a few more things to add outside of just the bucket reference, but that's fine. So now that we have Entity Framework in our project, we need to add what we call a connection string. So connection string is like an address, or it has a series of instructions that lets the application or how it can connect to the database. So that goes in our up settings.js, JSON file. Here. I'm just going to modify this, and this is just a regular JSON file, right? So it's the CMG syntax. We know it's a key value pair. Connection strings is a section. So you could actually just start typing connection strings and press Enter and it will fill it out for you. Let me do that again. Connection strings enter and it fills, it holds. Alright? Then inside of connection strings you might have multiple databases. So you can have as many key value pairs of connections strings as you need. This first connection string that I'm going to need for this application is one that connects to school management dB. So open and close quotation marks. And then in there I'm writing the name of the connection string, which is School of Management DB connection. Alright, then we have the values so colon and then open and close quotation marks. So here is where we actually put in the connection string. So our connection string is going to say server equals and then the address of the server, which in our case is localhost comma 1,400, because we are using our darker hosted database that we configured. However, this is just the address of the database. So if I was using my local host instance, I would say localhost. If I was using my SQL Express instance, I would say SQL Express, right? So if you are using SQL Express and not darker, then that's what that address would look like. Alright, so I'm using darker, once again, localhost 1,400. And then we specify the database. The database here, I think we called it school management. Eb can always go back and double-check on what you call it. So that's database. And notice that we're using semi-colons. And then we have to see a trusted on the score connection. So we have to state whether or not it's a trusted connection, which at this point I'm just going to say false, because the database is looking for a certain security requirements will be met and we can reserve that for more production settings than four developments sitting. So for now I'm just going to say that that is false. And then we have another setting that says multiple active results set. And that basically specifies if multiple connections are allowed simultaneously. Yes. And then the final one is encrypt equals false. Well, not finally, but the final security-related one is encrypt equals falls, especially in EF Core. What happens is that in the most recent version of EF Core, this is going to default to true, so you have to specifically state that it's false, or is this going to assume that's it's encrypted and then if it's not configured properly, then your connection won't go through. This connection will just set those two falls in our development environment. Then we need to specify the username and password. Now this part is optional. User ID and password are optional if you are using SQL Express or if you're using a locally installed instance of SQL Server, that means it's going to default to the Windows authentication on you don't have to specify a user ID and password. In the case where you have to use a user like you're using SQL Login, whether you configured it like that, or you're using Docker where there's no real option to do otherwise, then you're definitely going to have to specify the user ID. And then you're going to have to specify the password and I forgot my password. Let me just jump back over to darker and looked in my in my image. There we go. Keep on clicking the wrong place. So I'm borrowing that password value for my connection string because however I would connect to it, That's how the application will need to connect to it. Then this connection string is how we will actually connect to the database and pull in the database. So in this lesson, we're not only sitting up a connection string, but we're also going to be what will cause cough, folding the database into our application. We took what we call a database first approach, which means that we created a database and then we're going to connect the application to it. The alternative, it could be that we have that application and we use code, meaning we're writing code and classes and models. And then using that to inform the database as to how it should look. That's called Code First. Other courses where I show code for us this course I'm sure in database first, so that we can get a feel of how we can bring in an existing database because a lot of the times the database is already there and we need to either upgrade application or build an application for the database. We need to know a whole to look at an existing database and model it in our application. So I'm just going to do CLS. So we have a fresh terminal window here. You are destructions. And then let us write a new dotnet. Stephen. But before we do that, we actually need to install the EF toolset in our dotnet CLI. So I need to say dotnet new install, and then I'll just install it globally. So hyphen, hyphen global. And then the tool that I'm installing is called dotnet high F and E f. So once I do that, you can see I already have it installed. So my dotnet CLI already has that installed, but yours will probably go through the motions and actually pull in all of the supporting libraries for this tool. Once that is done, however, we can now proceed to our dotnet EF scaffolding operations. So we can say dotnet EF BB context. Alright? And then we say scaffold. A scaffold means I'm looking at what exists and then I went to model it in the application. And then to scuffled what I need is the connection string. So I'm going to copy this very connection string that we just put it in the app settings, that JSON file. And I'm going to paste it here. Alright, nice and simple, but we already wrote it. And hopefully it's already accurate right? After we have that, we're going to see which driver or which kind of database. So I have to specify the type of database through the library, the sea and Microsoft but Entity Framework, Core dot SQL Server. And don't be afraid to copy and paste because this is a lot of typing. So even for that, you could jump back over to USCS broach file, copy it, and then paste It's whatever makes you more efficient. Then I'm going to specify that I want this to be output to a directory called data. Alright, so I can see hyphen 0. And then state the name of the folder which is data. So once again, this is seeing dotnet EFL would like to scuffled at DB context. Wherever this database is, go for that database. That's what I want to build. That DB context off off. We're using an SQL server. And when you are ready to generate your files, upload them to a folder called data. I can press Enter. And then once I press Enter, we're either going to see something that looks nice or something that looks bad. A nice is always good. So here we see that we got an error because it failed to login with the user. So the responses that the login failed for this user, and I, you probably did not get that experience. But this is because I use the double quotation marks here. Let me change those to single quotation marks. Alright, notice, notice the difference. Because of my password choice, I have the dollar signs. So when I'm using double quotation marks, the dollar signs are being coded to show that they're not being seen as literal strings. When I use a single quotation marks, everything is in one color. So those are little nuggets that you figure out through trial and error. So let me press Enter and try that again. This time. Okay. We got a little warning and it says the potential to protect sensitive inflammation in your connection string, you should move it out of the source code. Okay? Now if I go over to my Explorer, I can scroll up and see a new folder here called data. And when I expand it, I'll see class files that correspond with my table names. And I will see this file called a DB context file. Now, in this DB contexts, We are basically modeling or database. So this DB context is that the embodiment of our database. In previous versions prior to dotnet Core and EF Core, we would be able to generate that diagram, something looking like an ERD entity relationship diagram that would actually show these tables as they are in the database over in the absence of the diagram. And even behind the diagram was a file called a DB context file that looks something like this. So in this DB context file, it is outlining the different parts of the configuration that is needed. We see here where it's initialized in dB sets. So each dB sit line represents the table. So the table's name is students, but the DB set is based off the models. Students took all the properties from the table called students and generated a class that corresponds with that. So the properties from the database or ID, first name, last name, and date of birth. They all correspond with what's in the database definition. Alright, so this diagram represents the code version of our database. Now, one thing to note is that we'll see the same error or warning that we got in the CLI right above the connection string. Now, this is the same coordination and stream that we used here in the command, as well as we already have it in the upsetting. I really don't want to encode. So what I'm going to do is run another command to generate the CLI. Generated this diagram or this context rather, let me just do a CLS. I went to just press up and retrieve the most recently we were on the one snow. All things to note here. One, I already have files. If I tried to run this command, again, I'm going to get an error because it's going to see the files that I'm trying to generate already exist. Now, this can be a problem when you want to actually like bringing changes, so the database change, then you want the code to reflect that you'll need to run this command again. So now they're saying that we need to use the force flag to overwrite the files. So that means in the SAM command, I need to add hyphen, right? Or hyphen, hyphen force. This means whatever, even if it's there already, I want an override. The next thing that we want to put in is a command that tells you not to include this on configuration or on configuring section. We don't need that sexual with the connection string. So I can see hyphen, hyphen, hyphen configuring, know configuring, right? When I press Enter, I get an error. And that's because this is more on configuring and I apologize, it's not on configuring. Let's try that again. So no on configuring and then it's building, and then it's done. And if we go back to our contexts values, see that we no longer have that on configuring method. Alright, so we have on model creating what we don't have on configuring. We don't need that part. So that is how when we make changes to our database, we'll have to run that command. It will go and just regenerate all the files for us each time. Alright? Now the final thing to make sure that our application knows about the database because yes, the files are there, but there's still no real knowledge of the actual database and application. We have to go to our program.cs And then we have to do what we call registration or dependency injection or distribution. So we need to register that this database exists in the application so that we can use Entity Framework and access it. So first off, I'm going to say var con is equal to. And then I'm going to go into our configuration file. So I can see builder dogs configuration, configuration at the time the application or disability gets initialized. It will look for all app settings and all of any other setting files and just roll them into this one object, build it up configuration. And then it has a method that says get connection string, nice and clean. And then all we have to do is know the name of the connection string. So if you forgot the name, that's fine. Jump over, grabbed the name, copy, jump back over and paste. So now we have the connection string. We need to actually add the DB context. So the startup, let's say a builder dot services. And it will say dot AD B2B context. And we'll put it into DB context. And I'm just going to go over copy of the name and paste it here. So we're adding that DB context, right? Then we have to pass in the options. So q dots, It's just a Lambda expression. If you're not familiar with lambda expressions, are going to be doing a lot of doors. But this is a lambda expression. Nowhere we say use SQL Server. And here's the connection string. Alright, now I'm missing some references. Just click on that and say Control ducts. That will allow me to add this using statement. There we go. And then here onshore data again, and it allows me to add this using statement. And no, there are no arrows. So essentially we're seeing when the application starts up, grabbed me the connection string. Then use the connection string to initialize an actual connection to the database that this DB context is a model off. And here is that connection string that you should use. Alright, now this is what we call the options section. So this is what gets passed down into our DB context when we see options. Alright? So I'm just showing you all of the little moving parts so you can appreciate how it all ties together. So now we have actually created a connection between our application and SQL Server. So anytime we do a dotnet run from no, it will actually establish that connection when the application is starting up. Now, the next thing that we'll want to do is to start creating functionality around interacting with the database. Because we have here what we'll call models of the database, right? What if we wanted to start creating courses, creating lectures, creating students? So we need controllers, we need views, we need functionality in-between to hand off that. So we'll look at how we can get started with that in the next lesson. 21. Scaffolding Views and Controllers - Part 1: In this lesson, we're going to scaffold our controller and view the word scuffled. We've used it before, and it basically means that we're generating code based on something, right? So we were able to scaffold or DB context by generating DB context and the class files, model files based on our database structure. In this situation, we're going to be scaffolding controllers and views based on one of these models. Alright, so remember we have model view controller. Now we have the model. So the data folder, everything in it represents the models. So these class files are oral models, lecture course, and students, those are our models. Those represent the data. Now we need the views that allow us to view the data and interact with the data, the user interface related to the model. And we need the controller to control traffic and requests and any logic related to manipulating the data and showing the view. Now, to create those, we do have the option of manually creating a controller, manually creating a view, and wiring those up. And I think that at this point, especially if you're a beginner, it's better to show the generated code and explain that to you. And then you will better appreciate what it takes to create it from scratch, right? So dotnet CLI allows us to scaffold all the code that would allow us to do basic crud operations, crud, create, read, update, delete, alright. So views and controllers and functionality that allow us to create records, read records, update records, or delete records based on any of these models and what it represents in the database. So enough of my monologue, let us get into it. The first thing that we want to do is to install another tool, which is the ASP NET code generator. So I'm going to collapse the side panel and make my CLI a bit bigger. And we'll also do CLS. Get rid of all of the noise. There we go. Alright, so now we need to run the command that says dotnet tool. You've seen that before. Install. And I'll see you can say hyphen, hyphen global like we did last time or hyphen g. Alright. Then were installed in the dotnet.net hyphen ASP, NET hyphen code generator tool. Alright, so let us press Enter and let that run. Okay, well, it would run for you what? I already have it installed, alright, so because our installed, I'm getting this error. However, you would actually have a very similar experience as to when we installed the dotnet EF2. Alright. Now that we have that installed, we need to run a command that allows us to scaffold the controller based on the model. And we want to scaffold the views that help us to accomplish crowd operations. Before we do that though, we do need a few more packages, right? So already have the Entity Framework SQL Server. We already have Entity Framework. Design. What we need know dotnet add package. And we want the Microsoft Visual Studio dot web dot co-generation that design. So that one is a multiple. Hit pause and make sure that you write it back as you see it on the screen, right? So dotnet add package, Microsoft Visual Studio dot web dot co-generation that designed. This package actually supports that cogeneration ambition that we, once that has run and it has been successful, I'll just do CLS. And then what we can do after we have included that is go ahead and do our scaffold. If you're using Mac OS X or Mac OS or Linux, you'll need to run this command where you see export path equals dollar sign home, Slashdot, net, dotnet. Right. There we go. Dot.net or full stop.net slash tools and then colon dollar sign path. Alright. So basically for OS, Mac OS, and Linux, where base guy just sitting that the path here, and this should be dollar sign home, not hashtag home. I apologize. So this is just saying that the home of the project file or the program.cs file is at the root, right? So the dotnet tools should point to the root of the project. So if you're using Mac OS or Linux, you have to run that command first. After you've run that command, however, this next part is for everybody who will say dotnet is B net dash code generation, four generation. There we go. Controller. Right? So now we're seeing dotnet and we know this is the name of the tool because we just installed it. And we want to create a controller. Then we can put in things like the name. So I can say hyphen name. And let us start off with the controller for the courses. We want to create a controller for our course operations. So I'll see hyphen name is con, is course, course is right. Of course his controller, because that's the naming convention. Then we can specify the model. So I can say dash m. And which model are we using? Well, the model we're using is course, alright? So we see a dash m, and then we see course. Alright? Then we need to specify the data context or data context. And I don't want to write it all out manually, so I'm just going to jump over there, copy the name, and paste it in the command line. There we go. Then we have some other things. So this will actually generate that controller, but I want it to go into the specific folder of the control alerts, right? So I'm just going to see hyphen, hyphen relative folder path is equal to controllers. Well, there's no equal sign. I apologize, let me not say equal. Then we can specify things that we want to use the default layout. And if we want to reference script libraries, so the combination of all these things will generate the controller by that name using this model and this data context. And it will open the controllers to this folder. But then we're seeing use default layout, meaning that the views that get generated alongside a controller will take on that option where we just wanted to use the default layout file. Alright, We could also have other options. So these other options you'll usually see in the user interface when you're using Visual Studio. So here we can see reference script libraries. Let me collapse of it. Reference script libraries and then we can say like false. All right, those are other options that we can look at. If you want to see all of your options, of course, you can always say dotnet, ASP, NET, hyphen, co-generation dash H, or Control H, and see all of your options. However, let us go ahead with this. I'm going to press Enter. Oh my, I apologize. I wrote that command completely incorrectly. That should not be co-generation, that should be called generator. Alright, That's cart that. So let me do a CLS first and read the command again from scratch. So ASP NET code generator. There we go. So let's press Enter and let it run again. Alright, and then within a few seconds, it would have built our project and generated some code for us. So let us see what it did. It did the build, then it said finding the generator controller and it's running the generator controller. So that's this. Alright. And then it is seeing that it will figure out the Entity Framework Meta data for the DB context and model called course. Then it's added the controller to the controller slash that directory slash filename. Alright, and then it added the views. So look here, it's added for views, index, delete, details, edit and create. And then it told us the runtime was 18 s. Now, if we look in our file structure, sure enough, we do see a new controller. This a bit smaller. All right, So we do see that we have a new controller called course. Of course is controller. And we see here that it's injecting the DB context. And I'm not going to get into too much detail now I'm going to revert and explain everything, but I just want us to take a glance at what we got. We've got our index page, we've got details or action or other. There's lots of details option. We've got our create action to create actions actually. So we're going to explore why we have to, we have the edit. We have two edits actually. Once again, we have delete and we have another Delete. Alright? And then if we look in our views folder, we'll see that we have a new folder called courses. So remember that once you have that controller, you need that matching views folder. And if we expand it, we are going to see view files that match each one of the actions that we got in our controller. So before we start exploring the code, let's check and see if this runs. So I'm going to do a dotnet run. Then when the page loads, we're going to just navigate manually. We're going to fix all of that later on, but I can just say slash courses. And then remember that it's always going to look for the index action first. So when I do that and press Enter, it loads our listing page. So here we would see all of the courses in the system. We can also proceed to create new. So if I click Create new, I get to a form. Let me go ahead and add a new course. Let us see open source development. Alright. The course code is CS101, for instance. And this is a three-credit course and lets us create and then look at that. So all of this is not dynamic. I didn't write any of this code 12, you know that anything that gets displayed on an HTML page either had to be statically written or it is being loaded dynamically. So this is coming directly from the database right now, right? If we go to edit, we'll see that we get bought the inflammation. If I said okay, this is more like a two credit course and a three-credit course. I can save. There it is edited. I can look at the details of it. And that's basically what we mean by a crowd, right? So this is reading it. We can't details is reading it. We can edit and we can also delete. So if I say delete, delete, there we go. So right there, we just generated crowd functionality with a single command in r.net CLI. So when we come back, we're going to break down the code and look at exactly what we got out of this scaffolding exercise. 22. Understand Scaffolded Controller: Welcome back guys. In this lesson, we're going to be exploring our courses controller, and we want to just take our time and understand what the code is doing. So I've collapsed my terminal and will be collapsing and uncollapsed in the Explorer as we explore the code, right? So you can go ahead and open the Courses Controller. Then what you'll see after we get through the whole using block and the namespace and the public class course controller, which it's inheriting from the base class of controller, which is pretty standard. We're going to see that we have this injection of the dependency on the database. Now, let me explain what this means when I say injection. Usually when you have a class and you want an object of the class, you'd actually see something like and I'll just type it down here. You would say datatype object's name is equal to a new instance of that data type. Then know that you have the object, you can start using it. However, this can cause problems based on the nature of it, especially for something like a database connection. Because every time you do new, actually tightly coupling the class and the object, right? So no, I have tightly coupled My Courses Controller to the database context. If I change that needs to be It's contexts like this. For instance, it's giving me an error because now I need to provide certain parameters and how to be responsible for preventing those parameters every single time I use that object, invoke an object of that type. So that's not really sustainable and maintainable in the long run. So the concept of dependency injection means that I can have the class. I can modify this class as many times as I need to mean DB contexts. It can evolve, it may need more parameters or whatever. But as much as it evolves, I don't have to modify every single place that I'm making reference to it. I can simply inject it into my code. And in the background, the application will do whatever it needs to do. So that is what we'll call dependency injection. We had to set up the dependency injection or set up the DB context and make it ready for dependency injection when we created our DB context earlier. So if we go over to program.cs, remember that we put in this line here and it said add services to the container. The container here, retirement the IOC container or inversion of control, right? So that whole concept of inversion of control and dependency injection, those two go hand in hand. It means that we are setting up the application to be able to inject these what we'll call dependencies anywhere they are. So as much as we may modify the actual class here, when it's injected as a dependency. The recipient are receiving class, like in this case courses control doesn't have to worry about feeding it with all of its dependencies. Because the IOC container is taking care of all of that. Alright, it's a pretty cool concept and it leads to much cleaner code, much more efficient maintainability in the long run. So that fully asp.net Core has that IoC container built-in. In the past, you don't need a third party libraries. And some persons still resort to third-party libraries, but it's not absolutely necessary these days when using dotnet Core. So after we have injected or dependency, which in this case is RDB contexts, and it is a dependency because we need the DB context in order to talk to the database or DB context or the object of type db context in this case, represents the connection to the database. So when we click on the courses page and it loads the index it does connect to the database, get the data and display. So that brings us to our next part of it, which is the action. Now what is happening in the action? First of all, we're checking to see if the course is Table, quote unquote actually exists in the database, right? So once this actually exists in the database, then we're going to return the view with the data. This is written in one line. I mean it's a ternary operator. So if it's across multiple lines, it's really a one-line statement. So that might lead to some confusion. Of course, this was generated for us. But pretty much what this is doing is seeing. And I'll just read this in a comment block and try to write it in pseudocode. So it makes sense. If The database table exists, right? So that's what this first line does. If that exists, then we want to return the view. Or actually let me see you that want to run a query. So we say var records in a table would be equal to the query. So in this case our query is a weight contexts, dots, courses, and that tool list is sink. So we're using a dialect of C-sharp called link, right? Link here is what EF Core uses. There's the library to go to the database, fetch the records based on the query that it can generate from our statement here says basically I just converting this into an SQL statement that says select star from this table. However, we don't need to write it in the code because we have link the dialect to translate it for us. So here we're basically seeing that gets me the records in the table. I'll wait a connection to the database, get me the tables, and get everything in the form of a list. Now, some keywords you'll notice are async. I'll wait and task. When we're doing asynchronous programming, it makes for a more efficient queries and more efficient operations. And syntactically, we just need to make sure we include these statements as we go along. I'll explain those as they pop up. But I don't want to major in that right now. All right. So we're getting the records from the table and then know that we have the records. We're going to return the view you've seen that name before, and where it turned into view with the data coming from the database. So that's what these two lines are doing, pretty much. Alright? If table exists, that's this part. Alright? And then I turn no operator, the question mark. And then what we should do, then we basically say return the view with that data. However, all I did up here, we'll split that into two lines, get the data then returned to view. So it's pretty much the same thing, right? I think this format might read a bit better in the long run, but if you appreciate it here, then that's fine. Then if that is not going to evaluate to true, then we're going to do another return statement where we return this problem. Seeing that something is off with the database pretty much right? Problem is just a special object that allows us to see that there was an error. Anytime there's an error, we can return problem and the application will display that accordingly. So here it's saying that the entity sit in the school management DB context was not set properly. It's not it doesn't exist or, you know, something is wrong, it's not finding it. So that is what this one line. So let me I can leave that, that comment. Maybe it will assist you to dissect this one line of code better. So that's sums up what happens when we loaded our index page. Alright, when we're looking at the views, you'll see how we bind the data from the backend to the front end. But this is what I meant by the magic that the controller does before it turns off the View. Request gaming went to the database, got our data, then we returned the view, which the data. Now, if we go with the details, there are few more things happening inside of details. When we try to load the details, you'll see that it's trying to, or it's expecting to see an id value. So this is what the roots will look like. Courses slash details slash and the id value. And that ID value goes into a parameter variable that we're calling id, right? The first thing we do is make sure that that ID is not null. So it says if the ID is null or the database table runs into the same problem that we had up here. It doesn't exist, then we return. Not fun, not for them is the same thing as a fluorophore. So that's why when you go on websites and you click on certain things, you may see a four or four because it cannot find it. Well, here's a live example of that. Then if that, if neither one of these obtains, then we'll go to the course fetching section where we see database. Give me the table courses, and then get me the first record that matches the ID that I've provided. So this is what we'll call a lambda expression. We've seen this before, we've done that before. Alright, but in writing queries, they come in handy when we want to specify certain conditions. So here we're seeing, give me the first star default record where, and then we start to lambda expression with that token and then this arrow. And then we say Tolkien dot column that we're interested in comparing whether it's going to be equal, equal, less than, greater than, greater than equal, etcetera, etcetera. Whatever the comparison type, the value that we wish. Alright, No, this is saying first our default because first means it will get the first record that matches the condition. So even if it sees multiple, it will return the first one. Or default means that if you didn't see anything returned null. Alright? So that's why afterwards it's going to say if the course was null, then return not found. Because it could be that I asked for it, of course with the ID 50. When there is no course with the idea of 50. So if after this he couldn't find it, this would be null. And if it's known that we see not found. Once it passes all of that, however, we're going to return the view with the data, with the object, with the model or an object off the model type. So that's what's happening inside of details. And the way it's written, it's a bit more straightforward than the one liner here. I don't need to write any annotations here. Then we go into Create and you'll see that creates clumsy in, up here. Alright, so we have the Create, get, our F creates a post and GET operation is usually what we use to retrieve inflammation. So here it's just going to return to view because when we click Create, it's just going to return the view which is the form that allows us to create. However, when we click submit on the form, it is best practice to submit data with a post request. And that's why we have the post create. So we have the get created and we have the post create. The postscript gets an annotation here that says HTTP post. It also does our validation of an anti forgery token to make sure that we don't or we limit the number of submissions that will be coming in in case our body strength to spam was or anything. Each time data comes in, at most have this token, which is something that is known only by the server. So the server knows how to validate this token that's coming in from the form. If we cannot validate it, then it will reject that tempts. Alright? Then in the parameter list we see here that we're doing a bind. The bind here basically says, I am interested in fields with these names that might have been submitted in this object. Alright, you can extend this list. Alright? If chorus got a new column and we wanted to cater for it, we could extend that list of accordingly, accordingly. And we just add comma, the next field name. We could also create a view model, but we won't get into that at this point. But you can read and say to protect from over posting attacks, you can specify the properties so you can read more about what is happening in this parameter. But pretty much we're just saying that whatever data is submitted, we're all interested in the data with these with these names. So somebody tried to send more data than was needed for this particular form, then those additional fields would be rejected automatically because they don't meet these value conditions. Alright. Then we move on to see if models state is valid. Model state dot is valid. Pretty much. Validation is based on our own validation rules which we can create later on. And the validation rules that C-sharp is inferring based on the datatypes in use. So here we have string. String is not nullable. So it would basically say that, Hey, I'm expecting a value here, but in this one is nullable. So if I receive an object of type course, and this turns out to be null for whatever reason. And you'll see here that there's kind of like an old chicken or contingency to make sure it always has a value. But let's just see. He came in with a value that is null, then that validation would automatically see that it is not valid because I'm expecting a string and I'm getting null, it's not valid. What happens when it is not valid? It is going to skip over this because this evaluated to false. And it's just going to return the view with the object that was submitted. Alright. So that's why when you submit a form and there's an error on it, yeah. Actually, it actually reloads the form with the data that you had just submitted. So this is all that's happening here. However, if it is valid, then we go ahead and say database, we're adding this record. I know you want to save the chain, so this is what actually commits it to the database. And then we redirect to action with the name index. So Read Derek, the auction is why it will jump back up to the listing page and then show you a newly created a record that's knowing the database. So that's all that's happening. Instead of the Creates. If we go down to the editor, will see that it's kind of, well, it's very similar to the details page because it's receiving an id value is checking to make sure it's a valid ID value. It goes off to find the course, even though this query is written a bit differently, but it's doing the same thing. Find the course by ID. And then if it is null, we show for it. If it's not null, we showed the page, the edit page is actually going to have a form similar to the Create page, but this time it's actually getting the data. So that's why when we click Edit, we actually see the data on the same form that a decree it looks like, but we actually get the data. Then when we submit, you notice it also has opposed. It does the same validation of the anti forgery token. We take and validate the ID as well as screen the fields that are coming in. Alright, so same concept as the post that we just looked at for the Create. Then we go on to do a few more validations where we say, okay, make sure that the ID that is coming in here in the link matches the id coming in from the form. Otherwise, return an error. Then we say if the model state is valid, we will try to update the record and save the changes. Now there are cases where I might have taken the record to update it and you might have done the same. And then we tried to submit, or by the time you are submitting, I already submitted it. So you are editing older version. So that will cause what we'll call a DB concurrency exception. Alright? And if that happens, then it says if the course exists or if of course doesn't exist, then return not phone. Otherwise, just throw the exception because we're not quite sure how to handle it, right. But this would be rare, but it does happen. So it's good to have that contingency in place. Then after all of that, we read Erich to the index page, just like with the create. The end of that, we also return the view with the data if it was not valid. Alright, so you'll start seeing that the code looks very similar because this is code that way. This is called reassign the details and everything that happens here are a lot of what happens here is similar to what happens with a Create. Alright, then we move on to the delete. So we're passing in an ID for the delete. He's going to do the same thing that the details and the edit just did where it's checking the id is finding the course checking if it's null, if it isn't all, we're going to get a page that shows us the details of the course. Then there was a delete button. If you remember from our test, just know that when we click that, it's going to submit a post. We know that already, right? And this time it's just saying that it's using a different action name, right? So the method is different, but if we wanted it to navigate to a particular name, we can specify this annotation and say that you identify as delete, even though you're called delete confirmed. Alright, we still validate the anti forgery token. Then this time where we're checking if the DB exists, that's fine. We go and get the course by ID. And then if we could find the course, then we tried to remove it from the database. Once it's removed, we save changes. And then once again, we read Erich to index. So that's why after every time we complete an operation, it always goes back to the listing page because each operation, one successful, we'll say redirect to the index page. The final method inside of this controller just checks if the course exists. And this was really just used inside of the edit section, right? Where we're seeing if it doesn't exist then through not found. So this is just another way of seeing if it exists where in the database we have the any method. So contexts dot table, dot any. And then we can say what is the condition that we're checking? So is there any record that meets this condition, which in this case is seeing where the ID matches the id value that we're passing in. And then we get the, either the value which would be true as far as our default, which would be null. That's pretty much what happens in our controller. Now that was a quick and dirty tour. We're not going to modify it. We're going to leave the boilerplate code. And later on we're going to start writing our own custom logic. But for now, it's good to understand the boilerplate code and know what it's doing. When we come back, we're going to take a look at the matching views for each of these actions and appreciate how the binding happens. 23. Understand Scaffolded Views: All right guys, so let us progress and start looking at our views. So I'm going to close all of the tubs that are not absolutely necessary to this activity. And then let us look in the views folder and then look for the course's folder. And then let's start off with the index. So I'll do it in the order that we would probably actually visit the pages. And of course, index view is the first one that comes up because the index action is the first action that gets called. And if you recall, the index action is actually going to go and query the database and then return that data to the view. So when it returns that data to our view index, this is where all the binding happens. So let's go from line one. Line one stipulates the model. Alright? So at sine model is just a keyword that you'll see at the top of views that are data bond, right? And then the data type is specified. So here it's saying that the datatype that this view is boned tool is an innumerable which is a collection type, which makes sense since we're passing over a list of objects. So this is our collection, right? Of course, objects. So that is what it is expecting. So now that it knows that it should bind to this model, we can now access the different parts. We have the regular view data section. We've seen that before. We have an H1 tag here that says index. We have a p tag hosing an anchor tag that allows us to navigate to the create action, right? So notice here that it is only action. Earlier when we were looking at the little page you will see in ASP controller is equal to and you would have seen action and controller in peers. However, when we don't specify the controller, this will automatically assume that it's looking for the auction in the same controller that the current view is coming from. So the current view index is coming from the course's controller. So it will assume that it should go to the create action in the same controller. Alright, then we go on to see a table. So remember that we saw the list of records. And then in this table we have some helper methods. And this one is called display name for. Alright, so this is an HTML extension method that basically will look at the name of the property in the model class, right? So you notice that it's using a lambda expression. And it seemed model that knee, model dot code, model dot credits. And it knows about these because of the model that was specified. So if I change this model type just to be provocative for a bit, if I change it to student, then notice that this starts to light up because none of these properties belongs to this model datatype. So it's very, very sensitive, It's very strongly typed and very sensitive to the datatype they're using here versus the properties that you are accessing. I revert. You'll see that the lights go away. What we're doing here is we're specifying for the table. The header. First row should have table header columns that specify a name called and credits. Then we have a blank th, and we'll see why that one is blank. Then we'll go down to the body. So that's the head. Nowhere at the body of the table. For the body, we're using a foreach loop. And remember that anytime we want C-Sharp in the HTML, we just need an at sign and then we can write our C-Sharp code. So here we're seeing for each item in model. So model here is the actual object that takes on the data type that is specified up here. Notice the difference, this one is at sine model. This one is capital M model. Alright? So here I'm saying, get me each item in this model or in this object that is of type collection, of course objects. Now we know that loop. So the best way to go through collections, right? So go through the collection and for each one that you find, creates a new TR or table row, and create a column that displays the name, a column that displays the code, or column that displays the credits. In reality, I could actually just say at sign item dot credits, right? So I really don't even need to say display for what these helper methods actually help us with is the way displays, because sometimes you want a special display for like a checkbox. If it's a Boolean, then this will generate a checkbox. If we type it manually, then it would actually print out the word true, right? So that's why we would want to use this sometimes. When we wanted to actually dynamically display a control that is appropriate to the data type of the property. So I'm just showing you the options, right? So for these string and numeric values, we probably don't need special considerations. We could actually just say, I'd say item dot model manually. But then for Boolean and some other ones, you'd probably want to allow them to generate that for you. Then we have the td that matches the MTT H, and that one has the actions. So we have an option button for edit of an action button for details of an action button for delete. I notice all of them will wrote to the appropriate actions. Alright, but they're also passing in, that is P dash root dash ID value, which is item dot id. So what's the relevance of that? Remember that in the controller for, Let's look at the edit method. If we look at the edit method, the EDI get, it's expecting that ID. So that means whatever link is going to be calling this edit method needs to pass in that id. So that is why we have to say SP dutch root dash ID. Because once again, it's an ID. If they said puppy, then we would have to see ASP dash, dash puppy. That's just how it works. So the binding will happen automatically. And then the value that we're passing over is the id value from the item that is being processed in that particular role. Alright? And the same happens for details and delete. And that's it for the index page. Now let's look at the Create page because it's empty. So we want to create a record. That's probably the first thing we want to do. Now here we have a form. And it's a very similar concept where no, it's doing a model, but notice that we're specifying our model up top. But in the controller we didn't actually give it any data, right? All we did was returned view with no data. So why are we specifying a model on this page? Well, because it's a forum where specifying what type of objects we want to form to fill my specify a model up here, we can use that to set the tone or set the context for the rest of the form. So we start off with the skipping over the standard understandable parts and going right onto the forum tab. The form here is going to return ASB action equal creates, equals grades. So that means once the form is submitted, it will try to go to the create and by default it will do a post submission, right? Of course you'd usually see something like method equals post. Alright? But then that's implied. So we don't need to say that. And it knows that when it's submitted it will go to the Create. And we already saw that we have to create the get, and then we have the post. Alright? So after it has done that, after we declared a form rather, there's a section here that says, should we show the summary, the validation summary that comes in handy when this is false, if the validation fails and we return the view with the data, this section will actually print out what fields were missing, what data, right? So it comes in handy. Let's look at some of the control. So this is a standard bootstrap form. If you wanted to see more about Bootstrap forms, you can always check the documentation and look at how they recommend that you lay out your forms. So the key parts here, we have the label and notice that this is ASP for name. What's his name? Name is coming from model. So this is ASP or the label for the name property from the model that was specified, which is course similarity for the inputs we have the ASP for Nim, which means that when whatever value you put in here, it's automatically going to be bound to the name property for the object. Of course, when we submit, then that name property comes over here and we can access it through our objects. So that's everything flows, right? I'm pretty much that is the case for all of the other properties. We have the input bone to code, we have the inputs bone, two credits. Alright. Now this also will generate the best type of control, HTML control for the datatype. So notice that we're not specifying the input type or anything like that. We're just seeing input and ESP for the field. Alright, so if we have a Boolean, then it would automatically generates a checkbox. That's how powerful these, these HTML helpers are when we're dealing with Ariza pages. Alright? Then we have our submit button. Once that is clicked, once again, it will fire off a submission to or ASP actually create. And we know what happens after that. So once it does that, if it's valid and everything, then we reload the index page. Now, while on the next page with me I've clicked details. So let's see the details page. So remember that's in the controller. Details is going to take an ID. Alright. It's going to go and fetch the record and then return the view with that data. Or details page needs to know one, what is the data type that is expecting. Then it will do the same kind of display, name and display for each of the properties. So that's why on the details page you'll see the word name and then the value that name had the word cord, and then the value that was put into core, the word credits, and the value that was put into credits. So that's all details is doing. Then at the end of that, we can choose to go to the edit page where it will once again specify the route ID value and pass in the model dot ID. Or we can go back to the index and the exterior doses back to list. Now, if we choose the Edit, then what are we met with? Were met with form that is actually identical to our Create form, right? It's the same form really and truly, there are just a few differences. So the model is going to be the same. Once again, controller. When we tried to edit, it's going to, let me find that quickly. When we tried to edit, it's going to go and fetch the record and then return the view with that record. So that's why when the edit page loads, we have data in the form. You'll also notice that we have an input here at the top of the form for the ID and it's a hidden. Why is that? Well, we need to know the id when the form is submitted because there are checks in the post that makes sure that the ID that is submitted or the id that comes in, the parameter here matches the id that was submitted on the form, right? So here's the binding for ID and course that id. Alright, so it matches that. Generally speaking, you do need the ID when you're able to do an update. Because when the Entity Framework actually carries all the update, this object needs to have an id value so that it knows that it's supposed to do an update and not an insert. Alright, for an insert, we really don't need the ID, so it's safe to actually remove this binding because we shouldn't allow somebody to be able to send over an ID when they are creating a record. So I could actually delete that. All right, however, for the edits, it is absolutely necessary because the database needs to know that ID so it can meet that update when we're receiving the change. Alright, well inside of that, everything else is pretty much the same as what we saw with the create. So of course the action is different because it's going to go to the Edit Post. And because of the binding and the fact that data was sent over, the input tags will automatically have the data that corresponds with the object that was sent over during the get operation. Alright? But outside of that, it's pretty much the same form as we saw for the Create. Then we go on to the Delete. Now, the delete pages, fairly simple. We know what those already. It's just going to go and try and find the record just like what happened with the edits and the details. And then it's going to return the view with the record. No. Well, we're under delete pages asking Are you sure? And then it's really just showing the details of the record that we're able to delete. So it's really almost identical to the detailed speech. However, there is a tiny formed on here that allows us to one, bind the ID of the record that is about to be deleted. And then to we can click Delete to submit the form, or we can buckled up tilt and go back to the list. So if we choose to submit what happens this Heidi valley goes over with the data payload to our delete post method. So when we go down to the delete post method, it is receiving that ID. And then it's carrying out that deletion operation as expected, and then it returns to the index. And that's pretty much all our views do. And we saw, we did a full crud tests. We see that everything is wired up, everything works, all the navigations work between the pages and that's all very important. However, we need the navigation tool, at least the index page. Someone's a jumbo with the layout and we've done this before. So I'm just going to do that again. We had introduced the about page. I'm just going to copy all of that paste. And then this time the ASP control is going to be horses. The ASB action is index. And then the texts that we're going to see here would be courses. Alright, so now we have a new item that when clicked will go to the index action of our courses page. Alright, so you can make that modification. Go ahead and hit dotnet run and just the thoughts and let me see. For an aldol, we validated that everything works and we see how everything is wired up. So when we come back, we're going to go ahead and repeat the scaffolding activities for our other models in our database. 24. Scaffolding Views and Controllers - Part 2: All right guys, know that we see how easy it is to actually generate crud functionality to support our database tables. Let us go ahead and do it for the others, right? So we already did course. Let us do the same thing. I'm just going to do Control Shift and apostrophe to launch the terminal. I'm going to get rid of certain things on the screen, so I have more real estate. And then we're going to repeat the command that we ran earlier, which is dotnet ASP NET hyphen code generator controller. We can just make modifications here because we want the same kind of settings. The only difference is now would be that we're not dealing with courses. We're dealing with, let's say lecturers. And then the model here would be lecturer. And we have the CMD, it's all contexts the same relative fall apart. Everything else is pretty much the same. So if I do that, press Enter and then give it a few seconds, then we will see that it ran successfully, right? So now we have scuffled at the controllers and views for our lectures table. And I'll just do that one more time. And then you can do it for our students. So students controller and students is the model. Press Enter. And there we go. So now we can go back and we see that we have additional controllers and views. So of course is well lectures of students. And in our folder for the views, we have courses, we have whole web lectures, we have shared, and we have students write. The code is pretty much the same. So the only major difference that you can expect to see here would be that instead of seeing one table name, you're going to see another table name, right? You're going to see the same injection of the DB context, the same kind of boilerplate code, except it's looking for lectures instead of students, it's looking for courses instead of lecturers, etc. So everything is relative to the actual controller and the model that was used. Now, if I want the navigation to each of these then and follow suit and makes sure that I put that in so I have the course's navigation. I'll just duplicate that twice. And I'll put in a navigation for the lecturers. So this one should go to index action of the lecturers controller. And then down here we'll do that for students. And that's it. Let's us do dotnet run and test our application. Alright, so when our application is launched, we will see that we have all the navigation properties. So if I click courses, we've already validated courses. We can create a new course, specify a name. So introduction to web development. We can give it a code CS101, and that's a three-credit course. And then we create, and then we have our first course in the system, or at least at this point, the second course in the system, right? When you click these navigation buttons, also you can take note off the URL that gets generated or Add Courses slash edit slash two, That's our id. And then we know what is happening behind the scenes, why we're seeing the data in each of these pages. If I tried to go to details for a record 20, then that's where we get that for hundred for error. Alright? So that's the standard, the standard behavior out of the box. Alright? So we have validated the course is crowded already. Let's validate the lectures crowd so I can create the first lecture in the system. And his name is Troy for Williams. Now notice that our labels here are literally looking like the labels that are in the class, right there actually the name of the class properties. So later on we will want to beautify that a bit. You don't necessarily want the camel casing or Pascal casing here at the display level. But for no, this is validate that it works. So we have not working. And of course I'm sure you can go ahead and test it. Neat and details. But let us jump over to students. And the students and the system would be, let's say Tyrone Cooper. And then notice Date of birth, where getting a date picker automatically know I did see that the input tag will infer the best kind of control based on the data type. So if I jump over to the Create page for the student, you see it's not telling it that it should be a date type. It's only seeing input for that field. No. Asp.net core, when it's going to render the page, knows that it's a date field. So it's automatically generating the input tag with the date type, datetime local. So that is what is happening behind the scenes. Alright? Now, if I do not provide a value that is needed, you notice that validation is kind of jumping out at me almost immediately. If I tried to click Create, I won't be able to go anywhere until I provide a value, right? So I can just say Cooper once again. And then when I create the date of birth was optional. So I can create a students without that particular value. If I try again and then try and click Create, validation is lighting up and telling me that these fields are required. So that's kind of whole validation is built-in. We can extend this, but for now, I think this is good enough for us to protect the integrity of our data. And it's enough for us to start demoing this software. We can now go to the school that were building the software for and say, Hey, you know, this is a proof of concept, let me know if this is meeting your needs. So when we come back, we're going to extend our application a bit more. 25. Add To GitHub: All right. So before we move forward, we're going to do a check-in or commit. So it's always good practice that when you hit a milestone you do commit. So I'll just jump over to the source control management section and I'll say added database and scaffolded views and controllers. That is the chicken message. So then we can go ahead and here you're seeing that I have too much information and added database and views and controllers. So database is on controllers. There we go. And then we can commit and push. Alright, now we can move on to beautifying or application. 26. Customizing Views and Elements - Overview: In this lesson, we're going to be focusing on beautifying our application a bit. And when I say beautifying, if we jump over to some of our scaffolded pages, we will see that, yes, it is using the bootstrap little, but there can be room for improvement or Create button or edit button. These buttons, the axon buttons, they're just standard. So what we'd want to do is probably go in and kind of beautified them a bit and fix some of the formatting here, put some space between these sections. And even for the table here, this is a standard Bootstrap table, but we can probably beautifies of it. So for this whole section, we're going to be focusing on adding some design elements. So in the next lesson, what we'll do is add some Bootstrap styling on the pages and just format them a bit so that we can have some more semblance of a more cohesive looking user interface. 27. Adding Boostrap Styling: Alright, so let us start off with some of our buttons on the course's page, I'm going to change how these links look. The cool thing with Bootstrap is that I can turn a link regular anchor tag into a button quite easily. If I jump over, let me just close everything that is necessary and I'm going to be dealing with the courses. Create snow. Let's start with the index. Sorry. Alright, it's on the index page. What do we have? We have the H1 tag that says index. Index, okay? Of course is I'm changing the word index the courses because the word index means much less to somebody than letting them know that they're looking at the page with the courses. So those are little things. But I said beautification. Then for the anchor tag that allows us to navigate to the Create, what I can do is add some Bootstrap classes. If you want to know the class is once again, you can always go to the Bootstrap documentation and they can look at the buttons. But I know some of them by heart because it's so consistent and so easy to use. So first that I can see btn. Btn, we'll transform this so that link look gone, right? Then I can specify what kind of bt and I wish the house. So for our creates maybe I would want something like green buttons so I can say BTN, dash success. And if you remember the color palette, success will give us a green button. Alright? And then I can even customize that a bit. Put a plus sign there, undertakes whatever it is. That's up to you for the text part, but I'm just showing you how easy it is to transform irregular looking link into a nice visual element looking like a button. And it still works because if I click it, we're still going to go to that page. So let's do the same thing for the details and delete. Now the cool thing is that we can do it once because they're always repeating based on that for right. So I don't have to do it for every record, I just loop one time. So here, plus is equal to btn. That's Edit sold probably give that a beach in Dutch warning. I'll just write these in so that afterwards you can just look at them one time. So BTN dash warning, this one, I'll give it a BTN primary. Let me zoom out a bit. And then for delete, I'll give this one a BT and danger. Alright, now what do these mean? Each of these represents a color in the palette from Bootstrap. So you cannot once again go and look at the colors, but it is always going to be, sorry, a warning is always going to be kind of REM slash Amber primaries, but to give us that shade of blue and delete is going to give us that red. Alright? And then I can take all those pipes in-between these bars. These bars, I can take those out. And yeah, that looks much better. Alright, so no, every course that gets created. So if I go in here and I say give me a new course, Let's go back to open source development. The code is CS1 or two, and credits will be two credits. And then I click Create, then you see they have that consistency. With all the buttons look, the more buttons that go in is the more colorful and more appealing this user interface begins to become, right. So that's it for the index page, at least for now, right? You can put on your own customizations as you feel you may even use different colors than I am using here. That's entirely up to you and hold your vision for your application chromosomes. Let's go over to the create beach. From create is he creates and any of course, and then we have the textboxes, right? So let's jump over to create. And what I'm going to do firstly is merge these tools. So create course and get rid of that age for Todd, Leave the HR. And then for the inputs, I'm going to put a little BR in-between these red. I don't want them so close to each other. So in the form, I'm just putting that bridge in-between each form-group div. She's that form-group div, then BR, and then form-group div again, BR, etc. Now after doing that, the form looks a little more space though. We have one line up top that is obvious. Create course, right? And then for the buttons, what I'm going to do is, so what happens is that this isn't a form group. That's the Create button. I easy ease using BTN primary. And then back to List is an anchor tag by itself. So I'm actually just going to take this anchor tag, put it in the same form group, and then I can give it a class. And let's call it btn, btn dash, dark. Alright, so now when I look back at it, look at that. So no, I can create a course, fill out the form, alright, and then I can either create or I can go back to List. So that to me it looks a bit cleaner for this form. Alright, and if I click back to list, it just goes back to the edit form is very similar to the create form, right? So I think we can do the same kind of modification here. So I'm just going to copy this anchor tag modification, go over to Edit. I'm going to remove this one because they're going to go to the same space anyways, the same URL. So the same anchor. Going back to list this one, I'm going to make btn warning and I'm going to say Save changes. So that's the button text that I want on the edit form. And I want you to know that when you're a bolt to do that, the shorter, that's what you want to do. So I'm doing that warning and we have that same black button that goes back to LR. And then for the form itself, I need to edit up here. So this is going to say Edit Course in one line. And we can add some break tags. That's what happens when you miss click. So let's add some BR tags in-between our form group sections. Alright, Now after doing all of that, there we go. Edit Course, named that, that one more before the button section. Okay, there we go. Alright. So now you know that if you save changes, be sure that that's what you want to do and we can go back to this. All right, looking good so far. So let's go back to List and then let's took all the details speech on the details page, the interpretation of how you want the details look. That's more anew. I'm really just going to focus on the layout here. So I'm just going to say Course Details up top. And we can remove that for the, so this is what we'll call a data table in HTML. And you have basically a d t, and the d, or d d, right? So data list, and then you have the data rows and the data columns. Pretty much. This would be what's the label and then this would be the actual data. If you want to modify that you can. Your interpretation of this, of course, is relative to how you feel about this page. I'm not going to modify the layout itself. What I'm going to do is just focus on the two buttons that we see here that we have. Eddy turn back the list. So I'm just going to reuse the classes that we have. Btn, btn dash warning if you want to go to the end it. And for buck to list btn, btn dash dark. Alright, and it will remove that pipe from in-between them. And then that's the details. So I'm not willing to do too much here. If we go back to List and then we can do more with the delete. Delete will show us something just like the confirmation, the details page, sorry. And then we either confirms or delete or go back to list. I'm not going to modify the delete page because later on we're actually going to modify the delete functionality such that when a person clicks delete from here, we prompt them. Are you sure? And then if they confirm, and then we just go ahead and do it. So that double hop where you view and then delete, I'm going to be removing that. So I'm not going to spend any energy modifying this page. But no, I think that we have better look and feel to our website, It's more colorful. And these colors of course, tell a story. The color is informed user what they might Ofwat they might be doing when they choose this particular option. If you want other colors, of course, you can check out the bootstrap pallets, see what other colors are there and what scholars are easy to use and use them or customize them based on your preference or branding needs? No. In the meanwhile, I would encourage you to go ahead and do the same eutrophication for lecturers and students we just went through together for courses. My challenge to you is go ahead and add your own styling elements to the lecturers and students based our views. Now in the next lesson, what we're going to be doing is implementing that more dynamic delete functionality. And I'll see you then. 28. Delete using jQuery: Welcome back guys. In this lesson, we're going to be implementing a more dynamic delete operation. Now the reality is that for the delete, we don't necessarily need to delete and then hop over to another page. Then again, even though it is a good measure to make sure that we are sure that we are both deletes the cart record. But what we want to do is allow the user to just confirm right here. And then once they confirm, we go ahead and do the delete in the background and then reload the page. Alright, so what we're going to do is implement a confirmation screen. I'll be using this library called suites alerts. Seats alert is a very useful library that allows us to create some beautiful prompts that actually have a sample. And I'm just going to go straight to the sample that we are going to be using, which is a confirmed dialogue with a confirmation button. So when we say Try me, you'll see it pop up and it just asks, Are you sure you won't be able to revert this? Of course, we can customize and messages that come up. And then we can allow the user to confirm the deletion or to cancel what they were about to do. Then here is the sample code that we need, right? So let's start off with the installation. So I'm just going to jump over to the installation page and they will outline to us that install it. We can use npm, but we're not going to use npm. We're going to just use the CDN link that they offered to us. A CDN is pretty much just a hosted version off the script file or assets that you would need to use the library, right? So we can use a CDN. Otherwise, we could actually go and get the actual assets, the J, S and so on files and put it in the project. But like I said, we'll just use the CDN. So when we copy this, we'll just jump back over to our Visual Studio. Code. Projects who don't to sheared in the views go to layout. And we're going to put the CDN link right here in the layout. I'm going to put it after the jQuery because it depends on jQuery. So order matters. It has to come after the jQuery. Alright? So jQuery, then this, and then the other script files that we have. Alright. So after we've included it, just by that simple copy and paste, because this URL will actually yield. Let me just show you that will actually bring us to the eye sits right there. That's the script file that will always be referenced once that CDN is there. No, we can go ahead and use the sample in our websites. So I'm willing to borrow this code. I'm going to jump back over and let's start off with horses, right? Index page. Now, there are several ways throughout Java script in R is to be done at core application, right? We can write the JavaScript right here in the layout. Which point it's more global because of course the layout page is for every single page, but then we don't necessarily want the JavaScript to fire or be available on every single page. So when we do want it available on every single page, we place it here globally, right? Whether we're ready to go our own script section, or we're referencing a whole script file. We can do globally in this section. But you'll also notice that underneath all of that, we have this thing called render section. And this section is going to be called scripts. Now what does this mean? It means that on any view that I want a specific JavaScript code or script to run, I can invoke the presence of this section in that specific view and write the JavaScript code that is specific to that view. For instance, if I just want my sweet alert available on the index page on courses. Yes, the CDN link is, or the whole script file is available globally, but I'm invoking its functionality only on this view. I can create this section at the end of the file. I usually put it at the end of the file, but it will dynamically slotted generate. Or we say I'd science section. And then we call the sexual by its name, which remember, is called scripts. This always see here scripts, alright? So I can invoke it by its name. And then in there I can put in my script tag and then start writing the JavaScripts that I intend to have run for this section. Alright, so I'm going to first of all create a whole JQuery section. We invoke function. And then I'm going to see that unclean. So when this delete button is clicked, that's what I wanted to really. How am I going to identify that need buttons? So if you want a refresher on JavaScript, again, check on my web development course where it goes through JavaScript. But whenever I want a specific element, I need to reference it either by some form of name or some, some class that I think I'm going to just give it another class. I'll just call it deep btn. So this is my class. It won't serve the purpose of giving it any styling. I'm just giving it a class name, right? Then I'm going to say when this button is clicked, so dollar sign and I'll just use jQuery of course, dot sorry, quotation mark, but delete btn, right, says getting the element that has the cross delete btn. And then I went to register, I click events. So onClick, I want to fire this function and I'll use E for the event argument. Alright, so pretty much big jQuery object. And then inside of that, we are our function rather. And then inside of that we're watching for the click events on any element that has the class delete btn, which in our case is our actual Delete button. When that happens, no, I can paste that sample code that we just took off the swell website and just format it so it looks a bit more sensible. Alright. So pretty much, let me just go. Pretty much. We're seeing that when this is clicked, fire off this swale alerts, right? Title. Are you sure you won't be able to revert this? And it's a warning icon. Then we show the Cancel button. Then we can set the confirmation color and the cancel button color. We see that they're reverting to the hex here, but that's fine. And then you can say yes, delete it. And then if they confirm, so notice no, it's firing this part first, that's the prompt. Then it says then evaluate the results. The results would be what they it click cancel our confirm. No. They'll say if it is confirmed, if the result is confirm, meaning you clicked the Confirm button, then what do we do? Alright, so what do we do is going to have different parts to it. What we want to do is actually fire off the delete. We can show the confirmation, yes, but we actually want to fire off the delete operation in the back-end as well. So for that kind of operation, what I tend to do is create a form because we already have the functionality, right? We already have the functionality in our, we're in courses. So let me jump over that of course is controlled and show you what that mean. We already have the functionality where we accept the id, right? And then we pass it along needed, and then it will read Erich to index. So I really don't have to write anything too special. Instead, what I'm going to do is create a form that is similar to the actual form that is here in the delete method. Alright, so I'm just going to copy this though, need everything in it. Just copy it. I don't need a buck to list. I don't even need a submit button because I want to use a jQuery to do the submission on my behalf. Alright, this is where it gets exciting though. Alright? So we have our ASB option Delete. And then we have this input that has a binding for ID. Now I'm getting all these errors don't here because it's saying that the eye innumerable course does not contain a definition for ID, right? The eye innumerable up here, which is a collection, does not have ID, which is why we had to do the forEach to get to the ID element. So a number of adjustments here. One, I need to transform this anchor tag into a button, because buttons submit forms, not anchor tags, right? If you look through all the forms, you'll notice that all of those are either inputs with types of meat or actual button tags. So I'm going to just create the new element instead of destroying the one that's there. I wanted to create a new one. So I'm going to say button. We're going to give it a data attribute. This is a cool way that allows it to actually assign a value to an element in HTML so that the value that I'm assigning is going to be whatever value that the item ID is. Alright? I wanted to give you the same class because of course it needs to be the Delete button. So since I have that as the Delete button, I'm going to remove it from the anchor tag. And then I'm going to tell it that it's type is equal to button. So it's not trying to submit any form just yet. It's just supposed to sit and listen, right? And then we can just say Delete button, text. Alright. I'll just flag this one. Delete old so that we don't miss click. So now we have a button that has the class delete btn. And it is going to be firing off our sweet alert. Whenever it is clicked, know when it is clicked. What do we want to do? We want to take the id value from here, plug it into the form, and then submit the form so that it can no, go over to the controller and do what it would have done naturally. So we're basically just sharp cutting it out. We're using JavaScript to help us with these shortcuts. All right, so let us firstly modify the inputs. So I don't want it to say is before, instead I have to give it an ID. So what happens is that ASB for I think we looked at it before, automatically sets up the ID and name attributes for the element that it says is before. Alright? So we can actually override that. We can put these in manually. So I can see this is the course ID. That's the element's name or ID rather. And then the name here would just be Id. Alright? Id, because this needs to match the expected parameter here. Alright? So now what we can do is when the person confirms that they are doing this deletion, alright? I can say is deleted. But really and truly, I want to say get me the button that was clicked. So var button is equal to. And then just using dollar sign, this will give me the object that fired the event, which was the button that was clicked. Then I want to get me the ID from the button. So I'm going to say BTN dot data and get me the Id. Alright? So anytime you use that data attributes in your HTML and you want to get what is in that data attributes as the value. Then in JavaScript you can always say get the element dot data and then the key for that data. So data dash ID makes IT that key. Alright, so now that I have the data from the button, I'm going to see fire off the oil before our fire off the form. Actually, I need to give this the value. So there are number of steps, but we're going to just scroll back through them to make sure that we're on this on the right track. So dollar sign, open, raise, quotation mark. And then this is course id, hashtag, course ID, right? Then we set the value of that hashtag course ID to be that id value from the button. I'm just doing it line by line. This could all be done in pretty much one line, but I'm breaking it up so we can see everything clearly. Then we want to submit this form. So what I'm going to do is give this form an ID value so that I can call it by its ID. We can call this one course delete farm. All right? And then what I'm going to do is say that I want to submit that form or dollar sign rather. And then hashtag, the course delete form dot subnets. Alright, this is a nice and clean way and we're leveraging existing code. So let us review exactly what's happening here. One, I'm changing over this anchor tag to be a button. When this button is clicked, it won't try to navigate anywhere. Instead, it will fire off this click events. This click event will then fire off a sweet alert event where we prompt the user. Are you sure? If they say yes, they are sure than this part is optional? So we can evaluate if we really wanted later on. But we want to get the data, will get the button, then get the data from the button, which is the id value that it was printed on. Alright, so data dash ID. And then we want to set that id value in the form itself and then submit the form. Though the expected behavior is that once we set this ID value here and then submit the entire form, it is going to go over to that delete action with that ID value. And that will trigger this delete operation, which will then return to index. It will give the illusion that it's got deleted and page refresh. It's not an illusion. That's actually what's going to happen. Alright? So I've been doing dotnet watch all this time. Let's just jump over and test the salt. So if I go back over and create that, see I just created gibberish course, right. And I'm getting this nasty error. I believe that's just because of the type of data put in. So let me, I think it's this one because I limited the number of elements in this. So let me just say CBS, CW that we create again. There we go. Alright. So those are the things that we'll want to pay attention to how we handle those exceptions, but let us try out our new delete functionality. So now we have this delete button. If I click Delete, we're getting that prompt. Alright, so that part is working. If I click Cancel, nothing happens. Let me try this again. If I delete and say yes, delete it. We got the prompts. Yes, it was deleted but we got refreshed anyway. And there we have it. No, there's no double hop. We just get a simple confirmation. And then it either way either confirm or cancel. Alright. So now my challenge to you is to retrofit the other index page is to have a similar behavior, right? Modify that delete button such that it uses a sweet alert prompts you, you have to put in the form, putting the different buttons, stuff you have this sample to go off of. So I can now remove this, this anchor tag, and this is now my Delete button. And you see, even though this is a button and these are anchor tags, if I didn't show you the code, you wouldn't know. There's no way to tell which one is which. So let me just rebuild. There we go. So there's no way to tell which one is an anchor tag and which one is a button unless you inspect element or do something very intrusive. And if we do inspect element, we will see here that the data id value here is three. Just like whoa, the URL would have had a three in it. The data ID element has three, so it grabs that and then it places it in this form, which I know is blank, right? It has no value in it. But once we click delete, that value gets placed in there and then it gets submitted. And you see here, that's the anti forgery token that we had spoken about earlier in the course. So that is very important for security because you don't want people to be able to just send off delete requests for element with the ID three. Alright, so this is very important for the protection where this anti forgery token gets validated at the time the request is made before the deletion is carried out. So that is why I would recommend that we leveraged that form for that kind of operation. Anytime we're going to augment data, we should always use a form. So now that we have more interactive deletion operation, we can go on to creating more interactive tables. So when we come back, we will look at how we can enhance the display of ArrayLists using data tables. 29. Add Datatables: In this lesson, we'll be installing data tables, which is a jQuery based library that extends the functionality of our typical tables. Now, here's an example especially tuned for Bootstrap five. Alright, and you can get there by going to deal with data tables.net slash example slush styling slash bootstrap file dot HTML. So from here you will see that this is what it will transform our table to look like. It comes with paging and comes with the ability to show more or fewer entries at a time and a dynamic search. So if I searched for anything with the letters TR, it will start filtering immediately. Since a very cool way to kind of make our tables look more attractive and more data driven. Below, they also shows how we can go about doing the integration. So we have to do this initialization line in JavaScript. We have the sample of the table in HTML, we'll have where I've no shortage of tables, so that's fine. And then we have the CSS assets that are needed, right? So let's start off with the JavaScript parts. They gave us a few CDN links. So the first one that we need is jQuery. We already have jQuery because that came out of the box with our projects and they just jump back over to the layout. We can see we already have jQuery. That's fine. What else do we need? We need the CDN link to the jQuery data tables file, and we need a CDN link to the Bootstrap JS file. So what I'll do is duplicate these two lines. Are that line for sweets alert. And then I'll just copy the new CDN links in. Alright, so they're sweet alert. So the next, the first duplicate, I'm going to replace it with the CDN link two data tables min. And then the second one I'm going to replace just the same. Alright. So now we have the JavaScript files for data tables included in our layout file. Next up we need the CSS, and they're also giving us the CDN links. And once again, it's important to follow the order that they are listing them in the CSS. I can go all the way to the top and I'll just duplicate the bootstrap. So lubricate the Bootstrap one. And then we'll take the first CDN link for the CSS file and replace the first duplicated Bootstrap CSS reference. And then we'll take this one and do the same thing again. Alright. So because the data tables requires bootstrap off course, we need the Bootstrap style sheet first. And then we can put in the wrist. And then our own site, CSS comes last. Because then if we need it to override anything in the top three, we could do that in our own CSS file. Alright, and then this one comes even below that CSS file. So that's fine. So now that we have the assets included, let us know, look at how we initialize it. So if I jump back over to the JavaScript example, show that once the document is ready, then we can just initialize data table. So I'm going to copy that and I'm going to jump back over to courses that's like are grown 04 or innovative functionality. And what we have here is a table with the class table. So I'm going to use the class table to identify the table that is in the page already. Alright, so what I can do already have this jQuery method or function executing. So I'm going to place that initialization for the data table right there. So we have the click event, which is it's registered when the page is ready. We are going to do the same thing here with a data table. But the element we're targeting is dot table, meaning any element that has the class table, which we do have an element with a class table. Alright, so when I do that, let's us take a look at the courses page after that modification or right. If you look at it, you'll see no, I'm getting all of those the visual elements that we just saw. And I can do sorting. I can sort by name, I can sort by code, or I can sort by the number of credits. I can. This one doesn't take any searching because those are all the same. If I wanted to filter, I can see open and it will automatically filter, right? So just like that, I've transformed this. I mean, it was already a good-looking table by virtue of it being a Bootstrap theme. But it was kind of plain. Alright, I've transformed this plane table into a data table by just including one line of code after putting into the assets. The assets. That's a onetime activity because guess what? I can do this on every page that I have a table that I want displayed as a data table. So let us take, for instance, the courses. Let's look at literature lectures. No modification. Lectures is still playing. If I wanted to modify that, I just go over to the index page four lectures, and I've already modified it to do the sweet alerts stuff. So I'll just plug this new data table code into that section. And then voila, Just let that it is transformed. Now, the downside to the data tables out of the box is that, well, the way or application is written, it is actually doing a select star all the time. So if we have 1500500000 records, no matter how many records, they're always going to try and load all of them on the page one time. The good thing about data tables is that it's automatically allowing us to page through and limits the number of elements that are shown at a time. However, at the end of the day, it's still going to have the 500,000 records on the front end. So that's when you start thinking about server side paging activities and so on. So that it actually only brings back X number out of the total number of records since our system is so small, I'm not going to worry about that just yet. But this is a good activity to just clean up whole our elements. Look on our p.sit. So I'm just going to add that to the index page and then we can call it quits on this activity. Once we validate that transformation. In the next lesson, we're going to look at how we can clean up the display of our labels. 30. Adding Custom Labels: Welcome back guys. In this lesson, we're going to be looking at how we can clean up the display of the labels a bit, right? No, The labels are showing us texts that is identical to the name of the property, which is not ideal because it's not really human readable as programmers, it looks fine to us because that's all we have to write the code. But to our customers and the actual users of the system. This doesn't really look very good, right? So what we want to do is fix them in a way that we don't have to manually do this on every single page because we will have to fix it on the index. We'll have to fix them in the create and edit and details, etc. So we want to fix it one time so that we don't have to repeat that. No simple solution to this would be to go to the Data class, right, for students. Alright, let's start with course because we're not students. Students because they actually have the Pascal casing, right? So I'll use the student's class to start off this example. The simple solution would be to add annotations here, because we can easily see this play. And then set the name. Then we just include the missing using reference what data annotations there to system dot component it's annotations. And then we could see name is equal to and we set the value that we want, which would be first space name. Just by doing this. Alright, just by doing this, if I refresh the user interface, you'll see no, it has first name. If I go to create new first space name, alright, so that's one fix for every weird that this is displayed. And that's because this data annotation is what will inform the actual. When we had our table, we had display name for it. There we go. Alright, so that's courses. Let me show you that on the index for students. Alright, so display name for firstName. So even though that's the element, the display name for is going to take its instructions from this annotation. Know this works. The downside here, however, is that if the database changes and we'll have to racecar fold or elements, everything will get reset and then that is not maintainable. That would be wasted effort because every time the database changes, we have to re scuffled and everytime we re scuffled would have to go through and do this again. And that is literally a waste of time. Now the solution to this is to create an extended class of this class. Alright, so one, all of the elements that got generated from the scaffolding activity where partial, write the models are all partials, even the DB context is a partial. In C-Sharp, a partial means that I can have multiple blueprints of the same file. Alright, so here's the blueprints that EF Core gave us. But then I can create another blueprint that compliments this one. And that's what we're going to do to remedy the situation. So I'm going to create a new class and I'll create it in the models folder. And you file, I want to call it student data. And then I need my namespace, which is going to be, and I'm very lazy. Sometimes I'm just going to borrow all of that and say namespace, name dot models. Alright? Then we have our class, which is student data. Alright? No, of course this is public, public class. Right? Now, in our public class, student mentor data, I can actually define properties that match the original student, right? So let us say that I wanted these three elements and I'm using these three because id, I don't really need to override anything with ID. Alright? So I'm going to use these three and place them here. Then I can sit my annotations so I can say display. And the name is equal to. The name is equal to. And of course I need my missing using statements. There we go. And then this is going to be first name space. And then I'm just going to copy this and reuse it for last name and date of birth, fix the formatting of course, and then adjust the text that is being displayed. So date of birth gets date of birth, food species and last name gets lost space name. Alright. So now we have defined these and we can also do other things like specific validations, right? So if I wanted. To put in that, okay, this should never be more than 50 characters when it's entered on the user interface, I can put in string length 50, right? I could state that. Okay, on the user interface, maybe it's not in the database, both on the UI. I want to meet this required, right? So those are things that we can do to kind of force validations and displays on the client side or on the user interface, right? I'm not going to make it required that I'm just showing and I don't need this to be string length 50, so that's fine. So now that we have that metadata file, How do we associate this with the actual data model? Well, right below it, in the same file, I'm just going to have a declaration of public partial class students. So remember, a partial allows me to have the, the implementations are the blueprints rather in multiple places. So this is going to be on an empty blueprint, right? But when everything is compiled, whatever I put in this blueprint will be compiled with what I put in this blueprint. And then everything will just be one big blueprints at the end of the day. So no, I need to associate this blueprint with the student Meta data. So I'm going to give the partial class and annotation, that's his model Meta data type. You may need to include a using reference. So if you get an error, when you tie this model meets a data type, we just controlled dots and at the using statements, right? Then we're seeing type of student metadata. So this is the associate, this metadata class with the partial know when I go over and refresh or pages, it is not working. It's not working. That is because I'm in the wrong name-space. Alright, so I put the namespace based on the folder. I mean, obviously, but the actual partial class is in a different namespace. So in order for this partial to know that it is a partial to the other one. Easy way to know that is if I Control click this, it will say no references phone, right? But then if I change this data, changes namespace to data, and then allow it to refresh when I click it, no control click it's going to know that, okay, there's a partial students here, and there's also a partial student here, right? So the namespace is very important. Arguably, you could put that meta-data of inside of the data folder. The scaffolding activity will really only override the files, ignores a bolt. Anything that's there already won't get deleted, but that's up to you. I'll just leave this as it is and let us try that again. So when I refresh, there we go. So first name, last name, date of birth. And that looks far easier to read. Far more user-friendly if I go to details, It's also fixed thread. If I go to Edit, It's also fixed. So I don't have to go through every page and made that change into HTML, making one place and it will have value everywhere else. So that is a nice and easy way to modify the display and the label sections of our, well, the display on our user interface from our classes. So you can try the same thing with lecture. Go ahead and create that lecture and MetaData class. The partial I remember the namespace needs to match. And then you can add in your own display names and validations if needs be. 31. Managing Database Changes: All right guys, so we got feedback from what we've been doing through the user interface, functionality, everything, and we got great feedback. They love it. The client is dying to use the system. But they said that, okay, before we can fully use the system, we need two more features. Alright? So the two features that they're requesting will require database changes. In this case, they want to be able to track classes. And a class is defined by a lecturer teaching a course at a specific time. And then they want to be able to track student enrollments, which means a student being enrolled in a class. Alright, so that means that we need two additional tables. Now, I have the Data Studio and I'm already connected to my instance running in darker. So you can hit pause, bring up your Data Studio, fire up your darker if you need to. If you need a refresher on that, you should have darker UI where you can just go to the list of containers and you can look for your Microsoft Container and that you configured, I can just click the Play button. And then once that is up and running, you can go ahead and connect using Data Studio. And Data Studio generally does a good job of retaining the connection details. So now what we need to do is write a new script. So I'm going to bring up a new script and then you can see I'm picking up where I left off last time here. But in this script window, I'm going to start off with a use statements, so we know that we need to use school management db. Now the cool thing about Data Studio is that you can do this use statement, but you can also select the database from this dropdown list of top. I tend to do this regardless because sometimes you might forget to do this part and then you might end up running a script against the database. So always start with your use statements. No, I need to create two new tables. So I'm going to create table and you're going to see me kind of break discipline because SQL is not really case-sensitive. So initially I tried my best to capitalize the keywords. Going to slack off this time and not be as careful. Alright? So we're creating a table called classes and it's going to get an ID which is int, primary key and identity that's always supposed to be there. And outside of me just suggesting that it should always be there, Entity Framework loves to see when there's a primary key. Alright, so that spirit a lot of headache when it comes to using EF Core. Hold off the box in a very powerful way. So what else does the class of the class is going to have our reference, the lecture ID. So this is the first time we are going to be doing a foreign key here, lecture ID, which is integer, is a foreign key that references the lectures table and the id column. So once again, if you're not so familiar with foreign keys and relationships to coat my database development course, Microsoft SQL Server for everyone. However, if you are, then this should look very familiar to you because obviously we need to associate the class with the lecture. And the class also needs to be associated with a course. So we have to do the same thing and introduce, introduce a course ID, which is also an integer and a foreign key that references the course is stable and the id column. Well, for No, they said they just want the time. So let's assume that it, once that time is in the system, it means that this lecture will be teaching this course at this time, every day of the week. And that's what will constitute our class. And what we do here or decisions here are based on the business rules and business requirements of the client. All right. So I'm just trying to keep it very simply. It may not be the most realistic system in the grand scheme of water school management system is. But I'm just keeping it simple so we can get through some of these concepts. Alright? The next table would be the enrollments table, and I will just put that one here. We have Create Table enrollments. We still have our primary key ID. And then an enrollment is defined by a student. So we need the student id, foreign key referencing the ID column in the students table. And then the class that the student is taking. This class ID, referencing the class is stable. So that's why we have to make sure we create the class before we create the enrollments, because there is a dependency right there on the, on the classics table. Now we have that we can run. And that was completed successfully. So if I dropped down, I'll see that I now have classes and enrollment by two new tables have been created. Now, how do we get these two new tables into our application, right? So we already have course lecturer, student know we need new courses. So I'm going to stop my dotnet watch. And let's pop up this terminology bits. So I'm bringing it up and let me increase our font size. So I'm going to go and author the same command that we use the first time to bring over all of these elements. So I have the command here and we can go through to refresh your memory as to what each section builds. But just on one or two, what I've done in the past is actually create a partial file that this command would live in, because this command would never change it from dealing with one database all the time, right? So instead of trying to rewrite it from memory or put it somewhere and forget where I put it. I put it in a partial file and had it in the project. So what I would do is just execute that Porsche file which would run this command. And that will just give me that level of consistency that I need. That's something that we can probably look at in the bonus section of this course. But for now let's just reorder the command. So we have dotnet, EF, EV, context scuffled, and then we have our connection string. And remember that if you have special characters in your connection string, especially like in the password that I had with these two dollar signs, then you'd need to use a single quotation mark, alright? To get retrieved the connection string, of course, you can just go over to the opposite things like JSON file. You can copy and paste it there. Then we have the provider, which in our case is SQL Server, we are forcing so that we're forcing the scaffolding so that it will override all of the files phone in the output directory, which is data. And we don't want any on configuring because we don't want it to, we don't want the DB context to try and have its own copy of the connection string in core. Alright, so after doing all of that, we press Enter and allow it to run, and it builds a project successfully. When we go back over to our File Explorer, we'll see that we now have these new files. Let me zoom out a bit. All right, so now we have lecture I, the course ID. You have time with navigation properties, the course and to enrollments, right? So that's what the class brings to the table. Enrollment has enrollment, student ID, class ID, grade class students. Alright. So now we have additional table. So what I would challenge you to do is actually go through and scuffled the crowd pages for these two tables. You'll also notice that while testing your user interface, because we did the metadata classes, we did not lose our labels, so that's good. Alright, so now you can do the same kind of metadata extension for these. If needed. You can look at the user interface and see how basic and tweak them to accurately capture the data that needs to be captured. 32. Fix syntax errors: All right guys. So I was in the middle of scaffolding the controllers for the new, the new data models. And I started with class and I ran into a bunch of errors. So I'm not hiding the Earth's from you guys because if I got the errors, you guys got arrows, I want us to solve them together. I wanted to help you to understand why we're getting those errors. Now, the word class is a keyword in C Sharp in most languages class, right? So the problem here is that we have the, what we'll call the domain language, domain specific language, which in this case would be where building a school management system. So the word class means something different to a school than it does to a programming language. It's just ironic that keyword is so key in the programming language that is causing a clash with certain things. So here in the classes controller, you'd notice that the elements that I'm scrolling past errors for us so that we can understand the different syntax that we might be seeing. Here you're going to see at sign class that ad saying is like, it's like a keyword killer. So if we said the word class by itself, that would cause an error because class, once again, is a keyword used when defining an actual class in code. So we can't use that keyword as a variable. If you end up needing to use a keyword as a variable, you can put the add sign in front of it. And then that will kind of activate its keyword status. In C-Sharp. Know the errors that we're getting are surrounding that at sign. And it was trying to generate I think it was just trying to be clever and it got lost along the way, right? So all of these signs here, instead of the lambda expressions, are no illegal characters because he can't just have an oxide layer that we can easily swap all these signs with a lambda expression token. I always use Q. You can use C if you want. Doesn't really matter, but I just wanted to make sure that I point out what is causing those errors, what those signs are. So you didn't feel like you did something wrong because it's probably more my fault and it is yours in terms of using a keyword like that without pointing out the dangers, right? So once we do all of that, we should be able to do a dotnet build. So let me do a dotnet build again. Alright, and I have a few warnings but nothing to write home about boats. That's something about the null reference. We'll discuss that a little later. I was actually in the process of scaffolding the enrollments. Alright. This is a little tiny boats. I'm sure you guys are already. I'm on top of it. But if I do a CLS and then bring it back up that command for the enrollments. So let's try to scaffold enrollments together. And after a few seconds, we now have the enrollments controller and views scaffolded. Alright, so I just wanted to pop in and in case you are sharing that difficulty, show you that I also had a difficulty and there's a way out chart. So see you in the next lesson. 33. Add To GitHub: Alright, so this module brought us through quiet a few activities. We looked at cleaning up the user interface using Bootstrap Styling whole to add a few jQuery third-party libraries to our workflow. How to customize labels in a way that it doesn't get overwritten every time we do a scaffolding activity and we ever run into a few syntax errors together and we found our way out. That's what programming really is. We are going to go into errors, but it's not about avoiding errors. It's about fixing the errors and triumphing over the areas, right? This point, we have reached another major checkpoint. And what we're going to do is set up our check in or commit message. So let's say finished customizing views and elements. Yeah, I think that's good. You could also probably add that. You added class and enrollments. That's fine, but let's just go ahead and commit and push this. See you in the next lesson. 34. Understanding Authentication: All right guys, so in this section of the course, we're going to be looking at authentication and why it's important and what our options are. No, authentication is important when we want to control access to our application are parts of our application. Well, predominantly authentication rules the entire application. So it's either parts of its need authentication or the dorms. Alright? So for instance, anybody might be able to come to the homepage, right? And look and say unopened whatever. However, only logged in users should be able to maybe see these links. And even if they can memorize the link, I know that they can see slash courses slash, and then try and navigate there. They should be required to log in or authenticate before they can go any further. So those are things that authentication bring to the table, right? Authentication brings that requirement that you identify who you are and we verify who you are. Then there's another part of it called authorization, which means that somebody might be authorized to create a course, but they might not be authorized to delete the course. There might not be authorized the end of the course, but they are authorized to look at the list and look at the details, right? Authorization means what can you are going to do in my application? Now, in terms of our options, we do have the option of having our own authentication system. Asp.net Core comes with its own library, identity core, which allows us to easily and seamlessly integrate authentication services into our website. Now, with a few commands, we could actually spin up all of the, or at least 90% of the functionality needed to get that done. But then there are going to be some limitations because this is a web application. But then maybe the client in the future would like to have a mobile application. Or maybe they would have, they would like to have multiple applications that use the same username, password, credentials. So at that point you have to think big. You have to think outside of the box, right? Do I create different authentication systems for all of these different scenarios and then try and make everything work. Or do I try to centralize it, but I still have to maintain it? Or do I just outsource this to a third party provider that provides all of these services. Anyway, for this course, we're going to take the last option, which is, let's use a third party platform that does all of this anyway. So the platform that we're going to be using is off. 0.0 provides secure, secure authentication and user security features. It's in the form of a SaaS. So that means we don't have to host our own data if our database crashes, we still have all the user data hosted by this platform there it is easy to integrate because they have a lot of preset integrations are lots of considerations that we would take to actually secure or up they've already taken care of and it's very easy to integrate with. So you can go ahead and register for an account using off zero, so zero.com, and then you can just sign in with your GitHub account because you should, at this point already have a GitHub account and it's free to get started. And in the next lesson we will see what the next step is. 35. Register for Auth0: Alright guys, so I'm assuming that you already went ahead and signed up. If you use your GitHub account or one of the other social icons already created your columns manually. We should all end up on a screen like this. This isn't getting started. So the first thing that they see is integrated of zero into your application. And then we can go ahead and create application. Now they're going to ask, what kind of application are you going to be building? So this just goes to show the range of support that they offer, right? Because if we weren't supposed to build out our own authentication for all of these devices that could lead to a lot of maintenance overhead. So you always want to pick your battles. You always want to make sure that you're making the best decision for both your client and the project that is at hand. So from this perspective, we could go ahead and see that we're doing a mobile desktop or command line interface based up, we're doing single-page applications using one of those spa frameworks. Are we doing our regular web application using a traditional development framework for web? Or are we doing a CLI or demons? So I think for this one we would definitely want to use regular web because we see asp.net in the list. And then we can give it the name. Let's just call it a school management up. Alright. And then we can go ahead and create. Now, the next thing that they're asking is telling me which technology or using, right? So here is a bigger list of all the possible technologies that could be using based on our selection. But of course we're using asp.net Core. And we'll choose version three point tool because from three upwards everything was kind of standardized. So we can go ahead and select that one. And no, they're giving us this client ID and we can go through different settings and they even show us how we can go ahead integrate, alright, and here's the support. 3.1. 565 is also support 6.7, work seamlessly together so we can definitely proceed with what we're doing here. So if we just scroll through the walk us through exactly what we need to do, get your application keys. Once you've signed up, you need to go to Applications Settings, and then you can go ahead and set up certain things. Alright, so let us start by going over to the application settings and we need to set some URLs, right? So I'm just going to open that in a new tab. And then from the list, you'll probably already have default app and you'll have your update just created so you can select that one. And so that is our domain, that is our client ID. We need those configurations for later on, but for now, what we need to do is set up our URL. We have what we'll call a load callback URL and then a load logo tomorrow, so forth. These URLs we need to use the application's URL. Let me jump back over to our project from our properties folder, lawn settings.js on we're going to borrow that URL. And the URL format needs to be that URL slash the word callback. And then for the logo tomorrow we can just leave the standard URL. Now, if we needed to facilitate multiple callback URLs like indicates where we're in development. And then we'll have maybe a staging environment, acuity environment, and the actual production environment. We are going to have several of these URLs for the same application, right? So we can just comma, separate them and each one will just represent the URL as needed. So while we're in there, we can leave it like that. After sitting those values, let's make sure that we go down here and click Save Changes. Now, once we've done that, we want to go ahead and add the configuration files or these specific key files to our application. So we'll jump back over into Visual Studio code this time we're going to go into our app settings and then we can create a new section. And I'll just do that on a load hosts and we'll call this off zero. And then this section is going to have two keys, is going to have domain. Let me get my typing red domain. There we go. And that's going to have a value. And then we're going to do of client ID. So these are values that will help out zero to know which application is making a request. So these values are given to us here. Alright, so that's our domain, That's our client ID. So I'm going to borrow this domain value and paste it there. And I'm going to borrow this centrality value, paste it here. Now that we have that, we need to integrate with NuGet package, right? So let me stop the running application here and let me clear all. So we need dotnet add package, and we're adding. Off zero dot ASP NET Core dot authentication. So when we do that, we give it a few seconds and know that it's installed, we can move on to the next step. So before I move on to the next slide, I just wanted to point out that all of what I'm seeing is actually documented right here. So between what I am seeing and what this actual document is seeing, we're doing the same thing, right? So this is a step we just took. Installed package would be if you're using Visual Studio and using the NuGet package manager, where not. So we use the dotnet add package, seem, seem old com, right? The next thing that we want to do is add to our services the configurations that we know that we're going to be using off zero. No. The syntax here is a bit different, and that's mainly because this is really for dotnet Core 3.1, 56.7 all have a different looking program.cs, But it's the same concept, right? So we can borrow this, jump over to our project goto into our program.cs file. And let me zoom out a bit so you can see it a bit better. There we go. Let me just close this terminal inside of the services right above AD controllers with views I want to add that pulled from the sample. Now, obviously there's an error here because it's not services anymore. It's now builder dot services, but as the only major difference. And then we can add the using statements for that missing library where we have configuration and it's not going to say builder dot configuration, so I can just replace those two configuration quote references. There we go. So now what is going to do is look into the configuration and find, find the zero section, and then use the Boolean value. And then the same thing for the client key. Finally, we want to add authentication. So we want to add the, the middleware that supports authentication. So we already have one that supports authorization. I'm just going to duplicate it and use the top one to say use authentication and all. This is very important. Order matters because in the pipeline, we need to authenticate before we seek to authorize. Remember, this means telling me who you are, then this one means okay, What can you and can you do? We don't want to start determining what you can and cannot do before we determine who you are, right? So that's very important for the floor. Alright, so now that we have completed the registration of the service and know the configuration of the authentication middleware. Let's move on to the login. Now they're giving us a sample of an account controller, right? So I'm just going to copy this code block, jump back over to our Visual Studio Code. And in the controllers folder I'm going to create a new file that don't want to call it a cone controller dot cs. And then I'm just going to paste. All right, I'm going to also give it a name space just to make sure that we have some uniformity says School of Management app dot MVC controllers, right? And then semicolon. And the controller needs that using statement for that. Alright, so now we have or a cone controller and this icon controller will be where the login will be invoked from. The return URL basically means whenever you login, go back to what the slashes, which is the home. But down here we say var authentication properties are equal to new login authentication on properties builder. And then this is indicates here we're off to a shrewd reader user after I login and such and such, right? So that's that return URL. So if you wanted them to go elsewhere, you could do that. A lot of the times when persons click login buttons from a certain page, that page is URL is what goes in here. So this is the default value in case no return URL was given, then it will just redirect to this. Otherwise, we will always redirect to that return URL. Then we're going to see issues UP contexts that challenge facing this challenge, async comes courtesy off or off zero dot ASP NET Core dot authentication, library reference. And then pretty much it's just setting up the authentication scheme, which is coming from this constants class, which is also going from that namespace. And we're passing in the properties accordingly. Alright, once this happens, it will actually redirect us to an off zero peach. So it's going to navigate away from our application to that application, which is all zero, load the user to authenticate and then sent back. And then it will be schedules reader to this return URL. The next part of the application or this setup that I want to pay attention to, we can do the, the user profile. I think that would be a nice one as well. So we can copy this because it's in the same icon controller. Notice though it has that authorize on notation. Let me copy that and let me just paste it in our existing icon controller. And then I'm just going to go for the logout and copy that as well. And then we can go through exactly what we're looking at. Here. Authorizes an annotation that basically tells this action that it requires an authenticated user to be able to access it. No, it's missing are using statements since the Earth, so Control dots and then we get that using statement. For the 3M types, we also have a missing using statements. So claims, what are claims? Claims are bits of information that are included with what we call a token. Alright, so let me break that down for you. When we go over to off zero and authenticate, they're going to send back a token. This token is going to be just a block of encoded string that has all the information about you. Well, all relevant bits of information, hopefully nothing sensitive. And that's why it's important to use these authorities on the topic. Even just to understand how you would go about setting up your own. Because anything that you haven't considered, they already have. So all zeros is one of the leading authorities on user security, right? So what I'm seeing here is that the token that is sent back is used by our application to indicate that you are authenticated. So the presence of a token means that you are authenticated. Know the contents of this token would include your name based on what you provided when you registered your e-mail address, even a profile image if you upload it on stuff like that. So these claims are all coming from the Tolkien, and they all are bits of information to indicate who you are, what purpose you serve, what you can and cannot do. So even roles and self can be rolled up into that toolkit. No, the authorized, once again means that you cannot hit this endpoint unless you have a token. Which means that if I tried to navigate to login, that's fine. If I tried to navigate to any other parts of my set, that's fine. If I tried to navigate here with authorize enabled, then I can't. It will force me to login. Same thing for logout. It will force me to login or to be logged in so I can log out if I'm not logged in. And then once that logo is done, we'll redirect them to the home page. All right. So the sign on top ends in two parts. We have the sandals async, which is really sending out the contexts of us being signed in through zero. So that's why, that's the authentication scheme that is being used with the same old. It looks very similar to the challenge is seeing where we're using the same authentication scheme, right? The next supernode is out of the cookie off. Because what happens is that when the token is passed on from zero, it is going to be stored in a cookie locally in our website, right? Then that is going to be the established way that application knows that there is somebody authenticated. So that's why we're using cookie authentication default. So when you sign out, we need to assign u as in. Let asp.net Core handle whatever sign on Aesop in for the cookie authentication scheme. Alright, so that's pretty much what these two lines are doing. But the combination or the combined result is that you will no longer have a valid token, are valid session RBC and as an authenticated user, and you will be redirected to the login part, sorry to the index page. Now if I go back to the documentation, you'll see that we're now at the end. There are no saying, Okay, what's next? So you can start looking at stuff like adding a role-based authorization. So they'll have lots of samples that you can look at to figure out how you can integrate them into your, into your application for node. Or we want to test and make sure that we can force users to login. So I am going to state that for the course's controller, you have to be authorized to, let's say, create the index. We have the details, but I'm going to place an authorize flag or a notation right above the create. You have to be authorized. And then we can control dots include missing using reference. And then in the next lesson we're going to test that out and see how it works. 36. Testing Authentication: Alright, so now I have my application running. And what we want to do is test to see if our authentication is going to work as we expect it to and what the whole user experience will look like. So I can navigate through the website. I mean, I only lock-down a few places and one place that I made sure it's a lot doing this on a previous lesson was the create form four courses. So when I click Create, it is not going to navigate away from my website. So that's that domain that was given to me, right? That's the domain, of course, when we pay and we enroll in a paid plan with osteo weekend customize these things. But for now, this is fine. This now allows a user to provide your email address, password, or continue with Google. They can even sign up. So let me see what it looks like when they sign up. To sign up. And once again, all of this can be customized. You can change the logo, we can extend that registration form. But most of those things come with paying for the service. But generally speaking, all you really need is an e-mail address and password. And once again, it is very convenient because it has the Social authorization or social authentication rather kind of big tin. Or we can put in other social platforms, microsoft, LinkedIn, GitHub, etc, all in this screen. And we can do that without writing too many more lines of code. So it's very convenient. So let us go ahead and I'm going to use one of these tests, email addresses that I have. I'll just say SEM. Sem and my special password, Here's wins, VP, essence W or d one. You can see here all of that validation is being taken care of for me. I can click Continue, and then they will just make sure to test and see if you want to grant consent for that app to access your profile. I'll say yes. And I am getting this exception. I know, you know me, I'm not going to hide the exceptions because it's important that we do this and understand why we get certain things. Now what is happening here is that it is saying that correlation field. And I just suspect that it's chiefly because we're using the HTTP protocol. Https is preferred when we're doing these kinds of things. Alright? So what we're going to do is jump back over to our auth zero configuration for up. And just in case you don't remember how to get here from your Getting Started panel. You can actually, well, you can actually just go to Applications and then go to Applications here. There we go. And then you choose your up. Alright? Then what we're going to do is add the HTTPS URLs to our login and call back. Alright, so the HTTPS URL, if you jump back over to your lungs settings, is under the HTTPS profile, you'll find the two URLs, you'll find HTTPS one, and you'll find the HTTP one. So you can actually just copy both and paste. Make sure you put slash call buck. And instead of a semicolon, put a comma as per the instructions right after the user authenticates will only use one of the URLs. And they're seeing they prefer HTTPS. Alright? So I'm going to put both, but really and truly, we want the HTTP S1 to be used. And the same thing for the logo. Alright? And then remember, once you meet those changes, save changes, the notification would tell it to wait about 30 s. What I'm going to do is in our dotnet, in our VS Code, we're going to run with the HTTPS profile. So I think we did that earlier where we said dotnet run and then we say hyphen, hyphen. Let me just clear the screen so it's a bit clearer. We see dotnet run hyphen, hyphen launch profile. I know we're doing HTTPS. So once we do that, press Enter. Now we can run our application from either one. But the middleware that is in the program.cs is going to always forced HTTPS redirection anyway. So let us go ahead and do the same test again using the HTTPS. You'll also notice that even though you've got that error, you're actually already authenticated because if you try to get back to that page, you will be able to go to the page. So that means you're talking is present. And if you were watching the console or the terminal window, you will see that the Tolkien came Buck and that whole OpenID handshake. So all zeros provides OpenID Connect services. And that's like a handshake between your website. And then the end result of that handshake is your application gets a token and no nodes, it's authenticated. Unfortunately, we haven't set up the logout button just yet, so we're authenticated with no way to authenticate. So what I'm going to do is take this URL and test again, we're using our private window, so technically we are coming in fresh, no authentication as taken place. We go to courses, we can see the courses we could create new. And then we're forced to login or sign up. I'm just going to use the same, uh, cones that we just created admin at SEM with a password and click Continue. And lo and behold, there's no error and we are authenticated and redirected to our secured pH. So it's good to see what can go wrong and understand because OpenID Connect can take some finesse to get used to. But with services like auth zero abstracting away a lot of the complications that are there. It is fairly easy to get up and running with authentication. Now what we need to do is finish up our functionality. We're going to put on that profile page or a little partial over here that says that when you're logged in, so you're using your email address and show a logo button. And the email address it goes to that profile page that we set up. So that's what we'll be doing next. 37. Setup User Related Pages: Hi guys. In this lesson, what we want to do is modify or another bar so that we can have our additional buttons. So we want a button over here that says login, logout, and one that allows us to see which user is logged in at the time, right? So let us jump back over to our project. And what I'm going to do is create a new partial view. And the cool thing about partials is that they can be shared across multiple theses are injected, right? So we'll create our first partial together. So I'm going to right-click and create underscore login, partial dot CSS HTML. And in this file we're going to do something simple like this. So all I have here is an unordered list that has a class navbar, right? So with Bootstrap when we want to have nav bar to the left and a section to the right, and they look very distinctly different. What can happen is that we can establish another UL and then give it the same class, navbar-nav. But of course not all the other classes like the flicks and the grow and stuff that the original sets of navbar items would have. This would actually allow it to get right aligned along that navbar. So inside of this new unordered list, I'm going to have an if statement. I'm checking if the user dot identity that is authenticated user is like a super object that represents what we'll call a claims principle. So asp.net Core applications have the concept of a user principal or claims principle, which is a combination of all of those claims that we discussed. The presence of all of them can be combined to give us a clean sprints IPL, and then disclaims principle can be broken down for the different bits of information. So here we're seeing is the person is the object that claims principle. Does it have an authenticated person? Does it represent an authenticated person? It's always present but without claim inflammation, it would be like an empty object. But that would mean that the person is probably not authenticated if we have no information. So we can rely on this if statement because all of that gets set up during the authentication flow that we have experienced already. If the person is authenticated, I want to nav items. The first one is, and of course remember we have to see another link will firstly the LAs nav item and then the class is nav link and text hyphen light. Because we're using a black navbar, then we actually don't even need to specify the area. Just really copied and pasted, but that's fine. We are going to see that we're going to go to account and profile. And what we're showing is the user identity, dot name. This name is the claim coming from. The tool can arc women from the claims principle that would have been setup when we authenticated. Alright, so that's a nice, easy way to know the username. Well, in this case, using them as the same as the e-mail address of the authenticated user. So we're displaying that and when it is clicked, we should navigate to it profile page, which we are yet to actually create. Then we have the next one, which is the logo button. So if the person is authenticated and we want to allow them to be able to log out. Otherwise, go ahead and display a login button, which is going to go to their cone controller and the login action. And then of course, that would redirect them to the third party authentication service. So now that we have this login partial setup, what we need to do is actually add it to the nav bar in the layout dot CSS, HTML. Css. We can add that we use in this one line and that's what makes partial. So cool. You can create that static section of the sites, the static, static view too much and you can just inject it anywhere that you need to. Just that one line right here, we're just seeing partial name is equal to login partial, that obligation will know that it should go and search insured for any file with that name, and then it will render that section right there. Notice that this is where the original navbar ends. And then after that, we will be starting our partial in which we defined another Navbar section. So let us review this. So this is what the application looks like. So we have all four original URLs. I know we have login to the right. Alright, that looks good. If we click login is going to navigate those here. And then we can go ahead and authenticate using the user that we already signed up with. And then no, it will show me that I am logged in as admin at SCM and I can log out if I click logout, what does that do? It logs me out there. We all know. What we need to do is configure that profile page to actually go somewhere. Because if I click that URL, it's going to give me that same error that we saw the first time when we didn't have a view. So let's go ahead. And configure that. Alright, so back in our icon controller, we have our profile option. And what we're doing is we're returning the view that should exist at some point with a new and what we'll call anonymous type. So this is an anonymous type or anonymous object. There's no real way to determine what data type is being sent. You can see here it's just a, is just it's anonymous. What is a? So now we're going to look at the concept of a view model, right? So what I'm going to start off with is creating a class and we already have some more thing of a concept of a view model with the error view model, I'm going to create a new file. I'm going to call this user profile view model. In some naming conventions you'd see people just say VM and it's a new class file. So dot cs, we start off with our namespace. And that is school management app dot MVC dot models, right? Semicolon. Then we have a public class and we're calling it a User Profile View Model. Now, this class is going to have the different data points that we intend to show. And the cool thing about view models is that they're really used to control what we show on the, on the screen. This is a powerful concept, especially when we want to stop showing all the fields from our data classes on this screen, we would actually create view models specific to each view and then have logic that converts from the view model to the data class and vice versa. I'm not getting into all of that in this course, you can check out my course, complete asp.net and Entity Framework Core development, where I teach you all of those dynamics and abstractions for this, we're just wanting to get up and running and understand how we can build a simple app with minimal effort, right? For this user profile model, what I'm going to do is define properties that will back to what I expect to send over from the profile. And let me actually try this. I wanted to try and cheat the system. I'm going to say User Profile View Model here. Alright, include the missing reference. And then of course none of these exists. So I'm going to look at this. I can just see generate variable name, our property name inside of the class that I wish it was in. I wanted to do that. And then let's go and check the class. And there we go. That's how you cheat, right? Instead of trying to type them all manually, I'm just going to take advantage of the situation That's obtains. So I want to return a new view model. So it's a strong type. Now I know exactly the data type is being returned. And then these are the properties that are in there. They were not there before. So I allowed Visual Studio Code to generate them for me. Alright, so once that is done, you'll notice that they're also being generated with this annotation internal sets, which means that this cannot be set from anywhere outside of the initialization, which is fine by me. Alright? So at that point we will return this view model to this view. This view does not exist and we're not going to be scaffolding. We have to do this one manually. So let us go down to views. And the first thing that we need is a folder that maps back to our controller, right? So views right-click, click New File, and then we see, sorry, not New File, New Folder, folder. There we go. And then we call it a cone because that's the name of the controller. Then inside of a cone, inside of that folder, we can now create a new file and I'll call it Profile dot CSS HTML. Why profile? Because the profile needs to map back to the action called profile. So we've been through this, we did that with whom and about already. The only thing though is that we're creating our own folder as well. Now for the contents of that page, I'm not going to try and get to creative. I'm just going to look back at the sample. So if I go back to the all zero management dashboard, remember that when we started off, we could have gone and download it as sampler viewed the sample on GitHub, right? Someone to save you on GitHub, that's going to launch the project on GitHub. And then when I navigate down to the week starts large sample slash view slash, home slash profile that CSS HTML. We're going to see the view that they used in the sample. I think that's good enough for us to get started. Alright? So we want this sexual, I mean, you can take the entire thing so we can just copy all the contents. And then of course we have to change the namespace reference here because that's user profile view model is in a different namespace, but then everything else can remain the same. So when that operation is done, this is what we end up with, right? So in that profile dot CSS HTML file, I have model and then namespace relative to where my view model actually is. And then I have that same title, then everything else is the same. With all of that done, I'm going to refresh my application and take a look at it and that's what I get. Alright, so that's user profile admin at SCM, that's the email address. And this would be the profile picture coming from auth zero. So that's what we mean by cleans. This inflammation was at one time, but every time the user authenticates, this inflammation will be present in their claims information. Alright, so now you can go ahead and experiment with shutting down different parts of your application because it's all about security. And it's all about who can do what and why. 38. Finishing Touches: All right guys, so in this lesson we're going to clean up our user interface a bit. And I'm going to start off with the layout to pay. So in our layout, which is in the shared, There we go, I don't want anybody who is not authenticated to be seeing any of these links. First of all, I don't think the privacy link needs to be in the navbar anymore. I would probably more wanted to put that. It's already done here in the footer. Someone's remove it from the top nav. Alright, and it's removed that then I don't want any authenticated user to be able to see the courses, lecturers and students Management section. It guess what? I can use the if statements that we have in the login partial here. I can see if user identity dot is authenticated. Then I want that section. So I'll just put all of these LI tags inside of that if statement. So that just goes to show how easy it is to make our display dynamic based on the person's authenticated state. We can hide menu options and we can manipulate it based on whether or not this person is logged in. And we can also go ahead and lock down some of our controllers. So for instance, if we really don't want anybody to see it, but they would still be able to navigate if they knew the URL right there, would still be able to say a website slash courses slash index and get there. So we want to not only lockdown the get, sorry for the cre, it's below on to lock down everything here. For the course's controller, we can just put an author. I started at the top of that entire controller. No, nobody can get anywhere near here unless they're authorized. Alright, so we can do that with all of the controllers that we want that kind of blue ball restriction on. So I'll do that for classes management, and I can do that for enrollment. And of course we have to add are missing using statements. So let me go back to classes and do that. There we go, We can leave home. And then sometimes what you want to do is be very explicit that this particular controller can allow anonymous. So there is actually an annotation here that says allow anonymous, which means that anything that is inside of this controller, or if you put it above an action, it means that anybody can get to that particular address without needing authorization. That is the default setting, but sometimes you want to be even more explicit. Alright, so we will authorize and students, we will also authorize no, no unauthorized access is allowed to any of those routes in those controllers. And even then, even if we lock down the entire controller, but we wanted maybe just one to be accessible than we could easily go above it and say, hello, Anonymous, I love above the action that is, and allow anonymous. So those artists are things that you can do to control access? I did not put in the additional links. You probably already did that, so you don't have to do this. But I didn't put in the class. Let me see grass management here. That is to the classes controller. Alright. And I didn't put in enrollments, and I probably don't even have to put in enrollments directly because we're going to be writing some custom methods for the enrollments tables because that's kinda relative to class management. So I think that this is a good legal to have. And so when we come back, we'll just check in the fact that we are at another milestone. 39. Add To GitHub: Alright guys, so now that we've hit another Muslim, let's go ahead and commit all of our changes. We can see added zero and user UI. Alright? And then we can commit and push. And I'll see you in the next section.