ASP.NET Tutorial 2- How to Create a Login website - Validation Controls ( Registration Page )

hello guys welcome once again in the last video I have given you brief introduction about asp.net and I have also shown you how to make your first asp.net website using your Visual Studio IDE so in the last video I have shown you how to make this simple website this is by default created I haven't done anything to this website it is default by default created by Visual Studio and in this video I will show you specifically about dynamic pages so for example I want to show you about I will click login and when whenever you go to some website for example Facebook or Google or gmail it has some login page so for example you gives your login and password and you can go inside the website or your own account and there is something called register option also so when you click register you can register yourself to the website so in this video I will show you how to make this registration page so for example I write here username anything and email ID and a password and confirm password and when I click this button it says some message if there is some mistake I have done a while filling this information it says password must be 6 character long or I when I does not enter any name or email it shows me these messages so I will show you how to make this kind of a registration page and it will also show these messages using the validation control which we are going to use in the in the registration page so this video I will start with making a new fresh project and this time we will make a empty website so I will go file new website and last time we have chosen this option asp.net website but it automatically generates some content for us and for learning purpose let's start with creating the empty website so that we will be able to create our own pages so I will click empty website and you can give the path of the website also and give the name of a other website so I will say login page for example then and I choose this empty page and of course our language is visual C shop and I click OK and we'll create our M empty website for us now let's add a project of not a project but a webpage to it so I will go to I will right-click my project and I will click add new content and I will say web form and this name I can change so for example I will write the gist raishin dot aspx okay and i click add and this will add a page by default it's in the source mode source code you can just click this design mode and it's nothing but empty design so what we are going to do is we are going to add a table so just go to this table here and click insert and for example we want seven rows and three columns and I will click OK add till creates seven rows and three columns was so first of all let's going on following this information for example I want to write user name email password and confirm password okay so I will copy this user name and paste it here second is email I will copy this and paste it here third is the password I will copy and paste it and the fourth is the confirm password field so I will once again copy and paste it and there is one more field I want to add here is for example I want to add a country country name which you live in so I added this country and right now you can see there is some content here so I what I can do is I can just select this selection I made is pressing the control key and selecting one for example one row second this is a cell not a row and you select all the cells and what you can do is you can align these cell content by going here align and for example I want to align this in the right so I can align this in the right right like this okay and I can also change the font and other things from here header height and everything okay so you can do it from this place and individually if you go here so I can what I can do is here I can change the style title and ID of these this thing okay so now what I will do is I will add some text boxes for entering the information so I will go to the standard tool box and I will search for the text box from here and drag and drop into this cell okay and in the same way I can drag and drop to the second cell for email third cell for password both cells for confirmed password and the country name generally we have a drop down menu so let's browse for drop down list this is the drop down list and drag and drop into your cell and you can choose the items in the drop down list so you can add as many list item as you want and for example the top item I want to add is select country second item is the name of the country USA for example and third is UK Otis Germany and the fifth is France for example and you can add more names of the country ok and I click OK now I want to align also align them also so just select all these controls and what you can do is you can go to the width and provide the size of your text boxes and combo box I'll write 1 8 p PX PX 4 pixel and I will click enter you see the width is all automatically changed so I will click all this control and then I change the width 180 P one is TPX okay once you have done that in here we will add some validation control so whenever you submit your form and if some information is not correct you will be able to see some messages okay so I was just adjust this a little and in here I will add validation control but before that we need to change the ID names from here okay so just the ID name of this textbox we name it as UN for username and second text box ID is email for example third is pass pass for password both is our password repeat password and fifth is drop down list country okay so we know that these text boxes and drop down menu indicates what field now let's add validation field so validation field is nothing but these field which appears when some alert or some wrong information is given by the user so I will go to this validation and here I will choose requested field validation okay so I will drag this requested field validation one by one to my cells corresponding to the user name/password etcetera okay and now I can change the message error message which I want to show so let's go on these lines itself so for username I want to show the error message as so just select this required field validator and go to the property and go to error message here and just write your message whatever message you want to show second was for email I will just copy it and second validator and paste it here and third is required password so I will go to third field and paste my error message here and fourth field was the confirm password okay so I will just copy and paste it here if field we have added by ourselves so let's give a message select a country name okay so this is our message and you can align them these fields also just select all of them and just go to a line and justify this time left okay so this is the message I can also change the font color a foreground color of these this messages also so that it shows in the red okay so just ctrl and select all this these and go to for color and select red so it will show the message in red okay once this is done we will connect our requested field validator with this text box so how will it know that it has to show this message when this field is empty so just select your field validator and just go here and we will search for control to validate so this is the control which it will look for to validate this message so for the first control this is username so I will choose textbox username second is for email so just select this required field option from here and go to control to validate and choose textbox email third was for password so text was password both was for repeat password and fifth was for the country name drop-down country now in here we also need to provide our initial value because if user doesn't select anything then we need to show this message also so the initial value will is here is select countries just open this and copy this select country from here and just select this option once again required field validation and in here in the properties search for initial value and paste whatever you have copied from here and paste it here ok so this is also done now our password we cannot show it to the outside world so we need to protect our password so what we will do is we will select our text box for the password and select text mode and we say it's a password and confirm password also it once more select your confirm password text box and we will select this as password ok all this is done now for example you need to confirm password you need to check whether this password and this password field matches so whatever you have entered in this text box you should enter in this text box so how will you validate that and confirm that your password in these both field are same so there is a validator for this also which is compare validator so just choose this compare validator and drag and drop in this cell where you have confirmed password is required and drag and drop here and in here change the error message so you can say both pass word must be same okay and what you can do here is just select the first option which is required field and click arrow button and press Enter so it shows on the second line okay and just select it and change the font of this also for color also red and here we also provide the control to violet validate control to validate is this field which is textbox repeat password' and the control to compare also we need to provide so it will compare with this password field so we will choose this control to compare and choose the textbox password okay so this also we have done now to validate the email also email somebody can write his name and this will not be a regular email ID and you also want to validate your email ID of whatever user have entered the email ID it should be a valid email ID it should not be any random text so you can also validate that also by using a validator called regular expression validator regular expression is nothing but it just check for the pattern for example it checks for the email pattern and if user have it matches the pattern of email then it will say okay you have entered the right email otherwise it will show the message so drag and drop this regular expression validator in here in wherever you have email is required requested validator and in here we can also change the message from here we write you must enter the valid email id okay and we can change the for color of this also once again really quick okay and I will choose select it and from my arrow keys I will just press enter here okay now map my messages are done now what I need to do is I need to submit this form so for that I will need a button so I will drag and drop a button here which will submit my form so I will change the text of my button as some submit and for example I need to reset all the fields also so what I will do is I will go to this HTML fee field here and I will choose this input reset button I will drag and drop it here and it already have the text we said so I will not change the text of this and now what I will do is I will just select this button and I will double click it so when I submit my form it should show me some message that if all the fields are correct then registration is successful so I will right register okay so it's not to register but response dot right and on the successful submission of your form whatever method you want to show just show it here so you can SH right this here is your registration is successful okay let me make it bigger so you can see it and now I think you are ready to run the program if some error comes then we will see it later so just choose this start debugging you can run your program like this also just click this button or second option is just right-click your project and say mu in browser and it will show a message you say yes and you can see whatever forms you have here the gist raishin aspx you can see it here and it will open your registration got aspx and it's showing some some error and it says that the control to validate property of regular expression is not fills yes we have not given the property for this regular expression field you must enter the valid email ID but we haven't linked it to this control so what we will do is we will choose this control to validate and qu we will choose textbox email ID and the second thing is what kind of validation we want to give to our validator so we want to check email ID with this validator so what you need to do is just select this regular expression validator from here and go to the property and search for validate expression this validates expression checks for the pattern of for example the email ID there are some other options also just go here and click this button and we will search for the internet email address regular expression just select this because we are validating internet email ID right and click OK now when I run the program this time I will run it from here and say ok and this time you can see your registration page right and for example I write a username programming knowledge for example email ID let's enter a wrong email id some text random text and then immediately you see here you must enter a valid email ID then we will enter a password and we will repeat our password once again and we will choose our country ok and we will submit the form and it says you haven't entered the valid email ID let's enter a valid email ID for example X Y that at the rate gmail.com and let's delete this confirm password and let's check whether it shows the message or not yes it so shows that confirm password is required for example we enter some random text which is which does not match this password and now it so shows both passwords must match okay for example we select no country then it says select a country name for example we doesn't select a username it shows username is required and if everything is perfect you can submit your form and you can see the message here your registration is successful so in this way you can create a registration form using your validation keys right so I hope you have learned how to create a registration page and in the later videos for the videos I will show you how to connect this form with the database and how to save all these values which you enter here into the database and then make a login page so that you can validate the data and then login into the site so just keep watching these videos and please rate comment and subscribe and bye for now

Channel: ProgrammingKnowledge

Views: 909,211

Rating: 4.8454547 out of 5

Keywords: ASP.NET (Software Framework), C# (Programming Language), Website (Ontology Class), Google, .NET Framework (Programming Language), Tutorial, Microsoft Visual Studio (Software), Intro, Google Search (Website), First, Introduction, ASP.NET Tutorial, ASP.NET, Login website, How to Create, How to Create a Login website, Validation Controls, Registration Page

Id: 20In2FA59A8

Length: 28min 23sec (1703 seconds)

Published: Tue Dec 10 2013