ASP.NET Web Forms website Part 1 - Connect with MySQL database connection

ASP.NET Website creation example using some limited HTML, ASP.NET tags, C# code files, and connecting to a MySQL database.

Here I did a step by step demonstration on how to create a semi functional ASP.NET Website. There's no heavy emphasis on HTML, there is no CSS, however I do show how to add textboxes, buttons to a web page and then tie the web application to MySQL Database for authentication.

If you want to see how to harden the Web Forms login page against SQL injection you can take a look at part 2 video: https://www.youtube.com/watch?v=glXvh...

If you want to see how to use a slow hash function such as PBKDF2 salt/hash and have more input validation code then look at the part 3 video: https://www.youtube.com/watch?v=AR7_S...


Here's a brief time table of contents of what's happening in this video:
0 min - Brief verbal overview
1 min 20 sec - Creating new project and three aspx files.
4 min 50 sec - button, textbox creation using asp.net graphic objects.
11 min 50 - opened MySQL workbench, created database and table for website to connect to.
16 min - added MySQL.Data dll to project.
16 min 40 - add user/password to MySQL workbench.
20 min - create connection string in Web.Config file.
22 min 40 sec - update MySQL table for auto incremental feature.
24 min - created code for Registration aspx page.
30 min 40 sec - registration demo on the application/MySQL database .
33 min 30 sec - coded user login credentials in default aspx page.
40 min 30 sec - update user login aspx page.
42 min 10 sec - log in demo on application/MySQL database.

---

Closed Caption:

