After we have finished implementing the router.
This is how more or less our home page should look like.
And this is how it's looking.
And we also have only one route this contact one for the main page of our site.
We've got 404 not found.
I think that the good idea for now is to start working on the home page.
That's why let's rename that index, get PHP so that we don't have the not found page anymore.
Now let's open this file and let's add some HTML.
Let's start by building a page that will look more or less like this.
Now, after we implement this home page, I'd like us to think about two things.
One is should we mix HTML with all the potential logic inside single route file?
Or maybe we can come up with another, better idea.
And another thing that I would like us to think about is should we always repeat the whole HTML for
the whole page, the menu bar, etc.?
Or maybe we should have a concept of layouts and have separate files that will contain a header, footer,
and the actual content that is different on every single page.
But first let's add the home page.
So right now I'm going to remove all the code from this file.
And I will paste a huge block of code.
You can get a link to it under this video.
Now let me explain why I am doing this.
So I think there is no point in typing all this HTML in a PHP course, and this is a typical HTML page
structure.
We've got some basic meta tags.
We've got a title of the page, and then the style block is not something I've written myself.
It's called a CSS Who reset, which resets the style of the page to some sensible defaults so that it
looks more or less like this.
It's still not perfect nor beautiful, but it's more sensible than the defaults that you're gonna get
in a browser.
So let's just scroll all the way to the bottom and not dig too much into that.
And now let's add a body element.
So before I refresh the page, let me add a header element.
And inside the header element let's add an h1.
That will be a kind of a title of the page.
We can just say welcome.
Now let's refresh this.
It looks like this.
Right below the header we should get the main element.
And here let's add a section element and then add an H2.
This can be maybe just home.
That's a subpage, the title of this specific page and a paragraph saying welcome to my home page.
Something like this.
And after this main element, it's time to add a footer.
So inside the footer we're just going to add a paragraph saying that we copyright this page.
Here we can actually use PHP to output the current year.
So I'm going to use the date function for that with the year parameter.
Remember to always look up those string formats that you can pass in the PHP manual.
And I'm going to say contact form.
Can't decide on the title of my page.
Let it be contact form.
All rights reserved.
There it is.
The complete page.
Now the thing we are obviously missing is the navigation.
But you probably see that if I would like to add the next page, then I'm forced to essentially copy
and paste this huge chunk of code, including all the styles.
So that's why we need to think about what can we do about that for now.
Let's add some navigation.
So maybe below the header we can add a navigation element and just add some h elements which would be
links to different pages.
For now we just have a home page so we can't really add a lot of them.
So this links to the home page.
So from the list of things that we need to do, the next on the list is templating.
And let's jump to this diagram.
So as you can see those route handlers they are the controller part.
So they should be controlling stuff, not really contain the whole page source, including a stylesheet.
That's why we also have an idea of views in the MVC separation.
So as a reminder, that's the design pattern that we wanted to use for this project the model view controller.
So our route handler is a controller.
We are lacking the view.
So we need to create this templates folder because that was the idea.
So let's do it right away.
So we've got the routes folder.
Now we also should have the templates folder next.
Inside it we should create a template for this specific route.
I think that it might be just a good idea to call it the same way.
This would be index get PHP, which should be obvious that this template is matching this route.
Even if someone is going into our project for the first time and trying to understand what's happening
inside.
This would be very intuitive, but then we also don't want the whole HTML part and the head section
in every single template.
That's why we should add some common templates like the Header.php and the footer PHP.
And the idea is that the specific template for a specific route is like rendered in the middle between
the header and between the footer.
So let's jump to the route and let's see what can be a part of the header.
So I think that everything up to the main element should be part of the header.
This is always at the top of the page.
I'm going to move it into a header.
Remember that every PHP file is an HTML file by default you need to add a PHP tag so we can close this
and never open it again up until we need to add more items to the menu.
Then the unique part for this route is just the section element.
The main element, the closing main element and the footer goes into the footer.
PHP.
Like this.
And also the code from the root should actually go into index PHP template.
So let's reformat this because it doesn't have to be indented.
Now we need to somehow put it together.
So let's add some more utility functions inside includes.
So we've got the router.
Let's add the view.
PHP.
This will contain only one function that is responsible.
To put all those templates together to render the header footer and a specific template.
And this would be the argument that we're going to pass to that function.
So let's add the PHP element.
Let me declare that I like the strict types in here.
And the function would be called render view.
So it is rendering the actual view from the template.
So that's the argument.
And additionally we're going to accept data defaulting to an empty array.
And this returns void because this would load some PHP files.
It won't return anything.
I'm just going to use the PHP include.
And here I should be using the one of the constants.
So we've got the includes directory the routes directory.
Let's also have the templates directory to be the templates.
And it is right here Right now.
Let me jump back.
And now I'd like the templates directory.
Then I go with a slash and I concatenate with the template name.
And then I add a PHP extension.
So that's the main template that we'd like to render.
But other than that we know that we want to render the header.
And after that we'd like to render the footer.
Now this data is for the controllers to be able to pass the data.
As on this diagram, the controller needs to pass some data to a template.
And if I include those files right here, they will get access to this data variable automatically.
So I can safely use the data variable inside every single one of those templates.
So now I just need to jump back to this route handler to this controller.
And the only thing that will happen here is I'm going to call render view, and I specify that I'd like
the index get same name as the controller or the route handler name.
So it can't be simpler than this.
So after I save the changes, I think I have saved the changes inside all the files I see we've got
an error, so for that we can always open the place where we run the PHP server.
And I see that I have called an undefined function render view.
Okay, this means I need to include this view file in our front controller.
So we have included the router but not the view.
So after this change everything should be fine.
Okay, I think it's time to summarize what we've learned in this video and what we were able to achieve.
So first off we have introduced the concept of templating.
This means that we've got templates that can be filled with some data and can generate the output,
which is HTML, and then the route handlers can pass some data and use those templates to generate this
HTML.
So this is the view part in the MVC the model view controller design pattern.
Additionally, we learned that we can use the concept of layouts so that we've got a footer and header.
And in between we put the actual contents of the page.
Now so far this is a super simple app that only has one layout.
The footer and header is always the same, but if we have some specific needs that we need to customize
that and pages can have different footers and different headers, we can easily change this.