But before we get to that, let's first organize our files just a bit. Already it's getting a little confusing, and now imagine that we had 20 or 30 additional files all dumped within the same directory. Yeah, we don't want that. So instead, I'm going to create a new directory, and this will be exclusively for our views. Okay, so now let's grab each of these, and I will command-click them, and drag them into the views directory. Okay, now, of course I need to update these files to point to the views directory, and then the file. And I will update all of these.

then the file. And I will update all of these. One more, and yeah, already that's just a little bit cleaner than what we had before. Okay, so now let's go into our views directory, and yeah, you'll remember in the last episode we begrudgingly duplicated all of this HTML for every single view. But yeah, clearly, we don't want that. We need to fix that. So here's what I'm thinking. Let's add a new directory within the views folder called Partials. And yeah, you can think of a partial as a partial piece of HTML.

Let's add a new directory within the views folder called partials. And yeah, you can think of a partial as a partial piece of HTML. Okay, how can we divide this up? Well, hmm, maybe we could start with the navigation area. So notice if I select all of that, it is a massive piece of HTML, it just keeps going and going. Let's cut that, and I'm going to create a new file in the partials directory called nav.php, and I'll paste that in. All right, and now if we switch back and visit that about page, well, the navigation area is gone.

All right, and now if we switch back and visit that about page, well, the navigation area is gone. And that would make sense. All we've done so far is created a file, but we haven't yet used it. So I can do that now, and you've already learned about requires and includes. It's the same thing, php require partials/nav.php. Okay, cross your fingers, come back and refresh, and it's back. Okay, so now we were able to take all the duplication for the navigation area and extract it, and that's a programming keyword, to extract code into its own file. So now I'm going to do the exact same thing for every file.

it, and that's a programming keyword, to extract code into its own file. So now I'm going to do the exact same thing for every file. Select all of it, and replace it once again with a require to partials/nav.php. And I'm going to copy that so that I don't have to write it again. Now to the contact page, and the exact same thing. Select it all, and replace it. Cool. So now this should work for every single file. But notice that now, if I need to, for example, add an additional navigation link, like this, testing, well notice I only have to do it in a single place.

Hmm. Well, what about starting at the doctype and grabbing everything leading up to the navigation area? That's sort of like the header, or the head section. Alright, let's do that. So add a new one, head.php, and I will paste that in. And now I can update this. So at the top, require partials/head. And then we will fix the indentation shortly. Let's also do one for the footer, or the foot, if you want.

And then we will fix the indentation shortly. Let's also do one for the footer, or the foot, if you want. footer.php. Paste that in. Alright, switch back. And then we can substitute that. Yes, notice how requires are literally, you can almost think of it as paste. Paste the contents of this file directly here. That's an easy way to think of it. Okay, so now let's unindent this.

That's an easy way to think of it. Okay, so now let's unindent this. And yeah, if we switch back to index.php, everything seems to be working. Great. But now notice for this file, we've removed so much duplication. We can do a little bit more, like for the head section, but already I think this is looking pretty good. Okay, so now I should be able to select all of this and then update our other views. And the only thing I have to tweak is the header. Everything else should be the same.

And the only thing I have to tweak is the header. Everything else should be the same. Alright, so cross your fingers, refresh, home, about, contact. Yeah, we're 95% of the way there. But notice how the logic for the currently active navigation link is now locked to the about page. So we can fix this pretty easily, but I'm going to punt on it for this episode, just so we don't get off track. Okay, so the only remaining step is, why don't we also extract the banner. Okay, create a new file.

Okay, so the only remaining step is, why don't we also extract the banner. Okay, create a new file banner.php. And I will paste that in. But again, notice now we are extracting a partial that hardcodes the current page. So file that one away. Okay, let's come back and replace it with our new partial. And then I'm going to do the exact same thing for the other pages. So that and that. Okay, so yeah, now have a look at how our views look.

All of that duplication has now been destroyed, which is really good. But now we've introduced a new problem. Notice how the text of the banner is hardcoded to about for every single page, and of course we don't want that. Okay, so it sounds like we need to make a portion of a partial dynamic. How exactly do we do that? I'll give you some ideas. Okay, let's close the views directory. And yeah, let's introduce a brand new term. I want you to think of these three files sort of like controllers, and that's an official

And yeah, let's introduce a brand new term. I want you to think of these three files sort of like controllers, and that's an official programming term. So just as view is sort of an adopted term in the community, controller is as well. You can think of a controller as being responsible for accepting an incoming request and providing a response. And when I use that word request, I just mean a visit to the about page. That is a user's request to visit the about page. We then accept that request and we provide a response. And that response consists of what you see within this view.

We then accept that request and we provide a response. And that response consists of what you see within this view. Okay, so I'm introducing concepts that are maybe a little bit above our pay grade, but are going to pay dividends down the line once you are introduced to frameworks where you see these exact same concepts again. So if you want, we could even create a controllers directory, but let's hold off on that just for now. Okay, so why don't we give a name for this page? This is home. Or actually, you know what, let's call it heading.

This is home. Or actually, you know what, let's call it heading. Okay, and then for the contact page, the heading is contact. And then finally for the about page, the heading is about us. And maybe for contact it's contact us. Okay, so now remember that any variable we define in our controller will be accessible within the corresponding view and partials. Okay, let's give it a shot. I will go into banner, and let's change about to heading. All right, so once again, cross those fingers, refresh, home, about, contact.