Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
You often need the same HTML on multiple web pages: such as headers, footers and navigation. With PHP, we can put all that common code in one place. This will make our site easier to maintain by giving us one place to update shared elements, like copyright date, instead of needing to update each page individually. In this video we'll look at how to utilize common code files with PHP’s include command.
Update to html
index.php unordered list for our random items should have a class of "items".
<ul class="items">
Let's create a new file for
the suggest page.
0:00
Because this is one of our main pages,
just like index.php,
0:03
we want to keep this file in
the same location as index.php,
0:07
directly in the root of our website.
0:11
There's quite a bit of HTML that
will be the same across all
0:17
the pages of our library.
0:20
You can see an example here in index.php.
0:21
This footer here,
with the social media links, and
0:24
the copyright date,
as well as our header at the top.
0:28
With our logo and navigation.
0:32
These will all be the same across
every page in our library.
0:36
Your first inclination might be to
copy that code from index.php, and
0:40
paste it into suggest.php.
0:45
If you like making extra work,
then this is a good way to go.
0:47
But generally speaking,
you don't wanna duplicate your code.
0:51
For example, if you just copied the HTML
for the navigation and pasted it into
0:54
the suggest file, you'd have to update two
files any time your navigation changed.
0:59
Say, adding a new page.
1:05
Two files might not seem so
1:07
bad, but now imagine that you
duplicated that on hundreds of pages.
1:08
Even with two pages, it would be all to
easy to overlook one of those places and
1:13
then parts of our site, that should
look the same, end up looking different.
1:18
If we were using static HTML files, we'd
have a difficult time staying on top of
1:22
HTML changes that affect all these pages.
1:27
But since we're using PHP, we can put
all that common code into one place.
1:30
With our media library we can put the logo
and the menu into their own file.
1:35
Then we can include them
on the top of every page.
1:40
We'll create a new PHP file
to contain the header.
1:44
Files like this are called include
files because they get included
1:48
in other PHP files.
1:52
Its often a good idea to put files
like this in their own folder.
1:53
I usually name the folder Includes or
Inc for short.
1:58
By keeping our page files in
the root of our site, and our
2:02
include files in a separate directory, we
can tell at a glance which files do what.
2:05
Let's create an Includes folders
2:11
After we create the folder, let's create
a file in that folder named header.php.
2:19
This file will hold all the HTML
that currently appears in the top of
2:26
the index.php file in which we want
to use across all the web pages.
2:30
Let's start at the opening html tag, and
2:35
go all the way down to our
div tag with id of content.
2:38
This includes the logo and the navigation.
2:44
The list of media suggestions
is specific to the home page and
2:46
we'll leave that here.
2:50
We'll cut this code from index.php and
paste it into our header file.
2:52
One of the items in this file
is a link to the suggest page,
2:58
which we just created a moment ago.
3:01
Let's change the hash
sign to say suggest.php.
3:04
You'll notice that we added an opening div
tag to this file with no closing div tag.
3:09
To keep track of the closing div, let's
add a comment back in the index.php file.
3:14
Next to this closing div,
we'll add an HTML comment and content.
3:21
With the header moved to an include file,
3:28
we'll need to write some PHP code to
bring that header into the other pages.
3:32
The PHP command for this is include.
3:37
Let's go to the top of our file and
add an opening PGP tag,
3:39
followed by a space, the word include and
then within parenthesis,
3:44
you then reference the file
within the include folder.
3:50
("inc/header.php")
3:53
close with a semi colon space and
close our PHP tag.
4:03
Let's save this file.
4:06
We want the same header
on the suggest page.
4:10
So let's copy the PHP command and
paste it in the suggest.php.
4:12
This page will have slightly
different HTML below the header,
4:20
a div with two classes, section and page.
4:25
And an h1 tag with the heading
Suggest a Media Item.
4:32
We'll save this page, and
we'll make sure our header is saved,
4:41
then we'll switch back over the browser.
4:45
When we refresh the home page,
the page should look the same.
4:50
But now we're using two PHP
files to generate the HTML for
4:54
this instead of just one.
4:57
The final HTML sent to
the browser is the same,
4:59
you can now click the link here
to navigate to the suggest page.
5:01
When the suggest page loads,
you'll see the same menu as the home page
5:06
included from header.php with
the headline found in suggest.php below.
5:10
We're making some really good progress
here with two different PHP files
5:17
including one common header file for
some shared code.
5:21
In the next video, we'll extend this
approach to add the other pages we need
5:24
and another include file for
the footer information.
5:29
You need to sign up for Treehouse in order to download course files.
Sign up