Create A 5 Page Website With PHP Includes, HTML5, CSS3 & Bootstrap 4

In this video , we'll learn how to turn a single page html and CS S website into a five page website using PHP includes .

Ok , guys .

So let's go ahead and take a look at the single page layout that we're going to turn into a five page website with PHP includes .

So I've had a lot of questions on how to create a multi page website following the single page website tutorials that I have here on youtube .

And I'm gonna show you the best solution I think um that's better than creating new html pages to add to your website .

So let's check out the layout that we're gonna be working with here .

So in the upper left hand corner , we have the logo followed by the navigation off to the right hand side .

And then underneath that , we have the image slider and then this section with a title paragraph section and then a button which will link to my uh bootstrap U toy course .

And then moving on down the page beneath that we have the Jumbotron section with the three column layout with headings and paragraph text followed by a two column section further down the page with the text and button on the left and the image on the right and then moving on down to the bottom of the page , we have a footer section with a dark background and a three column layout with the headings , text and then the button off to the right where it says send us an email .

So let's scroll back up and take a look at how it's going to appear on tablets and mobile phones .

So as you can see at 768 pixels , it's gonna transform into the mobile version with the dropdown navigation .

And then that's the break point where the three column sections are going to turn into a single column layout .

But before that , the two column section is going to turn into a single column layout at 992 pixels .

Ok ?

So let scroll back up to the top of the website and see what we need to get started with the tutorial .

So in the description of this video will be the tutorial starter files which will include the completed single page layout because all we're gonna do in this video is transform it into the five page PHP version using PHP includes .

So if you want to learn more about designing bootstrap websites , you can check out my course in the video description or check out um my tutorials that came out prior to this video because a few of them were covering the design from the toy course .

Ok .

So once you've downloaded the bootstrap starter files in the video description , let's take a quick look at index dot html and style dot CS s .

So I'm gonna open them up in the free text editor called sublime text , which I have in the background uh right behind Google Chrome .

So as you can see right here , uh index dot html and style dot CS S are completed for us with the layout of the website that we just saw in Google Chrome .

This way you can take a look at the website layout in your browser such as Google Chrome before we turn the files into PHP , which you won't be able to open in Google Chrome without the use of a local server , which is what we're gonna go ahead and cover next .

So for any of you watching that have taken my bootstrap Omy courses , uh We know that they cover three different local servers .

In this video , we're gonna cover um the one that's my favorite , which is called local by Flywheel .

So what I'm gonna do is just show you the five page version of the website that we're gonna set up here um after it's completed .

So we're gonna go back and set this up .

But I just want to show you the difference between the HTML version here where we have the index dot html extension .

And then right here for the five page version on the local server , we have index dot PHP .

So what we're gonna need to do is change our html file into a PHP file .

And then we're going to be able to link through all the different pages using PHP includes and only having to reference our navigation once inside of our files .

Now , let's go ahead and just change that index dot html file into index dot PHP .

So I'll just delete html , change it to PHP and then say that I want to use dot PHP as the file extension .

And now if we go ahead and open this up , we're not gonna need to change anything to the um to the top of the file to declare it as a PHP file .

But if we go ahead and try to open it in uh Google Chrome , for example , let me just show you by changing the extension here .

All we're going to see is the raw html here rather than the actual web page displaying for us .

So let's go ahead and move over to our local server with local by Flywheel , ok ?

So if you go ahead and do a Google search for local by Flywheel , you can go to the website and , and uh quickly download it for free .

Ok ?

So if you go to their website , you'll see the big free download link and then you can select Mac or Windows depending on uh what type of computer you're on .

And then all you need to enter is your first name and your email , I believe .

And then for the number of websites , you can just say that you don't know or that you don't use wordpress yet .

So local by Five Wheel is built for wordpress website development , but you can use it for any type of PHP website .

I'll just show you how to uh get rid of the wordpress files once we start the site .

So let's go ahead and select the plus button in the lower left hand corner and then we can just add any name for our website here .

So I'll just say new five page website and then I'll hit continue and then we can just leave this as a preferred environment .

And then for the word press user name and password , you can just enter whatever you want because we're not gonna need this later on and then we'll select add site .

Ok ?

So once we've done that , we don't want to go to admin or view site yet because that's gonna bring us to a Wordpress page .

So , what we're gonna do is a search for local sites on our computer and once you go ahead and select that , it's gonna show you the local sites that show up in the left hand uh bar here on local by fly wheel .

