Converting a HTML site to PHP
In this tutorial we will be showing you how to convert a HTML site into a PHP site. PHP sites can’t be useful if you have several pages of a website and you need to make changes to the header, footer, or sidebar sections of a website. Instead of editing each page you would simply be able to edit one file to update every page of the whole site. Basically you could turn any part of a website, once coded into php, into one of these editable sections and include it into any page where you would like to display the same content.
If you would like to have all the files in your site to have a .php extension you could go ahead and simply change the .html extension of all files to .php. All of the files should still function but please leave the files with other extensions, such as .css, the same.
The line of code we will be using is the php include command, it is very simple to use and once you grasp the concept of how to use it it will become very easy to use and put you on the road to understanding how layouts for scripts like wordpress, ecommerce stores, and others work. Below is a sample code I would use to include a header.php file into my index.php or index.html file.
<?php include(“header.php”); ?>
Basically the ‘<?php’ and ‘?>’ tags are defining anything between these tags as php. You can not write php code outside of these tags, it will not work. The ‘include(“‘ and ‘”)’ are telling the file to include the file inside the quotations into the file where this code is displayed. The ‘;’ ends the line of code. And the header.php is the file I would like to include into my index file. Now any html code that I have in my header.php file will be shown in my index file when I view it. This will only work on a server or if your computer is setup to support php, php commands will not function on most normal computers, upload the files to your web host in order to see if the code works. Now to experiment with this lets create a index.html file and include the code shown above and also create a header.php file and input the following code into your header.php file:
<center>Hello, if you can see this then your php include is working</center>
Now upload this to a test folder on your server and navigate to the index.html file. If the php is working you should see “Hello, if you can see this then your php include is working” centered at the top of your screen. If you don’t see anything double check that the code is correct and make sure you have uploaded both files to the server and that they are in the same directory. If you still don’t see anything you may need to contact your web host and make sure they support php. If you receive a 404 error you may have your file permissions set incorrectly, your .php files should be set to 755 and your html file set to 644.
Now if this works you should be ready to convert your site into php. To begin you will need to look at your code. My example will use tables which is a fairly common practice but some will use divs however you should still be able to follow this example. Most websites will follow a structure like this:
<html>
<head>
</head>
<body>
<table>
<tr>
<td>This is my header section</td>
</tr>
<tr>
<td>This is where all my content is like large paragraphs, images, links, and anything about this website</td>
</tr>
<tr>
<td>This would be my footer section</td>
</tr>
</table>
</body>
</html>
I saved my file as index.html. You can use your own website files for this example but please remember to make a backup in case you mess something up. Now to create my header.php file I want to cut all the code which would define the header area of my site, this is usually where your site title, navigation, and logo is. In my example I will cut my header area, which is the following code, and paste it into the header.php file.
<head>
</head>
<body>
<table>
<tr>
<td>This is my header section</td>
</tr>
Now in my index file I will replace the code I just cut out with the php include code. My index.html file will now look like this:
<?php include(“header.php”); ?>
<tr>
<td>This is where all my content is like large paragraphs, images, links, and anything about this website</td>
</tr>
<tr>
<td>This would be my footer section</td>
</tr>
</table>
</body>
</html>
If I were to look at my index.html file at this point it would still look the same as before because all the code in header.php is included in the index.html file. Now to create my footer.php file i simply cut the following code and paste it into a new footer.php file.
<tr>
<td>This would be my footer section</td>
</tr>
</table>
</body>
</html>
Now in my index.html file I will add the php include to include my footer.php file. My index.html file will now look like this:
<?php include(“header.php”); ?>
<tr>
<td>This is where all my content is like large paragraphs, images, links, and anything about this website</td>
</tr>
<?php include(“footer.php”); ?>
That’s it, now I have converted my header section and footer section into php files. Now all I have to do is follow the same procedure for all the other files of my website. This will keep the header and footer consistent throughout the site. If you need to edit the top section of the site you simply edit the header.php and it will update all page. Same for the footer, if you need to edit it then you simply edit footer.php and it will update on all pages. If you need to edit the content for a page you simply open up the corresponding file and edit the middle section between the header and footer php includes.
It is important that your table structure is the same for all pages in order for this to work. You can add different table structures into the body of each page but remember that the header and footer files need to match up with the table structure of each body of the pages. If you are seeing weird alignment issues please make sure you check for too many or possibly missing ‘<td>,<tr> and <table>’ tags.
If you have any questions feel free to comment or contact us via the contact form.
I hope the information was helpful!