Bootstrap 5 + PHP Tutorial | Make your website dynamic

Watch other courses

In this tutorial we're going to show you how to create a landing web page, and enhance it with PHP splitting it into multiple pages & generate them using PHP Enhancing your website with backend solutions you making them fast & more user friendly. After this tutorial it would be much easier for you to add PHP code to your website & any other page. We're going to build this website using Bootstrap 5, PHP and a pinch of CSS. The page will be fully responsive, so regardless of whether you are on while browsing this - mobile device or tablet, in any orientation it stays displaying correctly.

This is the second part of the tutorial, but don't worry you don't need to watch the first one however if you would like to i strongly encourage you watch it here.

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