So I have it right here in my favorite .

So I'm just gonna select new five page website and then we'll go into app and then public and this is where you're gonna find all of the Wordpress installation files .

So we'll just select all of these files and folders and then move them to trash to get rid of all of the Wordpress files with this local site .

So once we've done that , we can go ahead and just drag and drop all of the starter files with the uh index file , change to index dot PHP into local by fly wheel or you can copy and paste them in .

All right .

And then once we have the site added to flywheel , let's go ahead and open it up in Google Chrome .

So now we can go ahead and select the view site button .

Ok ?

So now that our site is open , we can minimize uh local Buy fly wheel .

And then I'm also gonna X out of um style dot CS s because we're not gonna make any changes to that for the rest of the tutorial .

So just make sure that the index dot PHP file that you have open is from local Buy flywheel and not from um your uh desktop or wherever you have the files located outside of local by a flywheel .

So the next thing that we're gonna do is we're gonna open up all these files inside of the includes folder from the starter file .

So I'll just select them and open them all up with um sublime text .

And then I'm just gonna move the index dot PHP file in here with the , with the include files and then let's go ahead and move the a public folder to the side .

So what we're gonna do is we're going to divvy up the html from the index dot PHP file into these include files .

So all we need to do is reference a simple include statement inside of our web pages in order to include all of this html .

So we don't have to write the html out for for every web page .

So the first part of the website that we're gonna add to and include is all of this information inside of the head tag .

So we could include the head tag and the uh doc type html for example .

But I just want to include the information inside of the head tag that way later .

If you want to change the title of a particular page or add a description for a page , you can add that um inside of the page's PHP file rather than including it inside of the uh include file .

So as you can see once we do away with the information inside of the head section , all of our style is gone because of the bootstrap styling and style dot CS s .

So let's go ahead and just paste it inside of head dot PHP and then we can add the include statement here .

So we're just going to say PHP include and then in a single quote , we'll reference that include file .

So we'll go into the includes folder and then it's gonna be head dot PHP .

So we'll say includes forward slash to go into the folder and then head dot PHP .

And then we'll just add a semicolon and close out the PHP statement .

Ok .

So now if we go back and refresh the page there , we have all of our style back .

Um because the uh links to the style sheets are referenced in that head section that we've just added to the website using our include statement .

So the next section of the website that will show up on every page that we want to add to and include file will be the navigation .

So let's go ahead and copy all of this navigation html and then we'll move over to the NAV BAR dot PHP file and then we can just paste it in .

So we're gonna be coming back to the navigation later so we can make it .

So um the navigation uh link appears highlighted for each page that we're on .

But let's go ahead and add our include statement here .

And all we need to change is the file extension to NAV bar dot PHP .

And then if we go and refresh there , we have our NAV BAR back using the include statement .

So the next thing that we'll add will be the footer of the website because that's gonna appear the same on every page So let's go ahead and select the navigation for the uh three column footer layout .

So if we scroll to the bottom of the page , we can select from end footer to start footer and I'll just copy that and delete it .

And then we can add our PHP statement here for the include with includes forward slash footer dot PHP .

And then let's go ahead and add the HTML to the um footer dot PHP file here .

So I'll just paste that in and then save it .

And there we have our footer content at the bottom .

And then the last section that we're gonna add will be the script file references at the bottom of the page here .

So I'll go ahead and copy that and then we can just add the include statement here .

So includes forward slash scripts dot PHP .

And then let's go ahead and just to see that it's gone , the two things that won't function without the scripts will be the dropdown navigation and the image slider .

So now if we go ahead and paste it in and save it and refresh , now we'll have the image slider functioning and our uh dropdown menu back .

Ok .

So the next thing that we're gonna do before we go ahead and um make it .

So our navigation displays a highlighted link for every page we're on .

Let's go ahead and just populate the rest of the PHP files .

So we have content appearing on every page .

So we're not gonna add um more HDML content to the pages right now to fill out our content .

We're just going to copy it and paste it from the original html file .

So if you want to learn how to lay out more web pages , you can check out my previous tutorials or my course as I've mentioned in the description of the video .

So I'm gonna go ahead and just open up the rest of the PHP files here .

So we have uh the pricing portfolio team and contact us .

So if we go and take a look at the portfolio page for the completed version , we have a heading at the top and then we just have some repeated content from the home page .

