jQuery Tutorial - 168 - Check if a Username is Available Video Lecture - Computer Science Engineering (CSE)

hi this is Alex from PHP academy' org
with a video tutorial for the new Boston
in this example application we're going
to be creating a form field that allows
the user to enter a username which is
then checked against the database values
in the users table so over in my
database if we just go over here you can
see I've created a database the database
called jQuery and I have a table called
users I've got some randomly generated
usernames based on names and numbers and
there's sixty thousand seven hundred and
sixty eight of these so we have a lot of
data here now our goal in this tutorial
is to create a dynamic username checker
which checks a user name as the user is
typing it and tells them if it's
available
so essentially essentially we're looking
through a large group of data and we're
going to show a very brief loading sign
or a loading text as it's searching
let's just say we had a million records
in a table or in fact we had let's say
you know this amount of large text we
could go ahead and you can go ahead and
implement this into other uses for
example a search engine or something
similar so our basis of this is
searching this table diner
what using an AJAX call their post HTTP
request to check if a username is
available so this is our document I
currently have nothing on the page let's
just take a look at the files that we're
going to be using now users jeaious i've
included on my page and this is going to
be the essentially the basis of our
application we're going to have a check
here that will check on a KeyUp event
for the username in the database it's
going to send an HTTP request to this
username check file just here and this
username check file is going to return
whether the username is available or not
DB dot PHP is just going to connect to
our database so inside index dot PHP
let's go ahead and set this up
first thing we want to do is create a
form field so this is a text input type
and we're going to give this an ID of
username now I'm going to place a span
next to this with a relative ID and this
is going to be username status now
what's going to happen is as we start
typing into this text field here let's
just go and preview it in our browser as
we start typing into here our span is
gonna first of all show a short loading
symbol or you could incorporate an image
into this then what's going to happen is
we are going to display whether the
username or is available or not inside
of this span and that's going to be
handled by users yes and obviously like
I've already said it's gonna call
username check to actually perform the
background server-side processing in PHP
so the first thing we want to do is
check that a key has been pressed down
in here or key has been pressed down and
has come up so for example that would be
a key press or key down but the keys
also come up so we're checking it on key
up just so we can return an absolute
value so we'll go ahead and do that we
need to use a selector to select this
user name ID so we use hash username
then we say dot key up so we've created
the event handler just here and inside
there we want to create a function and
this function is going to run when a key
is up so we can test this by just saying
alert and it just say key up for example
let's go over to our browser when I type
a key down as the my key comes up we
have this alert box to alert us that an
event has happened as well as a
backspace as well that will show the
same thing so now that we've done that
we can go ahead and the first thing we
want to do is grab the user name from
this field so the field is called user
name we've given out an ID of user name
so we can use the same selector or we
could use the
dot Val which would be a lot more
efficient and appropriate and then I'm
gonna go ahead and alert username so
user name variable in JavaScript will
now contain the value of this username
field here which is the field on our
page here so now that we've done that
we're alerting out the username let's go
ahead and test that out I'm going to
type a you can see that relaid a back to
us I'm going to type L that's relate
that back to us so we're getting an
absolute value of anything we type into
here and let's just get rid of that okay
so now that we've done this we need to
go ahead and change the username status
span to loading and then immediately
after that we're going to use the post
HTTP request to check this username
check file and we're going to be
connecting to the databases as well so
we're going to go ahead and change the
username status span and we're going to
change the text of this to searching now
this will only be briefly shown however
like I mentioned earlier if you had a
lot more records than this or you had
some large text it may take a little
while longer sites such as Twitter use a
check similar to this and obviously it
takes a lot longer despite them having
millions of users it takes slightly
longer to actually check whether the
username is available