FLUTTER : LOGIN TO MYSQL DATABASE THRU API (PHP)

okay so today I'm going to show you how are we going to code a Lin process okay so uh we have here our previous diagram in which uh I sh you how the API end or front end or flatter uh works okay so how does how are we going to go through with our login process so from our web or mobile okay so we are going to send the username and password okay so we are going to use here the HTTP package with the get method all since we are just going to send we're not going to do anything on the records we're just going to retrieve records if there are any all so we have here username and password then it is going to be processed by login that PHP so the API end point that you're going to have is actually log in that PHP okay so once log in that PHP receives our username and password it is then going to create a connection with our database our database by the way we have DB contacts because in the series we are going to have our contacts database wherein a user can um enter or create contacts and into this database okay so we have here particularly in our login process since the user is going to log in so we have there our TBL users okay so once it created the connection to our database it is going to create a query or make a query on a TBL users based on the username and password passed into our uh API then uh the database then is going to return if there are records that have been that qualified based on the constraint for the username and password it is going to pass it back to our API and consequently our API is going to pass it to our uh client okay so basically that would be our uh the procedure from here it is going to pass your same password then process by the login. PHP make a connection create a query then it is going to return either there is a record or an empty set empty list if ever there are no records that much the username and password okay so we have here our the structure of the TBL users okay so we have the ID which is actually the auto increment this is our foreign keill so as uh tables then we have username password and the full name okay and I have here some uh Records so we have PTO for the username 1 2 3 4 5 the password and the full name is we have P Bata and so on okay so this is the table that we are going to query okay and by the way the name is we have DV contacts okay so let's go first with our API okay so we have here I created here a connection uh routine now uh I name it connection do pd. PHP because we are going to use here uh PHP data objects or the PDO okay so on the first line here so this is just a review for those of you already have background on uh pH HP so we have here we have identified the username for our Local Host then we have root or the default username password would be blank and the database name is DB contacts I has as I have shown you uh in our browser then we created here the connection with the object connection object we have here gone okay so these lines here this line here is going to create the connection and if ever there will be an errors then it is just going to send this one here but if ever there are no errors then we are going to proceed here okay so first is we are going to uh include the connection file okay so line number five this creates the connection to our database Okay so next is we are going to get the username and password passed by the client in our case flutter okay so take note the username and password comes from flatter okay so we since it is going to use an HTTP get so therefore we're going to have the super Global get in our uh method here okay so we have now the data for the username password so next is we are going to create our query so for our query here is we have select asterisk from TBL users where user name is equal to placeholder okay so we have some placeholders here and we are going to Define it later on okay so the technique here actually if we have a valid username and password is just to get it's just to get a query or retrieve all all Fields no from this St table with the constraint this username and password okay then we are going to uh create our uh prepared statement object so we have here our statement with our SQL here okay then we are going to bind our parameters so we just to bind our parameters as you could see here we have our place holders okay username and we are going to assign the username that we get from uh line number seven and so with our uh password okay so after that then we have execute so this is not the line that is going to execute the query against our database okay then we are going to fetch okay so we are going to get if there are okay if there are records that much or that past are constrained and if there are and we are actually expecting here it could only be zero or one record okay so we have here our return value uh fetch all okay uh by the way fetch a stock means uh it is going to return an associative array okay so I think I have mentioned about associative array with our previous video so you already know what is an associative array okay again this is going to return a list okay a result set in the form of a list and it could either be only one or zero records then last is we are going to have we are going to Echo or we going to return now the return value and as you can see here we have Json in code okay so Json encode means it is going to encode it's going to create okay or convert this array take note this is an array as a result set it is an array but since we are going to use the echo here to return uh the result it is going to convert this array into adjacent string okay so the possible output here could only be a a empty list or one a list of map okay a single record okay so I'm going to save uh this one here so we are done with our uh API okay so next is we are going to have our code in flatter okay so I have created here a very simple interface uh so we have here two text fields username and the password then once the user is going to click on login it is going to con contact our API and submit these two values here okay and that would then be the data that is going to be Pro to Pro to be processed by our API so our Target with our flatter is to generate data for the username and password and later on also a code to receive and process uh the return value here okay so I have here okay so we have here text field number one so we have username controller okay and text field number two so we have password controller and still we have the message because as of now I'm just going to display here if ever the login is successful or not okay so we have here our wa the text field another text field but way obscure text is for uh for the password right then log in for the button and still as I've said we have here the text for the message below okay if successful or not okay so what I'm going to do now is I'm going to create here uh void a function that is going to process our login and since we are going to contact a database so therefore we're going to have an asynchronous function okay so the very first thing that we're going to do here is we are going to Define our URL okay uh from our Local Host we're going to go back to our Local Host then we have flutter SL API SL login.php okay then after that we are also going to uh since we are going to send the username and password as our parameter so therefore we are going to create here a map of string the Dynamic we are just going to call it query uh parameters query fors is equal to okay so for our query parameters since we are required based on our API we need to submit username and password okay so therefore we are going to have here username and password okay so these are the parameters the parameter names that we are going to submit but what would then be our value here so since we as I said we are going to use our username controller for the username and we are going to have also our password controller for our password okay so here we have created our query parameters okay so next is we are going to uh use this parameter by using our HTTP packet but before that I'm going to have I'm going to use here a TR cats block okay so in our Tri cat so first is going to create our response is equal to uh since we are again we are going to contact a database so therefore it is an asynchronous uh procedure so therefore we are going to have here an await function okay await then HTTP that get so going to use our get then we are going to parse our URL okay then we are going to incorporate our parameters so that replace then we are going to have query parameters which is the one that we have defined above so we have query params right so what should be by the way undefined name so we must have to declare it here so the data type for this one is TTP that response okay so this line here is the one responsible in sending this data into our API okay so the next thing that we're going to do now is we are going to uh once a wait take note we could only proceed to line number 112 or 112 once once this line here has been finished executing okay when it is going to finish when the API returns something okay so that's the only time that we're going to proceed to the next line and that is being done by await okay so we are going to validate now if response that status code is equal to 200 okay so meaning successful okay so what I'm going to do now is I'm going to have okay I'm just going to call it user is equal to uh response. body but take note that responsive body is actually a string so therefore we could not use our uh associative array this is not just an array okay it's still a string so that it is going to be converted or parsed or converted into an array so we are going to use just like with our previous video we are going to have Json decode resp that bu okay now I just want you to take note I just want to emphasize here that the return value is a list okay return type is actually a list of mops okay so why is it a list of M that is actually uh here fet all is going to return actually a list okay now we could have also here if ever that we want to this uh return only a map we could have fetch but there is actually a problem there is a cat here with fetch only because if ever uh we are going to have an invalid log in it is going to return supposedly it is going to return an empty map but with PDO it is going to return false okay so therefore a return value then uh is inconsistent when it comes to its data type if ever it is a valid password uh valid login it is going to return a list of map no Fally it is going to return a map but if ever it is an invalid login it is going to return a Boolean data type okay so therefore I'm not going to recommend now that we're going to use the fetch we are just going to have fetch all because it is going to return it could either be a list of single map or an empty list so therefore the data type would be consistent okay so we're going to use here fetch all okay so next okay so what I'm going to do here first is I'm just going to print so that we could see actually the output okay um I'm just going to print response. bu okay so we're going to deal with this uh with the display on our UI later on then else then I'm going to have a pre print invalid username or password okay oh no actually we have a problem here uh let us just make it this way first okay so I just want to show you what is actually uh the format of the response object okay so reload hey so we're going to have PTO and 1 two 3 4 five so we could see here the return value so l in oh your problem we must have to call the login method okay save and reload one 2 3 4 5 Okay so you could see here now it is a list why because as you could see we have this one here okay square brackets Square braces and inside is we have a map which contains our uh our user details okay so that's how that's why I I have written here that the return type is a Le list of map a single map we expecting here a single map right and then if ever we're going to have an invalid one so I'm going to have 1 2 3 4 5 six so you must see here an empty List log in so we could see here now an empty list okay so therefore if ever it is empty so therefore it is invalid Okay so so this message here is actually not for uh the invalid password but it is something an error from our uh this one here from our status code okay but anyway what I want you to take note is this one if ever invalid an empty list if ever valid it is not empty so therefore here after we have okay we have extracted response that body and also uh converted it into a list so the next thing that we're going to do here is we are going to validate if it is valid so how would we know it is not empty okay so if user that we have here the method or property uh is not empty okay so if it is not empty so therefore valid if ever empty else okay I'm just going to have set State then you're going to have our message equal to invalid username or password okay but if ever valid okay um I'm just going okay I'm just going to do display set State then I'm just going to display in the meage okay just going to have the respon that body first okay then here I'm just going to have um that's stus code okay okay going back so first we send okay our query then as soon as we receive the response from the API we have converted the response that body into a list okay we have decoded it so it is now an array then we're validated here how to validate if it is a valid lugin so we have here if it is not empty okay so if it's not empty what I did here is only just to display uh the response okay the whole we would expect that we are going to get this one here okay and but if ever it is empty so therefore we're going to have invalid username or password okay so save then reload PTO 1 2 3 4 5 l in okay so valid as you could could see here we have now or uh the whole body for no response but if ever we have okay invalid password wrong password login so we have invalid username or password okay so we have it here now what I want is that if ever valid password is going to display here the full name okay so we have here the full name I want to display that okay so therefore our message should be user than USR underscore full name we have here okay let's try reload talk 1 2 five oops oh actually we have an error here uh by the way with our cats okay uh I'm just going to display okay I'm just going to set state message is equal to there was actually an error okay so I'm just going to show you the error okay so yeah P talk 1 2 3 4 4 five log in so we have here the error okay expected expected a value of type in but got one of type string okay so I want you to take note that the content of the list is actually a map okay so it has a single element okay and if ever we're dealing with the list if everything that we get the elements from a list is we are going to have take note of the error it is expected for an integer but we get a string so here it expects for an integer but it gets a string why it is because how are we to get by the way the first element so we're going to have this is an element zero okay element one and so on so we are very sure that it could either be only one or empty elements okay so therefore if ever it is not empty so we are sure that it has only a single element so therefore we are going to get the first element only okay so therefore we going to get this one here the first element but specifically it is the full name so the first element with only the full name okay so I'll let us start again reload then log in so we have here now our name I how about we have Kass then 5 4 3 2 1 so we have Kass if every invalid password so we have invalid username or password okay so this is now the most uh basic uh manipulation for our database okay so in our next videos we're going to have some more and we are then going to have on how are we going to insert update and delete and also retrieve multiple records okay so that's all for this video and I'll see you on the next topic

Channel: Programming For Students

Views: 2,220

Keywords: flutter mysql database, flutter login form, flutter login api integration, flutter login api tutorial, flutter login api, flutter mysql php login, flutter mysql, login flutter mysql, flutter php mysql

Id: 1uC8eFi6Sn8

Length: 29min 23sec (1763 seconds)

Published: Tue Jan 16 2024