You can use the server-side programming language PHP to re-use identical blocks of code and content across multiple web pages. This is a simple form of “content management.” The instructions here will take you through the process.
Adding PHP to your site can be confusing. Make sure your project is working in standard HTML format before you tackle this.
The steps below are:
- Determine which HTML code to re-use
- Rename all your “.html” files to “.php”
- Copy a block of HTML code to a new file to be re-used, and replace it with PHP code
Determine Which HTML Code to Re-Use
When you re-use a block of HTML code across multiple files, the code will appear exactly the same in every web page. So, you can’t re-use HTML that needs to appear differently across multiple files, like page titles or <body> tags that have specific classes attached to them.
It is usually safe to re-use HTML code like these:
- Menu bar code (<ul> and more) as long as the menus use root-relative links (as described in class).
- Common footer text, like copyright notices.
- The four <link> and <script> tags that load Bootstrap CSS and JavaScript code.
If you decide to re-use one or more of these blocks, you copy it into its own file (see below) and then replace that HTML with PHP code which tells your web server to use that file. Then, later, if you need to update that HTML code, you just update one file and all the web pages will update automatically.
(If you have experience with drawing programs like Adobe Illustrator, think of this as if you are making a symbol.)
Rename All Your “.html” Files to “.php”
Your web server needs to know that you are going to use PHP in your web pages. To do this, the suffix “html” on your HTML files needs to be changed as follows:
- Files that end in the suffix “html” (such as “index.html”) need to be renamed to “php” (such as “index.php”).
- Make sure you include the period, just like with the original HTML file name.
- Keep it lowercase.
- Don’t worry: the server will automatically look for “index.php” when it cannot find “index.html”.
- If you have already defined your HTML navigation with links that point to “.html” files, you will need to edit those links to point to the new “.php” file names.
Do not rename your CSS files or image files. Those should keep their original file suffixes: “.css”, “.jpg”, etc.
Copy the HTML Block to a New File: An Example
Suppose you have decided to re-use a block of HTML that shows a copyright notice at the bottom of every page. If you’re using Bootstrap 4, it might look like this:
<div class="row" id="pageFooter">
<div class="col-sm-12">
<p>
Copyright 2020 My Name Here.
</p>
</div>
</div><!-- /row pageFooter -->If you are using this identical block on every page, then you can re-use this. Follow these steps in CodeAnywhere:
- Open the first HTML file that uses this footer code. For this example, we will assume the web page’s file name is “index.php”.
- Select and copy the HTML code you want to re-use.
- In the same folder as the file, create a new file by right-clicking (or option-clicking) on the parent folder name. Call the new file “block-footer.php“.
- Into the new file, paste the HTML code that you copied above, and save the file.
- Now, in the web page file (e.g. “index.php“), delete the HTML code you just copied and pasted into the “block-footer.php” code.
- In its place, put this code:
<!-- including block-footer.php -->
<? include("block-footer.php"); ?>- You must include the entire text. If you made your file name something other than “block-footer.php” then change it here, too.
- The comment is just so you and your instructor can easily debug the HTML file.
- Save your web page (e.g. “index.php”) and preview it. It should look the same as it did before, except that you know the server is building the HTML code by using PHP to include the extra files.
If you have a folder — such as “about” — with HTML files in it, they can still use the block-footer.php file from the parent folder. You would just insert a “../” in the file name that tells PHP to go up one folder, like this:
<!-- including block-footer.php -->
<? include("../block-footer.php"); ?>With this, PHP runs on the server to include (e.g. insert) that extra file into the HTML file. Your browser won’t know the difference.