So let's go ahead and just add um we'll just add one quick uh html section once we add our includes at the top of the page .

So I'll just copy the NAV bar , the head and the um doc type information to put at the top of the page .

And then we'll select the info at the bottom for the footer and the scripts as well as the closing body and html tags and then paste that in .

And with that , we should just be able to see our navigation and then the footer content at the very bottom , which will display at the top because we don't have any content in between them .

Ok ?

So let's go and add just a simple uh html heading .

So we can distinguish the different pages with the portfolio text that we see there .

And then we can just paste that in to um the other pages for pricing team and contact us .

So we'll just say div class row and then we'll say margin top uh five which will be three rem or um 48 pixels .

And then within that , let's go ahead and add a call dash 12 with bootstrap which will take up the full width and then we'll say Tech center and this will add some additional padding for us with the call 12 .

And then we'll say margin top five again to add an additional three rem uh three REMS of padding .

And then we'll just say heading three portfolio .

OK ?

So that's gonna add enough padding for us to um add some separation to the top with the space the NAV BAR takes up and some additional white space .

All right .

So now that we have that , let's go ahead and just grab some html content from index dot PHP .

So I'll just copy the two column and three column sections here and go ahead and paste it in .

And I'm actually gonna paste that underneath the NAV BAR .

So the NAV BAR since it's fixed at the top , um we don't have to have that at the very top , but I'm just gonna keep everything in order and add the heading underneath that .

And if we go ahead and refresh there .

We have the Jumbotron section with the colored background and then the two column section underneath it .

So let's move over to the pricing page uh following the portfolio dot PHP page .

And I'm just gonna go ahead and copy everything that we have here and paste it in .

And then just to add some variety , let's put the two column section on top of the three column section and then we can change the portfolio text for the heading three to pricing .

And then for the team section , I'll just paste it as this in again and change this to team .

And then for the contact us page , we'll just paste in the um portfolio page just to add some more variety with the heading or the um two column and three column sections on on the top and bottom per page .

OK ?

So everything looks good here .

So let's take a look at the um at the layout here .

So as we can see when we go through the different pages , the navigation links aren't gonna stay highlighted .

They're only gonna be highlighted on the home page because as we'll find in just a moment , we have an active class in our navigation only um added to the home link .

So let's go ahead and make it .

So all of our different navigation links will stay highlighted no matter what page we're on .

Um using the NAV bar dot PHP file for our uh NAV bar includes statement .

Ok .

So here we have the home link as we can see .

And what we're gonna do is we're gonna get rid of this active class that's there only for the home link .

And once we do that , none of the navigation links are gonna stay highlighted no matter what page we're on .

So what we'll do is we're gonna need to make it .

So , um using PHP , we know what page we're on .

And then once we know what page we're on , we can add the active class in order to do that , we're gonna create an if statement .

So we're gonna say if and then in parentheses , page equals and then in quotes home then echo the active class .

So we're just gonna say in single quotes , active and then we can go ahead and add the semicolon and then close out our PHP statement .

OK ?

So now if we go back to the home page in uh our local site , we'll see that the home link isn't um staying lit for us yet .

And the reason for that is because we don't know or the website doesn't know what page home is .

So what we're gonna do is in our um includes statement for our NAV BAR is we're just gonna say page equals home and then we'll just add a semicolon to separate it from the include .

OK ?

And then now if we go back to the home page there , we have our active class added to the home page .

All right .

So that's all we'll need to do to add the active class to the different pages .

So let's go ahead and just say what page you're on in our includes here for the NAV BAR for all of the different pages of the websites .

So we'll just say portfolio for the portfolio page and then for the pricing page and then the team page and lastly the Contact Us page and I'm gonna include a dash here for uh contact us .

OK ?

So now what we'll need to do is if we go to the pages , they're not gonna stay um lit up because we don't have the active class added .

So let's go ahead and just copy the PHP statement to add the active class .

And then all we'll need to do is change the um relative page names , the names that we just gave them .

So we'll add portfolio and then pricing and team and then our last link contact us , just make sure you include the dash which was included in the um contact us dot PHP file .

OK ?

So now we have all of our links highlighting except for contact us , it looks like I misspelled it .

So we'll just change that to contact us and then go back and refresh it and there we have all of our links .

Ok ?

So that does it on how to make a single page html website into a five page website using PHP includes .

Thank you for watching .

Let me know if you have any questions and please remember to like this video and subscribe .