WEBVTT 00:00.230 --> 00:07.640 So last time we worked really hard to implement this view class that will basically serve as a total 00:07.640 --> 00:10.670 abstraction for the views rendering. 00:10.700 --> 00:15.740 Now it's time that we use this view class inside the controller. 00:15.770 --> 00:20.870 Let's begin with a home controller by creating the first view file. 00:22.670 --> 00:26.450 So views are stored inside the app Views folder. 00:26.480 --> 00:30.410 Let me create a separate folder for every controller. 00:30.470 --> 00:35.510 This time I'm going to call it home because it is for a home controller. 00:35.780 --> 00:39.800 Inside it it's a view for the index action. 00:39.800 --> 00:43.760 So let me call it the same way that would be index.php. 00:44.300 --> 00:52.640 Let me add a div element and maybe let's make it bold just saying hello for now. 00:53.000 --> 01:01.410 So the first test is to see if we can render this template back to the home controller and instead of 01:01.410 --> 01:04.110 returning home, let's use this view. 01:04.140 --> 01:04.470 Class. 01:04.470 --> 01:14.880 First, I add a use statement for the view class, which has the core view namespace, and instead of 01:14.880 --> 01:21.840 returning this text, I use the view only public static method which is render. 01:21.870 --> 01:27.450 Now the template it is home forward slash index. 01:27.930 --> 01:35.130 We skip the extensions and for clarity maybe I can use the named parameters. 01:35.130 --> 01:36.750 So that's the template. 01:36.990 --> 01:39.540 We don't have layout so far. 01:39.540 --> 01:41.160 So I'm going to skip this. 01:41.160 --> 01:44.280 And let me also try data passing. 01:44.940 --> 01:49.110 Maybe I can pass a message here saying hello. 01:51.570 --> 01:53.550 And then in the template. 01:56.100 --> 01:58.650 Let's say that the message is. 01:58.740 --> 02:08.550 And now I should have a variable available here which would have the name message so I can output it. 02:10.500 --> 02:12.510 And now let's try this out. 02:12.720 --> 02:16.170 So when I try this I've got a 500 error. 02:16.200 --> 02:17.280 Looks like this. 02:17.280 --> 02:20.490 Because we don't have nice error handling yet. 02:20.700 --> 02:23.490 So let me see inside the terminal. 02:23.490 --> 02:24.780 What's the problem. 02:24.900 --> 02:27.390 So the template was not found. 02:27.420 --> 02:32.460 I'm looking for the template in apparently the wrong folder. 02:34.350 --> 02:36.270 Okay, I see the problem. 02:36.300 --> 02:39.180 I've used the dear name function. 02:42.240 --> 02:46.740 And this ends up not being able to find the file. 02:47.040 --> 02:48.540 Let's do some debugging. 02:48.540 --> 02:54.570 Then let's use var dump with the path and stop at this point. 02:54.600 --> 02:56.880 So we're going to do some live debugging. 02:56.890 --> 02:59.830 And apparently that's the file. 02:59.830 --> 03:02.890 So we can start from this. 03:02.890 --> 03:04.690 That's the root directory. 03:04.870 --> 03:13.000 And well we don't need to go up in here because we are looking for a file inside this app folder. 03:13.210 --> 03:15.130 That's an easy fix. 03:15.160 --> 03:18.940 Apparently I don't need to go up in here. 03:18.940 --> 03:22.390 So let me fix that in all the places. 03:22.390 --> 03:27.190 Remove the var dump, save the changes and try again. 03:28.420 --> 03:29.830 Okay, so there it is. 03:29.830 --> 03:36.550 We've got this page and that seems to be the message we are passing, which confirms that both the view 03:36.550 --> 03:41.530 rendering and the data passing is working fine. 03:43.930 --> 03:52.090 Next up let's add a main layout layout that we're going to use for all the public pages except a admin 03:52.090 --> 03:52.930 dashboard. 03:54.250 --> 04:01.910 So for layouts let me create another folder inside views and call that layouts, and the main layout 04:01.910 --> 04:04.250 will just be called main. 04:05.150 --> 04:06.020 Like this. 04:06.020 --> 04:09.530 And now let's add some code reuse. 04:09.800 --> 04:13.700 So in the previous app we've got this header.php file. 04:14.630 --> 04:19.550 Why won't we just reuse this as our layout. 04:20.300 --> 04:24.620 So let me just copy this and paste it here. 04:25.310 --> 04:30.830 Now if you don't have this other project open, you can always grab the code for every video. 04:30.830 --> 04:33.620 Under the specific video there are links. 04:33.620 --> 04:37.040 You can just copy and paste that there shouldn't be a problem. 04:37.640 --> 04:45.680 So let's just change this H1 element to my blog and the navigation items. 04:45.890 --> 04:48.020 Well obviously we have different. 04:48.110 --> 04:53.000 So for example we've got link to posts the home page. 04:56.400 --> 05:04.020 And then we don't really chop those files into separate header, footer, etc.. 05:04.140 --> 05:09.780 Now inside this main element I can actually output the content. 05:09.780 --> 05:15.300 And also I can add a footer directly inside the layout. 05:15.930 --> 05:22.080 So in the footer let me say that we are copyrighting this. 05:22.110 --> 05:30.180 I'm going to use PHP to output the date the year, which would always be the current one, and say that 05:30.180 --> 05:33.990 we copyright that as my blog. 05:34.500 --> 05:38.670 Now let's close the HTML and body elements. 05:40.530 --> 05:48.660 The other thing I'd like to reuse is the CSS, but instead of putting it all into the style block, 05:48.660 --> 05:56.550 let's add a separate CSS file and let's put it into the public folder because it needs to be available 05:56.550 --> 06:05.160 publicly, call it maybe style CSS and just paste the whole CSS into this file. 06:06.060 --> 06:13.020 Now I'm going to close that and replace this style block with a link element to point to this style 06:13.020 --> 06:19.830 file, which needs a rel attribute called style sheet and decref. 06:20.610 --> 06:30.390 That's just forward slash style CSS, because we are pointing the public folder is the root here, and 06:30.390 --> 06:35.550 obviously the title is not contact form, it is my blog. 06:36.810 --> 06:42.210 Okay, so I think that this is now ready except the content. 06:42.390 --> 06:50.940 So now in every layout we have this special content variable which is all the content rendered from 06:50.940 --> 06:54.100 the individual templates and we need to output it. 06:54.100 --> 06:57.940 So that's just one of the special variables that we have. 06:57.970 --> 07:02.890 This is now ready and we can use it when we render our main view. 07:03.730 --> 07:05.980 So now let me jump to the home controller. 07:05.980 --> 07:12.100 And the only change that I need to make here is to tell which layout I'd like to use. 07:13.300 --> 07:17.980 So let me pass the layout named argument. 07:17.980 --> 07:21.940 And this should be layouts forward slash main. 07:22.240 --> 07:23.290 And that's everything. 07:23.290 --> 07:26.140 This is how our home page looks like. 07:26.140 --> 07:34.240 So in this video we've actually used our view class to render a view and to pass some data to it, which 07:34.240 --> 07:35.770 is available as a variable. 07:35.770 --> 07:42.970 And also we have created a main layout which has some magic variables like the content, for example, 07:42.970 --> 07:50.290 which is all the content rendered from the template so that we can insert it wherever we want.