WEBVTT 00:00.140 --> 00:00.650 Okay guys. 00:00.650 --> 00:07.100 So in this video I'd like to introduce the view handling in our blog application. 00:07.100 --> 00:11.780 There will be some major differences between how we did that previously. 00:11.810 --> 00:19.700 Previously we just had a simple function that rendered the top of the page, then the actual template 00:19.700 --> 00:22.610 with any data and the footer. 00:22.610 --> 00:25.220 So that was much simplified setup. 00:25.220 --> 00:34.460 And with our new setup, we instead have the concept of layouts, and we can choose the layout for every 00:34.460 --> 00:36.590 single view that we render. 00:36.590 --> 00:43.430 That's useful if you have one main layout, and then you might have a different one for an admin panel, 00:43.430 --> 00:44.450 etc.. 00:45.110 --> 00:52.970 So other differences, apart from having different layouts for different views, is that we'll have 00:53.000 --> 00:55.490 the data available as variables. 00:55.490 --> 01:00.470 So previously we relied on this data variable which was an array. 01:00.500 --> 01:08.620 Now every single variable or data passed to the view will be available under the variable name. 01:08.620 --> 01:16.960 So other thing that's important is we're going to learn how can we use the output buffering in PHP. 01:16.990 --> 01:19.060 That's a super simple concept. 01:19.060 --> 01:21.520 And this example should illustrate that. 01:21.550 --> 01:24.430 We just call our start function. 01:24.430 --> 01:25.870 That's just a function name. 01:25.870 --> 01:32.740 And it will start buffering all the output that you echo or you return. 01:32.740 --> 01:40.090 Essentially this means every time you will call the echo statement, this won't be directly outputted 01:40.120 --> 01:41.080 on the screen. 01:41.080 --> 01:45.580 It will be kept in a buffer in a temporary buffer. 01:45.730 --> 01:49.960 And this will happen until you call OB. 01:49.990 --> 01:51.370 Get clean. 01:51.370 --> 01:58.090 That's another function that will just return you everything that was outputted to the buffer. 01:58.090 --> 02:07.640 And this means that you will get this final response as a string we're going to gonna use that to render 02:07.640 --> 02:11.270 the views effectively together with the layouts. 02:11.300 --> 02:14.330 Okay, that's enough of an introduction. 02:14.330 --> 02:19.520 Now let's get started implementing this in our code editor. 02:20.030 --> 02:21.620 Okay, so we are in the code editor. 02:21.620 --> 02:27.980 And as I've said, the router would be probably the most complicated thing in this project. 02:29.090 --> 02:30.770 So we are adding things. 02:30.770 --> 02:33.050 That's basically a core feature. 02:33.050 --> 02:39.530 That's why I will be creating a Vue PHP class inside the core directory. 02:39.800 --> 02:48.800 Let's start with defining the namespace that's core, and we're adding a class here. 02:48.800 --> 02:50.600 Let me call this view. 02:52.730 --> 02:55.700 And it will have some static methods. 02:55.700 --> 02:58.700 The most important one would be called render. 02:59.480 --> 03:03.770 So this is public static function. 03:03.770 --> 03:11.140 Quick reminder static method means that I can call this method on the class, not on the object. 03:11.140 --> 03:14.770 I don't need to create an instance of this class. 03:15.430 --> 03:17.170 This is called render. 03:17.200 --> 03:23.140 It will accept a template name that would be a string. 03:23.470 --> 03:32.530 Optionally, it can also accept data that is initialized as an empty string and it just returns the 03:32.530 --> 03:35.890 string the pure generated output. 03:37.930 --> 03:42.520 So before we implement this method, I'd like to add two more. 03:42.550 --> 03:45.100 One would be called render template. 03:45.100 --> 03:47.740 Another one render layout. 03:48.070 --> 03:49.780 Those are protected. 03:49.780 --> 03:56.740 It means we can access them from this class or the child classes, but it's not publicly available. 03:56.740 --> 04:00.940 And also they are static methods. 04:01.690 --> 04:05.560 So first let me add the render template. 04:05.590 --> 04:07.810 This will be rendering the template. 04:07.810 --> 04:10.430 We're gonna do this separately. 04:10.880 --> 04:20.150 So again here we need the template name and the data which well doesn't have to be an empty array because 04:20.150 --> 04:23.240 we initialize the data in this place already. 04:23.240 --> 04:27.020 And the render method will be calling this one. 04:28.640 --> 04:31.520 So the render template returns a string. 04:31.520 --> 04:34.160 I'm going to implement that method right away. 04:34.160 --> 04:42.080 So it will be clear why we have a render template method, why we would have a separate render layout 04:42.080 --> 04:46.700 method, and why a third render generic method. 04:46.850 --> 04:49.520 So let's start with the render template. 04:49.520 --> 04:56.810 So I've said that the data passed inside this data array would now be available as variables. 04:56.840 --> 04:58.430 How can we do that. 04:58.430 --> 05:02.330 So in PHP there is a function called extract. 05:03.020 --> 05:09.620 So the description of the function is that it imports into the current symbol table from an array. 05:09.800 --> 05:11.690 Well no one can understand that. 05:11.690 --> 05:16.270 So essentially this means you have an array that is an associative array. 05:16.270 --> 05:23.590 So keys from this array become variable names and values become the values of those new variables. 05:23.620 --> 05:31.630 That's why we can call extract on the data to create some variables in the context of this function. 05:32.050 --> 05:35.830 Next up we need to calculate the path to the template. 05:35.830 --> 05:46.630 I'm going to use the dear name function and the dear constant that's always available, and concatenate 05:46.630 --> 05:48.910 that with the path to the views. 05:48.940 --> 05:54.550 Now we can make the directory of the views configurable. 05:54.550 --> 05:57.190 For now I'm just going to keep it constant. 05:57.190 --> 06:02.440 So I'm going to create the views folder inside the app directory. 06:02.440 --> 06:05.380 And this is where we're going to be keeping the templates. 06:05.380 --> 06:13.150 So to navigate from this view file to that directory I need to go one level up to the app directory 06:13.180 --> 06:19.590 to the views directory, then I need the template name. 06:19.710 --> 06:22.650 Don't really need this curly braces to be honest. 06:22.650 --> 06:24.060 Dot php. 06:24.870 --> 06:27.210 That should be the file name. 06:30.570 --> 06:39.660 Now at this point I should be checking if this file exists using file exists function because if it 06:39.690 --> 06:43.830 won't, we're going to be throwing an exception. 06:45.060 --> 06:52.890 It can say template file not found at least. 06:52.920 --> 06:54.930 Which template do we mean. 06:55.020 --> 07:00.240 Now as a part of this project we'll also have much better error handling. 07:00.270 --> 07:01.620 But that's for later. 07:01.770 --> 07:06.720 And now the thing that I've mentioned about the buffering. 07:06.720 --> 07:11.190 So we need to start the buffer that's using OB start. 07:13.410 --> 07:19.090 Then we just simply require the path so the file the template. 07:20.770 --> 07:27.610 And from this method we return the result of object clean. 07:27.610 --> 07:30.460 So take a look at what we did here. 07:30.460 --> 07:38.140 By requiring a file it might have outputted something some HTML maybe together with some data. 07:38.170 --> 07:46.360 But instead of just directly rendering it on the screen, we started capturing the temporary buffer, 07:46.390 --> 07:48.550 the output using OB start. 07:48.580 --> 07:56.860 That's why we were able to capture the contents of this template, rendered together with all the data 07:56.860 --> 08:04.600 into a variable, or to be more specific, into a string that we got from this function. 08:04.600 --> 08:10.150 That's a super neat way to capture any kind of output in PHP. 08:10.180 --> 08:21.030 Now we can have another method to render the layout and the contents of the template can be passed to 08:21.060 --> 08:23.220 this layout as a variable. 08:24.210 --> 08:31.650 Now I'm going to add the layout rendering method and I'm copy pasting this rendered template one. 08:31.650 --> 08:37.290 And that's because this new render layout method would be super similar. 08:37.770 --> 08:40.080 So this accepts a template. 08:40.080 --> 08:40.950 And that's right. 08:40.950 --> 08:49.440 We are also calling this a template because you can place the layout in any directory you want. 08:49.470 --> 08:55.200 We won't be forcing anyone to use some specific directory for the layout. 08:55.230 --> 09:02.790 It will also accept the data, because we're going to pass the same data that the template received. 09:02.940 --> 09:14.130 But additionally it gets the string content, and the content is exactly what was generated by the template. 09:14.160 --> 09:16.920 You're going to see how this would work in a second. 09:16.980 --> 09:22.070 So the extract call here is not only working on the data. 09:22.580 --> 09:31.010 Instead, we're going to create an array in place and copy all the elements from the data into it. 09:32.480 --> 09:39.020 But then also I'm going to add the content key with the content variable. 09:39.560 --> 09:45.560 So this way the layout has access to all the data that the template had access to. 09:45.590 --> 09:53.330 So it will create the necessary variables, but also to the content that was previously generated by 09:53.330 --> 09:54.770 the template itself. 09:54.800 --> 10:01.100 So again we are generating this path variable making sure that the layout exists. 10:01.100 --> 10:02.690 We are checking. 10:02.690 --> 10:08.030 We might also say that layout file wasn't found in case anything goes wrong. 10:08.120 --> 10:13.100 And we just normally capture the output buffer. 10:13.100 --> 10:20.690 So in the future we might want to extract those methods into a common one because they look very very 10:20.690 --> 10:21.710 similar. 10:21.950 --> 10:24.750 But we shouldn't rush those things. 10:24.750 --> 10:27.210 So for now, let's keep it this way. 10:27.240 --> 10:35.790 So now that we have those two methods, let's see how can we implement this render, one that will be 10:35.790 --> 10:38.790 responsible for putting everything together. 10:39.990 --> 10:43.380 So our first job is to get the content. 10:43.920 --> 10:49.470 So I'm calling the static method from the same class called render template. 10:51.570 --> 10:56.700 So render template will receive the template as an argument. 10:56.700 --> 11:04.920 And it will receive the data, at least for now because I'd like to also introduce the concept of some 11:04.920 --> 11:06.450 global variables. 11:06.660 --> 11:11.250 So here we just generate all the contents from the template into a string. 11:11.250 --> 11:19.080 I've already explained that, but we're going to return the call to render layout. 11:19.080 --> 11:24.180 And here we are passing the layout template. 11:24.210 --> 11:26.720 Now where do we get this from? 11:28.250 --> 11:30.710 So we can just add the layout parameter. 11:30.710 --> 11:32.720 So this would be a string. 11:33.590 --> 11:38.090 And we can make it null by default. 11:38.090 --> 11:41.300 So how would this work or how could this work. 11:42.440 --> 11:48.230 So we've got this render layout method I'm going to pass the layout as it is. 11:50.690 --> 11:54.170 Next up we have the data and the content. 11:54.170 --> 11:57.050 So I'm passing data and content. 11:58.400 --> 12:03.080 And now I'm just going to make the template nullable not optional. 12:03.080 --> 12:06.680 It's mandatory but it just can't be null. 12:06.680 --> 12:15.080 So what we are going to do here is if the template is null, we're just going to output the content. 12:15.080 --> 12:18.110 And this can be first thing in this method. 12:18.920 --> 12:29.250 So if null equals the template which in the context of this method here means that someone just doesn't 12:29.250 --> 12:30.240 want a layout. 12:30.240 --> 12:32.160 And why not? 12:32.190 --> 12:33.540 We might allow this. 12:33.540 --> 12:37.710 Maybe people don't want to use a layout for certain cases. 12:38.070 --> 12:44.310 Then we should just return the content. 12:45.960 --> 12:53.550 Otherwise we proceed normally trying to find the layout and then passing the content variable to this 12:53.550 --> 12:54.150 layout. 12:54.150 --> 12:58.140 And then layout is responsible for rendering the content as well. 12:58.140 --> 13:00.240 We're gonna see it later on. 13:00.480 --> 13:05.520 So I think that this is not super complex at this point. 13:05.610 --> 13:13.680 Obviously I understand we need to see how this works, and I think that it should be clear by then. 13:13.680 --> 13:18.420 But now I think we implemented a lot and a lot of ground was covered. 13:18.420 --> 13:25.470 That's why we should take a short break, and we're going to be adding the actual Vue templates and 13:25.470 --> 13:30.120 trying to render them from controllers in the next video.