Inserting files

See more about:

Where are we?

You saw how the print statement puts data into the HTML. Let’s see how you can put entire files into the HTML.

This lesson’s goals

By the end of this lesson, you should:

  • Know how to use PHP to insert a file into the HTML output.
  • Know how to use a file path to insert the same file in pages that are spread out across a directory tree.

Inserting files

PHP has several statements that insert files: include, require, and require_once. We’ll just talk about one of them: require.

Suppose we create a file that contains HTML to show a footer for every page on a Web site. Here it is:

<div id="footer">
  Copyright © 2010  |  All rights reserved
</div>

Figure 1. Footer code.

This is not a complete HTML page, just a fragment of HTML. It wouldn’t work by itself. Let’s call the file footer.inc. The .inc reminds us that the file is meant to be included in another file.

Here’s the PHP page include-footer.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Including a footer</title>
  </head>
  <body>
    <h1>Hi there!</h1>
    <p>I am a page. Aren't I wonderful?</p>
    <?php 
    require 'footer.inc';
    ?>
  </body>
</html>

Figure 2. Including a footer

The require statement reads the file it’s given, and inserts it. Any PHP in the included file is executed. If the PHP interpreter can’t find the file, it shows an error message.

You can try it. Make sure you have a look at the HTML source. As far as the browser knows, the content of footer.inc was typed directly into include-footer.php.

Inserting files from other directories

The code in Figure 2 is in a file called include-footer.php. It has the line:

require 'footer.inc';

There is no directory given, just a file name. So where will the PHP interpreter look for footer.inc?

The answer: in the same directory as include-footer.php. So if include-footer.php is in /my/directory/of/doom/, then the PHP interpreter will look for /my/directory/of/doom/footer.inc.

When you’re using dynamic Web templates for real, this won’t work very well. Suppose you were creating a site with this structure:

Site structure

Figure 3. Site structure.

The file at /index.php is the home page of the site. The file at /articles/index.php shows a list of articles. There are other things like blog entries, products, and so on, but we don’t need to consider them here.

Suppose you put this line into both /index.php and /articles/index.php:

require 'footer.inc';

You would need one footer.inc for /index.php and another for /articles/index.php:

Duplicate footer files

Figure 4. Duplicate footer files.

But what’s the point of that? If we wanted to change the footer text across the entire site, we’d have to change all of the footer.inc files.

What we really want is for both /index.php and /articles/index.php to refer to the same footer.inc.

Just one footer file

Figure 5. Just one footer file.

footer.inc is in a directory called library. PHP developers often move shared files to a directory like this, and call it library, lib, includes, common, or something like that.

But we have to change the require statements to make this work. Here is the require statement from /index.php:

require 'library/footer.inc';

Here is the one for /articles/index.php:

require '../library/footer.inc';

The .. means “go up a level.”

To brush up on how to use paths to navigate between directories, see the discussion of absolute, relative, and root relative links.

An example

Let’s see how this would work in an entire Web site.

Let’s create a simple site called The Dog Site. It has a home page and two sections: dog profiles, and articles.

Overview

Figure 6. Site overview.

Each of the two sections of the site – dog profiles and articles – has a main page. Each one is linked from the home page.

Here is the home page:

Home page

Figure 7. Home page.

Here is the main page for the dog profile section:

Dog profile main page

Figure 8. Dog profile main page.

Here is the main page for the articles section:

Articles main page

Figure 9. Articles main page.

You can try the site.

Let’s create the directory tree for the site, that is, the directories on the server that all the files will go into. We’ll make a directory for each section of the site: dog profiles and articles.

The header is the same on every page, so let’s pull that out and put it in its own file. Here’s the code:

<!-- Header file, to be included into every page. -->
<h1>The Dog Site</h1>
<h2>Bringing you happiness since last week</h2>
<hr>

Figure 10. HTML for the header.

Let’s put the code into the file header.inc, and put the file into a library directory.

Here is the directory tree so far.

Initial tree

Figure 11. Initial tree.

The home page is index.php. Recall that if a browser sends a URL to a Web server, and the URL does not have a file name, then the browser uses a default name. In ClientCore, we used index.html as the default. index.php can be the default as well.

So if a browser asks for:

http://dogthing.com/play/

the server will run:

http://dogthing.com/play/index.php

Let’s see what the tree looks like when all the files are added:

Complete tree

Figure 12. Complete tree.

All of the PHP files are going to have a require statement, to insert header.inc. But since the PHP files are in different directories, they will use different paths to navigate to header.inc. Here are the paths for some of the files.

File Path in require
/index.php library/header.inc
/articles/index.php ../library/header.inc

Figure 13. Paths in some of the files.

Exercise: The rest of the paths

Complete figure 13. Give the path in the require statement for every PHP file.

You can check your solution by downloading a zip file of the site. Expand the zip file to see the PHP code.

(Log in to enter your solution to this exercise.)

Exercise: Inserting files

Download and expand this zip file. It will create a directory tree like this:

Directory tree

Figure 1. Directory tree

Open up wombat.php. Add require statements to create a page that looks like this:

Output

Figure 2. Output

Use only relative file paths.

Upload the entire tree to your server. Put the URL below.

You can see my solution, but try it yourself first.

(Log in to enter your solution to this exercise.)

Summary

In this lesson, you learned:

  • How to use PHP to insert a file into the HTML output, using the require statement.
  • How to use a file path to insert the same file in pages that are spread out across a directory tree.

What now?

But there’s a problem. It’s easy to break links to images and other resources. Let’s fix that in the next lesson.


How to...

Lessons

User login

Log in problems? Try here


Dogs