Including the Header

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