Connecting Login Page in Flutter to MySQL

um hello guys so um in this video i'll i'll be teaching you um how to connect your code in flutter so um this is uh android studio so if you're using android studio in windows um it's fine i'm currently using intellij's idea on mac os so it wouldn't matter whatever ide you use vs code androids to your intelligence what you need first is of course install samp so i'm using 7.3 which is for mac um just use any version you'd like in windows but i suggest using the same version install it so just click on next next next and then finish and then run samp and then start these two services number one mysql database and then apache web server start them both make sure there's no error and then go to localhost um slash phpmyadmin to confirm it's working okay so you should be able to access different functions in localhost phpmyadmin in your browser okay um the first thing we need to do is to go to your sam folder which is most probably in your applications or see program files or see samp sorry csamp and then go to htdocs create a new folder name it whatever you want and then inside that folder which i've named mine local connect create a new file a php file inside so i'm us using visual studio code um uh what we're creating here a php file in order to connect to our um database okay this will be the intermediary uh between our flutter and our sam database okay so first don't forget your php tags which is uh this one and then next let's create a new uh variable which is a database or db mysqli connect and then name it localhost because we are connecting to our local sorry localhost and then the password or sorry the username will be root and then the password usually you have to leave this one blank just leave that one blank by default it's gonna be blank and then next thing is we now we need to have our database name so let's name it local connect as well so inside that one let's create a table called users yeah users number of columns just leave it as ease and then inside it we have um our first attribute which is named id okay uh right here we have ai which is auto increment so every time you insert a new record in your table users um it's gonna uh auto increment every id so one two three you don't need to specify a specific id and then next we'll have our uh name which is uh sorry let's just do username and then have that one as warcar one two eight and then we have our password here which is gonna be var car still one two eight then let's save it okay so we have our database local connect and then table users yeah and then let's create another table which will be named probably a list of our gallery so we still have our id don't forget the auto increment and then we have our description which is going to be text and then we have our link link or the url of of that picture which is going to be text okay save but um i think we're not going to be using gallery for now um this is just for demo purposes what we're gonna be focusing on is the user's part so let's insert a new record here leave this one as is and then for the username let's have it uh admin then for the password we have it one two three four five six just click on go click on the users here and then you should have here um sorry yeah id one username admin one two three four five six okay so let's go back to our vs code sps code here so our database um name will be local connect don't forget your semicolon here if um if not db okay meaning it's not um connected then let's um throw an error just echo database connection field okay and then if we if we are successful in connecting then let's do an sql query let's just sorry let's just rename first our file name see our story name here just do register or sorry log in the php delete the file [Music] okay yeah so localhost slash um url localhost slash login.php i think my url uh don't forget your folder name local connect slash login.php and so let them an error so there's no error so we'll proceed to our query so next we have our login query which is select all from um user stable where user name is equals to something and password is equals to another something but our username will come from a post request so this this is the data coming from flutter and then don't forget the password too so inside the username um add a double quote okay and then that username so this is php's way on how to concatenate strings and then the password also do the same so inside your single quote add two double quotes and then that and then dollar password dot okay so the result will store in a result variable then perform the query here first you have to specify the database you're connected to and then the query itself then let's count how many rows it returned by using um num rows so plug in the result so we have to we can count the rows so next if the account is equals to one or say more than one then let's echo an error yeah let's echo an error that means [Music] the user already exists on that error success okay so meaning the username and password combination is correct else sorry count is more than or equal to one then success else echo json encode [Music] error because there is no combination because there is no username password combination okay so let's try to run okay and define index on nine seven and eight yeah because um we don't have the post yet okay so how do we plug this one into our into our um flutter application so it's currently running here um let me show it to you so right now it's like this so when you click on login are redirected automatically to the home screen so before before we want yet to redirect maybe we can perform some validations first so number one um you need to have a username and password inputted so it cannot be blank so let's look for our navigator push so inside that let's create a logic so if yeah before that let's create a text editing controller first so inside inside here okay let's create a text editing controller named user name uh initialize that one as a text editing controller sorry and then another text editing controller here which is going to be password text editing controller and then um pass this one into the text field for the username so here let's add sorry let's add a controller so the controller is going to be an attribute for the text field not the input declaration so here we have the username yeah username then here text field um you have another controller name password by the way um you can add obscure text to your text field if you want it to be obscured so like passwords it has this dot or asterisk whereas without obscure text it's just pure text [Music] okay yeah all right so um the next thing to do is we're gonna create a future uh so this is going to be uh before that one we have to add or we have to import a package named http so from the previous classes we made we made uh we used http. before so add it into your pub spec.yaml as well where is it it's right under it's right under hold on let's look for it so add it in your dependencies like so then do pub get uh flutter pop get okay finished so it's not red anymore it's not there anymore going back so let's also add our flatter toast so toast um your toast here is this one uh this is a toast message so how do how do we add that one um let's look for the package flatter toast okay this one so let's add flatter toast in our pubspec that yama do flutter toast and then to 8.0.7 pub gap sorry uh let's just do any so whatever version it's compatible with okay so now it's done let's go back to our login screen let's import a new package again so for this one we'll be using flutter toast slash flatter toasted okay so now um we need to create a future uh function uh where it will check for existing user so let's try uh so it starts with future and then do login it's gonna be an asynchronous function so don't forget the sync um keyword here so first specify the url i'm sorry so let's try http local host and then slash local connect slash login.php then store the response make sure it waits for the response and then we're gonna use the post um because remember we in our vs code okay um we use the post as well we also have get but we're gonna use post here so just add in the url sorry the url and then for the body okay so whatever data you need to pass specify that one here so number one you have to pass this username it's waiting for you for a username uh plug in the user controller and then the text of that and then the password um will be pass word dot text not user it's username that text inside we have the data let's decode the data so it's going to be the body response or the body of the response so if the data thrown if the data thrown is success then you have to do a navigator push here so search for the navigator push delete if and then copy if the data is success here and then call the login function in your unpressed for your login button oh sorry yeah login okay for the context it's it's gonna want a context so maybe pass it to your login function code from your text field on top function so let's search for it again then maybe we can pass the context here um login build context let's just name it that and then con so basically it's just passing the context from the build um because we don't have access to the context variable uh in our class here so you're gonna want to pass that one here okay um undefined name jason that decode uh yeah else if it's throwing an error um let's just do a flutter toast so that the user will know that the username and password combination is wrong or it's not in the database so else else let's do a flatter toast close that shoulders okay this is a an external library or an external package so the message will be um the user and password combination does not exist okay and then don't forget the toast length so you have two toast lengths you have the length short and then the left long i think yeah so let's just do short it's just a couple of seconds long uh gravity um that means um where it will float exactly so i want it to be towards the center and then we have the background color to red okay we don't need to specify the background color maybe the font size again 16 then don't forget your semicolon below so right now it's showing an uh uh a json error so i don't know exactly where it is showing that one reason let's search using the code error flatter so we need to import dark convert for that for us to use um json okay so the error goes away so let's try if we can log in in our application with the user in the database named admin so again we have our admin here one with a password one two three four five six so let's try it with blank it's not throwing any error maybe we want to do some checks variable checks or validation checks here so if the username that text is blank or the password is blank maybe throw an error a flatter toast saying that you cannot leave both fields blank you say both fields cannot be blunt otherwise then call the other functions um yeah yeah okay then so let's try if it's working um start the application just try logging in it's drawing another missing plugin for show toast on channel um let's go back to the show toast or flatter toast 807 okay it's not working on eight that oh that's seven so let's try okay maybe let's try other versions 704 or 7 1 8 okay so let's try to run it again it runs same error maybe we can try to do a flutter clean so just run your command prompt then in your command prompt do cd in your development and then your folder and then do a flipper clean then just rerun the application from android studio [Music] not sure if it's running let's try to restart our ide okay so let's run and hopefully it will work so if yours is not working maybe try to just do a flatter clean in your project folder and then rerun the application so if you're watching the video guys um let me just skip to the part and then i load to the part where it's loaded it's taking quite a while okay okay so we are now seeing the toast that both fields cannot be blank so it will just linger for a short time so a couple of seconds okay so now let's try to uh type in admin and then the password will be admin so it's not in the database click on login okay connection refused so maybe our url is wrong so what we're gonna do is to check for our ip address go to the network network references okay we have so if you're in windows just do in command prompt just do ip config okay the ip will be there so for my case it's 192 that 168 dot one dot 1.102 okay so let's try it this way save the file go back to your emulator then try try it again okay we have another error insecure http is not allowed by platform so let's do this one in our android manifest that xml located in android app sorry android app src meme right under application it should be right under application save okay let's try to do a hot restart same error um okay let's try to restart the emulator so shut it down then we start so let's try if it works um i'm using mac os but guys uh the flow is very similar for windows so i think this error will not occur in windows i think it's a mac os only thing [Music] okay let's let's try on login okay so there um the combination admin admin does not exist in the database so we know for now that that combination is admin and one two three four five six so there okay so when you type one two three four only the combination does not exist right same so that's it for the login phase um i'm just gonna create another video for the sign up because i haven't created yet young ui the part the ui part of the sign up page so that's it for the login

Channel: NeilFX

Views: 33,068

Keywords:

Id: RK5hY3PuzqM

Length: 35min 2sec (2102 seconds)

Published: Sun May 30 2021