Build Your Own PHP Framework

Sign in Get started

This episode is for members only

Sign up to access "Build Your Own PHP Framework" right now.

Already a member? Sign in to continue

Playing

50. Building a pagination view with Twig

Episodes

0%

Your progress

Total: 4h 45m
Played: 0m
Remaining: 4h 45m

Join or sign in to track your progress

01. Setting up

01. Introduction

02. Composer and PSR-4 Autoloading

03. Bootstrapping and structure

04. Error reporting with Ignition

02. Container

05. Using a container

06. Adding service providers

07. Autowiring with reflection

08. Refactoring to a singleton

03. Application config

09. Building the Config class

10. Reading and merging config files

11. Registering service providers through config

12. Using env files

04. Routing and controllers

13. Everything starts with requests

14. Adding routing

15. Responding in routes

16. Cleaning up responding

17. Defining routes in a separate file

18. Creating a controller

19. Using services inside controllers

05. Views

20. Installing Twig

21. Rendering a view

22. Debugging in Twig

23. Creating a base layout

24. Page titles in Twig

25. Creating a Twig config helper

06. Database

26. Setting up and querying the database

27. Working with models

28. Creating an example user profile page

07. Authentication

29. Setting up Sentinel

30. Creating the registration flow

31. Registering and authenticating a user

32. Showing authenticated state

34. Logging out

08. CSRF Protection

35. Protecting routes with CSRF

36. Adding tokens to forms

09. Flashing messages

37. Basic session flashing

38. Creating a Twig helper and flashing globally

10. Validation

39. Validating the login form

40. Manually adding validation errors

41. Validating the registration form

42. Custom validation rules

11. Middleware

43. How middleware works

44. Adding auth middleware and grouping routes

45. Persisting old form data

12. Exception handling

46. Creating an exception handler

47. Custom 404 (and other error) views

48. Rendering views for CSRF errors

13. Pagination

49. Paginating with Eloquent

50. Building a pagination view with Twig

14. Global helpers

51. Registering functions with PSR-4

52. Container resolution helper

53. View and config helpers

54. Route generator helper

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.

Episode summary

In this episode, we dive into building a fully custom pagination view using Twig. We start off by making sure our controller is correctly paginating the users, and in the home view, we iterate through those users. Before rendering any pagination links, though, we check if there are actually any users to display—no point showing navigation if there's nothing to paginate!

Next, we look at how Laravel deals with pagination views by default and why that doesn't directly work in our setup. So we hook into the paginator's configuration to tell it about our custom view system and the location of our default pagination template (which will live in pagination/default.twig). There are a couple of gotchas here, especially with method names (like needing a make method instead of render on our view class), so we fix those up quickly.

With the infrastructure in place, we grab some handy helper methods from the paginator for creating page links, handling the first/last page states, and adding those three-dot ellipses when there are tons of pages. Instead of building this whole template by hand, we grab a fully-formed snippet from the source code (feel free to copy-paste from the repo!). This template neatly wraps all the logic: previous/next links, ellipses, and disables links when appropriate.

Once that's dropped in, everything comes to life! The rendered pagination component updates seamlessly as you change pages, and you can easily style it however you like. By the end, you’ve got a robust, customizable Twig-powered pagination system hooked up and working smoothly.

Episode discussion

No comments, yet. Be the first!