‫All right.
‫So now that we have our home view file created, I mean we have a lot to do here because we just have
‫all of this HTML that we need to kind of go through, and we need to pick things apart and put them
‫into partials.
‫Now, if you're coming from the front end JavaScript world, you can almost think of partials as like
‫dumb components, because when you're working with React or Vue or anything like that, then you have
‫components with bits of of HTML or JS, whatever, whatever you're working with, basically just parts
‫of the UI.
‫And that's what we're going to do here, is pick apart parts of the UI and put them into partials.
‫So the first thing we'll do is create in the views folder folder called partials.
‫And let's just kind of start from top to bottom.
‫Now we know that obviously the Doctype, the HTML, the head tags, all this stuff, the opening body
‫tag, we're going to want that stuff to go into every file.
‫Right.
‫So every file I'm sorry, every page I should say.
‫So every page is going to have this.
‫So what we'll do is take from this opening body tag up to the top doctype.
‫And let's cut that and then let's go to partials.
‫And we'll create a new file here.
‫And let's call this head dot PHP.
‫And then we'll paste that in.
‫Okay.
‫We'll save that and then we'll go back here.
‫If I save this file now as is, then we're not going to have any CSS or anything because that's now
‫gone.
‫So let's come up here and let's say PHP and let's not echo.
‫We want to require.
‫And we're going to require and use the base path function that we created.
‫And then in there we can pass in our path which is going to be views slash and then partials slash and
‫then head dot PHP.
‫And let's save that reload.
‫And now we have our site back.
‫Now I just want to mention.
‫We're going to do a lot of refactoring, like a lot of refactoring.
‫So when I do something, don't think that that's going to be the final result of what we're doing.
‫You might even say, why the hell is he doing it that way?
‫Well, I'm going to come back to it later.
‫I'm doing things in a way that's easiest to teach people, especially beginners, that that don't fully
‫grasp this stuff yet.
‫I want you guys to, to learn in an incremental way.
‫So I just want to put that out there.
‫Now for the footer.
‫Let's do that next.
‫There really isn't a footer.
‫We have this bottom banner, but I'm not considering that the footer.
‫So we do however need this HTML and body tag.
‫We need that on every page as well.
‫So what we'll do is cut that and we'll put that into a new partial and we'll call that footer dot PHP.
‫And if you wanted to add a footer with links or whatever, you could do that.
‫But our footer is just this.
‫So let's save that and then we can come down here and we can just say PHP require and we're going to
‫require.
‫Let's see actually we want to use our base path.
‫And from there we want to go views slash partials, slash footer dot php.
‫Save that.
‫And just to make sure we could do hoops.
‫I didn't mean to click that again.
‫So just to make sure we can check the source code here and go to the bottom and just make sure you have
‫the HTML and body tag.
‫So the footer is now being included.
‫Next thing I want to do is the header.
‫This header area slash nav bar.
‫So let's take up at the top.
‫Let's take the whole header.
‫So here up to here.
‫Let's cut that.
‫And inside partials let's create a new file and we'll call this.
‫Let's call it nav bar.
‫It's more of a nav bar than a header.
‫And then I'm going to paste that in.
‫If I reload.
‫Well, if I save this and reload without the nav bar, obviously that's going to go away.
‫So let's require that we can actually just copy this down and we'll change this to.
‫Navbar.
‫Reload.
‫And there it is.
‫Okay.
‫Next, let's do this this area here with the search.
‫So I called this showcase.
‫If you want to call this stuff something different you can.
‫But I would suggest kind of following along with the course conventions.
‫So let's create a file here and we'll call it showcase.
‫Let's call it let's call it showcase dash search dot PHP.
‫And then we're going to grab that.
‫So it's just this section here.
‫So we'll get that.
‫Put that in here.
‫Save it.
‫Close it.
‫Copy that down.
‫Showcase.
‫Search.
‫Reload and it still looks the same.
‫That's what we want.
‫Now this right here, it says unlock your career potential.
‫I'm going to call that the top banner.
‫So we'll grab that.
‫And let's go to partials and create top.
‫Banner dot PHP.
‫Paste that in.
‫Let's require that.
‫So top dash banner.
‫Reload.
‫That still works.
‫And then we have the bottom banner.
‫We're going to leave all this stuff right here, the job listings.
‫We're just going to leave that for now.
‫And they're all hard coded.
‫But let's go down to the bottom banner.
‫So this section right here we're going to grab that.
‫Let's cut it.
‫Let's create our last partial here.
‫Bottom dash banner.
‫Paste that in and then.
‫We'll add right here.
‫Bottom banner.
‫Reload.
‫Come down.
‫We still have the bottom banner there.
‫Good.
‫Now.
‫It's okay if you want to keep it like this, where you're using a require and base path and all that
‫passing in the whole path from the views folder.
‫You can do that.
‫But I want to make this a little neater, and I want to create a load partial and a load view helper
‫function which will clean this up.
‫So let's go into helpers and then let's do so.
‫We'll put a doc block here.
‫And this is going to load a partial.
‫Actually let's do load of view first.
‫So a load of you and it's going to take in a pram.
‫That's going to be a string and it's going to be called name.
‫All right.
‫So we have the name.
‫And then.
‫Ultimately, I want to be able to pass data to this view as well.
‫But we're not going to do that just yet.
‫So for now, we'll just do.
‫We'll just do name and then what it's going to return.
‫So it's actually not going to return anything.
‫So what we do is say void.
‫Okay, because it's just going to require a file or load a file.
‫It's not going to return anything.
‫So now we can say function, load view.
‫And we're going to pass in a name.
‫And then we're going to require or require require.
‫We'll use base path.
‫And then what I want to do is instead of just putting in name like that, because then what we would
‫have to do is pass in this whole thing.
‫I just want to be able to say, let's look at the view first.
‫This is a this is a partial.
‫So where are we loading a view in our index file.
‫Right.
‫Public index.
‫We're loading a view right here.
‫So I just want to be able to say load view home.
‫That's it.
‫So what we can do is instead of just putting name in here is we can say let's actually just get rid
‫of that for now.
‫Let's put some double quotes in here and let's say views slash and then whatever the name is.
‫So we'll use our interpolation here.
‫And then dot view dot PHP.
‫Okay.
‫So this should allow us to just simply say load view home load view listings, whatever it might be.
‫Let's save that.
‫Let's try it.
‫Let's go over to the public.
‫Index.php and helpers is already being included here.
‫So let's say instead of this instead of require we'll say load view.
‫Get rid of this and get rid of this.
‫So simply load view home reload and it works.
‫So now whenever we want to load a view we can just call that.
‫So this is what programming is all about.
‫And writing clean code is is having things much more short and concise and it makes more sense.
‫You know, we're loading a view called home.
‫It's very simple.
‫Rather than writing out a require with a long path.
‫So I want to do the same with partials.
‫So I'll just copy this.
‫And let's say, load a partial.
‫Which is also going to take in a name.
‫Let's just change the name of the function to load partial.
‫Now with partials the path is a little different and they also don't have dot view for the extension.
‫So let's say views slash.
‫Partials, slash and then the name and then just dot PHP no view.
‫So that should work.
‫So let's go now back to our home view.
‫And now we can clean this up quite a bit by just simply saying let's copy.
‫Let's grab all these and say load.
‫Partial.
‫And then we can get rid of this, right?
‫We can get rid of the dot PHP.
‫So I should just be able to say load partial head load partial nav bar.
‫Load.
‫Partial showcase.
‫Search.
‫And load.
‫Partial top banner.
‫So if I save that, reload still works good.
‫And we can go down here to the bottom.
‫And the other two we have down here.
‫Let's take this and this and just call load.
‫Partial.
‫Get rid of.
‫Views partial.
‫So it would just be bottom banner and then this one will just be footer.
‫All right.
‫Cool.
‫So now we have our bottom banner and the footer.
‫Now, one thing I think we should add to our load partial and load view is a check to see if the file
‫exists.
‫So what if we come up here and we say let's say load partial header which we know there isn't a header
‫partial.
‫If we reload it's going to break and it gives us a fatal error.
‫So let's actually handle that.
‫So in the helpers we'll start with load view because these are going to be very similar.
‫And we're going to go right.
‫Let's see.
‫Let's just go above the require here.
‫And you know what.
‫Let's put this in a variable.
‫So we'll call this.
‫View path.
‫We'll do that first.
‫Then let's make sure the file exists.
‫So we'll say if and there's a function that we can use called file underscore exists.
‫And we want to check for that view path.
‫Okay, if that view path exists, then we want to require that view path.
‫Now.
‫If it doesn't else, then let's just do an echo here and we'll say echo view.
‫View, and then we'll go like this.
‫And put the path.
‫Not found like that.
‫So now we shouldn't get an error.
‫Instead it should just say view not found, which is much, much neater than doing this.
‫And then for the partial it's actually we'll do the same thing.
‫So let's, let's take this and let's say.
‫Partial.
‫Uh, wait.
‫What is it?
‫Piaa partial.
‫Path.
‫And then we'll do the same thing here.
‫So if file exists and we'll change, let's take this, this and this.
‫So if file exists, partial path require the partial path.
‫Else partial not found.
‫Save it.
‫Let's reload the file.
‫Undefined variable path.
‫Um.
‫Wait a minute.
‫Why do we have path here?
‫It should be view name.
‫Not found.
‫Partial header not found.
‫Okay.
‫Now, the reason we're not seeing the CSS is just because that is in the head, which we're not including.
‫We're including the header, but this is still neater than what we just saw.
‫So if we say head and we reload all right.
‫And then let's say top banner, let's say top banner one which we know doesn't exist, then we just
‫see partial top banner one not found.
‫So much, much cleaner way to to handle it.
‫And there's other things you could do as well.
‫But this is this is just this is one of many.
‫All right.
‫So I think that that is going to do it for this video.
‫In the next video let's create another a couple helper functions that will help us debug and check the
‫values of, of different arrays and stuff, different variables.