Select from Drop-down list and display MySQL data on PHP page using AJAX query.

[Music] hello everyone in this session we'll design a web page consisting of one drop down list that drop down list will be filled by the data items from on the table and that table will be from mysql i and depending on whatever we are selecting from the drop-down list corresponding uh record will be getting displayed for example uh consider this is the table which i am using as my source table and this as the page we will create the page named fetch and this dot php that page will consist of one drop down menu now this drop down list will be filled by brand all right and after selecting a particular brand then these features of the brand whatever we are saying over here model ram internal storage battery will get displayed in tableau format over here okay so let's start with that code now the editor which i'm going to use over here is sublime text now there are a number of editors it's up to you which whatever the editor you want to use so first thing what i will do i will save this page as fetch and desk dot php after saving this the very first thing i will do is then i will check my localhost where that is working yes then i will go to my parent folder my parent folder is php chaps wherein i saved all these folders or files and this is the file fetch and this which we just created yes this file is getting open without any error nothing is getting displayed because we haven't written any code over here so let's start with first html components and the very first thing we want to go there is to display select mobile and one drop down list so that drop down list we go by select so let's add that select and we won't write anything this we won't add anything right now just let's refresh the page and check whether it is working properly yes it is working properly now what we want in this uh drop down list we want all brands to be filled now brands over here are oppo motorola samsung redmi whatever components over here or whatever the data items are here i want these data items to get filled in this drop-down list so for that first thing is you create the connection by using mysql.connect and you face the data so it's the hd php code so you need to write that within php tag first check the uh get the connection by using mysqli connect to this you are going to pass four parameters first the name of your server name of my server is localhost followed by the username root as far as this machine is concerned my password is this one and then i need to specify what's the name of my database database which i'm going to use over here is demo all right and this demo consists of one table called mobile so it's getting displayed over here that okay so i want uh these things to get filled up a samsung redmi motorola whatever it may be so i require one connect a string so let's consider that string i'm going like this select not mobile brand from mobile let me check how written mobile m is capital okay so mobile and then you execute this query and after you execute this query that record will be selected right now all brand will be selected and it will be saved in the form of result set now let's consider that result i'm storing in variable res and i do that by using sqli underscore query so this is how we execute that query to this we need to pass two thing one is connector and second the string so we have passed over here i repeat first we require the connector our connection to get established by the connector mysql connect then the string and then you fetch uh the required data by using mysqli query now coming back way now with this nothing is happening on the page if you check up on the page nothing is happening because we have just fetched that data but we haven't uh put that data in this drop-down list so for that purpose uh we need to use uh this php tag along with html uh but in a proper way something like this we will fetch that result set a row by row by using uh mysql fetch array function and we'll save that in rows so something like this while okay i cannot use directly i need to use a php tag over here so let's consider like this while condition is uh i'm gonna to fetch that result set row by row so go like this while mysqli underscore fetch underscore array to this i'm passing what the result set result set is stored in over here dollar res now this i'm going to fetch row by row so let's consider i'm using another variable named rows okay and let's open and close now while we fetch row by row we'll add that to this drop down list by using option tag of html so what we do we close the php tag over here again we'll open that tag just over here so that what happens this open and close brackets get properly filled and then we will use option tag so as to fill that or populate that um drop down list so let's consider i'm just writing 10 over here so if i'm writing 10 whatever the number of records i've faced those mean times change should get replicated yes 10 getting replicated the distance because it's fetching row by runner every time it's we are just adding 10 we are not adding anything okay but we don't want 10 we what we want we want brand now that will add it as a value and also over here so but to access this we cannot access it directly again we need to use php tags both at the value and also at the display purpose so the php tag will go like this php and over here same thing will use over here all right now coming back what we want we want rows to be displayed over there but anyways we cannot display that directly we need to write on the page now to retried on the page we'll use echo function echo dollar rows and the field name is brand similarly let me save the column over here and let me just copy and paste and now let's refresh the page i'm saving all and now refresh the page oh yeah it is we are getting everything samsung four times ready me three times moto moto moto oppo infinix sauces so what's the error over here there's no error but we need to change the query install saying select brand let's say select distinct brand from mobile save it and then you refresh the page now look it's getting on the ones so this part is done so the very first part of your page that i want to display is to fill this drop-down list with uh mobiles those are nothing but brands so that part is done now the second part what we want uh we want one table and this table should get populated the moment we select anything from this drop down list so let's first create the table at least we will have the header body empty locking a so let's go like this and that will happen after select okay so first create the table okay and we are going to have two things the header and the body body will be empty right now in the header will just add something so let's consider t head all right and empty body d body let me consider it is empty in header what we are going to add is brand our brand is already selected so we will go as a model what are the fields that we want to display model ram internal storage battery and processor fine model let's copy paste ram then we require internal storage so i think i use beta right use bracket over here internal storage and last okay battery is also there i think processor is also the field yes processor so let's add that also processor all right let us save and refresh the page yes it's coming but right now everything is quite just touching each other so you can provide some weight and something like that let's consider i'm saying style width let me say 10 percent so a ram 10 percent internal storage 10 percent battery 10 percent and similarly processor 10 weight when we are saying model that model it will it will have more space so let's consider i'm writing over here 30 or twenty thirty percent administrator processor also sometimes it considers something like snapdragon something like that so let me say thirty percent now refresh the page yes okay now right now it's empty uh table body and what are the lines we look at at the end but now second thing what we want the moment we select something let's consider i'm selecting redmi then what should happen from this table if i'm selecting redmi uh let me check the record oh yeah yeah let me consider these three records of note 8 pro note 9 and note 9 pro max so these details should get display over here so for that purpose what we want we want one function to be called whenever we click upon these things okay so what we will do over here uh we add one function that should be called upon whenever the contents getting changed so we use that in select so let's consider we are providing id to this function also so id is mobile all right and function name is let me consider name of function is uh select brand let's consider this is the function name all right so if i'm using function i need to implement this now that implementation is done in your javascript okay that script either you can write it here itself or else you create another page another page and save that as a javascript and over there you can add it so let me see i'm not going to add the script over here i'll create another file and i will save this file uh what are then this is my parent folder php chaps so i'm creating one folder the folder is already created js and in that i'm going to save that file okay let's consider uh name of my file right now whatever i'm using is fetch and disp so let me consider i mean the same name i can give any any name not an issue but i'll say this with dot js because that's javascript so let's save this one okay first let's check whether it's working or not so what we'll do function and name our function is what select brand so select brand and let us write over here alert select brand all right let's consider hello world let's say this and let's first check whether it's working right now it won't work because we haven't provided any link all right if i check upon the code let me check i inspect this element it will say the function is not defined so if i'm going to select something and it should have said that function is not declared okay so let's get back to the program and let us provide some link between the page and this function function what we want select brand so in head you provide the script over here you provide just the location location by the src equal to uh js slash then name of a file is fetch and this dot yes let us save this and then let's refresh it let me go to parent folder and then let me click on face and this oh yeah it's coming now hello i think the previous case the page was not getting refreshed properly so when i'm selecting anything it's coming hello now if i just click again and infinix nothing is getting changed so that way right now it's okay now what we want over here let us now first store the value of whatever we are selecting in variable x as document dot get element id document dot get element by id expired to that will pass upon the name dot value now the id is of what selector id is mobile so copy and paste over here okay it's done now what you need you need to call upon the page [Music] so now what you need to do uh you need to use our java api uh something like this actually what's happening over here is the moment you select a particular hold on the moment you select particular mobile or whatever the element over here you need this function is getting called upon now from this function using ajax you're going to call up on another php wherein you will pass this mobile name or whatever the brand as a parameter then that records will be fetched and it will display it on the page now for that we use ajax so it was like this dollar dot ajax okay and over here you need to pass three things first the url okay uh that url will look into second thing the method method which will be post method and third is data that what you are going to pass data will be nothing but the name of this whatever mobile whatever the value we are selecting and if it's success then you're calling a particular function not your calling if there is a success then this function will be called to which that data will be passed upon from that php page and that data will be nothing but this table this table will be passed okay and that table will get display exactly over here that will be nothing but the body so what we do here let's consider we add id to this body as id equal to let me consider i am writing ans okay and that i will write over here dollar because id so i introduce hash ans dot oh html this will display the data now this is accepted but thing is to use this ajax you need to use google apis and that will api uh you need to use in header over here okay i will this i have displayed this api in the description you can just copy and paste okay now think uh the url what url we want to use let me consider i'm going to use uh let's consider show mobile.php this is the file which will create let us assume so let's create one file and let's first save this file as show mobile dot php no it should be in the parent folder panel folder is php chaps so it should be over here as show mobile dot php okay so it's going like this you're gonna have to select you're gonna have to select component from here once you select a component call is made to this function select brand and for from select brand then you are going to this uh php file show mobile wherein you are gonna to pass the parameter x audio parameter what is the parameter x over here x is nothing but the value which you are getting uh from that component now over here again it's what we do is uh anything everything uh we want use most of the html tags over here but it will fully php components so let's consider like this first get the connection done so what i will do i'll just copy and paste and start writing it again and again let me construct copy everything and i will make changes over here connection con okay but my query will change our query will be select uh star from mobile where brand equal to now what equal to what so that equal to will pass it through some i will access it to some variable so let us consider like this we declare one variable k and in that k will store the value because method which we are using is post method so we can access that by using post and value of mobile is stored in variable x but it is passed as id so it will go like this post highly okay accept it but it may consist of some blank spaces so you can trim this dollar k equal to trim and all okay frame what will do it will remove blank spaces whatever you have and this will say where select start from mobile where brand equal to over here and then we'll pass the connector as con and string is sql to mysql query and result will save it in res then the same way we'll fetch the result row by row so while dot dollar rows equal to mysqli underscore fetch underscore array to visa out to which i will pass the results address now again it will change now i can use some html components but why html components that's because we want to display the data in this table layer this is only the header part body is empty body will consist of rows and columns or rows identified by tr and columns by td so for that purpose we will close this html php toggle here and again we'll open this php tag over here so that this bracket get completely closed and within this now we will use html tag something like this open row yeah let's close this dr alright now td how many columns we have first check up on one two three four five so let's have five td one two three four five same concept whatever we are done over here how we are displaying the contents by using echo dollar rose abnormal what are the field name filling number in this file was brand so over there instead of brand we'll use other fields so what we want to display over here give that in tags over here that's it just a second okay now what we want very first i want model ram internal storage so let me write it in this way so that there won't be any spelling mistake first i want model then i want ram then i want internal storage thereafter i want battery and another field is there i think the processor is remaining yes processor okay that's it so let's refresh the page and let's see whether it's getting displayed or not okay now i'm changing it yeah yeah but some mistake over here i'm getting call again eight minutes samsung wait wait seems to be a small mistake while it's getting displayed okay mobile uh okay let me write something like this echo dollar sql let's check what's that error actually oh yeah it's working now i think the previous case the page was not refreshed properly so again i'm going to press the page yeah it's working and inspect nothing's getting so no error okay that's how it's uh we display the details so if i select answers it's happening and we are not refreshing the page only this part is getting refreshed again what you can do for the lines and everything you can give some table order and rows so let's finish with that part also so we need to use the style style first for table we want border as one pixel solid thereafter similarly for table heads and trtd th tdd and tr we want border as one fixed solid but because of this what will happen we will get multiple borders if you refresh this look here you are getting multiple boxes so you can collapse it by using uh collapse border collapse boom border collapse as well as property and also if you want to have some padding you can have it let's consider padding as 10 pixels it's refresh there you go so that's how depending on what you are selecting your contents of table is getting changed you are not refreshing the complete page only this part which is nothing but a t-body component of your table is getting changed i hope you like this though it was quite lengthy and little bit slow if you have any comments you can put it in the comment section and like and subscribe thank you

Channel: Raj Bhise

Views: 17,598

Keywords:

Id: y3GIgsRUYsU

Length: 32min 41sec (1961 seconds)

Published: Mon Jan 25 2021