WEBVTT 00:00.800 --> 00:01.280 Okay. 00:01.280 --> 00:10.310 So last time we have created and I think successfully the functionality of Paginating the results on 00:10.310 --> 00:16.730 the posts page, we have verified that passing different query parameters. 00:17.690 --> 00:23.000 What we are missing is the visual way to navigate between pages. 00:23.540 --> 00:27.080 And this would be our job right now. 00:27.620 --> 00:32.960 What I would like to do is to make this functionality reusable. 00:33.290 --> 00:42.860 That's why I think the good idea is to create a view partial that we can easily use in different other 00:42.860 --> 00:50.840 views, without having to apply the same visual template logic again and again. 00:50.870 --> 00:59.840 Now, this would work the way that we just need to pass some specific parameters like what is the current 00:59.840 --> 01:04.200 page and how many total pages we have. 01:04.470 --> 01:09.540 And then it will just render links to specific pages. 01:09.900 --> 01:17.460 So without further ado, I think we should just go ahead and create a partial. 01:18.690 --> 01:22.560 We can call that underscore pagination. 01:22.950 --> 01:31.530 PHP and let's just include this view inside posts. 01:31.530 --> 01:35.970 So here we render the posts at the bottom. 01:38.670 --> 01:43.350 Let's also add the rendering of pagination. 01:43.350 --> 01:46.320 And we need to pass some parameters to it. 01:49.800 --> 01:57.450 So I think that it needs the current page which we have available in this view. 01:59.220 --> 02:03.390 And the other parameter would be total pages. 02:05.740 --> 02:10.300 That's total pages, which we also have in this view. 02:16.120 --> 02:16.810 Okay. 02:16.810 --> 02:19.450 So nothing changes. 02:19.450 --> 02:22.630 But we should have this immediately rendered. 02:22.630 --> 02:31.360 So now every time we add something to this partial like I'm adding some text right now, this should 02:31.360 --> 02:34.750 be immediately visible below the blog post. 02:34.750 --> 02:39.820 So now let's work on this template so it can render the proper links. 02:42.010 --> 02:48.070 So the first thing to check is if we have multiple pages at all. 02:48.220 --> 02:57.610 Because if total pages is not more than one, there is no point in rendering the different pages links 02:57.610 --> 02:59.500 because there is only one page. 03:00.580 --> 03:03.460 So that's our first check. 03:04.960 --> 03:09.530 If that's the case, let's add the proper semantic HTML. 03:09.530 --> 03:15.860 So we are adding the navigation element and unordered list inside. 03:17.390 --> 03:22.190 For every page we need to display a link. 03:23.810 --> 03:30.470 So let's add a for loop starting at page one. 03:30.980 --> 03:38.390 So no one likes to see the page zero, even though typically in most programming languages everything 03:38.420 --> 03:42.050 is being indexed starting at zero. 03:44.360 --> 03:51.920 Here we're gonna check if this index is less or equal total pages. 03:53.150 --> 03:57.140 If so, we just increment the counter. 03:58.700 --> 03:59.270 Okay. 03:59.300 --> 04:03.110 Now we need to close this using end for. 04:04.400 --> 04:09.380 And inside we are going to render a list item. 04:09.900 --> 04:18.330 So what we are trying to do here is to display a link for every single page that is available. 04:18.330 --> 04:23.670 So this is a very simplified pagination mechanism. 04:23.670 --> 04:31.260 But if we are on the current page I think it doesn't make sense to display a link. 04:31.440 --> 04:39.870 So we're going to check that if the page index is the current page. 04:42.270 --> 04:46.680 Maybe let's not use strict equality check because we never know. 04:46.680 --> 04:54.180 Maybe the current page parameter would be passed from the URL query parameter and then it might be a 04:54.180 --> 04:55.050 string. 04:55.050 --> 04:57.810 So let's use just normal equality. 04:58.080 --> 05:00.750 So if that's the case we are on the current page. 05:00.750 --> 05:02.910 We just use a span element. 05:02.910 --> 05:04.200 So no links. 05:04.200 --> 05:07.650 And we output the page. 05:09.750 --> 05:12.910 Then we need an alternative. 05:13.960 --> 05:21.310 In other cases, we're going to display a link and let me close that with and if so. 05:21.310 --> 05:29.020 Now going back to the case with the link, let's use an A element. 05:31.630 --> 05:37.810 And here as well we're going to display the page index. 05:39.790 --> 05:42.250 And now the important part. 05:42.970 --> 05:45.100 So we add the question mark. 05:45.100 --> 05:50.590 So we're going to pass some query parameters which is the page. 05:51.250 --> 05:56.200 So this would be again the current index current page. 05:56.200 --> 06:03.040 So it might look like everything will work fine as we have implemented this partial currently. 06:03.040 --> 06:05.290 But actually there is a problem. 06:05.290 --> 06:11.620 And the problem is that this link here ignores any other URL parameters that we might have. 06:11.650 --> 06:14.250 And if we jump at the post controller. 06:14.250 --> 06:23.100 We can see that both the posts and the number of total posts are being fetched, also depending on the 06:23.100 --> 06:24.420 search query. 06:24.630 --> 06:30.600 So if for the next page, you will create a link that will not have this search query. 06:30.630 --> 06:39.870 Well, I think everything will just break down because initially we've calculated the pages including 06:39.870 --> 06:45.480 the search query in calculating the number of pages. 06:45.630 --> 06:54.210 And then if we go to another page, if we won't have this info, it will just get the total number of 06:54.210 --> 06:54.840 posts. 06:54.840 --> 06:56.640 Ignoring the search query. 06:56.670 --> 07:08.010 That's why we need to make sure that this partial is also passing all the URL parameters together with 07:08.010 --> 07:08.910 the page. 07:11.250 --> 07:16.750 So now for the sake of presentation, let's change the limit limits to one. 07:17.260 --> 07:21.700 What this would do is every single post would be on a separate page. 07:21.700 --> 07:24.910 I think I can then demonstrate the problem. 07:25.240 --> 07:28.150 So let me jump to the posts page. 07:28.150 --> 07:32.500 And now, as expected, we've got three pages. 07:33.130 --> 07:38.800 Let me try to use a combination of words that at least two posts have. 07:38.950 --> 07:45.670 So now we see two pages because two posts have we inside the title or content. 07:45.670 --> 07:46.960 That's fine. 07:47.530 --> 07:54.970 Now see what happens if I go to the second page suddenly instead of two pages listed, we've got three 07:54.970 --> 07:55.870 pages. 07:55.870 --> 08:03.700 This means that all the filters that we've applied, like the search query, this information is lost. 08:04.180 --> 08:13.930 So what we need to do is inside this pagination partial, instead of just passing the page, we need 08:13.930 --> 08:23.240 to preserve all other query parameters That the Earl might have, because we don't know what filters 08:23.240 --> 08:26.120 we might have to add in the future. 08:26.120 --> 08:31.730 And every single page might use its own combination of filters. 08:31.730 --> 08:40.490 So if this partial pagination is going to be reusable, it can't really depend on any parameters being 08:40.490 --> 08:45.020 called search or have any other specific name. 08:45.260 --> 08:54.440 We just need to make sure that if there is any parameter in your URL like this search one, that we 08:54.440 --> 08:58.190 just pass it along with every single link. 08:58.850 --> 09:01.160 And this is what we're going to do right now. 09:03.950 --> 09:10.400 So this partial just needs to have a logical part with some PHP. 09:11.330 --> 09:18.290 And we're going to get the query params just using this get super global. 09:18.290 --> 09:22.320 And from it We're going to remove the page. 09:22.980 --> 09:26.940 So I'm going to unset query params page. 09:26.970 --> 09:28.440 Why are we doing that. 09:28.470 --> 09:35.130 Well it's because we are generating the value of page for every single page link. 09:36.210 --> 09:42.360 And now let's add a function called build query string. 09:43.620 --> 09:52.410 It's going to accept an array of params and the current page and it will output a string. 09:53.850 --> 09:58.710 So to the params array we're going to set the page. 10:00.750 --> 10:09.270 And in PHP there is a function called http build query, which will just generate this string URL query 10:09.270 --> 10:15.210 that we can use from the array from all the items in an associative array. 10:16.650 --> 10:23.350 And now we're just going to use this function instead of manually generating the page. 10:24.610 --> 10:27.250 So this will change a little bit. 10:27.280 --> 10:28.900 We remove this param. 10:28.900 --> 10:37.780 And here instead of this index we just call build query string to which we're going to pass the query 10:37.780 --> 10:38.320 params. 10:38.320 --> 10:44.470 So all the existing parameters and page is generated for every single page. 10:46.060 --> 10:48.520 Okay let me jump to posts now. 10:48.520 --> 10:52.270 And the normal pagination works okay. 10:52.300 --> 10:55.360 Once we search for something. 10:56.650 --> 11:00.340 See how the search query is being preserved. 11:01.630 --> 11:05.590 So when we paginate, no information is lost. 11:05.590 --> 11:14.650 And now this partial is truly reusable because all the info that it needs is the total pages and current 11:14.650 --> 11:23.590 page and all the other info it can get from the URL query parameters.