Build a Full Stack Web App in PHP and MySQL with Docker from scratch!

hello everyone and in this video we're going to be walking through how you can get started running a full stack php application using docker and the reason why docker is so cool is that it is portable in the sense that whatever you're developing on your local machine if it's a windows machine or a mac or a linux based operating system it will run the same no matter where else you go it makes deploying the products that you make as a web developer a lot easier and faster so we'll jump into how you do that in this video and php is a old language but there's been a lot of iterations and versions to it that still keep it a fairly fresh and modern language to use when you're writing a website so very great way to jump into the full stack of web development and that's why i'm really excited to share with you guys this stuff so i have an empty project repo in front of me and we're going to be walking through the steps to create this entire full stack web application from the php to the mysql database as well as the actual images that are going to be running their operating systems so we can run an apache web server to handle these requests that we get for users who want to view our website so the very first thing i'm going to do is i'm going to right click in this folder i have i'm going to create a new file i'm going to call this test.php and i'm going to try to make this bigger for you guys because i can't see that well either and basically what i'm going to do here is i'm going to just write up some very simple php and all it's going to do is echo hello world and you always need to remember that semicolon to end it and then you're going to press ctrl save on the keyboard and so just like that i have created a little php file but i can't view this page in a browser it's not able to be rendered so what i want to do is i want to create a new file inside of this project and i'm going to call this docker dash compose dot yml or yet another markup language and the purpose of this file is going to be telling docker what uh images does it need to grab in order to make this thing run and you can define some other properties that we will be doing in just a moment so the very first thing inside of your docker compose file is going to be the version and if you have installed the docker plug-in i'm using vs code there is a docker extension for vs code that enables this kind of autocomplete that makes it really slick for when you're doing this stuff like i didn't have to finish typing it up but i do recommend sewing that if you're getting into this so we're gonna be going with docker version three and i can just add a comment by doing a little hash like that this is the docker version and then a new line character you don't need to worry about commas or semicolons with the animals um and then we're going to be defining the services that are going to be associated with this docker container or container cluster as well refer to it so basically inside of our services this is where i'm going to say we have a www service and it's going to have an image and we have to give this an image name this image name comes from the docker hub repo so if you google docker hub you can click on here and it takes you to the website and so what we want is a php image because we're going to need a container to handle running our php code and specifically what i want in here is the one for apache so i'm just going to control f apache and you can see that you will eventually get to a point here where they're telling you php versions that have apache in them i'm going to be just going with the latest thing here so i'm going to close this out and so basically it's going to be php colon apache just like that in order to define the image that we'll be using for this particular service in our full stack web application and i'm also going to be defining volumes like this and the purpose of volumes is to uh sync have a two-way real-time sync connection between your running container and your local host and you need this so that you whatever you're writing inside of vs code right now is on your local machine you want this to be synced with your container so that your container will reflect the new php code that you're writing into it so what we're going to say is that i want to sync you know space and then you'll do a double quote dot slash that basically means the current directories that is the project directory we are currently in i want to sync this with this is now on the container side and this container is going to be running a linux operating system so if you're using if you're familiar with windows pads it'll look a little bit different but it's var www.html it's basically everything you see in here will exist inside of the container under that volume and i'm just going to specify that so sync projector with container web der and i'm going to also want to specify the ports here and specifically i'm going to be binding port 80 on my local machine to port 80 of the container and in addition to that if we ever wanted to serve ssl stuff we will be finding port 443 as well so this is just for future ssl traffic just you have a little bit of uh you can add some security down the road i'm going to now press ctrl save on the keyboard or command save if you're on a mac and now what we're going to do is inside of vs code they're really cool at showing you a terminal so if you press command or control tilde pulls up this terminal right inside of your project repo and what i'm going to do is i'm going to run the command docker dash compose up and so when i run this guy what it's going to do is it's going to find the docker compose yaml file inside of my project directory and that's going to say okay i need to get this php apache image that's been specified it doesn't have it so now it's going to run through actually downloading all the stuff that it needs to do this so we will give it a moment to do all that and it can take some time so i'm going to let this thing spin on all right and so um the other thing to note is that once this thing uh finishes doing this i do recommend opening up docker desktop uh if you're running this on like a on a windows computer um or a mac whatever if you click on containers you'll see that it has now created uh this thing php docker stack demo so it's referencing your uh project's name in it so it'll reflect whatever you've named your your parent directory um and then if you click this you'll see that it now has a little container spinning for us and it's running which is great so what i'm going to do is i'm going to open up a new tab in windows and i'm just going to go to local host port 80 and it's important to know that this is actually the default port so you can just go to localhost itself and don't need to specify the port but then you do a forward slash and specifically in our case i call that file test dot php so i'm just going to type that in and now we have a web server running inside of a docker container on our host machine in this case a windows machine and it is returning us traffic when i send a get request to port 80 on it so just like that and you can be really explicit if you want so you can have like a port 80 there it's gonna be the exact same thing and chrome even truncates it for you but um that is how we get the php service up and running it's not really a full stack web app though because we don't have a database we're not connecting to a database so we're going to want to improve this and add some features to it right so i'm going to close this guy up and i'm going to go back to vs code and what we're going to want to do is we're basically going to be adding an additional service into our docker compose file so we've got the www service right here i'm going to close that up or minimize it i'm also going to have a db service to be our database and i'm going to specify the image and the image name specifically this is stuff you get off my sql hub or you can just copy it from someone else this is going to be my sql colon latest so it's just going to pull the latest version of mysql from docker so you don't have to worry about downloading stuff manually and then you're also going to be defining some environment variables for this particular image so in our case i'm going to paste in some stuff just to save some time i'm just going to paste that guy in just like that and you need to get that spacing just right otherwise it complains but yeah so what we're doing here is we're going to be specifying uh the database name as well as a user for this database and a password and we're also going to be allowing it to have an empty password just so it doesn't complain at us but now that we have added a database service i also want to add a service to have a web interface to look at this my sql database we're spinning up so in that case what i'm going to be doing is also adding another service in here which i'll just copy paste in you guys can copy this right off of github i'm just going to paste that guy in and make sure that we get our indenting rate um so basically what we're doing is we are grabbing the php my admin image off of docker hub as well and then we're going to be binding port 8001 on my local computer to port 80 of the actual uh container itself and then we're also defining the name of the service for the phpmyadmin or pma to grab as well as the port that it should be working with so in that case it's 3306 which is a default value for my sql so we've now updated our docker compose file i'm going to press command s to save i'm going to go to my terminal right here i'm going to press ctrl c and this is going to stop the running containers and i'm also going to run the command docker dash compose down like that and it's going to have the effect of basically stopping everything that was going on and i'm going to run the command docker compose up just like this and now when we're restarting our service it's going to realize that it doesn't have all the images that it needs so it's going to run through the process of downloading the my sql image as well as the phpmyadmin image from docker hub and so we'll let this thing run through and then we'll get back to it all right so uh looks like it has finished downloading these things and now these are logs just from the services that are coming up online one thing i do want to call out now is that if you go to docker desktop again you will now see that our little cluster of containers uh there's now three of them in here so we've got the mysql service we've got the php service and then we also have the phpmyadmin service which is what lets us have a nice ui to our my sql database service that's running now in our container so these things are all running which is great and now what i'm going to do is i'm going to open up another window right here and i'm going to go to so if we recall in our in our docker file right here that we bound uh port 8001 on our host to port 80 of this container so i'm going to go to localhost and instead of port 5000 i'm going to go to 8001 and you can see that it now takes us to this login page and so on this login page when you do that it is prompting us to put in the username and password and the username and password for this is what we've defined already for the mysql service which in this case was just php my docker or i'm sorry php docker and then the password was password obviously if this is a production environment you should put this into an environment variable you should have a much more complicated password but for the sake of this little demo um this is where we're storing it is just naked plain text inside of our docker compose yaml file so just put on these creds i'm going to click log in and it's going to now authenticate me i'm going to save these creds just so i don't have to always remember to punch them in but now that we've done all this uh you can see in the left pane that it's showing us these databases that exist we care about that php docker database because that's the one that we've created for our specific web app i'm going to click on it and it's going to tell us that we don't have any tables so we need to make a table inside of our database itself and in our case i'm going to call this table php underscore docker table and we're gonna give it four columns and click on create and so this is where uh having a little bit of knowledge of php helps i'm sorry of sql helps um but you know for sake of just getting started we're gonna give this uh one thing it's gonna be called id and id is going to be the primary key uh so there's a thing in here where you define it as the primary key and click on go so your database needs a primary key for sql and then this ai thing means auto increment and you do want your primary key to auto increment because every single row inside of this database needs to have a unique primary key otherwise it will have a lot of issues so you need to check this regardless of whatever kind of database you're making you need to have that as long as it's sql database um and then the next thing is i'll say you know i want to add some things into my database that'll have you know some kind of title so if this was a you know a bunch of little blog posts these things would have titles and the title is usually a shorter string so i'll say titles can be up to 255 characters in length and um i also would say you know my little blog post would have like a body and the body is going to be a series of texts you know some sentences or whatever uh and then i'm also going to have a date created uh property in my thing and i'm going to call this a text type of of an attribute for my sql database and the other thing is that's it so uh you can try to have it default to current timestamp i was running some issues with this but i'm just going to click on save and you can see that it has now created a table inside of our database which is awesome the next thing that we want to do is we want to put some data into this thing just so we can show how to connect to a little database real quickly so if i click on this insert tab in phpmyadmin and you don't put anything in to this top row because this is your primary key and it will figure it out on its own title i'm going to call this the first title or you know first post just so we use a little bit of creativity and this will be the first message body just like that and then the date i'll say you know my first message was last thursday and then we'll click on go and you can see that it tells you the actual sql command it ran in order to make this happen which is great i'm going to rerun this again we'll create like a second little blog post or whatever so again we'll call this the second post and we'll call this the second post body uh or message whatever you want to call it and then date we'll say that this thing came out you know the following day and we'll click go right there so we now have uh inserted two rows into the sql table uh that we've created for our our web application and click on this guy and you can see that it is showing us uh the two entries that we've just created now a very important thing to note when you're working with docker is that the issue you will run into is that when you stop your docker container on your local machine you'll lose all the data so if you were to stop your mysql container right now these posts that you've just created as your little test will be lost and so the question is how do you not lose these and so what you can do is you can click on export right here and i'm just going to leave all these defaults click export again you can see that it's going to download this table or my database to this little sql file and what's happened is that from the docker container itself which is not going to be persisted when it stops running it has saved that sql table into my local hard drive on this windows computer and the reason why that's cool is that if i take this guy and i just drag it or copy it into the project directory of my uh of the php package that's running this full stack web application is that we now have uh saved this stuff and you can open it up and view it if you'd like it's really just telling you what it's doing which is really just inserting these two messages that we've created as well as defining like the schemas for it um but yeah so that's that's beyond the topic of this but what i'm going to do is i'm going to create a new folder right here and i'm going to call this uh the database folder and i'm just going to drag the sql file into that just so that we are saving this in a little bit more organized way so that's what we're going to do and now that we've done all this stuff another thing that's really good to do is you know once i stop my container uh we're gonna lose whatever is currently in there in that in that sql service but we want to reload it so how we're gonna reload that is we're going to go back to that docker compose file and inside of the image inside of the db service i'm going to attach a volume and basically uh this is stuff that just comes from uh the actual documentation but we're going to say that you know whatever is inside my current db folder that we just created that now has that sql file inside of it we're going to sync that on my local machine with the uh with this other folder and specifically what it's called is docker entry point dash init db dot d and this is to sync persistent sql files with container and so i'm going to save this guy and what i'm going to do next is i'm going to test that this actually works the way we expect it to i'm going to go to the terminal and i'm going to press ctrl c it's going to stop my containers i'm also going to run that docker compose down command just to further make sure that we are clearing our resources and then we're going to run docker compose up and this time when docker compose up runs it is going to be recognizing the fact that i've got this little sql file present inside of my repo that it should be using when i'm starting this thing up so i'm saving whatever's inside that database so i don't have to recreate it every single time and now what i'm going to do is i'm going to just let this thing finish but i want to go back to my local host and we're going to go back to port 8001 assuming this guy's back up in line run this guy it's going to ask us to log in we're going to log in and just going to open up this php docker table and we should be able to see here that we have these uh two rows already in here yeah so it successfully remembered the entries we've created previously so that if you are testing this in a dev environment and you want to not have to rebuild your table every single time very very useful tool to have um or if you know you want to make your application more fall tolerance and handle power outages really really good stuff to make sure that you are backing this up uh to or you're exporting it's regularly to you know some kind of local disk that will be persisted like in my case this windows computers disk so i'm going to minimize this stuff and now we are going to work on actually creating a connection to this database that we've we've created so um i'm going to go back to my project directory i'm going to create a new file in here we're going to call this one index dot php and inside of index.php i'm going to immediately start out by defining the opening php tag and what i want to do is i want to connect to the service i'm going to paste in this stuff because it will be easier for me to explain it so uh first thing we're doing is we are calling mysqli mysqli is a little package inside of the apache or the php container that will allow it to connect to another service inside of you know our little cluster and so specifically what we're doing here is we're defining this connect object to grab the database and we are passing in the username the password as well as the db table name or the the name of the database to the mysqli connect class and so it's going to create this connect object and then from there we're also telling it the specific table name that we want to be connecting to and then i'm going to be running this query i'm defining the sql query that's going to be querying this table and in our case we're just going to be selecting all from this table so it's going to return us everything and then from there what we're going to have is a response object once we execute that query so the mysqli package again comes in to execute the query and connect to that database that we have running in our service and then what we're going to do is print out all of the items inside of this table and so that's it's pretty simple stuff just printing it out right now we don't have any forms or anything but you can always add that down the road i'm going to click command save on the keyboard and then what i'm going to do is i'm going to just in the terminal i'm going to do control c just to stop my service and restart this and so once we've done that i'm going to run docker compose down again followed by docker compose up okay and while this thing is booting back up i'm going to open up the chrome tab i have again and i'm just going to go back to that my sql admin page to confirm that our service is running again so it might still be booting up so we might have to give this thing a little bit more time another thing you can do to check is if you open up the docker desktop thing you can see in here that it says it's running but i just want to see what it's telling us all right so now the server's up i didn't do anything just was a little bit more patient but now we've got our database running and what i want to do is i want to go back to the local host and we're going to go to index.php and we're going to run into this error message which is a pain in the butt to deal with but this is uh part of learning so basically the issue is that the mysqli package is not yet installed inside of the container that is running the uh php code or the php service that we need so the way we resolve this is we are going to go to docker desktop and we're going to view the php service that's running and they have this little button here that says um so if you click on this guy they should have you there's a spot where you can open this up in the in the command line so you can see exactly what's going on i just want to get to that one second run this cli so what this did is it just opened up a cli connection or well i'm now viewing the cli the command line interface of the docker container that is running the php service and what i want to do is i'm going to run this command paste that guy in so what this does is it is going to install the my sqli package that is needed to actually make all this stuff run because my sqli is needed to allow the php that we're running to actually connect to the mysql database that we have and so we're just going to let this thing go through its song and dance and it looks like it's successfully installed so now that that is the case i'm going to go back up to here and we're going to refresh this page and still might not work so what i would recommend doing this situation is i'm going to close out of this interactive terminal i'm going to go back to the docker desktop and i'm going to restart this specific container and we'll give it some moments to finish rebooting okay and uh it might be a little bit premature but we'll see so i'm gonna go back to here i'm going to click on uh refresh and now that we've installed the my sqli package inside of the actual container by going to its command line interface and we restarted that docker service we are able to view the contents inside of our actual mysql table in with php so basically what we have done is we have just created a full stack web application it's all written in php and it is showing us the contents of a database in a separate service and so we now have a back end as well as a front end for us to play with here and it's showing us the dates the body of the message the name of the message and so just like that um we are off to the races which i think is pretty awesome stuff uh i will be posting all this stuff to github so you guys can clone this repo and run it and just as long as you run the docker compose file you should be able to have a starting point to start developing full stack web applications which i think is really awesome so thank you all for watching let me know if you have questions and i will talk to you guys next time

Channel: Vincent Stevenson

Views: 40,324

Keywords:

Id: 2Bxh5FNGznQ

Length: 26min 9sec (1569 seconds)

Published: Fri Sep 09 2022