Locked lesson.
About this lesson
Let's build out a template for our Header and links.
Exercise files
Download this lesson’s related exercise files.
Templating Links and Headers.docx59.3 KB Templating Links and Headers - Solution.docx
59.3 KB
Quick reference
Templating Links and Headers
Let's template out our app!
When to use
Whenever you have things that are the same on all your pages, consider templating them out.
Instructions
For our app, let's template out the top header section (with links) and the bottom footer section (with copyright notice).
Hints & tips
- Things that are the same across all pages of an app should be templated out
- 00:04 Okay, so let's start doing some templating.
- 00:07 So the first thing that I notice when I look at all of these pages is that
- 00:11 this whole top thing here up until this first h1 tag
- 00:15 is pretty much the same on every single page.
- 00:18 So, we can just highlight this and copy this and
- 00:22 let's create a file called, header.php.
- 00:30 And if we open that, and just paste in all of this stuff, and
- 00:35 save it, we can come back to our index page, and delete all of that.
- 00:43 Okay, so now the question is, how do we add this back in?
- 00:46 And we've already learned how to use include and require.
- 00:49 And, it's kind of a personal preference but
- 00:51 if you'll remember back to those videos, there's one really
- 00:54 big difference between include and require and that's error messages.
- 00:59 If we don't do this correctly, but if we use include, or the file changes, or
- 01:03 there's a problem, include will give us an error message.
- 01:05 Require will shutdown completely.
- 01:07 And well, this is the top of our web page and if that happens,
- 01:11 nothing else will get rendered.
- 01:13 So, I would tend to wanna use include for this specific part.
- 01:17 So let's go ahead and create a php tag, and just include,
- 01:28 header.php.
- 01:32 Save this, come back and hit reload, nothing seems to have changed.
- 01:36 So, let's go ahead and add this to all the pages on our app.
- 01:41 And those kinda lame to have to come back and do this after we've already done this.
- 01:44 And in a real world, you would do this while you were creating these pages
- 01:49 the first time around, save that multiplication, Save that.
- 01:58 Finally, division, Save that.
- 02:06 So now if we come back here and hit reload and go through, all of these seem to work.
- 02:10 Okay, so what?
- 02:11 Well, let's say we wanna create a new link.
- 02:13 Now instead of opening each of these up and adding that new link,
- 02:16 we could just open our header.php file.
- 02:19 And, maybe we don't wanna add a link,
- 02:21 maybe we wanna change this from addition to adding, right?
- 02:25 So if we save this, come back here and hit reload, now it says adding.
- 02:29 If we click on Subtraction, it says adding.
- 02:31 If we click on multiplication, it says adding.
- 02:34 And if we click on division, it says adding.
- 02:36 So, I think you see just from that quick example how important it is to template
- 02:40 out your stuff.
- 02:41 Just that thing alone can save you days of work.
- 02:45 I mean, imagine if you had a website with 10,000 web pages,
- 02:47 which is not outside the realm of possibility these days,
- 02:51 to change them all by hand which just drive you crazy.
- 02:53 It would take days, weeks.
- 02:55 It would take many, many people to do it or
- 02:57 it would take ten seconds if you properly template it out to your website.
- 03:00 Okay, so that's one quick example of templating.
- 03:03 In the next video, we're gonna do something a little bit different.
- 03:06 We're gonna template out with variables and just give you another spin on this,
- 03:10 another way to look at it.
- 03:11 So that's all for this video.
Lesson notes are only available for subscribers.