Alright, so before we move on to the technical check-in in the next episode, let's take five minutes or so to talk about code organization, and why, often, you might want to separate your PHP logic from the HTML itself. Let's have a look. So what we have right now is a single HTML file with all of our PHP logic nested inside it, including any data, or filtering, or functions, or loops, as you see here. And yeah, at least to some extent, it's kind of a feature. The ability to combine PHP and HTML within a single file is really powerful. But also, as you might be able to imagine, there's also the potential that this file grows and turns into a monstrosity that's incredibly difficult to reason about.

But also, as you might be able to imagine, there's also the potential that this file grows and turns into a monstrosity that's incredibly difficult to reason about. So even at this early stage, it's very important that you're always thinking about readability and code organization. So I'll tell you, what a lot of php developers will do is they will separate the logic itself, the php code that gathers the data, and they will split that from the HTML that displays the data to the user. So I'll show you what we could do here. What if we took everything here? So I'm going to select all of this php here, and I'm going to cut it.

What if we took everything here? So I'm going to select all of this php here, and I'm going to cut it. And as a first step, just the very first step, why don't we get it out of the body tag? Why don't we put it at the very top of the document, like this? Okay, so yeah, it's a simple and subtle enough change. But notice how now we are being crystal clear that our php logic is entirely separate from the core HTML itself. Okay, but what about this? That's php. Do we have to figure out where that goes?

That's php. Do we have to figure out where that goes? And the answer is no, we don't have to take it that far. If we look at what this is doing, we are looping over an array, and we are building up some HTML. That's exactly what this is for. But notice how it's effectively dumb. Actually, that's the word we often use in the programming community. You will often hear people say that the template or the view, and by the way, for now, just think of it as the HTML, just another word for the HTML.

again, what we might call the view or the template or the HTML portion, what the user sees. All right, let's do this. I'm going to create a brand new file here, and we can name this anything we want, but I do want it to be clear that it is a template that is connected to index. So I might say index.template.php. We might say index.html.php. We might say index.view. I'm going to go with this view term because as you learn more and you start digging into frameworks, you will see that word often.

I'm going to go with this view term because as you learn more and you start digging into frameworks, you will see that word often. And it's probably a good idea if we understand what it means earlier than later. All right, so I'm going to copy everything and move it over. But now I'm going to get rid of all of this php logic at the top. The only thing within this file is our core HTML and then whatever data we need to echo or loop over. Okay, now we can switch back to index.php, and I will do the opposite. I'm going to get rid of all the HTML there and leave only the php logic itself. Okay, but next notice if I scroll to the bottom, my editor is saying, eh, this is redundant.

I'm going to get rid of all the HTML there and leave only the php logic itself. Okay, but next notice if I scroll to the bottom, my editor is saying, eh, this is redundant. And this is an optional rule, but almost everyone follows it. If you have a file that exclusively contains php, you can omit the closing portion of the php tag. And then further, I wouldn't indent this. I would do something like this and then add a space at the top. Okay, so now we have two files. One file that declares the data. And again, this would be the file that might interact with your database.

One file that declares the data. And again, this would be the file that might interact with your database. This might be the file that calls some kind of API to give me, I don't know, the top 20 books from Amazon. If I know how to make that request, I would do it within this file. Once I have compiled all of that data, I would then load the view that displays that data. Okay, so notice we have a separation there. But now if I come back to the browser and I reload, of course, I get a blank page. And that's because at the moment, the application doesn't know anything about this view. Just because you create it doesn't mean it's magically referenced anywhere.

And that's because at the moment, the application doesn't know anything about this view. Just because you create it doesn't mean it's magically referenced anywhere. So let's do this. I'm going to go back to index.php. And I need a way to say, load my view or load the HTML. And we can do that at the bottom by saying either require or include. Let's do require. And I'm going to give it the name of the file, index.view.php. Okay, so think about what happens when we load this file. It creates an array of books, it creates a filteredBooks variable, and then it requires

Even though you see a squiggly line here. Hold that thought. If I come back to Firefox, yeah, now that is working. So what's going on with the squiggly line here? You're probably only going to see this if you're working along in PHPStorm. And I think it's confusing, and I'm surprised they do this. But PHPStorm will not follow requires and includes when tracking variables or something like that. But we can solve it pretty easily by opening up settings, and I'm sorry, I'll do it manually. Let's go to PHPStorm, Preferences, Editor, Inspections, and these are all the inspections.

But we can solve it pretty easily by opening up settings, and I'm sorry, I'll do it manually. Let's go to PHPStorm, Preferences, Editor, Inspections, and these are all the inspections that PHPStorm will do for any language or for any tool. The one we care about is within the PHP section, all the way down to Undefined Symbols, and then Undefined Variable, because that was the error that we were seeing. I'm going to turn on this right here, Search for Variable Definitions Outside the Current File. So let's turn that on as I've done, apply it, and that squiggly line should go away if I return to the view, and it does. Yeah, kind of a weird one, but if you're using Visual Studio Code or Sublime Text, I bet

It's incredibly important what we're covering in this video. We've learned that it's key to separate your php logic from the layer that renders it for the user. And that second layer could be called the HTML, you could call it the view, you could call it the template. They're often used interchangeably. I typically use the word view, which is why we named the file index.view.php. And now notice how much easier it is to reason about. If I need to adjust the php logic, I go into index.php, and I make my change. If I instead need to tweak the presentation, for example, I don't want to use an unordered

If I need to adjust the php logic, I go into index.php, and I make my change. If I instead need to tweak the presentation, for example, I don't want to use an unordered list, I want to switch over to divs or a definition list or something, well, I know that I will make that change within the view layer. And this also is much easier to reason about. It has access to some data, and it's, again, effectively dumb. It loops over it, and it renders it for the user. Pretty cool.