Including the Header5:32 with Alena Holligan
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".
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