Live Search Using Bootstrap 4, PHP, MySQLi Prepared Statement & Ajax

[Music] hello world welcome to my channel I am Sahil and today I am going to show you how to make a light search of records from the database using bootstrap for PHP MySQL I prepared a statement and edge X so you can see this is the final half after complete code so let's see or demo how it works when I enter some text in this search input field then it will show the matching record from the database so let's try so when I enter some data here then it will look in that database and find the matching record from the database and so here okay we can search using this first name and last name so let's try to enter some lastname values like when I enter so and do and then you can see this record is showing here and when I enter some random text here and it will not match in the database then it here it will show no data form okay so this is our app so let's start so first you can see I have already created our database and table and in inside this table I have inserted some values so first we will pitch these record in the main paste then we will code for PHP and edge x2 flight search okay so let's minimize this and gate of project folder inside htdocs' so I am creating with name search and let's open this in text editor I'm using sublime text here so I'm opening in this now this is our project search and let's create a file inside this directory index dot PHP and I will use bootstrap for for designing in the and displaying the records in table format so first you type the type del here so like search using PHP and hex now go to the blue three schools calm and open go to step four now click on and get started now go below now from here you can see the CDN links of go to shop for and jQuery library now copy all the CDN links and paste inside the head tag of the head okay so let's paste here now I will use Essex that's why I have included jQuery library also and I will use bootstrap for classes to design our main page that's why you have included water step for liability so let's come to the body tag and here I will first so on navbar so go back to the bootstrap code and here from here click on bootstrap for navbar and go below now copy this core copy and just paste here you know go to your browser and open you posit localhost search now this is looking fine now let's create our form so inside this navbar I will create a container I will create a container container pure and inside this container I will create our row row and inside this row I will create a column column MD team and I will give some background color busy light and margin top two and I will make this rounded for rounded corner and also I will justify content center for centering of this column in the page now we will also give some color to this body tag so here I will use bootstrap for class BG second wing okay now here come back to this column No first we will so heading so here I will use h1 tag and inside this I will write the like search using PHP my SQL I and hijacks ok now here we will also give some more just motor strip class text color for text layer I will use text primary and parody to now let's set this and check in the browser let's replace so you can see this is our heading now inside the heading we will create our form so just below this heading we will use a hatch HR tag for a horizontal line and now inside this we will create a div with class name form in line okay and now I will create a label for search and also I will use some water stop class on font-weight:bold and I will use lead and text dot dot black now here I will search record search record okay now here you can give some space here now below this I will create our input tag each name to search search and Charlie also able to search search text search underscore text and they will give some worship class form control from control form control lg4 for big text field and will also use the rounded 0 border triangle and also use some placeholder search now let's go to the browser and replace this now you can see this is our search box and here the space is not showing so for this we have to get Sun and ESP just copy this this is for especi know if it is this now you can see this is looking good we can also give some padding to this column so padding-bottom let's see not now inside this search box I will I will again use a horizontal line and now I will fetch all the records from the database and so in table form so for this I will use PHP code here first so just enter and so for before going to fetch all the records from the database first we need to connect our project to the database so let's get another file config dot PHP okay now here we will create a variable on and here I will use my SQLite and here we have to write the server name localhost and here username so my username is 0 and password is nothing and here we have to write the database names database name is search now we have to check using inter statement if corn is connect error then we will simply show message with a die function connect field and here we will concatenate with this Connect connect error okay now set this and just close this now here we will require this so we have to include this concrete dot PHP file and now we will create our statement statement variable and inside this we have to use this con variable and now we can write repair method repair and inside this we will write our query so here we can write select Maastricht from from the table name so our table name is like search live search and you have to execute this statement [Music] cute now we create another variable result and in this we will use a statement statement and where we will write a method get get result now it will get all the records that is present in the database in this variable now using this variable we will sow records by row so for doing this let's create our table first so here we have to create table let's give some class table table table over table table over table lightful binocular and table respect mat here I will also use high D table beside this we will fetch our record from the database so here we have to get T head first and in th first we will sow the ID and then we do so name first name first name then last name last name then email email then gender gender okay now say please now inside this t hey we will get t body T body now here we will use PHP and write while hello equal to reason and here we will use page soft method and we will open curly braces and now here we will use TR for we have just forget to write TR here so I'll just write TR here and clothes and also now inside that TR we have to use TD and here we will use PHP soften tag and here we will use a row and ID for swing the ID and a first place for name for first name a last name and email ID email and here gender okay you know we have to close this wide load so to close here right PHP and let's start this we have to close save this and let's go to the browser under difference so we have some error in confi line number three so let's check line number three connect oh we have some spelling mistake connect now let's so it's it's showing all the records from the database here now we have to when we write something here then it will match the record from in the database end so that and the matched record only okay so for this we have to write the edge Xcode first so come go hey come back here index dot PHP and index dot PHP and here we will write our a script and inside this script tag we will first write document our painting now inside this function we will target in our search field so I have given an ID to this search input field you can see ID equal to search underscore text so by using this we will target that input field now here we will use T of T of event okay now when we write something then it will fuch it will fight event that is belong to this cube even okay no here we have to write Punisher and now we are T we are going to get a variable search and here we will use this keyword and no well we are fetching the value from the search box and store in this variable search variable okay now we will use the projects method so and checks you know here we will write URL the taxon dot PHP enough first we will send this search value to this x1 dot PHP okay so we have just write a xn dot PHP now what method we will use to send so we will use so we will use post method and what the data appears in D so we are sending query search okay now we will create a success function successfully sent and pass a parameter response here now after successful after successfully sending that data to this xn dot PHP then the response coming back from the server we will show this in table data now we have just written in this table a tag ID equal to table data okay so we have shipped here table data dot HTML and pass response now our edge export is done now we have to create this xn dot PHP so let's quickly create this xn dot PHP now first we have to include we have to include our conflict config file so let's include config dot PHP okay now we will create a variable output and empty belly now we will check if it said post query and we will create a variable search equal to post well okay now whatever the value that is coming from the search box we are getting the value here by using this if a statement okay so and store the value in this variable surf's variable okay now we have to create an statement variable and by using corn variable we will use pre-clear method and inside this we will write our query select last week from life search web search is our table name we know we are using first name and last name both so for first name we will write for first name first name like and we will use a MySQL function Khon Kaen concat and here we will use percentage then comma then question mark question mark is our placeholder then I think percentage and and we will you use our operator and for last name we will write last name - like and the same thing just copy the same thing and paste here okay now we have to bind the place holder to get the value so here we will use statement bind bind per vine pattern and here two values are to be now bind so here both the values are string type so here we have to pass to s and here we have to fast search and search to two x okay now in else part we will use same statement statement and sorry statement con variable and repair method inside this hair we will select all now now part of the scope of a plant takes a statement we will execute the statement execute our query and we will get one more variable result equal to equal to the statement and here we will use gate result method to get all the result now here again we will use if e to the result and here we'll check num rows greater than zero oops keep more than one or one record is found then we will we will excuse this if a statement and so the match record in the main page okay so for this we have to use this hot or cook a statement put a statement here and lets you do it now let's copy the same thing from here so T head so here today we'll just copy the same thing and paste now just now again we will again from here we can also start the ybody so P body right at T body here now inside this we will use while loop why Rho equal to reserved and you use H this soft here you know again we will use the same on put variable and now we will concatenate because we are using second time so here we will use dr and let's write from here close up here no this side here we have to pass deeds so just copy from here and paste we have to we have to just delete these PHP closing and opening so delete ok now we have to do one more thing here we have to also concatenate this using sorry okay no this is looking good now if the TR TR closing tag and we will use what would fun variable one more time just concatenate it and here we will close the T body so the body close this T body here and now here outside this while statement we will take our like oh our variable output and if this will not X cube if any of the record is not matched in the database then we will also use else statement here so support this we have to go here and here to write else and here we will use that's three chords that's H 3 now this is done now let's check this save come back here refresh this let us try to write something again so this is working fine and let's check to find with last name so let's write something here gol di Goldie this that is the first name and hum please you can see home please this is searching I win and if we write some random data then you can see no record on okay so this is working fine guys if so thanks for watching this video if you like this video then hit on like button and please subscribe my channel

Channel: DCodeMania

Views: 19,721

Keywords: sahil4rock, wolfmania, live search php ajax, live search jquery ajax php, live search jquery ajax php mysql, ajax live search php mysql pdo, live search php ajax mysqli, live search using php mysqli, php mysqli prepared statement, ajax php live search, bootstrap 4 live search php, php mysqli live search, bootstrap4 php mysqli, live record search from table, database live record search php, mysqli prepared statement object oriented

Id: a5UGrlEwSfI

Length: 31min 13sec (1873 seconds)

Published: Sat Jan 19 2019