Okay.
So last time we have created and I think successfully the functionality of Paginating the results on
the posts page, we have verified that passing different query parameters.
What we are missing is the visual way to navigate between pages.
And this would be our job right now.
What I would like to do is to make this functionality reusable.
That's why I think the good idea is to create a view partial that we can easily use in different other
views, without having to apply the same visual template logic again and again.
Now, this would work the way that we just need to pass some specific parameters like what is the current
page and how many total pages we have.
And then it will just render links to specific pages.
So without further ado, I think we should just go ahead and create a partial.
We can call that underscore pagination.
PHP and let's just include this view inside posts.
So here we render the posts at the bottom.
Let's also add the rendering of pagination.
And we need to pass some parameters to it.
So I think that it needs the current page which we have available in this view.
And the other parameter would be total pages.
That's total pages, which we also have in this view.
Okay.
So nothing changes.
But we should have this immediately rendered.
So now every time we add something to this partial like I'm adding some text right now, this should
be immediately visible below the blog post.
So now let's work on this template so it can render the proper links.
So the first thing to check is if we have multiple pages at all.
Because if total pages is not more than one, there is no point in rendering the different pages links
because there is only one page.
So that's our first check.
If that's the case, let's add the proper semantic HTML.
So we are adding the navigation element and unordered list inside.
For every page we need to display a link.
So let's add a for loop starting at page one.
So no one likes to see the page zero, even though typically in most programming languages everything
is being indexed starting at zero.
Here we're gonna check if this index is less or equal total pages.
If so, we just increment the counter.
Okay.
Now we need to close this using end for.
And inside we are going to render a list item.
So what we are trying to do here is to display a link for every single page that is available.
So this is a very simplified pagination mechanism.
But if we are on the current page I think it doesn't make sense to display a link.
So we're going to check that if the page index is the current page.
Maybe let's not use strict equality check because we never know.
Maybe the current page parameter would be passed from the URL query parameter and then it might be a
string.
So let's use just normal equality.
So if that's the case we are on the current page.
We just use a span element.
So no links.
And we output the page.
Then we need an alternative.
In other cases, we're going to display a link and let me close that with and if so.
Now going back to the case with the link, let's use an A element.
And here as well we're going to display the page index.
And now the important part.
So we add the question mark.
So we're going to pass some query parameters which is the page.
So this would be again the current index current page.
So it might look like everything will work fine as we have implemented this partial currently.
But actually there is a problem.
And the problem is that this link here ignores any other URL parameters that we might have.
And if we jump at the post controller.
We can see that both the posts and the number of total posts are being fetched, also depending on the
search query.
So if for the next page, you will create a link that will not have this search query.
Well, I think everything will just break down because initially we've calculated the pages including
the search query in calculating the number of pages.
And then if we go to another page, if we won't have this info, it will just get the total number of
posts.
Ignoring the search query.
That's why we need to make sure that this partial is also passing all the URL parameters together with
the page.
So now for the sake of presentation, let's change the limit limits to one.
What this would do is every single post would be on a separate page.
I think I can then demonstrate the problem.
So let me jump to the posts page.
And now, as expected, we've got three pages.
Let me try to use a combination of words that at least two posts have.
So now we see two pages because two posts have we inside the title or content.
That's fine.
Now see what happens if I go to the second page suddenly instead of two pages listed, we've got three
pages.
This means that all the filters that we've applied, like the search query, this information is lost.
So what we need to do is inside this pagination partial, instead of just passing the page, we need
to preserve all other query parameters That the Earl might have, because we don't know what filters
we might have to add in the future.
And every single page might use its own combination of filters.
So if this partial pagination is going to be reusable, it can't really depend on any parameters being
called search or have any other specific name.
We just need to make sure that if there is any parameter in your URL like this search one, that we
just pass it along with every single link.
And this is what we're going to do right now.
So this partial just needs to have a logical part with some PHP.
And we're going to get the query params just using this get super global.
And from it We're going to remove the page.
So I'm going to unset query params page.
Why are we doing that.
Well it's because we are generating the value of page for every single page link.
And now let's add a function called build query string.
It's going to accept an array of params and the current page and it will output a string.
So to the params array we're going to set the page.
And in PHP there is a function called http build query, which will just generate this string URL query
that we can use from the array from all the items in an associative array.
And now we're just going to use this function instead of manually generating the page.
So this will change a little bit.
We remove this param.
And here instead of this index we just call build query string to which we're going to pass the query
params.
So all the existing parameters and page is generated for every single page.
Okay let me jump to posts now.
And the normal pagination works okay.
Once we search for something.
See how the search query is being preserved.
So when we paginate, no information is lost.
And now this partial is truly reusable because all the info that it needs is the total pages and current
page and all the other info it can get from the URL query parameters.