Bootstrap 5 + PHP Tutorial | Make your website dynamic

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