Create web pages with re-usability using PHP files

I think you have already seen the web sites and its source files. A web host contains a number of files that were used to build up the web site. When we create a web a page, we should consider how to create them in a proper way to be re used. Readability should be confirmed with the files. 

Normally when we create HTML files, we link CSS files using HTML tags. We include the all styles in the css file within the head tag. But the method I'm going to explain is bit different. It defines styles for separated segments. I'll explain.

This  is  the page I'm going to create.

This page consists of 3 main parts including navigation bar, container and footer. When you are creating this using normal way, styles for these 3 parts are included in the same css file. Web page is in HTML format since this is just a front end file. But the method now I'm describing uses files in PHP format. Instead of index.html file, we use index.php file. If you want to open this file, you can not open like a html file. You have to save whole project folder in the root folder in XAMPP or WAMP. Then only you can run these front end files using localhost.

First you need to create the folder structure like this. There are two folders named as css and includes in the project folder; PHP_Includes. Keep the  index.php file within the  project folder without moving to a sub folder. You will see even-though this is for a front end setup, there's no single HTML file in this folder. 

Let's move on to the coding part.

index.php file

You can see a php code first in the the head section. That is the code to link the  css file using php. Usually this was done before by link tag in a html file connecting a style.css file. But here, we see a file called css.php. We use include function in php to do this. Confused? This is the difference. Let me explain. When we open the css.php file,  its content will be like this.

Here we find we expected before. The usual linking tag is included in this css.php file. This file is in the css sub folder. Path has been given as it is. Using this method, style.css file is used to link the styles only for body part elements. So this stylesheet is not converted into a lengthy one as in usual way since separate css files  are doing the styling job for individual parts and not for whole page at once. Simply, styles for nav section and footer section are not coded in this style.css file.

Got the idea? Move on...

Now it comes to the body section. Again you see a php code to include a file called nav.php. What's it? I told  you  before to create these files according to the given structure. I think you have done it. Let's see the code in nav.php file. It is about the navigation bar of  your web page.

Here what I have done? Instead of coding the nav section in the index.php file, I have created nav section in a separate file and linked it to the index file. When you want to change nav bar, you don't need to change index file. Only need to change nav.php file. And you can use the code for nav bar for another project with some changes. You do not need to code whole navigation part from start to end. That's the main advantage of this method.

In this nav.php file, first I have included a file called nav.css. It's in the css sub folder and  it's  the file which contains the styles for navigation section. Then I have coded the structure of nav section. No need to code a full html file. Just code the part what you want and save  as a php file.

For the footer section, the process is same. Include the footer.php file where it should be placed according to the  page design and code  the styles in the footer.css file.

footer.php file 

Next we move on to the body content. I gave a class for it called container for styling purposes. You can type whatever you want in this part. Design it according to your choice. I have  only included a  h1 tag in body part. Style these parts in the style.css file. You can include javascript files also using this method. Place them just before the ending body tag (/body) of the  file.

To download the source files, visit My GitHub.

So, I think now you got the idea. Try to use this method because it's re-usable. Files are not lengthy and more readable. If you have questions about this method, let me know by posting a comment here.

Good Luck!