Connect flutter app to mySql server and phpmyadmin

hello guys well before getting to the video I have small things I would like to tell you guys first of all is that this particular video is super important even if you're watching my ecommerce app because at the beginning I wanted to implement the back end of that project using firebase but since most of you requested to use my sequel and PHP my admin now we are going to use the app on a web server so if you're watching that tutorial this one is super important because after we're done with taeil's we are going to check the knowledge of them we are going to get from this video and implement on our e-commerce app the second news is that what you see on the screen is my app see money I'm going to open source this and I'll leave the link in the description and now I went ahead and and implemented a lot of functionalities like adding categories editing you can update the transactions you can view the summary for the day for the previous day the monthly summary you can do a lot of things on this app how much I'll not around I'll not demonstrate because that's not the goal but if you want to support me in a way if you like my videos please go ahead to Play Store download the app I'll leave the link in the description or just go to the Play Store and write see money and if you would like to have an app like these if you want to use it I'll leave the source code of the app in the description as well so you can just make use of that with that being said let's learn how to connect our flutter app to our observer thank you hello beautiful people welcome to the channel well today to celebrate the fact that we just reached 2,000 subscribers I'm going to do one of the most requests requested videos of all times I'm sorry for the inconsistencies the problem is I've been busy doing working on couple things and college in this but ok that's not the topic let's just enjoy the video and today we are going to connect or flutter app to our server ok so to start I'll just open Android studio if you are not new to PHP and MySQL it's going to be kind of helpful but if we new to this type will try to explain all try to explain it as much as I can to make it easier even for beginners to know how to connect your flutter app to the server also just create hear my new flutter project and I'm going to call this flutter app next to server yes because many of you guys I know that you are developers so you've been developing for other languages mainly web and you don't want to go and learn firebase to develop your flock the backend of flutter app and most of you even suggested us to use PHP and MySQL for the for the back end of the ecommerce app so to make it easier for people coming from a web development background or people that does just don't want to use firebase but they want to make use of their own web servers I think that this video is going to be super helpful okay let's wait until the app creation is done also guys here we have the app this is the basic app you get from flutter when you just installed it so I will run it now actually I will not run it I will do something else that is open up here so what are we going to do now first of all is to a little clean these are not everything because we may need to use some stuff here just for now just clear these comments okay now here I can just clear all of these and finally here we are going to clear these until okay let's clear everything you know okay so we are ready to start from zero inside here I'll just return stop hold of course and here AB bar for the f bar going to provide [Music] title of title let us change this title here too first of all I'll change this title too let's give it something like flutter flutter server app something like that I'll just gives squatter server here and what else here we're going to copy this variable and paste it here and we do have a problem so what is the issue then oh sorry it's going to be a widget dial dot title basically I think that the title of this app we are going to take it from here T's so I passing here okay let me take a second to explain what's happening here we have to import the package as we all know and the main is starting our app okay then here we have our class app which is stateless widget and from here from our stateless widget my app we are basically on defining the material app dot material app class what we passed it we passed the title the theme we're going to use the primary color is going to be colors blue and then home which is the age that we're going to that that are going to load oh we are calling the home page widget here and we are passing the title for that home pages flutter server app and here have the home page widget which is extending stateful widget and down here we have the title and since the home page state is a child of the home page we cannot access the title directly we have to write widget dot title and this widget is basically saying that this title is a variable inside of the parent class or this title of the variable inside the stateful widget class the the my home page class okay so we're going to Center tired Joe we're going to give true to this okay now let us do something else which is deleting these tests blah blah blah delete now it's about time for us to run our app hopefully doesn't take too long but anyways while the app is running I'm going to show you guys three-one that's something you can use even on you are apps for production so it's something quite interesting so just open your favorite browser and go to your favorite search engine and just write zero zero web host and my favorite search engine happens to be Google so I'll just use F and what am I going to do here we're going to get started now boom boom boom you can I mean now the package is depend on what you want choose the server for okay if you want to use this for a production app you can pay this is the currency here is rupees so this is something near to two dollars I guess and yeah for the premium so it's quite cheap but for now we're going to make use of the free package now I'll just sign up with my Facebook but you can put your email credentials here and everything or else you can sign up with Google if you want to it's practical but ok I'll I'll put here my email address as s at hotmail.com and let me put the password why would I write here you write anything you want and all sign up okay or do you see a car here's a car next blah blah blah so you just have to go through this stuff okay I will save it and after you're done with that this is what you're going to see and what you have to do when you reach here you just have to add okay a mail confirmation is required I may need to go and do this so let me need to stop this video for a while let me go back to after you did sorry after you did you email confirmation you'll be able to just hit add and here just choose what you want it I'll just write other and go to next optional host name first is supposed to not show this and I'll just general okay here you can pick a different host name but I will not change it I'll just generate and wait for a second okay done so here you have your host up and running and [Music] just hit on manage website you want to manage databases actually and I come here to new database give the name of the database you want I'll give it lock there I think is good enough use your name of if it's on roof and finally here give it a password is going to remember and create in your database on use on your server so after this is done you're going to have your server running free how good is that and meanwhile here we have our app nothing too fancy I'll just remove this banner the back banner below and we'll just put falls into that control save and it's good here you can change the color if you want to if you don't like blue I'll just put something different because most of the time to just you blue enemy let's put pink good let's go back to our server and our database is still being created okay okay nothing to worry about oh now let's wait for a second it's almost done and if you copy the link or this link here you will see that this server is up and running on the web and the only limitation you have now is that you can only are upload the maximum of 1gb of content but since I'm just using this for testing and you are just here to learn there's no problem about that now let's first of all how copied is your name you hit manage and go to PHP my admin' my connection is not that bad fast today so you have to be patient here and here let me just paste the username and the password and I do want to save it so here we are if you're not familiar with this interface these the PHP my admin' is what's going to allow us to work with our of our database or if with our SQL database so this is what we're going to use I'm not going to go in-depth into this place that's not actually the goal is not to teach you about PHP my admin' of SQL is just giving you the basic to connect your flutter app to your web server now here's our database we're going to create a table and for this table oh all right what what we want to happen I'll call it posts and I'm going to give it three columns and the first column is going to be ID which is going to be the idea of the posts I go I'm gay I'm giving a length of 11 and you have to check this a I this means it's not artificial intelligence is auto increment the ID on the table must increment every time a new entry is given to the table so it's it has to be a primary key just hit yes and here I'm going to write post Heather which is going to be of our car of our char two five five I'm going to give the land and finally I'm going to give post body and here I'm going to give our char again and 255 again if we need to this may be odd all I'm doing here sounds like Chinese to you but if you're familiar of PHP or web development I know that this is kind of easy what are we doing here we're just creating a table called posts and the attributes of a table we're giving the ID which is going to store the idea of every single rapper on the table and I have post header and post body what are we going to store inside of this table of posts and here the post header is like the title and the party is the content okay so just hit save and we are good to go so here we have our table let's insert some dummy content so you can just hit insert and you don't put nothing into the ID because this is auto increment and for the header of the first post all right flower flower flattered and here the content blah blah blah and love flattered and dark and blah blah blah and here all right native then I don't like native development it is so boring okay now what I'm going to do is browse and see what happened to our table so here have the table and the name of the table is posts as you all know the post header here is flatter here is native and you have blah blah blah blah blah like flutter blah blah blah I don't like native okay so for now this is done and we are going to our second step what I'm going to do now is I'm going to come back over here file manager and now all here we are going to upload some files which are going to make our life easier while trying to connect to our servers what I'm going to do first luckily we are going to edit some files let me open visuals to your code you can open any text editor you have that's fine if you're on Windows you can just use notepad if you want that's fine but if you have something like Visual Studio code it's awesome so just go and create in your file not this control new and you'll have the ability of creating in your file so what are we going to do here first we are trying to make sure that our server is up and running okay so here I will do something we'll connect to our server by doing something like let's create a PHP and one you with PHP if you're familiar of PHP it works like this then you have PHP but um to make our life easier first let's save this file save as and all right [Music] DB dot PHP and I want to save this we're on my desktop save okay now the icon did change here and this is good and here we're going to write PHP and after this is done we are going to create variable if another Miller with PHP you use this dollar sign to specify that you're working with a variable and I'm going to call this variable T NS is equal my SQL and then post is equal you have to come here and copy this which is basically the name of your server and if you want to try something out you can just open in your tab paste it and hit enter just to make sure that it's running and it is running okay so going back for the host I'm going to paste that that address or even better I can I'll come over here and no copy let's see if I get the HTTP this is what we want and then after you done with the host we have something called DB name here we're specifying the database we are connecting to and the DB name is going to be people let's go back to here known as databases and here you have the DB name you just copy the DB name from here and paste it over here okay oh this step is done then you have to create the user we have to provide the username and in my case it's Santos and finally I'm going to create a variable called paths which is the user password you just defined and mine was just one one on one one and I'm just showing this freely because I know that I'm not going to use I'm not going to use the server so but it's not safe to show you passwords I know that then we are going to use a try-catch block I don't know if you're familiar with that as well but you're basically saying try to do something and if it doesn't work do something else so at the higher in simpler level is so we are going to create a variable called DB and here is going to be new pd o pd o stands for PHP data object we're not going to go in deep into that too deep into that and if you're not familiar with PHP I have to understand this deeply you just have to know that you are supposed to write this code to connect to the database okay okay now here I'm going to write DNS which is the server which is the variable that we define here above and after the NASS I'm going to write user and finally I'm going to write here pass for password then for the catch block first we have to specify what we want to catch and this is PDO PDO exception e keeping the the exception PDO exception is the type and is the variable and when we have the exception I'll create another variable called error which is going to be equal to equal it's done too II then here at the end will write gap get message then finally we will echo nope not each supposed to be AB Co error and if everything works fine we want to echo connection ok so going through this again real quick it's basically what we created the DNS variable which is going to allow us to connect to our server we are specifying that we using MySQL I first and the host name or our server address is these long address here the database we want to connect to is this one the user name is Santos the password is 1 1 1 1 and we are using PDO because it's more secure and all ok so with this done I'll save this file and I'll go back here you know right here file manager let us upload the file so here we have our file manager also that is a bloated file or I can just create a file here I'll call it D be the bid okay what's the best thing to do here download more opens you dudududududu in your folder let's go up and then oops there was an accident sorry I'll hit file manager again I'm here already we want to upload the RDP file now bla bla bla bla bla just wait a second DB dot php' here we have our file DB dot PHP and I want to edit this file okay since we already have this written here and just come and copy this and I'll paste it oops over here save and close and now how going to test this okay now it's testing time oh that is copy our server address I know that this process is kind of complicated but this is to make sure that we all set our servers correctly okay I will do this and I'll do slash let us put the rattle to DB dot PHP and see what we have mm-hmm and I have to specify the path to that file meaning that we have to pass through public we have to pass to public HTML and then we have to access this so the path is supposed to be like this copy here save and close over here hmm so there is a problem here let's go back to our file manager edit there are couple things I had to change first of all here what we did paste the address is not supposed to have the address it's supposed to have localhost I'll save this and coming back here managed surveys for the user DB user this is the name that we using so I just have to copy this come back here and paste it now let's save and close okay now let's see what happens if I go back and I reload Chara now we are connected to the database okay now I have to do something else let us try to find a way to retrieve our data from our database let us create the file and I'm going to call this file get dot PHP then you hit create well you can go and edit your files using the S code and then paste the code here or we can just use these and even the text editor D provide here it's quite nice so now let us write our code let me zoom let us write the code that's going to give us that's going to give us back the contents of our table so right here PHP then first we're going to create a variable and I'm going to call it Harry and then we have your select star meaning you want to get all of the content from if I'm not mistaking the name of the table is posts okay then here we have STM is a variable stands for statement we're going to be equal to DB but we have to require the DB first require one's DB dot php' okay and now here we can just write DB and this variable the DB variable is defined inside of the DB file I will show you afterwards we define this variable prepare our query and then when this is done we are going to put we are going to HTM execute okay this is PDO PHP syntax but basically what's happening is we are requiring our DD DB dot PHP file which stablished the connection of the database and then we are creating a variable of type query and the content of variable select everything from the front from the table from the table posts and then we're doing statement is equal to database dot prepare query this is just to make sure that our query is error-free and afterwards we're going to execute okay now let me just get a single up to this road from our database and then we're going to have STM or our statement is going to be fetch we are getting the content from the the table by fetching the content from the table then we are going to give PDO and then here we're going to get to give fetch underscore a sock meaning that we want to get an associative array okay oh then here let us try for example echo row get dot PHP and let's make sure that our code is error-free by coming here and running this get got PHP a right to string conversion and understand what's the problem because again here we are just printing our this is an array because we are fetching the data from the database in the form of an array PDO fetch associative array one can do is let me open vs code and this is the file already had here all I want to do is to echo our JSON encode this is what I want and it's going to convert whatever is inside of these into a JSON format so come back here and I will paste this JSON encode row okay save and close let's go back here let us cut on and we have it we have the response we are fetching from our table we created this table the ID is one the post header is flatter and the post body is blah blah blah blah Allah flatter connected is basically the input from if I go back to the DB dot php' let me edit this and we don't need to have this anymore let me just comment save and close now what are we what are we going to do let's try to view this output from our flattered app so let's go back to our app which is not this let me run the app oops oops oops oops Oh No have some extras here okay let me run the app again and put it on full screen now let us make use to make use of HTTP you have to import a package called HTTP you just go to here you can just write dart HTTP then though the the thing I'm going to have to add it on your pub spec file is here I just have to write HTTP then column it's all you have to do and then you get packages from the pub spec file so your are you copy deals and then you hit I will just get and make sure your indents the edge with this F okay now let us try to view our response inside of our app so import package HTTP dot dart as HTTP now let us write here future get data it must be a synchronous and what are we doing here we are giving this future because we are going to expect to get something in the future we are going to expect to get the response from our server and we may need to wait a while to get the response back so inside here first we have to define URL which is going to be able to come back for our web browser and this is the URL we want okay and then we have HTTP response I won't create a variable of the type HTTP response and I'm going to do await HTTP but get URL and then after this they're going to do [Music] letters to our data is equal to J I need to import some packages here in part [Music] dart convert this will allow us to convert these two because we want to use JSON decode response dot body and finally let us print data to see that if this is working or not and to make sure that we don't run into any errors let's write data to string and then if you come up here we will control n and come to override methods want to override the initial state of the app and at the beginning we want to do what get data okay so let us see oh how good does it work or if you run into trouble this pppp walking where it is let me stop the app for now because we do have a lot of things going on here and let us run the applicant let's see what we get this may take a while but hopefully since it's not the first time we're running the app it won't say too much time okay okay and now let me in the meantime let me and ladies and gentlemen it is working if you see here we have ID one post flutter post body blah blah blah I do love flutter let us see where is this coming from right there if we go let me soon dissolve if we go to our admin let me take a while Adventure is going to open you can see that here for our flutter database let me hit on our posts table do you see we have the ID one host header flutter post body blah blah blah and everything and this is it ladies and gentlemen this is how you connect your server to your flutter mobile app and from this you can do basically every single thing you want but this is not all I will do because now only we will retrieve the data from the database the next video are going to implement some cred functionalities like we're going to write data into the database we are going to delete data we are going to update data and all of that good stuff we are going to do that on our next video I hope you did like the video and if you did don't forget to hit that subscribe button and don't forget to comment to LIKE and to leave any suggestion if you have thank you

Channel: Santos Enoque

Views: 122,900

Keywords: Flutter, flutter app, flutter app firebase, flutter firestore, flutter tutorial, flutter app coure, flutter ecommerce app, ecommerce app, curso completo de flutter, flutter for beginners, flutter php, how to connect flutter with php myadmin, flutter mysql server, connect flutter to webserver

Id: HT5WuFRJ2no

Length: 53min 55sec (3235 seconds)

Published: Sun Feb 24 2019