WEBVTT 00:00.440 --> 00:02.990 After we have finished implementing the router. 00:02.990 --> 00:06.620 This is how more or less our home page should look like. 00:06.650 --> 00:08.330 And this is how it's looking. 00:08.330 --> 00:14.420 And we also have only one route this contact one for the main page of our site. 00:14.420 --> 00:16.940 We've got 404 not found. 00:16.970 --> 00:22.010 I think that the good idea for now is to start working on the home page. 00:22.010 --> 00:29.510 That's why let's rename that index, get PHP so that we don't have the not found page anymore. 00:29.540 --> 00:33.830 Now let's open this file and let's add some HTML. 00:33.830 --> 00:40.040 Let's start by building a page that will look more or less like this. 00:40.280 --> 00:46.010 Now, after we implement this home page, I'd like us to think about two things. 00:46.010 --> 00:54.110 One is should we mix HTML with all the potential logic inside single route file? 00:54.110 --> 00:57.680 Or maybe we can come up with another, better idea. 00:57.680 --> 01:05.150 And another thing that I would like us to think about is should we always repeat the whole HTML for 01:05.150 --> 01:07.970 the whole page, the menu bar, etc.? 01:08.000 --> 01:17.180 Or maybe we should have a concept of layouts and have separate files that will contain a header, footer, 01:17.180 --> 01:21.260 and the actual content that is different on every single page. 01:21.860 --> 01:24.560 But first let's add the home page. 01:24.950 --> 01:28.220 So right now I'm going to remove all the code from this file. 01:28.220 --> 01:32.180 And I will paste a huge block of code. 01:32.180 --> 01:35.960 You can get a link to it under this video. 01:35.990 --> 01:38.600 Now let me explain why I am doing this. 01:38.600 --> 01:48.230 So I think there is no point in typing all this HTML in a PHP course, and this is a typical HTML page 01:48.230 --> 01:49.280 structure. 01:49.310 --> 01:51.590 We've got some basic meta tags. 01:51.590 --> 01:58.370 We've got a title of the page, and then the style block is not something I've written myself. 01:58.370 --> 02:07.210 It's called a CSS Who reset, which resets the style of the page to some sensible defaults so that it 02:07.210 --> 02:08.830 looks more or less like this. 02:08.860 --> 02:16.450 It's still not perfect nor beautiful, but it's more sensible than the defaults that you're gonna get 02:16.450 --> 02:17.620 in a browser. 02:17.620 --> 02:23.290 So let's just scroll all the way to the bottom and not dig too much into that. 02:23.290 --> 02:26.440 And now let's add a body element. 02:27.970 --> 02:32.560 So before I refresh the page, let me add a header element. 02:34.330 --> 02:38.500 And inside the header element let's add an h1. 02:38.530 --> 02:41.350 That will be a kind of a title of the page. 02:41.350 --> 02:43.120 We can just say welcome. 02:43.120 --> 02:44.650 Now let's refresh this. 02:44.680 --> 02:46.060 It looks like this. 02:46.510 --> 02:50.290 Right below the header we should get the main element. 02:50.410 --> 02:58.390 And here let's add a section element and then add an H2. 02:58.420 --> 03:01.740 This can be maybe just home. 03:01.770 --> 03:10.230 That's a subpage, the title of this specific page and a paragraph saying welcome to my home page. 03:11.430 --> 03:13.020 Something like this. 03:13.050 --> 03:17.700 And after this main element, it's time to add a footer. 03:18.420 --> 03:28.530 So inside the footer we're just going to add a paragraph saying that we copyright this page. 03:28.620 --> 03:34.410 Here we can actually use PHP to output the current year. 03:34.410 --> 03:38.250 So I'm going to use the date function for that with the year parameter. 03:38.370 --> 03:45.210 Remember to always look up those string formats that you can pass in the PHP manual. 03:46.470 --> 03:49.800 And I'm going to say contact form. 03:49.800 --> 03:51.960 Can't decide on the title of my page. 03:51.990 --> 03:53.340 Let it be contact form. 03:53.370 --> 03:56.760 All rights reserved. 03:58.740 --> 03:59.610 There it is. 03:59.610 --> 04:00.960 The complete page. 04:00.990 --> 04:04.440 Now the thing we are obviously missing is the navigation. 04:04.440 --> 04:12.900 But you probably see that if I would like to add the next page, then I'm forced to essentially copy 04:12.900 --> 04:18.990 and paste this huge chunk of code, including all the styles. 04:19.890 --> 04:24.270 So that's why we need to think about what can we do about that for now. 04:24.300 --> 04:26.580 Let's add some navigation. 04:26.580 --> 04:34.800 So maybe below the header we can add a navigation element and just add some h elements which would be 04:34.800 --> 04:36.240 links to different pages. 04:36.240 --> 04:41.550 For now we just have a home page so we can't really add a lot of them. 04:42.300 --> 04:44.760 So this links to the home page. 04:45.930 --> 04:51.510 So from the list of things that we need to do, the next on the list is templating. 04:52.380 --> 04:54.840 And let's jump to this diagram. 04:54.840 --> 05:00.780 So as you can see those route handlers they are the controller part. 05:00.810 --> 05:07.610 So they should be controlling stuff, not really contain the whole page source, including a stylesheet. 05:07.640 --> 05:14.300 That's why we also have an idea of views in the MVC separation. 05:15.050 --> 05:23.090 So as a reminder, that's the design pattern that we wanted to use for this project the model view controller. 05:23.120 --> 05:25.370 So our route handler is a controller. 05:25.370 --> 05:27.650 We are lacking the view. 05:28.400 --> 05:32.090 So we need to create this templates folder because that was the idea. 05:32.090 --> 05:34.010 So let's do it right away. 05:35.390 --> 05:37.430 So we've got the routes folder. 05:37.460 --> 05:42.680 Now we also should have the templates folder next. 05:42.680 --> 05:47.120 Inside it we should create a template for this specific route. 05:47.120 --> 05:52.130 I think that it might be just a good idea to call it the same way. 05:52.160 --> 05:58.790 This would be index get PHP, which should be obvious that this template is matching this route. 05:58.790 --> 06:05.210 Even if someone is going into our project for the first time and trying to understand what's happening 06:05.210 --> 06:05.660 inside. 06:05.660 --> 06:13.070 This would be very intuitive, but then we also don't want the whole HTML part and the head section 06:13.070 --> 06:15.140 in every single template. 06:15.170 --> 06:22.940 That's why we should add some common templates like the Header.php and the footer PHP. 06:24.230 --> 06:31.160 And the idea is that the specific template for a specific route is like rendered in the middle between 06:31.160 --> 06:33.440 the header and between the footer. 06:37.610 --> 06:43.820 So let's jump to the route and let's see what can be a part of the header. 06:45.560 --> 06:50.780 So I think that everything up to the main element should be part of the header. 06:51.410 --> 06:53.630 This is always at the top of the page. 06:53.630 --> 06:55.730 I'm going to move it into a header. 06:55.760 --> 07:05.060 Remember that every PHP file is an HTML file by default you need to add a PHP tag so we can close this 07:05.060 --> 07:10.400 and never open it again up until we need to add more items to the menu. 07:10.430 --> 07:15.440 Then the unique part for this route is just the section element. 07:15.470 --> 07:21.470 The main element, the closing main element and the footer goes into the footer. 07:21.710 --> 07:22.160 PHP. 07:25.640 --> 07:26.750 Like this. 07:26.780 --> 07:34.670 And also the code from the root should actually go into index PHP template. 07:35.660 --> 07:39.830 So let's reformat this because it doesn't have to be indented. 07:40.850 --> 07:43.760 Now we need to somehow put it together. 07:44.450 --> 07:49.400 So let's add some more utility functions inside includes. 07:49.400 --> 07:50.810 So we've got the router. 07:50.840 --> 07:51.920 Let's add the view. 07:52.160 --> 07:52.610 PHP. 07:52.700 --> 07:56.900 This will contain only one function that is responsible. 07:56.900 --> 08:03.620 To put all those templates together to render the header footer and a specific template. 08:03.620 --> 08:07.790 And this would be the argument that we're going to pass to that function. 08:08.240 --> 08:10.340 So let's add the PHP element. 08:10.610 --> 08:16.640 Let me declare that I like the strict types in here. 08:17.330 --> 08:20.990 And the function would be called render view. 08:20.990 --> 08:25.310 So it is rendering the actual view from the template. 08:25.310 --> 08:27.320 So that's the argument. 08:27.320 --> 08:32.870 And additionally we're going to accept data defaulting to an empty array. 08:32.870 --> 08:37.730 And this returns void because this would load some PHP files. 08:37.730 --> 08:39.950 It won't return anything. 08:40.280 --> 08:43.190 I'm just going to use the PHP include. 08:43.310 --> 08:48.650 And here I should be using the one of the constants. 08:48.650 --> 08:52.430 So we've got the includes directory the routes directory. 08:52.460 --> 08:58.490 Let's also have the templates directory to be the templates. 08:58.640 --> 09:01.840 And it is right here Right now. 09:01.840 --> 09:02.920 Let me jump back. 09:02.920 --> 09:06.580 And now I'd like the templates directory. 09:06.610 --> 09:11.860 Then I go with a slash and I concatenate with the template name. 09:11.860 --> 09:15.160 And then I add a PHP extension. 09:15.160 --> 09:18.160 So that's the main template that we'd like to render. 09:18.160 --> 09:23.230 But other than that we know that we want to render the header. 09:23.740 --> 09:27.490 And after that we'd like to render the footer. 09:27.970 --> 09:33.520 Now this data is for the controllers to be able to pass the data. 09:33.550 --> 09:38.770 As on this diagram, the controller needs to pass some data to a template. 09:38.770 --> 09:46.570 And if I include those files right here, they will get access to this data variable automatically. 09:46.570 --> 09:53.770 So I can safely use the data variable inside every single one of those templates. 09:54.970 --> 10:02.190 So now I just need to jump back to this route handler to this controller. 10:02.190 --> 10:09.780 And the only thing that will happen here is I'm going to call render view, and I specify that I'd like 10:09.780 --> 10:14.400 the index get same name as the controller or the route handler name. 10:14.400 --> 10:17.250 So it can't be simpler than this. 10:17.340 --> 10:23.280 So after I save the changes, I think I have saved the changes inside all the files I see we've got 10:23.280 --> 10:29.580 an error, so for that we can always open the place where we run the PHP server. 10:29.580 --> 10:33.630 And I see that I have called an undefined function render view. 10:33.660 --> 10:39.570 Okay, this means I need to include this view file in our front controller. 10:41.970 --> 10:46.290 So we have included the router but not the view. 10:48.780 --> 10:51.870 So after this change everything should be fine. 10:51.900 --> 10:58.530 Okay, I think it's time to summarize what we've learned in this video and what we were able to achieve. 10:58.560 --> 11:04.010 So first off we have introduced the concept of templating. 11:04.280 --> 11:11.690 This means that we've got templates that can be filled with some data and can generate the output, 11:11.690 --> 11:19.250 which is HTML, and then the route handlers can pass some data and use those templates to generate this 11:19.520 --> 11:20.210 HTML. 11:20.240 --> 11:27.350 So this is the view part in the MVC the model view controller design pattern. 11:27.380 --> 11:37.640 Additionally, we learned that we can use the concept of layouts so that we've got a footer and header. 11:37.640 --> 11:42.530 And in between we put the actual contents of the page. 11:42.560 --> 11:48.080 Now so far this is a super simple app that only has one layout. 11:48.110 --> 11:53.840 The footer and header is always the same, but if we have some specific needs that we need to customize 11:53.840 --> 12:01.220 that and pages can have different footers and different headers, we can easily change this.