C# Web Application Activity 2b-1 Registration and Login Forms

[Music] hi in this video we're going to do some things with csharp and asp.net to create a login screen and a registration screen so you can see the goals in front of us here we're going to work with routes and controllers we're going to add models and views and this will end up with an application that has a login page and we're going to design it kind of in a stepwise fashion so the first version will be very simple then the second will have some hard-coded user values and when we reach the end we will actually have a database that we can query and find out who is actually a user and who is not and validate their login so that's what we're going to code here in the next few videos so let's get started here in visual studio i'm going to create a new project and as before we're going to create an asp.net project with c sharp as our language now for this project i'm going to name it as register and login app because really that's what it's going to be demonstrating here and so we'll choose create now for the options we're going to select here version 5.0 that's the current version of asp.net i'm going to choose the model view controller and strange as it may seem i'm going to leave no authentication here so there are two options for creating authentication one is that you can use their orms their object relational model or their mapper i guess they're called and that will create your database for you automatically and that is frequently a good choice for people who are in a hurry however we're going to build our tables on our own and we're going to write our own sql statements because this just kind of gives you a better background on what's happening inside the app and so we're going to leave no authentication selected even though this is an authentication app now i'm going to leave the other options as you see here and choose create so it looks like the app is done building so let's close the welcome screen and let's open up the folders here and i'm specifically interested in the folder called controllers this is where we're going to start so i'm going to right click and add a new controller here and i'm going to call this thing the login controller i'm going to select mvcm empty and choose add so i named this thing login controller and choose add so this looks familiar we've done this in previous lessons if you haven't looked at those go back and see what the playlist shows you of how to get introduced to asp.net and visual studio so what we're going to do next is we are going to add the model for our program so in the past we have opened up the views folder and the controllers folder and now the models folder so the models are of what you have in a project are classes and so let's go ahead and open up a new item here so i'm right clicking and choosing new item and selecting class and the object that i'm interested in creating here is a user because this is about user authentication so i just type in the user i don't worry about the extension it'll automatically add that and choose the add button okay so you can see on the screen now this is the standard code for a class in any kind of a language you have a descriptor at the top so for this user class i'm going to give it three properties and the best way to create a property is just type the prop extension or shortcut i guess it's called and then press your tab key twice it will give you the properties and you just have to overwrite them so the first property is the id number for a user and that's an integer notice the get and set are automatically there so that's how c works with getters and setters uh we're going to use a username that's a string and then a password as well which is also a string and so three properties will define what a user is now i'm going to make one small correction here i'm going to rename user as user model just to be more specific so i'm going to right click on the user object in the solution explorer and rename it as user model so i'm going to switch over now to the login controller and i'm going down into the action called index it's the only action we have for this controller let's right click in here and choose add view and then we're going to choose razer view the second one and you notice it says here in the notes that a razor view with or without a strongly typed model so now we're going to since we have a model now we're going to use the model in this view so let's go ahead and choose the add button and be careful not to just select the ok button yet we are going to leave the name as index so the predefined types of views that you can use and templates here are create delete details edit and list so in most forms that you think of in a web form or any kind of an application these are the crud applications these are the database kind of applications things so there is no login form here and that's really what i'm going for what's the closest thing that you can come to when you try to log in well a login is a lot like the create user form because it's going to have a username and password in it so i'm going to start with the create template and modify from there now the since we've chosen a template it says okay what kind of a model are you going to use in this template and you can see that there are several including the one that we've created called user model so i'm selecting user model and you can see that it is one of the things that the program recognizes as a valid model in your in your solution now let's go ahead and choose this create as a partial view so it's going to fit into the layout nicely and then choose add okay so my form is now created let's take a look and see what is on the screen and then what is in the project folder so you can see on the screen it's mostly html code but let's take a look at the top of the form here so in line one this is an important line you'll see it on almost every kind of a view from now on in your projects it says at model so that yellow highlighting is telling you that this is some cs code some c sharp code and it is going to define what item is associated with all of the input form items on the screen so you can see registration and login app that's the name of my project dot models tells me what folder that i'm looking in and then finally the user model so this says that one user will be passed along to this form and then it will also be submitted from this form so a user form is associated here now what's the form you can see that it's a form that has a a bunch of divs it looks like and there is an input so input for the value of id here's another input for the user name and then the input for the password so that should sound familiar those are the three different properties of our user object just to remind you what the user object is i'm going to open up the user model and see these three properties so we have id username and password so the code that was generated is automatically going to create these data entry items for every property in the form now i'm just curious to know what this looks like so i'm going to run the app and see this thing in the browser alright so we got the app up and running now and you can see that it's the default uh application that we've seen before it has home and privacy so since there's no link in the nav bar we have to manually go find the controller that we just created so the controller as you might remember it was called login controller so if i put the word login here and press enter then i get this form that was just generated so it is indeed a form for creating a user so it has an id username and password so it's pretty close to a login form we're going to modify it so that it does become a login form so we'll change the title instead of user model we'll say please log in we'll delete this id section and we'll change this data entry here from a free text or plain text password to a password type and instead of the create button we will have a button that says login so it will become a login form so let's go ahead and change those things i'm going to close the browser and then start working here on this form here so first of all i don't really need to see the id number we don't provide the id number when we log in so i'll just delete that and then for a username we can just use it as the same the type for this password should be added here so the type is a not a text let's go with password okay so we'll change that now down here for the button it says the value for the button is create so let's change that to login and then the top where it says the h4 it says user model we'll just say please login all right so that should be enough changes here to make it look like a login page so let's go ahead and run the app and see what we get hey great the app is running so let's go to the login url and let's see what we have so now we have a login form it says please log in give me your username and password so what what happens if i do provide something i'm going to provide some junk here and if i look at the password you can see it is definitely junk and choose login so this login should have the action up here of index so let's see what that does we're looking at index and when i click index it brings me right back to index so it's kind of a circular loop here however we have got to make a few more modifications and then we're on on the right track so let's first of all change this action instead of going back to the same form as it is let's change this to something called process login so that's an action that doesn't exist yet so that would cause an error but we're going to fix that if we go back to the login controller we can add a new action and we'll call it process login so let's start off with the basic version of this process login we'll create the function as a public item and we'll use i action result as the return type because we're going to return another view another another web page i'm going to call it process login and then i need to have some kind of a return set up so we're going to return a view and i'm going to send the browser to the next page which i'm going to call login success let's assume it was successful now there's a few things missing here but this is the basic idea is that the form is going to resubmit to the controller and the action is specified as process login now we need to have a item that is sent to us so we can actually process the login so i'm going to tell it the thing that i'm expecting is a user model so i type in user model and then the word user model in lower case is probably okay so what is wrong here we've got the angry underline and it says i don't know what user model is well we can probably fix that with some potential fixes i go down to the bottom and it says i suggest that you use the uh this uh this class here called models this folder so if i choose that i have a new line on line two that says i'm importing the models so now i can see the user model and the error goes away now when i get a success message i'm going to have to pass along this thing so i'm going to give it some more data so i'm going to accept a user model and then send that as a parameter to the next view so the call or the return statement here is showing two properties now the first property is the page that i'm looking for the second property is the data that is going to it so login success needs to be verified of course we haven't fixed all that problem yet we have to do an if statement to see if we actually got the right username and password let's fix that now and let's put an if statement in here so i'm going to set up an if statement let's say we're going to ask if the username so usermodel.username equals some string and also the password has to equal some string and if that is true then we will proceed to return this success now let's give ourselves a hard-coded username and password so i'm going to just say that the only person that can log in here to my app is bill gates and i'm going to make up a password called big bucks all right so that is the only user right now that will actually work on the system now if this is successful we should put the return statement in here and say yes you are now going to be sent to the login success page however if that is not true it means if we have an else statement then i'm going to paste in a different page let's do login failure and that will give us another chance to tell the user that nice try but it didn't work so i've just created two new page references that don't exist yet so let's create those next so i'm going to save this page and so now we can use the same process that we did before so i'm going to right click in this area and choose add view and i'm going to choose the second option let's call this thing login success now i'm spelling this letter for letter exactly as i put into the statement here so capital l capital s and i might as well tell the user which which item that was i'll use to log in so instead of sending a create form i'm going to select the details template so the details template just shows all the properties of what your object is well the object that i'm sending is a user model so we'll select that we'll select the rest of these check marks as seen here and choose add hopefully this works okay so the code is now generated let's look at the form that was just created so there is no input form anymore it's just displaying data the top line says that we are using the user model as our object this is where the data is coming from so it's expecting that to be passed to it and then it says i'm going to produce a a bunch of data it's just going to show each item in the list so where is the most important part here i have something called display name for and then display 4. that's kind of a strange idea of how this works but let me let me simplify it for you and then we will revert to the code that we have here so i'm going to comment this one out and say we could write this in a format that would be more understandable let's see it didn't like that comment how do i do comments here is it no it is this is html so i'm going to have to use the two arrow or the arrow exclamation mark and then two hyphens so that is the html comment so for the replacement i'm going to put in at symbol put in a capital model and then a dot and you can see that the properties of my model are provided for me and so the first thing i'm going to choose is id so that will print the id number now what's the difference between what i commented out and what i have here really in our case there is no difference either one of these will work and so if you like this one line 12 which i kind of prefer because it's so simple that's the best way to start when you're creating these forms however there's a good reason why there's this strange function that's going on here so when we have a arrow function that says take an input to the function as model and for the return value do model id this processing of a function call actually will make the data format correct and so if your display name is somehow defined differently than the property name then this will work better for our case right now there's no difference so i'm just going to leave these two in here for right now and you'll see what happens when i run this so let's go ahead and log in and we'll find out if this login success works all right so the app is up and running so the first thing i want to do is go to the login page so i'm going to type in the word login and remember that is the index action on the login controller so it says what's your username well i think it was bill gates is what i said or was it one word uh let's see i'll find out and then for password it was big bucks i remember that let's see if that's the right way it's supposed to be spelled yes all lower case and let's choose log in and let's see we have a problem obviously i typed in something wrong and i have a an error so what's my error it says it says the view login failure was not found obviously it tried to show me the failure page and the failure page doesn't exist so let's back up and i'm pretty sure that i spelled bill gates with a single all one word and then we kind of tried again let's see big bucks is his password i'm going to check to see if i spelled that right and now i log in this time i got a success so what do we have for our username and password you can see there that it's spelled out for us so everything and this code over here on the left is shown over on the webpage now on the right so if i wanted to change the display type then i could go and modify the rest of these properties to look like the one that i did for the id but for right now let's just say that this is the success message we better tell the user it was successful so instead of just showing them what happened i'm going to put up at the top a message so inside of the h4 i'm going to say login successful all right let's go back into the controller now and let's add the other items so we're looking for login failure and so let's go ahead and right click choose add view select the razer view choose add let's change this to login failure so that's the file name let's also say we're going to show the details of what we sent so this is the user model and then finally the add button all right so we got the form up this one here looks a lot like the previous one if you look at the title though we have login failure listed as the name and if you look over into the folders called views you'll see login has now three things it has index login failure and login success so we want to tell this is the problem now so let's say you have failed me for the last time so i'm going to tell them on another line that says the following information is incorrect now i don't care about the username is i mean the user id so i'm going to highlight the first two sections here for just showing the id and i'm going to delete those so it'll just show the username and password so let's try this again we'll run and this time when we do a login failure we should see a message all right so the app is up and running so let's go and type in the login url again and we have a username and password so i'm going to type in some gibberish here so we're guaranteed not to have a successful login i choose login and now we have the sa the failure message that shows up it says you have failed me for the last time the following information is incorrect and then it shows what the model was as it was sent to us now the code has also generated some links to us so it's expecting us to create more views such as we can edit this information or back to the list so back to list let's take a look and see where that link is leading to us so back to list is supposed to send us to the index option so let's see what that is so our index option is the login form and if i click on this where it says back to list it stays here so this is a success and failure login that seems to work however we don't have any real data we just have bill gates as our only user so let's stop here but the next video we will create a database of users that we can look up and see if they're actually in our system and if they are then we have a successful login and so database integration is coming up next you

Channel: shad sluiter

Views: 12,902

Rating: 4.982533 out of 5

Keywords: android weather app, weather app, android development, android studio, weather api, android weather app tutorial, mobile app development, software engineering, android retrofit, weather app android studio, android volley, android development java, rest api java, volley rest api android, volley rest api, volley library, volley library fetching json data from url, volley library android studio tutorial, weather app android

Id: VW_Rce5noaM

Length: 21min 59sec (1319 seconds)

Published: Sat Jan 16 2021