This episode is for members only
Sign up to access "Build Your Own PHP Framework" right now.
Get started
Already a member? Sign in to continue
Playing
50. Building a pagination view with Twig
Episodes
01. Setting up
02. Container
03. Application config
04. Routing and controllers
05. Views
06. Database
07. Authentication
08. CSRF Protection
09. Flashing messages
10. Validation
11. Middleware
12. Exception handling
Transcript
00:00
OK. So we are paginating from our controller.
00:03
And over on the home view, we're just iterating through all of these users. What we now want to do, if we have users, because we don't want to render out any pagination links
00:13
if we don't have users, we want to dump these to the page. Let's do this how we would do this from this users object, which remember is now a length-aware paginator.
00:24
And we'll see this break, because the pagination is tied into Laravel by default. But of course, we can use this outside of the framework. So we're going to go and create out an if statement in here.
00:36
And we're going to say is not empty. So we're basically checking if we do have any users, first of all. If we don't have any users, there's
00:43
no point outputting them links. So this works as normal. Everything is good. Now down here inside of this if statement,
00:50
the paginator has a method on it which allows you to output the links. So all we need to do is access that paginator object, which remember we have called users.
00:59
And we just want to invoke the links method. That is all we need to do. And that will return to us the markup needed. It will populate this with how many pages we have.
01:09
And it will click through for us. Now if we go over and give this a refresh, we've got a few issues here. So you can see that we have got a must be a valid callback,
01:18
no array or string given. Everything is sort of broken here. We need to figure out how to customize this stuff. So what we are going to do is go over to our app service
01:28
provider where we were using our page resolvers and query string resolvers. And we are going to set the view resolver of how the paginator should actually resolve a view.
01:40
We know that is through our own view class. And also use the default pagination view, which we'll create as a Twig template. So let's start with the first one.
01:51
That is the view factory resolver. So our view functionality is just from the container under that view class that we created. We'll be going over to this in just a second.
02:03
But let's just return that now and make sure we pull view out of our container. The next thing we need to configure is the default view. So the default view for us, we can just
02:12
choose where we want to put this. Let's put it in a pagination directory and call it default.twig. If you want to style out different ones,
02:20
you can just create new ones, maybe if you're using a specific CSS framework. So over in our view section, let's create out a directory called pagination.
02:30
And then let's create a file out in here called default.twig. And that is going to contain our pagination functionality. OK, let's head back over to the browser and give this a refresh and see what happens.
02:44
OK, so what's happening here is when we use our factory here, or the factory resolver, the factory that we are returning needs to have a method called make. Now, we don't have a method called make.
02:59
If we just remind ourselves over on our view class, we have got a render method. Render and make are going to do exactly the same thing. So what we can do is create an alias for this
03:09
and then just call the render method. So let's go and create out a make method here. And by the way, the reason this is happening is the make method exists within Laravel on the view factory,
03:21
whereas with us, we've called this render. So it's just a difference of name. So in here, let's go ahead and take in the view that we want to pass in, and optionally,
03:31
any data that needs to be passed down to that view. And let's just defer that to the render method we've created. So we're essentially just creating an alias here. So we'll pass the view in, we'll pass the data in,
03:43
and we should be good. So now when behind the scenes, the paginator tries to call make to render that view, it will call that but call our own render method.
03:51
Let's give the page a refresh, and there we go. So we now have a pagination view created on the page. OK, so there are a bunch of methods over on the paginator that we get returned.
04:02
Let's just open that up again just to remind ourselves. So if we open up our length aware paginator from this package, let's have a look at what we've got inside of here.
04:13
So we've got a bunch of helper methods here. And what we should also have over in our abstract paginator is a few more methods as well. So let's have a look here.
04:23
We've got has pages, we've got last item, we've got on first page, on last page. All of these methods, because they are effectively now getting returned down to our view in here,
04:36
we can just build up a template which uses all of these methods in order to display pagination. Now, I'm not going to go through this whole thing, because once you've understood the very basics of just calling
04:48
a method on a class, this should be pretty straightforward. So I'm going to go ahead and grab the code from the GitHub repository and just paste this in. So if you want to go ahead and copy and paste this,
04:57
head over to the source code and just copy and paste it into your project. So as you can see, we're using for the first entire wrapper for this is if it has pages.
05:06
So if there aren't any pages, or if we're just on page one and there aren't any more pages, there's no point in rendering out our pagination. Then we create out this base nav element.
05:16
Inside of here, we have an unordered list with a class of pagination, which you can use to style it, change this around, whatever you need to do.
05:23
If we're on the first page, we don't render out a link here to go to the previous page URL. That's another method that we can call to grab the URL for the previous page.
05:33
We just show an arrow instead. So it's really just going through and making sure that everything looks normal, and we can't click on things that we shouldn't be able to.
05:42
Next down here, we have this element. So elements are just each of the items within the pagination. So if the element is not iterable, that is going to be an element that doesn't exist as a page.
05:55
So it will be some other element, like three dots that separate a bunch of pages, something like that. It could be anything.
06:02
Now down here, if the element is iterable, it means we can iterate over each of the pages. And if the page is the current page, we do a similar thing. And we just have a list item with no link.
06:13
Otherwise, here we have a link. So we're basically just iterating over every single page that we want to display. And if, let's say, we had 1,000 pages,
06:22
it wouldn't show 1,000 numbers. It would show a few dots in between. And this is this element just here. So that's pretty much it.
06:29
Again, this is exactly the same as the hasPrevious pages. If we do have any more pages, we show a next link. Otherwise, we just show an arrow. So now that we've pasted this in, if we give this a refresh,
06:41
sure enough, we've got all of the markup here with page 1. And we've got page 2. If you had any more pages, that would show more with the ellipsis in between to break them up.
06:50
Now of course, once again, we're just dumping out HTML here. So because we trust this source and we've built this up ourselves, we can comfortably go ahead and use the raw filter to output the HTML.
07:02
OK, let's head over and give that a refresh. And there we go. It doesn't look great at the moment, much like everything else we've done.
07:08
But of course, you can style this up. So we're on the first page, which means this isn't clickable. This arrow here means we can't go back a page
07:15
because it's just a standard HTML entity and nothing we can click. If we click on page 2, sure enough, we go over to page 2. And that swaps everything over.
07:24
And there we go. We have our pagination working. Our back and next links work. And of course, if you had more data, you'd see more pages.
07:31
And there we go. Our pagination is now complete. And you can customize this default pagination template to do whatever you want to do.
54 episodes•4 hrs 45 mins•1 year ago
Overview
Starting completely from scratch, build a modern PHP framework with all the features you’d expect.
Whether you’re new to PHP or not, this is a great exercise for learning what happens under the hood, arming you with knowledge you can apply anywhere you use PHP.
We’ll cover routing, controllers, views, the container, accessing the database, models, authentication, config, CSRF protection, exception handling, pagination, validation, flashing messages and much more.
Let’s dive in and build a PHP framework, step-by-step!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!