Bootstrap 5 + PHP Tutorial | Make Your Website Dynamic

hey guys it's david from mdbootstrap.com and in this tutorial i'm going to show you how to create this page using bootstrap 5 and php so this is the second part of our tutorial but don't worry you don't need to watch the first one uh but if you would like to i strongly encourage you to do so basically in the first tutorial and link to this tutorial you're gonna find in the description down below we have created this page uh html page using bootstrap 5 and css only so this is the page and so what you can do you can either go to the previous tutorial follow it it's like i think 40 minutes to create this page so you will learn how to do it or if you don't care about that part you can just go to the uh this repository and you're gonna find link in the description down below uh you can go to this repository and github repository you can download it and then you will find this final html which is the code uh which is the source code of this page and this is going to be our entry point our starting point for this tutorial so what we're going to do we're going to change this page from static html page to the php page and what we're going to do we're going to split this single landing page into a couple of the sub pages which is going to be generated automatically using php and we're also going to add nav bar or actually update navbar with um with links so we can dynamically change between between uh different pages now for the prerequisites um in order to use php you need to have a server installed on your computer and i'm i will be using xampp so if you want to follow that just navigate to xampp web page download it and install depending on which operating system you use just download it install it now if you don't have xampp installed don't worry just pause this video right now go to the tutorial on how to install php on your computer which you will again find uh in the the link uh to this tutorial in the description down below and then once you have it installed just come back here and continue watching the video and the reason behind it is because you know you you might you you might be using different server not not necessarily xampp or you know this installation might just look different in the future so i just decided to have it separately and you will find link to the tutorial how to install xampp in the description so if you have xampp or other php server ready and install we are ready to start so without further ado let's get started now i already downloaded this repository here so you can see it here and i have this final htm html folder here if i open it i can see my page over there now what i'm gonna do i'm gonna start xampp first so let me run it so this is how it looks on windows and this is the control panel i'm going to start apache which is the php server and if you're using um xampp then you should locate your htdocs folder because this is like a root folder for php and what i'm going to do here i'm going to paste this html oops no i didn't want to do that so i'm going to create a folder called bs for bootstrap and php for php and i'm going to paste content over here now i'm going to open this page here using localhost bs php slash and here it is uh this is what is uh this was happening so our server is basically rendering our html file so you can already see that server is automatically using either html um or or different it's looking for some file which can open obviously we can pass entire extension and it will also do the same now let's see what's going to happen if we're going to try to open or change this to php so i'm changing extension to p h p i won't i will refresh this page now now obviously we cannot find this index html um no more because it doesn't exist but if we get rid of this extension server again will be able to open our file okay now let me open this in visual studio code obviously you can use any any web any editor you want you prefer you want you'd like to use i'm going to be using visual studio code let me enhance um let me enhance um font for you uh okay so what we're gonna do what we're gonna split our page into a couple of uh smaller files um and we're gonna um we're gonna split it like that so from index dot php we're gonna uh move this header into the separate file then we're gonna move all these different sections you can see here so navbar this section that company section this section and all this section into the separate files so basically we're gonna have them like this so this is header section one two three and so on and so on and then i'm gonna show you how to using php you can just combine them all together to to create a page and the reason behind it is that now imagine that you have this html file and you want to do exactly the same using html so what would what you have to do you would probably have to copy this index.html file like four or five times and you would have this navbar called five times exactly the same and this is something which we obviously don't want to do because if you want to change something in this link you will have to do it five times and this is not the way you should do it so let's have a look at this and by the way if you don't understand it don't worry just follow the tutorial and once you do it i think you're gonna kind of feel it what's going on so let's start with this one i'm gonna get this part and i'm basically gonna cut it so i'll just remove it now if we check our page obviously it will it will go wrong because we removed all the styles and so on and so on something it doesn't work but we're gonna fix it very soon what i'm gonna do i'm gonna create folder called components and you can call it whatever you want you don't you can call it like pages or sub pages i'm going to call it component inside this component i'm going to create a new file i'm going to call it head dot enc dot inc dot php and recently why i'm calling this uh this like that is because i'm you don't have to do it you could call just like head php actually you could even call it txt but this is wrong you could uh what you could do you could call it hat php and that would be perfectly fine but um if you add this part it suggests to you that this file doesn't work stand alone right so this is just file which is part of the bigger um bigger project bigger another file so it's used um in other file and it doesn't necessarily works standalone because obviously if we try to run this one this is not a page it's not going to work right so this is just suggesting you that you should um this file is being included somewhere else okay so let's uh let's um let's paste it let's save this one and now what we have to do what we want to do is that we want to include this file here how we can do it there are two ways to do that now if we gonna run this kind of function in cloud and provide path to our head in php let's see what's gonna happen i'm gonna refresh the page and we have an error oh because we didn't close our php so this is php opening tag this is php close stack and obviously because we are using php extension our server knows that it has to treat it as a php and has to compile it so now oh i didn't save it and now everything works like a charm and if we check um our source code obviously we see that this part got included over here and is what we really wanted to do now there is another function which is called require and if you compare it it basically works pretty much the same so what's the difference now the difference is uh i mean as long as the file is there and everything works like a charm there is no difference but let's assume that we're going to do a typo so i'm going to call the head 2 and let's see what's going to happen now if i if i will use require then my php will stop execution so it's not going farther you know if i'm using include then i still see the warning that it cannot find the file but still the remaining part of the page got rendered and this is the difference right so if you want if this file is crucial for you you would probably use require right so you definitely don't want your run your page without having this css and so on um [Music] and you know if if you're including some crucial part of your page then you you should definitely use require otherwise you can just use include so let's assume that we will let me fix this one here let's say that you would like to use this one include this one then obviously you could use include because yeah if that doesn't work obviously it's not good but it's not stopping your page from working right it's not gonna look pretty neat but still your page will be working and you don't want to stop execution you don't want to stop uh execution here and you don't want to show user an error user will see some warning but still he will be he she will be available to see the remaining part of the page so you should use this require in this crucial parts of the page okay now let's let's continue so uh um yeah okay now let's um move to the bottom and now i'm gonna i'm gonna get this part so i'm gonna get this remaining text and the footer itself because i assume that we want to have footer on each and every sub page so i'm just gonna cut it and then again create new file over here and i'm gonna call it footer dot rnc php save it and then again i'm just gonna copy paste this one and paste it called footer and let's get back here yeah now our footer still works the same so what we can do now we can create a new file so i'm going to create a new file and i'm going to call it let's say services php which will describe our services now i'm going to show you why this back-end languages like php or sol are are so awesome and and so important web development now let's have a look at this one so we have this service php file over here uh which is kind of empty we just had this hat and footer included so now let's try to open this in a browser let me do it like this services php and we have our page here right okay it's it's doesn't look fancy yet but let's now let's continue and let's get our nav bar or actually before we do it uh we can already check this one because look now if i change something in the footer like made with love or let's say we're gonna say with smile i'm gonna save just this single file and my footer will change here at index as well as here at services so now i hope you can see you can understand why this is so important to create this kind of components which are reusable because otherwise we would have to change this in couple of files okay so what i'm gonna do now i'm gonna i'm gonna create a file for each section like this so let me just do one so this is our navigation i'm just gonna cut it i'm gonna create new component let's call it nav bar php paste it and then i'm gonna include it here now i can use include because uh if this doesn't work for some reason i still want my browser to show this let me do this at add this also to the services and let's check okay now we have this one here and we still have this one that one here so it's working like we expected okay so now i'm gonna quickly create new component for each section and i will continue with creation of our sub pages we're gonna add two maybe three more let's see okay so now um i removed almost entire content from our index page pl file i move all of them to the subfile so over here i decide to have you know one um file per each section but it doesn't necessarily have to be that small you could use like a bigger sections but i wanted to do it that way so now let's start with index and let's see that we want to for now it looks like this navbar is behind i mean footer is behind navbar so that's why we cannot see it but as soon as we'll add some content it will just pop up so let um let close not this one let's go to index and now let's say we want to add something which i called header which is this section right so we have it here and let's say that other than that we would like to also add the list of companies using our product and here it is we might want to add some styles and then again let's say we want to add some margin bottom let's say one ram should be sufficient or perhaps two rams will do and now then again i can i just can't stress more that since we have this hat component here if we want to add some new styles file or whatever or js file we just need to add this in this single this single place or you know even if you want to add some like google analytics tracing code or facebook pixel you can just do it in the single place and it will get applied to all your pages okay so our index is ready so let's see how it looks like it is like that so let's create now a few more pages so let's say i want to create we have services so let's add also gallery oops and let's add contact or about and we will add contact form in our about page so now look how easily we can create new page when we have everything in um in components so what i'm going to do i'm just going to copy paste this one from index i want to go to services i'm going to just paste it and now i want to change for example this part to services and this one to i'm gonna get rid of this one for a second let's check services so these are our services and for example here i want to add something called icons and here we have this one probably we should add some margin as well icons right yeah or if we don't want this one we can quickly decide to change it to for example companies and then we have our companies here so as you can see you can easily and very fast do it now let's take care of our gallery so we won't have this gallery and let's say that's sufficient so let's check this one gallery okay this is our gallery let's leave it as it is and finally let's take her about about page and we want to add here what we have what's left features section was in there um oh and we want to add contact obviously right so let's open this in the new tab oh it's not called contact i called it about right obviously you can call whatever you want so this is our contact section okay so now let's add some navigation over here so we could easily navigate between pages so let's open this nav bar [Music] okay now let's get rid of this one and that one for a second and here for the home we want to tiger target index.php here we want to have what we have services i guess right yes services and then we want to do services php for this one we want to have gallery php and let me duplicate this one and this will be about now let's see what happens we have this one here if we go home we go to index we click services we go to services if we go to gallery then we have gallery if we go to about we have this contact session and our page is more or less ready and if we want to add anytime something to our section like let's say companies we just do it like that and we have companies added here if we prefer we can do it above it's just like you know it's very very very very flexible and easy to change the page like this thank you very much for watching and if you enjoyed this video don't forget to leave a like and subscribe to our channel so that you don't miss more videos like that and i highly recommend you to check our channel videos as you're gonna find there more videos in other technologies like node.js like angular react view and so on and so on so thanks again and see you in the next video [Music]

Channel: Keep coding

Views: 26,455

Keywords: Bootstrap 5, php, Bootstrap, MDBootstrap, Material Design, web development, web design, UI Kit, Web Development, Web Design, tutorial, how-to, guide, explained

Id: u9Tg7BUJpGE

Length: 23min 0sec (1380 seconds)

Published: Wed Aug 05 2020