PHP Front To Back

PHP Front To Back [Part 18] – PHP & AJAX

hey what's up guys in this part of PHP front-to-back we're going to do something a little interesting that you probably won't find on beginner PHP

courses and we're going to work with JavaScript and Ajax and what we want to do is build a form like this the search users form and then as we type you'll see that it'll update here with some

suggestions it'll it'll look at the array of names that we're going to create and then it'll match whatever we type in here so if I put a B we get Brad T we get Tom if I put an S there happens

to be two names with s so that's going to show those and then if there's nothing that it matches it'll say no suggestion okay so if that's all happening through Ajax there's no page

refresh or anything like that so we are going to do be doing a little JavaScript if you don't know JavaScript don't worry about it it's not really not that hard it's a standard get request and you know

you can find plenty of resources on that we're actually going to look at one of the w3schools pages that kind of kind of shows us how to make a get request alright so what we're going to do is

create a new folder and I'm going to call this let's call this website what is it six all right and then we're going to have two files in here this is going to be index dot PHP and why that it

takes a couple seconds to actually create there we go alright and then we're going to create another file called we're going to call this let's do suggest dot PHP and this is where we're

going to store the user's array that this search box will make the request to it's going to search for that and then it'll send along a response that will have our matches alright so we're going

to start with the index.php page we're going to put some standard HTML tags in here and then i'm also going to use bootstrap so let's put in link rel stylesheet

and then HOF I'm just going to grab a custom bootstrap theme from boots watch so I'm going to grab this right here the first one will click download and then just grab this this link here and put it

right in there alright so we'll save that ok so now in the body I'm going to paste in some simple HTML ok so here we have and just tab this over here we have a container with an h1 and a form the

form has one input which is a text input and then suggestions width and then the span tag with an ID of output this is where the suggestions will output alright so in order for this to work we

need to add an event handler to this input so we're going to say on key up because we want it basically to make the request every time we type and we're going to set that to a function called

show suggestion and this is a JavaScript function we also need to pass it the value of this input and we can get that with this dot value all right so now we're going to go up here and put in our

script tags and then create function called show suggestion okay and that's going to take in a string so just to test it out I'm going to say console dot log string and then we're going to go to

our site which is which HTTP localhost / PHP sandbox slash web site 6 okay so there it is now if I open up the console with f12 we start to type you'll see it'll log what we type so we know that

that function is getting called alright so what I'm going to do first is I'm going to check to see if what what's typed in here is at least one character okay so we're going to say if string dot

Inc is equal to zero then we're going to take this output right here and just set it to nothing so to do that we can say document dot get element by ID we want the element that has the ID of output

and then we want to say dot innerhtml equal to nothing so we're setting what's in here – nothing okay and then we're going to do an else and then this is where we're going to make our Ajax

request oops okay now I'm just going to pull down this w3schools com if you guys know how to make an AJAX call from JavaScript then you're not going to have any issues but

what we need to do is create what's called an X HTTP object so that we can call dot open where we can make a get request to a certain page in our case it's going to be suggest PHP now before

we can do that we need to let me just go down here we need to create that X X HTTP object and then we need to basically check the state okay so we want to call this onreadystatechange and

before we actually put the response into that element we're going to check to make sure the ready state is four and the status is 200 okay so you probably know an HTTP 200 status means

everything's okay so it's just going to check for that and then the ready state if we go down to the response here the ready state basically has a status of 0 through 4 we want to check to make sure

that the requests finished and the response is ready because we don't want to try to fill that before with the response before we actually get it alright so I apologize if that's a

little tough to understand making requests from something like jQuery is much simpler than using default JavaScript all right so what we'll do is create a variable here called XML HTTP

we want to set that to new XML HTTP request okay we're setting it to a new object here and then we want call that onreadystatechange so xmlhttp dot on ready state change okay and then

we're going to set that equal to function and then this is where we want to test for the ready state and also for the status before we make our request and get the response so say if this dot

ready state is equal to four so basically if we've already got the response and the status is equal to 200 then we're ready to go we're ready to put the response into this output right

here okay so in here we're going to say again document dot get element by D we want the ID of output and then dot innerhtml and we're going to set that to this oops this dot response text all

right now we still have to call the open and the get method so if we go back here we want to do this right here all right and actually I called it XML HTTP so we're going to make sure we

change that you can call this whatever you'd like okay so making a get request and then we're going to just get rid of this and we want to make the request to what do

we call it suggest PHP and then we also want to send along a query string with this value okay so for that we're going to put a question mark and say Q equals and then I'm just going to concatenate

on our strings all right because every time we type this is going to run it's going to make the request and it's going to send the request to this suggest PHP along with whatever we type in okay so

that's it for the JavaScript okay so we can save that and then let's open up suggest PHP and I'm just going to paste this in because it's quite a bit okay you can put less names if you want but

it's just the people around an array that's in a variable called people and just a bunch of names now up here I put it to do to get from the database because that's something we'll do later

on when we get into MySQL alright so what we need to do here now is catch that query string okay because you can see we're passing in Q equals string which is whatever we type so down here

we're going to put a comment will say get query string so take a variable Q and put Q and set that to request now I'm using the request superglobal here instead of get just so that if it

happens to be a post request we can get it as well all right then we're going to just basically initialize a variable called suggestion we're going to set it to a blank string all right and then

down here we're going to get suggestions so we're going to do an if statement and we're going to say as long as Q is not equal to nothing then let's say Q equals and then I just want to make sure

it's all lowercase so we're going to say string to lower we've learnt we learned about that function a couple episodes back and then we're going to pass in the Q all right and then we're going to get

the length will sail N equals STR le n which is another function we learned about earlier and we'll pass in the Q here all right so we're going to get the the actual text that's passed in along

with the length so now we want to do is we want to loop through our people array so for that we're going to use a for each loop again all stuff that we've already learned and then in here we'll

say for each people add and then I'll call this person okay and then in here we're going to do an if statement and here we're going to use a function called

STR is tr so STR STR is that right yeah that's right and what this does is it'll find the first occurrence of whatever this Q is inside of the person now I'm also going to in here put I'm going to

put our query string and then we're also going to use substring here and what substring does is it returns part of a string so we want to pass in here person and then zero and then the length all

right and then in here we'll do oops I'm going to say if suggestion is equal to nothing okay so we're testing it up here if it's equal to nothing then we're going to say suggestion is then going to

be equal to person else then suggestion we're going to append a person okay because if they if they already found someone and then there's another name that matches it we want to

add that on to it so this just means we're appending so we're going to append a comma and then that person alright and then the last thing we want to do is output no suggestion if there isn't any

so let's go down at the bottom here and we'll say echo suggestion equal to nothing we're going to use the turn ternary operator here and say no suggestion else

then suggestion and that should do it let's save it let's go back to our application and reload and if I type in a B there we go and it's looking at this list right here

so let's see Julie we have Jillian Jose which are both Jays and Joana and you'll see those all pop up so it's working as it should all right now I like I said I probably will get back to this later on

and we can make these all these come from a database instead of just a static array like this okay so hopefully you guys like this this was a little tough to try to explain and put into words but

hopefully got the gist of it and that's it thanks for watching

In this video I will show you how we can use PHP and AJAX together to build a simple suggestion engine for a form input

CODE: Code for this video
http://www.traversymedia.com/downloads/phpsandbox/phpsandbox17.zip

EDUONIX COURSES: Please use affiliate links from website below
http://www.traversymedia.com/eduonix-…

SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
http://www.paypal.me/traversymedia
http://www.patreon.com/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.linkedin.com/bradtraversy