yeah
hey guys it's me i'm going to do a quick
tutorial here using asp.net web forms to
make a simple website
it's not going to be so much graphic
heavy with CSS or any other pictures or
jpegs actually included into the website
but it's going to have the verb . when
it comes to user authentication having a
login page having the registration page
and having the database or having the
application itself connect to a my
sequel database for this example of
course you can use Microsoft see her
wearing or any other relational database
but for me I kind of firm
mysql so without further ado guys let me
go ahead and jump right in
you can download visual studio express
to his house before the web for free
from microsoft website that will come
with the registration key because most
of these downloads for express is
actually just a 30-day free time a free
trial but if you actually have the
registration key you can enter that in
and the Express Edition will be yours
for free for the rest of your life
so we're going to do here is create an
empty web application and we're going to
create a new project called him back
demo and we're going to have three pages
either we're going to create right off
the bat without doing coding
we're going to have the default page and
with web forms words the default page is
the actual home page you're going to
notice it going to have the post fix
aspx the show aspx fathers were actually
you put HTML content CSS JavaScript or
links to those files but there's also a
code behind page
the cs the default aspx es where you
would actually have C sharp codes so
here's where we actually have a code
looking into a database to actually
check the credentials but before we get
there let's add a couple more pages
there is a registration one and we're
going to have a login page the page
so what we're going to do here real
quick is it was in a title itself
I'm just going to kind of make a little
note here or just right we're at logged
in
I'm going to do the drives in one so
whenever I click on each page want to
actually run this project on the exactly
where I'm that because again with more
graphics let you tell me where I am on
within this project but this simple
statements will do this is the home page
and do this for administration will
continue on this is the creation are so
one more thing before I get too far into
actual creative text box i'm going to go
ahead and actually create the links that
you can do that with this at a heat a
tag here and hof basically where you
would actually point on where you would
actually put a a little word here that's
going to become visible
it's going to become a link an actual
page so for example registration page I
can have a link on the navigation
portion and the home is going to link
back to the default aspx because the
default aspx both forms is considered
the home page so we have that there were
going to create a little space in
between
and if the person clicks on this next
one
ok what the pound is in a second on
registration
basically it's pointing back to the same
for Georgiana's pound basically soon as
a person clicks and it brings it back to
the very top of the current screen so
that I party could do without that but
then we just kind of put it there for
now the default page here is also going
to have the same items here but since
we're on the default default page now I
can just put a pound there and here i
would actually put into registration .
aspx
so now i actually have some simple links
kind of going between those two pages as
I broken release version
it's not going to have almost anything
at all
so just bear with me here is the
homepage registration this registration
page and go back here
ok nothing pretty now let's go back here
and what we're going to do now for the
default page which for me is going to be
considered the login page
what the most websites have for a login
page they have the person actually
entering your username and your password
so let me go ahead and just create a
username and password text box and we're
going to be using asp.net text box
filled here we need to create an ID
because whatever we specify this idea is
what how we're going to reference this
text box in actual c-sharp code text
this could be blank actually but just
for demonstration purposes of 2 i'll
enter something here
and basically that will just say to the
person on his page comes up
enter your username here very
explanatory I don't even know why I
actually said that out loud
so I hear we're going to say to enter
password
we're going to do the same thing as
above text box this time is going to
have the idea of password text box text
and to pass over here
1answer were and we're going to do here
is create an actual button click
we're going to create a button as you
say as soon as our the user actually
inches in his username and password
needs with its of the web application
that i'm done i check my credentials now
so we're going to do a submit button 2x
will call it the login gonna tell you
run out server and this is important
because basically this code is going to
be run once the application is sent to
the server and c-sharp code will be
executed there
the one difference between text box and
the bun is dead since but is a button is
an actionable event and takes ball has a
cannibal events for housing in terms of
like text change within it but for the
purposes of this login page as soon as a
person click Submit
I wanna cook this button into a method
called submit event method and i'm going
to create a method with that same name
was in the code behind page and that's
how we're going to link that button
click to the actual code itself so we're
going to be protected
boy it's going to contain the same
parameter arguments as any of that
and there
when in doubt this copy what's in the
page you know that happens to be
children by default whenever you create
a new aspx far
so there we have that for a default page
for the registration page
it's going to contain a little bit more
than that just because whenever you log
into or register for work except for the
first time - probably ask you some first
information first name last name email
phone number
I your username and your password is so
i will take a little longer than I
wanted to be but let me just go ahead
and enter that here instead of using
those parents that could also use
asp.net label field that's also
available but always I forgot about that
when i started so then we just kind of
continuous what I'm doing here and from
here to text boxes i'm just going to
have the blank not venting their as i
did in the default page and in the
interest of saving time we're going to
have to copy this i will set up another
good 5-6 times just for all the data
fields and actually need to see if i did
a little bit of overkill here and her
middle name
he's going to be literally walks
fortunately the last name but everyone
is going to ask all of this information
but just for this demonstration I'm
going to do that okay guys
bear with me
- member username and so I got this
extra one here on me this time just go
ahead and do that here
xbox
username along guys going to be just
like on the default page you're going to
create a button
soon a person actually kills in
everything he's going to want to
register so i'm going to call this
register button
so we're going to send the code onto fun
to say
register want people make a constant
your website on that server and again
we're going to hook this into a message
all the register event cap off that tag
there
so again cook the registration page here
right click your code and here we're
going to create that modeled
okay great now that we got that the
website is still going to look ugly but
I think you're going to see some of the
text box fields that i just created and
here was in a registration page you see
the first name middle name last name
I don't need to read the rest of them
you guys now and here the username and
password and if you recall
I'm in the text field over here
I put into using here and your password
here and that's what comes up on the
actual GUI itself or on the website
itself
so now that i have that now we're going
to do it
I actually create the database itself
and how we're going to do that is by
using Microsoft or mysql workbench i
have version 5.2 but currently an orc or
website there is a 6.1 available
this should work just it as good with
6.1
so let me just go ahead
it and connect to my c for what
workbench we're going to create a new
schema for this web demo and we're going
to create new tables for it too
so now they were here I do or are you
going to create a new connection
i'm going to call this web at demo
connection string test the connection
credentials
everything is good
click OK there's my new connection
string as french again you can never be
too safe all the time
cited
there we go so you see here is a list of
scheme as i have over here
I just create a new scheme of Linda
called web app demo apply apply there it
is there's a scheming I now open it up
click on table there's no tables in yet
because we just created the scheme and
we're going to add two tables are going
to have a user registration table and
before we click apply you do need to
specify at least one column me
well so we're going to just create a
user ID type and it's going to be the
primary key without that I don't think
the master war which will allow you do
create we're going to create a new table
I user address
so for example if your service website
where you actually mail your products
you can have a separate website here
our separate able to actually have the
users actual dress
so same thing and previous one the
primary key to being to user ID apply to
do it again
everything successful and now we have
the user to user tables here but now we
actually have to go in and fill the user
table actual data for example
remember the registration page i had the
first name last name middle name
so we're going to go ahead and do that
real quick
alright guys now we're going to go ahead
and actually create the other columns
for the user registration
this is going to have all of the data
that we need on that there's a text box
for in the registration page which means
there's a first name last name middle
name
and so on and so forth so we're going to
actually want to create that here so
we're going to do here is just go to
right click on the actual user
registration table alter table
i'm going to go ahead and start creating
those extra columns
username what I'm going to do here which
is a big no-no is actually stored
password in plain text just for
demonstration purposes but i'm going to
also have salt and assaulted password
and this is important for security later
on but that's going to be discussed
later on in this video so let's go ahead
and apply apply changes were added
so now if you go to root user
registration you'll see all of this data
here that's going to pass him from the
actual registration of a user on your
website
so going back to the actual project over
here where you're going to actually have
to do is add a reference to the my SQL
data dll
by default your systems not have that
but if you go to the Oracle website you
can download the mysql connector i
believe it's called and once you
actually have the downloaded and
installed you can go to do
reference of a kind of project add a
reference
go to extensions and you'll see mysql
data dll
this one's version four point oh as you
can see it the first line here to end
this one is working too . no let's just
grab the latest
now we have the deal of reference in our
project
now what we want to do is actually
create a new user within the mysql
workbench just to kind of work
specifically for this web application
and i'm going to show you how to do that
real quick if you actually go to your
mysql folder over here
what is so we're going to see to command
line I guess what he called it two
options over here you can select either
one is going to select unicode is going
to ask for your password your default
one that you had a default when she said
with the wife is asking for you install
the mysql workbench and here's where you
can actually create a new password for
your our new user into your mysql and
just to show you guys the actual
creation of one if you actually typed in
select user host from mysql that user
IDs are just test user profiles that
actually have here and we're going to go
ahead and create a brand new one for
this project but i don't have everything
memorized so i actually have two
separate note here several possible
projects to say was the syntax not
actually how to create a new on account
into mysql and it's these two lines over
here
so what we're going to do here is just
kind of replicated or going to create a
new user and a new password for this
person
so you can go ahead and follow along
grant all privileges on and here we're
going to actually create a new user name
so here we're going to create what we
have web app download them using web at
then the user actually I think there's a
character limit and design when it we're
running across it before so let's just
say let's just call it a word user to
save time and then we're going to finish
it off with identified by and here's
what the password is going to be with
grant option
so we actually create this and we're
just going to all the user 2014
ok so you see that has been accepted
if I actually run this select user post
on my SQL user you'll see now at the
very bottom there's a web user right
there
so I'm just for the demonstration i'm
actually going to just shut it down
but obviously whenever you have your own
application this is a big no-no actually
got it down
let's go here and the user name is or
the user password is 2014
so it's going to become important later
on when we actually create the
connection string into the web.config
file because that's what we're going to
actually create the connection string to
tie it to this user of mysql workbench
to be able to write and connect to data
bases was into mysql workbench
so if we actually go ahead and go to the
web.config file will continue anymore
coding here we're going to actually run
- to say set the connection string so
will your configuration bracket we're
going to have a connection strings and
here we're going to add a few more items
and name will fill that in later after
case
so this is the name of the connector
gender we're going to use it on
we're half cons drink and here we're
going to reference of metals in the deal
all we're going to reference to mysql
that data . my SQL client and just
realized this is lower case
so now here we're going to actually
we're friends server a user ID password
and the database so the server itself is
just your your host machine when you
downloaded a magical workbench you
actually have installed on your machine
the user ID is the user that we just
created using the unicode command prompt
for mysql it's going to be web user
password is going to get past we created
and just for informational purposes
again this is not good the way it is
actually stored here and plain text you
want to encrypt it another I
is server technique exactly encrypt your
web.config file and actually able to
decrypt it to actually read the data but
just for this demonstration we're going
to just to show it like this and the
database is here we go to web demo
that's what I connect
ok guys i think pretty much up to this
point we have all of the groundwork
ready to go for the actual applications
start accepting user input and writing
the code now to actually connect to the
mysql database so i'll get to that in
just a second okay
now we can actually start coding some C
sharp here but actually I just recalled
before i get into that one of the things
like you want to do with my registration
table here is to go to alter table
go ahead
up already but if you actually look over
here the user ID you'll see several
columns here and went to the one thing I
want you to actually do is if you
actually look at AI o incremental if we
actually give our check that box off and
apply it
this is going to help later because the
code i'm going to show you right now to
write to the database i'm not going to
actually implement the user ID and since
this is a primary key when I try to
write the code without implementing that
in my code every single person i try to
insert into this table is going to have
the same user ID as its primary key
it's going to cause application to throw
an exception give an air crash i'm not
sure which one of those things actually
happened but i'm pretty sure it actually
causes the program to fail so just want
you guys to make note of that and having
this checked off I think we're good to
go back into the web demo so we're going
to be here in the registration code
we're going to create remember variables
all of them related to connecting to the
my sequel database
we're going to create my sequel
connection will call it con- the same
thing for my sequel data at my school
client mysql command and command the
connections can actually contain the
connection string to connect to the
database to command is going to contain
the connection with in with its
instantiation and also going to connect
are going to have the querystring
parameter as part of its initialization
and we're going to have over here is
going to be a query string and we're
going to do here is instead of
activating the Cougars in the register
of that method which actually get some
started by clicking on register but
under registration page
I'm just going to go ahead and great and
you remember very warm you know
method and register you there
so we're going to do is just kind of
copy that paste it into there and we're
going to do first is actually a
reference to the connection string that
is in the web.config file and to do that
is to be done it has this fantastic
library here where you actually can call
a by connection name of the string and
have the actual connection string
parameters passed in through here so the
connection string here is going to be
the name that we added here
so what we're going to do is copy this
put inside there and what this line of
code is going to do is going to get the
actual connection string and stored into
the con string member of a local
variable here so it's going to grab this
daddy here which we have the credentials
for the person to actually access to my
sequel database and it's going to return
it to conduct connection string over
here
so what we're going to do now is create
or initialize a con very warm
i'm going to pass in the connection
string
we're also going to do an initialize the
query string
I'm going to leave it blank for now and
then initialize the command and it takes
two parameters a query string and the
car later on below we're going to
actually execute this is can actually
write to the database and we're going to
go ahead and and here we're going to
actually go ahead and close the
connection to the database and before I
forget how to open it over here and i
just noticed a little table for
initializing it i forgot the new keyword
that should take care of their and same
thing here and we're good
so now we're going to form the query
strain into glass
maybe slightly complicated but it won't
be too bad
and what we're going to do here is
insert into and we're going to tell it
specify the database we're going to
write this up query to i'm going to
write to the web demo database and
specify the actual table we want to
actually write into so if you recall
here in the workbench we have to web
demo database and we have the user
registration table
so this is the syntax here to actually
specify which we want to write to
and we're going to specify within these
parentheses is actually the list of
columns that we actually want to write
to within the code itself and if you
recall here there's a bunch of columns
here
not all i'm going to feel right away for
example assaulted password and user ID
I'm gonna fill in
you gotta specify exactly in order the
college you're going to actually use so
we go back to the code and here I'm
going to be writing up the colonies I
learned and enter username and password
and continue straight on to the next
line and we're going to specify the
values so just FYI everything is going
to be set in as a string and the syntax
to do it here is a after this values
parentheses opening parenthesis
everything will every single variable
putting it's going to be surrounded by
quotes are to say a tick or a single
quote and that's why I have this country
here so we're going to do is actually
get the text box text field and we're
going to close it with a single pull so
values quote single quote name quote and
now we're going to be actually entering
the value for the middle name so we got
to put , there
it's going to be another quote another
tick mark and we do this on and on till
the end when you close it off , for the
next variable then starting quote
starting to tick you guys finish this
off and i had a username password since
this is the last one
I only need it right one more stick
before the actual close parenthesis
close up the sick the double quotes for
that and this is actually coaching is
going to use to write into my sequel
database
FYI i'm going to show you guys later on
the correct way to write to the database
because i'm going to use this type of
string structure for logging in but
you'll see later on how this is actually
a vulnerable to sequel injection attacks
because I don't do any input validation
and just kind of passing the user's
input as is but just for demonstrational
purposes
this is basically what you need to do to
actually write to the my sequel database
so now if we actually rebuild we run it
we're going to bed
here to the registration page and so
let's start just adding somebody
Roger and II understand
Roger at gmail as you guys can see
already typed in beforehand just kind of
playing around for number is going to be
seven eight nine or I see a 23-0 user
name is going to be Roger and the past
we're going to be Roger one two three
four three two one now before i click
register you're going to see over here
this is going to be inserted into the
user user registration table and right
now there is nothing
so right now i'm going to click register
right now
this response saying you've successfully
created a page but if you go back to my
sequel database and we select everything
again you're going to see the users
information is over there
of course I didn't enter into salt or
salt password if you remember to use
your idea have it auto incremental so
that I filled in by itself but let's go
ahead and actually add another user
gessi John Johnson JJ have with that
Jesse and yahoo going to have another
number
Jesse John and that's what's going to be
going to be Johnson one
how about that so I'm going to click
register again
we go
days you don't see it there but if we
actually selected again you'll see the
person's inputs actually inserted into
the database and FYI also you never want
to the password and clear texas i have
over here I'll show later on the video
the proper way to actually store it but
hackers can steal this database or any
database out there on that doesn't have
protection and if this actually am in
clear-text pretty much to hack will have
all the pass protection login and
potentially wreak havoc on that person
so but just for now
that's actually how you do it and pretty
much we're done here with the
registration page so right now i'll just
stop this application and go on to the
default page and actually handle the
user login credentials ok
ok so now that we actually have that
done let's go over to the default page
and handle the user login credentials
but to do that we're going to actually
copy some of these member variables here
because it's going to be pretty similar
so this just kind of paint is up here
we're going to add another one number
variable name and we're going to add
another mysql member variable as well
and this is going to actually read into
data from the actual mysql command as
last time we were just right into the
database with you need to actually read
anything from a clear saying insert into
the database this time we're going to
actually get from the database so just
like last time we're also going to get
the connection string the web.config
file connection strings to string keep
forgetting what the actual character
string is sewed connection string here
is web connection string concentrating
just paste it in here
what does a lying does is actually
retrieve the connection string and
stores it in to the local variable
concentrating and the connection string
is actually the server address user
credentials that we created a little bit
earlier and the database one actually
connect to
so we go here and we can actually want
to also initialize the member variables
for con and commands so let's go ahead
and do that
new mysql going to pass it in constant
rain to connect
we're going to go ahead and open
database or open connection
later on we're going to close it we're
going to actually create a Christian for
now is going to be blank
and we can also instantiate the command
parameter and it's going to take the
query string and con as inputs
the good thing about the readers that
you don't actually have to instantiate
you can just actually have it equals to
the execute really here this will return
to clear response from mysql and stored
into the reader so before we continue on
now this actually input the query string
so last time we were actually inserting
into the database this times gonna be
different this time we actually want to
the user is authenticated to grab
everything about his information are so
you can actually log in with his already
created account so we do that by saying
select star which basically means grab
everything from and here you specify the
database and actual table you want to
grab from user registration table
parentheses and just so you guys
remember here is a table or the database
web demo and user registration here has
a user credentials username and password
and here we're going to formulate
I'm so we don't need these are Prince's
here
so grab everything from web demo where
the user name which is the same name as
a column within the my school of
database equals the user's input it
username and just like a registration
thing we're going to do that within tix
single quotes and password equals so if
both things match within the database
then this poll return actual values to
the application here
so this is kind of making a hidden one
page go there and we're going to have
the reader execute or we read in to
execute a command
let's just initialize name - and string
and while reader had roles and reader
reads going to go ahead and actually
this is going to grab all of those
column attributes from ice-cold bench or
manicure database and return to the
reader and here we can actually have
named equal reader get string reader and
get order nor and we're going to specify
first name here
so that will return the first name to
the neighbor here and actually I would
love to do what we get the full name
so let's get the middle name and last
name so we're going to do is simply by
copying pasting and renaming the get
organized a trip you here and this will
return first middle and last name to the
name member variable so now after what
we're going to do if reader has rose
perform the following if it doesn't have
any rose and that means the person
entered in credentials that do not exist
in the database
so here we're just going to actually
update the text box filled to just say
invalid user
invalid credentials which ever way you
actually want to specify to that user if
the user does exist
we're going to want to do a couple of
things first we're going to actually use
this session to actually store in the
web application server space name here
and this is one of several ways you can
actually pass in information from one
page to another because i don't like a
typical application we can instantiate a
new class with variables and here you
don't actually instantiate a new class
on or I should say extension a new
webpage actually call to redirect to
that new webpage so here we're going to
do response that buffer output equals
false or true i'm sorry
and here we're going to actually
redirect
so as far as attributes going to be
the location of the page you want to go
to so we actually go to the login page
so just specify it and the second
attribute here is bullying we can
specify to true which would indicate the
determinate I think this web page or to
the other web page a little bit early
and from what I understand that's
actually not something you want to do so
by default if you just if you set it to
false and that's the same thing to
actually do so I don't worry about
setting it to choose just leave it as is
after this else we're going to go ahead
and close the reader so now we actually
have everything we need to go to the
login page so why don't we go to the
login page
I wanted to actually specify to the user
it's on name if he actually has the
right credentials going to go here and
say hello and i'm going to create a new
asp.net graphic objects and here's what
we're going to actually put in the
user's name if he actually is a
authenticate it so let's go here text
the user and actually that is empty and
definitely not important
and of course grant server so now we go
into the login page
CSS code is make another variable here
string name just like the previous
application and previous aspx what fall
and here we're going to extract from the
session
what we stored from the previous pay so
here's actually we share data but we're
going to actually have to cast this to a
string to pass it in a string
just make sure we cast it as a string
and we're going to reference that or
store that into the label that we just
created user label text equals name
so now it's going to read in if the
person is authenticated going to say
hello and it's going to print out the
actual users name
so now that we actually done that we can
actually test it out
ok guys so let's actually go ahead and
try this out and run it
what we're going to do here is this just
type in somebody who doesn't exist on
the actual on database itself and if you
recall here
there's only Roger and Jesse that are
available but let's just enter and
somebody who doesn't exist and see what
happens
login invalid user if you remember
actually have it if else if the actual
crew turn has no data in it
it is obviously someone who doesn't
exist so how about if we actually try
somebody who does exist
let's try Roger here and Roger his
username and password is Roger through
21
so just go ahead here Roger Roger
three two and one
a
sorry guys i did a type of here you see
the exception
what is complaining about is that it
can't find this character
you can't find this column and the
reason why is because I spoke last with
2 t's and injured database is just one
so that's what happened there so excuse
me for the hiccup and then go ahead and
do this again
let's run this
ok so Roger are three two one
login page hello Roger andy anderson is
exactly what his name is
so that's perfect guys so how about we
just go ahead and close debt then we'll
actually try with another person
oh come on down under so let's just stop
that I typically you just have a logout
button that show later on but for now
just to want to stop and restart just
stopped application and running again
and other person debts here is jesse
user name is Jesse John last name
johnson won
so let's do you guess see John Johnson
one
hello just John Johnson
awesome guys never would actually log
into the database using what we call it
up
so just for
demonstration purposes once again let's
just try to login as somebody who
doesn't exist
so let's just put Taylor dance
what the hell doesn't exist
alright guys so I hope that was actually
informational i will be expanding on
this is to show how to actually do it
better in terms of security practices on
checking input user input validation and
making sure things are not trying to
hack into your website by using your SQL
strings so thank you guys have any
questions let me know