Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Many PHP developers like to use a feature of PHP named Server Side Includes. This architecture lets you take reusable code that you're using in many PHP pages, and place them in files that are then included at runtime on the server in other pages. For this demonstration, I'll use a set of files in the folder 02_gettingstarted > 07_includes. I'll point my site at that root folder. I'll start with this file, index.php.
Let's take a look at this page in an external browser. I'll copy the file over to the server directory, and show you that the index.php has a navigational toolbar on the left, a logo up at the top, and these two bits of content together make up the page header. This header is used in multiple pages in the web site. Similarly, at the bottom of the page, there is a footer that contains a number of hyperlinks and information. Once again, this content is repeated on multiple pages.
I'm going to show you how to take this reusable content, put it into include files, and then how to include them in multiple pages at runtime. First, I'll create the Include file. I'll go to my site header in the Files panel, right-click on it, and choose New Folder. I'll name the folder _includes. You don't need to include the underscore prefix on your folder names, but it's a common convention. After renaming the file, you might see it fly away, that is, disappear from the visible part of the screen.
If that happens, just scroll up, and find it again. Right-click on the new _includes folder, and choose New File, and name the new file header.php. Then double-click on the new file to open it. This will be included at runtime into an existing PHP page, which already has the main HTML page structure, so you don't need this basic HTML page structure in the included page. So I'll select and delete all of the existing code.
Then I'll go back to the homepage, index.php. I'll look at the page in Design View. I'm first going to take the content that includes the logo up in the upper-left. I'll click on the logo. Then I'll go to my tag selector, below the design area, and click on the div tag with an id of header. Then I'll go to Code View, and see what I've selected. Notice that that takes the div tag only with the id of header. What I really want is its wrapping tag, main header.
So I'll hold down the Ctrl key on Windows, or the Command key on Mac, and press the Open Bracket key right next to the letter P. That expands the selection outward to include another parent tag. I'll cut that content to the clipboard, and go to header.php, and then paste it. Then I'll press Enter, because I'm going to be taking one more div tag that I want to place below it. I'll go back to index.php. I'll select the div with an id of mainNav. You can do this in Code View by placing the cursor, and then pressing Ctrl or Command, plus the Bracket key again, or you can go to Design View, and use the tag selector.
Either way, you want to make sure that you've selected the entire div tag that contains all of the hyperlinks for the side navigation bar. Then once again, cut to the clipboard, go to the header, and paste. Then save your changes by pressing Ctrl+S on Windows, or Command+S on Mac. Then go back to index.php. Make sure you've left the cursor in the same location from where you cut that content. Then you'll add the PHP Include command. I'll go to the Insert panel, and select the PHP category, and I'll choose Include.
You can actually choose either Include or Require in this position. These two commands do pretty much the same thing. They include a single page. But the difference is that if the Include page encounters an error, it will output an error message but keep processing the page; whereas the Require command, if it encounters an error, it will terminate execution. I'll choose the Include command. This results in adding a PHP code block and the Include function. You pass into the Include function the name and location of the file you want to include.
You wrap this in quotes. So I'll type in a quote character, and then the name of the folder _includes/header.php. Then I'll close the string with a closing quote. Dreamweaver sees then that there are no syntax errors, and the error above the editing area goes away. I'll test my page in the external browser. I'll save the change, and preview in Firefox. This results in copying all of the files over to the server, including the new Include file.
Then when the page is requested from the browser, the PHP server opens index.php, sees the Include command, and puts the pages back together at runtime. The result is that the page looks exactly the same as it did before. Now let's create a footer file. I'll locate my _includes folder in the Files panel, and create a new file. I'll name the new file footer. php, and double-click to open it. I'll delete all of the code, and then return to index.php.
This time, I'll do my selections in Design View. I'll go to Design View, and scroll down to the bottom. I'll click anywhere in the footer area. Then in the tag selector, I'll choose div #footer. Then I'll go to Code View, and see what I've selected. I've correctly selected the entire footer. I'll cut it to the clipboard, go to footer.php, and paste, and save my changes. Then I'll go back to index.php. I'll go back to the Insert panel to the PHP category.
Once again, add an Include command. This time, I'll include the new footer.php file, using the string _includes/footer.php. This time, I'm going to test only inside Dreamweaver. I'll take a look at the page in Live View. This copies the files over to the testing server. I'll look at the page in Design View. I'll scroll down to the bottom, and see that my footer is still intact. Now I'll go to Code View, and show you that in Code View, I'm seeing the original PHP command.
But then, I'll switch to Live Code. That results in replacing the PHP Include command with the content that's being processed at the server and sent back to the browser. So that's a look at how to create includes. Once you've done this much, the next step will be to go through all of the other HTML pages and rename them with PHP extensions. For example, I'll exit Live Code and Live View, and then go to the Files panel, right- click on mission.htm and rename it.
I'll rename it with a .php extension. Dreamweaver will detect all of the references to that page throughout the web site, and let's you update them. I'll do the same thing with resources.htm and tours.htm. Then I'll go through those pages, and replace the literal headers and footers with the references to the included files. Once you've finished this process, your web site will be much more maintainable in the long term. If you need to make a change to the navigational toolbar or the footer, you make a change to those PHP files, and copy them to your server.
You don't need to do anything to the files that are including them at runtime.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 74205 Viewers
80 Video lessons · 129570 Viewers
52 Video lessons · 63852 Viewers
59 Video lessons · 49637 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.